Audio music and sound

[clintjeff2]

I have implemented a comprehensive audio system for the 'Human vs Bots' game demo.

Key features include:

• Audio Manager: A new audio.js file houses the AudioManager class, which manages the Web Audio API lifecycle, separate gain nodes for a mixer effect (Master, Music, SFX), and asset loading.
• Game Integration: I mapped sound effects to essential game actions including unit selection (click), movement, attacks, unit production, and turn transitions.
• Music Management: The system automatically switches between menu music and battle music when a match starts or ends.
• Audio Controls UI: A new 'Audio Settings' section was added to the menu drawer, featuring independent volume sliders for Master, Music, and SFX, along with a Mute toggle.
• Persistence: User volume preferences are saved in localStorage and restored upon reloading the game.
• Policy Compliance: The audio context initializes only after the first user interaction (e.g., opening the menu or clicking the arena) to follow modern browser autoplay policies.

I verified the implementation using a Playwright script that confirmed the triggering of music and SFX events and captured a screenshot of the new UI.

---

Closes #25

[clintjeff2]

@leocagli , kindly review and merge.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[leocagli]

Hi @clintjeff2 — this conflicts with main after merging #29 (the Zemeroth cleanup removed some files this PR touches). Please rebase on the latest main and resolve; the audio additions themselves look fine. 👍

[leocagli]

Good work overall @clintjeff2 — the AudioManager structure is clean, the Web Audio API approach is correct, and the volume persistence + SFX event hooks are exactly what the issue asked for. One critical bug needs fixing before merge:

🚨 Critical: JSON.parse without try/catch crashes the whole game

In audio.js constructor:

// Current — will throw SyntaxError if localStorage has corrupted/legacy data
this.volumes = saved ? JSON.parse(saved) : { master: 0.8, music: 0.5, sfx: 0.7 };

If localStorage contains any corrupted or unexpected value (common on returning users after a code change), JSON.parse throws a SyntaxError. Because audioManager is exported at module level, the entire audio.js module fails to evaluate — and since game.js imports it, the whole game loads as a blank canvas with no interaction.

Fix (one line):

try {
  this.volumes = saved ? JSON.parse(saved) : { master: 0.8, music: 0.5, sfx: 0.7 };
} catch {
  this.volumes = { master: 0.8, music: 0.5, sfx: 0.7 };
}

Minor: misplaced import
The import of audio.js is added after two const declarations in game.js. Move it to line 1 to keep imports at the top (avoids issues with bundlers and linters).

Fix those two things and this is ready to merge. 🎵