implémentation de toute la logique de traduction dans la page Home (avec le texte actuel 🎨

cryptide_project/src/Components/NavBar.js

@@ -1,8 +1,17 @@
 import React from 'react';
+
+/* Naviagtion */
 import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
+
+/* Lang */
+import { FormattedMessage } from 'react-intl';
+
+/* Icon */
 import { BiLogInCircle } from 'react-icons/bi';
-import { BsFillPersonPlusFill } from 'react-icons/bs'
+import { BsFillPersonPlusFill } from 'react-icons/bs';
+import { HiLanguage } from 'react-icons/hi2';
 
+/* Components */
 import './NavBar.css';
 
 function AppNavbar({ changeLocale }) {
@@ -18,22 +27,34 @@ function AppNavbar({ changeLocale }) {
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
-                <NavDropdown title="Jouer" className="navbar-title" id="basic-nav-dropdown">
-                    <NavDropdown.Item href="jouer">Jouer solo</NavDropdown.Item>
+                <NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
+                    <NavDropdown.Item href="jouer"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
                     <NavDropdown.Divider />
-                    <NavDropdown.Item href="jouer">Créer une partie</NavDropdown.Item>
-                    <NavDropdown.Item href="jouer">Rejoindre</NavDropdown.Item>
+                    <NavDropdown.Item href="jouer"><FormattedMessage id="create_room"/> </NavDropdown.Item>
+                    <NavDropdown.Item href="jouer"><FormattedMessage id="join"/> </NavDropdown.Item>
                 </NavDropdown>
             </Nav>
             <div className='leftdiv'>
                 <Nav className="ml-auto navbar-title-dd">
-                    <Nav.Link href="login" className='navbar-title-dd'> <BiLogInCircle/> Log in</Nav.Link>
-                    <Nav.Link href="signup" className='navbar-title-dd'> <BsFillPersonPlusFill/> Sign up</Nav.Link>
+                    <Nav.Link href="login" className='navbar-title-dd'> 
+                        <BiLogInCircle/>
+                        <FormattedMessage id="log_in"/> 
+                    </Nav.Link>
+                    <Nav.Link href="signup" className='navbar-title-dd'> 
+                        <BsFillPersonPlusFill/>
+                        <FormattedMessage id="sign_up"/> 
+                    </Nav.Link>
                 </Nav>
                 <Nav className="me-auto">
-                    <NavDropdown title="Language" className="navbar-title" id="basic-nav-dropdown">
-                        <NavDropdown.Item onClick={() => changeLocale('fr')}>Français</NavDropdown.Item>
-                        <NavDropdown.Item onClick={() => changeLocale('en')}>Anglais</NavDropdown.Item>
+                    <NavDropdown 
+                    title={<span><HiLanguage /></span>}
+                    className="navbar-title" id="basic-nav-dropdown">
+                        <NavDropdown.Item onClick={() => changeLocale('fr')}> 
+                            <FormattedMessage id="languageSelector.french"/> 
+                        </NavDropdown.Item>
+                        <NavDropdown.Item onClick={() => changeLocale('en')}> 
+                            <FormattedMessage id="languageSelector.english"/> 
+                        </NavDropdown.Item>
                     </NavDropdown>
                 </Nav>
             </div>

cryptide_project/src/Pages/Home.js

@@ -13,21 +13,21 @@ function Home() {
         <div className="left-section">
 
             <div>
-                <h2>L'HISTOIRE</h2>
+                <h2><FormattedMessage id="home.histoire.title"/></h2>
                 <p>
                     <FormattedMessage id="home.histoire" />
                 </p>
             </div>
             <div>
-                <h2>LE JEU</h2>
+                <h2><FormattedMessage id="home.jeu.title"/></h2>
                 <p>
                 <FormattedMessage id="home.jeu" />
                 </p>
             </div>
             <div>
-                <h2>LES +</h2>
+                <h2><FormattedMessage id="home.plus.title"/></h2>
                 <ul>
-                    <li><FormattedMessage id="home.plus.truc"/></li>
+                    <li><FormattedMessage id="home.plus.1"/></li>
                     <li><FormattedMessage id="home.plus.2"/></li>
                     <li><FormattedMessage id="home.plus.3"/></li>
                 </ul>
@@ -37,15 +37,15 @@ function Home() {
         <div className="vertical-divider"></div>
 
         <div className="right-section">
-            <h3>Temps :<t/> 45 minutes</h3>
-            <h3>Joueurs :<t/> 3 à 5 joueurs</h3>
-            <h3>Age :<t/> 10 ans et +</h3>
+            <h3><FormattedMessage id="game.time"/></h3>
+            <h3><FormattedMessage id="game.players"/></h3>
+            <h3><FormattedMessage id="game.age"/></h3>
             <p>-------------------------------</p>
-            <h3> <u>Créé par :</u><br/> Hal Duncan & Ruth Veevers</h3>
-            <h3> <u>Illustré par :</u><br/> Kwanchai Moriya</h3>
+            <h3> <u><FormattedMessage id="game.createdBy"/></u><br/> Hal Duncan & Ruth Veevers</h3>
+            <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
             {/* <button>Jouer au jeu</button> */}
             <br/>
-            <Link to="/jouer" className='button'>Aller à la page Page2</Link>
+            <Link to="/jouer" className='button'> <FormattedMessage id="play"/> </Link>
         </div>
     </div>
     );

cryptide_project/src/Translations/en.json

@@ -1,12 +1,30 @@
 {
-    "languageSelector": {
-        "french": "French",
-        "english": "English"
-    },
-    
+    "languageSelector.french": "French",
+    "languageSelector.english": "English",
+
+    "home.histoire.title": "HISTORY",
     "home.histoire": "Cryptozoology studies the traces of legendary monsters: cryptids. Yetis, Chupacabra, beast of the gevaudan, Dahut, etc. , are very serious topics for you… Cross the clues and be the first to discover them!",
+    
+    "home.jeu.title": "THE GAME",
     "home.jeu": "Each player has a clue on the field where the creature is located. By cross-referencing your information, there can only be one box. But the goal is to be the first to find it. Ask your colleagues, and nevertheless competitors. They can only answer you by «no» or «maybe», with a lot of logic and a bit of audacity, you can enter the legend!",
+    
+    "home.plus.title": "STRENGTH",
     "home.plus.1": "A mind-blowing deduction mechanism.",
     "home.plus.2": "An immense replayability.",
-    "home.plus.3": "A surprising and strong theme."
+    "home.plus.3": "A surprising and strong theme.",
+
+    "game.time": "Time : 45 minutes",
+    "game.players": "Players : 3 to 5 players",
+    "game.age": "Age: 10 years and over",
+    "game.createdBy": "Created By :",
+    "game.illustratedBy": "Illustrated By :",
+
+    "log_in":" Log in ",
+    "sign_up":" Sign up ",
+
+    "join" : "Join",
+    "create_room" : "Create room",
+    "play_solo" : "Single player",
+
+    "play" : "PLAY"
 }

cryptide_project/src/Translations/fr.json

@@ -2,9 +2,29 @@
     "languageSelector.french": "Français",
     "languageSelector.english": "Anglais",
 
+    "home.histoire.title": "L'HISTOIRE",
     "home.histoire": "La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, etc., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!",
+    
+    "home.jeu.title": "LE JEU",
     "home.jeu": "Chaque joueur possède un indice sur le terrain où se trouve la créature. En recoupant vos informations, il ne peut y avoir qu'une case qui y corresponde. Mais le but est d'être le premier à la trouver. Interrogez vos collègues, et néanmoins concurrents. Ils ne peuvent vous répondre que par «non» ou «peut-être», avec beaucoup de logique et un brin d'audace, vous pourrez rentrer dans la légende!",
+    
+    "home.plus.title": "LES +",
     "home.plus.1": "Une mécanique de déduction époustouflante.",
     "home.plus.2": "Une rejouabilité immense.",
-    "home.plus.3": "Un thème surprenant et fort."
-}
+    "home.plus.3": "Un thème surprenant et fort.",
+
+    "game.time": "Temps : 45 minutes",
+    "game.players": "Joueurs : 3 à 5 joueurs",
+    "game.age": "Âge : 10 ans et +",
+    "game.createdBy": "Créé par :",
+    "game.illustratedBy": "Illustré par :",
+
+    "log_in":" Se connecter ",
+    "sign_up":" S'inscrire ",
+
+
+    "join" : "Rejoindre",
+    "create_room" : "Créer une partie",
+    "play_solo" : "Jouer seul",
+    "play" : "JOUER"
+}