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