From cd1aff13db6dce418ac8e5b8a552b933864e9a94 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 14 Nov 2023 15:07:58 +0100
Subject: [PATCH] ajout de l'interface pour le mode solo :art:

---
 cryptide_project/src/App.tsx                |   7 +-
 cryptide_project/src/Components/TurnBar.tsx |   6 +-
 cryptide_project/src/Pages/Play.tsx         |   2 +-
 cryptide_project/src/Pages/SoloGame.css     |  10 +-
 cryptide_project/src/Pages/SoloGame.tsx     | 210 ++++++++++----------
 5 files changed, 126 insertions(+), 109 deletions(-)

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index e2dafb6..14974c0 100644
--- a/cryptide_project/src/App.tsx
+++ b/cryptide_project/src/App.tsx
@@ -77,11 +77,10 @@ function App() {
                 <Route path="/play" element={<Play/>} />
                 <Route path="/lobby" element={<Lobby/>} />
                 <Route path="/endgame" element={<EndGame/>} />
-                <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>} />
+                <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                 <Route path="/info" element={<InfoPage/>} />
-          <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />} />
-          
-      </Routes>
+                <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>  
+              </Routes>
             </BrowserRouter>
           </ThemeProvider>
         </IntlProvider>
diff --git a/cryptide_project/src/Components/TurnBar.tsx b/cryptide_project/src/Components/TurnBar.tsx
index 155bbce..1d90aad 100644
--- a/cryptide_project/src/Components/TurnBar.tsx
+++ b/cryptide_project/src/Components/TurnBar.tsx
@@ -12,6 +12,6 @@ const TurnBar = () => {
             <p>Dummy, à vous de jouer !</p>
         </div>
     );
-  };
-  
-  export default TurnBar;
\ No newline at end of file
+};
+
+export default TurnBar;
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index b6ead60..2eab011 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -82,7 +82,7 @@ function Play() {
                         <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                     </Link>
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
-                    <Link to="/">
+                    <Link to="/solo">
                         <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     </Link>
                 </div>
diff --git a/cryptide_project/src/Pages/SoloGame.css b/cryptide_project/src/Pages/SoloGame.css
index 8823002..4f2769b 100644
--- a/cryptide_project/src/Pages/SoloGame.css
+++ b/cryptide_project/src/Pages/SoloGame.css
@@ -53,11 +53,19 @@
     border-radius: 20px 20px 0px 0px;
 }
 
-.playerlistDiv{
+.nbLaps{
     position: absolute;
     z-index: 1;
     left: 10px;
     top :50px;
+
+    margin: 10px 20px;
+    padding: 20px;
+    border-radius: 15px;
+    border: solid 2px;
+
+    font-size: 30px;
+    color: #fff;
 }
 
 #endgamebutton{
diff --git a/cryptide_project/src/Pages/SoloGame.tsx b/cryptide_project/src/Pages/SoloGame.tsx
index d1f8a09..3b2cced 100644
--- a/cryptide_project/src/Pages/SoloGame.tsx
+++ b/cryptide_project/src/Pages/SoloGame.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Switch from "react-switch";
 
 /* Style */
-import "./InGame.css"
+import "./SoloGame.css"
 import {useTheme} from '../Style/ThemeContext'
 /* Component */
 import GraphContainer from '../Components/GraphContainer';
@@ -32,6 +32,8 @@ import { HiLanguage } from 'react-icons/hi2';
 import { Nav, NavDropdown } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import Color from '../model/Color';
+import TurnBar from '../Components/TurnBar';
+import { useGame } from '../Contexts/GameContext';
 
 //@ts-ignore
 const SoloGame = ({locale, changeLocale}) => {
@@ -39,11 +41,17 @@ const SoloGame = ({locale, changeLocale}) => {
     const theme = useTheme();
 
     const [showChoiceBar, setShowChoiceBar] = useState(false);
+    const [showTurnBar, setShowTurnBar] = useState(false);
+
 
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
         setShowChoiceBar(shouldShowChoiceBar);
     };
 
+    const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
+        setShowTurnBar(shouldShowTurnBar);
+    };
+
     /* 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 ?
@@ -61,7 +69,7 @@ const SoloGame = ({locale, changeLocale}) => {
 
     const handleChange = () => {
         if (show){
-            handleClose()
+        handleClose()
         }
         else {
             handleShow()
@@ -94,132 +102,134 @@ const SoloGame = ({locale, changeLocale}) => {
 
     const [SwitchEnabled, setSwitchEnabled] = useState(false)
     const indices = Stub.GenerateIndice()
+    const { indice, players } = useGame();
+
 
     return (
         <div id="mainDiv">
-            <div className='upperInfo' 
-            style={{ 
-                borderColor: theme.colors.secondary
-            }}>
-            {/* texte changeable et a traduire */}
-            <p>Dummy, à vous de jouer !</p>
-            </div>
+            <TurnBar/>
             <div id='graphDiv'>
-            <GraphContainer onNodeClick={handleNodeClick} />
+                <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} />
+            </div>
+
+            <div className='nbLaps' style={{ 
+                                        backgroundColor: theme.colors.primary,
+                                        borderColor: theme.colors.secondary
+                                    }}>
+                Tour : 5
             </div>
 
-            {/* <div className='playerlistDiv'>
-                <button className='button' 
+            <div className='paramDiv'>
+                <button className='button'
                     style={{ 
                         backgroundColor: theme.colors.primary,
                         borderColor: theme.colors.secondary
                     }}
-                    onClick={handleChangeP}>
-                    Players
+                    onClick={handleChangeS}>
+                    <img src={Param} alt="paramètres" height='40'/>
                 </button>
-            </div> */}
-
-        <div className='paramDiv'>
-            <button className='button'
-            style={{ 
-                backgroundColor: theme.colors.primary,
-                borderColor: theme.colors.secondary
-            }}
-            onClick={handleChangeS}>
-            <img src={Param} alt="paramètres" height='40'/>
-            </button>
-        </div>
+            </div>
 
-        <div className='menuGame'>
-            <Link to='/info' target='_blank'>
-                <button className='button' 
+            <div className='menuGame'>
+                <Link to='/info' target='_blank'>
+                    <button className='button' 
                     style={{ 
                         backgroundColor: theme.colors.primary,
                         borderColor: theme.colors.secondary
                     }}>
                     <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> */}
-
-        <Link to='/info' target='_blank'>
-            <button className='button'
-                style={{ 
-                backgroundColor: theme.colors.primary,
-                borderColor: theme.colors.secondary
-                }}>
+                    </button>
+                </Link>
+            {/* <button className='button' onClick={() => openInNewTab('http://localhost:3000/play')}> //! avec url =={'>'} dangereux
                 <img src={Check} alt="check" height="40"/>
-            </button>
-        </Link>
-
-            <button className='button' onClick={handleChange}
-            style={{ 
-                backgroundColor: theme.colors.primary,
-                borderColor: theme.colors.secondary
-            }}>
-            <img src={Alpha} alt="indice" height="40"/>
-            </button>
-        </div>
+            </button> */}
 
-        <Offcanvas show={show} 
-                onHide={handleClose} 
-                placement='end'
-                scroll={true}
-                backdrop={false}
-                style={{ height: '20%', width: '25%', top: '60vh' }}>
+                <Link to='/info' target='_blank'>
+                    <button className='button'
+                    style={{ 
+                        backgroundColor: theme.colors.primary,
+                        borderColor: theme.colors.secondary
+                    }}>
+                    <img src={Check} alt="check" height="40"/>
+                    </button>
+                </Link>
+
+                <button className='button' onClick={handleChange}
+                            style={{ 
+                                backgroundColor: theme.colors.primary,
+                                borderColor: theme.colors.secondary
+                            }}>
+                    <img src={Alpha} alt="indice" height="40"/>
+                </button>
+            </div>
+
+            {/* <Offcanvas show={showP} 
+                    onHide={handleCloseP}>
+            <Offcanvas.Header closeButton>
+                <Offcanvas.Title>Joueurs</Offcanvas.Title>
+                <h3>Il y a {players.length} joueurs</h3>
+            </Offcanvas.Header>
+            <Offcanvas.Body>
+                <PlayerList players={players} />
+            </Offcanvas.Body>
+            </Offcanvas> */}
+
+            <Offcanvas show={show} 
+                    onHide={handleClose} 
+                    placement='end'
+                    scroll={true}
+                    backdrop={false}
+                    style={{ height: '20%', width: '25%', top: '60vh' }}>
             <Offcanvas.Header closeButton>
-            <Offcanvas.Title>Indice</Offcanvas.Title>
+                <Offcanvas.Title>Indice</Offcanvas.Title>
             </Offcanvas.Header>
             <Offcanvas.Body>
                 {/* Possède les cheveux noir <u>ou</u> joue au basket */}
-            {indices[0].ToString(locale)}<br/>
-            {indices[1].ToString(locale)}<br/>
-            {indices[2].ToString(locale)}
+                {indice?.ToString(locale)}
             </Offcanvas.Body>
-        </Offcanvas>
+            </Offcanvas>
 
-        {
-          //* canva pour les paramètres
-        }
-        <Offcanvas show={showS} 
+            {
+            //* canva pour les paramètres
+            }
+            <Offcanvas show={showS} 
                     onHide={handleCloseS} 
                     placement='top'
                     style={{height: '30%', 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/> Language </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>
-
-            <label>
-            <Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
-            <p>Afficher les noeuds possibles</p>
-        </label>
-
-        </Offcanvas.Body>
-    </Offcanvas>
-
-    <div id="bottom-container">
-        {showChoiceBar && <ChoiceBar />}
-    </div>
-    <div id="endgamebutton" > {/*  tmp */}
-        <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
-    </div>
-    </div>
-);
+                <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/> Language </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>
+
+                    <label>
+                        <Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
+                        <p>Afficher les noeuds possibles</p>
+                    </label>
+
+                </Offcanvas.Body>
+            </Offcanvas>
+            <div id="bottom-container">
+            {showChoiceBar && <ChoiceBar />}
+            </div>
+            {/*
+            <div id="endgamebutton" > {/*  tmp 
+            <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
+            </div>
+        */}
+        </div>
+    );
 };