diff --git a/js/board.js b/js/board.js index fa3d2d7..4ec8282 100644 --- 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 index c01aaa7..1c1171a 100644 --- 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 index 461fbbe..01496f7 100644 --- 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 @@
+