création d'un nouvelle onglet pour l'affichage des informations durant la partie 🎨

cryptide_project/src/App.tsx

@@ -12,6 +12,7 @@ import Lobby from './Pages/Lobby';
 import InGame from './Pages/InGame';
 
 import EndGame from './Pages/EndGame';
+import InfoPage from './Pages/InfoPage';
 
 /* Component */
 import AppNavbar from './Components/NavBar';
@@ -64,6 +65,7 @@ function App() {
         <Route path="/lobby" element={<Lobby/>} />
         <Route path="/endgame" element={<EndGame/>} />
         <Route path="/game" element={<InGame/>} />
+        <Route path="/info" element={<InfoPage/>} />
       </Routes>
     </BrowserRouter>
   </IntlProvider>

cryptide_project/src/Components/ButtonImgNav.tsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 //@ts-ignore
 function ButtonImgNav({ dest, img, text = "" }) {
     return (
-    <Link to={dest} className="link-without-underline">
+    <Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
         <button className='buttonNabImg'>
             <img src={img} alt="Button Image" height="50" width="50"/>
             <p>{text}</p>

cryptide_project/src/Pages/InGame.tsx

@@ -17,6 +17,9 @@ import Info from "../res/icon/infoGreen.png";
 import Check from "../res/icon/checkboxGreen.png";
 import Alpha from "../res/GreekLetters/alphaW.png";
 
+/* nav */
+import { Link } from 'react-router-dom';
+
 /* Boostrap */
 import Button from 'react-bootstrap/Button';
 import Offcanvas from 'react-bootstrap/Offcanvas';
@@ -37,6 +40,32 @@ const InGame = () => {
     const [showP, setShowP] = useState(false);
     const handleCloseP = () => setShowP(false);
     const handleShowP = () => setShowP(true);
+  
+    const handleChange = () => {
+      if (show){
+        handleClose()
+      }
+      else {
+        handleShow()
+      }
+    };
+  
+    const handleChangeP = () => {
+      if (showP){
+        handleCloseP()
+      }
+      else {
+        handleShowP()
+      }
+    };
+
+
+    /* Windows open */
+    //@ts-ignore
+    const openInNewTab = (url) => { //! avec url ==> dangereux
+      window.open(url);
+    };
+  
     return (
       <div id="mainDiv">
         <div className='upperInfo'>
@@ -48,7 +77,7 @@ const InGame = () => {
         </div>
 
         <div className='playerlistDiv'>
-          <button className='button' onClick={handleShowP}>
+          <button className='button' onClick={handleChangeP}>
             Players
           </button>
         </div>
@@ -58,13 +87,22 @@ const InGame = () => {
         </div>
 
         <div className='menuGame'>
-          <button className='button' onClick={handleShow}>
-            <img src={Info} alt="info" height="40"/>
-          </button>
-          <button className='button' onClick={handleShow}>
+          <Link to='/info' target='_blank'>
+            <button className='button'>
+              <img src={Info} alt="info" height="40"/>
+            </button>
+          </Link>
+          {/* <button className='button' onClick={() => openInNewTab('http://localhost:3000/play')}> //! avec url =={'>'} dangereux
             <img src={Check} alt="check" height="40"/>
-          </button>
-          <button className='button' onClick={handleShow}>
+          </button> */}
+
+          <Link to='/info' target='_blank'>
+            <button className='button'>
+              <img src={Check} alt="check" height="40"/>
+            </button>
+          </Link>
+
+          <button className='button' onClick={handleChange}>
             <img src={Alpha} alt="indice" height="40"/>
           </button>
         </div>

cryptide_project/src/Pages/InfoPage.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+/* Style */
+import '../Style/Global.css';
+
+import { FormattedMessage } from 'react-intl';
+
+function InfoPage() { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
+
+    return (
+        
+    <div>
+        <h1>Informations</h1>
+        
+        <h2>Indice possible :</h2>
+        <h3>
+            couleur de cheveux d'une personne
+        </h3>
+        <ul>
+            <li>
+                Possède les cheveux noir
+            </li>
+            <li>
+                Possède les cheveux roux
+            </li>
+            <li>
+                Possède les cheveux blond
+            </li>
+            <li>
+                Possède les cheveux brun
+            </li>
+            <li>
+                Possède les cheveux blanc
+            </li>
+        </ul>
+        <hr/>
+        <h3>
+            Sport d'une personne
+        </h3>
+        <ul>
+            <li>
+                Effectue du Foot <u>ou</u> du tennis
+            </li>
+            <li>
+                Effectue du rugby <u>ou</u> du tennis
+            </li>
+        </ul>
+        <h3>
+            Caractèristique des voisins
+        </h3>
+        <ul>
+            <li>
+                Possède deux voisins footballeur
+            </li>
+            <li>
+                Possède aucun voisin rugbyman
+            </li>
+        </ul>
+
+        <h2>Topographie</h2>
+        <p>Legende des différents objet disponible sur la carte.</p>
+    </div>
+    );
+}
+
+export default InfoPage;