bien avancé

halloffame.json

+{"test2":1,"aaa":1,"bbb":2,"fff":1}
\ No newline at end of file

public/room.html

@@ -32,11 +32,10 @@
     const CELL_SIZE = 100;
     const RADIUS = CELL_SIZE / 2 - 10;
 
-    // Initialize game board
     function drawBoard(board) {
-      console.log(board);
       // Draw Connect4 grid based on board state
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = 'blue';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
       for (let row = 0; row < ROWS; row++) {
         for (let col = 0; col < COLS; col++) {
           let x = col * CELL_SIZE + CELL_SIZE / 2;
@@ -49,15 +48,15 @@
           ctx.fill();
 
           // Pion
-          if (board[row][col] !== null) {
           ctx.beginPath();
           ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
-            ctx.fillStyle = board[row][col] === 0 ? 'red' : 'yellow';
+          ctx.fillStyle = 'white';
+          if (board[row][col] === 0) {ctx.fillStyle='red';}
+          if (board[row][col] === 1) {ctx.fillStyle='yellow';}
           ctx.fill();
         }
       }
     }
-    }
 
     canvas.addEventListener('click', (e) => {
       const rect = canvas.getBoundingClientRect();
@@ -80,18 +79,18 @@
 
     });
 
-    socket.on('stopGame', () => {
+    socket.on('stopGame', ({board, winner}) => {
+        alert(winner === 0 ? 'Player 1 wins!' : 'Player 2 wins!');
         const messages = document.getElementById('messages');
         messages.innerHTML += `<div><strong>Game Finish</strong></div>`;
     });
 
-    socket.on('updateGame', ({ board, currentPlayer, winner }) => {
+    socket.on('updateGame', ({ board, currentPlayer}) => {
       drawBoard(board);
-      if (winner !== null) alert(winner === 0 ? 'Player 1 wins!' : 'Player 2 wins!');
     });
 
     canvas.addEventListener('click', (e) => {
-      const col = Math.floor(e.offsetX / 100);
+      const col = Math.floor(e.offsetX / CELL_SIZE);
       socket.emit('move', col);
     });
 
@@ -107,8 +106,6 @@
       const messages = document.getElementById('messages');
       messages.innerHTML += `<div><strong>${name}:</strong> ${message}</div>`;
     });
-
-  drawBoard(); // initial
 </script>
 </body>
 </html>
\ No newline at end of file

server.js

@@ -5,8 +5,6 @@ const {
 } = require('uuid');
 const fs = require('fs');
 
-
-
 const app = express();
 const PORT = process.env.PORT || 3000;
 
@@ -50,11 +48,12 @@ io.on('connection', (socket) => {
 
     let stopGame = (room, roomId) => {
         console.log("Not enough players in room " + roomId + ", game stops.");
+        room["gameState"] = Array(6).fill().map(() => Array(7).fill(null));
+        room["currentPlayer"] = 0;
     };
 
     let startGame = (room, roomId) => {
         console.log("Two players on room " + roomId + ", game starting.");
-        console.log(room);
         io.to(roomId).emit('startGame', {
             board: room.gameState,
             currentPlayer: room.currentPlayer
@@ -112,11 +111,12 @@ io.on('connection', (socket) => {
             return;
         };
 
-        console.log("On room " + currentRoom + ", " + playerName + " played on column " + col);
 
         const row = findAvailableRow(currentRoom.gameState, col);
         if (row === -1) return;
 
+        console.log("On room " + currentRoom.id + ", " + playerName + " played on column " + col + " at height" + row);
+
         currentRoom.gameState[row][col] = playerIndex;
         currentRoom.moves.push({
             player: playerIndex,
@@ -125,17 +125,24 @@ io.on('connection', (socket) => {
 
         const winner = checkWin(currentRoom.gameState, row, col);
         if (winner !== null) {
+            console.log("In room "+currentRoom.id+", player "+playerName+" won"); 
             hallOfFame[playerName] = (hallOfFame[playerName] || 0) + 1;
             fs.writeFileSync('halloffame.json', JSON.stringify(hallOfFame));
+            stopGame(currentRoom, currentRoom.id);
+            socket.join(currentRoom.id);
+            io.to(currentRoom.id).emit('stopGame', {
+                board: currentRoom.gameState,
+                winner: winner
+            });
         }
-
+        else {
             currentRoom.currentPlayer = 1 - currentRoom.currentPlayer;
-        socket.join(currentRoom.id)
+            socket.join(currentRoom.id);
             io.to(currentRoom.id).emit('updateGame', {
                 board: currentRoom.gameState,
-            currentPlayer: currentRoom.currentPlayer,
-            winner
+                currentPlayer: currentRoom.currentPlayer
             });
+        }
     });
 
     socket.on('chatMessage', (message) => {
@@ -155,7 +162,7 @@ io.on('connection', (socket) => {
 
 function findAvailableRow(board, col) {
     for (let row = 5; row >= 0; row--) {
-        if (!board[row][col]) return row;
+        if (board[row][col] == null) return row;
     }
     return -1;
 }