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

cryptide_project/server/server.js

@@ -37,59 +37,70 @@ io.on('connection', (socket) => {
     io.to(playerId).emit("join during game", networkPerson, person, indices, start, map.get(room).tab, nodes)
   })
 
-  socket.on("lobby joined", (room, player) =>{
+  socket.on("join back game", (player) => {
-    if (lastSocketJoined != player.id){
+    for (const k of map.keys()){
-      lastSocketJoined=player.id
+      const tab = map.get(k)
-      const game = map.get(room)
+        for (let i = 0; i<tab.tab.length; i++){
-      if (game !== undefined){
+          if (tab.tab[i].pseudo === player.pseudo && tab.tab[i].type !== "User"){
-        if (game.tab.length == 6 && !game.started){
+            if (tab.started){
-          io.to(socket.id).emit("room full")
+              io.to(socket.id).emit("join back game", k)
-          return
-        }
-        if (game.started){
-          for(const u of game.tab){
-            if(u.type !== "User" && u.pseudo===player.pseudo){
-              u.type = "User"
-              u.id=socket.id
-              io.to(game.tab[game.actualPlayer].id).emit("give network", socket.id)
-              io.to(room).emit("player joined ingame", game.tab)
-              socket.join(room)
-              return
             }
           }
-          io.to(socket.id).emit("game already started")
-          return
         }
-      }
+    }
+  })
 
+  socket.on("lobby joined", (room, player) =>{
 
-      if (game == undefined){
+    const game = map.get(room)
-        map.set(room, {tab: [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}], started: false, actualPlayer: 0, lastWorks: false})
+    if (game !== undefined){
-        socket.join(room)
+      if (game.tab.length == 6 && !game.started){
+        io.to(socket.id).emit("room full")
+        return
       }
-      else{
+      if (game.started){
-        const tab = game.tab
+        for(const u of game.tab){
-        for(let i = 0; i<tab.length; i++){
+          if(u.type !== "User" && u.pseudo===player.pseudo){
-          if (tab[i].id === socket.id && player.type==="User"){
+            u.type = "User"
-            tab.splice(i, 1)
+            u.id=socket.id
+            io.to(game.tab[game.actualPlayer].id).emit("give network", socket.id)
+            io.to(room).emit("player joined ingame", game.tab)
+            socket.join(room)
+            return
           }
         }
+        io.to(socket.id).emit("game already started")
+        return
+      }
+    }
 
-        if (player.type!=="User"){
+
-          tab.push({type: player.type, id: player.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
+    if (game == undefined){
-        }
+      map.set(room, {tab: [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}], started: false, actualPlayer: 0, lastWorks: false})
-        else{
+      socket.join(room)
-          tab.push({type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
+    }
-          socket.join(room)
+    else{
+      const tab = game.tab
+      for(let i = 0; i<tab.length; i++){
+        if (tab[i].id === socket.id && player.type==="User"){
+          tab.splice(i, 1)
         }
       }
 
-      io.to(room).emit("new player", map.get(room))
+      if (player.type!=="User"){
-      const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
+        tab.push({type: player.type, id: player.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
-      const playerJson = JSON.stringify(playerArray);
+      }
-      io.emit("request lobbies", playerJson)
+      else{
+        tab.push({type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
+        socket.join(room)
+      }
     }
     
+    io.to(room).emit("new player", map.get(room))
+    const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
+    const playerJson = JSON.stringify(playerArray);
+    io.emit("request lobbies", playerJson)
+    
   })
 
   socket.on("request lobbies", () => {

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'>