Skip to content

Commit

Permalink
Merge pull request #451 from partha120804/backbutton
Browse files Browse the repository at this point in the history
Added a button to redirect to home after The game ends
  • Loading branch information
ayush-t02 authored Jul 3, 2024
2 parents f43f1d0 + 570fbe1 commit d423132
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 24 deletions.
36 changes: 18 additions & 18 deletions js/game.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,28 +48,28 @@ 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) => {
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() {
Expand Down Expand Up @@ -183,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";
}
});
});
Expand Down
21 changes: 17 additions & 4 deletions pages/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,19 @@
</head>

<body>
<!-- Players -->
<div class="players" style="margin-top: 50px"></div>

<!-- Players -->
<div class="players" ></div>

<div class="player-turn">
<div class="bg" style="margin-top: 60px">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="board" style="margin-top: 154px"></div>
<!-- Game Page -->
<div class="board"></div>

<button id="sound-toggle" style="
background-color: grey;
color: white;
Expand All @@ -50,6 +52,17 @@
">
Sound Off
</button>

<!-- Winner Overlay -->
<div id="win-overlay" class="overlay">

<!-- Overlay content -->
<div class="overlay-content">
<a href="../index.html">Go Back to Home</a>
<a href="../pages/game.html">Play Again</a>
</div>
</div>


<button style="
background-color: grey;
Expand Down
52 changes: 50 additions & 2 deletions styles/game.style.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ body {
display: grid;
width: 60vh;
max-height: 60vh;
margin-top: 154px;
}

@media screen and (max-width: 720px) {
Expand All @@ -35,6 +36,7 @@ body {
content: "";
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
animation: 800ms fillAnim 0s 1;
Expand Down Expand Up @@ -149,6 +151,7 @@ body {
display: flex;
justify-content: center;
gap: 1.2rem;
margin-top: 50px;
}

.player .filled-boxes {
Expand All @@ -174,7 +177,6 @@ body {

.player-turn {
font-size: 1rem;
z-index: 10;
position: absolute;
top: 52px;
left: 0;
Expand All @@ -199,6 +201,7 @@ body {
.player-turn .bg.win {
animation: 1s pulseAnim 0s infinite;
font-weight: bold;
z-index: 25;
}

.player-turn .name {
Expand All @@ -218,4 +221,49 @@ body {
to {
transform: scale(1);
}
}
}

/* 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;
}
}

0 comments on commit d423132

Please sign in to comment.