Bouton permettant à l'utilisateur qui a quitté une partie de revenir dedans

cryptide_project/server/server.js

@@ -37,9 +37,21 @@ io.on('connection', (socket) => {
     io.to(playerId).emit("join during game", networkPerson, person, indices, start, map.get(room).tab, nodes)
   })
 
+  socket.on("join back game", (player) => {
+    for (const k of map.keys()){
+      const tab = map.get(k)
+        for (let i = 0; i<tab.tab.length; i++){
+          if (tab.tab[i].pseudo === player.pseudo && tab.tab[i].type !== "User"){
+            if (tab.started){
+              io.to(socket.id).emit("join back game", k)
+            }
+          }
+        }
+    }
+  })
+
   socket.on("lobby joined", (room, player) =>{
-    if (lastSocketJoined != player.id){
-      lastSocketJoined=player.id
+
     const game = map.get(room)
     if (game !== undefined){
       if (game.tab.length == 6 && !game.started){
@@ -88,7 +100,6 @@ io.on('connection', (socket) => {
     const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
     const playerJson = JSON.stringify(playerArray);
     io.emit("request lobbies", playerJson)
-    }
     
   })
 

cryptide_project/src/Pages/Lobbies.tsx

@@ -10,6 +10,7 @@ import User from '../model/User';
 import { socket } from '../SocketConfig';
 import JSONParser from '../JSONParser';
 import Person from '../model/Person';
+import { useNavigationType } from 'react-router-dom';
 
 
 class LobbyDataProps {
@@ -26,6 +27,8 @@ class LobbyDataProps {
     }
 }
 
+let cptNavigation = 0
+
 function Lobbies() {
     const theme=useTheme();
 
@@ -46,6 +49,14 @@ function Lobbies() {
         setFirst(first)
     }
 
+    const navigationType = useNavigationType()
+    cptNavigation++
+    if (cptNavigation % 2 == 0){
+        if (navigationType.toString() == "POP"){
+            socket.emit("player quit")
+        }
+    }
+
     if (first){
         setFirst(false)
         socket.emit("request lobbies")

cryptide_project/src/Pages/Play.tsx

@@ -108,6 +108,7 @@ function Play() {
                     if (loggedIn){
                         login()
                         setUserData(user)
+                        socket.emit("join back game", user)
                     }
                     else{
                         loadImageAsync(defaultImg).then((blob) => {
@@ -120,6 +121,14 @@ function Play() {
         }
     }, [isLoggedIn]);
 
+    const [goBackRoom, setGoBackRoom] = useState(-1)
+
+    useEffect(() => {
+        socket.on("join back game", (room) => {
+            setGoBackRoom(room)
+        })
+    }, [])
+
 
     const [room, setRoom] = useState(null);
     const navigate = useNavigate();
@@ -169,6 +178,10 @@ function Play() {
         }
     }, [room, navigate]);
 
+    const goBack = () => {
+        navigate("/lobby?room=" + goBackRoom)
+    }
+
 
 
     const [showOverlay, setShowOverlay] = useState(false);
@@ -259,7 +272,7 @@ function Play() {
 
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
-                    
+                    {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>}
                 </div>
             </div>
             <div className='rightContainer'>