From 4ed339232a2bf15c6628222527f6110aa5af391b Mon Sep 17 00:00:00 2001 From: VA-run23 <1523codes@gmail.com> Date: Fri, 4 Jul 2025 18:37:06 +0530 Subject: [PATCH] Placed the board at center and ensured the move tracking table --- app.js | 77 +------------ public/js/chessGame.js | 244 ++++++++++++++++++++--------------------- views/index.ejs | 63 +++-------- 3 files changed, 138 insertions(+), 246 deletions(-) diff --git a/app.js b/app.js index 6ed9f80..e28396c 100644 --- a/app.js +++ b/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"); + }); diff --git a/public/js/chessGame.js b/public/js/chessGame.js index 152e8fa..4632a82 100644 --- a/public/js/chessGame.js +++ b/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 = ` + ${Math.floor(index / 2) + 1} + ${move.player} + ${move.piece} + ${move.from} + ${move.to} + ${move.notation} + ${move.timestamp} + `; + + 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 = ` +
+

Move History

+ + + + + + + + + + + + + + +
Move#PlayerPieceFromToNotationTime
+
+ + `; + + // 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(); +}); \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 8c96297..09b1747 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,52 +1,3 @@ - - - @@ -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 @@ +
+

+ Chess game by 23NeuroBytes +

+
+
+ +