Placed the music button with a check box option in the general settin…

…gs (#367)

* placed the music button with a check box option

* fix

* fixed

* added bottom border

css/style.css

@@ -427,6 +427,9 @@ body {
   outline: none;
   transition: color 0.3s ease;
 }
+.other-settings-container div{
+  border-bottom: 4px solid var(--border-color1);
+}
 .game-rules {
   padding: 0rem 0.5rem 0rem 1.6rem;
   text-decoration: none;

index.html

@@ -328,9 +328,16 @@
               class="warp-checkbox"
               onclick="toggleWarp()"
             />
-            <label for="warp-on-edges" style="cursor: pointer" class="hov"
-              >Warp on Edges</label
-            >
+            <label for="warp-on-edges" style="cursor: pointer" class="hov">Warp on Edges</label>
+          </div>
+          <div class="music-toggle-button">
+            <input
+              type="checkbox"
+              id="music-toggle"
+              class="music-checkbox"
+              onclick="toggleMusic()"
+            />
+            <label for="music-toggle" style="cursor: pointer" class="hov">Music</label>
           </div>
           <p class="randomness-container">
             <label class="randomness-value" style="cursor: pointer"
@@ -735,12 +742,6 @@
             >
             <i class="fa-solid fa-question-circle"></i> FAQ
             </button>
-          <div>
-            <button class="toggle-button" onclick="toggleMusic()">
-              <i class="fa-solid fa-volume-xmark"></i>
-              <span class="music-text">Music Off</span>
-            </button>
-          </div>
         </div>
       </div>
     </div>

js/app.js

@@ -464,6 +464,7 @@ function toggleWarp() {
 
 function toggleGrid() {
   isGridVisible = !isGridVisible;
+  document.getElementById("grid-toggle").checked = isGridVisible;
   var root = document.documentElement;
   // Get the computed styles of the root element
   var style = getComputedStyle(root);

js/music.js

@@ -1,15 +1,12 @@
   const bgMusic = document.getElementById('bg-music');
-    let musicOn = true;
+    let music = false;
 
     function toggleMusic() {
-      if (musicOn) {
+      if (music) {
         bgMusic.pause();
-        document.querySelector('.music-text').textContent = 'Music Off'; // Change button text
-        document.querySelector('.toggle-button i').className = 'fa-solid fa-volume-xmark';
       } else {
         bgMusic.play();
-        document.querySelector('.music-text').textContent = 'Music On'; // Change button text
-        document.querySelector('.toggle-button i').className = 'fa-solid fa-volume-high'; 
       }
-      musicOn = !musicOn; 
-    }
+      music = !music;
+      document.getElementById("music-toggle").checked = music;
+    }