Bouton pour highlight les derniers coups jouer + bouton pour reset le graph

cryptide_project/server/server.js

@@ -18,7 +18,7 @@ const map = new Map()
 // ... le reste de votre configuration du serveur
 
 server.listen(3002, () => {
-  console.log('Serveur Socket.IO écoutant sur le port 3001');
+  console.log('Serveur Socket.IO écoutant sur le port 3002');
 });
 
 io.on('connection', (socket) => {
@@ -80,7 +80,7 @@ io.on('connection', (socket) => {
         for (let i = 0; i<tab.length; i++){
           if (tab[i].id === socket.id){
             tab.splice(i, 1)
-            io.to(k).emit("player left", tab, socket.id)
+            io.to(k).emit("player left", tab, i)
           }
         }
     }
@@ -102,8 +102,19 @@ io.on('connection', (socket) => {
     io.to(id).emit("put imossible grey")
   })
 
+  socket.on("opacity activated", (id) => {
+    io.to(id).emit("opacity activated")
+  })
+
+  socket.on("opacity deactivated", (id) => {
+    io.to(id).emit("opacity deactivated")
+  })
+
+  socket.on("reset graph", (id) => {
+    io.to(id).emit("reset graph")
+  })  
+
   socket.on("end game", (winnerIndex, room) =>{
-    console.log("endgame")
     io.to(room).emit("end game", winnerIndex)
   })
 });

cryptide_project/src/Components/GraphContainer.css

@@ -11,4 +11,4 @@
     align-items: center;
     
     background-color: #f5f5f5;
-}
+}

cryptide_project/src/Components/GraphContainer.tsx

@@ -1,27 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
-import EdgesCreator from "../model/EdgesCreator";
 import GraphCreator from "../model/Graph/GraphCreator";
-import IndiceChooser from "../model/IndiceChooser";
-import SportIndice from "../model/Indices/SportIndice";
-import NetworkGenerator from "../model/NetworkGenerator";
-import Sport from "../model/Sport";
-import Stub from "../model/Stub";
 import "./GraphContainer.css";
-import NodePerson from "../model/Graph/NodePerson";
 import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory";
-import GameCreator from "../model/GameCreator";
-import io from 'socket.io-client';
-import JSONParser from "../JSONParser";
-import PersonNetwork from "../model/PersonsNetwork";
 import Person from "../model/Person";
-import Indice from "../model/Indices/Indice";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
 import { useGame } from "../Contexts/GameContext";
 import { socket } from "../SocketConfig"
 import { colorToEmoji, positionToColor } from "../ColorHelper";
 import { ColorToHexa } from "../model/EnumExtender";
 import Bot from "../model/Bot";
+import NodePerson from "../model/Graph/NodePerson";
 
 
 interface MyGraphComponentProps {
@@ -33,6 +22,7 @@ interface MyGraphComponentProps {
   changecptTour: (newcptTour : number) => void
   addToHistory: (message : string) => void
   solo : boolean
+  showLast: boolean
 }
 
 let lastAskingPlayer = 0
@@ -48,9 +38,10 @@ let botTurnToCube = false
 let lastSocketId= ""
 let firstLap = true
 let cptHistory = 0
+let lastNodes: NodePerson[] = []
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, addToHistory, showLast}) => {
 let cptTour: number = 0
 
   const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData } = useGame();
@@ -78,6 +69,25 @@ let cptTour: number = 0
     }
   }, [playerTouched])
 
+
+  useEffect(() => {
+    const tab: NodePerson[] = []
+    for(const n of lastNodes.reverse()){
+      if (!tab.find((node) => node.id == n.id)){
+        tab.push(n)
+        if (tab.length > players.length * 1.5) break
+      }
+    }
+    lastNodes = tab
+    if (showLast){
+      socket.emit("opacity activated", socket.id)
+    }
+    else{
+      socket.emit("opacity deactivated", socket.id)
+    }
+    
+  }, [showLast])
+
   let playerIndex: number = turnPlayerIndex
   let index = 0
   for (let i=0; i<players.length; i++){
@@ -121,6 +131,13 @@ let cptTour: number = 0
               }
               if(!works){
                 socket.emit("node checked", personIndex, works, playerIndex, room, nextPlayerIndex)
+                const ind = bot.placeSquare(personNetwork, players)
+                console.log(lastIndex + " pose carré sur " + personNetwork.getPersons()[ind].getName())
+                playerIndex = lastIndex + 1
+                if(playerIndex == players.length){
+                  playerIndex = 0
+                }
+                socket.emit("node checked", ind, false, lastIndex, room, playerIndex)
                 return
               }
               playerIndex ++
@@ -215,13 +232,15 @@ let cptTour: number = 0
 
     // 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,
@@ -233,7 +252,6 @@ let cptTour: number = 0
         }
     };
 
-    
     const networkData = { nodes: nodes, edges: graph.edges };
     const network = new Network(container, networkData, initialOptions);
 
@@ -244,11 +262,29 @@ let cptTour: number = 0
           askedPersons.push(pers)
         }
       })
+
+      socket.on("opacity activated", () => {
+        nodes.forEach(node => {
+          if (!lastNodes.find((n) => n.id == node.id)){
+            networkData.nodes.update({id: node.id, opacity: 0.2})
+          }
+        });
+      })
+
+      socket.on("opacity deactivated", () => {
+        nodes.forEach(node => {
+          networkData.nodes.update({id: node.id, opacity: 1})
+        });
+      })
+
+      socket.on("reset graph", () => {
+        initialOptions.physics.enabled = true
+        network.setOptions(initialOptions)
+      })
       
       socket.on("node checked",(id, works, askedIndex, newPlayerIndex, socketId) => {
         const node = nodes.get().find((n) => id == n.id)
         if (node!=undefined){
-          
           onNodeClick(false)
           playerIndex = newPlayerIndex
           if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
@@ -270,7 +306,8 @@ let cptTour: number = 0
             networkData.nodes.update({id: id, label: node.label + colorToEmoji(positionToColor(askedIndex), works)})
             cptHistory++
             if (cptHistory % 2 == 0){
-              addToHistory(players[askedIndex].name + " à mis un " + colorToEmoji(positionToColor(askedIndex), works))
+              lastNodes.push(node)
+              addToHistory(players[askedIndex].name + " à mis un " + colorToEmoji(positionToColor(askedIndex), works) + " à " + personNetwork.getPersons()[id].getName())
             }
           }
 
@@ -407,6 +444,10 @@ let cptTour: number = 0
     })
 
     socket.on("end game", (winnerIndex) =>{
+      setNodeIdData(-1)
+      setActualPlayerIndexData(-1)
+      setLastIndex(-1)
+      setPlayerTouched(-1)
       setWinnerData(players[winnerIndex])
       navigate("/endgame")
     })
@@ -474,10 +515,12 @@ let cptTour: number = 0
                     nextPlayerIndex = 0
                   }
                   socket.emit("node checked", params.nodes[0], true, touchedPlayer, room, nextPlayerIndex)
+                  setPlayerTouched(-1)
                 }
                 else{
                   socket.emit("node checked", params.nodes[0], false, touchedPlayer, room, actualPlayerIndex)
                   socket.emit("asked wrong", players[actualPlayerIndex])
+                  setPlayerTouched(-1)
                 }
               }
             }
@@ -486,8 +529,9 @@ let cptTour: number = 0
                 console.log(touchedPlayer)
                 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)
+                touchedPlayer=-1
+                setPlayerTouched(-1)
               }
-              touchedPlayer=-1
             }
           }
           else if(playerIndex == actualPlayerIndex && touchedPlayer==players.length){
@@ -516,9 +560,11 @@ let cptTour: number = 0
                     socket.emit("node checked", params.nodes[0], true, playerIndex, room, actualPlayerIndex)
                   }
                   if(!works){
-                    socket.emit("node checked", params.nodes[0], works, playerIndex, room, nextPlayerIndex)
+                    socket.emit("node checked", params.nodes[0], works, playerIndex, room, actualPlayerIndex)
                     socket.emit("put correct background", socket.id)
+                    socket.emit("asked wrong", players[actualPlayerIndex])
                     touchedPlayer=-1
+                    setPlayerTouched(-1)
                     return
                   }
                   if (i == players.length - 1){
@@ -531,6 +577,7 @@ let cptTour: number = 0
                   i++
                 }
                 touchedPlayer=-1
+                setPlayerTouched(-1)
                 socket.emit("put correct background", socket.id)
                 await delay(1000)
                 socket.emit("end game", actualPlayerIndex, room)

cryptide_project/src/Pages/InGame.css

@@ -32,6 +32,20 @@
     right: 10px;
 }
 
+.opacityDiv{
+    z-index: 1;
+    position: absolute;
+    top: 100px;
+    right: 10px;
+}
+
+.resetDiv{
+    z-index: 1;
+    position: absolute;
+    top: 190px;
+    right: 10px;
+}
+
 #graphDiv{
 
     display: flex;

cryptide_project/src/Pages/InGame.tsx

@@ -37,6 +37,7 @@ import Color from '../model/Color';
 import { useGame } from '../Contexts/GameContext';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavLink } from 'react-router-dom';
+import { socket } from '../SocketConfig';
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
@@ -55,12 +56,22 @@ const InGame = ({locale, changeLocale}) => {
 
   //* Historique
   const [history, setHistory] = useState<string[]>([]);
+  const [showLast, setShowLast] = useState(false)
 
   // Fonction pour ajouter un élément à l'historique
   const addToHistory = (message: string) => {
     setHistory(prevHistory => [...prevHistory, message]);
   };
   
+  const setShowLastData = () =>{
+    if (showLast){
+      setShowLast(false)
+    }
+    else{
+      setShowLast(true)
+    }
+  }
+
   useEffect(() => {
     const historyContainer = document.getElementById('history-container');
     if (historyContainer) {
@@ -68,9 +79,6 @@ const InGame = ({locale, changeLocale}) => {
     }
   }, [history]);
 
-
-
-
   const [showChoiceBar, setShowChoiceBar] = useState(false);
   const [showTurnBar, setShowTurnBar] = useState(false);
   const [turnBarText, setTurnBarText] = useState("");
@@ -93,6 +101,10 @@ const InGame = ({locale, changeLocale}) => {
     setTurnBarText(newTurnBarText)
   }
 
+  const resetGraph = () => {
+    socket.emit("reset graph", socket.id)
+  }
+
   /* 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 ?
@@ -164,7 +176,8 @@ const InGame = ({locale, changeLocale}) => {
                           addToHistory={addToHistory}
                           solo={IsSolo} 
                           setPlayerTouched={handleSetPlayerTouched} 
-                          playerTouched={playerTouched}/>
+                          playerTouched={playerTouched}
+                          showLast={showLast}/>
         </div>
 
 
@@ -195,6 +208,29 @@ const InGame = ({locale, changeLocale}) => {
           </button>
         </div>
 
+        <div className='opacityDiv'>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={setShowLastData}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
+        </div>
+
+
+        <div className='resetDiv'>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.tertiary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={resetGraph}>
+            <img src={Param} alt="paramètres" height='40'/>
+          </button>
+        </div>
+
         <div className='menuGame'>
           {/* <Link to='/info#indice-possible' target='_blank'> 
             //? redirection impossible apparament (securité des navigateur

cryptide_project/src/Pages/Lobby.tsx

@@ -81,6 +81,8 @@ function Lobby() {
         setIndicesData(choosenIndices)
         first = true
         gameStarted = true
+        socket.off("player left")
+        socket.off("new player")
         navigate('/game?solo=false');
     });
 
@@ -92,25 +94,12 @@ function Lobby() {
         setPlayersData(tmpTab)
     })
 
-    socket.on("player left", (tab, socketId) => {
-        if (gameStarted){
-            const i = players.findIndex((p) => p.id == socketId)
-            if (i != undefined){
-                let player = players[i]
-                player = new EasyBot("125", "BOT125")
-                if (player instanceof Bot){
-                    player.indice = indices[i]
-                }
-            }
-        }
-        else{
-            const tmpTab: Player[] = []
-            for (const p of tab){
-                tmpTab.push(JSONParser.JSONToPlayer(p))
-            }
-            setPlayersData(tmpTab)
+    socket.on("player left", (tab, i) => {
+        const tmpTab: Player[] = []
+        for (const p of tab){
+            tmpTab.push(JSONParser.JSONToPlayer(p))
         }
-        const index = players
+        setPlayersData(tmpTab)
     })
 
     const [codeShowed, setCodeShowed] = useState(true);

cryptide_project/src/SocketConfig.ts

@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 
 
-const socket = io("http://172.20.10.4:3002");
+const socket = io("http://localhost:3002");
 
 export {socket}

cryptide_project/src/model/Graph/Edge.ts

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

cryptide_project/src/model/Graph/NodeColor.ts

@@ -0,0 +1,11 @@
+class NodeColor{
+    public background: string
+    public border: string
+
+    constructor(color: string, border: string){
+        this.background=color
+        this.border=border
+    }
+}
+
+export default NodeColor

cryptide_project/src/model/Graph/NodePerson.ts

@@ -8,6 +8,8 @@ class NodePerson{
     public color: string
     public font: Font
     public shape: string
+    public shadow: boolean = true
+    public opacity: number = 1
 
     constructor(id: number, label: string, color: Color, font: Font, shape: string){
         this.id=id

cryptide_project/src/model/NetworkGenerator.ts

@@ -53,7 +53,10 @@ class NetworkGenerator{
             }
             let sports = []
             for (let j = 0; j < 3; j++){
-                if (tmpTabSport.length == 0) tmpTabSport = [...tabSports]
+                if (tmpTabSport.length == 0){
+                    tmpTabSport = [...tabSports]
+                    break
+                }
                 const rand = Math.floor(Math.random() * tmpTabSport.length)
                 if (tmpTabSport[rand] != Sport.AUCUN){
                     sports.push(tmpTabSport[rand])

cryptide_project/src/model/Stub.ts

@@ -50,13 +50,8 @@ class Stub{
 
         //* Nombre de sport
         for (let i=1; i<3; i++){
-            for (let j=0; j<3; j++){
-                if (j==i){
-                    continue
-                }
-                indices.push(new NbSportIndice(test, [i, j]))
-                test++
-            }
+            indices.push(new NbSportIndice(test, [i]))
+            test++
             
         }
         return indices