From 0c36438a8de05b333a797f8f8ee928cca6555d32 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 10 Nov 2023 11:52:43 +0100
Subject: [PATCH] =?UTF-8?q?cr=C3=A9ation=20d'un=20nouvelle=20onglet=20pour?=
 =?UTF-8?q?=20l'affichage=20des=20informations=20durant=20la=20partie=20:a?=
 =?UTF-8?q?rt:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/App.tsx                  |  1 +
 .../src/Components/ButtonImgNav.tsx           |  2 +-
 cryptide_project/src/Pages/InGame.tsx         | 52 +++++++++++++--
 cryptide_project/src/Pages/InfoPage.tsx       | 66 +++++++++++++++++++
 4 files changed, 113 insertions(+), 8 deletions(-)
 create mode 100644 cryptide_project/src/Pages/InfoPage.tsx

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index 4a64b09..e025ef7 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -13,6 +13,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';
diff --git a/cryptide_project/src/Components/ButtonImgNav.tsx b/cryptide_project/src/Components/ButtonImgNav.tsx
index 85c48d0..6e3e78d 100644
--- a/cryptide_project/src/Components/ButtonImgNav.tsx
+++ b/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>
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index 1cd5c60..2eaba35 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/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>
diff --git a/cryptide_project/src/Pages/InfoPage.tsx b/cryptide_project/src/Pages/InfoPage.tsx
new file mode 100644
index 0000000..34c2f93
--- /dev/null
+++ b/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;