diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/board.js | 53 | ||||
| -rw-r--r-- | public/index.html | 128 | ||||
| -rw-r--r-- | public/sync_board.js | 2 |
3 files changed, 78 insertions, 105 deletions
diff --git a/public/board.js b/public/board.js index 5738eab..bc76394 100644 --- a/public/board.js +++ b/public/board.js @@ -7,14 +7,15 @@ sync_board() let previously_highlighted_squares = ['dummy'] for (let i = 0; i < squares.length; i++) { - squares[i].onclick = () => { - let square = [] - let id = squares[i].id + squares[i].onclick = handle_highlight(i) +} - square.push(8 - id.charAt(1)) - square.push(id.charAt(0).charCodeAt(0) - 97) +function handle_highlight(i) { + return function() { + + let id = squares[i].id - let moves = move(board, square[0], square[1], to_move) + let moves = move(board, id.charAt(0), id.charAt(1), to_move) for (let i = 0; i < previously_highlighted_squares.length; i++) { let prev = document.getElementById(previously_highlighted_squares[i]) @@ -22,47 +23,19 @@ for (let i = 0; i < squares.length; i++) { } for (let i = 0; i < moves.length; i++) { - - let hlsquare = document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) + let hlsquare = document.getElementById(`${moves[i][0]}${moves[i][1]}`) hlsquare.classList.add('highlight') - hlsquare.onclick = handle_move(id, hlsquare.id) - - previously_highlighted_squares.push(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) - } + hlsquare.onclick = handle_move(hlsquare.id) - let hlsquare = document.getElementsByClassName('highlight') - for (let i = 0; i < hlsquare.length; i++) { + previously_highlighted_squares.push(`${moves[i][0]}${moves[i][1]}`) } } } -function handle_move(from_id, id) { +function handle_move(id) { return function() { - let table = { 1: 'K', 2: 'Q', 3: 'R', 4: 'B', 5: 'N', 6: 'p' } - - make_move(board, 8 - from_id.charAt(1), from_id.charCodeAt(0) - 97, 8 - id.charAt(1), id.charCodeAt(0) - 97) - - let from_element = document.getElementById(from_id) - while (from_element.firstChild) { - from_element.removeChild(from_element.firstChild) - } - - for (let i = 0; i < previously_highlighted_squares.length; i++) { - let prev = document.getElementById(previously_highlighted_squares[i]) - prev.classList.remove('highlight') - prev.onclick = null - } - - let new_element = document.getElementById(id) - let piece = document.createElement('p') - piece.classList.add(board[8 - id.charAt(1)][id.charCodeAt(0) - 97] > 0 ? 'w' : 'b', 'piece') - new_element.append(piece) - piece.append(table[Math.abs(board[8 - id.charAt(1)][id.charCodeAt(0) - 97])]) - - to_move = !to_move - - console.log(from_id, id) - console.log(board) + console.log(id) } } + diff --git a/public/index.html b/public/index.html index 5280cde..8440a76 100644 --- a/public/index.html +++ b/public/index.html @@ -12,98 +12,98 @@ <div class="chess-board"> <div> - <div id="a8" class="box white square"> + <div id="00" class="box white square"> </div> - <div id="a7" class="box black square"> + <div id="10" class="box black square"> </div> - <div id="a6" class="box white square"> + <div id="20" class="box white square"> </div> - <div id="a5" class="box black square"> + <div id="30" class="box black square"> </div> - <div id="a4" class="box white square"> + <div id="40" class="box white square"> </div> - <div id="a3" class="box black square"> + <div id="50" class="box black square"> </div> - <div id="a2" class="box white square"> + <div id="60" class="box white square"> </div> - <div id="a1" class="box black square"> + <div id="70" class="box black square"> </div> </div> <div> - <div id="b8" class="box black square"></div> - <div id="b7" class="box white square"></div> - <div id="b6" class="box black square"></div> - <div id="b5" class="box white square"></div> - <div id="b4" class="box black square"></div> - <div id="b3" class="box white square"></div> - <div id="b2" class="box black square"></div> - <div id="b1" class="box white square"> + <div id="01" class="box black square"></div> + <div id="11" class="box white square"></div> + <div id="21" class="box black square"></div> + <div id="31" class="box white square"></div> + <div id="41" class="box black square"></div> + <div id="51" class="box white square"></div> + <div id="61" class="box black square"></div> + <div id="71" class="box white square"> </div> </div> <div> - <div id="c8" class="box white square"></div> - <div id="c7" class="box black square"></div> - <div id="c6" class="box white square"></div> - <div id="c5" class="box black square"></div> - <div id="c4" class="box white square"></div> - <div id="c3" class="box black square"></div> - <div id="c2" class="box white square"></div> - <div id="c1" class="box black square"> + <div id="02" class="box white square"></div> + <div id="12" class="box black square"></div> + <div id="22" class="box white square"></div> + <div id="32" class="box black square"></div> + <div id="42" class="box white square"></div> + <div id="52" class="box black square"></div> + <div id="62" class="box white square"></div> + <div id="72" class="box black square"> </div> </div> <div> - <div id="d8" class="box black square"></div> - <div id="d7" class="box white square"></div> - <div id="d6" class="box black square"></div> - <div id="d5" class="box white square"></div> - <div id="d4" class="box black square"></div> - <div id="d3" class="box white square"></div> - <div id="d2" class="box black square"></div> - <div id="d1" class="box white square"> + <div id="03" class="box black square"></div> + <div id="13" class="box white square"></div> + <div id="23" class="box black square"></div> + <div id="33" class="box white square"></div> + <div id="43" class="box black square"></div> + <div id="53" class="box white square"></div> + <div id="63" class="box black square"></div> + <div id="73" class="box white square"> </div> </div> <div> - <div id="e8" class="box white square"></div> - <div id="e7" class="box black square"></div> - <div id="e6" class="box white square"></div> - <div id="e5" class="box black square"></div> - <div id="e4" class="box white square"></div> - <div id="e3" class="box black square"></div> - <div id="e2" class="box white square"></div> - <div id="e1" class="box black square"> + <div id="04" class="box white square"></div> + <div id="14" class="box black square"></div> + <div id="24" class="box white square"></div> + <div id="34" class="box black square"></div> + <div id="44" class="box white square"></div> + <div id="54" class="box black square"></div> + <div id="64" class="box white square"></div> + <div id="74" class="box black square"> </div> </div> <div> - <div id="f8" class="box black square"></div> - <div id="f7" class="box white square"></div> - <div id="f6" class="box black square"></div> - <div id="f5" class="box white square"></div> - <div id="f4" class="box black square"></div> - <div id="f3" class="box white square"></div> - <div id="f2" class="box black square"></div> - <div id="f1" class="box white square"> + <div id="05" class="box black square"></div> + <div id="15" class="box white square"></div> + <div id="25" class="box black square"></div> + <div id="35" class="box white square"></div> + <div id="45" class="box black square"></div> + <div id="55" class="box white square"></div> + <div id="65" class="box black square"></div> + <div id="75" class="box white square"> </div> </div> <div> - <div id="g8" class="box white square"></div> - <div id="g7" class="box black square"></div> - <div id="g6" class="box white square"></div> - <div id="g5" class="box black square"></div> - <div id="g4" class="box white square"></div> - <div id="g3" class="box black square"></div> - <div id="g2" class="box white square"></div> - <div id="g1" class="box black square"> + <div id="06" class="box white square"></div> + <div id="16" class="box black square"></div> + <div id="26" class="box white square"></div> + <div id="36" class="box black square"></div> + <div id="46" class="box white square"></div> + <div id="56" class="box black square"></div> + <div id="66" class="box white square"></div> + <div id="76" class="box black square"> </div> </div> <div> - <div id="h8" class="box black square"></div> - <div id="h7" class="box white square"></div> - <div id="h6" class="box black square"></div> - <div id="h5" class="box white square"></div> - <div id="h4" class="box black square"></div> - <div id="h3" class="box white square"></div> - <div id="h2" class="box black square"></div> - <div id="h1" class="box white square"> + <div id="07" class="box black square"></div> + <div id="17" class="box white square"></div> + <div id="27" class="box black square"></div> + <div id="37" class="box white square"></div> + <div id="47" class="box black square"></div> + <div id="57" class="box white square"></div> + <div id="67" class="box black square"></div> + <div id="77" class="box white square"> </div> </div> </div> diff --git a/public/sync_board.js b/public/sync_board.js index 7044db2..739b4a6 100644 --- a/public/sync_board.js +++ b/public/sync_board.js @@ -6,7 +6,7 @@ function sync_board() { for (let j = 0; j < 8; j++) { if (board[i][j] == 0) continue - let square = document.getElementById(`${alphabet.charAt(j)}${8 - i}`) + let square = document.getElementById(`${i}${j}`) let piece = document.createElement('p') piece.classList.add(board[i][j] > 0 ? 'w' : 'b', 'piece') |