added move highlight

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>