From 9a2734b43302793bfc1c8c3ef5e0939227278c63 Mon Sep 17 00:00:00 2001
From: oumaima laklouch <oumaima0.7laklouch@gmail.com>
Date: Wed, 26 Mar 2025 10:26:24 +0100
Subject: [PATCH] Update room.html
---
public/room.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 74 insertions(+)
diff --git a/public/room.html b/public/room.html
index 6a0f7af..8e48f2b 100644
--- a/public/room.html
+++ b/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
--
GitLab