Translate all files

src/components/GameController.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { useC2C } from "../hooks/useC2C";
 import { nanoid } from "nanoid";
@@ -33,6 +34,7 @@ export const GameController = ({
   boardConfig,
   setBoardConfig,
 }) => {
+  const { t } = useTranslation();
   const [c2c, joined, isMaster] = useC2C();
   const [downloadURI, setDownloadURI] = React.useState({});
   const [date, setDate] = React.useState(Date.now());
@@ -208,16 +210,16 @@ export const GameController = ({
         overflowY: "scroll",
       }}
     >
-      <h2>Games</h2>
+      <h2>{t("Games")}</h2>
       <button onClick={loadTikTok}>TikTok</button>
       <button onClick={loadCard}>Card</button>
       <button onClick={loadGloomhaven}>Gloomhaven</button>
       <button onClick={loadSettlers}>Settlers of Catan</button>
-      <h2>Save/Load</h2>
-      <button onClick={loadLocalSavedGame}>Load last game</button>
+      <h2>{t("Save/Load")}</h2>
+      <button onClick={loadLocalSavedGame}>{t("Load last game")}</button>
       <LoadGame onLoad={onLoadSavedGame} />
       <a href={downloadURI} download={`save_${date}.json`}>
-        Save game
+        {t("Save game")}
       </a>
       <div
         style={{
@@ -226,7 +228,7 @@ export const GameController = ({
           color: "white",
         }}
       >
-        <h3>Game Box Content</h3>
+        <h3>{t("Box Content")}</h3>
         <AvailableItems />
       </div>
     </div>

src/components/LoadGame.js

@@ -1,7 +1,10 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+
 import { useDropzone } from "react-dropzone";
 
 const LoadGame = ({ onLoad = () => {} }) => {
+  const { t } = useTranslation();
   const onDrop = React.useCallback(
     (acceptedFiles) => {
       acceptedFiles.forEach((file) => {
@@ -28,7 +31,7 @@ const LoadGame = ({ onLoad = () => {} }) => {
   return (
     <div {...getRootProps()}>
       <input {...getInputProps()} />
-      <p>Drag &apos;n&apos; drop some files here, or click to select files</p>
+      <p>{t("Dragn drop file here")}</p>
     </div>
   );
 };

src/i18n/en.json

@@ -1,3 +1,9 @@
 {
-  "Please select or load a game": "Please select or load a game"
+  "Please select or load a game": "Please select or load a game…",
+  "Games": "Games",
+  "Save/Load": "Save/Load",
+  "Save game": "Save game",
+  "Box Content": "Box Content",
+  "Load last game": "Load last game",
+  "Dragn drop file here": "Drop file here to load them"
 }

src/i18n/fr.json

@@ -1,3 +1,9 @@
 {
-  "Please select or load a game": "Veuillez choisir un jeu"
+  "Please select or load a game": "Veuillez choisir un jeu…",
+  "Games": "Jeux",
+  "Save/Load": "Sauvegardes",
+  "Save game": "Sauvegarder",
+  "Box Content": "Boite",
+  "Load last game": "Dernière partie",
+  "Dragn drop file here": "Déposez un fichier ici pour charger une partie"
 }