Merge remote-tracking branch 'refs/remotes/origin/main'

colinkiama · colinkiama · commit bae592d1bcc1 · 2025-02-26T22:09:31.000Z
diff --git a/assets/audio/battle-theme.mp3 b/assets/audio/battle-theme.mp3
diff --git a/assets/audio/battle-theme.opus b/assets/audio/battle-theme.opus
diff --git a/assets/audio/main-theme.mp3 b/assets/audio/main-theme.mp3
diff --git a/assets/audio/main-theme.opus b/assets/audio/main-theme.opus
diff --git a/src/constants/audio.js b/src/constants/audio.js
@@ -0,0 +1,20 @@
+export const AudioKey = {
+  MAIN_THEME: 'main-theme',
+  BATTLE_THEME: 'battle-theme',
+};
+
+export const AudioMarkerKey = {
+  BATTLE_THEME_LOOP: 'battle-theme-loop',
+};
+
+export const LOOP_MARKER_CONFIGS = {
+  [AudioKey.BATTLE_THEME]: {
+    name: AudioMarkerKey.BATTLE_THEME_LOOP,
+    start: 6.3, // In Seconds
+    duration: 101.7,
+    config: {
+      loop: true,
+      seek: 6.3,
+    }
+  }
+};
diff --git a/src/constants/injector.js b/src/constants/injector.js
@@ -0,0 +1,3 @@
+export const DependencyKey = {
+  AUDIO_SYSTEM: 'AudioSystem',
+};
diff --git a/src/scenes/Battle.js b/src/scenes/Battle.js
@@ -34,8 +34,12 @@ import {
   JOYSTICK_RADIUS,
   JOYSTICK_THUMB_RADIUS,
 } from '../constants/touch.js';
+import { DependencyKey } from '../constants/injector.js';
+import { AudioKey, AudioMarkerKey, LOOP_MARKER_CONFIGS } from '../constants/audio.js';
 
 export class Battle extends Scene {
+  injector;
+
   _player;
   _enemyPool;
   _laserPool;
@@ -49,6 +53,7 @@ export class Battle extends Scene {
   _scoreSystem;
   _statusSystem;
   _touchControlsSystem;
+  _audioSystem;
 
   _sessionStopWatch;
   _playerGracePeriodTween;
@@ -57,10 +62,15 @@ export class Battle extends Scene {
     super(SceneKey.BATTLE);
   }
 
+  setupDependencies() {
+    this._audioSystem = this.injector.get(DependencyKey.AUDIO_SYSTEM);
+  }
+
   create() {
-    const mainThemeSong = this.sound.get('main-theme');
-    if (mainThemeSong.isPlaying) {
-      mainThemeSong.stop();
+    if(
+      !this._audioSystem.get(AudioKey.BATTLE_THEME)?.isPlaying
+      ) {
+        this._audioSystem.playLoop(AudioKey.BATTLE_THEME, { loop: false }, LOOP_MARKER_CONFIGS[AudioKey.BATTLE_THEME]);
     }
 
     this.subscribeToEvents();
@@ -265,6 +275,7 @@ export class Battle extends Scene {
   }
 
   onPauseRequested() {
+
     this.scene.launch(SceneKey.PAUSE_MENU);
   }
 
@@ -371,21 +382,24 @@ export class Battle extends Scene {
   }
 
   onHudDestroyed() {
-    this.scene.start(SceneKey.MAIN_MENU);
+    this.scene.start(SceneKey.MAIN_MENU, { playMusic: true });
   }
 
   onQuitGame() {
+    this._audioSystem.stop(AudioKey.BATTLE_THEME);
     this.scene.stop(SceneKey.HUD);
   }
 
   onResumeGame() {
+    this._audioSystem.resume(AudioKey.BATTLE_THEME);
     this.scene.resume(SceneKey.HUD);
     this.scene.resume(this);
   }
 
   onPauseGame() {
     this.scene.pause(SceneKey.HUD);
     this.scene.pause(this);
+    this._audioSystem.pause(AudioKey.BATTLE_THEME);
   }
 
   onDataChanged(_parent, key, value) {
@@ -466,6 +480,7 @@ export class Battle extends Scene {
     this.clearPhysicsPools();
     this.updateHighScore();
     this._spawnSystem.deactivateEnemySpawnTimer();
+    this._audioSystem.stop(AudioKey.BATTLE_THEME);
 
     this.time.delayedCall(1000, () => {
       this.scene.launch(SceneKey.GAME_OVER, gameStats);
@@ -494,6 +509,7 @@ export class Battle extends Scene {
     this._spawnSystem.reset();
     crossSceneEventEmitter.emit(CrossSceneEvent.SCORE_RESET);
     this._sessionStopWatch.reset();
+    this._audioSystem.playLoop(AudioKey.BATTLE_THEME, { loop: false }, AudioMarkerKey.BATTLE_THEME_LOOP);
   }
 
   clearPhysicsPools() {
diff --git a/src/scenes/Credits.js b/src/scenes/Credits.js
@@ -87,7 +87,7 @@ export class Credits extends Scene {
     backButton.on('pointerover', onButtonHover);
     backButton.on('pointerout', onButtonOut);
     backButton.on('pointerup', () => {
-      this.scene.start(SceneKey.MAIN_MENU);
+      this.scene.start(SceneKey.MAIN_MENU, { playMusic: false });
     });
   }
 }
diff --git a/src/scenes/MainMenu.js b/src/scenes/MainMenu.js
@@ -8,24 +8,29 @@ import {
 import { SceneKey } from '../constants/scene.js';
 import { onButtonHover, onButtonOut } from '../utils/ui.js';
 import { RegistryKey } from '../constants/data.js';
+import { DependencyKey } from '../constants/injector.js';
+import { AudioKey } from '../constants/audio.js';
 
 export class MainMenu extends Scene {
+  injector;
+  _audioSystem;
+
   _music;
 
   constructor() {
     super(SceneKey.MAIN_MENU);
   }
 
-  create() {
-    if (!this._music) {
-      this._music = this.sound.add('main-theme');
-    }
+  setupDependencies() {
+    this._audioSystem = this.injector.get(DependencyKey.AUDIO_SYSTEM);
+  }
 
+  create(data) {
     if (
-      this.game.registry.get(RegistryKey.PLAY_SOUND) &&
-      !this._music.isPlaying
+      data.playMusic &&
+      !this._audioSystem.get(AudioKey.MAIN_THEME)?.isPlaying
     ) {
-      this._music.play({ loop: true });
+      this._audioSystem.play(AudioKey.MAIN_THEME);
     }
 
     const logo = this.add.image(320, 60, 'logo').setOrigin(0.5, 0);
@@ -96,6 +101,10 @@ export class MainMenu extends Scene {
   }
 
   startNewGame() {
+    if (this._audioSystem.get(AudioKey.MAIN_THEME)?.isPlaying) {
+      this._audioSystem.stop(AudioKey.MAIN_THEME);
+    }
+
     this.scene.start(SceneKey.BATTLE);
   }
 
diff --git a/src/scenes/Preloader.js b/src/scenes/Preloader.js
@@ -4,6 +4,10 @@ import { LocalStorageKey, RegistryKey } from '../constants/data.js';
 import { COLORS, MENU_ITEM_CONFIG } from '../constants/menu.js';
 import { onButtonHover, onButtonOut } from '../utils/ui.js';
 import { MenuSystem } from '../systems/menuSystem.js';
+import { Injector } from '../utils/injector.js';
+import { DependencyKey } from '../constants/injector.js';
+import { AudioSystem } from '../systems/audioSystem.js';
+import { AudioKey } from '../constants/audio.js';
 
 const PROGRESS_BAR_WIDTH = 300;
 const PROGRESS_BAR_HEIGHT = 32;
@@ -16,6 +20,8 @@ const SCENES_TO_LOAD = [
   'Credits',
 ];
 
+let dependencyInjector;
+
 export class Preloader extends Scene {
   sceneImports;
   sceneLoaderPromise;
@@ -59,6 +65,8 @@ export class Preloader extends Scene {
       this.progressBarFill.width = (PROGRESS_BAR_WIDTH - 3) * progress;
     });
 
+    dependencyInjector = new Injector();
+
     //  Inject our CSS (for Usuzi Font)
     const element = document.createElement('style');
     document.head.appendChild(element);
@@ -73,12 +81,17 @@ export class Preloader extends Scene {
 
     //  Load the assets for the game - Replace with your own assets
     this.load.setPath('assets');
-    this.load.audio('main-theme', [
+    this.load.audio(AudioKey.MAIN_THEME, [
       'audio/main-theme.opus',
       'audio/main-theme.ogg',
       'audio/main-theme.mp3',
     ]);
 
+    this.load.audio(AudioKey.BATTLE_THEME, [
+      'audio/battle-theme.opus',
+      'audio/battle-theme.mp3',
+    ]);
+
     this.load.image('logo', 'last-one-flying-logo.png');
     this.load.image('player', 'player.png');
     this.load.image('player-laser-beam', 'player-laser-beam.png');
@@ -121,10 +134,21 @@ export class Preloader extends Scene {
         families: ['usuzi'],
       },
       active: async () => {
+        const { AudioSystem } = await import('../systems/audioSystem.js');
+        dependencyInjector.register(
+          DependencyKey.AUDIO_SYSTEM,
+          new AudioSystem(this.sound),
+        );
+
         const importResults = await this.sceneLoaderPromise;
         SCENES_TO_LOAD.map((sceneName, i) => {
           const loadedModule = importResults[i];
-          this.scene.add(sceneName, loadedModule[sceneName]);
+          const addedScene = this.scene.add(sceneName, loadedModule[sceneName]);
+          addedScene.injector = dependencyInjector;
+
+          if (addedScene.setupDependencies) {
+            addedScene.setupDependencies();
+          }
         });
 
         this.progressBar.setVisible(false);
@@ -159,11 +183,14 @@ export class Preloader extends Scene {
 
   startGameWithSound() {
     this.game.registry.set(RegistryKey.PLAY_SOUND, true);
-    this.scene.start(SceneKey.MAIN_MENU);
+    this.scene.start(SceneKey.MAIN_MENU, {
+      playMusic: true,
+    });
   }
 
   startGameMuted() {
     this.game.registry.set(RegistryKey.PLAY_SOUND, false);
+    this.sound.setMute(true);
     this.scene.start(SceneKey.MAIN_MENU);
   }
 }
diff --git a/src/systems/audioSystem.js b/src/systems/audioSystem.js
@@ -0,0 +1,57 @@
+import * as Phaser from 'phaser';
+
+export class AudioSystem {
+  /**
+   * @type {Phaser.Sound.BaseSoundManager}
+   */
+  _soundManager;
+  _loopMarkers;
+
+  constructor(soundManager) {
+    this._soundManager = soundManager;
+    this._loopMarkers = new Map();
+  }
+
+  play(key, options) {
+    const audio = this.getOrAddAudio(key, options);
+    audio.play();
+  }
+
+  playSFX(key, options) {
+    this._soundManager.play(key, options);
+  }
+
+  playLoop(key, options, loopMarkerConfig) {
+    const audio = this.getOrAddAudio(key, options);
+    this._loopMarkers.get(key) ?? this._loopMarkers.set(key, audio.addMarker(loopMarkerConfig));
+
+    audio.play();
+    audio.once("complete", () => {
+      audio.play(loopMarkerConfig.name);
+    });
+  }
+
+  pause(key) {
+    const audio = this.get(key);
+    audio.pause();
+  }
+
+  resume(key) {
+    const audio = this.get(key);
+    audio.resume();
+  }
+
+  get(key) {
+    const audio = this._soundManager.get(key);
+    return audio;
+  }
+
+  getOrAddAudio(key, options) {
+    return this._soundManager.get(key) ?? this._soundManager.add(key, options);
+  }
+
+  stop(key) {
+    const audio = this.get(key);
+    audio.stop();
+  }
+}
diff --git a/src/utils/injector.js b/src/utils/injector.js
@@ -0,0 +1,15 @@
+export class Injector {
+  dependencyMap;
+
+  constructor() {
+    this.dependencyMap = new Map();
+  }
+
+  register(key, value) {
+    this.dependencyMap.set(key, value);
+  }
+
+  get(key) {
+    return this.dependencyMap.get(key);
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const DependencyKey = {`
	`2`	`+ AUDIO_SYSTEM: 'AudioSystem',`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ export class Credits extends Scene {`
`87`	`87`	`backButton.on('pointerover', onButtonHover);`
`88`	`88`	`backButton.on('pointerout', onButtonOut);`
`89`	`89`	`backButton.on('pointerup', () => {`
`90`		`- this.scene.start(SceneKey.MAIN_MENU);`
	`90`	`+ this.scene.start(SceneKey.MAIN_MENU, { playMusic: false });`
`91`	`91`	`});`
`92`	`92`	`}`
`93`	`93`	`}`