lobbies dynamique + change à chaque mouvement dans un lobby + variable pour savoir s'ils ont commencé

cryptide_project/server/server.js

@@ -25,6 +25,10 @@ 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
+    const playerArray = Array.from(map.entries()).map(([key, value]) => ({ key, value }))
+    const playerJson = JSON.stringify(playerArray);
+    io.emit("request lobbies", playerJson)
   });
 
   socket.on("lobby joined", (room, player) =>{
@@ -33,10 +37,10 @@ io.on('connection', (socket) => {
       socket.join(room)
     }
     if (map.get(room) == undefined){
-      map.set(room, [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}])
+      map.set(room, {tab: [{type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture}], started: false})
     }
     else{
-      const tab = map.get(room)
+      const tab = map.get(room).tab
       for(let i = 0; i<tab.length; i++){
         if (tab[i].id === socket.id && player.type==="User"){
           tab.splice(i, 1)
@@ -44,17 +48,17 @@ io.on('connection', (socket) => {
       }
 
       if (player.type!=="User"){
-        map.get(room).push({type: player.type, id: player.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
+        tab.push({type: player.type, id: player.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
       }
       else{
-        map.get(room).push({type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
+        tab.push({type: player.type, id: socket.id, pseudo: player.pseudo, profilePicture: player.profilePicture})
       }
     }
     
     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.to(socket.id).emit("request lobbies", playerJson)
+    io.emit("request lobbies", playerJson)
   })
 
   socket.on("request lobbies", () => {
@@ -65,7 +69,7 @@ io.on('connection', (socket) => {
 
 
   socket.on("bot deleted", (bot, room) =>{
-    const tab = map.get(room)
+    const tab = map.get(room).tab
     for(let i = 0; i<tab.length; i++){
       if (tab[i].id === bot.id){
         tab.splice(i, 1)
@@ -74,7 +78,7 @@ io.on('connection', (socket) => {
     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.to(socket.id).emit("request lobbies", playerJson)
+    io.emit("request lobbies", playerJson)
   })
 
 
@@ -100,7 +104,7 @@ io.on('connection', (socket) => {
 
   socket.on("disconnect", () =>{
     for (const k of map.keys()){
-      const tab = map.get(k)
+      const tab = map.get(k).tab
         for (let i = 0; i<tab.length; i++){
           if (tab[i].id === socket.id){
             tab.splice(i, 1)
@@ -111,6 +115,9 @@ 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)
   })
 
   socket.on("node checked", (id, works, color, room, playerIndex) =>{
@@ -147,5 +154,6 @@ io.on('connection', (socket) => {
 
   socket.on("end game", (winnerIndex, room) =>{
     io.to(room).emit("end game", winnerIndex)
+    map.delete(room)
   })
 });

cryptide_project/src/Components/LobbyContainer.tsx

@@ -13,15 +13,13 @@ interface LobbyContainerProps {
         roomNum : string
         HeadPlayer : Player
         nbPlayer : number
+        setFirst: (first: boolean) => void
     //? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
 }
 
-const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer}) => {
+const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst}) => {
     const theme=useTheme();
 
-
-    
-
     const navigate = useNavigate();
     const dest = '/lobby?room=' + roomNum;
 
@@ -39,6 +37,7 @@ const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbP
         else{
             if (nbPlayer < 6) {
                 socket.off("request lobbies")
+                setFirst(true)
                 navigate(dest);
             } else {
                 handleShow()

cryptide_project/src/Pages/Lobbies.tsx

@@ -16,11 +16,13 @@ class LobbyDataProps {
     roomNum : string
     headPlayer: Player
     nbPlayer: number
+    started: boolean
 
-    constructor(roomNum: string, player: Player, nbPlayer: number){
+    constructor(roomNum: string, player: Player, nbPlayer: number, started: boolean){
         this.roomNum = roomNum
         this.headPlayer = player
         this.nbPlayer = nbPlayer
+        this.started=started
     }
 }
 
@@ -28,7 +30,7 @@ function Lobbies() {
     const theme=useTheme();
 
 
-
+    const [first, setFirst] = useState(true)
 
     const [lobbyData, setLobbyData] = useState<LobbyDataProps[]>([])
 
@@ -39,20 +41,30 @@ function Lobbies() {
     lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
 );
 
-    useEffect(() => {
-        socket.emit("request lobbies")
 
+    const setFirstData = (first: boolean) => {
+        setFirst(first)
+    }
+
+    if (first){
+        setFirst(false)
+        socket.emit("request lobbies")
+    }
 
+    useEffect(() => {
         socket.on("request lobbies", (map) => {
+            console.log("wesh")
             const jsonMap = JSON.parse(map)
             const tmpTab: LobbyDataProps[]=[]
             for(const item of jsonMap){
-                tmpTab.push(new LobbyDataProps(item.key, JSONParser.JSONToPlayer(item.value[0]), item.value.length))
+                tmpTab.push(new LobbyDataProps(item.key, JSONParser.JSONToPlayer(item.value.tab[0]), item.value.tab.length, item.value.started))
             }
-            setLobbyData(tmpTab )
+            setLobbyData(tmpTab)
         })
     })
 
+    
+
     return(
         <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
             <h1>Bienvenue dans le lobby des lobbies</h1>
@@ -70,6 +82,7 @@ function Lobbies() {
                     roomNum={lobby.roomNum}
                     HeadPlayer={lobby.headPlayer}
                     nbPlayer={lobby.nbPlayer}
+                    setFirst={setFirstData}
                 />
                 ))}
             </div>

cryptide_project/src/Pages/Lobby.tsx

@@ -137,7 +137,7 @@ function Lobby() {
 
     socket.on("new player", (tab) =>{
         const tmpTab: Player[] = []
-        for (const p of tab){
+        for (const p of tab.tab){
             tmpTab.push(JSONParser.JSONToPlayer(p))
         }
         console.log(tmpTab)