repaired

public/room.html

@@ -27,10 +27,44 @@
     const playerName = params.get('name');
     const roomId = window.location.pathname.split('/').pop();
 
+    const COLS = 7;
+    const ROWS = 6;
+    const CELL_SIZE = 100;
+    const RADIUS = CELL_SIZE / 2 - 10;
+
     // Initialize game board
     function drawBoard(board) {
       // Draw Connect4 grid based on board state
+      ctx.clearRect(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;
+          let y = row * CELL_SIZE + CELL_SIZE / 2;
+
+          // Trou
+          ctx.beginPath();
+          ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
+          ctx.fillStyle = 'white';
+          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.fill();
           }
+        }
+      }
+    }
+
+    canvas.addEventListener('click', (e) => {
+      if (winner !== null) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const col = Math.floor(x / CELL_SIZE);
+      socket.emit('move', col);
+    });
 
     socket.on('connect', () => {
         socket.emit('joinRoom', {
@@ -74,79 +108,7 @@
       messages.innerHTML += `<div><strong>${name}:</strong> ${message}</div>`;
     });
 
-    //canvas game 
-    <script src="/socket.io/socket.io.js"></script>
-<script>
-  const socket = io();
-  const urlParams = new URLSearchParams(window.location.search);
-  const roomId = urlParams.get('room') || 'room0'; // par ex. /room.html?room=room2
-  const name = prompt("Ton nom ?") || "Player";
-
-  const COLS = 7;
-  const ROWS = 6;
-  const CELL_SIZE = 100;
-  const RADIUS = CELL_SIZE / 2 - 10;
-
-  let currentPlayer = 0;
-  let gameState = Array(ROWS).fill().map(() => Array(COLS).fill(null));
-  let winner = null;
-
-  const canvas = document.getElementById('gameCanvas');
-  const ctx = canvas.getContext('2d');
-
-  socket.emit('joinRoom', { name, roomId });
-
-  socket.on('startGame', (data) => {
-    gameState = data.board;
-    currentPlayer = data.currentPlayer;
-    drawBoard();
-  });
-
-  socket.on('updateGame', (data) => {
-    gameState = data.board;
-    currentPlayer = data.currentPlayer;
-    winner = data.winner;
-    drawBoard();
-    if (winner !== null) {
-      alert(`Le joueur ${winner} a gagné !`);
-    }
-  });
-
-  canvas.addEventListener('click', (e) => {
-    if (winner !== null) return;
-    const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const col = Math.floor(x / CELL_SIZE);
-    socket.emit('move', col);
-  });
-
-  function drawBoard() {
-    ctx.clearRect(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;
-        let y = row * CELL_SIZE + CELL_SIZE / 2;
-
-        // Trou
-        ctx.beginPath();
-        ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
-        ctx.fillStyle = 'white';
-        ctx.fill();
-
-        // Pion
-        if (gameState[row][col] !== null) {
-          ctx.beginPath();
-          ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
-          ctx.fillStyle = gameState[row][col] === 0 ? 'red' : 'yellow';
-          ctx.fill();
-        }
-      }
-    }
-  }
-
   drawBoard(); // initial
-</script>
-
 </script>
 </body>
 </html>
\ No newline at end of file

server.js

@@ -93,6 +93,7 @@ io.on('connection', (socket) => {
             id: socket.id,
             name
         });
+        socket.join(roomId);
         io.emit('updateRooms', rooms);
 
         io.to(roomId).emit('updatePlayers', room.players);
@@ -128,6 +129,7 @@ io.on('connection', (socket) => {
         }
 
         currentRoom.currentPlayer = 1 - currentRoom.currentPlayer;
+        socket.join(currentRoom.id)
         io.to(currentRoom.id).emit('updateGame', {
             board: currentRoom.gameState,
             currentPlayer: currentRoom.currentPlayer,