page d'information fonctionnelle a 100%, avec toute la traduction fr et en 📝

cryptide_project/src/App.tsx

@@ -79,7 +79,7 @@ function App() {
           <IntlProvider locale={locale} messages={messages[locale]}>
             <ThemeProvider>
               <BrowserRouter>  
-                {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
+                {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} locale={locale} />}
                 <Routes>
                 
                   <Route path={`${basePath}/`} element={<NewPlay/>} />

cryptide_project/src/Components/LangDropDown.tsx

@@ -3,11 +3,33 @@ import React from 'react';
 import { NavDropdown } from 'react-bootstrap';
 import LanguageNavItem from './LangNavItem';
 import { HiLanguage } from 'react-icons/hi2';
+import ReactCountryFlag from 'react-country-flag';
 
 //@ts-ignore
-const LangDropdown = ({ changeLocale }) => {
+const localToCountryCode = (locale) => {
+  switch (locale) {
+    case 'fr':
+      return 'FR';
+    case 'en':
+      return 'GB';
+    default:
+      return 'FR';
+  }
+};
+
+
+// @ts-ignore
+const LangDropdown = ({ changeLocale, locale}) => {
+  const selectedcountryCode = localToCountryCode(locale);
   return (
-    <NavDropdown title={<HiLanguage/>} id="language-dropdown" align='end' drop='down-centered'>
+    <NavDropdown title={
+      <ReactCountryFlag
+        className="custom-flag"
+        countryCode={selectedcountryCode === null ? 'FR' : selectedcountryCode}
+        svg
+        style={{ margin: 'auto 10px 3px auto' }}
+      />
+    } id="language-dropdown" align='end' drop='down-centered'>
       <LanguageNavItem
         countryCode="FR"
         languageKey="languageSelector.french"

cryptide_project/src/Components/NavBar.tsx

@@ -31,7 +31,7 @@ import Player from '../model/Player';
 import { set } from 'lodash';
 
 // @ts-ignore
-function AppNavbar({changeLocale}) {
+function AppNavbar({changeLocale, locale}) {
     const theme = useTheme();
     const navigate = useNavigate();
     const {isLoggedIn, login, user, setUserData, manager } = useAuth();
@@ -48,6 +48,17 @@ function AppNavbar({changeLocale}) {
         navigate(`${basePath}/`)
     }
 
+    // const [selectedLanguage, setSelectedLanguage] = useState('en');
+
+    // const languageOptions = [
+    //     { value: 'fr', label: 'Français' },
+    //     { value: 'en', label: 'English' },
+    //     { value: 'es', label: 'Español' },
+    //     { value: 'pr', label: 'Portugues' },
+    //     { value: 'ru', label: 'Blyat' }
+    // ];
+    
+
     return (
         <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
             <Container>
@@ -93,6 +104,14 @@ function AppNavbar({changeLocale}) {
                         </Nav>
                     </div>
                 </Navbar.Collapse>
+                {/* <NavDropdown title={selectedLanguage} id="language-dropdown">
+                    {languageOptions.map((option) => (
+                        <NavDropdown.Item key={option.value} onSelect={() => setSelectedLanguage(option.value)}>
+                        {option.label}
+                        </NavDropdown.Item>
+                    ))}
+                </NavDropdown> */}
+                <LangDropDown changeLocale={changeLocale} locale={locale}/>
             </Container>
         </Navbar>
     );

cryptide_project/src/Pages/InfoPage.tsx

@@ -78,7 +78,7 @@ function InfoPage({locale, changeLocale}) {
                 <li><Link to="#composants-du-jeu"><span><FormattedMessage id="info.title.composant"/></span></Link></li>
                 <li><Link to="#objectif-du-jeu"><span><FormattedMessage id="info.title.objectif"/></span></Link></li>
                 <li><Link to="#deroulement-du-jeu"><span><FormattedMessage id="info.title.deroulement"/></span></Link></li>
-                <li><Link to="#deroulement-du-jeu"><span>Mode de jeu spéciaux</span></Link></li>
+                <li><Link to="#mode-de-jeu"><span>Modes de jeu spéciaux</span></Link></li>
                 <li><Link to="#indice-possible"><span><FormattedMessage id="info.title.indice_possible"/></span></Link></li>
             </ul>
         </div>
@@ -167,9 +167,9 @@ function InfoPage({locale, changeLocale}) {
             </p>
 
             <h4>
-                Interface :
+                <FormattedMessage id="info.interface"/>
             </h4>
-            <h6> Pour chacune des parties, vous aurez certains éléments d'interface à disposition :</h6>
+            <h6> <FormattedMessage id="info.interface.text"/> </h6>
             <ul>
                 <li>
                     <div className='LiInterfaceDisplay'>
@@ -182,7 +182,7 @@ function InfoPage({locale, changeLocale}) {
                             <img src={Param} alt="paramètres" height='40'/>
                         </button>
                         <p>
-                            Le bouton "<b>Paramètre</b>" permet l'affichage et la gestion de différent paramètres de la partie, comme par exemple l'option d'activé ou non le effect sonore. Il est aussi possible de choisir le nombre de noeud du mode de jeu "Enigme" à l'aide de ce bouton.
+                            <FormattedMessage id="info.interface.param"/>
                         </p>
                     </div>
                 </li>
@@ -197,7 +197,7 @@ function InfoPage({locale, changeLocale}) {
                         <img src={Reset} alt="paramètres" height='40'/>                 
                     </button>
                     <p>
-                        Le bouton "<b>Reset</b>" permet de réinitialiser l'état du graphe actuel. Si jamais vous avez trop déplacé ce dernier, ou que vous souhaitre que sont affichage soit plus propre, ce bouton est fait pour vous !
+                        <FormattedMessage id="info.interface.reset"/>
                     </p>
                 </div>
                 </li>
@@ -212,7 +212,7 @@ function InfoPage({locale, changeLocale}) {
                             <img src={Info} alt="info" height="40"/>
                         </button>
                         <p>
-                            Le bouton "<b>Information</b>" permet de rediriger vers la page de règle du jeu (celle ci). 
+                            <FormattedMessage id="info.interface.info"/>
                         </p>
                     </div>
                 </li>
@@ -228,7 +228,7 @@ function InfoPage({locale, changeLocale}) {
                         </button>
                     
                         <p>
-                            Le bouton "<b>Fiche de déduction d'indice</b>" permet l'affichage de tableau permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables pour chaque joueur.
+                            <FormattedMessage id="info.interface.fiche"/>
                         </p>
                     </div>
                 </li>
@@ -244,7 +244,7 @@ function InfoPage({locale, changeLocale}) {
                     </button>
                     
                         <p>
-                            Le bouton "<b>Indice personnel</b>" est le plus important, en effet il permet d'afficher quel est votre indice secret. Vous seul le connaissais ! Il va falloir ruser pour tromper vos amis et le garder secret le plus longtemps possible !
+                            <FormattedMessage id="info.interface.indice"/>
                         </p>
                     </div>
                 </li>
@@ -259,10 +259,11 @@ function InfoPage({locale, changeLocale}) {
                             <img src={Ceye} alt="check" height="40"/>
                         </button>
                         <p>
-                            Le bouton "<b>Vision des derniers mouvements</b>" permet à l'utilisateur de visualiser les 5 derniers coup effectué. Il agit donc vraiment ocmme un outil visuel.
+                            <FormattedMessage id="info.interface.vision"/>
                         </p>
                     </div>
                 </li>
+                {/* ajouter les bouton de telechargement de graph ? */}
             </ul>
         </section>
         <hr/>
@@ -288,6 +289,46 @@ function InfoPage({locale, changeLocale}) {
             </p>
         </section>
         <hr/>
+        <section id="mode-de-jeu">
+        <h2> <FormattedMessage id="info.mdj"/> </h2>
+        <br/>
+        <p>
+            <FormattedMessage id="info.mdj.text"/>
+        </p>
+        <h3>
+            <FormattedMessage id="info.mdj.mastermind"/>
+        </h3>
+        <br/>
+        <p>
+            <FormattedMessage id="info.mdj.mastermind.text"/>
+        </p>
+        
+        <h3>
+            <FormattedMessage id="info.mdj.enigme"/>
+        </h3>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.text"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.easy"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.easy.txt"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.medium"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.medium.txt"/>
+        </p>
+        <h4>
+            <u><FormattedMessage id="info.mdj.enigme.hard"/></u>
+        </h4>
+        <p>
+            <FormattedMessage id="info.mdj.enigme.hard.txt"/>
+        </p>
+        </section>
+        <hr/>
         <section id="indice-possible">
             <h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
             <br/>

cryptide_project/src/Translations/en.json

@@ -129,6 +129,15 @@
     "info.objectif.t3":"Counter-manipulation",
     "info.objectif.t3.text":"If a player places a square token, the questioner must also play his game by placing a square token of his color on a node of the graph. Countermanipulation becomes a formidable weapon to divert the accusation and sow confusion.",
 
+    "info.interface": "Game Interface",
+    "info.interface.text": "For each game, you will have certain interface elements available:",
+    "info.interface.param": "The 'Settings' button allows the display and management of various game settings, such as enabling or disabling sound effects. It is also possible to choose the number of nodes for the 'Enigma' game mode using this button.",
+    "info.interface.reset": "The 'Reset' button resets the current state of the graph. If you have moved it too much or want its display to be neater, this button is for you!",
+    "info.interface.info": "The 'Information' button redirects to the game rule page (this one).",
+    "info.interface.fiche": "The 'Clue Deduction Sheet' button displays a table that, along with the progress of the game, allows deducing which clues are most likely for each player.",
+    "info.interface.indice": "The 'Personal Clue' button is the most important; it displays your secret clue. Only you know it! You'll have to be clever to deceive your friends and keep it a secret for as long as possible!",
+    "info.interface.vision": "The 'Last Moves Vision' button allows the user to visualize the last 5 moves made. It acts as a visual tool.",
+
     "etape":"Step",
     "info.deroulement.e1":"Ask Strategic Questions",
     "info.deroulement.e1.text":"Each round begins with a player asking another player a question about a person on the graph. Answers are formulated by placing square or round tokens to indicate certainty or doubt as to the involvement of this person.",
@@ -140,5 +149,18 @@
     "info.indice-possible.age":"Person's age",
     "info.indice-possible.hair":"Hair color of a person",
     "info.indice-possible.sport":"Sport(s) of a person",
-    "info.indice-possible.voisin":"Character of neighbours"
+    "info.indice-possible.voisin":"Character of neighbours",
+
+    "info.mdj": "Game Modes",
+    "info.mdj.text": "There are various other game modes that allow you to add variety and make the game more or less complex.",
+    "info.mdj.mastermind": "Mastermind",
+    "info.mdj.mastermind.text": "The 'Mastermind' game mode is a solo mode where you must be able to guess the culprit using the minimum number of guesses. In this mode, you won't have any clues, but you'll need to guess them during the game. Selecting a suspect reveals the state of all clues for that suspect. It becomes possible to guess the clues and then identify the culprit!",
+    "info.mdj.enigme": "Enigma",
+    "info.mdj.enigme.text": "This is a solo mode with three difficulty levels:",
+    "info.mdj.enigme.easy": "Easy Enigma",
+    "info.mdj.enigme.easy.txt": "In this game mode, you have access to all clues, and you must guess the culprit that matches all these clues. You can practice guessing the culprit in this mode.",
+    "info.mdj.enigme.medium": "Intermediate Enigma",
+    "info.mdj.enigme.medium.txt": "In this game mode, you don't have access to clues, but you have just enough information about some suspects to be able to guess the culprit. This information will help you guess the clues, and the culprit is the suspect for whom all the clues match. If you select the wrong suspect, don't worry! You'll have information about that suspect, making it easier for you to find the culprit. The goal is to find the culprit in the minimum number of guesses.",
+    "info.mdj.enigme.hard": "Hard Enigma",
+    "info.mdj.enigme.hard.txt": "This final variant is similar to the intermediate enigma; however, you must find the culprit on the first try, or you lose! It's up to you to play! The goal is to find the culprit in the minimum amount of time."
 }

cryptide_project/src/Translations/fr.json

@@ -128,6 +128,15 @@
     "info.objectif.t3":"Contre-manipulation",
     "info.objectif.t3.text":"Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en posant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient une arme redoutable pour détourner l'accusation et semer la confusion.",
 
+    "info.interface":"Interface du jeu",
+    "info.interface.text":"Pour chacune des parties, vous aurez certains éléments d'interface à disposition :",
+    "info.interface.param":"Le bouton 'Paramètre' permet l'affichage et la gestion de différents paramètres de la partie, comme par exemple l'option d'activé ou non l' effect sonore. Il est aussi possible de choisir le nombre de nœud du mode de jeu 'Enigme' à l'aide de ce bouton.",
+    "info.interface.reset":"Le bouton 'Reset' permet de réinitialiser l'état du graphe actuel. Si jamais vous avez trop déplacé ce dernier, ou que vous souhaite que son affichage soit plus propre, ce bouton est fait pour vous !",
+    "info.interface.info":"Le bouton 'Information' permet de rediriger vers la page de règle du jeu (celle-ci).",
+    "info.interface.fiche":"Le bouton 'Fiche de déduction d'indice' permet l'affichage de tableau permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables pour chaque joueur.",
+    "info.interface.indice":"Le bouton 'Indice personnel' est le plus important, en effet, il permet d'afficher quel est votre indice secret. Vous seul le connaissez ! Il va falloir ruser pour tromper vos amis et le garder secret le plus longtemps possible !",
+    "info.interface.vision":"Le bouton 'Vision des derniers mouvements' permet à l'utilisateur de visualiser les 5 derniers coup effectué. Il agit donc vraiment comme un outil visuel.",
+    
     "etape":"Étape",
 
     "info.deroulement.e1":"Poser des Questions Stratégiques",
@@ -140,5 +149,18 @@
     "info.indice-possible.age":"Âge d'une personne",
     "info.indice-possible.hair":"Couleur de cheveux d'une personne",
     "info.indice-possible.sport":"Sport(s) d'une personne",
-    "info.indice-possible.voisin":"Caractèristique des voisins"
+    "info.indice-possible.voisin":"Caractèristique des voisins",
+
+    "info.mdj":"Modes de jeu",
+    "info.mdj.text":"Il existe différents autres modes de jeu, qui permettent de varier les plaisirs et de rendre le jeu plus ou moins complexe.",
+    "info.mdj.mastermind":"Mastermind",
+    "info.mdj.mastermind.text":"Le mode de jeu 'Mastermind' est un mode de jeu solo. Où vous devez être capable de deviner qui est le coupable en utilisant le minimum de coup. Pour cela, vous n'aurez aucun indice, mais vous allez devoir être capable de les deviner au cours de la partie. Sélectionner un suspect révéle l'état de tous les indices pour ce dernier. Il devient donc possible de deviner les indices, pour ensuite deviner le coupable !",
+    "info.mdj.enigme":"Énigme",
+    "info.mdj.enigme.text":"Il s'agit d'un mode solo, pour lequel on retrouve 3 modes de difficultés :",
+    "info.mdj.enigme.easy":"L'énigme facile",
+    "info.mdj.enigme.easy.txt":"Dans ce mode de jeu, vous avez accès à tous les indices, et vous devez deviner le coupable qui répond à tous ces indices. Vous pouvez donc vous entraîner à deviner le coupable dans ce mode.",
+    "info.mdj.enigme.medium":"L'énigme intermédiaire",
+    "info.mdj.enigme.medium.txt":"Dans ce mode de jeu, vous n'avez pas accès au indice, mais vous avez juste assez d'informations sur certains suspects pour pouvoir deviner le coupable. Ces informations vont vous permettre de deviner les indices, et le coupable est le suspect pour lequel tous les indices correspondent. Si jamais vous sélectionnez le mauvais suspect, pas de panique ! Vous aurez les informations relatives à ce dernier, ce qui vous facilitera le travail pour trouver le coupable. L'objectif est donc de trouver le coupable en un minimum de coup.",
+    "info.mdj.enigme.hard":"L'énigme difficile",
+    "info.mdj.enigme.hard.txt":"Cette dernière variante est similaire à l'énigme intermédiaire, cependant, il faudra trouver du premier coup sinon, vous aurez perdu ! À vous de jouer ! L'objectif est donc de trouver le coupable en un minimum de temps."
 }