added disapering menu

NEET64 · Oct 21, 2023 · 1df08fb · 1df08fb
1 parent 3fb46a8
commit 1df08fb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -8,12 +8,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
-    <div class="winnerDialog">
-        <div class="dialogcontent">
-            <div class="close"><i class="fa-solid fa-xmark"></i></div>
-            <div class="winner"><i class="fa-solid fa-trophy fa-bounce" style="color: #ffd700;"></i> White Won</div>
-        </div>
-    </div>
     <div class="game">
         <div class="right-section">
             <div class="game-menu">
@@ -47,7 +41,12 @@
             </div>
         </div>
         <div class="chess">     
-
+            <div class="winnerDialog">
+                <div class="dialogcontent">
+                    <div class="close"><i class="fa-solid fa-xmark"></i></div>
+                    <div class="winner"></div>
+                </div>
+            </div>
             <div class="info" id="black">
                 <div class="player-image">
                     <div class="profile"><i class="fa-solid fa-user"></i></div>

diff --git a/javascript/board.js b/javascript/board.js
@@ -30,7 +30,7 @@ class Board {
         }
     }
 
-    setPiecesDefault() {
+    setPiecesDefault(callback) {
         const board = this;
         const game = this.game;
         const players = game.data.players;
@@ -44,7 +44,21 @@ class Board {
             square.data.div.appendChild(piece.data.image);
         }
 
-        players.forEach((player) => player.data.pieces.forEach(set))
+        players.forEach((player) => player.data.pieces.forEach(set));
+
+        if(game.data.players[0].isComputer) {
+            let board = this;
+
+            setTimeout(() => {
+                let fen = board.getFEN();
+                getStockfishMove(fen, function (suggestedMove) {
+                    let piece = board.getSquare(suggestedMove.charAt(0), suggestedMove.charAt(1)).piece;
+                    let coords = board.getCoordinates(suggestedMove.charAt(2), suggestedMove.charAt(3));
+
+                    piece.move(coords, true);
+                });
+            }, 2000);
+        }
     }
 
     getSquare(letter, number) {

diff --git a/javascript/chess.js b/javascript/chess.js
@@ -73,14 +73,16 @@ class Chess {
 
         if(this.data.turn.isComputer) {
             let board = this.data.board;
-            let data = board.data;
-            let fen = board.getFEN();
-            getStockfishMove(fen, function(suggestedMove) {
+
+            setTimeout(() => {
+                let fen = board.getFEN();
+                getStockfishMove(fen, function (suggestedMove) {
                     let piece = board.getSquare(suggestedMove.charAt(0), suggestedMove.charAt(1)).piece;
                     let coords = board.getCoordinates(suggestedMove.charAt(2), suggestedMove.charAt(3));
-
+        
                     piece.move(coords, true);
-              });
+                });
+            }, 500);
         }
     }
 }
@@ -150,6 +152,7 @@ close.addEventListener('click', function () {
     console.log("close");
     let dialogbox = document.querySelector(".winnerDialog");
     dialogbox.style.visibility = "hidden";
+    document.querySelector(".right-section").style.display = "block";
 });
 
 let play = document.querySelector(".play");
@@ -170,6 +173,7 @@ play.addEventListener("click", function () {
             p1.isComputer = true;
         }
     }
+    document.querySelector(".right-section").style.display = "none";
     chessboard.innerHTML = "";
     Game = new Chess(p1, p2);
     Game.init(function () {

diff --git a/javascript/piece.js b/javascript/piece.js
@@ -159,6 +159,8 @@ class Piece {
         if(board.isCheckmate()) {
             console.log(`checkmate!!! ${this.data.player.data.color} Wins`);
             let dialogbox = document.querySelector(".winnerDialog");
+
+            document.querySelector(".winnerDialog .winner").innerHTML = `<i class="fa-solid fa-trophy fa-bounce" style="color: #ffd700;"></i> ${this.data.player.data.color.toUpperCase()} Won`;
             dialogbox.style.visibility = "visible";
         }
     }

diff --git a/style.css b/style.css
@@ -119,7 +119,6 @@ body {
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.35);
-    border-radius: 20px;
     z-index: 10;
     visibility: hidden;
 }
@@ -382,7 +381,7 @@ body {
         font-size: .8rem;
     }
     .game {
-        height: 70vmin;
+        height: 85vmin;
         width: auto;
         aspect-ratio: 4 / 3;
     }