ajout de la partie interface dans la page d'info 📝

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;

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>
         
@@ -136,10 +146,81 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
 
             <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). 
                             {/*
-                    //TODO
+                                //! mais est ce que nous devons rediriger sur les indices possibles ?
                             */} 
-                </h4>
+                        </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">
@@ -192,12 +273,6 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
             <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> 
-        */}
     </div>
     );
 }