diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/game.js | 83 | ||||
| -rw-r--r-- | public/index.css | 5 | ||||
| -rw-r--r-- | 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 @@ <link rel="stylesheet" href="index.css"> </head> <body> + <div id="dummy"></div> <div class="chess-board"> <div> - <div id="a1" class="box white"> + <div id="a8" class="box white"> <div class="top-corner">8</div> </div> - <div id="a2" class="box black"> + <div id="a7" class="box black"> <div class="top-corner">7</div> </div> - <div id="a3" class="box white"> + <div id="a6" class="box white"> <div class="top-corner">6</div> </div> - <div id="a4" class="box black"> + <div id="a5" class="box black"> <div class="top-corner">5</div> </div> - <div id="a5" class="box white"> + <div id="a4" class="box white"> <div class="top-corner">4</div> </div> - <div id="a6" class="box black"> + <div id="a3" class="box black"> <div class="top-corner">3</div> </div> - <div id="a7" class="box white"> + <div id="a2" class="box white"> <div class="top-corner">2</div> </div> - <div id="a8" class="box black"> + <div id="a1" class="box black"> <div class="top-corner">1</div> <div class="bottom-corner">a</div> </div> </div> <div> - <div id="b1" class="box black"></div> - <div id="b2" class="box white"></div> - <div id="b3" class="box black"></div> - <div id="b4" class="box white"></div> - <div id="b5" class="box black"></div> - <div id="b6" class="box white"></div> - <div id="b7" class="box black"></div> - <div id="b8" class="box white"> + <div id="b8" class="box black"></div> + <div id="b7" class="box white"></div> + <div id="b6" class="box black"></div> + <div id="b5" class="box white"></div> + <div id="b4" class="box black"></div> + <div id="b3" class="box white"></div> + <div id="b2" class="box black"></div> + <div id="b1" class="box white"> <div class="bottom-corner">b</div> </div> </div> <div> - <div id="c1" class="box white"></div> - <div id="c2" class="box black"></div> - <div id="c3" class="box white"></div> - <div id="c4" class="box black"></div> - <div id="c5" class="box white"></div> - <div id="c6" class="box black"></div> - <div id="c7" class="box white"></div> - <div id="c8" class="box black"> + <div id="c8" class="box white"></div> + <div id="c7" class="box black"></div> + <div id="c6" class="box white"></div> + <div id="c5" class="box black"></div> + <div id="c4" class="box white"></div> + <div id="c3" class="box black"></div> + <div id="c2" class="box white"></div> + <div id="c1" class="box black"> <div class="bottom-corner">c</div> </div> </div> <div> - <div id="d1" class="box black"></div> - <div id="d2" class="box white"></div> - <div id="d3" class="box black"></div> - <div id="d4" class="box white"></div> - <div id="d5" class="box black"></div> - <div id="d6" class="box white"></div> - <div id="d7" class="box black"></div> - <div id="d8" class="box white"> + <div id="d8" class="box black"></div> + <div id="d7" class="box white"></div> + <div id="d6" class="box black"></div> + <div id="d5" class="box white"></div> + <div id="d4" class="box black"></div> + <div id="d3" class="box white"></div> + <div id="d2" class="box black"></div> + <div id="d1" class="box white"> <div class="bottom-corner">d</div> </div> </div> <div> - <div id="e1" class="box white"></div> - <div id="e2" class="box black"></div> - <div id="e3" class="box white"></div> - <div id="e4" class="box black"></div> - <div id="e5" class="box white"></div> - <div id="e6" class="box black"></div> - <div id="e7" class="box white"></div> - <div id="e8" class="box black"> + <div id="e8" class="box white"></div> + <div id="e7" class="box black"></div> + <div id="e6" class="box white"></div> + <div id="e5" class="box black"></div> + <div id="e4" class="box white"></div> + <div id="e3" class="box black"></div> + <div id="e2" class="box white"></div> + <div id="e1" class="box black"> <div class="bottom-corner">e</div> </div> </div> <div> - <div id="f1" class="box black"></div> - <div id="f2" class="box white"></div> - <div id="f3" class="box black"></div> - <div id="f4" class="box white"></div> - <div id="f5" class="box black"></div> - <div id="f6" class="box white"></div> - <div id="f7" class="box black"></div> - <div id="f8" class="box white"> + <div id="f8" class="box black"></div> + <div id="f7" class="box white"></div> + <div id="f6" class="box black"></div> + <div id="f5" class="box white"></div> + <div id="f4" class="box black"></div> + <div id="f3" class="box white"></div> + <div id="f2" class="box black"></div> + <div id="f1" class="box white"> <div class="bottom-corner">f</div> </div> </div> <div> - <div id="g1" class="box white"></div> - <div id="g2" class="box black"></div> - <div id="g3" class="box white"></div> - <div id="g4" class="box black"></div> - <div id="g5" class="box white"></div> - <div id="g6" class="box black"></div> - <div id="g7" class="box white"></div> - <div id="g8" class="box black"> + <div id="g8" class="box white"></div> + <div id="g7" class="box black"></div> + <div id="g6" class="box white"></div> + <div id="g5" class="box black"></div> + <div id="g4" class="box white"></div> + <div id="g3" class="box black"></div> + <div id="g2" class="box white"></div> + <div id="g1" class="box black"> <div class="bottom-corner">g</div> </div> </div> <div> - <div id="h1" class="box black"></div> - <div id="h2" class="box white"></div> - <div id="h3" class="box black"></div> - <div id="h4" class="box white"></div> - <div id="h5" class="box black"></div> - <div id="h6" class="box white"></div> - <div id="h7" class="box black"></div> - <div id="h8" class="box white"> + <div id="h8" class="box black"></div> + <div id="h7" class="box white"></div> + <div id="h6" class="box black"></div> + <div id="h5" class="box white"></div> + <div id="h4" class="box black"></div> + <div id="h3" class="box white"></div> + <div id="h2" class="box black"></div> + <div id="h1" class="box white"> <div class="bottom-corner">h</div> </div> </div> |