feat(audio): add sound effects toggle for keypresses and guess submissions

frontend/src/components/SettingsPanel.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useSettings } from "@/providers/settings-provider";
 
 export function SettingsPanel() {
-  const { colorBlindMode, setColorBlindMode } = useSettings();
+  const { colorBlindMode, setColorBlindMode, soundEffects, setSoundEffects } = useSettings();
   const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   const handleResetData = () => {
@@ -45,6 +45,31 @@ export function SettingsPanel() {
         </button>
       </div>
 
+      <div className="flex items-center justify-between">
+        <label
+          htmlFor="sound-toggle"
+          className="cursor-pointer select-none text-sm font-medium text-gray-300"
+        >
+          Sound effects
+        </label>
+        <button
+          id="sound-toggle"
+          role="switch"
+          aria-checked={soundEffects}
+          aria-label="Toggle sound effects"
+          onClick={() => setSoundEffects(!soundEffects)}
+          className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-white/60 ${
+            soundEffects ? "bg-[#4b5fff]" : "bg-dark-500"
+          }`}
+        >
+          <span
+            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+              soundEffects ? "translate-x-6" : "translate-x-1"
+            }`}
+          />
+        </button>
+      </div>
+
       <div className="border-t border-white/10 pt-3 flex flex-col gap-2">
         <span className="text-xs font-semibold uppercase tracking-wider text-gray-400">
           Data Management

frontend/src/providers/settings-provider.tsx

@@ -12,16 +12,19 @@ import {
 
 type GameSettings = {
   colorBlindMode: boolean;
+  soundEffects: boolean;
 };
 
 type SettingsContextValue = GameSettings & {
   setColorBlindMode: (enabled: boolean) => void;
+  setSoundEffects: (enabled: boolean) => void;
 };
 
 const STORAGE_KEY = "dewordle-settings";
 
 const defaults: GameSettings = {
   colorBlindMode: false,
+  soundEffects: false,
 };
 
 function loadSettings(): GameSettings {
@@ -62,12 +65,21 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
     });
   }, []);
 
+  const setSoundEffects = useCallback((enabled: boolean) => {
+    setSettings((prev) => {
+      const next = { ...prev, soundEffects: enabled };
+      persistSettings(next);
+      return next;
+    });
+  }, []);
+
   const value = useMemo(
     () => ({
       ...settings,
       setColorBlindMode,
+      setSoundEffects,
     }),
-    [settings, setColorBlindMode],
+    [settings, setColorBlindMode, setSoundEffects],
   );
 
   return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;

frontend/src/services/soundService.ts

@@ -0,0 +1,60 @@
+type SoundType = "keypress" | "submit" | "win";
+
+let audioContext: AudioContext | null = null;
+
+function getAudioContext(): AudioContext | null {
+  if (typeof window === "undefined") return null;
+  if (!audioContext) {
+    audioContext = new AudioContext();
+  }
+  return audioContext;
+}
+
+function playTone(frequency: number, duration: number, type: OscillatorType = "sine", volume: number = 0.3) {
+  const ctx = getAudioContext();
+  if (!ctx) return;
+
+  if (ctx.state === "suspended") {
+    ctx.resume();
+  }
+
+  const oscillator = ctx.createOscillator();
+  const gainNode = ctx.createGain();
+
+  oscillator.connect(gainNode);
+  gainNode.connect(ctx.destination);
+
+  oscillator.type = type;
+  oscillator.frequency.setValueAtTime(frequency, ctx.currentTime);
+
+  gainNode.gain.setValueAtTime(volume, ctx.currentTime);
+  gainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
+
+  oscillator.start(ctx.currentTime);
+  oscillator.stop(ctx.currentTime + duration);
+}
+
+const SOUND_CONFIGS: Record<SoundType, () => void> = {
+  keypress: () => playTone(440, 0.05, "square", 0.1),
+  submit: () => {
+    playTone(330, 0.1, "sine", 0.2);
+    setTimeout(() => playTone(440, 0.1, "sine", 0.2), 50);
+  },
+  win: () => {
+    playTone(523, 0.15, "sine", 0.3);
+    setTimeout(() => playTone(659, 0.15, "sine", 0.3), 100);
+    setTimeout(() => playTone(784, 0.2, "sine", 0.3), 200);
+  },
+};
+
+export function playSound(type: SoundType) {
+  try {
+    SOUND_CONFIGS[type]();
+  } catch {
+    // Audio context may not be available or user hasn't interacted yet
+  }
+}
+
+export function initAudioContext() {
+  getAudioContext();
+}