added promotion

4 files changed, 122 insertions, 2 deletions

diff --git a/public/index.html b/public/index.html
index 13c6e49..7131784 100644
--- a/public/index.html
+++ b/public/index.html
@@ -98,6 +98,14 @@
             </div>
         </div>
         </div>    
+
+        <div id="promotion-window">
+            <div id="queen" class="piece-option">Q</div>
+            <div id="rook" class="piece-option">R</div>
+            <div id="bishop" class="piece-option">B</div>
+            <div id="knight" class="piece-option">N</div>
+        </div>
+
     <script rel="preconnect" src="move.js" crossorigin></script>
     <script rel="preconnect" src="sync_board.js" crossorigin></script>
     <script rel="preconnect" src="make_move.js" crossorigin></script>
diff --git a/public/make_move.js b/public/make_move.js
index d003f55..e480d14 100644
--- a/public/make_move.js
+++ b/public/make_move.js
@@ -33,7 +33,6 @@ function make_move(board, prev_y_x, new_y_x) {
             en_passant = prev_y_x[i][1]
         }
 
-
         board[new_y_x[i][0]][new_y_x[i][1]] = board[prev_y_x[i][0]][prev_y_x[i][1]]
     }
 
@@ -56,9 +55,98 @@ function make_move(board, prev_y_x, new_y_x) {
         board[prev_y_x[i][0]][prev_y_x[i][1]] = 0
     }
 
+    if (board[new_y_x[0][0]][new_y_x[0][1]] == 6 && new_y_x[0][0] == 0 || board[new_y_x[0][0]][new_y_x[0][1]] == -6 && new_y_x[0][0] == 7) {
+        let color = board[new_y_x[0][0]][new_y_x[0][1]] > 0
+        handle_promotion(color, new_y_x[0][0], new_y_x[0][1])
+    }
+
     check = check_check(board, to_move, check)
     if (check) {
         console.log("check")
     }
 }
 
+function handle_promotion(color, y, x) {
+    let promotion_window = document.getElementById('promotion-window')
+    promotion_window.style.visibility = "visible"
+
+    let queen_option = document.getElementById('queen')
+
+    queen_option.onclick = () => {
+        let promotion_piece = color ? 2 : -2
+        board[y][x] = promotion_piece
+        promotion_window.style.visibility = "hidden"
+
+        let to_element = document.getElementById(`${y}${x}`)
+        while (to_element.firstChild) {
+            to_element.removeChild(to_element.firstChild)
+        }
+
+        let piece = document.createElement('p')
+
+        piece.classList.add(promotion_piece > 0 ? 'w' : 'b', 'piece')
+        piece.append('Q')
+        to_element.append(piece)
+        return
+    }
+
+    let rook_option = document.getElementById('rook')
+
+    rook_option.onclick = () => {
+        let promotion_piece = color ? 3 : -3
+        board[y][x] = promotion_piece
+        promotion_window.style.visibility = "hidden"
+
+        let to_element = document.getElementById(`${y}${x}`)
+        while (to_element.firstChild) {
+            to_element.removeChild(to_element.firstChild)
+        }
+
+        let piece = document.createElement('p')
+
+        piece.classList.add(promotion_piece > 0 ? 'w' : 'b', 'piece')
+        piece.append('R')
+        to_element.append(piece)
+        return
+    }
+
+    let bishop_option = document.getElementById('bishop')
+
+    bishop_option.onclick = () => {
+        let promotion_piece = color ? 4 : -4
+        board[y][x] = promotion_piece
+        promotion_window.style.visibility = "hidden"
+
+        let to_element = document.getElementById(`${y}${x}`)
+        while (to_element.firstChild) {
+            to_element.removeChild(to_element.firstChild)
+        }
+
+        let piece = document.createElement('p')
+
+        piece.classList.add(promotion_piece > 0 ? 'w' : 'b', 'piece')
+        piece.append('B')
+        to_element.append(piece)
+        return
+    }
+
+    let knight_option = document.getElementById('knight')
+
+    knight_option.onclick = () => {
+        let promotion_piece = color ? 5 : -5
+        board[y][x] = promotion_piece
+        promotion_window.style.visibility = "hidden"
+
+        let to_element = document.getElementById(`${y}${x}`)
+        while (to_element.firstChild) {
+            to_element.removeChild(to_element.firstChild)
+        }
+
+        let piece = document.createElement('p')
+
+        piece.classList.add(promotion_piece > 0 ? 'w' : 'b', 'piece')
+        piece.append('N')
+        to_element.append(piece)
+        return
+    }
+}
diff --git a/public/move.js b/public/move.js
index d95f3f6..5b2ea58 100644
--- a/public/move.js
+++ b/public/move.js
@@ -23,7 +23,9 @@ let castle_black_long = true
 let en_passant = -1
 let en_passant_move = -1
 
-function check_check(board, to_move, check) {
+let promotion = 0
+
+function check_check(board, to_move) {
     let king_position = []
 
     if (!to_move) {
@@ -572,3 +574,5 @@ function amelia_move(board, y, x) {
     return moves
 }
 
+
+
diff --git a/public/style.css b/public/style.css
index 86510ea..f93bb32 100644
--- a/public/style.css
+++ b/public/style.css
@@ -9,6 +9,7 @@
     position: relative;
     user-select: none;
 }
+
 .top-corner{
     padding: 1px;
     position: absolute;
@@ -23,6 +24,7 @@
 .white{
     /*background-color: #eaead2;*/
     background-color: #EDD6B0;
+    /*background-color: #B88762;*/
     color: #4b7299;
 }
 
@@ -67,3 +69,21 @@ body{
 .b {
     color: black;
 }
+
+.piece-option {
+    font-size: 8rem;
+    height: 10rem;
+    width: 10rem;
+    text-align: center;
+}
+
+#promotion-window {
+    position: fixed;
+    height: 10rem;
+    width: 40rem;
+    background-color: white;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    visibility: hidden;
+}
+