From 9f51ae106a1386571cb0b597cb7f080bca987a22 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 10 Nov 2023 14:37:05 +0100
Subject: [PATCH] =?UTF-8?q?ajout=20des=20param=C3=A8tres=20dans=20la=20pag?=
 =?UTF-8?q?e=20de=20jeu,=20pour=20changer=20la=20langue=20par=20exemple.?=
 =?UTF-8?q?=20bug=20au=20niveau=20des=20traductions=20et=20des=20navigatio?=
 =?UTF-8?q?ns=20:=20la=20langue=20semble=20=C3=AAtre=20reset=20:bug:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/App.tsx          |  2 +-
 cryptide_project/src/Pages/InGame.css |  2 +-
 cryptide_project/src/Pages/InGame.tsx | 49 +++++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index a895980..6d4b96f 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -49,7 +49,7 @@ function App() {
 
 
   //const location = useLocation();
-  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"].includes(window.location.pathname);
+  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"]//.includes(window.location.pathname);
 
 
   return (
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css
index 0a0f905..019a26d 100644
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@@ -57,7 +57,7 @@
     position: absolute;
     z-index: 1;
     left: 10px;
-    top :50;
+    top :50px;
 }
 
 #endgamebutton{
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index f3ef4ee..02dd7d9 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -26,9 +26,12 @@ import Offcanvas from 'react-bootstrap/Offcanvas';
 
 /* Model */
 import Stub from '../source/Stub';
+import { HiLanguage } from 'react-icons/hi2';
+import { Nav, NavDropdown } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
 
 //@ts-ignore
-const InGame = ({locale}) => {
+const InGame = ({locale, changeLocale}) => {
     const [showChoiceBar, setShowChoiceBar] = useState(false);
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
@@ -37,6 +40,7 @@ const InGame = ({locale}) => {
   
     /* offcanvas */
     //? faire une fonction pour close et show en fonction de l'etat du canva ?
+    //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
     const [show, setShow] = useState(false);
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
@@ -45,6 +49,10 @@ const InGame = ({locale}) => {
     const handleCloseP = () => setShowP(false);
     const handleShowP = () => setShowP(true);
   
+    const [showS, setShowS] = useState(false);
+    const handleCloseS = () => setShowS(false);
+    const handleShowS = () => setShowS(true);
+  
     const handleChange = () => {
       if (show){
         handleClose()
@@ -63,6 +71,14 @@ const InGame = ({locale}) => {
       }
     };
 
+    const handleChangeS = () => {
+      if (showS){
+        handleCloseS()
+      }
+      else {
+        handleShowS()
+      }
+    };
 
     /* Windows open */
     //@ts-ignore
@@ -90,7 +106,9 @@ const InGame = ({locale}) => {
         </div>
 
         <div className='paramDiv'>
-          <ButtonImgNav text='paramètres' img={Param} dest='/'/>
+          <button className='button' onClick={handleChangeS}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
         </div>
 
         <div className='menuGame'>
@@ -145,6 +163,33 @@ const InGame = ({locale}) => {
           </Offcanvas.Body>
         </Offcanvas>
 
+        
+        {
+          //* canva pour les paramètres
+        }
+        <Offcanvas show={showS} 
+                  onHide={handleCloseS} 
+                  placement='top'
+                  style={{width: '30%', left: '70%' }}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            <Nav className="me-auto">
+                <NavDropdown 
+                title={<span><HiLanguage /></span>}
+                className="navbar-title" id="basic-nav-dropdown">
+                    <NavDropdown.Item onClick={() => changeLocale('fr')}> 
+                        <FormattedMessage id="languageSelector.french"/> 
+                    </NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => changeLocale('en')}> 
+                        <FormattedMessage id="languageSelector.english"/> 
+                    </NavDropdown.Item>
+                </NavDropdown>
+            </Nav>
+          </Offcanvas.Body>
+        </Offcanvas>
+
         <div id="bottom-container">
           {showChoiceBar && <ChoiceBar />}
         </div>