Merge branch 'main' of https://gitlab.ec-lyon.fr/durandu/connect4

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) {
+      console.log(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) => {
+      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

@@ -54,6 +54,7 @@ io.on('connection', (socket) => {
 
     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
@@ -93,6 +94,7 @@ io.on('connection', (socket) => {
             id: socket.id,
             name
         });
+        socket.join(roomId);
         io.emit('updateRooms', rooms);
 
         io.to(roomId).emit('updatePlayers', room.players);
@@ -121,6 +123,44 @@ io.on('connection', (socket) => {
             col
         });
 
+        const winner = checkWin(currentRoom.gameState, row, col);
+        if (winner !== null) {
+            hallOfFame[playerName] = (hallOfFame[playerName] || 0) + 1;
+            fs.writeFileSync('halloffame.json', JSON.stringify(hallOfFame));
+        }
+
+        currentRoom.currentPlayer = 1 - currentRoom.currentPlayer;
+        socket.join(currentRoom.id)
+        io.to(currentRoom.id).emit('updateGame', {
+            board: currentRoom.gameState,
+            currentPlayer: currentRoom.currentPlayer,
+            winner
+        });
+    });
+
+    socket.on('chatMessage', (message) => {
+        if (!currentRoom) {
+            return;
+        }
+        io.to(currentRoom.id).emit('message', {
+            name: playerName,
+            message
+        });
+    });
+
+    socket.on('disconnect', () => {
+        leaveRooms();
+    });
+});
+
+function findAvailableRow(board, col) {
+    for (let row = 5; row >= 0; row--) {
+        if (!board[row][col]) return row;
+    }
+    return -1;
+}
+
+
 function checkWin(board, row, col) {
     const player = board[row][col];
     if (player === null) return null;
@@ -133,7 +173,7 @@ io.on('connection', (socket) => {
     [0, 1], // horizontal
     [1, 0], // vertical
     [1, 1], // diagonale descendante
-                [1, -1]   // diagonale montante
+    [1, -1], // diagonale montante
     ];
 
     for (const [dx, dy] of directions) {
@@ -144,8 +184,10 @@ io.on('connection', (socket) => {
         const newRow = row + step * dx;
         const newCol = col + step * dy;
         if (
-                        newRow >= 0 && newRow < ROWS &&
-                        newCol >= 0 && newCol < COLS &&
+        newRow >= 0 &&
+        newRow < ROWS &&
+        newCol >= 0 &&
+        newCol < COLS &&
         board[newRow][newCol] === player
         ) {
         count++;
@@ -159,8 +201,10 @@ io.on('connection', (socket) => {
         const newRow = row - step * dx;
         const newCol = col - step * dy;
         if (
-                        newRow >= 0 && newRow < ROWS &&
-                        newCol >= 0 && newCol < COLS &&
+        newRow >= 0 &&
+        newRow < ROWS &&
+        newCol >= 0 &&
+        newCol < COLS &&
         board[newRow][newCol] === player
         ) {
         count++;
@@ -173,6 +217,6 @@ io.on('connection', (socket) => {
         return player;
     }
 
-    
     return null;
     }
+}
\ No newline at end of file