Bot prend la place des joueurs qui quittent + quand bot bug timer de 5 sc et demande au serveur à qui c'est de jouer

cryptide_project/server/server.js

@@ -26,6 +26,7 @@ io.on('connection', (socket) => {
   socket.on('network created', (network, person, indices, room, start) =>{
     io.to(room).emit("game created", network, person, indices, start)
     map.get(room).started = true
+    map.get(room).actualPlayer=start
     const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
     const playerJson = JSON.stringify(playerArray);
     io.emit("request lobbies", playerJson)
@@ -37,7 +38,7 @@ io.on('connection', (socket) => {
       socket.join(room)
     }
     if (map.get(room) == undefined){
-      map.set(room, {tab: [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}], started: false})
+      map.set(room, {tab: [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}], started: false, actualPlayer: 0})
     }
     else{
       const tab = map.get(room).tab
@@ -102,14 +103,66 @@ io.on('connection', (socket) => {
     io.to(askingPlayer.id).emit("asked wrong")
   })
 
+  socket.on("who plays", (room) => {
+    let player = map.get(room).actualPlayer
+    if (map.get(room).tab[player].type != "User"){
+      player = player + 1
+      if (player == map.get(room).tab.length){
+        player=0
+      }
+    }
+    console.log(player)
+    io.to(room).emit("who plays", player)
+  })
+
   socket.on("disconnect", () =>{
     for (const k of map.keys()){
-      const tab = map.get(k).tab
+      const tab = map.get(k)
-        for (let i = 0; i<tab.length; i++){
+        for (let i = 0; i<tab.tab.length; i++){
-          if (tab[i].id === socket.id){
+          if (tab.tab[i].id === socket.id){
-            tab.splice(i, 1)
+            if (!tab.started){
-            io.to(k).emit("player left", tab, i)
+              tab.tab.splice(i, 1)
-            if (tab.filter((p) => p.type=="User").length == 0){
+              if (i==0){
+                tab.tab.sort(comparePlayersByType).reverse()
+              }
+              io.to(k).emit("player left", tab, i)
+            }
+            else{
+              tab.tab[i].type="EasyBot"
+              tab.tab[i].pseudo="TmpBot"
+              io.to(k).emit("player left ingame", tab, i)
+            }
+            if (tab.tab.filter((p) => p.type=="User").length == 0){
+              map.delete(k)
+            }
+          }
+        }
+    }
+    const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
+    const playerJson = JSON.stringify(playerArray);
+    io.emit("request lobbies", playerJson)
+  })
+
+
+  socket.on("player quit", () => {
+    for (const k of map.keys()){
+      const tab = map.get(k)
+        for (let i = 0; i<tab.tab.length; i++){
+          if (tab.tab[i].id === socket.id){
+            if (!tab.started){
+              tab.tab.splice(i, 1)
+              if (i==0){
+                tab.tab.sort(comparePlayersByType).reverse()
+
+              }
+              io.to(k).emit("player left", tab, i)
+            }
+            else{
+              tab.tab[i].type="EasyBot"
+              tab.tab[i].pseudo="TmpBot"
+              io.to(k).emit("player left ingame", tab, i)
+            }
+            if (tab.tab.filter((p) => p.type=="User").length == 0){
               map.delete(k)
             }
           }
@@ -121,6 +174,7 @@ io.on('connection', (socket) => {
   })
 
   socket.on("node checked", (id, works, color, room, playerIndex) =>{
+    map.get(room).actualPlayer=playerIndex
     io.to(room).emit("node checked", id, works, color, playerIndex, socket.id)
   })
   
@@ -157,3 +211,14 @@ io.on('connection', (socket) => {
     map.delete(room)
   })
 });
+
+
+function comparePlayersByType(a, b) {
+  if (a.type < b.type) {
+    return -1;
+  } else if (a.type > b.type) {
+    return 1;
+  } else {
+    return 0;
+  }
+}

cryptide_project/src/Components/GraphContainer.tsx

@@ -14,6 +14,9 @@ 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";
 
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
@@ -53,6 +56,9 @@ let endgame= false
 let firstHistory = true
 let cptSquare = 0
 let cptOnAskedWrong = 0
+let cptPlayerLeft = 0
+let firstPlayer = 0
+let cptBug = 0
 
 
 const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong}) => {
@@ -62,7 +68,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   let initMtn = 0
 
   const {isLoggedIn, user, manager} = useAuth();
-  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData} = useGame();
+  const { indices, indice, person, personNetwork, setNodeIdData, players, setPlayersData, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData, setNetworkDataData, setSeedData} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
@@ -76,6 +82,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       setElapsedTime((prevElapsedTime) => prevElapsedTime + 0.5);
       settempsData(elapsedTime)
 
+      cptBug ++
+      console.log(cptBug)
+      if (cptBug > 10){
+        cptBug = 0
+        socket.emit("who plays", room)
+      }
+
+
       // Vérifiez si la durée est écoulée, puis arrêtez le timer
       if (endgame) {
         clearInterval(intervalId);
@@ -140,7 +154,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   }
 
   useEffect(() =>{
-    if (actualPlayerIndex==0){
+    cptBug=0
+    if (actualPlayerIndex==firstPlayer){
       const bot = players[lastIndex]
       if(bot instanceof Bot && botIndex != lastIndex){
         botIndex = lastIndex
@@ -176,7 +191,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 socket.emit("node checked", personIndex, works, playerIndex, room, nextPlayerIndex)
                 const ind = bot.placeSquare(personNetwork, players)
                 if (ind == -1 ){
-                  addToHistory(lastIndex.toString() + "177")
                   socket.emit("can't put square", lastIndex, room)
                   return
                 }
@@ -211,7 +225,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                   socket.emit("node checked", personIndex, false, choosedPlayerIndex, room, lastIndex)
                   const ind = bot.placeSquare(personNetwork, players)
                   if (ind == -1 ){
-                    addToHistory(lastIndex.toString() + "212")
                     socket.emit("can't put square", playerIndex, room)
                     return
                   }
@@ -231,7 +244,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 if (!tester.Works(person)){
                   const ind = bot.placeSquare(personNetwork, players)
                   if (ind == -1 ){
-                    addToHistory(lastIndex.toString() + "232")
                     socket.emit("can't put square", playerIndex, room)
                     return
                   }
@@ -319,7 +331,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                 direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
                 sortMethod: 'hubsize'
             },
-            distanceMin: 500, // Set the minimum distance between nodes
             //randomSeed: 2
         },
         physics: {
@@ -368,6 +379,59 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       }
     }
 
+    socket.on("player left ingame", (tab, i) => {
+      cptPlayerLeft ++
+      if (cptPlayerLeft % 2 == 0){
+        const tmpTab: Player[] = []
+        for (const p of tab.tab){
+            tmpTab.push(JSONParser.JSONToPlayer(p))
+        }
+        if (i==firstPlayer){
+          console.log(tmpTab)
+          for(let index = 0; index < tmpTab.length; index++){
+            const test = tmpTab[index]
+            if (test instanceof User){
+              firstPlayer=index
+              break
+            }
+          }
+          console.log(firstPlayer)
+          if (actualPlayerIndex==firstPlayer){
+            tmpTab.forEach((p, index) =>{
+              if (p instanceof Bot && personNetwork!=null){
+                p.indice=indices[index]
+                p.index=index
+                p.initiateMap(personNetwork)
+                console.log(p.indice.ToString("fr"))
+              }
+            })
+          }
+        }
+        else{
+          const bot = tmpTab[i]
+          if (bot instanceof Bot && personNetwork != null){
+            bot.indice=indices[i]
+            bot.index=index
+            bot.initiateMap(personNetwork)
+            console.log(bot.indice.ToString("fr"))
+          }
+        }
+        if (i==playerIndex){
+          playerIndex = lastIndex + 1
+          if(playerIndex == players.length){
+            playerIndex = 0
+          }
+          setPlayerIndex(playerIndex)
+          setLastIndex(playerIndex)
+          if (playerIndex===actualPlayerIndex){
+            handleTurnBarTextChange("À vous de jouer")
+            handleShowTurnBar(true)
+          }
+        }
+        setPlayersData(tmpTab)
+      }
+  })
+
     socket.on("reset graph", () => {
       console.log("reset graph")
       initialOptions.physics.enabled = true
@@ -375,6 +439,16 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     })
 
     if (!solo){
+
+      socket.on("who plays", (index) => {
+        playerIndex=index
+        setPlayerIndex(index)
+        setLastIndex(index)
+        if (actualPlayerIndex==index){
+          handleShowTurnBar(true)
+        }
+      })
+
       socket.on("asked all", (id) =>{
         //@ts-ignore
         const pers = personNetwork.getPersons().find((p) => p.getId() == id)
@@ -401,12 +475,15 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       })
       
       socket.on("node checked",(id, works, askedIndex, newPlayerIndex, socketId) => {
+        cptBug=0
         //@ts-ignore
         const node = nodes.get().find((n) => id == n.id)
         if (node!=undefined){
           onNodeClick(false)
           playerIndex = newPlayerIndex
           setPlayerIndex(playerIndex)
+          setLastIndex(newPlayerIndex)
+          console.log(newPlayerIndex)
           //@ts-ignore
           if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
             //@ts-ignore
@@ -488,6 +565,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       })
 
       socket.on("can't put square", (askingPlayer) => {
+        cptBug=0
         cptOnAskedWrong ++
         if (cptOnAskedWrong % 2 == 0){
           addToHistory(players[askingPlayer].pseudo + " ne peut plus poser de carré")
@@ -510,6 +588,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   
   
       socket.on("asked", (nodeId, askingPlayer) => {
+        
         if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
           lastAskingPlayer = askingPlayer.id
           lastNodeId = nodeId
@@ -645,6 +724,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         askedWrongBot=false
         endgame = true
         firstHistory=true
+        cptBug=0
         try{
           if(isLoggedIn){
             if(!solo){
@@ -719,6 +799,8 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     network.on("click", async (params) => {
       
       if(params.nodes.length > 0){
+        console.log(actualPlayerIndex + " => " + playerIndex)
+        console.log(playerTouched)
         setNodeIdData(params.nodes[0])
         // addToHistory("Le joueur a cliqué") //! TEST DEBUG
         if (!solo){

cryptide_project/src/Pages/InGame.tsx

@@ -28,7 +28,7 @@ import Ceye from "../res/icon/hidden.png";
 import JSZip from 'jszip';
 
 /* nav */
-import { Link } from 'react-router-dom';
+import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';
 
 /* Boostrap */
 import Button from 'react-bootstrap/Button';
@@ -50,13 +50,25 @@ import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript'
 import Pair from '../model/Pair';
 import Indice from '../model/Indices/Indice';
 
+let cptNavigation = 0
+
 //@ts-ignore
 const InGame = ({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("/play")
+        }
+    }
   
   //* Gestion solo
   let IsSolo: boolean = true

cryptide_project/src/Pages/Lobbies.tsx

@@ -61,7 +61,7 @@ function Lobbies() {
             }
             setLobbyData(tmpTab)
         })
-    })
+    }, [])
 
     
 

cryptide_project/src/Pages/Lobby.tsx

@@ -130,8 +130,8 @@ function Lobby() {
         setIndicesData(choosenIndices)
         first = true
         gameStarted = true
-        socket.off("player left")
+        //socket.off("player left")
-        socket.off("new player")
+        //socket.off("new player")
         navigate('/game?solo=false&daily=false');
     });
 
@@ -146,9 +146,10 @@ function Lobby() {
 
     socket.on("player left", (tab, i) => {
         const tmpTab: Player[] = []
-        for (const p of tab){
+        for (const p of tab.tab){
             tmpTab.push(JSONParser.JSONToPlayer(p))
         }
+        console.log(tmpTab)
         setPlayersData(tmpTab)
     })
 
@@ -214,7 +215,7 @@ function Lobby() {
                         // <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
                         <PlayerItemList key={player.id} player={player} room={room}/>
                     ))}
-                    <div className='centerButton'>
+                    {(players.length < 6) && <div className='centerButton'>
                             <button className='button' onClick={addBot}
                                 style={{
                                     backgroundColor: theme.colors.primary,
@@ -222,6 +223,7 @@ function Lobby() {
                                 +
                             </button>
                     </div>
+                    }
                 </div>
             </div>
 

cryptide_project/src/Pages/Play.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react';
 
 /* Context */
 import { useAuth } from '../Contexts/AuthContext';
-
 /* Style */
 import './Play.css';
 import { useTheme } from '../Style/ThemeContext';
@@ -13,7 +12,7 @@ import ButtonImgNav from "../Components/ButtonImgNav";
 /* Img */
 /* Icon */
 import { socket } from '../SocketConfig';
-import { useNavigate } from 'react-router-dom';
+import { NavigationType, useNavigate, useNavigationType } from 'react-router-dom';
 import GameCreator from '../model/GameCreator';
 import { useGame } from '../Contexts/GameContext';
 import ScoreBoard from '../Components/ScoreBoard';
@@ -32,6 +31,9 @@ import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 
 
+let cptNavigation = 0
+
+
 function Play() {
     let first = true
 
@@ -41,6 +43,16 @@ function Play() {
 
     const target = useRef(null);
 
+    const navigationType = useNavigationType()
+    cptNavigation++
+    if (cptNavigation % 2 == 0){
+        if (navigationType.toString() == "POP"){
+            socket.emit("player quit")
+        }
+    }
+
+
+
     useEffect(() => {
         const fetchUserInformation = async () => {
             try {
@@ -108,6 +120,7 @@ function Play() {
         }
     }, [isLoggedIn]);
 
+
     const [room, setRoom] = useState(null);
     const navigate = useNavigate();