From e6ffc796108ab8712472f6c30167b221a8f15420 Mon Sep 17 00:00:00 2001
From: Partha Das <138643473+partha120804@users.noreply.github.com>
Date: Sat, 20 Jul 2024 21:27:40 +0530
Subject: [PATCH] Placed the music button with a check box option in the
 general settings (#367)

* placed the music button with a check box option

* fix

* fixed

* added bottom border
---
 css/style.css |  3 +++
 index.html    | 19 ++++++++++---------
 js/app.js     |  1 +
 js/music.js   | 13 +++++--------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7660be6..7a7443d 100644
--- a/css/style.css
+++ b/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;
diff --git a/index.html b/index.html
index 17b3a9f..b6b3785 100644
--- a/index.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index d411651..b8c24e3 100644
--- a/js/app.js
+++ b/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);
diff --git a/js/music.js b/js/music.js
index a7bb157..a0a70ad 100644
--- a/js/music.js
+++ b/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;
+    }
\ No newline at end of file