Implement FX sound effects

src/client/ClientGameRunner.ts

@@ -50,7 +50,7 @@ import {
 import { createCanvas } from "./Utils";
 import { createRenderer, GameRenderer } from "./graphics/GameRenderer";
 import { GoToPlayerEvent } from "./graphics/layers/Leaderboard";
-import SoundManager from "./sound/SoundManager";
+import { SoundManager } from "./sound/SoundManager";
 
 export interface LobbyConfig {
   serverConfig: ServerConfig;
@@ -202,8 +202,12 @@ export function joinLobby(
         return false;
       }
       console.log("leaving game");
-      currentGameRunner = null;
-      transport.leaveGame();
+      if (currentGameRunner) {
+        currentGameRunner.stop();
+        currentGameRunner = null;
+      } else {
+        transport.leaveGame();
+      }
       return true;
     },
     prestart: prestartPromise,
@@ -253,22 +257,29 @@ async function createClientGame(
   );
 
   const canvas = createCanvas();
-  const gameRenderer = createRenderer(canvas, gameView, eventBus);
+  const soundManager = new SoundManager(eventBus, userSettings);
+  try {
+    const gameRenderer = createRenderer(canvas, gameView, eventBus);
 
-  console.log(
-    `creating private game got difficulty: ${lobbyConfig.gameStartInfo.config.difficulty}`,
-  );
+    console.log(
+      `creating private game got difficulty: ${lobbyConfig.gameStartInfo.config.difficulty}`,
+    );
 
-  return new ClientGameRunner(
-    lobbyConfig,
-    clientID,
-    eventBus,
-    gameRenderer,
-    new InputHandler(gameRenderer.uiState, canvas, eventBus),
-    transport,
-    worker,
-    gameView,
-  );
+    return new ClientGameRunner(
+      lobbyConfig,
+      clientID,
+      eventBus,
+      gameRenderer,
+      new InputHandler(gameRenderer.uiState, canvas, eventBus),
+      transport,
+      worker,
+      gameView,
+      soundManager,
+    );
+  } catch (err) {
+    soundManager.dispose();
+    throw err;
+  }
 }
 
 export class ClientGameRunner {
@@ -294,6 +305,7 @@ export class ClientGameRunner {
     private transport: Transport,
     private worker: WorkerClient,
     private gameView: GameView,
+    private soundManager: SoundManager,
   ) {
     this.lastMessageTime = Date.now();
   }
@@ -346,7 +358,7 @@ export class ClientGameRunner {
   }
 
   public start() {
-    SoundManager.playBackgroundMusic();
+    this.soundManager.playBackgroundMusic();
     console.log("starting client game");
 
     this.isActive = true;
@@ -524,7 +536,7 @@ export class ClientGameRunner {
   }
 
   public stop() {
-    SoundManager.stopBackgroundMusic();
+    this.soundManager.dispose();
     if (!this.isActive) return;
 
     this.isActive = false;

src/client/graphics/layers/EventsDisplay.ts

@@ -36,6 +36,7 @@ import { onlyImages } from "../../../core/Util";
 import { renderNumber } from "../../Utils";
 import { GoToPlayerEvent, GoToUnitEvent } from "./Leaderboard";
 
+import { PlaySoundEffectEvent } from "../../sound/Sounds";
 import { getMessageTypeClasses, translateText } from "../../Utils";
 import { UIState } from "../UIState";
 const allianceIcon = assetUrl("images/AllianceIconWhite.svg");
@@ -444,6 +445,7 @@ export class EventsDisplay extends LitElement implements Layer {
       type: MessageType.CHAT,
       unsafeDescription: false,
     });
+    this.eventBus.emit(new PlaySoundEffectEvent("message"));
   }
 
   onAllianceRequestEvent(update: AllianceRequestUpdate) {
@@ -459,6 +461,9 @@ export class EventsDisplay extends LitElement implements Layer {
       update.recipientID,
     ) as PlayerView;
 
+    if (!requestor.isAlliedWith(recipient)) {
+      this.eventBus.emit(new PlaySoundEffectEvent("alliance-suggested"));
+    }
     this.addEvent({
       description: translateText("events_display.request_alliance", {
         name: requestor.displayName(),
@@ -554,6 +559,7 @@ export class EventsDisplay extends LitElement implements Layer {
     if (betrayed.isDisconnected()) return; // Do not send the message if betraying a disconnected player
 
     if (!betrayed.isTraitor() && traitor === myPlayer) {
+      this.eventBus.emit(new PlaySoundEffectEvent("alliance-broken"));
       const malusPercent = Math.round(
         (1 - this.game.config().traitorDefenseDebuff()) * 100,
       );
@@ -580,6 +586,7 @@ export class EventsDisplay extends LitElement implements Layer {
         focusID: update.betrayedID,
       });
     } else if (betrayed === myPlayer) {
+      this.eventBus.emit(new PlaySoundEffectEvent("alliance-broken"));
       const buttons = [
         {
           text: translateText("events_display.focus"),

src/client/graphics/layers/FxLayer.ts

@@ -4,7 +4,7 @@ import { UnitType } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { ConquestUpdate, GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView, UnitView } from "../../../core/game/GameView";
-import SoundManager, { SoundEffect } from "../../sound/SoundManager";
+import { PlaySoundEffectEvent } from "../../sound/Sounds";
 import { AnimatedSpriteLoader } from "../AnimatedSpriteLoader";
 import { conquestFxFactory } from "../fx/ConquestFx";
 import { Fx, FxType } from "../fx/Fx";
@@ -26,6 +26,7 @@ export class FxLayer implements Layer {
 
   private allFx: Fx[] = [];
   private hasBufferedFrame = false;
+  private constructionState: Map<number, boolean> = new Map();
 
   constructor(
     private game: GameView,
@@ -39,10 +40,11 @@ export class FxLayer implements Layer {
     return true;
   }
 
+  private fxEnabled(): boolean {
+    return this.game.config().userSettings()?.fxLayer() ?? true;
+  }
+
   tick() {
-    if (!this.game.config().userSettings()?.fxLayer()) {
-      return;
-    }
     this.game
       .updatesSinceLastTick()
       ?.[GameUpdateType.Unit]?.map((unit) => this.game.unit(unit.id))
@@ -59,6 +61,11 @@ export class FxLayer implements Layer {
   }
 
   onUnitEvent(unit: UnitView) {
+    // Detect unit creation (launches, warship built)
+    if (unit.isActive() && unit.createdAt() === this.game.ticks()) {
+      this.onUnitCreated(unit);
+    }
+
     switch (unit.type()) {
       case UnitType.AtomBomb: {
         this.onNukeEvent(unit, 70);
@@ -91,9 +98,28 @@ export class FxLayer implements Layer {
     }
   }
 
+  onUnitCreated(unit: UnitView) {
+    switch (unit.type()) {
+      case UnitType.AtomBomb:
+        this.eventBus.emit(new PlaySoundEffectEvent("atom-launch"));
+        break;
+      case UnitType.HydrogenBomb:
+        this.eventBus.emit(new PlaySoundEffectEvent("hydrogen-launch"));
+        break;
+      case UnitType.MIRV:
+        this.eventBus.emit(new PlaySoundEffectEvent("mirv-launch"));
+        break;
+      case UnitType.Warship:
+        if (unit.owner() === this.game.myPlayer()) {
+          this.eventBus.emit(new PlaySoundEffectEvent("build-warship"));
+        }
+        break;
+    }
+  }
+
   onShellEvent(unit: UnitView) {
     if (!unit.isActive()) {
-      if (unit.reachedTarget()) {
+      if (unit.reachedTarget() && this.fxEnabled()) {
         const x = this.game.x(unit.lastTile());
         const y = this.game.y(unit.lastTile());
         const explosion = new SpriteFx(
@@ -109,7 +135,7 @@ export class FxLayer implements Layer {
 
   onTrainEvent(unit: UnitView) {
     if (!unit.isActive()) {
-      if (!unit.reachedTarget()) {
+      if (!unit.reachedTarget() && this.fxEnabled()) {
         const x = this.game.x(unit.lastTile());
         const y = this.game.y(unit.lastTile());
         const explosion = new SpriteFx(
@@ -124,6 +150,7 @@ export class FxLayer implements Layer {
   }
 
   onRailroadEvent(tile: TileRef) {
+    if (!this.fxEnabled()) return;
     // No need for pseudorandom, this is fx
     const chanceFx = Math.floor(Math.random() * 3);
     if (chanceFx === 0) {
@@ -146,15 +173,17 @@ export class FxLayer implements Layer {
       return;
     }
 
-    SoundManager.playSoundEffect(SoundEffect.KaChing);
+    this.eventBus.emit(new PlaySoundEffectEvent("ka-ching"));
 
-    this.allFx.push(
-      conquestFxFactory(this.animatedSpriteLoader, conquest, this.game),
-    );
+    if (this.fxEnabled()) {
+      this.allFx.push(
+        conquestFxFactory(this.animatedSpriteLoader, conquest, this.game),
+      );
+    }
   }
 
   onWarshipEvent(unit: UnitView) {
-    if (!unit.isActive()) {
+    if (!unit.isActive() && this.fxEnabled()) {
       const x = this.game.x(unit.lastTile());
       const y = this.game.y(unit.lastTile());
       const shipExplosion = new UnitExplosionFx(
@@ -179,15 +208,43 @@ export class FxLayer implements Layer {
 
   onStructureEvent(unit: UnitView) {
     if (!unit.isActive()) {
-      const x = this.game.x(unit.lastTile());
-      const y = this.game.y(unit.lastTile());
-      const explosion = new SpriteFx(
-        this.animatedSpriteLoader,
-        x,
-        y,
-        FxType.BuildingExplosion,
-      );
-      this.allFx.push(explosion);
+      if (this.fxEnabled()) {
+        const x = this.game.x(unit.lastTile());
+        const y = this.game.y(unit.lastTile());
+        const explosion = new SpriteFx(
+          this.animatedSpriteLoader,
+          x,
+          y,
+          FxType.BuildingExplosion,
+        );
+        this.allFx.push(explosion);
+      }
+      this.constructionState.delete(unit.id());
+    } else {
+      const wasUnderConstruction = this.constructionState.get(unit.id());
+      this.constructionState.set(unit.id(), unit.isUnderConstruction());
+      if (wasUnderConstruction && !unit.isUnderConstruction()) {
+        if (unit.owner() === this.game.myPlayer()) {
+          this.onStructureBuilt(unit);
+        }
+      }
+    }
+  }
+
+  onStructureBuilt(unit: UnitView) {
+    switch (unit.type()) {
+      case UnitType.City:
+        this.eventBus.emit(new PlaySoundEffectEvent("build-city"));
+        break;
+      case UnitType.Port:
+        this.eventBus.emit(new PlaySoundEffectEvent("build-port"));
+        break;
+      case UnitType.DefensePost:
+        this.eventBus.emit(new PlaySoundEffectEvent("build-defense-post"));
+        break;
+      case UnitType.SAMLauncher:
+        this.eventBus.emit(new PlaySoundEffectEvent("sam-built"));
+        break;
     }
   }
 
@@ -203,30 +260,37 @@ export class FxLayer implements Layer {
   }
 
   handleNukeExplosion(unit: UnitView, radius: number) {
-    const x = this.game.x(unit.lastTile());
-    const y = this.game.y(unit.lastTile());
-    const nukeFx = nukeFxFactory(
-      this.animatedSpriteLoader,
-      x,
-      y,
-      radius,
-      this.game,
-    );
-    this.allFx = this.allFx.concat(nukeFx);
+    if (this.fxEnabled()) {
+      const x = this.game.x(unit.lastTile());
+      const y = this.game.y(unit.lastTile());
+      const nukeFx = nukeFxFactory(
+        this.animatedSpriteLoader,
+        x,
+        y,
+        radius,
+        this.game,
+      );
+      this.allFx = this.allFx.concat(nukeFx);
+    }
+    const sound =
+      unit.type() === UnitType.HydrogenBomb ? "hydrogen-hit" : "atom-hit";
+    this.eventBus.emit(new PlaySoundEffectEvent(sound));
   }
 
   handleSAMInterception(unit: UnitView) {
-    const x = this.game.x(unit.lastTile());
-    const y = this.game.y(unit.lastTile());
-    const explosion = new SpriteFx(
-      this.animatedSpriteLoader,
-      x,
-      y,
-      FxType.SAMExplosion,
-    );
-    this.allFx.push(explosion);
-    const shockwave = new ShockwaveFx(x, y, 800, 40);
-    this.allFx.push(shockwave);
+    if (this.fxEnabled()) {
+      const x = this.game.x(unit.lastTile());
+      const y = this.game.y(unit.lastTile());
+      const explosion = new SpriteFx(
+        this.animatedSpriteLoader,
+        x,
+        y,
+        FxType.SAMExplosion,
+      );
+      this.allFx.push(explosion);
+      const shockwave = new ShockwaveFx(x, y, 800, 40);
+      this.allFx.push(shockwave);
+    }
   }
 
   async init() {

src/client/graphics/layers/RadialMenu.ts

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 import { assetUrl } from "../../../core/AssetUrls";
 import { EventBus, GameEvent } from "../../../core/EventBus";
 import { CloseViewEvent } from "../../InputHandler";
+import { PlaySoundEffectEvent } from "../../sound/Sounds";
 import { getSvgAspectRatio, translateText } from "../../Utils";
 import { Layer } from "./Layer";
 import {
@@ -506,6 +507,7 @@ export class RadialMenu implements Layer {
         this.navigationInProgress
       )
         return;
+      this.eventBus.emit(new PlaySoundEffectEvent("click"));
 
       if (
         this.currentLevel > 0 &&