made some changes to my godawful code

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')