From 8b9ac6085b31c588a589db70947ae1d45d06b8b4 Mon Sep 17 00:00:00 2001 From: Martin Sosic Date: Wed, 17 Apr 2024 11:35:38 +0200 Subject: [PATCH 01/20] Comments and MVC proposal. --- app.js | 163 ++++++++++++++++++++++++++++++++---------------------- pieces.js | 2 + 2 files changed, 100 insertions(+), 65 deletions(-) diff --git a/app.js b/app.js index d12ea73..60211e0 100644 --- a/app.js +++ b/app.js @@ -1,77 +1,26 @@ + const gameBoard = document.getElementById("gameboard"); const playerDisplay = document.getElementById("player"); const infoDisplay = document.getElementById("info-display"); + const width = 8; + let playerTurn = "white"; // defining whose move it is playerDisplay.textContent = "white"; // showing whose move it is + const startPieces = [ - rook, - knight, - bishop, - queen, - king, - bishop, - knight, - rook, - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - pawn, - rook, - knight, - bishop, - queen, - king, - bishop, - knight, - rook, + rook, knight, bishop, queen, king, bishop, knight, rook, + pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn, + "", "", "", "", "", "", "", "", + "", "", "", "", "", "", "", "", + "", "", "", "", "", "", "", "", + "", "", "", "", "", "", "", "", + pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn, + rook, knight, bishop, queen, king, bishop, knight, rook, ]; // CREATING THE INITIAL BOARD +// TODO(Martin): Then rename to createInitialBoard and you can remove the comment above! function createBoard() { startPieces.forEach((startPiece, i) => { // this function injects into the #gameboard @@ -81,6 +30,8 @@ function createBoard() { square.firstChild?.setAttribute("draggable", true); // Check whether a square should be draggable (it should be if it has a firstChild, i.e. if there is a piece on it). If it is, give it the attribute "draggable"; square.setAttribute("square-id", i); // give each square an attribute "square-id" of "i" const row = Math.floor((63 - i) / width) + 1; // define what row we're currently in + // TODO(Martin): Try also adding `const column = ...` line above, and then use `column` below, together with `row`, + // to decide if field should be light or dark. Instead of using `row` and then again `i`. It will be a bit nicer. if (row % 2 === 0) { // every other row add the class "bright" or "dark" to a square, depending on whether the index of that square can be divided by 2 (meaning: every other square) square.classList.add(i % 2 === 0 ? "bright" : "dark"); @@ -109,6 +60,10 @@ allSquares.forEach((square) => { square.addEventListener("drop", dragDrop); }); +// TODO(martin): I would rename `startPositionId` to `currentlyDraggedSquareId`. +// Although I don't quite get why you need both this variable and the one below, `draggedElement`, +// when you can easily obtain square id from the `draggedElement` by just doing +// `draggedElement.parentNode.getAttribute("square-id")`. let startPositionId; // global level. Starts with null. As soon as we drag a piece we get the square-id through the getAttribute function below, which then gets saved to StartPositionId. let draggedElement; @@ -123,7 +78,13 @@ function dragOver(e) { function dragDrop(e) { e.stopPropagation(); // this prevents any funky behaviour, e.g. dropping two pieces and call this function twice - const correctTurn = + const correctTurn = // TODO(martin): I would rename this one to isCorrectTurn. + // TODO(martin): Here you want to do `playerTurn`, not `"playerTurn"`. + // So it should be: + // draggedElement.firstChild.classList.contains(playerTurn); -> no " " around playerTurn. + // When you were trying to figure out your issue here with this code, it would be best if you peppered it with + // console.log(...) calls and that way you could confirm is stuff is happening as expected, and then you would + // realize that `correctTurn` is always false, whish is weird, and could investigate why is that. draggedElement.firstChild.classList.contains("playerTurn"); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const correctTurn const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square const opponentTurn = playerTurn === "white" ? "black" : "white"; @@ -132,6 +93,7 @@ function dragDrop(e) { e.target.remove(); // e.target.append(draggedElement); changePlayer(); // how can the programme call the revertIds function already here if it's written only further below in the script? + // TODO(martin): To answer your question: Javascript interpreter first goes through the whole file and reads top level decalrations, which are `function ...`, without going into them. So first it learns about all the functions and remembers where they are. Then, it goes line by line and executes it all. Meaning that function F1 can call F2 even if F2 is below it, because at that point Javasccript already knows where to find it. This is called something like "2-step evluation/compilation/interpretation/something I can't remember exactly". This doesn't work for global varaibles though if I am correct, just functions I think (and classes probably). } // SWITCHING PLAYERS' TURNS @@ -152,6 +114,7 @@ function reverseIds() { const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" allSquares.forEach((square, i) => // for each square, override the existing squareId with its reverse (width * width - 1) - i + // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. square.setAttribute("square-id", width * width - 1 - i) ); // set the reversed squareId as the attribute } @@ -160,3 +123,73 @@ function revertIds() { const allSquares = document.querySelectorAll(".square"); allSquares.forEach((square, i) => square.setAttribute("square-id", i)); } + +// TODO(Martin): Nice :)! This is actually quite complex code though, hard to reason about, and easy to make mistakes with. +// Not pleasant to write nor read. Not because you wrote it badly, but because of overall architecture, it is all too +// intertwined and mixed up. So I will recommend you a different, typical approach for these kind of programmes, +// that will make code much nicer and easier to work with, and it should be much more enjoyable. +// +// So, the main idea is that you want to separate "view" logic from "business"/"core" logic (let's call it "core" logic). +// +// View logic would be: I know what the chess board looks like, how do I show it on screen? +// +// Core logic would be: If player wants to do a move, how do I udpate the board to reflect that? +// How do I know if the move is valid? Whose turn is it? So really, all chess-related stuff and +// rules and so on, without worrying about how to actually show this to user: will it be shown in +// brwoser, or will you print the whole board into console with console.log and ascii characters. +// Core logic doesn't care about that, it cares about chess. +// +// Actually there is also "model" logic, which is about how we represent the actual board in Javascript, +// how do we "model" it. +// You could say that is part of "core" logic, but you can also look at it as a separate "model" logic. +// +// So this is called MVC (Model-View-Controller) architecture (controller == core logic), and is a popular pattern in +// programming, for certain tasks where it is a good fit. You can google this, although it will probably be a bit +// to abstractly explained, but still give it a look. +// +// So you really want to work in this way, because otherwise it will be too hard (already is). +// +// In our case, this would mean something like this: +// +// function displayBoard(board) { ... } // Does all the `document.` stuff to show the board in the browser. +// // Any board though, not just initial board! That is important. +// // This is our "View" logic. +// +// const initialBoard = [ // List of 8 lists where each of those inner lists has 8 elements. This is our "model" logic. +// [{ type: "rook", color: "white"}, { type: "knight", color: "white"}, ... ], +// [null, null, null, ...], +// [null, ...], +// ..., +// [{ type: "rook", color: "black"}, { type: "knight", color: "black"}, ...] +// ]; +// const initialGameState = { // This is another part of our "model" logic. +// currentPlayer: "white", +// board: initialBoard +// } +// +// And now comes the crux of things, our "core" logic (or Controller). +// It will consists of bunch of functions. +// +// function movePiece([startRow, startCol], [endRow, endCol], board) { ... } +// // This function will, given the current board, return a new board that will have the piece moved from start to end location. +// // We could also have one global `currentBoard` variable that this function would just update, that is alternative approach, +// // but this is even nicer, where you don't have global variable but are instead passing the board around and creating modifications of it. +// +// function isMoveValid([startRow, startCol], [endRow, endCol], board) { ... } +// +// function checkForVictory(board) { ... } +// +// function calculateCurrentScore(board) { ... } +// +// And so on and on. +// +// The whole point is, when doing complex stuff like chess rules and logic, you dont' have to dig through `docuemnt` and classes and DOM elements and stuff, you instead always focus on your simple list of lists and all is nice and simple. +// So you will want to rewrite your chess like this! +// I would suggest you forget drag and drop for start. Just try to get initial board to draw with this MVC approach, and then provide two input fields in your program, where user says initial field and end field, liek F1 and F2 and then they can press "move", and then try to get that move happening. Later we can upgrade that to be drag and drop instead of entering moves via text. + + + + + + + diff --git a/pieces.js b/pieces.js index d9a7a81..fb02dd8 100644 --- a/pieces.js +++ b/pieces.js @@ -1,3 +1,5 @@ +// TODO(martin): How about you must move this logic into app.js, and you can then not have this second file? + const king = '
'; const queen = From 10b9291f20aae9816fb3969e3cf2fe5dbe16d119 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Wed, 17 Apr 2024 18:18:32 +0100 Subject: [PATCH 02/20] Adding code to validate moves --- app.js | 145 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 115 insertions(+), 30 deletions(-) diff --git a/app.js b/app.js index 60211e0..cc7ac9c 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,3 @@ - const gameBoard = document.getElementById("gameboard"); const playerDisplay = document.getElementById("player"); const infoDisplay = document.getElementById("info-display"); @@ -9,14 +8,70 @@ let playerTurn = "white"; // defining whose move it is playerDisplay.textContent = "white"; // showing whose move it is const startPieces = [ - rook, knight, bishop, queen, king, bishop, knight, rook, - pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn, - "", "", "", "", "", "", "", "", - "", "", "", "", "", "", "", "", - "", "", "", "", "", "", "", "", - "", "", "", "", "", "", "", "", - pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn, - rook, knight, bishop, queen, king, bishop, knight, rook, + rook, + knight, + bishop, + queen, + king, + bishop, + knight, + rook, + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + pawn, + rook, + knight, + bishop, + queen, + king, + bishop, + knight, + rook, ]; // CREATING THE INITIAL BOARD @@ -78,22 +133,59 @@ function dragOver(e) { function dragDrop(e) { e.stopPropagation(); // this prevents any funky behaviour, e.g. dropping two pieces and call this function twice - const correctTurn = // TODO(martin): I would rename this one to isCorrectTurn. - // TODO(martin): Here you want to do `playerTurn`, not `"playerTurn"`. - // So it should be: - // draggedElement.firstChild.classList.contains(playerTurn); -> no " " around playerTurn. - // When you were trying to figure out your issue here with this code, it would be best if you peppered it with - // console.log(...) calls and that way you could confirm is stuff is happening as expected, and then you would - // realize that `correctTurn` is always false, whish is weird, and could investigate why is that. - draggedElement.firstChild.classList.contains("playerTurn"); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const correctTurn - const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square + const isCorrectTurn = + draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn - e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. - e.target.remove(); - // e.target.append(draggedElement); - changePlayer(); // how can the programme call the revertIds function already here if it's written only further below in the script? - // TODO(martin): To answer your question: Javascript interpreter first goes through the whole file and reads top level decalrations, which are `function ...`, without going into them. So first it learns about all the functions and remembers where they are. Then, it goes line by line and executes it all. Meaning that function F1 can call F2 even if F2 is below it, because at that point Javasccript already knows where to find it. This is called something like "2-step evluation/compilation/interpretation/something I can't remember exactly". This doesn't work for global varaibles though if I am correct, just functions I think (and classes probably). + const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square + const valid = checkIfValid(e.target); + + if (isCorrectTurn) { + if (takenByOpponent && valid) { + e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. + e.target.remove(); + changePlayer(); + return; + } + if (taken) { + infoDisplay.textContent = "This move is invalid"; + setTimeout(() => (infoDisplay.textContent = ""), 2000); + return; + } + if (valid) { + e.target.append(draggedElement); + changePlayer(); + } + } +} + +function checkIfValid(target) { + const targetId = + Number(e.target.getAttribute("square-id")) || + Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers + const start = Number(startPositionId); + const piece = draggedElement.id; + + // DEFINING THE MOVES OF THE VARIOUS PIECES + switch ( + piece // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. + ) { + case "pawn": + const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; + if ( + (starterRow.includes(startId) && startId + width * 2 === targetId) || + startId + width === targetId || + (startId + width - 1 === targetId && + document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstChild) || + (startId + width + 1 === targetId && + document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstChild) + ) { + return true; + } + break; + } } // SWITCHING PLAYERS' TURNS @@ -186,10 +278,3 @@ function revertIds() { // The whole point is, when doing complex stuff like chess rules and logic, you dont' have to dig through `docuemnt` and classes and DOM elements and stuff, you instead always focus on your simple list of lists and all is nice and simple. // So you will want to rewrite your chess like this! // I would suggest you forget drag and drop for start. Just try to get initial board to draw with this MVC approach, and then provide two input fields in your program, where user says initial field and end field, liek F1 and F2 and then they can press "move", and then try to get that move happening. Later we can upgrade that to be drag and drop instead of entering moves via text. - - - - - - - From 4a4f81c4bddc7460c6496c201159ee3038594f5b Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 09:17:52 +0100 Subject: [PATCH 03/20] Complete game --- app.js | 195 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 187 insertions(+), 8 deletions(-) diff --git a/app.js b/app.js index cc7ac9c..ecc70b5 100644 --- a/app.js +++ b/app.js @@ -74,9 +74,7 @@ const startPieces = [ rook, ]; -// CREATING THE INITIAL BOARD -// TODO(Martin): Then rename to createInitialBoard and you can remove the comment above! -function createBoard() { +function createInitialBoard() { startPieces.forEach((startPiece, i) => { // this function injects into the #gameboard const square = document.createElement("div"); // create a div for each startpiece. Call the div "square" @@ -104,7 +102,7 @@ function createBoard() { gameBoard.append(square); // append each square to the game board }); } -createBoard(); +createInitialBoard(); // ENABLING DRAG & DROP FUNCTIONALITY const allSquares = document.querySelectorAll(".square"); // grab all squares (i.e. every HTML element with the class "square") and save them as const allSquares @@ -144,17 +142,20 @@ function dragDrop(e) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. e.target.remove(); + checkForVictory() changePlayer(); return; } - if (taken) { + if (taken && !takenByOpponent) { infoDisplay.textContent = "This move is invalid"; setTimeout(() => (infoDisplay.textContent = ""), 2000); return; } if (valid) { e.target.append(draggedElement); + checkForVictory() changePlayer(); + return; } } } @@ -167,9 +168,8 @@ function checkIfValid(target) { const piece = draggedElement.id; // DEFINING THE MOVES OF THE VARIOUS PIECES - switch ( - piece // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. - ) { + // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. + switch (piece) { case "pawn": const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; if ( @@ -185,6 +185,171 @@ function checkIfValid(target) { return true; } break; + + case "knight": + if ( + startId + width * 2 + 1 === targetId || + startId + width * 2 - 1 === targetId || + startId + width + 2 === targetId || + startId + width - 2 === targetId || + startId - width * 2 + 1 === targetId || + startId - width * 2 - 1 === targetId || + startId - width + 2 === targetId || + startId - width - 2 === targetId + ) { + return true; + } + break; + + case "bishop": + if ( + startId + width + 1 === targetId || + startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square + startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || + startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || + startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || + startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || + startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || + startId + width - 1 === targetId || + startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || + startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || + startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || + startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || + startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || + startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || + startId - width + 1 === targetId || + startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || + startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || + startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || + startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || + startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || + startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || + startId - width - 1 === targetId || + startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || + startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || + startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || + startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || + startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || + startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || + ) { + return true; + } + break; + + case "rook": + if ( + startId + width === targetId || + startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || + startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || + startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || + startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || + startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || + startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || + startId - width === targetId || + startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || + startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || + startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || + startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || + startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || + startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || + startId + 1 === targetId || + startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || + startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || + startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || + startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || + startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || + startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || + startId - 1 === targetId || + startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || + startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || + startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || + startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || + startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + ) { + return true; + } + break; + + case "queen": + if ( + // bishop's moves + startId + width + 1 === targetId || + startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square + startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || + startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || + startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || + startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || + startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || + startId + width - 1 === targetId || + startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || + startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || + startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || + startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || + startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || + startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || + startId - width + 1 === targetId || + startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || + startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || + startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || + startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || + startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || + startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || + startId - width - 1 === targetId || + startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || + startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || + startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || + startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || + startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || + startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || + //rook's moves + startId + width === targetId || + startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || + startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || + startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || + startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || + startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || + startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || + startId - width === targetId || + startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || + startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || + startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || + startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || + startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || + startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || + startId + 1 === targetId || + startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || + startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || + startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || + startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || + startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || + startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || + startId - 1 === targetId || + startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || + startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || + startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || + startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || + startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + ) { + return true; + } + break; + + case: "king": + if ( + startId + 1 === targetId || + startId - 1 === targetId || + startId + width === targetId || + startId - width === targetId || + startId + width + 1 === targetId || + startId + width - 1 === targetId || + startId - width + 1 === targetId || + startId - width - 1 === targetId || + ) { + return true; + } + break; } } @@ -216,6 +381,20 @@ function revertIds() { allSquares.forEach((square, i) => square.setAttribute("square-id", i)); } +function checkForVictory() { + const kings = Array.from(document.querySelectorAll('#king')); + if (kings.some(king => king.firstChild.classList.contains("white"))) { + infoDisplay.innerHTML = "Black wins!"; + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach(square => square.firstChild?.setAttribute("draggable", false)); + } + if (kings.some(king => king.firstChild.classList.contains("black"))) { + infoDisplay.innerHTML = "White wins!"; + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach(square => square.firstChild?.setAttribute("draggable", false)); + } +} + // TODO(Martin): Nice :)! This is actually quite complex code though, hard to reason about, and easy to make mistakes with. // Not pleasant to write nor read. Not because you wrote it badly, but because of overall architecture, it is all too // intertwined and mixed up. So I will recommend you a different, typical approach for these kind of programmes, From 2f76dfb2282f69f1f9955fc203bbb50f74578839 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 09:34:57 +0100 Subject: [PATCH 04/20] Final game --- app.js | 14 ++++++++++++++ index.html | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/app.js b/app.js index ecc70b5..d0e9db1 100644 --- a/app.js +++ b/app.js @@ -7,6 +7,20 @@ const width = 8; let playerTurn = "white"; // defining whose move it is playerDisplay.textContent = "white"; // showing whose move it is +const king = + '
'; +const queen = + '
'; +const rook = + '
'; +const knight = + '
'; +const bishop = + '
'; +const pawn = + '
'; + + const startPieces = [ rook, knight, diff --git a/index.html b/index.html index b8a5d84..e2dac80 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@

It is 's turn.

- + From c4ec511878a299d76e95ab20020b270c193e07d5 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:17:53 +0100 Subject: [PATCH 05/20] cleaning up --- app.js | 288 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 140 insertions(+), 148 deletions(-) diff --git a/app.js b/app.js index d0e9db1..dac51ed 100644 --- a/app.js +++ b/app.js @@ -7,6 +7,7 @@ const width = 8; let playerTurn = "white"; // defining whose move it is playerDisplay.textContent = "white"; // showing whose move it is +// fetching the visuals for each piece from fontawesome const king = '
'; const queen = @@ -20,7 +21,7 @@ const bishop = const pawn = '
'; - +// placing the pieces on the board const startPieces = [ rook, knight, @@ -88,9 +89,9 @@ const startPieces = [ rook, ]; +// inject into the #gameboard function createInitialBoard() { startPieces.forEach((startPiece, i) => { - // this function injects into the #gameboard const square = document.createElement("div"); // create a div for each startpiece. Call the div "square" square.classList.add("square"); // give each square a class called "square" square.innerHTML = startPiece; // make the pieces appear on the squares @@ -187,179 +188,170 @@ function checkIfValid(target) { case "pawn": const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; if ( - (starterRow.includes(startId) && startId + width * 2 === targetId) || - startId + width === targetId || - (startId + width - 1 === targetId && - document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstChild) || - (startId + width + 1 === targetId && - document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstChild) - ) { + starterRow.includes(startId) && startId + width * 2 === targetId || + startId + width === targetId || + startId + width - 1 === targetId && document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild || // check that there is an opponent on this square, or this move is not allowed + startId + width + 1 === targetId && document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild // check that there is an opponent on this square, or this move is not allowed + ) { return true; } break; - case "knight": if ( - startId + width * 2 + 1 === targetId || - startId + width * 2 - 1 === targetId || - startId + width + 2 === targetId || - startId + width - 2 === targetId || - startId - width * 2 + 1 === targetId || - startId - width * 2 - 1 === targetId || - startId - width + 2 === targetId || - startId - width - 2 === targetId - ) { + startId + width * 2 + 1 === targetId || + startId + width * 2 - 1 === targetId || + startId + width + 2 === targetId || + startId + width - 2 === targetId || + startId - width * 2 + 1 === targetId || + startId - width * 2 - 1 === targetId || + startId - width + 2 === targetId || + startId - width - 2 === targetId + ) { return true; } break; - case "bishop": if ( - startId + width + 1 === targetId || - startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square - startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || - startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || - startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || - startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || - startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || - startId + width - 1 === targetId || - startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || - startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || - startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || - startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || - startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || - startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || - startId - width + 1 === targetId || - startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || - startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || - startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || - startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || - startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || - startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || - startId - width - 1 === targetId || - startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || - startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || - startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || - startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || - startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || - startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || - ) { + startId + width + 1 === targetId || + startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square + startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || + startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || + startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || + startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || + startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || + startId + width - 1 === targetId || + startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || + startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || + startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || + startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || + startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || + startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || + startId - width + 1 === targetId || + startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || + startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || + startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || + startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || + startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || + startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || + startId - width - 1 === targetId || + startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || + startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || + startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || + startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || + startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || + startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || + ) { return true; } break; - case "rook": if ( - startId + width === targetId || - startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || - startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || - startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || - startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || - startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || - startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || - startId - width === targetId || - startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || - startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || - startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || - startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || - startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || - startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || - startId + 1 === targetId || - startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || - startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || - startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || - startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || - startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || - startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || - startId - 1 === targetId || - startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || - startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || - startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || - startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || - startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + startId + width === targetId || + startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || + startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || + startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || + startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || + startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || + startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || + startId - width === targetId || + startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || + startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || + startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || + startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || + startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || + startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || + startId + 1 === targetId || + startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || + startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || + startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || + startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || + startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || + startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || + startId - 1 === targetId || + startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || + startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || + startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || + startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || + startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || ) { return true; } break; - case "queen": if ( - // bishop's moves - startId + width + 1 === targetId || - startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square - startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || - startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || - startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || - startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || - startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || - startId + width - 1 === targetId || - startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || - startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || - startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || - startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || - startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || - startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || - startId - width + 1 === targetId || - startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || - startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || - startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || - startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || - startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || - startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || - startId - width - 1 === targetId || - startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || - startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || - startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || - startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || - startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || - startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || - //rook's moves - startId + width === targetId || - startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || - startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || - startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || - startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || - startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || - startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || - startId - width === targetId || - startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || - startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || - startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || - startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || - startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || - startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || - startId + 1 === targetId || - startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || - startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || - startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || - startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || - startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || - startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || - startId - 1 === targetId || - startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || - startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || - startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || - startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || - startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + // bishop's moves + startId + width + 1 === targetId || + startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square + startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || + startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || + startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || + startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || + startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || + startId + width - 1 === targetId || + startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || + startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || + startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || + startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || + startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || + startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || + startId - width + 1 === targetId || + startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || + startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || + startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || + startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || + startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || + startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || + startId - width - 1 === targetId || + startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || + startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || + startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || + startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || + startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || + startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || + //rook's moves + startId + width === targetId || + startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || + startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || + startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || + startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || + startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || + startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || + startId - width === targetId || + startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || + startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || + startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || + startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || + startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || + startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || + startId + 1 === targetId || + startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || + startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || + startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || + startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || + startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || + startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || + startId - 1 === targetId || + startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || + startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || + startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || + startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || + startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || ) { return true; } break; - case: "king": if ( - startId + 1 === targetId || - startId - 1 === targetId || - startId + width === targetId || - startId - width === targetId || - startId + width + 1 === targetId || - startId + width - 1 === targetId || - startId - width + 1 === targetId || - startId - width - 1 === targetId || + startId + 1 === targetId || + startId - 1 === targetId || + startId + width === targetId || + startId - width === targetId || + startId + width + 1 === targetId || + startId + width - 1 === targetId || + startId - width + 1 === targetId || + startId - width - 1 === targetId || ) { return true; } From 002d4766627b4ba6e2e560ef7e89c33a17106b21 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:19:16 +0100 Subject: [PATCH 06/20] bug fix: eliminated the final operator in the moves --- app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index dac51ed..4ec73e2 100644 --- a/app.js +++ b/app.js @@ -239,7 +239,7 @@ function checkIfValid(target) { startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || - startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || + startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild ) { return true; } @@ -273,7 +273,7 @@ function checkIfValid(target) { startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild ) { return true; } @@ -337,7 +337,7 @@ function checkIfValid(target) { startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild || + startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild ) { return true; } @@ -351,7 +351,7 @@ function checkIfValid(target) { startId + width + 1 === targetId || startId + width - 1 === targetId || startId - width + 1 === targetId || - startId - width - 1 === targetId || + startId - width - 1 === targetId ) { return true; } From 346f9dfffa31f2a04f2c9056120d3b1441556c90 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:20:06 +0100 Subject: [PATCH 07/20] bug fixes --- app.js | 808 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 662 insertions(+), 146 deletions(-) diff --git a/app.js b/app.js index 4ec73e2..3a8222a 100644 --- a/app.js +++ b/app.js @@ -157,7 +157,7 @@ function dragDrop(e) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. e.target.remove(); - checkForVictory() + checkForVictory(); changePlayer(); return; } @@ -168,7 +168,7 @@ function dragDrop(e) { } if (valid) { e.target.append(draggedElement); - checkForVictory() + checkForVictory(); changePlayer(); return; } @@ -188,170 +188,682 @@ function checkIfValid(target) { case "pawn": const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; if ( - starterRow.includes(startId) && startId + width * 2 === targetId || - startId + width === targetId || - startId + width - 1 === targetId && document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild || // check that there is an opponent on this square, or this move is not allowed - startId + width + 1 === targetId && document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild // check that there is an opponent on this square, or this move is not allowed - ) { + (starterRow.includes(startId) && startId + width * 2 === targetId) || + startId + width === targetId || + (startId + width - 1 === targetId && + document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstChild) || // check that there is an opponent on this square, or this move is not allowed + (startId + width + 1 === targetId && + document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstChild) // check that there is an opponent on this square, or this move is not allowed + ) { return true; } break; case "knight": if ( - startId + width * 2 + 1 === targetId || - startId + width * 2 - 1 === targetId || - startId + width + 2 === targetId || - startId + width - 2 === targetId || - startId - width * 2 + 1 === targetId || - startId - width * 2 - 1 === targetId || - startId - width + 2 === targetId || - startId - width - 2 === targetId - ) { + startId + width * 2 + 1 === targetId || + startId + width * 2 - 1 === targetId || + startId + width + 2 === targetId || + startId + width - 2 === targetId || + startId - width * 2 + 1 === targetId || + startId - width * 2 - 1 === targetId || + startId - width + 2 === targetId || + startId - width - 2 === targetId + ) { return true; } break; case "bishop": if ( - startId + width + 1 === targetId || - startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square - startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || - startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || - startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || - startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || - startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || - startId + width - 1 === targetId || - startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || - startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || - startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || - startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || - startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || - startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || - startId - width + 1 === targetId || - startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || - startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || - startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || - startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || - startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || - startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || - startId - width - 1 === targetId || - startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || - startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || - startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || - startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || - startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || - startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild - ) { + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) + ) { return true; } break; case "rook": if ( - startId + width === targetId || - startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || - startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || - startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || - startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || - startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || - startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || - startId - width === targetId || - startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || - startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || - startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || - startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || - startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || - startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || - startId + 1 === targetId || - startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || - startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || - startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || - startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || - startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || - startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || - startId - 1 === targetId || - startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || - startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || - startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || - startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || - startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) ) { - return true; + return true; } break; case "queen": if ( - // bishop's moves - startId + width + 1 === targetId || - startId + width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId + width + 1}"]`).firstchild || // checking that there is no other piece in the way, preventing the bishop to reach the target square - startId + width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild || - startId + width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild || - startId + width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild || - startId + width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild || - startId + width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild || - startId + width - 1 === targetId || - startId + width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId + width - 1}"]`).firstchild || - startId + width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild || - startId + width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild || - startId + width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild || - startId + width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild || - startId + width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild || - startId - width + 1 === targetId || - startId - width * 2 + 2 === targetId && !document.querySelector(`[square-id="${startId - width + 1}"]`).firstchild || - startId - width * 3 + 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild || - startId - width * 4 + 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild || - startId - width * 5 + 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild || - startId - width * 6 + 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild || - startId - width * 7 + 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild || - startId - width - 1 === targetId || - startId - width * 2 - 2 === targetId && !document.querySelector(`[square-id="${startId - width - 1}"]`).firstchild || - startId - width * 3 - 3 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild || - startId - width * 4 - 4 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild || - startId - width * 5 - 5 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild || - startId - width * 6 - 6 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild || - startId - width * 7 - 7 === targetId && !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild || - //rook's moves - startId + width === targetId || - startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild || - startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild || - startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild || - startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild || - startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild || - startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild || - startId - width === targetId || - startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild || - startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild || - startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild || - startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild || - startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild || - startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild || - startId + 1 === targetId || - startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild || - startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild || - startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild || - startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild || - startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild || - startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild || - startId - 1 === targetId || - startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild || - startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild || - startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild || - startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild || - startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild || - startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild + // bishop's moves + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) || + //rook's moves + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) ) { return true; } break; - case: "king": + case "king": if ( - startId + 1 === targetId || - startId - 1 === targetId || - startId + width === targetId || - startId - width === targetId || - startId + width + 1 === targetId || - startId + width - 1 === targetId || - startId - width + 1 === targetId || - startId - width - 1 === targetId + startId + 1 === targetId || + startId - 1 === targetId || + startId + width === targetId || + startId - width === targetId || + startId + width + 1 === targetId || + startId + width - 1 === targetId || + startId - width + 1 === targetId || + startId - width - 1 === targetId ) { return true; } @@ -388,16 +900,20 @@ function revertIds() { } function checkForVictory() { - const kings = Array.from(document.querySelectorAll('#king')); - if (kings.some(king => king.firstChild.classList.contains("white"))) { + const kings = Array.from(document.querySelectorAll("#king")); + if (kings.some((king) => king.firstChild.classList.contains("white"))) { infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); - allSquares.forEach(square => square.firstChild?.setAttribute("draggable", false)); + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); } - if (kings.some(king => king.firstChild.classList.contains("black"))) { + if (kings.some((king) => king.firstChild.classList.contains("black"))) { infoDisplay.innerHTML = "White wins!"; const allSquares = document.querySelectorAll(".square"); - allSquares.forEach(square => square.firstChild?.setAttribute("draggable", false)); + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); } } From 0960acf3f5ff89e557b229ff877c10c491ce823a Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:42:03 +0100 Subject: [PATCH 08/20] bug fixes --- app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 3a8222a..d3953be 100644 --- a/app.js +++ b/app.js @@ -150,7 +150,7 @@ function dragDrop(e) { draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn - const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square + const taken = e.target.classList.contains(piece); // this ensures that a piece can only be taken if there is already a piece on the target square const valid = checkIfValid(e.target); if (isCorrectTurn) { @@ -901,14 +901,14 @@ function revertIds() { function checkForVictory() { const kings = Array.from(document.querySelectorAll("#king")); - if (kings.some((king) => king.firstChild.classList.contains("white"))) { + if (kings.some((king) => king.firstChild.classList.contains(white))) { infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); allSquares.forEach((square) => square.firstChild?.setAttribute("draggable", false) ); } - if (kings.some((king) => king.firstChild.classList.contains("black"))) { + if (kings.some((king) => king.firstChild.classList.contains(black))) { infoDisplay.innerHTML = "White wins!"; const allSquares = document.querySelectorAll(".square"); allSquares.forEach((square) => From b142522396ea68c1abefaef32b17dad58649e324 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:44:44 +0100 Subject: [PATCH 09/20] minor fixes --- app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app.js b/app.js index d3953be..336af23 100644 --- a/app.js +++ b/app.js @@ -146,8 +146,7 @@ function dragOver(e) { function dragDrop(e) { e.stopPropagation(); // this prevents any funky behaviour, e.g. dropping two pieces and call this function twice - const isCorrectTurn = - draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn + const isCorrectTurn = draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn const taken = e.target.classList.contains(piece); // this ensures that a piece can only be taken if there is already a piece on the target square From 7b0ab0717953a19e0987133f06ee2f7ef43e4936 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:46:26 +0100 Subject: [PATCH 10/20] small fixes --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index 336af23..d01cb7b 100644 --- a/app.js +++ b/app.js @@ -135,7 +135,7 @@ allSquares.forEach((square) => { let startPositionId; // global level. Starts with null. As soon as we drag a piece we get the square-id through the getAttribute function below, which then gets saved to StartPositionId. let draggedElement; -function dragStart(e) { +function dragStart(e) { // I don't understand what this "e" for event is for. startPositionId = e.target.parentNode.getAttribute("square-id"); // the parentNode points to the square-id. This is equivalent to the startPosition of a piece. draggedElement = e.target; } From aecf42bf6b895188136e41b6549542720ad0c1c8 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:48:17 +0100 Subject: [PATCH 11/20] comments --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index d01cb7b..4d15f54 100644 --- a/app.js +++ b/app.js @@ -155,7 +155,7 @@ function dragDrop(e) { if (isCorrectTurn) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. - e.target.remove(); + e.target.remove(); // remove any existing elements in that square after appending the draggedElement checkForVictory(); changePlayer(); return; From fb524ee85a3280ef1028906b86e7a37432329c43 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 12:59:50 +0100 Subject: [PATCH 12/20] Trying to make the drop functionality work --- .vscode/settings.json | 3 + app.js | 1554 ++++++++++++++++++++++------------------- 2 files changed, 822 insertions(+), 735 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1ea4962 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "CodeGPT.apiKey": "CodeGPT Plus Beta" +} diff --git a/app.js b/app.js index 4d15f54..9d635f6 100644 --- a/app.js +++ b/app.js @@ -135,7 +135,8 @@ allSquares.forEach((square) => { let startPositionId; // global level. Starts with null. As soon as we drag a piece we get the square-id through the getAttribute function below, which then gets saved to StartPositionId. let draggedElement; -function dragStart(e) { // I don't understand what this "e" for event is for. +function dragStart(e) { + // I don't understand what this "e" for event is for. startPositionId = e.target.parentNode.getAttribute("square-id"); // the parentNode points to the square-id. This is equivalent to the startPosition of a piece. draggedElement = e.target; } @@ -146,7 +147,9 @@ function dragOver(e) { function dragDrop(e) { e.stopPropagation(); // this prevents any funky behaviour, e.g. dropping two pieces and call this function twice - const isCorrectTurn = draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn + const piece = draggedElement.id; + const isCorrectTurn = + draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn const taken = e.target.classList.contains(piece); // this ensures that a piece can only be taken if there is already a piece on the target square @@ -155,7 +158,7 @@ function dragDrop(e) { if (isCorrectTurn) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. - e.target.remove(); // remove any existing elements in that square after appending the draggedElement + e.target.remove(); // remove any existing elements in that square after appending the draggedElement checkForVictory(); changePlayer(); return; @@ -172,747 +175,828 @@ function dragDrop(e) { return; } } -} -function checkIfValid(target) { - const targetId = - Number(e.target.getAttribute("square-id")) || - Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers - const start = Number(startPositionId); - const piece = draggedElement.id; + function checkIfValid(target) { + const targetId = + Number(e.target.getAttribute("square-id")) || + Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers + const start = Number(startPositionId); - // DEFINING THE MOVES OF THE VARIOUS PIECES - // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. - switch (piece) { - case "pawn": - const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; - if ( - (starterRow.includes(startId) && startId + width * 2 === targetId) || - startId + width === targetId || - (startId + width - 1 === targetId && - document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstChild) || // check that there is an opponent on this square, or this move is not allowed - (startId + width + 1 === targetId && - document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstChild) // check that there is an opponent on this square, or this move is not allowed - ) { - return true; - } - break; - case "knight": - if ( - startId + width * 2 + 1 === targetId || - startId + width * 2 - 1 === targetId || - startId + width + 2 === targetId || - startId + width - 2 === targetId || - startId - width * 2 + 1 === targetId || - startId - width * 2 - 1 === targetId || - startId - width + 2 === targetId || - startId - width - 2 === targetId - ) { - return true; - } - break; - case "bishop": - if ( - startId + width + 1 === targetId || - (startId + width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square - (startId + width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild) || - (startId + width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild) || - (startId + width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild) || - (startId + width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild) || - (startId + width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) - .firstChild) || - startId + width - 1 === targetId || - (startId + width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstchild) || - (startId + width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild) || - (startId + width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild) || - (startId + width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild) || - (startId + width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild) || - (startId + width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) - .firstChild) || - startId - width + 1 === targetId || - (startId - width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId - width + 1}"]`) - .firstchild) || - (startId - width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild) || - (startId - width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild) || - (startId - width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild) || - (startId - width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild) || - (startId - width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) - .firstChild) || - startId - width - 1 === targetId || - (startId - width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId - width - 1}"]`) - .firstchild) || - (startId - width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild) || - (startId - width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild) || - (startId - width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild) || - (startId - width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild) || - (startId - width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) - .firstChild) - ) { - return true; - } - break; - case "rook": - if ( - startId + width === targetId || - (startId + width * 2 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild) || - (startId + width * 3 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild) || - (startId + width * 4 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild) || - (startId + width * 5 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild) || - (startId + width * 6 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild) || - (startId + width * 7 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6}"]`) - .firstChild) || - startId - width === targetId || - (startId - width * 2 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild) || - (startId - width * 3 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild) || - (startId - width * 4 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild) || - (startId - width * 5 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild) || - (startId - width * 6 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild) || - (startId - width * 7 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6}"]`) - .firstChild) || - startId + 1 === targetId || - (startId + 2 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || - (startId + 3 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || - (startId + 4 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || - (startId + 5 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || - (startId + 6 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || - (startId + 7 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || - startId - 1 === targetId || - (startId - 2 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || - (startId - 3 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || - (startId - 4 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || - (startId - 5 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || - (startId - 6 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || - (startId - 7 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) - ) { - return true; - } - break; - case "queen": - if ( - // bishop's moves - startId + width + 1 === targetId || - (startId + width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square - (startId + width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild) || - (startId + width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild) || - (startId + width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild) || - (startId + width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild) || - (startId + width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) - .firstChild) || - startId + width - 1 === targetId || - (startId + width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstchild) || - (startId + width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild) || - (startId + width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild) || - (startId + width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild) || - (startId + width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild) || - (startId + width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) - .firstChild) || - startId - width + 1 === targetId || - (startId - width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId - width + 1}"]`) - .firstchild) || - (startId - width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild) || - (startId - width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild) || - (startId - width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild) || - (startId - width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild) || - (startId - width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) - .firstChild) || - startId - width - 1 === targetId || - (startId - width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId - width - 1}"]`) - .firstchild) || - (startId - width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild) || - (startId - width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild) || - (startId - width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild) || - (startId - width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild) || - (startId - width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) - .firstChild) || - //rook's moves - startId + width === targetId || - (startId + width * 2 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild) || - (startId + width * 3 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild) || - (startId + width * 4 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild) || - (startId + width * 5 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild) || - (startId + width * 6 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild) || - (startId + width * 7 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6}"]`) - .firstChild) || - startId - width === targetId || - (startId - width * 2 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild) || - (startId - width * 3 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild) || - (startId - width * 4 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild) || - (startId - width * 5 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild) || - (startId - width * 6 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild) || - (startId - width * 7 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6}"]`) - .firstChild) || - startId + 1 === targetId || - (startId + 2 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || - (startId + 3 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || - (startId + 4 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || - (startId + 5 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || - (startId + 6 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || - (startId + 7 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && - !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || - startId - 1 === targetId || - (startId - 2 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || - (startId - 3 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || - (startId - 4 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || - (startId - 5 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || - (startId - 6 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || - (startId - 7 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && - !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) - ) { - return true; - } - break; - case "king": - if ( - startId + 1 === targetId || - startId - 1 === targetId || - startId + width === targetId || - startId - width === targetId || - startId + width + 1 === targetId || - startId + width - 1 === targetId || - startId - width + 1 === targetId || - startId - width - 1 === targetId - ) { - return true; - } - break; + // DEFINING THE MOVES OF THE VARIOUS PIECES + // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. + switch (piece) { + case "pawn": + const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; + if ( + (starterRow.includes(startId) && startId + width * 2 === targetId) || + startId + width === targetId || + (startId + width - 1 === targetId && + document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstChild) || // check that there is an opponent on this square, or this move is not allowed + (startId + width + 1 === targetId && + document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstChild) // check that there is an opponent on this square, or this move is not allowed + ) { + return true; + } + break; + case "knight": + if ( + startId + width * 2 + 1 === targetId || + startId + width * 2 - 1 === targetId || + startId + width + 2 === targetId || + startId + width - 2 === targetId || + startId - width * 2 + 1 === targetId || + startId - width * 2 - 1 === targetId || + startId - width + 2 === targetId || + startId - width - 2 === targetId + ) { + return true; + } + break; + case "bishop": + if ( + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) + ) { + return true; + } + break; + case "rook": + if ( + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`) + .firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`) + .firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`) + .firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) + ) { + return true; + } + break; + case "queen": + if ( + // bishop's moves + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) || + //rook's moves + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`) + .firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`) + .firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`) + .firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) + ) { + return true; + } + break; + case "king": + if ( + startId + 1 === targetId || + startId - 1 === targetId || + startId + width === targetId || + startId - width === targetId || + startId + width + 1 === targetId || + startId + width - 1 === targetId || + startId - width + 1 === targetId || + startId - width - 1 === targetId + ) { + return true; + } + break; + } } -} -// SWITCHING PLAYERS' TURNS -function changePlayer() { - if (playerTurn === "white") { - revertIds(); // how can the programme call the revertIds function already here if it's written only further below in the script? - playerTurn = "black"; - playerDisplay.textContent = "black"; - } else { - reverseIds(); - playerTurn = "white"; - playerDisplay.textContent = "white"; + // SWITCHING PLAYERS' TURNS + function changePlayer() { + if (playerTurn === "white") { + revertIds(); // how can the programme call the revertIds function already here if it's written only further below in the script? + playerTurn = "black"; + playerDisplay.textContent = "black"; + } else { + reverseIds(); + playerTurn = "white"; + playerDisplay.textContent = "white"; + } } -} -function reverseIds() { - // I'm confused as to when to use a parameter in a function and when not. Why wouldn't I use "i" here as a parameter? - const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" - allSquares.forEach((square, i) => - // for each square, override the existing squareId with its reverse (width * width - 1) - i - // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. - square.setAttribute("square-id", width * width - 1 - i) - ); // set the reversed squareId as the attribute -} - -function revertIds() { - const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square, i) => square.setAttribute("square-id", i)); -} + function reverseIds() { + // I'm confused as to when to use a parameter in a function and when not. Why wouldn't I use "i" here as a parameter? + const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" + allSquares.forEach((square, i) => + // for each square, override the existing squareId with its reverse (width * width - 1) - i + // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. + square.setAttribute("square-id", width * width - 1 - i) + ); // set the reversed squareId as the attribute + } -function checkForVictory() { - const kings = Array.from(document.querySelectorAll("#king")); - if (kings.some((king) => king.firstChild.classList.contains(white))) { - infoDisplay.innerHTML = "Black wins!"; + function revertIds() { const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square) => - square.firstChild?.setAttribute("draggable", false) - ); + allSquares.forEach((square, i) => square.setAttribute("square-id", i)); } - if (kings.some((king) => king.firstChild.classList.contains(black))) { - infoDisplay.innerHTML = "White wins!"; - const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square) => - square.firstChild?.setAttribute("draggable", false) - ); + + function checkForVictory() { + const kings = Array.from(document.querySelectorAll("#king")); + if (kings.some((king) => king.firstChild.classList.contains(white))) { + infoDisplay.innerHTML = "Black wins!"; + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); + } + if (kings.some((king) => king.firstChild.classList.contains(black))) { + infoDisplay.innerHTML = "White wins!"; + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); + } } } From e6f32b115e1b43610dc976a2a8fd0da387b2b81b Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 18:14:58 +0100 Subject: [PATCH 13/20] final changes hopefully! --- app.js | 1557 +++++++++++++++++++++++++--------------------------- styles.css | 1 + 2 files changed, 738 insertions(+), 820 deletions(-) diff --git a/app.js b/app.js index 9d635f6..8909479 100644 --- a/app.js +++ b/app.js @@ -124,7 +124,7 @@ const allSquares = document.querySelectorAll(".square"); // grab all squares (i. allSquares.forEach((square) => { square.addEventListener("dragStart", dragStart); // listen out for a dragsStart even, and when it starts call the dragStart function - square.addEventListener("dragOver", dragOver); + square.addEventListener("dragOver", dragOver); // I don't understand: how does the programme know what dragStart, dragOver and drop are? square.addEventListener("drop", dragDrop); }); @@ -136,7 +136,7 @@ let startPositionId; // global level. Starts with null. As soon as we drag a pie let draggedElement; function dragStart(e) { - // I don't understand what this "e" for event is for. + // I don't understand what this "e" for event is for. Why do I need it? startPositionId = e.target.parentNode.getAttribute("square-id"); // the parentNode points to the square-id. This is equivalent to the startPosition of a piece. draggedElement = e.target; } @@ -147,19 +147,19 @@ function dragOver(e) { function dragDrop(e) { e.stopPropagation(); // this prevents any funky behaviour, e.g. dropping two pieces and call this function twice - const piece = draggedElement.id; const isCorrectTurn = draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn - const opponentTurn = playerTurn === "white" ? "black" : "white"; - const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn + const taken = e.target.classList.contains(piece); // this ensures that a piece can only be taken if there is already a piece on the target square const valid = checkIfValid(e.target); + const opponentTurn = playerTurn === "white" ? "black" : "white"; + const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn if (isCorrectTurn) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. e.target.remove(); // remove any existing elements in that square after appending the draggedElement - checkForVictory(); + // checkForVictory(); changePlayer(); return; } @@ -170,835 +170,752 @@ function dragDrop(e) { } if (valid) { e.target.append(draggedElement); - checkForVictory(); + //checkForVictory(); changePlayer(); return; } } +} - function checkIfValid(target) { - const targetId = - Number(e.target.getAttribute("square-id")) || - Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers - const start = Number(startPositionId); +function checkIfValid(target) { + const targetId = + Number(e.target.getAttribute("square-id")) || + Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers + const startId = Number(startPositionId); + const piece = draggedElement.id; - // DEFINING THE MOVES OF THE VARIOUS PIECES - // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. - switch (piece) { - case "pawn": - const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; - if ( - (starterRow.includes(startId) && startId + width * 2 === targetId) || - startId + width === targetId || - (startId + width - 1 === targetId && - document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstChild) || // check that there is an opponent on this square, or this move is not allowed - (startId + width + 1 === targetId && - document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstChild) // check that there is an opponent on this square, or this move is not allowed - ) { - return true; - } - break; - case "knight": - if ( - startId + width * 2 + 1 === targetId || - startId + width * 2 - 1 === targetId || - startId + width + 2 === targetId || - startId + width - 2 === targetId || - startId - width * 2 + 1 === targetId || - startId - width * 2 - 1 === targetId || - startId - width + 2 === targetId || - startId - width - 2 === targetId - ) { - return true; - } - break; - case "bishop": - if ( - startId + width + 1 === targetId || - (startId + width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square - (startId + width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild) || - (startId + width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild) || - (startId + width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild) || - (startId + width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild) || - (startId + width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) - .firstChild) || - startId + width - 1 === targetId || - (startId + width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstchild) || - (startId + width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild) || - (startId + width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild) || - (startId + width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild) || - (startId + width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild) || - (startId + width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) - .firstChild) || - startId - width + 1 === targetId || - (startId - width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId - width + 1}"]`) - .firstchild) || - (startId - width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild) || - (startId - width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild) || - (startId - width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild) || - (startId - width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild) || - (startId - width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) - .firstChild) || - startId - width - 1 === targetId || - (startId - width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId - width - 1}"]`) - .firstchild) || - (startId - width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild) || - (startId - width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild) || - (startId - width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild) || - (startId - width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild) || - (startId - width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) - .firstChild) - ) { - return true; - } - break; - case "rook": - if ( - startId + width === targetId || - (startId + width * 2 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild) || - (startId + width * 3 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild) || - (startId + width * 4 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild) || - (startId + width * 5 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild) || - (startId + width * 6 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild) || - (startId + width * 7 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6}"]`) - .firstChild) || - startId - width === targetId || - (startId - width * 2 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild) || - (startId - width * 3 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild) || - (startId - width * 4 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild) || - (startId - width * 5 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild) || - (startId - width * 6 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild) || - (startId - width * 7 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6}"]`) - .firstChild) || - startId + 1 === targetId || - (startId + 2 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild) || - (startId + 3 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild) || - (startId + 4 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild) || - (startId + 5 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild) || - (startId + 6 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`) - .firstChild) || - (startId + 7 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 6}"]`) - .firstChild) || - startId - 1 === targetId || - (startId - 2 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild) || - (startId - 3 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild) || - (startId - 4 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild) || - (startId - 5 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild) || - (startId - 6 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`) - .firstChild) || - (startId - 7 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) - ) { - return true; - } - break; - case "queen": - if ( - // bishop's moves - startId + width + 1 === targetId || - (startId + width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId + width + 1}"]`) - .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square - (startId + width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild) || - (startId + width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild) || - (startId + width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild) || - (startId + width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild) || - (startId + width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) - .firstChild) || - startId + width - 1 === targetId || - (startId + width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId + width - 1}"]`) - .firstchild) || - (startId + width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild) || - (startId + width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild) || - (startId + width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild) || - (startId + width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild) || - (startId + width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) - .firstChild) || - startId - width + 1 === targetId || - (startId - width * 2 + 2 === targetId && - !document.querySelector(`[square-id="${startId - width + 1}"]`) - .firstchild) || - (startId - width * 3 + 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild) || - (startId - width * 4 + 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild) || - (startId - width * 5 + 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild) || - (startId - width * 6 + 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild) || - (startId - width * 7 + 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) - .firstChild) || - startId - width - 1 === targetId || - (startId - width * 2 - 2 === targetId && - !document.querySelector(`[square-id="${startId - width - 1}"]`) - .firstchild) || - (startId - width * 3 - 3 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild) || - (startId - width * 4 - 4 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild) || - (startId - width * 5 - 5 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild) || - (startId - width * 6 - 6 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild) || - (startId - width * 7 - 7 === targetId && - !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) - .firstChild) || - //rook's moves - startId + width === targetId || - (startId + width * 2 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild) || - (startId + width * 3 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild) || - (startId + width * 4 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild) || - (startId + width * 5 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild) || - (startId + width * 6 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild) || - (startId + width * 7 === targetId && - !document.querySelector(`[square-id="${startId + width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + width * 6}"]`) - .firstChild) || - startId - width === targetId || - (startId - width * 2 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild) || - (startId - width * 3 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild) || - (startId - width * 4 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild) || - (startId - width * 5 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild) || - (startId - width * 6 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild) || - (startId - width * 7 === targetId && - !document.querySelector(`[square-id="${startId - width}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - width * 6}"]`) - .firstChild) || - startId + 1 === targetId || - (startId + 2 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild) || - (startId + 3 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild) || - (startId + 4 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild) || - (startId + 5 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild) || - (startId + 6 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`) - .firstChild) || - (startId + 7 === targetId && - !document.querySelector(`[square-id="${startId + 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId + 6}"]`) - .firstChild) || - startId - 1 === targetId || - (startId - 2 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild) || - (startId - 3 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild) || - (startId - 4 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild) || - (startId - 5 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild) || - (startId - 6 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`) - .firstChild) || - (startId - 7 === targetId && - !document.querySelector(`[square-id="${startId - 1}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 2}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 3}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 4}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 5}"]`) - .firstChild && - !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) - ) { - return true; - } - break; - case "king": - if ( - startId + 1 === targetId || - startId - 1 === targetId || - startId + width === targetId || - startId - width === targetId || - startId + width + 1 === targetId || - startId + width - 1 === targetId || - startId - width + 1 === targetId || - startId - width - 1 === targetId - ) { - return true; - } - break; - } + // DEFINING THE MOVES OF THE VARIOUS PIECES + // The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered. + switch (piece) { + case "pawn": + const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]; // for the pawns we need to define the starterRow because only if they're in the starterRow can they move two spaces forward + if ( + (starterRow.includes(startId) && startId + width * 2 === targetId) || + startId + width === targetId || + (startId + width - 1 === targetId && + document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstChild) || // check that there is an opponent on this square, or this move is not allowed + (startId + width + 1 === targetId && + document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstChild) // check that there is an opponent on this square, or this move is not allowed + ) { + return true; + } + break; + case "knight": + if ( + startId + width * 2 + 1 === targetId || + startId + width * 2 - 1 === targetId || + startId + width + 2 === targetId || + startId + width - 2 === targetId || + startId - width * 2 + 1 === targetId || + startId - width * 2 - 1 === targetId || + startId - width + 2 === targetId || + startId - width - 2 === targetId + ) { + return true; + } + break; + case "bishop": + if ( + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) + ) { + return true; + } + break; + case "rook": + if ( + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) + ) { + return true; + } + break; + case "queen": + if ( + // bishop's moves + startId + width + 1 === targetId || + (startId + width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId + width + 1}"]`) + .firstchild) || // checking that there is no other piece in the way, preventing the bishop to reach the target square + (startId + width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild) || + (startId + width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild) || + (startId + width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild) || + (startId + width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild) || + (startId + width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 + 6}"]`) + .firstChild) || + startId + width - 1 === targetId || + (startId + width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId + width - 1}"]`) + .firstchild) || + (startId + width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild) || + (startId + width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild) || + (startId + width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild) || + (startId + width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild) || + (startId + width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId + width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6 - 6}"]`) + .firstChild) || + startId - width + 1 === targetId || + (startId - width * 2 + 2 === targetId && + !document.querySelector(`[square-id="${startId - width + 1}"]`) + .firstchild) || + (startId - width * 3 + 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild) || + (startId - width * 4 + 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild) || + (startId - width * 5 + 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild) || + (startId - width * 6 + 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild) || + (startId - width * 7 + 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 + 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 + 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 + 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 + 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 + 6}"]`) + .firstChild) || + startId - width - 1 === targetId || + (startId - width * 2 - 2 === targetId && + !document.querySelector(`[square-id="${startId - width - 1}"]`) + .firstchild) || + (startId - width * 3 - 3 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild) || + (startId - width * 4 - 4 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild) || + (startId - width * 5 - 5 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild) || + (startId - width * 6 - 6 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild) || + (startId - width * 7 - 7 === targetId && + !document.querySelector(`[square-id="${startId - width * 2 - 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3 - 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4 - 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5 - 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6 - 6}"]`) + .firstChild) || + //rook's moves + startId + width === targetId || + (startId + width * 2 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild) || + (startId + width * 3 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild) || + (startId + width * 4 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild) || + (startId + width * 5 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild) || + (startId + width * 6 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild) || + (startId + width * 7 === targetId && + !document.querySelector(`[square-id="${startId + width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId + width * 6}"]`) + .firstChild) || + startId - width === targetId || + (startId - width * 2 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild) || + (startId - width * 3 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild) || + (startId - width * 4 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild) || + (startId - width * 5 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild) || + (startId - width * 6 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild) || + (startId - width * 7 === targetId && + !document.querySelector(`[square-id="${startId - width}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 2}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 3}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 4}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 5}"]`) + .firstChild && + !document.querySelector(`[square-id="${startId - width * 6}"]`) + .firstChild) || + startId + 1 === targetId || + (startId + 2 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild) || + (startId + 3 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild) || + (startId + 4 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild) || + (startId + 5 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild) || + (startId + 6 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild) || + (startId + 7 === targetId && + !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId + 6}"]`).firstChild) || + startId - 1 === targetId || + (startId - 2 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild) || + (startId - 3 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild) || + (startId - 4 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild) || + (startId - 5 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild) || + (startId - 6 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild) || + (startId - 7 === targetId && + !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && + !document.querySelector(`[square-id="${startId - 6}"]`).firstChild) + ) { + return true; + } + break; + case "king": + if ( + startId + 1 === targetId || + startId - 1 === targetId || + startId + width === targetId || + startId - width === targetId || + startId + width + 1 === targetId || + startId + width - 1 === targetId || + startId - width + 1 === targetId || + startId - width - 1 === targetId + ) { + return true; + } } +} - // SWITCHING PLAYERS' TURNS - function changePlayer() { - if (playerTurn === "white") { - revertIds(); // how can the programme call the revertIds function already here if it's written only further below in the script? - playerTurn = "black"; - playerDisplay.textContent = "black"; - } else { - reverseIds(); - playerTurn = "white"; - playerDisplay.textContent = "white"; - } +// SWITCHING PLAYERS' TURNS +function changePlayer() { + if (playerTurn === "white") { + revertIds(); // how can the programme call the revertIds function already here if it's written only further below in the script? + playerTurn = "black"; + playerDisplay.textContent = "black"; + } else { + reverseIds(); + playerTurn = "white"; + playerDisplay.textContent = "white"; } +} - function reverseIds() { - // I'm confused as to when to use a parameter in a function and when not. Why wouldn't I use "i" here as a parameter? - const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" - allSquares.forEach((square, i) => - // for each square, override the existing squareId with its reverse (width * width - 1) - i - // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. - square.setAttribute("square-id", width * width - 1 - i) - ); // set the reversed squareId as the attribute - } +function reverseIds() { + // // I'm confused as to when to use a parameter in a function and when not. Why wouldn't I use "i" here as a parameter? + const allSquares = document.querySelectorAll(".square"); // grab everything that has the class "square" + allSquares.forEach((square, i) => + // for each square, override the existing squareId with its reverse (width * width - 1) - i + // TODO(Martin): Oh wow what is the point of this, reversing all ids? I wonder why would we do that? Quite wild. + square.setAttribute("square-id", width * width - 1 - i) + ); // set the reversed squareId as the attribute +} + +function revertIds() { + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach((square, i) => square.setAttribute("square-id", i)); +} - function revertIds() { +function checkForVictory() { + const kings = Array.from(document.querySelectorAll("#king")); + if (!kings.some(king => king.firstChild.classList.contains(white))) { + infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square, i) => square.setAttribute("square-id", i)); + allSquares.forEach(square => + square.firstChild?.setAttribute("draggable", false)); } - - function checkForVictory() { - const kings = Array.from(document.querySelectorAll("#king")); - if (kings.some((king) => king.firstChild.classList.contains(white))) { - infoDisplay.innerHTML = "Black wins!"; - const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square) => - square.firstChild?.setAttribute("draggable", false) - ); - } - if (kings.some((king) => king.firstChild.classList.contains(black))) { - infoDisplay.innerHTML = "White wins!"; - const allSquares = document.querySelectorAll(".square"); - allSquares.forEach((square) => - square.firstChild?.setAttribute("draggable", false) - ); - } + if (!kings.some(king => king.firstChild.classList.contains(black))) { + infoDisplay.innerHTML = "White wins!"; + const allSquares = document.querySelectorAll(".square"); + allSquares.forEach(square => + square.firstChild?.setAttribute("draggable", false)); } } +} // TODO(Martin): Nice :)! This is actually quite complex code though, hard to reason about, and easy to make mistakes with. // Not pleasant to write nor read. Not because you wrote it badly, but because of overall architecture, it is all too diff --git a/styles.css b/styles.css index ba0f691..ae154b9 100644 --- a/styles.css +++ b/styles.css @@ -8,6 +8,7 @@ .square { width: 80px; height: 80px; + position: relative; } .bright { From a2f125aa3f0f8e9444847a34d3dabcaae9dc6327 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 18:18:08 +0100 Subject: [PATCH 14/20] The end --- app.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 8909479..01fead5 100644 --- a/app.js +++ b/app.js @@ -159,7 +159,7 @@ function dragDrop(e) { if (takenByOpponent && valid) { e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. e.target.remove(); // remove any existing elements in that square after appending the draggedElement - // checkForVictory(); + checkForVictory(); changePlayer(); return; } @@ -170,7 +170,7 @@ function dragDrop(e) { } if (valid) { e.target.append(draggedElement); - //checkForVictory(); + checkForVictory(); changePlayer(); return; } @@ -902,11 +902,11 @@ function revertIds() { function checkForVictory() { const kings = Array.from(document.querySelectorAll("#king")); - if (!kings.some(king => king.firstChild.classList.contains(white))) { + if (!kings.some(king => king.firstChild.classList.contains(white))) { // if there is no white king in my array of kings, black wins (and vv) infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); allSquares.forEach(square => - square.firstChild?.setAttribute("draggable", false)); + square.firstChild?.setAttribute("draggable", false)); // once game is over, the pieces should no longer be draggable } if (!kings.some(king => king.firstChild.classList.contains(black))) { infoDisplay.innerHTML = "White wins!"; @@ -915,7 +915,6 @@ function checkForVictory() { square.firstChild?.setAttribute("draggable", false)); } } -} // TODO(Martin): Nice :)! This is actually quite complex code though, hard to reason about, and easy to make mistakes with. // Not pleasant to write nor read. Not because you wrote it badly, but because of overall architecture, it is all too From a0f57c0557865731c058de02a295f932cbd492b3 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Fri, 19 Apr 2024 18:31:09 +0100 Subject: [PATCH 15/20] final commit. The drop function doesn't work but I give up :( --- app.js | 15 +++++++++------ index.html | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 01fead5..b9f60c8 100644 --- a/app.js +++ b/app.js @@ -902,17 +902,20 @@ function revertIds() { function checkForVictory() { const kings = Array.from(document.querySelectorAll("#king")); - if (!kings.some(king => king.firstChild.classList.contains(white))) { // if there is no white king in my array of kings, black wins (and vv) + if (!kings.some((king) => king.firstChild.classList.contains(white))) { + // if there is no white king in my array of kings, black wins (and vv) infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); - allSquares.forEach(square => - square.firstChild?.setAttribute("draggable", false)); // once game is over, the pieces should no longer be draggable + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); // once game is over, the pieces should no longer be draggable } - if (!kings.some(king => king.firstChild.classList.contains(black))) { + if (!kings.some((king) => king.firstChild.classList.contains(black))) { infoDisplay.innerHTML = "White wins!"; const allSquares = document.querySelectorAll(".square"); - allSquares.forEach(square => - square.firstChild?.setAttribute("draggable", false)); + allSquares.forEach((square) => + square.firstChild?.setAttribute("draggable", false) + ); } } diff --git a/index.html b/index.html index e2dac80..ff26fe8 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@

It is 's turn.

- + From f9b86c79b48b88a90b8becb40df7902b90af46da Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:35:08 +0100 Subject: [PATCH 16/20] Corrected the spelling of the drag events to lower case --- Chess Programme.code-workspace | 7 +++++++ app.js | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 Chess Programme.code-workspace diff --git a/Chess Programme.code-workspace b/Chess Programme.code-workspace new file mode 100644 index 0000000..362d7c2 --- /dev/null +++ b/Chess Programme.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "." + } + ] +} \ No newline at end of file diff --git a/app.js b/app.js index b9f60c8..3d764b0 100644 --- a/app.js +++ b/app.js @@ -123,8 +123,8 @@ createInitialBoard(); const allSquares = document.querySelectorAll(".square"); // grab all squares (i.e. every HTML element with the class "square") and save them as const allSquares allSquares.forEach((square) => { - square.addEventListener("dragStart", dragStart); // listen out for a dragsStart even, and when it starts call the dragStart function - square.addEventListener("dragOver", dragOver); // I don't understand: how does the programme know what dragStart, dragOver and drop are? + square.addEventListener("dragstart", dragStart); // listen out for a dragstart event, and when it starts call the dragStart function + square.addEventListener("dragover", dragOver); square.addEventListener("drop", dragDrop); }); From f6e7daccd61cb7f4edd6d34fbaae37298ef5cd69 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:50:21 +0100 Subject: [PATCH 17/20] Implemented changes to the dragDrop function, the checkIfValid function and the checkForVictory function. Hoping that the drop functionality will work now. --- app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 3d764b0..56bee66 100644 --- a/app.js +++ b/app.js @@ -150,14 +150,14 @@ function dragDrop(e) { const isCorrectTurn = draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn - const taken = e.target.classList.contains(piece); // this ensures that a piece can only be taken if there is already a piece on the target square + const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square const valid = checkIfValid(e.target); const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn if (isCorrectTurn) { if (takenByOpponent && valid) { - e.target.parentNode.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. + e.target.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. e.target.remove(); // remove any existing elements in that square after appending the draggedElement checkForVictory(); changePlayer(); @@ -177,7 +177,7 @@ function dragDrop(e) { } } -function checkIfValid(target) { +function checkIfValid(e, target) { const targetId = Number(e.target.getAttribute("square-id")) || Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers @@ -902,7 +902,7 @@ function revertIds() { function checkForVictory() { const kings = Array.from(document.querySelectorAll("#king")); - if (!kings.some((king) => king.firstChild.classList.contains(white))) { + if (!kings.some((king) => king.firstChild.classList.contains("white"))) { // if there is no white king in my array of kings, black wins (and vv) infoDisplay.innerHTML = "Black wins!"; const allSquares = document.querySelectorAll(".square"); @@ -910,7 +910,7 @@ function checkForVictory() { square.firstChild?.setAttribute("draggable", false) ); // once game is over, the pieces should no longer be draggable } - if (!kings.some((king) => king.firstChild.classList.contains(black))) { + if (!kings.some((king) => king.firstChild.classList.contains("black"))) { infoDisplay.innerHTML = "White wins!"; const allSquares = document.querySelectorAll(".square"); allSquares.forEach((square) => From 84d183c2a32f5908682fff31bef57ea9495f604a Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Mon, 22 Apr 2024 11:51:58 +0100 Subject: [PATCH 18/20] No comment --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index 56bee66..d8ba375 100644 --- a/app.js +++ b/app.js @@ -177,7 +177,7 @@ function dragDrop(e) { } } -function checkIfValid(e, target) { +function checkIfValid(target, e) { const targetId = Number(e.target.getAttribute("square-id")) || Number(e.target.parentNode.getAttribute("square-id")); // The Number function converts any type of value to numbers From 225f57fe6596ec234be75174847e95d5ef937100 Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Mon, 22 Apr 2024 12:05:13 +0100 Subject: [PATCH 19/20] Passing the e argument from the dragDrop function to the checkIfValid function --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index d8ba375..bdd4735 100644 --- a/app.js +++ b/app.js @@ -151,7 +151,7 @@ function dragDrop(e) { draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square - const valid = checkIfValid(e.target); + const valid = checkIfValid(e.target, e); const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn From f0a04833698b06acbbe2470eba22f51485e2c93d Mon Sep 17 00:00:00 2001 From: ItalianTealover <60747900+ItalianTealover@users.noreply.github.com> Date: Mon, 22 Apr 2024 12:21:25 +0100 Subject: [PATCH 20/20] final change --- app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index bdd4735..4709adc 100644 --- a/app.js +++ b/app.js @@ -150,7 +150,7 @@ function dragDrop(e) { const isCorrectTurn = draggedElement.firstChild.classList.contains(playerTurn); // define a correct turn by saving all draggedElements with a class of "playerTurn" to const isCorrectTurn - const taken = e.target.classList.contains("piece"); // this ensures that a piece can only be taken if there is already a piece on the target square + const taken = e.target.firstChild !== null; // this ensures that a piece can only be taken if there is already a piece on the target square const valid = checkIfValid(e.target, e); const opponentTurn = playerTurn === "white" ? "black" : "white"; const takenByOpponent = e.target.firstChild?.classList.contains(opponentTurn); // check whether the firstChild of the target square exists. If it does, check if the class contains opponentTurn @@ -158,7 +158,7 @@ function dragDrop(e) { if (isCorrectTurn) { if (takenByOpponent && valid) { e.target.append(draggedElement); // let the draggedElement appear in the target square. This only applies if there already is a piece in the target square. If there isn't, then e.target.append(draggedElement) applies. - e.target.remove(); // remove any existing elements in that square after appending the draggedElement + e.target.removeChild(e.target.firstChild); // remove any existing elements in that square after appending the draggedElement checkForVictory(); changePlayer(); return; @@ -168,7 +168,7 @@ function dragDrop(e) { setTimeout(() => (infoDisplay.textContent = ""), 2000); return; } - if (valid) { + if (isCorrectTurn && !taken && valid) { e.target.append(draggedElement); checkForVictory(); changePlayer();