Placed the board at center and ensured the move tracking table

app.js

@@ -1,78 +1,3 @@
-// const express = require("express");
-// const socket = require("socket.io");
-
-// const http = require("http");
-// const { Chess } = require("chess.js");
-// const path = require("path");
-
-// const app = express(); //Routing and middleware setup are done by express ////app has an instance of express
-// const server = http.createServer(app);
-// const io = socket(server); //socket is used to connect in real time
-
-// const chess = new Chess(); //now all the rules of chess is stored in chess variable
-// let players = {};
-// let currentPlayer = "w";
-
-// app.set("view engine", "ejs");
-// app.use(express.static(path.join(__dirname, "public"))); //by this we can use images and all
-
-// app.get("/", (req, res) => {
-//   res.render("index", { title: "Chess Game" });
-// });
-
-// io.on("connection", function (uniquesocket) {
-//   console.log("connected");
-
-//   if (!players.white) {
-//     players.white = uniquesocket.id;
-//     uniquesocket.emit("playerRole", "w");
-//   } else if (!players.black) {
-//     players.black = uniquesocket.id;
-//     uniquesocket.emit("playerRole", "b");
-//   } else {
-//     uniquesocket.emit("spectatorRole");
-//   }
-
-//   uniquesocket.on("disconnect", function () {
-//     if (uniquesocket.id === players.white) {
-//       delete players.white;
-//     } else if (uniquesocket.id === players.black) {
-//       delete players.black;
-//     }
-//   });
-
-//   uniquesocket.on("move", (move) => {
-//     try {
-//       if (chess.turn() === "w" && uniquesocket.id !== players.white) return; //uniquesocket.on("move", (move) => {} isse  move event record hoga
-//       if (chess.turn() === "b" && uniquesocket.id !== players.black) return;
-
-//       const result = chess.move(move); //idhar move event(jo bhi pawn move hua hai wo) valid hai ki nahi  evaluate hoga
-
-//       if (result) {
-//         currentPlayer = chess.turn();
-//         io.emit("move", move);
-//         io.emit("boardState", chess.fen());
-//       } else {
-//         console.log("Invalid move: ", move); ////consoling in browser
-//         uniquesocket.emit("invalidMove", move); ////informing the player that the move is invalid
-//       }
-//     } catch (err) {
-//       console.log(err);
-//       uniquesocket.emit("Invalid move: ", move); ////const result = chess.move(move);if this line fails then catch is executed///////timestamp:1:06:06
-//     }
-//   });
-// });
-
-// server.listen(3000, function () {
-//   console.log("Listening");
-// });
-// //3 types of server method
-// //server sends the message to the sender itself also, so only the sender can be able to know that the message is sent to  other/s
-// //server sends the message to only particular person
-// //server send the message to all except sender , this is called broadcasting. Eg:When you are typing in whatsapp, it shows typing to others except the typer
-
-
-
 const express = require("express");
 const http = require("http");
 const socketIo = require("socket.io");
@@ -143,4 +68,6 @@ io.on("connection", (socket) => {
 
 server.listen(3000, () => {
   console.log("Server listening on port 3000");
+  console.log("http://localhost:3000");
+
 });

public/js/chessGame.js

@@ -1,124 +1,3 @@
-// const socket = io();
-// const chess = new Chess();
-// const boardElement = document.querySelector(".chessboard");
-
-// let draggedPiece = null;
-// let sourceSquare = null;
-// let playerRole = null;
-
-// const renderBoard = () => {
-//   const board = chess.board();
-//   boardElement.innerHTML = "";
-//   board.forEach((row, rowIndex) => {
-//     row.forEach((square, squareindex) => {
-//       const squareElement = document.createElement("div");
-//       squareElement.classList.add(
-//         "square",
-//         (rowIndex + squareindex) % 2 === 0 ? "light" : "dark"
-//       );
-
-//       squareElement.dataset.row = rowIndex;
-//       squareElement.dataset.column = squareindex;
-
-//       if (square) {
-//         const pieceElement = document.createElement("div");
-//         pieceElement.classList.add(
-//           "piece",
-//           square.color === "w" ? "white" : "black" //   piece.type
-//         );
-//         pieceElement.innerText = getPieceUnicode(square); ///this one has empty string at 1:26:38
-//         pieceElement.draggable = playerRole === square.color;
-
-//         pieceElement.addEventListener("dragstart", (e) => {
-//           if (pieceElement.draggable) {
-//             draggedPiece = pieceElement;
-//             sourceSquare = { row: rowIndex, col: squareindex };
-//             e.dataTransfer.setData("text/plain", ""); ////to makesure that it runs in cross platforms
-//           }
-//         });
-
-//         pieceElement.addEventListener("dragend", (e) => {
-//           draggedPiece = null;
-//           sourceSquare = null;
-//         });
-//         squareElement.appendChild(pieceElement);
-//       } //if anything goes wrong check from above till here
-
-//       squareElement.addEventListener("dragover", function (e) {
-//         e.preventDefault();
-//       });
-
-//       squareElement.addEventListener("drop", function (e) {
-//         e.preventDefault();
-//         if (draggedPiece) {
-//           const targetSquare = {
-//             row: parseInt(squareElement.dataset.row),
-//             col: parseInt(squareElement.dataset.col),
-//           };
-//           handleMove(sourceSquare, targetSquare);
-//         }
-//       });
-
-//       boardElement.appendChild(squareElement); //this at  63line
-//     });
-//   });
-
-//   if (playerRole === "b") {
-//     boardElement.classList.add("flipped");
-//   } else {
-//     boardElement.classList.remove("flipped");
-//   }
-// };
-
-// const handleMove = (source, target) => {
-//   //handle move ::: at 1:41:28 , is at 68
-//   const move = {
-//     from: `${String.fromCharCode(97 + source.col)}${8 - source.row}`,
-//     to: `${String.fromCharCode(97 + target.col)}${8 - target.row}`,
-//     promotion: "q",
-//   };
-//   socket.emit("move", move); //sending the new move to the backend
-// };
-
-// const getPieceUnicode = (piece) => {
-//   const unicodePieces = {
-//     p: "♟", // BLACK CHESS PAWN
-//     r: "♜", // BLACK CHESS ROOK
-//     n: "♞", // BLACK CHESS KNIGHT
-//     b: "♝", // BLACK CHESS BISHOP
-//     q: "♛", // BLACK CHESS QUEEN
-//     k: "♚", // BLACK CHESS KING
-//     P: "♙", // WHITE CHESS PAWN
-//     R: "♖", // WHITE CHESS ROOK
-//     N: "♘", // WHITE CHESS KNIGHT
-//     B: "♗", // WHITE CHESS BISHOP
-//     Q: "♕", // WHITE CHESS QUEEN
-//     K: "♔", // WHITE CHESS KING
-//   };
-//   return unicodePieces[piece.type] || "";
-// };
-// socket.on("playerRole", function (role) {
-//   //at 14602 at 95
-//   playerRole = role;
-//   renderBoard();
-// });
-
-// socket.on("spectatorRole", function () {
-//   playerRole = null;
-//   renderBoard();
-// });
-// socket.on("boardState", function (fen) {
-//   //the new fen equation formed will be loaded freshly by chess.load and then the board is rendered with new equations
-//   chess.load(fen);
-//   renderBoard();
-// });
-// socket.on("move", function (move) {
-//   //jo bhi move hua hoga use hum receive karke chaladenge, aur boardRender kardenge
-//   chess.move(move);
-//   renderBoard();
-// });
-// renderBoard();
-
 const socket = io();
 const chess = new Chess();
 const boardElement = document.querySelector(".chessboard");
@@ -126,6 +5,7 @@ const boardElement = document.querySelector(".chessboard");
 let draggedPiece = null;
 let sourceSquare = null;
 let playerRole = null;
+let moveHistory = []; // Track all moves
 
 const renderBoard = () => {
   const board = chess.board();
@@ -155,7 +35,7 @@ const renderBoard = () => {
           if (pieceElement.draggable) {
             draggedPiece = pieceElement;
             sourceSquare = { row: rowIndex, col: colIndex };
-            e.dataTransfer.setData("text/plain", ""); // Ensuring cross-platform compatibility
+            e.dataTransfer.setData("text/plain", "");
           }
         });
 
@@ -204,6 +84,118 @@ const getPieceUnicode = (piece) => {
   return unicodePieces[piece.type] || "";
 };
 
+// New function to add move to history and update table
+const addMoveToHistory = (move) => {
+  const moveObj = chess.get(move.to);
+  const isPawnMove = moveObj && moveObj.type === 'p';
+  
+  moveHistory.push({
+    moveNumber: Math.ceil(moveHistory.length / 2) + 1,
+    player: chess.turn() === 'w' ? 'Black' : 'White', // Previous player who made the move
+    piece: moveObj ? getPieceUnicode(moveObj) : '',
+    from: move.from,
+    to: move.to,
+    notation: move.san || `${move.from}-${move.to}`,
+    isPawn: isPawnMove,
+    timestamp: new Date().toLocaleTimeString()
+  });
+  
+  updateMovesTable();
+};
+
+// New function to update the moves table
+const updateMovesTable = () => {
+  const tableBody = document.querySelector("#moves-table tbody");
+  if (!tableBody) return;
+  
+  tableBody.innerHTML = "";
+  
+  moveHistory.forEach((move, index) => {
+    const row = document.createElement("tr");
+    if (move.isPawn) {
+      row.classList.add("pawn-move");
+    }
+    
+    row.innerHTML = `
+      <td>${Math.floor(index / 2) + 1}</td>
+      <td>${move.player}</td>
+      <td>${move.piece}</td>
+      <td>${move.from}</td>
+      <td>${move.to}</td>
+      <td>${move.notation}</td>
+      <td>${move.timestamp}</td>
+    `;
+    
+    tableBody.appendChild(row);
+  });
+  
+  // Scroll to bottom
+  const movesContainer = document.querySelector("#moves-container");
+  if (movesContainer) {
+    movesContainer.scrollTop = movesContainer.scrollHeight;
+  }
+};
+
+// New function to create moves table HTML
+const createMovesTable = () => {
+  const tableHTML = `
+      <div id="moves-container" style="
+      position: absolute;
+      top: 620px; 
+      left: 50%;
+      transform: translateX(-50%);
+      width: 400px;
+      max-height: 500px;
+      overflow-y: auto;
+      background: white;
+      border: 2px solid #333;
+      border-radius: 8px;
+      padding: 15px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    ">
+      <h3 style="margin-top: 0; text-align: center; color: #333;">Move History</h3>
+      <table id="moves-table" style="width: 100%; border-collapse: collapse; font-size: 12px;">
+        <thead>
+          <tr style="background: #f0f0f0;">
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Move#</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Player</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Piece</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">From</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">To</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Notation</th>
+            <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
+    <style>
+      #moves-table td {
+        border: 1px solid #ddd;
+        padding: 6px;
+        text-align: center;
+      }
+      #moves-table .pawn-move {
+        background-color: #ffffcc;
+        font-weight: bold;
+      }
+      #moves-table tr:nth-child(even) {
+        background-color: #f9f9f9;
+      }
+      #moves-table tr:hover {
+        background-color: #e6f3ff;
+      }
+    </style>
+  `;
+
+  // Append it below the chessboard
+  const chessboard = document.querySelector('.chessboard');
+  chessboard.insertAdjacentHTML('afterend', tableHTML);
+};
+
+
+// Socket event handlers
 socket.on("playerRole", (role) => {
   playerRole = role;
   renderBoard();
@@ -220,8 +212,16 @@ socket.on("boardState", (fen) => {
 });
 
 socket.on("move", (move) => {
+  // Add move to history before making the move
+  addMoveToHistory(move);
   chess.move(move);
   renderBoard();
 });
 
+// Initialize the game
 renderBoard();
+
+// Create the moves table when the page loads
+window.addEventListener('DOMContentLoaded', () => {
+  createMovesTable();
+});

views/index.ejs

@@ -1,52 +1,3 @@
-<!-- <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chess Game</title>
-    <style>
-        .chessboard {
-            display: grid;
-            grid-template-columns: repeat(8, minmax(0, 1fr));
-            grid-template-rows: repeat(8, minmax(0, 1fr));
-            width: 400px;
-            height: 400px;
-            transform: rotate(0deg);
-        }
-
-        .piece.white {
-            color: white;
-            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1));
-        }
-
-        .piece.black {
-            color: black;
-        }
-
-        .flipped {
-            transform: rotate(180deg);
-        }
-    </style>
-</head>
-
-<body>
-    <div class="d-flex align-items-center justify-content-center vh-100">
-        <div class="bg-danger width: 24rem; height: 24rem;"></div>
-    </div>
-
-
-    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"
-        integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous">
-        </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"
-        integrity="sha512-xRllwz2gdZciIB+AkEbeq+gVhX8VB8XsfqeFbUh+SzHlN96dEduwtTuVuc2u9EROlmW9+yhRlxjif66ORpsgVA=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-</body>
-
-</html> -->
-
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -60,6 +11,12 @@
             grid-template-rows: repeat(8, minmax(0, 1fr));
             width: 400px;
             height: 400px;
+            border: 2px solid #333;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
+            margin: auto;
+            position: absolute;
+            top: 0; bottom: 0; left: 0; right: 0;
         }
         .square {
             display: flex;
@@ -78,10 +35,18 @@
     </style>
 </head>
 <body>
+    <div style="display: flex; justify-content: center;">
+    <h1 style="background-color: #18122b; color: #f0f0f0; padding: 10px 20px; border-radius: 5px;">
+        Chess game by 23NeuroBytes
+    </h1>
+    </div>
+
     <div class="d-flex align-items-center justify-content-center vh-100">
         <div class="chessboard"></div>
     </div>
 
+
+
     <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
     <script src="/js/chessGame.js"></script>