sound effects

.husky/pre-commit

@@ -5,4 +5,4 @@
 export PATH="/usr/local/bin:$HOME/.npm-global/bin:$HOME/.nvm/versions/node/$(node -v)/bin:$PATH"
 
 # Then run lint-staged if tests pass
-npx lint-staged
+npx.cmd lint-staged

src/client/ClientGameRunner.ts

@@ -47,7 +47,8 @@ import {
 } from "./Transport";
 import { createCanvas } from "./Utils";
 import { createRenderer, GameRenderer } from "./graphics/GameRenderer";
-import SoundManager from "./sound/SoundManager";
+import { SoundLayer } from "./sound/SoundLayer";
+import { SoundManager } from "./sound/SoundManager";
 
 export interface LobbyConfig {
   serverConfig: ServerConfig;
@@ -175,7 +176,15 @@ async function createClientGame(
   );
 
   const canvas = createCanvas();
-  const gameRenderer = createRenderer(canvas, gameView, eventBus);
+  const soundManager = new SoundManager();
+  const soundLayer = new SoundLayer(gameView, soundManager);
+  const gameRenderer = createRenderer(
+    canvas,
+    gameView,
+    eventBus,
+    soundManager,
+    soundLayer,
+  );
 
   console.log(
     `creating private game got difficulty: ${lobbyConfig.gameStartInfo.config.difficulty}`,
@@ -189,6 +198,7 @@ async function createClientGame(
     transport,
     worker,
     gameView,
+    soundManager,
   );
 }
 
@@ -211,6 +221,7 @@ export class ClientGameRunner {
     private transport: Transport,
     private worker: WorkerClient,
     private gameView: GameView,
+    private soundManager: SoundManager,
   ) {
     this.lastMessageTime = Date.now();
   }
@@ -245,7 +256,7 @@ export class ClientGameRunner {
   }
 
   public start() {
-    SoundManager.playBackgroundMusic();
+    this.soundManager.playBackgroundMusic();
     console.log("starting client game");
 
     this.isActive = true;
@@ -374,7 +385,7 @@ export class ClientGameRunner {
   }
 
   public stop() {
-    SoundManager.stopBackgroundMusic();
+    this.soundManager.stopBackgroundMusic();
     if (!this.isActive) return;
 
     this.isActive = false;

src/client/LocalServer.ts

@@ -109,7 +109,9 @@ export class LocalServer {
       if (!this.lobbyConfig.gameRecord) {
         if (clientMsg.turnNumber % 100 === 0) {
           // In singleplayer, only store hash every 100 turns to reduce size of game record.
-          this.turns[clientMsg.turnNumber].hash = clientMsg.hash;
+          if (this.turns[clientMsg.turnNumber]) {
+            this.turns[clientMsg.turnNumber].hash = clientMsg.hash;
+          }
         }
         return;
       }

src/client/graphics/GameRenderer.ts

@@ -3,6 +3,8 @@ import { GameView } from "../../core/game/GameView";
 import { UserSettings } from "../../core/game/UserSettings";
 import { GameStartingModal } from "../GameStartingModal";
 import { RefreshGraphicsEvent as RedrawGraphicsEvent } from "../InputHandler";
+import { SoundLayer } from "../sound/SoundLayer";
+import { SoundManager } from "../sound/SoundManager";
 import { TransformHandler } from "./TransformHandler";
 import { UIState } from "./UIState";
 import { AlertFrame } from "./layers/AlertFrame";
@@ -44,6 +46,8 @@ export function createRenderer(
   canvas: HTMLCanvasElement,
   game: GameView,
   eventBus: EventBus,
+  soundManager: SoundManager,
+  soundLayer: SoundLayer,
 ): GameRenderer {
   const transformHandler = new TransformHandler(game, eventBus, canvas);
   const userSettings = new UserSettings();
@@ -160,6 +164,7 @@ export function createRenderer(
   }
   settingsModal.userSettings = userSettings;
   settingsModal.eventBus = eventBus;
+  settingsModal.soundManager = soundManager;
 
   const unitDisplay = document.querySelector("unit-display") as UnitDisplay;
   if (!(unitDisplay instanceof UnitDisplay)) {
@@ -273,6 +278,7 @@ export function createRenderer(
     gutterAdModal,
     alertFrame,
     fpsDisplay,
+    soundLayer,
   ];
 
   return new GameRenderer(
@@ -283,6 +289,7 @@ export function createRenderer(
     uiState,
     layers,
     fpsDisplay,
+    soundManager,
   );
 }
 
@@ -297,6 +304,7 @@ export class GameRenderer {
     public uiState: UIState,
     private layers: Layer[],
     private fpsDisplay: FPSDisplay,
+    public soundManager: SoundManager,
   ) {
     const context = canvas.getContext("2d");
     if (context === null) throw new Error("2d context not supported");

src/client/graphics/layers/FxLayer.ts

@@ -7,7 +7,7 @@ import {
   RailroadUpdate,
 } from "../../../core/game/GameUpdates";
 import { GameView, UnitView } from "../../../core/game/GameView";
-import SoundManager, { SoundEffect } from "../../sound/SoundManager";
+
 import { renderNumber } from "../../Utils";
 import { AnimatedSpriteLoader } from "../AnimatedSpriteLoader";
 import { conquestFxFactory } from "../fx/ConquestFx";
@@ -19,6 +19,7 @@ import { TextFx } from "../fx/TextFx";
 import { UnitExplosionFx } from "../fx/UnitExplosionFx";
 import { Layer } from "./Layer";
 export class FxLayer implements Layer {
+  private seenNukes: Set<number> = new Set();
   private canvas: HTMLCanvasElement;
   private context: CanvasRenderingContext2D;
 
@@ -141,6 +142,10 @@ export class FxLayer implements Layer {
         break;
       }
       case UnitType.AtomBomb:
+        this.onNukeEvent(unit, 70);
+        break;
+      case UnitType.MIRV:
+        break;
       case UnitType.MIRVWarhead:
         this.onNukeEvent(unit, 70);
         break;
@@ -217,8 +222,6 @@ export class FxLayer implements Layer {
       return;
     }
 
-    SoundManager.playSoundEffect(SoundEffect.KaChing);
-
     const conquestFx = conquestFxFactory(
       this.animatedSpriteLoader,
       conquest,

src/client/graphics/layers/SettingsModal.ts

@@ -15,7 +15,7 @@ import { UserSettings } from "../../../core/game/UserSettings";
 import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
 import { PauseGameEvent } from "../../Transport";
 import { translateText } from "../../Utils";
-import SoundManager from "../../sound/SoundManager";
+import { SoundManager } from "../../sound/SoundManager";
 import { Layer } from "./Layer";
 
 export class ShowSettingsModalEvent {
@@ -30,6 +30,7 @@ export class ShowSettingsModalEvent {
 export class SettingsModal extends LitElement implements Layer {
   public eventBus: EventBus;
   public userSettings: UserSettings;
+  public soundManager: SoundManager;
 
   @state()
   private isVisible: boolean = false;
@@ -47,10 +48,12 @@ export class SettingsModal extends LitElement implements Layer {
   wasPausedWhenOpened = false;
 
   init() {
-    SoundManager.setBackgroundMusicVolume(
+    this.soundManager.setBackgroundMusicVolume(
       this.userSettings.backgroundMusicVolume(),
     );
-    SoundManager.setSoundEffectsVolume(this.userSettings.soundEffectsVolume());
+    this.soundManager.setSoundEffectsVolume(
+      this.userSettings.soundEffectsVolume(),
+    );
     this.eventBus.on(ShowSettingsModalEvent, (event) => {
       this.isVisible = event.isVisible;
       this.shouldPause = event.shouldPause;
@@ -159,14 +162,14 @@ export class SettingsModal extends LitElement implements Layer {
   private onVolumeChange(event: Event) {
     const volume = parseFloat((event.target as HTMLInputElement).value) / 100;
     this.userSettings.setBackgroundMusicVolume(volume);
-    SoundManager.setBackgroundMusicVolume(volume);
+    this.soundManager.setBackgroundMusicVolume(volume);
     this.requestUpdate();
   }
 
   private onSoundEffectsVolumeChange(event: Event) {
     const volume = parseFloat((event.target as HTMLInputElement).value) / 100;
     this.userSettings.setSoundEffectsVolume(volume);
-    SoundManager.setSoundEffectsVolume(volume);
+    this.soundManager.setSoundEffectsVolume(volume);
     this.requestUpdate();
   }
 

src/client/sound/SoundLayer.ts

@@ -0,0 +1,99 @@
+import { UnitType } from "../../core/game/Game";
+import { GameUpdateType } from "../../core/game/GameUpdates";
+import { GameView, UnitView } from "../../core/game/GameView";
+import { Layer } from "../graphics/layers/Layer";
+import { SoundEffect, SoundManager } from "./SoundManager";
+
+export class SoundLayer implements Layer {
+  private seenNukes: Set<number> = new Set();
+
+  constructor(
+    private game: GameView,
+    private soundManager: SoundManager,
+  ) {}
+
+  shouldTransform(): boolean {
+    return false;
+  }
+
+  init(): void {}
+
+  tick(): void {
+    this.game
+      .updatesSinceLastTick()
+      ?.[GameUpdateType.Unit]?.map((unit) => this.game.unit(unit.id))
+      ?.forEach((unitView) => {
+        if (unitView === undefined) return;
+        this.onUnitEvent(unitView);
+      });
+  }
+
+  onUnitEvent(unit: UnitView) {
+    const myPlayer = this.game.myPlayer();
+    if (!myPlayer) return;
+
+    const isNuke =
+      unit.type() === UnitType.AtomBomb ||
+      unit.type() === UnitType.HydrogenBomb ||
+      unit.type() === UnitType.MIRV;
+
+    if (isNuke) {
+      if (!this.seenNukes.has(unit.id())) {
+        const owner = unit.owner();
+        const targetTile = unit.targetTile();
+        const targetPlayer = targetTile
+          ? this.game.playerBySmallID(this.game.ownerID(targetTile))
+          : undefined;
+
+        if (owner === myPlayer || targetPlayer === myPlayer) {
+          let soundEffect: SoundEffect | undefined;
+          if (unit.type() === UnitType.AtomBomb) {
+            soundEffect = SoundEffect.AtomLaunch;
+          } else if (unit.type() === UnitType.HydrogenBomb) {
+            soundEffect = SoundEffect.HydroLaunch;
+          } else if (unit.type() === UnitType.MIRV) {
+            soundEffect = SoundEffect.MirvLaunch;
+          }
+
+          if (soundEffect) {
+            this.soundManager.playSoundEffect(soundEffect);
+          }
+        }
+        this.seenNukes.add(unit.id());
+      }
+    }
+
+    if (!unit.isActive() && unit.reachedTarget()) {
+      const isNukeHit =
+        unit.type() === UnitType.AtomBomb ||
+        unit.type() === UnitType.HydrogenBomb ||
+        unit.type() === UnitType.MIRVWarhead;
+
+      if (isNukeHit) {
+        const owner = unit.owner();
+        const targetTile = unit.lastTile();
+        const targetPlayer = this.game.playerBySmallID(
+          this.game.ownerID(targetTile),
+        );
+
+        if (owner === myPlayer || targetPlayer === myPlayer) {
+          let soundEffect: SoundEffect | undefined;
+          if (unit.type() === UnitType.AtomBomb) {
+            soundEffect = SoundEffect.AtomHit;
+          } else if (unit.type() === UnitType.HydrogenBomb) {
+            soundEffect = SoundEffect.HydroHit;
+          } else if (unit.type() === UnitType.MIRVWarhead) {
+            soundEffect = SoundEffect.MirvHit;
+          }
+
+          if (soundEffect) {
+            this.soundManager.playSoundEffect(soundEffect);
+          }
+        }
+      }
+    }
+  }
+
+  renderLayer(context: CanvasRenderingContext2D): void {}
+  redraw(): void {}
+}

src/client/sound/SoundManager.ts

@@ -1,14 +1,25 @@
 import { Howl } from "howler";
+import atomHitSound from "../../../proprietary/sounds/effects/atom_hit.mp3";
+import atomLaunchSound from "../../../proprietary/sounds/effects/atom_launch.mp3";
+import hydroHitSound from "../../../proprietary/sounds/effects/hydrogen_hit.mp3";
+import hydroLaunchSound from "../../../proprietary/sounds/effects/hydrogen_launch.mp3";
+import mirvLaunchSound from "../../../proprietary/sounds/effects/mirv_launch.mp3";
 import of4 from "../../../proprietary/sounds/music/of4.mp3";
 import openfront from "../../../proprietary/sounds/music/openfront.mp3";
 import war from "../../../proprietary/sounds/music/war.mp3";
 import kaChingSound from "../../../resources/sounds/effects/ka-ching.mp3";
 
 export enum SoundEffect {
   KaChing = "ka-ching",
+  AtomLaunch = "atom_launch",
+  AtomHit = "atom_hit",
+  HydroLaunch = "hydro_launch",
+  HydroHit = "hydro_hit",
+  MirvHit = "mirv_hit",
+  MirvLaunch = "mirv_launch",
 }
 
-class SoundManager {
+export class SoundManager {
   private backgroundMusic: Howl[] = [];
   private currentTrack: number = 0;
   private soundEffects: Map<SoundEffect, Howl> = new Map();
@@ -37,6 +48,12 @@ class SoundManager {
       }),
     ];
     this.loadSoundEffect(SoundEffect.KaChing, kaChingSound);
+    this.loadSoundEffect(SoundEffect.AtomLaunch, atomLaunchSound);
+    this.loadSoundEffect(SoundEffect.AtomHit, atomHitSound);
+    this.loadSoundEffect(SoundEffect.HydroLaunch, hydroLaunchSound);
+    this.loadSoundEffect(SoundEffect.HydroHit, hydroHitSound);
+    this.loadSoundEffect(SoundEffect.MirvHit, atomHitSound);
+    this.loadSoundEffect(SoundEffect.MirvLaunch, mirvLaunchSound);
   }
 
   public playBackgroundMusic(): void {
@@ -105,5 +122,3 @@ class SoundManager {
     }
   }
 }
-
-export default new SoundManager();