diff --git a/public/index.html b/public/index.html
index 0b0a41de4d7dd0a18ab3a6fb8057a82da3c7825e..d98b75e5bc71453b96a5381056c9648e6837c012 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,106 @@
<title>Connect4 - Lobby</title>
<style>
/* Add CSS styles for lobby */
+ body {
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #2c3e50, #3498db);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ min-height: 100vh;
+}
+
+h1 {
+ margin: 30px 0 10px;
+ font-size: 3rem;
+ letter-spacing: 2px;
+}
+
+#login {
+ margin-bottom: 20px;
+}
+
+#nameInput {
+ padding: 10px 20px;
+ border-radius: 10px;
+ border: none;
+ font-size: 1rem;
+ width: 250px;
+}
+
+#rooms {
+ width: 80%;
+ max-width: 800px;
+ margin: 20px auto;
+}
+
+#rooms h2 {
+ font-size: 2rem;
+ margin-bottom: 10px;
+}
+
+#roomList {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 15px;
+ margin-top: 10px;
+}
+
+.room {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ padding: 15px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+
+.room span {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: bold;
+}
+
+.room button {
+ background-color: #e67e22;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.room button:hover {
+ background-color: #d35400;
+}
+
+#hall-of-fame {
+ margin-top: 40px;
+ width: 80%;
+ max-width: 600px;
+}
+
+#hall-of-fame h2 {
+ font-size: 1.8rem;
+ margin-bottom: 10px;
+}
+
+#hof-list {
+ list-style: none;
+ padding: 0;
+}
+
+#hof-list li {
+ margin: 5px 0;
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 8px 12px;
+ border-radius: 8px;
+}
+
</style>
</head>
<body>
diff --git a/public/room.html b/public/room.html
index a01235835f0c15fd1e09a6ef9e428504eae3babe..e5ad5897c43deed1a61ac3581c4771f9cce6a322 100644
--- a/public/room.html
+++ b/public/room.html
@@ -3,7 +3,84 @@
<head>
<title>Connect4 - Game Room</title>
<style>
- /* Add CSS styles for game room */
+ body {
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #2c3e50, #3498db);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#game-container {
+ margin-top: 30px;
+ background-color: #2980b9;
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+#gameCanvas {
+ display: block;
+ background-color: #2980b9;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0,0,0,0.4);
+}
+
+#players {
+ margin-top: 10px;
+ font-size: 1.2rem;
+}
+
+#chat {
+ margin-top: 30px;
+ width: 90%;
+ max-width: 700px;
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 15px;
+ border-radius: 10px;
+}
+
+#messages {
+ max-height: 200px;
+ overflow-y: auto;
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+#messages div {
+ margin: 5px 0;
+ padding: 6px 10px;
+ background-color: rgba(255, 255, 255, 0.15);
+ border-radius: 6px;
+}
+
+#messageInput {
+ padding: 10px;
+ border-radius: 6px;
+ border: none;
+ width: 70%;
+ font-size: 1rem;
+}
+
+button {
+ padding: 10px 20px;
+ border-radius: 6px;
+ background-color: #e67e22;
+ color: white;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+ margin-left: 10px;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background-color: #d35400;
+}
+
</style>
</head>
<body>
diff --git a/server.js b/server.js
index ef06faa014c000f72ee2cb4830e9a0b59c83447a..bd9fcc88495bb953875ea891c33f8b68dc48806d 100644
--- a/server.js
+++ b/server.js
@@ -177,53 +177,49 @@ function checkWin(board, row, col) {
const WINNING_LENGTH = 4;
const directions = [
- [0, 1], // horizontal
- [1, 0], // vertical
- [1, 1], // diagonale descendante
- [1, -1], // diagonale montante
+ [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;
+ let count = 1;
+
+
+ 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;
+ // Direction opposée
+ 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;
+ if (count >= WINNING_LENGTH) {
+ return player;
+ }
}
return null;
- }
-}
\ No newline at end of file
+}