Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into ConnexionAPI

cryptide_project/package-lock.json

@@ -31,6 +31,7 @@
         "react-intl": "^6.5.2",
         "react-router-dom": "^6.18.0",
         "react-scripts": "5.0.1",
+        "react-switch": "^7.0.0",
         "typescript": "^5.2.2",
         "vis-network": "^9.1.9",
         "web-vitals": "^2.1.4"
@@ -15169,6 +15170,18 @@
         }
       }
     },
+    "node_modules/react-switch": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
+      "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

cryptide_project/package.json

@@ -25,6 +25,7 @@
     "react-intl": "^6.5.2",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
+    "react-switch": "^7.0.0",
     "typescript": "^5.2.2",
     "vis-network": "^9.1.9",
     "web-vitals": "^2.1.4"

cryptide_project/src/App.tsx

@@ -12,16 +12,20 @@ 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';
 
 /* nav */
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 
 /* Style */
 import './App.css';
 
+import { ThemeProvider } from './Style/ThemeContext';
+// import theme from './Style/Theme';
+
 /* bootstrap */
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -45,6 +49,11 @@ function App() {
     setLocale(newLocale);
   };
 
+
+  //const location = useLocation();
+  const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"]//.includes(window.location.pathname);
+
+
   return (
   // <div className="App">
   //   <header className="App-header">
@@ -52,10 +61,13 @@ function App() {
   //     <img src={logo} className="App-logo" alt="logo" />
   //   </header>
   // </div>
+
   //@ts-ignore
   <IntlProvider locale={locale} messages={messages[locale]}>
+    <ThemeProvider>
       <BrowserRouter>  
-      <AppNavbar changeLocale={changeLocale} />
+        {/* <AppNavbar changeLocale={changeLocale} /> */}
+        {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/login" element={<Login />} />
@@ -63,9 +75,11 @@ function App() {
           <Route path="/play" element={<Play/>} />
           <Route path="/lobby" element={<Lobby/>} />
           <Route path="/endgame" element={<EndGame/>} />
-        <Route path="/game" element={<InGame/>} />
+          <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale} />} />
+          <Route path="/info" element={<InfoPage/>} />
         </Routes>
       </BrowserRouter>
+    </ThemeProvider>
   </IntlProvider>
   );
 }

cryptide_project/src/Components/BigButtonNav.tsx

@@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
+import { useTheme } from '../Style/ThemeContext';
+import COLORS from '../Style/Color';
 //@ts-ignore
 function BigButtonNav({ dest, img}) {
+    
+    const theme = useTheme();
+
+    // const mystyle = {
+    //     backgroundColor: "#0064E0",
+    // };
+
     return (
     <Link to={dest} className="link-without-underline">
-        <button className='bigbuttonNabImg'>
+        <button className='bigbuttonNabImg' style={{ backgroundColor: theme.colors.primary }}>
             <img src={img} alt="Button Image" height="100" width="100"/>
         </button>
     </Link>

cryptide_project/src/Components/ButtonImgNav.css

@@ -3,8 +3,8 @@
     width: auto;
     height: 65px;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
-    color: #2A4541;
+    /* color: #2A4541; */
     border-radius: 15px;
     border-width: 0;
 
@@ -20,8 +20,8 @@
     width: auto;
     height: 100px;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
-    color: #2A4541;
+    /* color: #2A4541; */
     border-radius: 15px;
     border-width: 0;
 

cryptide_project/src/Components/ButtonImgNav.tsx

@@ -3,11 +3,14 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
+import { useTheme } from '../Style/ThemeContext';
+
 //@ts-ignore
 function ButtonImgNav({ dest, img, text = "" }) {
+    const theme = useTheme();
     return (
-    <Link to={dest} className="link-without-underline">
+    <Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
-        <button className='buttonNabImg'>
+        <button className='buttonNabImg' style={{ backgroundColor: theme.colors.primary, color: theme.colors.secondary}}>
             <img src={img} alt="Button Image" height="50" width="50"/>
             <p>{text}</p>
         </button>

cryptide_project/src/Components/ChoiceBar.css

@@ -13,10 +13,9 @@
 .choice-bar-button {
     margin: 5px;
     padding: 10px;
-    background-color: lightseagreen;
+    /* background-color: lightseagreen; */
     color: #fff;
     border: 2px solid grey;
     border-radius: 5px;
     cursor: pointer;
 }
-  

cryptide_project/src/Components/ChoiceBar.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import './ChoiceBar.css';
+import { useTheme } from '../Style/ThemeContext';
 
 const ChoiceBar = () => {
   const players = ['Player1', 'Player2', 'Player3']; 
-
+  const theme = useTheme();
   return (
     <div className="choice-bar-container">
       <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
       <div>
         {players.map((player, index) => (
-          <button key={index} className="choice-bar-button">
+          <button key={index} className="choice-bar-button" style={{ backgroundColor: theme.colors.primary }}>
             {player}
           </button>
         ))}

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/Components/NavBar.css

@@ -1,6 +1,6 @@
 
 .custom-navbar{
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
     color: #fff;
     text-emphasis-color: #fff;
 }
@@ -17,7 +17,6 @@
 
 
 .navbar-title-dd a {
-    background-color: #2A4541;
     color: #fff;
     border-radius: 15;
     padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */

cryptide_project/src/Components/NavBar.tsx

@@ -11,24 +11,32 @@ import { BiLogInCircle } from 'react-icons/bi';
 import { BsFillPersonPlusFill } from 'react-icons/bs';
 import { HiLanguage } from 'react-icons/hi2';
 
+/* Images */
+import logo from '../res/img/logo2_preview_rev_1.png';
+
 /* Components */
 import './NavBar.css';
 
+/* Style */
+import { useTheme } from '../Style/ThemeContext';
+
 // @ts-ignore
 function AppNavbar({changeLocale}) {
+    const theme = useTheme();
     return (
-        <Navbar expand="lg" className="custom-navbar">
+        <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
         <Container>
             <Navbar.Brand href="/">
-                <div>
+                <img src={logo} alt="logo" className="logo"/>
-                    <h2>Cryptide</h2>
+                {/* <div>
-                    <h6>by Crypteam</h6>
+                    <h2 style={{color:theme.colors.text}}>Cryptide</h2>
-                </div>
+                    <h6 style={{color:theme.colors.text}}>by Crypteam</h6>
+                </div> */}
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
-                <NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
+                <NavDropdown title={<span style={{color:theme.colors.text}}><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown" >
                     <NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
                     <NavDropdown.Divider />
                     <NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
@@ -37,11 +45,11 @@ function AppNavbar({changeLocale}) {
             </Nav>
             <div className='leftdiv'>
                 <Nav className="ml-auto navbar-title-dd">
-                    <Nav.Link href="login" className='navbar-title-dd'> 
+                    <Nav.Link href="login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                         <BiLogInCircle/>
                         <FormattedMessage id="log_in"/> 
                     </Nav.Link>
-                    <Nav.Link href="signup" className='navbar-title-dd'> 
+                    <Nav.Link href="signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                         <BsFillPersonPlusFill/>
                         <FormattedMessage id="sign_up"/> 
                     </Nav.Link>

cryptide_project/src/Components/PersonStatus.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
+
+/* Style */
 import '../Style/Global.css'
+import { useTheme } from '../Style/ThemeContext';
+
+/* Ressources */
 import Person from '../res/img/Person.png'
 import leave from '../res/img/bot.png'
 
 //@ts-ignore
 function PersonStatus({img = Person, state= leave, name = "Dummy"}) {
+    const theme=useTheme();
     return (
         <div className='centerDivV'>
             <img src={img} alt="player" height="100" width="100"/>
             <h4>{name}</h4>
-            <div className='statusDiv'>
+            <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
                 <img src={state} alt="state" height="30" width="30"/>
             </div>
         </div>

cryptide_project/src/Components/PlayerList.tsx

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import PersonStatus from './PersonStatus';
+
+//@ts-ignore
+function PlayerList({ players }) {
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+            {
+                //@ts-ignore
+                players.map((player, index) => (
+                    <PersonStatus key={index} state={player.state} name={player.name} />
+                ))
+            }
+        </div>
+
+    );
+}   
+
+export default PlayerList;

cryptide_project/src/Pages/EndGame.css

@@ -15,7 +15,7 @@
     width: fit-content;
 
     border-radius: 0px 0px 30px 30px;
-    border: solid #85C9C2;
+    border: solid;
     border-width: 0 5px;
 
     padding: 20px;

cryptide_project/src/Pages/EndGame.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
+
+
+/* Style */
 import './EndGame.css';
 import '../Style/Global.css';
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Leave from '../res/icon/leave.png';
 import Replay from '../res/icon/replay.png';
@@ -18,10 +24,12 @@ import { FormattedMessage } from 'react-intl';
 
 
 function EndGame() {
+
+    const theme = useTheme();
     return (
         <div>
             <div className="head">
-                <header className='leaderboard-header'>
+                <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
                     <h1>Dummy a gagné !</h1>
                     <h3>Le tueur était <u>Bob</u></h3>
                 </header>

cryptide_project/src/Pages/Home.css

@@ -6,7 +6,7 @@
     min-height: 100vh;
     display: flex;
     font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }
 
 /**Divider**/
@@ -41,7 +41,7 @@
 
 /*Global ???*/
 .button {
-    background-color: #49A4BE;
+    /* background-color: #49A4BE;   */
     color: #fff;
     padding: 10px 20px;
     border-radius: 10;

cryptide_project/src/Pages/Home.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import './Home.css';
 import '../App.css';
+import { useTheme } from '../Style/ThemeContext';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import ButtonImgNav from '../Components/ButtonImgNav';
 
 
 function Home() {
-
+    const theme=useTheme();
     return (
         
     <div className="home-container">
@@ -46,7 +48,13 @@ function Home() {
             <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
             {/* <button>Jouer au jeu</button> */}
             <br/>
-            <Link to="/play" className='button'> <FormattedMessage id="play"/> </Link>
+            <Link to="/play" className='button' 
+                style={{ 
+                    backgroundColor: theme.colors.primary,
+                    borderColor: theme.colors.secondary
+                }}>
+                <FormattedMessage id="play"/> 
+            </Link>
         </div>
     </div>
     );

cryptide_project/src/Pages/InGame.css

@@ -0,0 +1,104 @@
+.upperInfo{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    width: 30%;
+
+    border-radius: 0px 0px 30px 30px;
+    border: solid;
+    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 :50px;
+}
+
+#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:30%;
+    right: 0;
+}
+
+.menuGame Button {
+    margin: 10px;
+}
+
+.button{
+    /*background-color: #85C9C2;*/
+    
+    border: solid 2px #85C9C2;
+    border-radius: 10px;
+
+    width: 100px;
+    height: 60px;
+}
+
+/* #playerCanvasBody{
+    columns: 2 auto;
+    grid-row: 2;
+} */

cryptide_project/src/Pages/InGame.tsx

@@ -1,27 +1,258 @@
 import React, { useState } from 'react';
+import Switch from "react-switch";
 
+/* Style */
+import "./InGame.css"
+import {useTheme} from '../Style/ThemeContext'
 /* Component */
 import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
 import ButtonImgNav from '../Components/ButtonImgNav';
+import PersonStatus from '../Components/PersonStatus';
+import PlayerList from '../Components/PlayerList';
 
 /* Icon */
 import Leave from "../res/icon/leave.png";
+import Param from "../res/icon/param.png";
+import Replay from "../res/icon/replay.png";
+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';
+
+/* Model */
+import Stub from '../model/Stub';
+import { HiLanguage } from 'react-icons/hi2';
+import { Nav, NavDropdown } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import Color from '../model/Color';
+
+//@ts-ignore
+const InGame = ({locale, changeLocale}) => {
+
+  const players = [
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' }
+    // Ajouter d'autres joueurs au besoin
+  ];
+
+
+  const theme = useTheme();
 
-const InGame = () => {
     const [showChoiceBar, setShowChoiceBar] = useState(false);
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
       setShowChoiceBar(shouldShowChoiceBar);
     };
   
+    /* 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);
+
+    const [showP, setShowP] = useState(false);
+    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()
+      }
+      else {
+        handleShow()
+      }
+    };
+  
+    const handleChangeP = () => {
+      if (showP){
+        handleCloseP()
+      }
+      else {
+        handleShowP()
+      }
+    };
+
+    const handleChangeS = () => {
+      if (showS){
+        handleCloseS()
+      }
+      else {
+        handleShowS()
+      }
+    };
+
+    /* Windows open */
+    //@ts-ignore
+    const openInNewTab = (url) => { //! avec url ==> dangereux
+      window.open(url);
+    };
+  
+  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  const indices = Stub.GenerateIndice()
+
     return (
-      <div>
+      <div id="mainDiv">
+        <div className='upperInfo' 
+          style={{ 
+              borderColor: theme.colors.secondary
+          }}>
+          {/* texte changeable et a traduire */}
+          <p>Dummy, à vous de jouer !</p>
+        </div>
+        <div id='graphDiv'>
           <GraphContainer onNodeClick={handleNodeClick} />
+        </div>
+
+        <div className='playerlistDiv'>
+          <button className='button' 
+            style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeP}>
+            Players
+          </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 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
+              }}>
+              <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>
+              {/* affichage d'une liste responsive dynamic */}
+            {/* <div className='playerCanvasBody'>
+              <PersonStatus state={Replay} name="Dummy"/>
+              <PersonStatus state={Replay} name="Boat"/>
+              <PersonStatus state={Replay} name="Bot-tom"/>
+            </div> */}
+            <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.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)}
+          </Offcanvas.Body>
+        </Offcanvas>
+
+        {
+          //* 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> {/*  tmp */}
+        <div id="endgamebutton" > {/*  tmp */}
           <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
         </div>
       </div>

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;

cryptide_project/src/Pages/Lobby.css

@@ -5,7 +5,7 @@
     background-color: #fff;
     min-height: 100vh;
     font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }
 
 .left-section {
@@ -15,8 +15,8 @@
 }
 
 .lobby-vertical-divider{
-    width: 5px;
+    width: 10px;
-    background-color: #2A4541;
+    /* background-color: #2A4541; */
 }
 
 .right-section {

cryptide_project/src/Pages/Lobby.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
+
+/* Style */
 import './Lobby.css';
-import PlayerItemList from '../Components/PlayerItemList'
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Bot from '../res/img/bot.png';
 import param from '../res/icon/param.png';
 import cible from '../res/icon/cible.png';
+
+/* Component */
 import ButtonImgNav from '../Components/ButtonImgNav';
+import PlayerItemList from '../Components/PlayerItemList'
 
 function Lobby() {
+    const theme=useTheme();
     return (
         <div className='lobby-container'>
             <div className='left-part'>
@@ -19,7 +27,7 @@ function Lobby() {
                 </div>
             </div>
 
-            <div className="lobby-vertical-divider"></div>
+            <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
 
             <div className='right-part'>
                 <div className='title-param-div'>

cryptide_project/src/Pages/Play.css

@@ -79,10 +79,13 @@
     width:200px;
     height: 8vh;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2;
-    color: #2A4541;
+    color: #2A4541; */
+    color: white;
+
+    border: solid;
     border-radius: 15px;
-    border-width: 0;
+    border-width: 2px;
 
     font-size:larger;
 }

cryptide_project/src/Pages/Play.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-/* Page */
+/* Style */
 import './Play.css';
+import { useTheme } from '../Style/ThemeContext';
 
 /* Nav */
 import { Link } from 'react-router-dom';
@@ -19,6 +20,7 @@ import share from '../res/icon/share.png';
 
 
 function Play() {
+    const theme=useTheme()
     return (
 
         <div className="MainContainer">
@@ -41,13 +43,13 @@ function Play() {
                 </div>
                 <div className='buttonGroupVertical'>
                     <Link to="/lobby">
-                        <button className="ButtonNav"> Jouer seul </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                     </Link>
                     <Link to="/">
-                        <button className="ButtonNav"> Créer une partie </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     </Link>
                     <Link to="/">
-                        <button className="ButtonNav"> Rejoindre </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     </Link>
                 </div>
             </div>

cryptide_project/src/Style/Color.tsx

@@ -0,0 +1,10 @@
+const COLORS = {
+    primary:'#0064E0',
+    secondary:'',
+    tertiary:'',
+    
+    white: '#fff',
+    black: '#000',
+}
+
+export default COLORS;

cryptide_project/src/Style/Global.css

@@ -23,7 +23,7 @@
 }
 
 .statusDiv{
-    background-color: #A7E2DC;
+    /* background-color: #A7E2DC; */
     border-radius: 15px;
 
     height: 30px;

cryptide_project/src/Style/Theme.tsx

@@ -0,0 +1,13 @@
+// theme.js
+const theme = {
+    colors: {
+        primary: '#0064E0',
+        secondary: '#0052B8',
+        
+        text: '#fff'
+
+        //faire une gestion dark/light
+    },
+};
+
+export default theme;

cryptide_project/src/Style/ThemeContext.tsx

@@ -0,0 +1,15 @@
+// ThemeContext.js
+import React, { createContext, useContext } from 'react';
+import theme from './Theme';
+
+const ThemeContext = createContext(theme);
+
+export const useTheme = () => useContext(ThemeContext);
+
+//@ts-ignore
+export const ThemeProvider = ({ children }) => (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+);
+
+
+//* style={{ color: theme.colors.primary }}

cryptide_project/yarn.lock

@@ -8199,7 +8199,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8352,7 +8352,11 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+<<<<<<< HEAD
 react-dom@^18.0.0, react-dom@^18.2.0, react-dom@>=16.14.0, react-dom@>=16.6.0, react-dom@>=16.8:
+=======
+"react-dom@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, react-dom@>=16.14.0, react-dom@>=16.6.0, react-dom@>=16.8:
+>>>>>>> db7654cfd086e8c68a832da06e041cb13df5156f
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -8491,6 +8495,13 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-switch@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz"
+  integrity sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -8501,7 +8512,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+<<<<<<< HEAD
 react@*, "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.0, react@>=15.0.0, react@>=16.14.0, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0:
+=======
+react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.0, react@>=15.0.0, react@>=16.14.0, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0:
+>>>>>>> db7654cfd086e8c68a832da06e041cb13df5156f
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==