fin du code du tuto :) <3

cryptide_project/src/Components/GraphContainer.tsx

@@ -43,6 +43,13 @@ interface MyGraphComponentProps {
   setImportToPdf: (imp: boolean) => void
   importToJSON: boolean
   setImportToJSON: (imp: boolean) => void
+
+  setPutCorrectBackground : (func: () => void) => void
+  setPutGreyBackground : (func: () => void) => void
+  setPutImposssibleGrey : (func: () => void) => void
+  putGreyBackground : () => void
+  putCorrectBackground : () => void
+  putImposssibleGrey : () => void
 }
 
 let lastAskingPlayer = 0
@@ -72,7 +79,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, importToJSON, setImportToJSON}) => {
+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, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -121,17 +128,17 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     console.log(playerTouched)
     if (touchedPlayer == -1){
       if (!askedWrongLocal){
-        socket.emit("put correct background", socket.id)
+        putCorrectBackground()
       }
     }
     else if (touchedPlayer < players.length && touchedPlayer>=0){
       if(!askedWrongLocal){
-        socket.emit("put correct background", socket.id)
-        socket.emit("put grey background", socket.id, touchedPlayer)
+        putCorrectBackground()
+        putGreyBackground()
       }
     }
     else if(touchedPlayer == players.length){
-      socket.emit("put imossible grey", socket.id)
+      putImposssibleGrey()
     }
   }, [playerTouched])
 
@@ -625,7 +632,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             askedWrongBot=true
             handleShowTurnBar(true)
             handleTurnBarTextChange("Mauvais choix, posez un carré !")
-            socket.emit("put grey background", socket.id, actualPlayerIndex)
+            touchedPlayer = actualPlayerIndex
+            putGreyBackgroud()
           }
           else{
             socket.emit("can't put square", actualPlayerIndex, room)
@@ -650,7 +658,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           }
           else{
             handleShowTurnBar(false)
-            socket.emit("put correct background", socket.id)
+            putCorrectBackground()
           }
         }
       })
@@ -719,32 +727,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       }
     };
 
-/*
-    const putGreyBackgroud = () => {
-      if (stepTuto === 3){
-        const tabGrey = [0, 1, 2, 3, 5, 6, 7, 8, 9]
-        for (const i of tabGrey){
-          nodes.update({id: i, color: "#808080"})
-        }
-        console.log("CA MARCHE")
-      }
-    };
-*/
-    
-
-    //setGreyForEveryone(() => myFunctionInsideEffect);
-    
 
-    socket.on("put correct background", () =>{
-      if (personNetwork != null){
-        for(const person of personNetwork.getPersons()){
-          networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
-        }
-      }
-    })
+    setPutCorrectBackground(() => putCorrectBackground)
 
-    socket.on("put grey background", (player) =>{
+    const putGreyBackgroud = () => {
       if (personNetwork != null){
+        const player = touchedPlayer
         const tab = mapIndexPersons.get(player)
         if (tab != undefined){
           if (player != actualPlayerIndex){
@@ -772,9 +760,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           }
         }
       }
-    })
+    };
+
+    setPutGreyBackground(() => putGreyBackgroud)
 
-    socket.on("put imossible grey", ()=>{
+    const putGreyImpossible = () => {
       if (personNetwork != null && indice!=null){
         const tabNodes: any = []
         const tester = IndiceTesterFactory.Create(indice)
@@ -795,7 +785,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           networkData.nodes.update({id: n.id, color: "#808080"})
         }
       }
-    })
+    }
+
+    setPutImposssibleGrey(() => putGreyImpossible)
 
     socket.on("end game", (winnerIndex) =>{
       if (cptEndgame % 2 == 0){
@@ -851,9 +843,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
           socket.off("already asked")
           socket.off("asked wrong")
           socket.off("asked")
-          socket.off("put correct background")
-          socket.off("put grey background")
-          socket.off("put imossible grey")
           socket.off("who plays")
     
           navigate(`${basePath}/endgame`)
@@ -915,7 +904,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                   playerIndex = 0
                 }
                 socket.emit("node checked", params.nodes[0], false, actualPlayerIndex, room, playerIndex)
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                 touchedPlayer=-1
                 askedPersons.push(person)
                 askedWrongLocal=false
@@ -953,7 +942,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 console.log("CE N'EST PAS UN BOT")
                 //@ts-ignore
                 socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex))
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                 touchedPlayer=-1
                 setPlayerTouched(-1)
               }
@@ -987,14 +976,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                   }
                   if(!works){
                     socket.emit("node checked", params.nodes[0], works, playerIndex, room, actualPlayerIndex)
-                    socket.emit("put correct background", socket.id)
+                    putCorrectBackground()
                     socket.emit("asked wrong", players[actualPlayerIndex])
                     touchedPlayer=-1
                     setPlayerTouched(-1)
                     return
                   }
                   if (i == players.length - 1){
-                    socket.emit("put correct background", socket.id)
+                    putCorrectBackground()
                     await delay(1000)
                     socket.emit("end game", actualPlayerIndex, room)
                     return
@@ -1004,7 +993,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 }
                 touchedPlayer=-1
                 setPlayerTouched(-1)
-                socket.emit("put correct background", socket.id)
+                putCorrectBackground()
                 await delay(1000)
                 socket.emit("end game", actualPlayerIndex, room)
               }
@@ -1099,12 +1088,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   function delay(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
-
-  function putGreyBackgroud(index: number){
-    /*
-    
-    */
-  }
 }
 
 

cryptide_project/src/Components/TutorialGraph.tsx

@@ -53,7 +53,7 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
   let initMtn = 0
 
   const {isLoggedIn, user, manager} = useAuth();
-  const {setIndiceData, setActualPlayerIndexData} = useGame();
+  const {setIndiceData, setIndicesData, setActualPlayerIndexData, setWinnerData, setPlayersData, setNetworkDataData, setPersonData} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
@@ -69,22 +69,6 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
 
   useEffect(() =>{
     touchedPlayer=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(() => {
@@ -127,9 +111,6 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
     const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph))
     const indices = JSONParser.JSONToIndices(jsonIndice)
 
-    console.log(indices)
-    console.log(personNetwork.getPersons())
-
     setIndiceData(indices[0])
     if (personNetwork == null){
       return
@@ -138,7 +119,8 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
 
     const nodes = new DataSet(graph.nodesPerson);
 
-
+    setIndicesData(indices)
+    setPersonData(personNetwork.getPersons()[4])
 
     let n = graph.nodesPerson;
     let e = graph.edges;
@@ -191,7 +173,6 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
         for (const i of tabGrey){
           nodes.update({id: i, color: "#808080"})
         }
-        console.log("CA MARCHE")
       }
     };
 
@@ -284,6 +265,21 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
             await delay(500)
             const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
             nodes.update({id: node2.id, label: node2.label + positionToEmoji(1, true)})
+            await delay(500)
+
+            for(const person of personNetwork.getPersons()){
+              nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
+            }
+            if (user != null){
+              const winner = user;
+              setNetworkDataData(networkData)
+              setActualPlayerIndexData(-1)
+              setLastIndex(-1)
+              setPlayerTouched(-1)
+              setWinnerData(winner)      
+              first = true
+              navigate(`${basePath}/endgame`)
+            }  
           }
         }
       }

cryptide_project/src/Pages/InGame.tsx

@@ -99,6 +99,23 @@ const InGame = ({locale, changeLocale}) => {
   const [importToPdf, setImportToPdf] = useState(false)
   const [importToJSON, setImportToJSON] = useState(false)
 
+  const [putCorrectBackground, setPutCorrectBackground] = useState<() => void>(() => {});
+  const [putGreyBackgroud, setPutGreyBackground] = useState<() => void>(() => {});
+  const [putImposssibleGrey, setPutImposssibleGrey] = useState<() => void>(() => {});
+
+
+  const setPutCorrectBackgroundData = (func: () => void) => {
+    setPutCorrectBackground(func)
+  }
+
+  const setPutGreyBackgroundData = (func: () => void) => {
+    setPutGreyBackground(func)
+  }
+
+  const setPutImposssibleGreyData = (func: () => void) => {
+    setPutImposssibleGrey(func)
+  }
+
   const setImportToJSONData = (imp: boolean) => {
     setImportToJSON(imp)
   }
@@ -313,7 +330,13 @@ const InGame = ({locale, changeLocale}) => {
                           importToPdf={importToPdf}
                           setImportToPdf={setImportToPdfData}
                           importToJSON={importToJSON}
-                          setImportToJSON={setImportToJSONData}/>
+                          setImportToJSON={setImportToJSONData}
+                          setPutCorrectBackground={setPutCorrectBackgroundData}
+                          setPutGreyBackground={setPutGreyBackgroundData}
+                          setPutImposssibleGrey={setPutImposssibleGreyData}
+                          putCorrectBackground={putCorrectBackground}
+                          putGreyBackground={putGreyBackgroud}
+                          putImposssibleGrey={putImposssibleGrey}/>
         </div>
 
 

cryptide_project/src/Pages/Lobby.tsx

@@ -70,7 +70,7 @@ function Lobby() {
     }
 
     //* nb Node
-    const [enteredNumber, setEnteredNumber] = useState(20);
+    const [enteredNumber, setEnteredNumber] = useState(25);
 
     //@ts-ignore
     const handleNumberChange = (event) => {
@@ -213,7 +213,7 @@ function Lobby() {
 
 
     function StartGame(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 10)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)