Placed the board at center and ensured the move tracking table
This commit is contained in:
VA-run23
+122
-122
@@ -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();
|
||||
});
|
||||
Reference in New Issue
Block a user