Update room.html

public/room.html

@@ -73,6 +73,80 @@
       const messages = document.getElementById('messages');
       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