added functionality dialogbox

NEET64 · Oct 20, 2023 · 3fb46a8 · 3fb46a8
1 parent eee54bb
commit 3fb46a8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,12 @@
     <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">
@@ -41,16 +47,7 @@
             </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"><i class="fa-solid fa-trophy fa-bounce" style="color: #ffd700;"></i> White Won</div>
-                    <div class="btns">
-                        <button class="playagain btn">Play Again</button>
-                        <button class="share btn" role="button">Share</button>
-                    </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/chess.js b/javascript/chess.js
@@ -145,23 +145,13 @@ cubes.forEach(element => {
 
 
 let close = document.querySelector(".close");
-let share = document.querySelector(".share");
-let playagain = document.querySelector(".playagain");
 
 close.addEventListener('click', function () {
     console.log("close");
-    location.reload();
+    let dialogbox = document.querySelector(".winnerDialog");
+    dialogbox.style.visibility = "hidden";
 });
 
-share.addEventListener('click', function () {
-    console.log("close");
-});
-
-playagain.addEventListener('click', function () {
-    console.log("close");
-});
-
-
 let play = document.querySelector(".play");
 
 play.addEventListener("click", function () {

diff --git a/javascript/piece.js b/javascript/piece.js
@@ -159,8 +159,7 @@ class Piece {
         if(board.isCheckmate()) {
             console.log(`checkmate!!! ${this.data.player.data.color} Wins`);
             let dialogbox = document.querySelector(".winnerDialog");
-            // dialogbox.classList.add("show");
-            // dialogbox.style.visibility = "visible";
+            dialogbox.style.visibility = "visible";
         }
     }
 

diff --git a/style.css b/style.css
@@ -120,12 +120,13 @@ body {
     width: 100%;
     background-color: rgba(0, 0, 0, 0.35);
     border-radius: 20px;
+    z-index: 10;
     visibility: hidden;
 }
 
-/* .dialogcontent {
+.dialogcontent {
     position: absolute;
-    height: 25vmin;
+    height: 20vmin;
     width: 45vmin;
     background-color: white;
     border-radius: 20px;
@@ -147,71 +148,6 @@ body {
     top: 5vmin;
 }
 
-.btns {
-    position: absolute;
-    bottom: 2.5vmin;
-    display: flex;
-    justify-content: space-evenly;
-    width: 100%;
-}
-
-.btn {
-    background-color: #1899D6;
-    border: solid transparent;
-    border-radius: 2vmin;
-    border-width: 0 0 4px;
-    box-sizing: border-box;
-    color: #FFFFFF;
-    cursor: pointer;
-    display: inline-block;
-    font-family: din-round,sans-serif;
-    font-size: 2vmin;
-    font-weight: 700;
-    letter-spacing: .8px;
-    margin: 0;
-    outline: none;
-    overflow: visible;
-    padding: 2vmin 3vmin;
-    text-align: center;
-    text-transform: uppercase;
-    touch-action: manipulation;
-    transform: translateZ(0);
-    transition: filter .2s;
-    user-select: none;
-    -webkit-user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-  
-  .btn:after {
-    background-clip: padding-box;
-    background-color: #1CB0F6;
-    border: solid transparent;
-    border-radius: 16px;
-    border-width: 0 0 4px;
-    bottom: -4px;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: -1;
-  }
-  
-  .btn:main,
-  .btn:focus {
-    user-select: auto;
-  }
-  
-  .btn:hover:not(:disabled) {
-    filter: brightness(1.1);
-  }
-  
-  .btn:active {
-    border-width: 4px 0 0;
-    background: none;
-  } */
-
 /*********************************/
 
 .info {