From 8d5a4d2c0e937dcc2522e76f6114882a8925e71c Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Thu, 14 May 2026 12:59:55 -0700
Subject: [PATCH] =?UTF-8?q?Add=20music.mp3=20looping=20BGM=20on=20map,=20p?=
 =?UTF-8?q?ause=20during=20questions,=20=F0=9F=8E=B5/=F0=9F=94=87=20mute?=
 =?UTF-8?q?=20toggle=20in=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 game.js    | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 index.html |  1 +
 style.css  | 12 +++++++++++-
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/game.js b/game.js
index a4896cf..212cbd7 100644
--- a/game.js
+++ b/game.js
@@ -52,6 +52,45 @@ function saveGame(s) {
 function loadGame()  { try { const r=localStorage.getItem(SAVE_KEY); return r?JSON.parse(r):null; } catch(_){return null;} }
 function clearSave() { try { localStorage.removeItem(SAVE_KEY); } catch(_){} }
 
+/* ─── BACKGROUND MUSIC ───────────────────────────────────── */
+const Music = (() => {
+  let audio   = null;
+  let muted   = false;
+
+  function getAudio() {
+    if (!audio) {
+      audio        = new Audio('./music.mp3');
+      audio.loop   = true;
+      audio.volume = 0.5;
+    }
+    return audio;
+  }
+
+  function updateBtn() {
+    const btn = document.getElementById('music-toggle');
+    if (!btn) return;
+    btn.textContent = muted ? '🔇' : '🎵';
+    btn.classList.toggle('muted', muted);
+  }
+
+  return {
+    play() {
+      if (muted) return;
+      const a = getAudio();
+      if (a.paused) a.play().catch(() => {});
+    },
+    pause() {
+      if (audio) audio.pause();
+    },
+    toggle() {
+      muted = !muted;
+      updateBtn();
+      if (muted) Music.pause();
+      else       Music.play();
+    },
+  };
+})();
+
 /* ─── CHIPTUNE SOUND ENGINE ──────────────────────────────── */
 const SFX = (() => {
   let ctx = null;
@@ -740,12 +779,15 @@ class Game {
 
       this._placeMapSprites();
       this._updateDirArrow(false);
-      SFX.overworldStart();
+      Music.play();
       saveGame(this.state);
       this.flashSaveDot();
 
       const npcEl2 = document.getElementById('map-npc');
       if (npcEl2) npcEl2.onclick = ()=>this._talkToNPC();
+
+      const musicBtn = document.getElementById('music-toggle');
+      if (musicBtn) musicBtn.onclick = () => Music.toggle();
     });
   }
 
@@ -774,6 +816,7 @@ class Game {
 
     this.show('battle');
     this._showController(true);
+    Music.pause();
     this.state.answering=false;
     this.state.cursor=0;
 
diff --git a/index.html b/index.html
index 1f981f7..7b2d29c 100644
--- a/index.html
+++ b/index.html
@@ -94,6 +94,7 @@
         <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>
         <span class="prog-text" id="map-prog-text">0/100</span>
         <span class="save-dot" id="save-dot" title="Auto-saved">💾</span>
+        <span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
       </div>
     </div>
     <div class="overworld-bg map-world" id="map-world">
diff --git a/style.css b/style.css
index 656d021..fc2664f 100644
--- a/style.css
+++ b/style.css
@@ -397,7 +397,17 @@ html, body {
 .prog-bar-outer { width:80px; height:9px; background:var(--black); border:2px solid var(--lightgray); overflow:hidden; }
 .prog-bar-inner { height:100%; width:0%; background:var(--hp-green); transition:width .5s ease; }
 .prog-text  { font-size:6px; color:var(--white); }
-.save-dot   { font-size:12px; animation:blink 3s ease-in-out infinite; }
+.save-dot     { font-size:12px; animation:blink 3s ease-in-out infinite; }
+.music-toggle {
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity .2s;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  padding: 2px 4px;
+}
+.music-toggle.muted { opacity: .35; }
 
 .map-world  {
   position: relative;