From 243429d24db08b01ec2d1d00d7e17962b0b2bcac Mon Sep 17 00:00:00 2001 From: IgrisBRC Date: Sat, 13 Jul 2024 16:09:05 +0530 Subject: added move highlight --- public/game.js | 83 +++++++++++++++++++++++------------ public/index.css | 5 +++ public/index.html | 129 +++++++++++++++++++++++++++--------------------------- 3 files changed, 126 insertions(+), 91 deletions(-) diff --git a/public/game.js b/public/game.js index 81399eb..d72530d 100644 --- a/public/game.js +++ b/public/game.js @@ -1,75 +1,104 @@ const alphabet = 'abcdefgh' -let squares = document.getElementsByClassName("box") + for (let i = 0; i < 8; i++) { for (let j = 0; j < 8; j++) { let square = document.getElementById(`${alphabet.charAt(j)}${i + 1}`) - let piece = document.createElement("p") - piece.classList.add("piece") + let piece = document.createElement('p') + piece.classList.add('piece') switch (board[i][j]) { case 1: - piece.classList.add("wk") + piece.classList.add('wk') square.append(piece) - piece.append("K") + piece.append('K') break case -1: - piece.classList.add("bk") + piece.classList.add('bk') square.append(piece) - piece.append("K") + piece.append('K') break case 2: - piece.classList.add("wq") + piece.classList.add('wq') square.append(piece) - piece.append("Q") + piece.append('Q') break case -2: - piece.classList.add("bq") + piece.classList.add('bq') square.append(piece) - piece.append("Q") + piece.append('Q') break case 3: - piece.classList.add("wr") + piece.classList.add('wr') square.append(piece) - piece.append("R") + piece.append('R') break case -3: - piece.classList.add("br") + piece.classList.add('br') square.append(piece) - piece.append("R") + piece.append('R') break case 4: - piece.classList.add("wb") + piece.classList.add('wb') square.append(piece) - piece.append("B") + piece.append('B') break case -4: - piece.classList.add("bb") + piece.classList.add('bb') square.append(piece) - piece.append("B") + piece.append('B') break case 5: - piece.classList.add("wn") + piece.classList.add('wn') square.append(piece) - piece.append("N") + piece.append('N') break case -5: - piece.classList.add("bn") + piece.classList.add('bn') square.append(piece) - piece.append("N") + piece.append('N') break case 6: - piece.classList.add("wp") + piece.classList.add('wp') square.append(piece) - piece.append("p") + piece.append('p') break case -6: - piece.classList.add("bp") + piece.classList.add('bp') square.append(piece) - piece.append("p") + piece.append('p') break } } } +let squares = document.getElementsByClassName('box') + +let prev = ["dummy"] + +for (let i = 0; i < squares.length; i++) { + + + squares[i].addEventListener('click', (event) => { + let square = [] + let id = squares[i].id + + square.push(8 - id.charAt(1)) + square.push(id.charAt(0).charCodeAt(0) - 97) + + let moves = move(board, square[0], square[1]) + + for (let i = 0; i < prev.length; i++) { + document.getElementById(prev[i]).classList.remove('highlight') + } + + + for (let i = 0; i < moves.length; i++) { + + document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).classList.add('highlight') + prev.push(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) + } + + }) +} diff --git a/public/index.css b/public/index.css index f9712b2..0b9d6da 100644 --- a/public/index.css +++ b/public/index.css @@ -49,4 +49,9 @@ body{ .piece { color: black; text-align:center; + font-size:50px; +} + +.highlight { + background-color: yellow; } diff --git a/public/index.html b/public/index.html index 4f20d70..476efe5 100644 --- a/public/index.html +++ b/public/index.html @@ -7,116 +7,117 @@ +
-
+
8
-
+
7
-
+
6
-
+
5
-
+
4
-
+
3
-
+
2
-
+
1
a
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
b
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
c
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
d
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
e
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
f
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
g
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
h
-- cgit v1.2.3