🆕 Option to mute sound

Background ==== As an average player/debugger (and a fun of some live streamers), I want to play/debug the game while watching a YouTube live etc. Playing sound is a little annoying in such a usecase. Suggestion ==== Add an option to mute the sound of the game.
igrep · Apr 13, 2024 · 0aa6470 · 0aa6470
1 parent 3f3521f
commit 0aa6470
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/game/configuration/settings.ts b/src/game/configuration/settings.ts
@@ -9,6 +9,7 @@ export const collisionPointOnBallClass = "bba-collision-point-on-ball"
 export type StartOptions = {
   withScoreboard: boolean
   initialBallSpeed: "low" | "middle" | "high" | "superHigh"
+  sound: boolean
 }
 
 type BarSetting = {

diff --git a/src/game/start/standby.ts b/src/game/start/standby.ts
@@ -20,7 +20,7 @@ export function standby(
   scoreboard: Scoreboard | null,
   startOptions: StartOptions
 ) {
-  const ring = setSoundEffect()
+  const ring = startOptions.sound ? setSoundEffect() : () => {}
 
   window.addEventListener("mousemove", moveBarAndBall)
 

diff --git a/src/popup.tsx b/src/popup.tsx
@@ -18,6 +18,7 @@ function IndexPopup() {
   ) => {
     setInitialBallSpeed(e.target.value as StartOptions["initialBallSpeed"])
   }
+  const [sound, setSound] = useState(true)
 
   const sendMessageToIsolatedWorldOnActiveTab = () => {
     chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
@@ -27,7 +28,7 @@ function IndexPopup() {
       }
       chrome.tabs.sendMessage<StartMessage>(
         activeTab.id,
-        createStartMessage({ withScoreboard, initialBallSpeed })
+        createStartMessage({ withScoreboard, initialBallSpeed, sound })
       )
     })
   }
@@ -117,6 +118,25 @@ function IndexPopup() {
           Off
         </label>
       </div>
+      <div style={{ marginTop: "16px" }}>
+        Sound {sound ? "🔊" : "🔇"}<br />
+        <label>
+          <input
+            type="radio"
+            checked={sound}
+            onChange={(e) => setSound(e.target.checked)}
+          />
+          On
+        </label>
+        <label>
+          <input
+            type="radio"
+            checked={!sound}
+            onChange={(e) => setSound(!e.target.checked)}
+          />
+          Off
+        </label>
+      </div>
       <br />
       {process.env.NODE_ENV === "development" ? (
         <button onClick={sendMessageToIsolatedWorldOnActiveTabForTest}>