fin code du tuto manque juste partie pif

7 months ago · 14b2bb398c
parent 4c53dfe324
commit 14b2bb398c
5 changed files with 122 additions and 8 deletions
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@ -709,6 +709,30 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
        }
      }
    }
+
+
+    const putCorrectBackground = () => {
+      if (personNetwork != null){
+        for(const person of personNetwork.getPersons()){
+          networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
+        }
+      }
+    };
+
+/*
+    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", () =>{
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@ -16,13 +16,15 @@ interface PlayerListProps {
    setPlayerTouched: (newPlayerTouch: number) => void;
    playerIndex: number
    askedWrong: boolean
+    greyForEveryone: () => void
 }

-const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong}) => {
+const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong, greyForEveryone}) => {
    const theme = useTheme();

    function askEveryone(){
        if (!askedWrong){
+            greyForEveryone()
            setPlayerTouched(players.length)    
        }
    }
--- a/cryptide_project/src/Components/TutorialGraph.tsx
+++ b/cryptide_project/src/Components/TutorialGraph.tsx
@ -34,6 +34,7 @@ interface TutorialGraphProps {
  playerTouched: number
  tutoStep: number
  setTutoStep: (step: number) => void
+  setGreyForEveryone: (func: () => void) => void
 }

 let lastNodes: NodePerson[] = []
@ -45,7 +46,7 @@ let stepTuto = -1



-const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep}) => {
+const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep, setGreyForEveryone}) => {
  let cptTour: number = 0

  //* Gestion du temps :
@ -88,6 +89,9 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP

  useEffect(() => {
    stepTuto = tutoStep
+    if(stepTuto===1){
+      handleShowTurnBar(true)
+    }
  }, [tutoStep])


@ -124,6 +128,7 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
    const indices = JSONParser.JSONToIndices(jsonIndice)

    console.log(indices)
+    console.log(personNetwork.getPersons())

    setIndiceData(indices[0])
    if (personNetwork == null){
@ -134,6 +139,7 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
    const nodes = new DataSet(graph.nodesPerson);


+
    let n = graph.nodesPerson;
    let e = graph.edges;
    const graphState = { n, e };
@ -179,6 +185,19 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
    network.stabilize();
    setNetwork(network)

+    const myFunctionInsideEffect = () => {
+      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);
+
+
    network.on("click", async (params) => {
      
      if(params.nodes.length > 0){
@ -198,12 +217,75 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
      if(params.nodes.length > 0){
        if (stepTuto === 0 && touchedPlayer === 1){
          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
-          const pers = personNetwork.getPersons().find((p) => p.getId() === node?.id)
-          if (node !== undefined && pers !== undefined && pers.getName() === "Violet"){
-            networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(1, true)})
+          if (node.id === 7){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(1, true)})
+            handleShowTurnBar(false)
+            setPlayerIndex(1)
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+            nodes.update({id: node.id, label: node2.label + positionToEmoji(2, false)})
+            await delay(500)
+            const node3 = nodes.get().find((n: NodePerson) => n.id === 8)
+            nodes.update({id: node3.id, label: node3.label + positionToEmoji(1, false)})
+            setPlayerIndex(2)
+            await delay(500)
+            const node4 = nodes.get().find((n: NodePerson) => n.id === 0)
+            nodes.update({id: node4.id, label: node4.label + positionToEmoji(1, true)})
+            setPlayerIndex(0)
            setTutoStep(1)
          }
        }
+        else if(stepTuto === 1 && touchedPlayer === 2){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node.id === 0){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(2, false)})
+            handleTurnBarTextChange("Mauvais choix, posez un carré !")
+            const tabGrey = [7, 0, 4, 1, 8]
+            for (const id of tabGrey){
+              const node = nodes.get().find((n: NodePerson) => n.id === id)
+              nodes.update({id: node.id, color: "#808080"})
+            }
+            setTutoStep(2)
+          }
+        }
+        else if(stepTuto === 2){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node.id === 9){
+            const tabColor = [7, 0, 4, 1, 8]
+            nodes.update({id: node.id, label: node.label + positionToEmoji(0, false)})
+            for(const id of tabColor){
+              const pers = personNetwork.getPersons().find((p: Person) => p.getId() === id)
+              if (pers !== undefined){
+                nodes.update({id: id, color: ColorToHexa(pers.getColor())})
+              }
+            }
+            handleShowTurnBar(false)
+            setPlayerIndex(1)
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+            nodes.update({id: node2.id, label: node2.label + positionToEmoji(2, true)})
+            setPlayerIndex(2)
+            await delay(500)
+            const node3 = nodes.get().find((n: NodePerson) => n.id === 3)
+            nodes.update({id: node3.id, label: node3.label + positionToEmoji(0, false)})
+            await delay(500)
+            const node4 = nodes.get().find((n: NodePerson) => n.id === 1)
+            nodes.update({id: node4.id, label: node4.label + positionToEmoji(2, false)})
+            setPlayerIndex(0)
+            handleTurnBarTextChange("A vous de jouer !")
+            handleShowTurnBar(true)
+            setTutoStep(3)
+          }
+        }
+        else if(stepTuto === 3 && touchedPlayer === 3){
+          const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+          if (node.id === 4){
+            nodes.update({id: node.id, label: node.label + positionToEmoji(0, true)})
+            await delay(500)
+            const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+            nodes.update({id: node2.id, label: node2.label + positionToEmoji(1, true)})
+          }
+        }
      }
      else{
        setPlayerTouched(-1)
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@ -449,7 +449,7 @@ const InGame = ({locale, changeLocale}) => {

          { !IsSolo &&
            <div className='playerlistDiv'>
-              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
+              <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong} greyForEveryone={() => {}}/>
            </div>
          }

--- a/cryptide_project/src/Pages/Tutorial.tsx
+++ b/cryptide_project/src/Pages/Tutorial.tsx
@ -57,6 +57,11 @@ const Tutorial = ({locale, changeLocale}) => {
  
  const navigate = useNavigate()
  
+  const [greyForEveryone, setGreyForEveryone] = useState<() => void>(() => {});
+
+  const setGreyForEveryoneData = (func: () => void) => {
+    setGreyForEveryone(func)
+  }

  const navigationType = useNavigationType()
    cptNavigation++
@ -238,7 +243,8 @@ const Tutorial = ({locale, changeLocale}) => {
                          playerTouched={playerTouched}
                          setNetwork={setNetworkData}
                          showLast={showLast}
-                          setPlayerIndex={setPlayerIndexData}/>
+                          setPlayerIndex={setPlayerIndexData}
+                          setGreyForEveryone={setGreyForEveryoneData}/>
        </div>

        <div className='historique' id="history-container">
@ -341,7 +347,7 @@ const Tutorial = ({locale, changeLocale}) => {

          
          <div className='playerlistDiv'>
-            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
+            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong} greyForEveryone={greyForEveryone}/>
          </div>