fixed critical error in highlighting, the moves were mapped mirrored from the board

author: IgrisBRC <[email protected]> 2024-07-14 07:47:23 +0530
committer: IgrisBRC <[email protected]> 2024-07-14 07:47:23 +0530
commit: a734e0af70a14dc8d635ab988c82e1a2e0b49836 (patch)
tree: 62b3023054d9fc7ba0a89cb0d0f4dbd27d7a9bc8 /public
parent: 2b0cdea28c841040fd872b2b1837b1e0639d6df0 (diff)
4 files changed, 86 insertions, 80 deletions
diff --git a/public/app.js b/public/app.js
index bbb8d4b..a8db6b2 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,16 +1,15 @@
 let board = [
     [-3, -5, -4, -2, -1, -4, -5, -3],
     [-6, -6, -6, -6, -6, -6, -6, -6],
+    [0, 0, -5, 0, 0, 0, 0, 0],
     [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 2, 0, 0, 0, 0],
     [0, 0, 0, 0, 0, 0, 0, 0],
     [6, 6, 6, 6, 6, 6, 6, 6],
     [3, 5, 4, 2, 1, 4, 5, 3],
 ]
 
-
-//console.log(move(board, 1, 0))
+//console.log(move(board, 4, 3))
 //move(board, 3, 3)
 
 function move(board, y, x) {
@@ -45,10 +44,8 @@ function pawn_move(board, y, x) {
             if (board[y - 2][x] == 0) {
                 moves.push([y - 2, x])
             }
-        } else if (color && y != 0) {
-            if (board[y - 1][x] == 0) {
-                moves.push([y - 1, x])
-            }
+        } else if (color && y != 0 && board[y - 1][x] == 0) {
+            moves.push([y - 1, x])
         }
 
         return moves
@@ -60,10 +57,8 @@ function pawn_move(board, y, x) {
             if (board[y + 2][x] == 0) {
                 moves.push([y + 2, x])
             }
-        } else if (color && y != 7) {
-            if (board[y + 1][x] == 0) {
-                moves.push([y + 1, x])
-            }
+        } else if (color && y != 7 && board[y + 1][x] == 0) {
+            moves.push([y + 1, x])
         }
         return moves
     }
diff --git a/public/game.js b/public/game.js
index 05ddc66..e5740de 100644
--- a/public/game.js
+++ b/public/game.js
@@ -3,7 +3,7 @@ const alphabet = 'abcdefgh'
 
 for (let i = 0; i < 8; i++) {
     for (let j = 0; j < 8; j++) {
-        let square = document.getElementById(`${alphabet.charAt(j)}${i + 1}`)
+        let square = document.getElementById(`${alphabet.charAt(j)}${8 - i}`)
         let piece = document.createElement('p')
 
         piece.classList.add('piece')
@@ -73,9 +73,9 @@ for (let i = 0; i < 8; i++) {
     }
 }
 
-let squares = document.getElementsByClassName('box')
+let squares = document.getElementsByClassName('square')
 
-let previously_highlighted_squares = ["dummy"]
+let previously_highlighted_squares = ['dummy']
 
 for (let i = 0; i < squares.length; i++) {
 
@@ -87,15 +87,17 @@ for (let i = 0; i < squares.length; i++) {
         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 < previously_highlighted_squares.length; i++) {
+            //document.getElementById(previously_highlighted_squares[i]).style.backgroundColor = 'transparent'
             document.getElementById(previously_highlighted_squares[i]).classList.remove('highlight')
         }
 
-
         for (let i = 0; i < moves.length; i++) {
 
+            //document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).style.backgroundColor = 'yellow'
             document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).classList.add('highlight')
             previously_highlighted_squares.push(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`)
         }
diff --git a/public/index.css b/public/index.css
index 0b9d6da..7fa778a 100644
--- a/public/index.css
+++ b/public/index.css
@@ -21,6 +21,7 @@
 
 .white{
     background-color: #eaead2;
+    /*background-color: #4b7299; */
     color: #4b7299;
 }
 
@@ -55,3 +56,7 @@ body{
 .highlight {
     background-color: yellow;
 }
+
+/*.wp {*/
+/*    color: white;*/
+/*}*/
diff --git a/public/index.html b/public/index.html
index 476efe5..20bda5a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,116 +8,120 @@
 </head>
 <body>
     <div id="dummy"></div>
+
+
+
+
     <div class="chess-board">
         <div>
 
-            <div id="a8" class="box white">
+            <div id="a8" class="box white square">
                 <div class="top-corner">8</div>
             </div>
-            <div id="a7" class="box black">
+            <div id="a7" class="box black square">
                 <div class="top-corner">7</div>
             </div>
-            <div id="a6" class="box white">
+            <div id="a6" class="box white square">
                 <div class="top-corner">6</div>
             </div>
-            <div id="a5" class="box black">
+            <div id="a5" class="box black square">
                 <div class="top-corner">5</div>
             </div>
-            <div id="a4" class="box white">
+            <div id="a4" class="box white square">
                 <div class="top-corner">4</div>
             </div>
-            <div id="a3" class="box black">
+            <div id="a3" class="box black square">
                 <div class="top-corner">3</div>
             </div>
-            <div id="a2" class="box white">
+            <div id="a2" class="box white square">
                 <div class="top-corner">2</div>
             </div>
-            <div id="a1" class="box black">
+            <div id="a1" class="box black square">
                 <div class="top-corner">1</div>
                 <div class="bottom-corner">a</div>
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">b</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">c</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">d</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">e</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">f</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">g</div> 
             </div>
         </div>
         <div>
-            <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 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 class="bottom-corner">h</div> 
             </div>
         </div>
author	IgrisBRC <[email protected]>	2024-07-14 07:47:23 +0530
committer	IgrisBRC <[email protected]>	2024-07-14 07:47:23 +0530
commit	a734e0af70a14dc8d635ab988c82e1a2e0b49836 (patch)
tree	62b3023054d9fc7ba0a89cb0d0f4dbd27d7a9bc8 /public
parent	2b0cdea28c841040fd872b2b1837b1e0639d6df0 (diff)