Add sound mute toggle with persistent preference

- Mute/unmute button visible on menu and during gameplay
- Saves preference to localStorage
- All audio functions respect muted state

Author: rgilks

src/client/audio.ts

@@ -4,8 +4,20 @@
  */
 
 let ctx: AudioContext | null = null;
+let muted = false;
 
-function getCtx(): AudioContext {
+export function isMuted(): boolean {
+  return muted;
+}
+
+export function setMuted(m: boolean) {
+  muted = m;
+  // Persist preference
+  try { localStorage.setItem('delta-v-mute', m ? '1' : '0'); } catch {}
+}
+
+function getCtx(): AudioContext | null {
+  if (muted) return null;
   if (!ctx) {
     ctx = new AudioContext();
   }
@@ -14,6 +26,12 @@ function getCtx(): AudioContext {
 
 /** Resume audio context after user gesture (required by browsers). */
 export function initAudio() {
+  // Load saved mute preference
+  try {
+    const saved = localStorage.getItem('delta-v-mute');
+    if (saved === '1') muted = true;
+  } catch {}
+
   const resume = () => {
     if (ctx?.state === 'suspended') {
       ctx.resume();
@@ -28,6 +46,7 @@ export function initAudio() {
 /** Short blip for UI interactions (button clicks, selections). */
 export function playSelect() {
   const ac = getCtx();
+  if (!ac) return;
   const osc = ac.createOscillator();
   const gain = ac.createGain();
   osc.connect(gain);
@@ -44,6 +63,7 @@ export function playSelect() {
 /** Confirm/submit sound — ascending tone. */
 export function playConfirm() {
   const ac = getCtx();
+  if (!ac) return;
   const osc = ac.createOscillator();
   const gain = ac.createGain();
   osc.connect(gain);
@@ -60,6 +80,7 @@ export function playConfirm() {
 /** Thruster sound for movement. */
 export function playThrust() {
   const ac = getCtx();
+  if (!ac) return;
   const bufSize = ac.sampleRate * 0.3;
   const buf = ac.createBuffer(1, bufSize, ac.sampleRate);
   const data = buf.getChannelData(0);
@@ -84,6 +105,7 @@ export function playThrust() {
 /** Laser/beam sound for combat. */
 export function playCombat() {
   const ac = getCtx();
+  if (!ac) return;
   const osc = ac.createOscillator();
   const gain = ac.createGain();
   osc.connect(gain);
@@ -100,6 +122,7 @@ export function playCombat() {
 /** Explosion sound for ship destruction or detonation. */
 export function playExplosion() {
   const ac = getCtx();
+  if (!ac) return;
   const bufSize = ac.sampleRate * 0.5;
   const buf = ac.createBuffer(1, bufSize, ac.sampleRate);
   const data = buf.getChannelData(0);
@@ -124,6 +147,7 @@ export function playExplosion() {
 /** Alert tone for phase changes. */
 export function playPhaseChange() {
   const ac = getCtx();
+  if (!ac) return;
   const osc = ac.createOscillator();
   const gain = ac.createGain();
   osc.connect(gain);
@@ -150,6 +174,7 @@ export function playPhaseChange() {
 /** Victory fanfare. */
 export function playVictory() {
   const ac = getCtx();
+  if (!ac) return;
   const notes = [523, 659, 784, 1047]; // C5, E5, G5, C6
   notes.forEach((freq, i) => {
     const osc = ac.createOscillator();
@@ -169,6 +194,7 @@ export function playVictory() {
 /** Defeat sound. */
 export function playDefeat() {
   const ac = getCtx();
+  if (!ac) return;
   const notes = [400, 350, 300, 200]; // Descending
   notes.forEach((freq, i) => {
     const osc = ac.createOscillator();

src/client/main.ts

@@ -8,7 +8,7 @@ import { aiAstrogation, aiOrdnance, aiCombat, type AIDifficulty } from '../share
 import { Renderer, HEX_SIZE } from './renderer';
 import { InputHandler } from './input';
 import { UIManager } from './ui';
-import { initAudio, playSelect, playConfirm, playThrust, playCombat, playExplosion, playPhaseChange, playVictory, playDefeat } from './audio';
+import { initAudio, playSelect, playConfirm, playThrust, playCombat, playExplosion, playPhaseChange, playVictory, playDefeat, isMuted, setMuted } from './audio';
 
 type ClientState =
   | 'menu'
@@ -141,6 +141,14 @@ class GameClient {
     document.getElementById('helpCloseBtn')!.addEventListener('click', () => this.toggleHelp());
     document.getElementById('helpBtn')!.addEventListener('click', () => this.toggleHelp());
 
+    // Sound toggle
+    const soundBtn = document.getElementById('soundBtn')!;
+    this.updateSoundButton();
+    soundBtn.addEventListener('click', () => {
+      setMuted(!isMuted());
+      this.updateSoundButton();
+    });
+
     // Ship hover tooltip
     this.canvas.addEventListener('mousemove', (e) => this.updateTooltip(e.clientX, e.clientY));
     this.canvas.addEventListener('mouseleave', () => { this.tooltipEl.style.display = 'none'; });
@@ -955,6 +963,13 @@ class GameClient {
     helpOverlay.style.display = helpOverlay.style.display === 'none' ? 'flex' : 'none';
   }
 
+  private updateSoundButton() {
+    const btn = document.getElementById('soundBtn')!;
+    const m = isMuted();
+    btn.textContent = m ? '🔇' : '🔊';
+    btn.classList.toggle('muted', m);
+  }
+
   private logLandings(movements: ShipMovement[]) {
     if (!this.gameState) return;
     for (const m of movements) {

src/client/ui.ts

@@ -146,12 +146,14 @@ export class UIManager {
     this.gameLogEl.style.display = 'none';
     this.logShowBtn.style.display = 'none';
     document.getElementById('helpBtn')!.style.display = 'none';
+    document.getElementById('soundBtn')!.style.display = 'none';
     document.getElementById('helpOverlay')!.style.display = 'none';
   }
 
   showMenu() {
     this.hideAll();
     this.menuEl.style.display = 'flex';
+    document.getElementById('soundBtn')!.style.display = 'flex';
     // Reset state
     document.getElementById('difficultySelect')!.style.display = 'none';
     this.pendingAIGame = false;
@@ -181,6 +183,7 @@ export class UIManager {
     this.hudEl.style.display = 'block';
     this.shipListEl.style.display = 'flex';
     document.getElementById('helpBtn')!.style.display = 'flex';
+    document.getElementById('soundBtn')!.style.display = 'flex';
     if (this.logVisible) {
       this.gameLogEl.style.display = 'flex';
     } else {

static/index.html

@@ -141,6 +141,8 @@ <h3>Combat</h3>
 
   <!-- Help button -->
   <button id="helpBtn" class="help-btn" style="display:none">?</button>
+  <!-- Sound toggle button -->
+  <button id="soundBtn" class="sound-btn" style="display:none" title="Toggle sound"></button>
 
   <!-- Ship tooltip -->
   <div id="shipTooltip" class="ship-tooltip" style="display:none"></div>

static/style.css

@@ -597,6 +597,36 @@ body {
   color: #ccc;
 }
 
+.sound-btn {
+  position: fixed;
+  bottom: 6.5rem;
+  right: 0.5rem;
+  z-index: 5;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(10, 10, 26, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #888;
+  font-family: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sound-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ccc;
+}
+
+.sound-btn.muted {
+  color: #ff5252;
+  border-color: rgba(255, 82, 82, 0.3);
+}
+
 /* Game Over */
 #gameOver h2 {
   font-size: 2rem;