ajout de l'interface pour la page de jeu, tout est en absolute, et les boutons affiches des canvas factices

cryptide_project/src/Components/GraphContainer.css

@@ -1,10 +1,14 @@
 #graph-container {
     width: 100%;
-    height: 75vh;
+    height: 100vh;
+    /* padding: 20px; */
+    
+    /* border-radius: 25px; */
+    box-sizing: border-box;
+    
     display: flex;
     flex-direction: column;
     align-items: center;
+    
     background-color: #f5f5f5;
-    padding: 20px;
-    box-sizing: border-box;
 }

cryptide_project/src/Pages/InGame.css

@@ -0,0 +1,89 @@
+.upperInfo{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    width: 30%;
+
+    border-radius: 0px 0px 30px 30px;
+    border: solid #85C9C2;
+    border-width: 2px 5px;
+
+    background-color: white;
+
+    font-size: 30px;
+
+    top: 20px;;
+}
+
+#mainDiv{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+
+.paramDiv{
+    z-index: 1;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+#graphDiv{
+
+    display: flex;
+    flex-direction: row;
+
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#bottom-container{
+    bottom: 0;
+    
+    background-color: white;
+    padding:20px;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.playerlistDiv{
+    position: absolute;
+    z-index: 1;
+    left: 10px;
+    top :50;
+}
+
+#endgamebutton{
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    right: 25%;
+}
+
+.upperInfo,
+#bottom-container,
+.menuGame {
+    position: absolute;
+    z-index: 1;
+}
+
+.menuGame{
+    display: flex;
+    align-items: space-between;
+    justify-content: end;
+    flex-direction: column;
+
+    top:70%;
+    right: 0;
+}
+
+.menuGame Button {
+    margin: 10px;
+}

cryptide_project/src/Pages/InGame.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 
+/* Style */
+import "./InGame.css"
+
 /* Component */
 import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
@@ -7,6 +10,13 @@ import ButtonImgNav from '../Components/ButtonImgNav';
 
 /* Icon */
 import Leave from "../res/icon/leave.png";
+import Param from "../res/icon/param.png";
+import Replay from "../res/icon/replay.png";
+
+/* Boostrap */
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+import PersonStatus from '../Components/PersonStatus';
 
 const InGame = () => {
     const [showChoiceBar, setShowChoiceBar] = useState(false);
@@ -15,13 +25,78 @@ const InGame = () => {
       setShowChoiceBar(shouldShowChoiceBar);
     };
   
+    /* offcanvas */
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    const [showP, setShowP] = useState(false);
+    const handleCloseP = () => setShowP(false);
+    const handleShowP = () => setShowP(true);
     return (
-      <div>
+      <div id="mainDiv">
-        <GraphContainer onNodeClick={handleNodeClick} />
+        <div className='upperInfo'>
+          {/* texte changeable et a traduire */}
+          <p>Dummy, à vous de jouer !</p>
+        </div>
+        <div id='graphDiv'>
+          <GraphContainer onNodeClick={handleNodeClick} />
+        </div>
+
+        <div className='playerlistDiv'>
+          <Button variant="primary" onClick={handleShowP}>
+            Players
+          </Button>
+        </div>
+
+        <div className='paramDiv'>
+          <ButtonImgNav text='paramètres' img={Param} dest='/'/>
+        </div>
+
+      
+        <div className='menuGame'>
+          <Button variant="primary" onClick={handleShow}>
+            i
+          </Button>
+          <Button variant="primary" onClick={handleShow}>
+            check
+          </Button>
+          <Button variant="primary" onClick={handleShow}>
+            α
+          </Button>
+        </div>
+        <Offcanvas show={showP} 
+                  onHide={handleCloseP}>
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title>Joueurs</Offcanvas.Title>
+            <h3>Il y a 3 joueurs</h3>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            {/* affichage d'une liste responsive dynamic */}
+            <PersonStatus state={Replay} name="Dummy"/>
+            <PersonStatus state={Replay} name="Boat"/>
+            <PersonStatus state={Replay} name="Bot-tom"/>
+          </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.Header>
+          <Offcanvas.Body>
+            Possède les cheveux noir <u>ou</u> joue au basket
+          </Offcanvas.Body>
+        </Offcanvas>
+
         <div id="bottom-container">
             {showChoiceBar && <ChoiceBar />}
         </div>
-        <div> {/*  tmp */}
+        <div id="endgamebutton"> {/*  tmp */}
           <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
         </div>
       </div>