Merge pull request #736 from hars-21/overlay

Win Overlay updated

js/game.js

@@ -96,9 +96,6 @@ class Game {
 		this.removeEventListener("boxFill");
 		clearInterval(this.timer); // Stop the timer
 
-		let winSound = new Audio("../assets/sounds/win.mp3");
-		winSound.play();
-
 		// Determine winner or draw
 		const winner = this.determineWinner(this.players);
 
@@ -112,17 +109,33 @@ class Game {
 			this.playerTurnBgUI.classList.add("win");
 			this.playerTurnBgUI.style.background = winner.color;
 		}
-
+    
 		// Storing winner data for leaderboard
 		const playerData = JSON.parse(localStorage.getItem("playerData"));
 		const player = playerData.find((player) => player.name === winner.name);
 		const playerIndex = playerData.indexOf(player);
 		playerData[playerIndex].score = winner.filledBoxes;
 		playerData[playerIndex].winner = true;
 		localStorage.setItem("winnerData", JSON.stringify(playerData));
+
+    // Winning Sound effect
+		let winSound = new Audio("../assets/sounds/win.mp3");
+		winSound.play();
 
 		// Open the win overlay
 		document.getElementById("win-overlay").style.height = "100%";
+
+		for (let i = 0; i < 10; i++) {
+			setTimeout(() => {
+				const pop = new Audio("../assets/sounds/pop.mp3");
+				pop.play();
+				confetti({
+					particleCount: 200,
+					spread: 100,
+					origin: { y: 0.6 },
+				});
+			}, i * 1000);
+		}
 	}
 
 	determineWinner(players) {

pages/game.html

@@ -251,5 +251,6 @@ <h3>Step 7</h3>
 				</div>
 			</div>
 		</div>
+		<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.confetti.bundle.min.js"></script>
 	</body>
 </html>

styles/game.style.css

@@ -831,6 +831,7 @@ body {
 	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 	width: 17rem;
 	cursor: move;
+	z-index: 89;
 }
 
 .scoreboard-container h2 {