From 04c71e1b7603513be1e9e8f6900b734be5dff35f Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Thu, 16 Nov 2023 14:26:26 +0100
Subject: [PATCH] ajout de la partie interface dans la page d'info :memo:

---
 cryptide_project/src/Pages/InfoPage.css |  10 +
 cryptide_project/src/Pages/InfoPage.tsx | 357 ++++++++++++++----------
 2 files changed, 226 insertions(+), 141 deletions(-)

diff --git a/cryptide_project/src/Pages/InfoPage.css b/cryptide_project/src/Pages/InfoPage.css
index a8a7642..8c8786b 100644
--- a/cryptide_project/src/Pages/InfoPage.css
+++ b/cryptide_project/src/Pages/InfoPage.css
@@ -63,6 +63,16 @@ li *{
     text-decoration: none;
 }
 
+.LiInterfaceDisplay{
+    display: flex;
+    justify-content: start;
+    margin-bottom: 20px;
+}
+
+.LiInterfaceDisplay p{
+    font-size: medium;
+}
+
 h2 {
     position: relative;
     padding: 0;
diff --git a/cryptide_project/src/Pages/InfoPage.tsx b/cryptide_project/src/Pages/InfoPage.tsx
index 014c803..dadd9ac 100644
--- a/cryptide_project/src/Pages/InfoPage.tsx
+++ b/cryptide_project/src/Pages/InfoPage.tsx
@@ -17,9 +17,19 @@ import IndiceList from '../Components/IndiceList';
 import { HashLink as Link } from 'react-router-hash-link';
 import { ColorToHexa } from '../model/EnumExtender';
 import Color from '../model/Color';
+import "./InGame.css"
+import {useTheme} from '../Style/ThemeContext'
+import Check from "../res/icon/checkboxGreen.png";
+import Alert from 'react-bootstrap/Alert';
+import MGlass from "../res/icon/magnifying-glass.png";
+import Param from "../res/icon/param.png";
+import Info from "../res/icon/infoGreen.png"; //todo changer la couleur de l'icon
 
 //@ts-ignore
-function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
+function InfoPage({locale, changeLocale}) {
+    
+    const theme = useTheme();
+
     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' },
@@ -28,7 +38,7 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
         chatain: { backgroundColor: ColorToHexa(Color.BROWN), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
     };
     return (
-        
+        //! Il faudra possiblement faire une gestion des mode de jeu, pour modifier les regles en fonction de ce dernier.
     <div className='infoPage'>
         <h1><FormattedMessage id="informations"/></h1>
         
@@ -49,155 +59,220 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
             </ul>
         </div>
 
-            <section id="composants-du-jeu">
-                <h2><FormattedMessage id="info.pions"/> :</h2>
-                    <h4>
-                        <FormattedMessage id="info.sommaire"/> 
-                    </h4>
-                    <h6><FormattedMessage id="info.composant.text"/></h6>
-                <ul>
-                    <p>
-                        <li><h5 className='h5title'><FormattedMessage id="info.composant.carre.title"/> : 🟪🟦🟩🟨🟥🟫</h5></li>
-                        <FormattedMessage id="info.composant.carre"/>
-
-                        <li><h5 className='h5title'><FormattedMessage id="info.composant.rond.title"/> : 🟣🔵🟢🟡🔴🟤</h5></li>
-                        <FormattedMessage id="info.composant.rond"/>
-                    </p>
-                </ul>
-                    <hr/>
-                    <h4>
-                        <FormattedMessage id="info.car_perso"/>
-                    </h4>
-                    <h6><FormattedMessage id="info.composant.textcar"/></h6>
-                    <p>
-                        {/* 
-                            //TODO mettre icon des ages apres le merge
-                        */}
-                        <h5 className='h5title'><FormattedMessage id="info.composant.age.title"/> :</h5> 
-                        <FormattedMessage id="info.composant.age"/><Link to="#indice-possible"><FormattedMessage id="info.composant.age.link"/></Link>.
-
-                        <h5 className='h5title'><FormattedMessage id="info.composant.hair_col.title"/> :</h5>
-                            <FormattedMessage id="info.composant.hair_col"/>
-                        <ul>
-                            <li>
-                                <span style={styles.blanc}></span>
-                                <FormattedMessage id="hair.blanc"/>
-                            </li>
-                            <li>
-                                <span style={styles.blond}></span>
-                                <FormattedMessage id="hair.blond"/>
-                            </li>
-                            <li>
-                                <span style={styles.roux}></span>
-                                <FormattedMessage id="hair.roux"/>
-                            </li>
-                            <li>
-                                <span style={styles.chatain}></span>
-                                <FormattedMessage id="hair.chatain"/>
-                            </li>
-                            <li>
-                                <span style={styles.noir}></span>
-                                <FormattedMessage id="hair.noir"/>
-                            </li>
-                        </ul>
-
-                        <h5 className='h5title'><FormattedMessage id="info.composant.sport.title"/> : ⚾🏀🎳⚽🎾</h5>
-                        <FormattedMessage id="info.composant.sport"/>
-                            <ul>
-                                <li>⚾ <FormattedMessage id="info.composant.baseball"/></li>
-                                <li>🏀 <FormattedMessage id="info.composant.basketball"/></li>
-                                <li>🎳 <FormattedMessage id="info.composant.bowling"/></li>
-                                <li>⚽ <FormattedMessage id="info.composant.football"/></li>
-                                <li>🎾 <FormattedMessage id="info.composant.tennis"/></li>
-                            </ul>
-                            <FormattedMessage id="info.composant.sport.bis"/>                    
-                    </p>
-            </section>
-            <hr/>
-            <section id="objectif-du-jeu">
-                <h2><FormattedMessage id="info.title.objectif"/> :</h2>
-                <p>
-                    <FormattedMessage id="info.objectif.intro"/>
-                </p>
+        <section id="composants-du-jeu">
+            <h2><FormattedMessage id="info.pions"/> :</h2>
                 <h4>
-                    <FormattedMessage id="info.objectif.t1"/> :
+                    <FormattedMessage id="info.sommaire"/> 
                 </h4>
+                <h6><FormattedMessage id="info.composant.text"/></h6>
+            <ul>
                 <p>
-                    <FormattedMessage id="info.objectif.t1.text"/>
-                </p>
-                <h4><FormattedMessage id="info.objectif.t2"/> :</h4>
-                <p>
-                    <FormattedMessage id="info.objectif.t2.text"/>
-                </p>
-                <h4><FormattedMessage id="info.objectif.t3"/> :</h4>
-                <p>
-                    <FormattedMessage id="info.objectif.t3.text"/>
-                </p>
+                    <li><h5 className='h5title'><FormattedMessage id="info.composant.carre.title"/> : 🟪🟦🟩🟨🟥🟫</h5></li>
+                    <FormattedMessage id="info.composant.carre"/>
 
-                <h4>
-                    Interface :
-                    {/* 
-                    //TODO
-                    */}
-                </h4>
-            </section>
-            <hr/>
-            <section id="deroulement-du-jeu">
-                <h2><FormattedMessage id="info.title.deroulement"/> :</h2>
-                <h4>
-                    <u><FormattedMessage id="etape"/> 1</u> : <FormattedMessage id="info.deroulement.e1"/>
-                </h4>
-                <p>
-                    <FormattedMessage id="info.deroulement.e1.text"/>
-                </p>
-                <h4>
-                    <u><FormattedMessage id="etape"/> 2</u> : <FormattedMessage id="info.deroulement.e2"/>
-                </h4>
-                <p>
-                    <FormattedMessage id="info.deroulement.e2.text"/>
+                    <li><h5 className='h5title'><FormattedMessage id="info.composant.rond.title"/> : 🟣🔵🟢🟡🔴🟤</h5></li>
+                    <FormattedMessage id="info.composant.rond"/>
                 </p>
+            </ul>
+                <hr/>
                 <h4>
-                    <u><FormattedMessage id="etape"/> 3</u> : <FormattedMessage id="info.deroulement.e3"/>
+                    <FormattedMessage id="info.car_perso"/>
                 </h4>
+                <h6><FormattedMessage id="info.composant.textcar"/></h6>
                 <p>
-                    <FormattedMessage id="info.deroulement.e3.text"/>
+                    {/* 
+                        //TODO mettre icon des ages apres le merge
+                    */}
+                    <h5 className='h5title'><FormattedMessage id="info.composant.age.title"/> :</h5> 
+                    <FormattedMessage id="info.composant.age"/><Link to="#indice-possible"><FormattedMessage id="info.composant.age.link"/></Link>.
+
+                    <h5 className='h5title'><FormattedMessage id="info.composant.hair_col.title"/> :</h5>
+                        <FormattedMessage id="info.composant.hair_col"/>
+                    <ul>
+                        <li>
+                            <span style={styles.blanc}></span>
+                            <FormattedMessage id="hair.blanc"/>
+                        </li>
+                        <li>
+                            <span style={styles.blond}></span>
+                            <FormattedMessage id="hair.blond"/>
+                        </li>
+                        <li>
+                            <span style={styles.roux}></span>
+                            <FormattedMessage id="hair.roux"/>
+                        </li>
+                        <li>
+                            <span style={styles.chatain}></span>
+                            <FormattedMessage id="hair.chatain"/>
+                        </li>
+                        <li>
+                            <span style={styles.noir}></span>
+                            <FormattedMessage id="hair.noir"/>
+                        </li>
+                    </ul>
+
+                    <h5 className='h5title'><FormattedMessage id="info.composant.sport.title"/> : ⚾🏀🎳⚽🎾</h5>
+                    <FormattedMessage id="info.composant.sport"/>
+                        <ul>
+                            <li>⚾ <FormattedMessage id="info.composant.baseball"/></li>
+                            <li>🏀 <FormattedMessage id="info.composant.basketball"/></li>
+                            <li>🎳 <FormattedMessage id="info.composant.bowling"/></li>
+                            <li>⚽ <FormattedMessage id="info.composant.football"/></li>
+                            <li>🎾 <FormattedMessage id="info.composant.tennis"/></li>
+                        </ul>
+                        <FormattedMessage id="info.composant.sport.bis"/>                    
                 </p>
-            </section>
+        </section>
+        <hr/>
+        <section id="objectif-du-jeu">
+            <h2><FormattedMessage id="info.title.objectif"/> :</h2>
+            <p>
+                <FormattedMessage id="info.objectif.intro"/>
+            </p>
+            <h4>
+                <FormattedMessage id="info.objectif.t1"/> :
+            </h4>
+            <p>
+                <FormattedMessage id="info.objectif.t1.text"/>
+            </p>
+            <h4><FormattedMessage id="info.objectif.t2"/> :</h4>
+            <p>
+                <FormattedMessage id="info.objectif.t2.text"/>
+            </p>
+            <h4><FormattedMessage id="info.objectif.t3"/> :</h4>
+            <p>
+                <FormattedMessage id="info.objectif.t3.text"/>
+            </p>
+
+            <h4>
+                Interface :
+            </h4>
+            <h6> Pour chacune des parties, vous aurez certains éléments d'interface à disposition :</h6>
+            <ul>
+                <li>
+                    <div className='LiInterfaceDisplay'>
+                        <button className='button'
+                            style={{ 
+                                backgroundColor: theme.colors.tertiary,
+                                borderColor: theme.colors.secondary,
+                                margin:"0 20px"
+                            }}>
+                            <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 le language, l'aide ... .
+                        </p>
+                    </div>
+                    <Alert variant='danger'>
+                        Attention, cette partie ne peut pas être complétée tant que tout les paramètres n'ont pas été choisis !
+                    </Alert>
+                </li>
+                <li>
+                    <div className='LiInterfaceDisplay'>
+                        <button className='button' 
+                            style={{ 
+                                backgroundColor: theme.colors.tertiary,
+                                borderColor: theme.colors.secondary,
+                                margin:"0 20px"
+                            }}>
+                            <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). 
+                            {/*
+                                //! mais est ce que nous devons rediriger sur les indices possibles ?
+                            */} 
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <div className='LiInterfaceDisplay'>
+                        <button className='button'
+                            style={{ 
+                                backgroundColor: theme.colors.tertiary,
+                                borderColor: theme.colors.secondary,
+                                margin:"0 20px"
+                            }}>
+                            <img src={Check} alt="check" height="40"/>
+                        </button>
+                    
+                        <p>
+                            Le bouton "<b>Fiche de déduction d'indice</b>" permet l'affichage de tableau dynamic permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables.
+                        </p>
+                    </div>
+                    <Alert variant='danger'>
+                        Attention, cette partie ne peut pas être complétée tant que la page et l'algorithme dédié ne sont pas fait !
+                    </Alert>
+                </li>
+                <li>
+                    <div className='LiInterfaceDisplay'>
+                    <button className='button'
+                        style={{ 
+                            backgroundColor: theme.colors.tertiary,
+                            borderColor: theme.colors.secondary,
+                            margin:"0 20px"
+                        }}>
+                        <img src={MGlass} alt="indice" height="40"/>
+                    </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 !
+                        </p>
+                    </div>
+                </li>
+            </ul>
+        </section>
+        <hr/>
+        <section id="deroulement-du-jeu">
+            <h2><FormattedMessage id="info.title.deroulement"/> :</h2>
+            <h4>
+                <u><FormattedMessage id="etape"/> 1</u> : <FormattedMessage id="info.deroulement.e1"/>
+            </h4>
+            <p>
+                <FormattedMessage id="info.deroulement.e1.text"/>
+            </p>
+            <h4>
+                <u><FormattedMessage id="etape"/> 2</u> : <FormattedMessage id="info.deroulement.e2"/>
+            </h4>
+            <p>
+                <FormattedMessage id="info.deroulement.e2.text"/>
+            </p>
+            <h4>
+                <u><FormattedMessage id="etape"/> 3</u> : <FormattedMessage id="info.deroulement.e3"/>
+            </h4>
+            <p>
+                <FormattedMessage id="info.deroulement.e3.text"/>
+            </p>
+        </section>
+        <hr/>
+        <section id="indice-possible">
+            <h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
+            <br/>
+            <h4>
+                <FormattedMessage id="info.indice-possible.age"/>
+            </h4>
+            <IndiceList instance={AgeIndice} lang={locale}/>
+            
+            <h4>
+                <FormattedMessage id="info.indice-possible.hair"/>
+            </h4>
+            <IndiceList instance={ColorIndice} lang={locale}/>
+            <IndiceList instance={ColorEdgesIndice} lang={locale}/>
             <hr/>
-            <section id="indice-possible">
-                <h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
-                <br/>
-                <h4>
-                    <FormattedMessage id="info.indice-possible.age"/>
-                </h4>
-                <IndiceList instance={AgeIndice} lang={locale}/>
-                
-                <h4>
-                    <FormattedMessage id="info.indice-possible.hair"/>
-                </h4>
-                <IndiceList instance={ColorIndice} lang={locale}/>
-                <IndiceList instance={ColorEdgesIndice} lang={locale}/>
-                <hr/>
-                <h4>
-                    <FormattedMessage id="info.indice-possible.sport"/>
-                </h4>
-                <IndiceList instance={SportIndice} lang={locale}/>
-                <IndiceList instance={NbSportIndice} lang={locale}/>
-                
-                
-                <h4>
-                    <FormattedMessage id="info.indice-possible.voisin"/>
-                </h4>
-                <IndiceList instance={EdgesIndice} lang={locale}/>
-                <IndiceList instance={NbEdgesIndice} lang={locale}/>
-                <hr/>
-            </section>
-        
-        {/* 
-            //! Topographie présente uniquement sur Cryptide
-            <h2>Topographie</h2>
-            <p>Legende des différents objet disponible sur la carte.</p> 
-        */}
+            <h4>
+                <FormattedMessage id="info.indice-possible.sport"/>
+            </h4>
+            <IndiceList instance={SportIndice} lang={locale}/>
+            <IndiceList instance={NbSportIndice} lang={locale}/>
+            
+            
+            <h4>
+                <FormattedMessage id="info.indice-possible.voisin"/>
+            </h4>
+            <IndiceList instance={EdgesIndice} lang={locale}/>
+            <IndiceList instance={NbEdgesIndice} lang={locale}/>
+            <hr/>
+        </section>
     </div>
     );
 }