From 3fb46a8e3868c39b225853020d1bf302fca70c61 Mon Sep 17 00:00:00 2001 From: Neet Date: Sat, 21 Oct 2023 02:48:26 +0530 Subject: [PATCH] added functionality dialogbox --- index.html | 17 +++++------ javascript/chess.js | 14 ++------- javascript/piece.js | 3 +- style.css | 70 ++------------------------------------------- 4 files changed, 13 insertions(+), 91 deletions(-) diff --git a/index.html b/index.html index c0541ac..3d910af 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,12 @@ +
+
+
+
White Won
+
+
@@ -41,16 +47,7 @@
-
-
-
-
White Won
-
- - -
-
-
+
diff --git a/javascript/chess.js b/javascript/chess.js index 0898e16..41f927a 100644 --- 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 index f212eeb..22de74b 100644 --- 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 index 8803b33..331ca49 100644 --- 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 {