début tuto

cryptide_project/src/App.tsx

@@ -43,6 +43,7 @@ import ErrorBoundary from './Error/ErrorBoundary';
 import ErrorPage from './Error/ErrorPage';
 import DeducCheck from './Pages/DeducCheck';
 import {basePath} from "./AdressSetup"
+import Tutorial from './Pages/Tutorial';
 
 
 
@@ -88,6 +89,7 @@ function App() {
                   <Route path={`${basePath}/endgame`} element={<EndGame/>} />
                   <Route path={`${basePath}/game`} element={<InGame locale={locale} changeLocale={changeLocale}/>}/>
                   <Route path={`${basePath}/info`} element={<InfoPage locale={locale} changeLocale={changeLocale}/>} />
+                  <Route path={`${basePath}/tutorial`} element={<Tutorial locale={locale} changeLocale={changeLocale}/>} />
                   <Route path={`${basePath}/deduc`} element={<DeducCheck/>} />
                   <Route path={`${basePath}/TheRealDeduc`} element={<DeducGrid/>} />
                   <Route path={`${basePath}/profile`} element={<Profile/>} />

cryptide_project/src/Components/ChoiceBar.tsx

@@ -19,6 +19,7 @@ const ChoiceBar = () => {
 
   async function askEveryone(){
     if (nodeId !== null){
+      //@ts-ignore
       const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId)
       if (person != undefined){
         const indiceTester = IndiceTesterFactory.Create(indices[actualPlayerIndex])

cryptide_project/src/Components/GraphContainer.tsx

@@ -41,6 +41,8 @@ interface MyGraphComponentProps {
   setPlayerIndex: (playerIndex: number) => void
   importToPdf: boolean
   setImportToPdf: (imp: boolean) => void
+  importToJSON: boolean
+  setImportToJSON: (imp: boolean) => void
 }
 
 let lastAskingPlayer = 0
@@ -70,7 +72,7 @@ let testPlayers: Player[] = []
 
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -320,6 +322,25 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     }
   }, [importToPdf])
 
+  function downloadToJSON(jsonData: any, filename: string) {
+    const jsonBlob = new Blob([JSON.stringify(jsonData)], {type: 'application/json'});
+    const url = URL.createObjectURL(jsonBlob);
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+
+  useEffect(() => {
+    if (importToJSON){
+      setImportToJSON(false)
+      downloadToJSON(personNetwork, "graph.json")
+      downloadToJSON(JSON.stringify(indices), "indices.json")
+    }
+  }, [importToJSON])
+
   useEffect(() => {
     if (personNetwork == null){
       return

cryptide_project/src/Components/TutorialGraph.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from "react";
+import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
+import GraphCreator from "../model/Graph/GraphCreator";
+import "./GraphContainer.css";
+import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory";
+import Person from "../model/Person";
+import { useNavigate } from "react-router-dom";
+import { useGame } from "../Contexts/GameContext";
+import { socket } from "../SocketConfig"
+import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper";
+import { ColorToHexa } from "../model/EnumExtender";
+import Bot from "../model/Bot";
+import NodePerson from "../model/Graph/NodePerson";
+import { useAuth } from "../Contexts/AuthContext";
+import Indice from "../model/Indices/Indice";
+import Pair from "../model/Pair";
+import Player from "../model/Player";
+import JSONParser from "../JSONParser";
+import User from "../model/User";
+import { json } from "body-parser";
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import {basePath} from "../AdressSetup"
+import PersonNetwork from "../model/PersonsNetwork";
+
+interface TutorialGraphProps {
+  onNodeClick: (shouldShowChoiceBar: boolean) => void;
+  handleShowTurnBar: (shouldShowTurnBar: boolean) => void
+  handleTurnBarTextChange: (newTurnBarText: string) => void
+  setPlayerTouched: (newPlayerTouch: number) => void;
+  playerTouched: number
+  changecptTour: (newcptTour : number) => void
+  addToHistory: (message : string) => void
+  solo : boolean
+  isDaily : boolean
+  isEasy: boolean
+  setNetwork: (network: Network) => void
+  showLast: boolean
+  setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
+  askedWrong: boolean
+  setAskedWrong: (askedWrong: boolean) => void
+  setPlayerIndex: (playerIndex: number) => void
+  importToPdf: boolean
+  setImportToPdf: (imp: boolean) => void
+  importToJSON: boolean
+  setImportToJSON: (imp: boolean) => void
+}
+
+let lastNodes: NodePerson[] = []
+let firstIndex = true
+
+
+
+const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => {
+  let cptTour: number = 0
+
+  //* Gestion du temps :
+  let initMtn = 0
+
+  const {isLoggedIn, user, manager} = useAuth();
+  const {setIndiceData} = useGame();
+  const params = new URLSearchParams(window.location.search);
+
+  const navigate = useNavigate();
+  const [lastIndex, setLastIndex] = useState(-1)
+  /*
+
+  useEffect(() =>{
+    touchedPlayer=playerTouched
+    console.log(playerTouched)
+    if (touchedPlayer == -1){
+      if (!askedWrongLocal){
+        socket.emit("put correct background", socket.id)
+      }
+    }
+    else if (touchedPlayer < players.length && touchedPlayer>=0){
+      if(!askedWrongLocal){
+        socket.emit("put correct background", socket.id)
+        socket.emit("put grey background", socket.id, touchedPlayer)
+      }
+    }
+    else if(touchedPlayer == players.length){
+      socket.emit("put imossible grey", socket.id)
+    }
+  }, [playerTouched])
+
+  */
+
+  useEffect(() => {
+    const tab: NodePerson[] = []
+    for(const n of lastNodes.reverse()){
+    
+    }
+    lastNodes = tab
+    if (showLast){
+      socket.emit("opacity activated", socket.id)
+    }
+    else{
+      socket.emit("opacity deactivated", socket.id)
+    }
+    
+  }, [showLast])
+
+  let playerIndex: number = 0
+
+  if (firstIndex){
+    firstIndex=false
+    setPlayerIndex(playerIndex)
+  }
+  let index = 0
+
+  useEffect(() => {
+
+
+    let jsonGraph = require("../tuto/graph.json")
+    let jsonIndice = require("../tuto/indices.json")
+
+    const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph))
+    const indices = JSONParser.JSONToIndices(jsonIndice)
+
+    setIndiceData(indices[0])
+    if (personNetwork == null){
+      return
+    }
+    const graph = GraphCreator.CreateGraph(personNetwork)
+
+    const nodes = graph.nodesPerson;
+
+
+    let n = graph.nodesPerson;
+    let e = graph.edges;
+    const graphState = { n, e };
+
+    // Sauvegarder l'état dans localStorage
+    localStorage.setItem('graphState', JSON.stringify(graphState));
+
+    const container = document.getElementById('graph-container');
+    if (!container) {
+      console.error("Container not found");
+      return;
+    }
+    // Charger les données dans le graph
+
+    // Configuration des options du Graphe
+    const initialOptions = {
+
+        layout: {
+            improvedLayout: true,
+            hierarchical: {
+                enabled: false,
+                direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
+                sortMethod: 'hubsize'
+            },
+            randomSeed: 2
+        },
+        physics: {
+            enabled: true,
+            barnesHut: {
+                gravitationalConstant: -1000,
+                springConstant: 0.001,
+                springLength: 100
+            },
+            solver: "repulsion",
+            repulsion: {
+              nodeDistance: 100 // Put more distance between the nodes.
+            }
+        }
+    };
+
+    const networkData = { nodes: nodes, edges: graph.edges };
+    const network = new Network(container, networkData, initialOptions);
+    network.stabilize();
+    setNetwork(network)
+
+
+    network.on("dragging", (params) => {
+      if (params.nodes.length > 0) {
+          // Un nœud a été cliqué
+          initialOptions.physics.enabled = false;
+          network.setOptions(initialOptions);
+          setNetwork(network)
+      }
+  });
+    
+  }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
+
+  return (
+    <>
+      <div id="graph-container"/>
+    </>
+  );
+
+  function delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+}
+
+
+
+export default TutorialGraph;

cryptide_project/src/Pages/InGame.tsx

@@ -97,6 +97,11 @@ const InGame = ({locale, changeLocale}) => {
   const [showLast, setShowLast] = useState(false)
   const [askedWrong, setAskedWrong] = useState(false)
   const [importToPdf, setImportToPdf] = useState(false)
+  const [importToJSON, setImportToJSON] = useState(false)
+
+  const setImportToJSONData = (imp: boolean) => {
+    setImportToJSON(imp)
+  }
 
   const setImportToPdfData = (imp: boolean) => {
     setImportToPdf(imp)
@@ -306,7 +311,9 @@ const InGame = ({locale, changeLocale}) => {
                           askedWrong={askedWrong}
                           setAskedWrong={setAskedWrongData}
                           importToPdf={importToPdf}
-                          setImportToPdf={setImportToPdfData}/>
+                          setImportToPdf={setImportToPdfData}
+                          importToJSON={importToJSON}
+                          setImportToJSON={setImportToJSONData}/>
         </div>
 
 

cryptide_project/src/Pages/Lobby.tsx

@@ -213,7 +213,7 @@ function Lobby() {
 
 
     function StartGame(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 10)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)

cryptide_project/src/Pages/NewPlay.tsx

@@ -111,6 +111,10 @@ function NewPlay() {
 
     }
 
+    function launchTuto(){
+        navigate(`${basePath}/tutorial`);
+    }
+    
 
     useEffect(() => {
         const handleLobbyCreated = (newRoom: any) => {
@@ -226,6 +230,7 @@ function NewPlay() {
                     </Overlay>
 
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
+                    <button onClick={launchTuto} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Tutoriel </button>
                     {/* <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button> */}
                     {/* {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>} */}
                     <button onClick={goBack} className="ButtonNavRejoin" style={{ visibility:returnVisibility}}>Retourner à la partie</button>

cryptide_project/src/Pages/Tutorial.tsx

@@ -0,0 +1,454 @@
+import React, { useState, useEffect } from 'react';
+import Switch from "react-switch";
+import {saveAs} from "file-saver"
+
+/* Style */
+import "./InGame.css"
+import {useTheme} from '../Style/ThemeContext'
+/* Component */
+import GraphContainer from '../Components/GraphContainer';
+import PlayerList from '../Components/PlayerList';
+import TurnBar from '../Components/TurnBar';
+
+/* Icon */
+import Param from "../res/icon/param.png";
+import Info from "../res/icon/infoGreen.png";
+import Check from "../res/icon/checkboxGreen.png";
+import MGlass from "../res/icon/magnifying-glass.png";
+import Reset from "../res/icon/reset.png";
+import Oeye from "../res/icon/eye.png";
+import Ceye from "../res/icon/hidden.png";
+import JSZip from 'jszip';
+
+/* nav */
+import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';
+
+/* Boostrap */
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+/* Model */
+import Stub from '../model/Stub';
+import { HiLanguage } from 'react-icons/hi2';
+import { Nav, NavDropdown, Spinner } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import { useGame } from '../Contexts/GameContext';
+import { socket } from '../SocketConfig';
+import { Network } from 'vis-network';
+import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript';
+import Pair from '../model/Pair';
+import Indice from '../model/Indices/Indice';
+import {basePath} from "../AdressSetup"
+import TutorialGraph from '../Components/TutorialGraph';
+
+
+let cptNavigation = 0
+
+//@ts-ignore
+const Tutorial = ({locale, changeLocale}) => {
+  
+  const theme = useTheme();
+  
+  const navigate = useNavigate()
+  
+  const params = new URLSearchParams(window.location.search);
+
+  const navigationType = useNavigationType()
+    cptNavigation++
+    if (cptNavigation % 2 == 0){
+        if (navigationType.toString() == "POP"){
+            socket.emit("player quit")
+            navigate(`${basePath}/`)
+        }
+    }
+  
+  //* Gestion solo
+  let IsSolo: boolean = true
+  const solotmp = params.get('solo');
+  if (solotmp == "false"){
+    IsSolo=false
+  }
+
+  //* Gestion daily
+  let isDaily: boolean = true
+  const isDailytmp = params.get('daily');
+  if (isDailytmp == "false"){
+    isDaily=false
+  }
+
+
+  let isEasy: boolean = true
+  const isEasytmp = params.get('easy');
+  if (isEasytmp == "false"){
+    isEasy=false
+  }
+  //* Historique
+  const [history, setHistory] = useState<string[]>([]);
+  const [showLast, setShowLast] = useState(false)
+  const [askedWrong, setAskedWrong] = useState(false)
+  const [importToPdf, setImportToPdf] = useState(false)
+  const [importToJSON, setImportToJSON] = useState(false)
+
+  const setImportToJSONData = (imp: boolean) => {
+    setImportToJSON(imp)
+  }
+
+  const setImportToPdfData = (imp: boolean) => {
+    setImportToPdf(imp)
+  }
+
+  // Fonction pour ajouter un élément à l'historique
+  const addToHistory = (message: string) => {
+    setHistory(prevHistory => [...prevHistory, message]);
+  };
+  
+  const setShowLastData = () =>{
+    setLastVisible(!showLast);
+    setShowLast(!showLast);
+  }
+
+  const setAskedWrongData = (askedWrong: boolean) => {
+    setAskedWrong(askedWrong)
+  }
+
+  useEffect(() => {
+    const historyContainer = document.getElementById('history-container');
+    if (historyContainer) {
+      historyContainer.scrollTop = historyContainer.scrollHeight;
+    }
+  }, [history]);
+
+
+  const {personNetwork, person, indices} = useGame()
+
+  const [showChoiceBar, setShowChoiceBar] = useState(false);
+  const [showTurnBar, setShowTurnBar] = useState(false);
+  const [turnBarText, setTurnBarText] = useState("");
+  const [playerTouched, setPlayerTouched] = useState(-2)
+  const [playerIndex, setPlayerIndex] = useState(-2)
+
+
+  const [network, setNetwork] = useState<Network | null>(null)
+  const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
+
+  const setNetworkData = (network: Network) => {
+    setNetwork(network)
+  }
+
+  const setNetworkEnigmeData = (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => {
+    setNetworkEnigme(networkEnigme)
+  }
+
+  const handleNodeClick = (shouldShowChoiceBar: boolean) => {
+    setShowChoiceBar(shouldShowChoiceBar);
+  };
+
+    const handleSetPlayerTouched = (newPlayerTouched: number) => {
+      setPlayerTouched(newPlayerTouched);
+    };
+  
+
+  const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
+    setShowTurnBar(shouldShowTurnBar);
+  };
+  
+  const handleTurnBarTextChange = (newTurnBarText: string) =>{
+    setTurnBarText(newTurnBarText)
+  }
+
+  const setPlayerIndexData = (playerIndex: number) => {
+    setPlayerIndex(playerIndex)
+  }
+
+  const generateTEX = async () => {
+    if (network != null && personNetwork != null && person != null){
+
+      const zip = new JSZip();
+      
+      if (isDaily && networkEnigme != null){
+        const tex = generateLatexCodeEnigme(personNetwork, person, indices, network, networkEnigme)
+        const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
+        zip.file('socialGraph.tex', tex);
+      }
+      else{
+        const tex = generateLatexCode(personNetwork, person, indices, network)
+        const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
+        zip.file('socialGraph.tex', tex);
+      }
+
+      const imageNames = ['ballon-de-basket.png', 'ballon-de-foot.png', "baseball.png", "bowling.png", "tennis.png"]; // Liste des noms de fichiers d'images
+      const imagesFolder = 'Script';
+
+      for (const imageName of imageNames) {
+        const imageUrl = process.env.PUBLIC_URL + `/${imagesFolder}/${imageName}`;
+        const response = await fetch(imageUrl);
+        
+        if (response.ok) {
+          const imageBlob = await response.blob();
+          zip.file(`${imageName}`, imageBlob);
+        } else {
+          console.error(`Erreur de chargement de l'image ${imageName}`);
+        }
+      }
+
+      const content = await zip.generateAsync({ type: 'blob' });
+
+      // Enregistre l'archive en tant que fichier
+      saveAs(content, 'social_graph.zip');
+      
+      // Utiliser FileSaver pour télécharger le fichier
+    }
+  }
+
+  const resetGraph = () => {
+    setisLoading(true);
+    socket.emit("reset graph", socket.id)
+    setTimeout(() => {
+      setisLoading(false);
+    }, 2000);  
+  }
+
+  /* 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 [cptTour, setcptTour] = useState(0);
+
+  const [LastVisible, setLastVisible] = useState(false);
+
+  const [isLoading, setisLoading] = useState(false);
+  
+
+  //@ts-ignore
+  const changecptTour = (newcptTour) => {
+    setcptTour(newcptTour);
+  };
+  
+    const handleChange = () => {
+      if (show){
+        handleClose()
+      }
+      else {
+        handleShow()
+      }
+    };
+  
+
+    const handleChangeS = () => {
+      if (showS){
+        handleCloseS()
+      }
+      else {
+        handleShowS()
+      }
+    };
+
+    const eye = LastVisible ? Oeye : Ceye; //icon que l'on affiche pour l'oeil : fermé ou ouvert.
+
+    /* Windows open */
+    //@ts-ignore
+    const openInNewTab = (url) => { //! avec url ==> dangereux
+      window.open(url);
+    };
+  
+  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  const allIndices = Stub.GenerateIndice()
+  const { indice, players, actualPlayerIndex} = useGame();
+
+  const nbPlayer = players.length;
+  const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
+
+    return (
+      <div id="mainDiv">
+        {showTurnBar && <TurnBar text={turnBarText}/>}
+        <div id='graphDiv'>
+          <TutorialGraph onNodeClick={handleNodeClick} 
+                          handleShowTurnBar={handleShowTurnBar} 
+                          handleTurnBarTextChange={handleTurnBarTextChange} 
+                          changecptTour={changecptTour} 
+                          addToHistory={addToHistory}
+                          solo={IsSolo} 
+                          isDaily={isDaily} 
+                          isEasy={isEasy}
+                          setPlayerTouched={handleSetPlayerTouched} 
+                          playerTouched={playerTouched}
+                          setNetwork={setNetworkData}
+                          setNetworkEnigme={setNetworkEnigmeData}
+                          showLast={showLast}
+                          setPlayerIndex={setPlayerIndexData}
+                          askedWrong={askedWrong}
+                          setAskedWrong={setAskedWrongData}
+                          importToPdf={importToPdf}
+                          setImportToPdf={setImportToPdfData}
+                          importToJSON={importToJSON}
+                          setImportToJSON={setImportToJSONData}/>
+        </div>
+
+        
+        {(!isDaily || (isDaily && isEasy)) &&
+          <div className='historique' id="history-container">
+              {history.map((item, index) => (
+                  <div key={index}>{item}</div>
+              ))}
+          </div>
+        }   
+
+        <div className='paramDiv'>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeS}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
+        </div>
+
+
+
+        <div className='menuGame'>
+          <div className='resetDiv'>
+            <button className='button'
+              style={{ 
+                  backgroundColor: theme.colors.tertiary,
+                  borderColor: theme.colors.secondary
+              }}
+              onClick={resetGraph}>
+              
+              {
+                isLoading ? (
+                  <Spinner animation="grow" />
+                  )
+                  : (
+                  <img src={Reset} alt="paramètres" height='40'/>
+                )
+              }
+              
+              
+            </button>
+          </div>
+
+
+
+
+          {/* <Link to='/info#indice-possible' target='_blank'> 
+            //? redirection impossible apparament (securité des navigateur
+          */}
+          <Link to={`${basePath}/info`} target='_blank'>
+            <button className='button' 
+              style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+              }}>
+              <img src={Info} alt="info" height="40"/>
+            </button>
+          </Link>
+
+          <Link to={`${basePath}/${navdeduc}`} target='_blank'>
+            <button className='button'
+              style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+              }}>
+              <img src={Check} alt="check" height="40"/>
+            </button>
+          </Link>
+
+          <button className='button' onClick={handleChange}
+            style={{ 
+              backgroundColor: theme.colors.tertiary,
+              borderColor: theme.colors.secondary
+            }}>
+            <img src={MGlass} alt="indice" height="40"/>
+          </button>
+
+          {!IsSolo && <button className='button' onClick={setShowLastData}
+            style={{ 
+              backgroundColor: theme.colors.tertiary,
+              borderColor: theme.colors.secondary
+            }}>
+            <img src={ eye } 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>
+
+          </Offcanvas.Body>
+        </Offcanvas>
+          */}
+
+          { !IsSolo &&
+            <div className='playerlistDiv'>
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
+            </div>
+          }
+
+        <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 */}
+            {indice?.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>
+    );
+  };
+  
+
+export default Tutorial;

cryptide_project/src/model/Graph/Edge.ts

@@ -2,6 +2,7 @@ class Edge{
     
     public from: number
     public to: number
+    public color: string = "black"
     
     constructor(from: number, to: number){
         this.from = from

cryptide_project/src/tuto/graph.json

@@ -0,0 +1 @@
+{"persons":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]}]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3],"friends":[{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]}]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]}]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]}]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0],"friends":[{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]}]}

cryptide_project/src/tuto/indices.json

@@ -0,0 +1 @@
+"[{\"type\":\"AgeIndice\",\"id\":5,\"minimum\":20,\"maximum\":29},{\"type\":\"SportIndice\",\"id\":24,\"sports\":[2,3]},{\"type\":\"ColorEdgesIndice\",\"id\":27,\"neighborsColors\":[0]}]"