ajout de l'interface pour le mode solo 🎨

cryptide_project/src/App.tsx

@@ -80,7 +80,6 @@ function App() {
                 <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                 <Route path="/info" element={<InfoPage/>} />
                 <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>  
-          
               </Routes>
             </BrowserRouter>
           </ThemeProvider>

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>

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{

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 ?
@@ -94,30 +102,22 @@ 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='playerlistDiv'>
-                <button className='button' 
-                    style={{ 
+            <div className='nbLaps' style={{ 
                                         backgroundColor: theme.colors.primary,
                                         borderColor: theme.colors.secondary
-                    }}
-                    onClick={handleChangeP}>
-                    Players
-                </button>
-            </div> */}
+                                    }}>
+                Tour : 5
+            </div>
 
             <div className='paramDiv'>
                 <button className='button'
@@ -163,6 +163,17 @@ const SoloGame = ({locale, changeLocale}) => {
                 </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'
@@ -174,9 +185,7 @@ const SoloGame = ({locale, changeLocale}) => {
             </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>
 
@@ -211,13 +220,14 @@ const SoloGame = ({locale, changeLocale}) => {
 
                 </Offcanvas.Body>
             </Offcanvas>
-
             <div id="bottom-container">
             {showChoiceBar && <ChoiceBar />}
             </div>
-    <div id="endgamebutton" > {/*  tmp */}
+            {/*
+            <div id="endgamebutton" > {/*  tmp 
             <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
             </div>
+        */}
         </div>
     );
 };