diff --git a/public/room.html b/public/room.html
index 8e48f2b1156d849f36375e0ecb2708d84af27739..81875d26cef7d10b3b3400b21087975f0b0030de 100644
--- a/public/room.html
+++ b/public/room.html
@@ -27,11 +27,45 @@
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', {
name: playerName,
@@ -40,8 +74,8 @@
});
socket.on('startGame', ({ board, currentPlayer }) => {
- const messages = document.getElementById('messages');
- messages.innerHTML += `<div><strong>Game starting</strong></div>`;
+ const messages = document.getElementById('messages');
+ messages.innerHTML += `<div><strong>Game starting</strong></div>`;
drawBoard(board);
});
@@ -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
diff --git a/server.js b/server.js
index 91ad4e1828f8d7edb3893a414ffe5460f34d1aba..20ded88c77df735eb1085b3d3ebfd961d8abd388 100644
--- a/server.js
+++ b/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,58 +123,100 @@ io.on('connection', (socket) => {
col
});
- function checkWin(board, row, col) {
- const player = board[row][col];
- if (player === null) return null;
-
- const ROWS = board.length;
- const COLS = board[0].length;
- const WINNING_LENGTH = 4;
-
- const directions = [
- [0, 1], // horizontal
- [1, 0], // vertical
- [1, 1], // diagonale descendante
- [1, -1] // diagonale montante
- ];
-
- for (const [dx, dy] of directions) {
- let count = 1;
-
- // Dans une direction
- for (let step = 1; step < WINNING_LENGTH; step++) {
- const newRow = row + step * dx;
- const newCol = col + step * dy;
- if (
- newRow >= 0 && newRow < ROWS &&
- newCol >= 0 && newCol < COLS &&
- board[newRow][newCol] === player
- ) {
- count++;
- } else {
- break;
- }
- }
-
- // Dans l’autre direction
- for (let step = 1; step < WINNING_LENGTH; step++) {
- const newRow = row - step * dx;
- const newCol = col - step * dy;
- if (
- newRow >= 0 && newRow < ROWS &&
- newCol >= 0 && newCol < COLS &&
- board[newRow][newCol] === player
- ) {
- count++;
- } else {
- break;
- }
- }
-
- if (count >= WINNING_LENGTH) {
- return player;
- }
-
-
+ 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;
+
+ const ROWS = board.length;
+ const COLS = board[0].length;
+ const WINNING_LENGTH = 4;
+
+ const directions = [
+ [0, 1], // horizontal
+ [1, 0], // vertical
+ [1, 1], // diagonale descendante
+ [1, -1], // diagonale montante
+ ];
+
+ for (const [dx, dy] of directions) {
+ let count = 1;
+
+ // Dans une direction
+ for (let step = 1; step < WINNING_LENGTH; step++) {
+ const newRow = row + step * dx;
+ const newCol = col + step * dy;
+ if (
+ newRow >= 0 &&
+ newRow < ROWS &&
+ newCol >= 0 &&
+ newCol < COLS &&
+ board[newRow][newCol] === player
+ ) {
+ count++;
+ } else {
+ break;
+ }
+ }
+
+ // Dans l’autre direction
+ for (let step = 1; step < WINNING_LENGTH; step++) {
+ const newRow = row - step * dx;
+ const newCol = col - step * dy;
+ if (
+ newRow >= 0 &&
+ newRow < ROWS &&
+ newCol >= 0 &&
+ newCol < COLS &&
+ board[newRow][newCol] === player
+ ) {
+ count++;
+ } else {
+ break;
+ }
+ }
+
+ if (count >= WINNING_LENGTH) {
+ return player;
+ }
+
return null;
+ }
}
\ No newline at end of file