Merge branch feature/audio-player into main (#93)

Implement Audio Player

- Add valueChangeEvent to Setting class
- Implement Audio Player
- Add AudioType enum
- Make AudioPlayer available through Services

src/ts/engine/audio/audioplayer.ts

@@ -0,0 +1,74 @@
+import EngineEvent from "../event/engineevent.js";
+import Setting from "../settings/setting.js";
+import SettingsManager from "../settings/settingsmanager.js";
+import SimpleSetting from "../settings/simplesetting.js";
+import AudioType from "./audiotype.js";
+
+class AudioPlayer {
+  private _settingsManager: SettingsManager;
+
+  private _currentMusic: HTMLAudioElement | null;
+  private _musicEnabled: Setting<boolean>;
+  private _soundEnabled: Setting<boolean>;
+
+  public get currentMusic(): HTMLAudioElement | null {
+    return this._currentMusic;
+  }
+
+  public constructor(settingsManager: SettingsManager) {
+    this._settingsManager = settingsManager;
+    this._currentMusic = null;
+
+    this._musicEnabled = this._settingsManager.getOrSet(
+      "audio.music",
+      new SimpleSetting<boolean>(true)
+    );
+
+    this._soundEnabled = this._settingsManager.getOrSet(
+      "audio.sound",
+      new SimpleSetting<boolean>(true)
+    );
+
+    this._musicEnabled.valueChangeEvent.subscribe(
+      this.onMusicSettingChanges.bind(this)
+    );
+  }
+
+  public playMusic() {
+    this._currentMusic?.play();
+  }
+
+  public pauseMusic() {
+    this._currentMusic?.pause();
+  }
+
+  public play(audioType: AudioType, audio: HTMLAudioElement) {
+    if (audioType === AudioType.Music) {
+      if (!this._musicEnabled.get()) {
+        return;
+      }
+
+      this.pauseMusic();
+      audio.loop = true;
+      this._currentMusic = audio;
+    } else if (audioType === AudioType.Sound) {
+      if (!this._soundEnabled.get()) {
+        return;
+      }
+    }
+
+    audio.pause();
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+  private onMusicSettingChanges(valueChangeEvent: EngineEvent<boolean>) {
+    if (valueChangeEvent.eventData) {
+      this.playMusic();
+    } else {
+      this.pauseMusic();
+    }
+  }
+}
+
+export default AudioPlayer;

src/ts/engine/audio/audiotype.ts

@@ -0,0 +1,6 @@
+enum AudioType {
+  Music,
+  Sound,
+}
+
+export default AudioType;

src/ts/engine/game.ts

@@ -1,5 +1,6 @@
 import AssetLoader from "./assets/assetloader.js";
 import AssetManager from "./assets/assetmanager.js";
+import AudioPlayer from "./audio/audioplayer.js";
 import CookieManager from "./cookies/cookiemanager.js";
 import Services from "./dependencyinjection/services.js";
 import EngineSetup from "./enginesetup.js";
@@ -15,6 +16,7 @@ class Game {
   private _assetManager: AssetManager;
   private _cookieManager: CookieManager;
   private _settingsManager: SettingsManager;
+  private _audioPlayer: AudioPlayer;
   private _inputHandler: InputHandler;
   private _sceneManager: SceneManager;
   private _entityManager: EntityManager;
@@ -48,6 +50,7 @@ class Game {
     this._assetManager = new AssetManager();
     this._cookieManager = new CookieManager();
     this._settingsManager = new SettingsManager();
+    this._audioPlayer = new AudioPlayer(this._settingsManager);
     this._inputHandler = new InputHandler(htmlCanvasElement);
     this._sceneManager = new SceneManager(this._inputHandler);
     this._entityManager = new EntityManager();
@@ -73,6 +76,7 @@ class Game {
     Services.register(this._assetManager);
     Services.register(this._cookieManager);
     Services.register(this._settingsManager);
+    Services.register(this._audioPlayer);
     Services.register(this._inputHandler);
     Services.register(this._sceneManager);
     Services.register(this._entityManager);

src/ts/engine/settings/setting.ts

@@ -1,7 +1,12 @@
+import EngineEvent from "../event/engineevent.js";
+import EngineEventHandler from "../event/engineventhandler.js";
+
 class Setting<T> {
   private _get: (() => T) | undefined;
   private _set: ((value: T) => void) | undefined;
 
+  private _valueChangEvent: EngineEventHandler<T, EngineEvent<T>>;
+
   public get(): T {
     if (!this._get) {
       throw new Error("Get-Method not implemented for this setting.");
@@ -14,6 +19,11 @@ class Setting<T> {
       throw new Error("Set-Method not implemented for this setting.");
     }
     this._set(value);
+    this._valueChangEvent.dispatch(new EngineEvent<T>(value));
+  }
+
+  public get valueChangeEvent(): EngineEventHandler<T, EngineEvent<T>> {
+    return this._valueChangEvent;
   }
 
   public constructor(
@@ -22,6 +32,7 @@ class Setting<T> {
   ) {
     this._get = get;
     this._set = set;
+    this._valueChangEvent = new EngineEventHandler<T, EngineEvent<T>>();
   }
 }
 

src/ts/engine/settings/settingsmanager.ts

@@ -18,6 +18,15 @@ class SettingsManager {
   public set<T>(key: string, value: Setting<T>): void {
     this._settings.set(key, value);
   }
+
+  public getOrSet<T>(key: string, value: Setting<T>): Setting<T> {
+    if (!this.has(key)) {
+      this.set(key, value);
+      return value;
+    }
+
+    return this.get(key);
+  }
 }
 
 export default SettingsManager;