From 46f74b620110fca1ab6285eb81d47bb891422184 Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Tue, 2 Jul 2024 22:52:18 +0530 Subject: [PATCH 1/2] reference correction --- js/game.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/game.js b/js/game.js index db64f55..e394750 100644 --- a/js/game.js +++ b/js/game.js @@ -48,8 +48,7 @@ class Game { onPlayerWin() { this.isGameover = true - bgMusic.pause(); - let winSound = new Audio('./sounds/win.mp3'); + let winSound = new Audio('../assets/sounds/win.mp3'); winSound.play(); const player = this.players.reduce((prev, current) => { From 9a79c86042e5eff0ba15ca95b2595e5b1d1fd561 Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Wed, 3 Jul 2024 00:28:42 +0530 Subject: [PATCH 2/2] added --- js/game.js | 33 ++++++++++++++------------- pages/game.html | 16 +++++++++---- styles/game.style.css | 52 +++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 79 insertions(+), 22 deletions(-) diff --git a/js/game.js b/js/game.js index e394750..2c81ebc 100644 --- a/js/game.js +++ b/js/game.js @@ -55,20 +55,21 @@ class Game { return prev.filledBoxes > current.filledBoxes ? prev : current }); - setTimeout(() => { - let play = this.players[0].filledBoxes - - //Check for winner - if (this.players.every((p) => p.filledBoxes == play)) { - this.playerNameUI.parentElement.textContent = "Nobody wins" - this.playerTurnBgUI.classList.add("no-win") - this.playerTurnBgUI.style.background = "#eaeaea" - } else { - this.playerNameUI.parentElement.textContent = `${player.name} wins` - this.playerTurnBgUI.classList.add("win") - this.playerTurnBgUI.style.background = player.color - } - }, 500); + let play = this.players[0].filledBoxes + + //Check for winner + if (this.players.every((p) => p.filledBoxes == play)) { + this.playerNameUI.parentElement.textContent = "Nobody wins" + this.playerTurnBgUI.classList.add("no-win") + this.playerTurnBgUI.style.background = "#eaeaea" + } else { + this.playerNameUI.parentElement.textContent = `${player.name} wins` + this.playerTurnBgUI.classList.add("win") + this.playerTurnBgUI.style.background = player.color + } + + // Open the win overlay + document.getElementById("win-overlay").style.height = "100%"; } onPlayerSwitch() { @@ -182,10 +183,10 @@ document.addEventListener("DOMContentLoaded", () => { soundToggleBtn.addEventListener("click", () => { if (bgMusic.paused) { bgMusic.play(); - soundToggleBtn.innerText = "Sound Off"; + soundToggleBtn.innerText = "Sound On"; } else { bgMusic.pause(); - soundToggleBtn.innerText = "Sound On"; + soundToggleBtn.innerText = "Sound Off"; } }); }); diff --git a/pages/game.html b/pages/game.html index 0919aa1..7d702d5 100644 --- a/pages/game.html +++ b/pages/game.html @@ -25,7 +25,7 @@ -
+
@@ -34,10 +34,18 @@
-
+
- - + + +
+ + +
+ Go Back to Home + Play Again +
+
diff --git a/styles/game.style.css b/styles/game.style.css index 266827f..991312d 100644 --- a/styles/game.style.css +++ b/styles/game.style.css @@ -13,6 +13,7 @@ body { display: grid; width: 60vh; max-height: 60vh; + margin-top: 154px; } @media screen and (max-width: 720px) { @@ -35,6 +36,7 @@ body { content: ""; width: 100%; height: 100%; + z-index: 1; left: 0; top: 0; animation: 800ms fillAnim 0s 1; @@ -149,6 +151,7 @@ body { display: flex; justify-content: center; gap: 1.2rem; + margin-top: 50px; } .player .filled-boxes { @@ -174,7 +177,6 @@ body { .player-turn { font-size: 1rem; - z-index: 10; position: absolute; top: 52px; left: 0; @@ -199,6 +201,7 @@ body { .player-turn .bg.win { animation: 1s pulseAnim 0s infinite; font-weight: bold; + z-index: 25; } .player-turn .name { @@ -218,4 +221,49 @@ body { to { transform: scale(1); } -} \ No newline at end of file +} + +/* The Overlay (background) */ +.overlay { + height: 0%; + width: 100%; + position: fixed; + z-index: 20; + top: 0; + left: 0; + background-color: #000000; + opacity: 90%; + overflow-y: hidden; + transition: 0.6s; + } + + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + + .overlay a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: whitesmoke; + display: block; + transition: 0.3s; + } + + .overlay a:hover, .overlay a:focus { + color: gold; + } + + @media screen and (max-height: 450px) { + .overlay {overflow-y: auto;} + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } + } \ No newline at end of file