From c083121d8dd8bc354cff44746e9d94e0e3269612 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Thu, 16 Nov 2023 11:52:11 +0100
Subject: [PATCH] ajout de la traduction dynamic des indices en fonction de la
 langue de la page :globe_with_meridians:

---
 cryptide_project/src/App.tsx            |  2 +-
 cryptide_project/src/Pages/InfoPage.tsx | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index 736245a..dacb2c0 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -78,7 +78,7 @@ function App() {
                 <Route path="/lobby" element={<Lobby/>} />
                 <Route path="/endgame" element={<EndGame/>} />
                 <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
-                <Route path="/info" element={<InfoPage/>} />
+                <Route path="/info" element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
                 {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
               </Routes>
             </BrowserRouter>
diff --git a/cryptide_project/src/Pages/InfoPage.tsx b/cryptide_project/src/Pages/InfoPage.tsx
index 5cf5cfe..014c803 100644
--- a/cryptide_project/src/Pages/InfoPage.tsx
+++ b/cryptide_project/src/Pages/InfoPage.tsx
@@ -18,7 +18,8 @@ import { HashLink as Link } from 'react-router-hash-link';
 import { ColorToHexa } from '../model/EnumExtender';
 import Color from '../model/Color';
 
-function InfoPage() { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
+//@ts-ignore
+function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
     const styles = {
         roux: { backgroundColor: ColorToHexa(Color.REDHEAD), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
         blond: { backgroundColor: ColorToHexa(Color.BLOND), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
@@ -169,29 +170,26 @@ function InfoPage() { //! cette page n'affiche que des informations et est sucep
                 <h4>
                     <FormattedMessage id="info.indice-possible.age"/>
                 </h4>
-                {/*
-                //todo voir pour le changement de lang
-                */}
-                <IndiceList instance={AgeIndice} lang='fr'/>
+                <IndiceList instance={AgeIndice} lang={locale}/>
                 
                 <h4>
                     <FormattedMessage id="info.indice-possible.hair"/>
                 </h4>
-                <IndiceList instance={ColorIndice} lang='fr'/>
-                <IndiceList instance={ColorEdgesIndice} lang='fr'/>
+                <IndiceList instance={ColorIndice} lang={locale}/>
+                <IndiceList instance={ColorEdgesIndice} lang={locale}/>
                 <hr/>
                 <h4>
                     <FormattedMessage id="info.indice-possible.sport"/>
                 </h4>
-                <IndiceList instance={SportIndice} lang='fr'/>
-                <IndiceList instance={NbSportIndice} lang='fr'/>
+                <IndiceList instance={SportIndice} lang={locale}/>
+                <IndiceList instance={NbSportIndice} lang={locale}/>
                 
                 
                 <h4>
                     <FormattedMessage id="info.indice-possible.voisin"/>
                 </h4>
-                <IndiceList instance={EdgesIndice} lang='fr'/>
-                <IndiceList instance={NbEdgesIndice} lang='fr'/>
+                <IndiceList instance={EdgesIndice} lang={locale}/>
+                <IndiceList instance={NbEdgesIndice} lang={locale}/>
                 <hr/>
             </section>