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

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)
+        putCorrectBackground()
-        socket.emit("put grey background", socket.id, touchedPlayer)
+        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")
-      }
-    };
-*/
 
+    setPutCorrectBackground(() => putCorrectBackground)
 
-    //setGreyForEveryone(() => myFunctionInsideEffect);
+    const putGreyBackgroud = () => {
-    
-
-    socket.on("put correct background", () =>{
-      if (personNetwork != null){
-        for(const person of personNetwork.getPersons()){
-          networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
-        }
-      }
-    })
-
-    socket.on("put grey background", (player) =>{
       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)
               }
@@ -1013,23 +1002,22 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         } 
         else{
           //@ts-ignore
-          const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
+          const personTest = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
-          if (person != undefined){
+          const node = nodes.get().find((n: any) => params.nodes[0] == n.id)
+          if (personTest != undefined && !node.label.includes(positionToEmoji(index, true)) && !node.label.includes(positionToEmoji(index, false))){ //si la personne existe et que le noeud n'a pas déjà été cliqué
             let index =0
-            let works = true
             for (const i of indices){
               const tester = IndiceTesterFactory.Create(i)
-              const test = tester.Works(person)
+              const test = tester.Works(personTest)
                 //@ts-ignore
-              const node = nodes.get().find((n) => params.nodes[0] == n.id)
               if (node!=undefined){
-                if (!node.label.includes(positionToEmoji(index, test))){
+                const nodeNode = nodes.get().find((n: any) => params.nodes[0] == n.id)
-                  networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(index, test)})
+                networkData.nodes.update({id: params.nodes[0], label: nodeNode.label + positionToEmoji(index, test)})
-                  await delay(500)
+                await delay(500);
-                  if(!test){
-                    works = false
               }
-                  if (index == indices.length - 1 && works){
+              index++
+            }
+            if (person !== null && person.getId() === params.nodes[0]){
 
               if (user!=null){
                 setWinnerData(user)
@@ -1067,13 +1055,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
               }
               navigate(`${basePath}/endgame?solo=true&daily=${isDaily}`)
             }
-                  
+            else{
-                }
+              addToHistory(personTest.getName() + " n'est pas le coupable !"); //TODO préciser le nombre d'indice qu'il a de juste
-              }
-              index++
-            }
-            addToHistory(person.getName() + " n'est pas le coupable !"); //TODO préciser le nombre d'indice qu'il a de juste
-
               cptTour ++; // On Incrémente le nombre de tour du joueur
               const tour = cptTour+1;
               addToHistory("<----- [Tour " + tour  +"/"+networkData.nodes.length + "] ----->");
@@ -1081,6 +1064,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             }
           }
         }
+      }
         // Renvoyer un true pour afficher la choice bar
       else{
         // Renvoyer un false pour cacher la choice bar
@@ -1099,12 +1083,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

@@ -54,7 +54,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();
@@ -70,22 +70,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(() => {
@@ -128,9 +112,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
@@ -139,7 +120,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;
@@ -192,7 +174,6 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
         for (const i of tabGrey){
           nodes.update({id: i, color: "#808080"})
         }
-        console.log("CA MARCHE")
       }
     };
 
@@ -224,6 +205,7 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
             nodes.update({id: node.id, label: node.label + positionToEmoji(1, true)})
             handleShowTurnBar(false)
             setPlayerIndex(1)
+            setPlayerTouched(-1)
             await delay(500)
             const node2 = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
             if (node2 === undefined)return;
@@ -250,8 +232,8 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
           }
           if (node.id === 0){
             nodes.update({id: node.id, label: node.label + positionToEmoji(2, false)})
+            setPlayerTouched(-1)
             displayModalstep(2);
-            console.log("display liam")
             handleTurnBarTextChange("Mauvais choix, posez un carré !")
             const tabGrey = [7, 0, 4, 1, 8]
             for (const id of tabGrey){
@@ -301,10 +283,26 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
           if (node === undefined)return;
           if (node.id === 4){
             nodes.update({id: node.id, label: node.label + positionToEmoji(0, true)})
+            setPlayerTouched(-1)
             await delay(500)
             const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
             if (node2 === undefined)return;
             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)