Merge pull request #539 from VijaySamant4368/sound

Sound button added
ChromeGaming · Jul 21, 2024 · e972f29 · e972f29
2 parents 873b850 + a63199d
commit e972f29
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 10 deletions.
diff --git a/js/board.js b/js/board.js
@@ -1,3 +1,5 @@
+sound = false
+
 class Board {
 	static ROWS; //number of rows
 	static COLUMNS; //number of columns
@@ -50,8 +52,14 @@ class Board {
 	//
 	addEdgeClickEventListener() {
 		this.uiRoot.addEventListener("click", (e) => {
-			let click = new Audio("../assets/sounds/click.mp3");
-			click.play();
+
+			let click = new Audio('../assets/sounds/click.mp3');
+			if (sound)
+				//If sound is true, it means the sound is currently on
+			{
+				click.play();
+			}
+
 			if (!this.isFillingAdjacentBoxes) {
 				if (e.target.classList.contains("edge")) {
 					let edgePosition = e.target.getAttribute("data-position");
@@ -206,8 +214,14 @@ class Board {
 	}
 
 	fillBoxes() {
-		let fill = new Audio("../assets/sounds/fill.mp3");
-		fill.play();
+
+		let fill = new Audio('../assets/sounds/fill.mp3');
+		if (sound)
+			//If sound is true, it means the sound is currently on
+		{
+			fill.play();
+		}	
+
 		if (this.adjacentBoxesToFill.length != 0) {
 			setTimeout(() => {
 				const box = this.adjacentBoxesToFill.shift();
@@ -223,3 +237,16 @@ class Board {
 		}
 	}
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+	const soundToggleBtn = document.getElementById("sound-toggle");
+	soundToggleBtn.addEventListener("click", () => {
+		if (soundToggleBtn.innerText === "Sound Off") {
+			soundToggleBtn.innerText = "Sound On";
+			sound = true
+		} else {
+			soundToggleBtn.innerText = "Sound Off";
+			sound = false
+		}
+	});
+});
diff --git a/js/game.js b/js/game.js
@@ -192,14 +192,14 @@ document.addEventListener("DOMContentLoaded", () => {
 	const video = document.getElementById("myVideo");
 	video.src = `/assets/videos/${storedTheme}.mp4`;
 
-	const soundToggleBtn = document.getElementById("sound-toggle");
-	soundToggleBtn.addEventListener("click", () => {
+	const musicToggleBtn = document.getElementById("music-toggle");
+	musicToggleBtn.addEventListener("click", () => {
 		if (bgMusic.paused) {
 			bgMusic.play();
-			soundToggleBtn.innerText = "Sound On";
+			musicToggleBtn.innerText = "Music On";
 		} else {
 			bgMusic.pause();
-			soundToggleBtn.innerText = "Sound Off";
+			musicToggleBtn.innerText = "Music Off";
 		}
 	});
 });

diff --git a/pages/game.html b/pages/game.html
@@ -47,7 +47,13 @@
             transition: background-color 0.3s ease;
         }
 
-        .button-container #sound-toggle {
+        .button-container #sound-toggle{
+            background-color: rgb(12, 1, 1);
+            border-radius: 4px;
+            padding: 10px 20px;
+        }
+
+        .button-container #music-toggle{
             background-color: rgb(12, 1, 1);
             border-radius: 4px;
             padding: 10px 20px;
@@ -68,7 +74,11 @@
             background-color: rgb(69, 133, 254);
         }
 
-        .button-container #sound-toggle:hover {
+        .button-container #sound-toggle:hover  {
+            background-color: rgb(21, 39, 77);
+        }
+
+        .button-container #music-toggle:hover  {
             background-color: rgb(21, 39, 77);
         }
 
@@ -199,6 +209,7 @@
 
     <div class="button-container">
         <button id="sound-toggle" title="Toggle Sound">Sound Off</button>
+        <button id="music-toggle" title="Toggle Music">Music Off</button>
 
         <a href="../pages/game.html" id="reset-button" title="Reset Game">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">