Add sounds

frontend/src/scripts/options-handler.ts

@@ -1,7 +1,10 @@
+import { SoundHandler, Sounds } from './sound-handler';
+
 interface Options {
   vibrationEnabled: boolean;
   soundsEnabled: boolean;
   relativeMovementEnabled: boolean;
+  musicEnabled: boolean;
 }
 
 export abstract class OptionsHandler {
@@ -10,6 +13,7 @@ export abstract class OptionsHandler {
     vibrationEnabled: true,
     soundsEnabled: true,
     relativeMovementEnabled: false,
+    musicEnabled: true,
   };
 
   public static initialize(
@@ -23,6 +27,14 @@ export abstract class OptionsHandler {
         ...this._options,
         ...stored,
       };
+
+      if (this._options.musicEnabled) {
+        const firstClickListener = () => {
+          document.removeEventListener('click', firstClickListener);
+          SoundHandler.playAmbient();
+        };
+        document.addEventListener('click', firstClickListener);
+      }
     }
 
     for (const k in inputElements) {
@@ -30,6 +42,21 @@ export abstract class OptionsHandler {
       element.checked = OptionsHandler._options[k as keyof Options];
       element.addEventListener('change', function () {
         OptionsHandler._options[k as keyof Options] = this.checked;
+        if (!this.checked && k === 'soundsEnabled') {
+          OptionsHandler._options.musicEnabled = false;
+          inputElements.musicEnabled.checked = false;
+          SoundHandler.stopAmbient();
+        }
+
+        if (k === 'musicEnabled') {
+          this.checked ? SoundHandler.playAmbient() : SoundHandler.stopAmbient();
+        }
+
+        if (this.checked && k === 'vibrationEnabled') {
+          navigator.vibrate(100);
+        }
+
+        SoundHandler.play(Sounds.click);
         OptionsHandler.save();
       });
     }

frontend/src/scripts/sound-handler.ts

@@ -0,0 +1,44 @@
+import hitSound from '../../static/hit.mp3';
+import shootSound from '../../static/shoot.mp3';
+import clickSound from '../../static/click.mp3';
+import ambientSound from '../../static/ambient.mp3';
+import { OptionsHandler } from './options-handler';
+
+export enum Sounds {
+  hit = 'hit',
+  shoot = 'shoot',
+  click = 'click',
+  ambient = 'ambient',
+}
+
+export abstract class SoundHandler {
+  private static sounds: { [key in Sounds]: HTMLAudioElement };
+
+  public static initialize() {
+    this.sounds = {
+      [Sounds.hit]: new Audio(hitSound),
+      [Sounds.shoot]: new Audio(shootSound),
+      [Sounds.click]: new Audio(clickSound),
+      [Sounds.ambient]: new Audio(ambientSound),
+    };
+    this.sounds.ambient.volume = 0.5;
+  }
+
+  public static play(sound: Sounds) {
+    if (OptionsHandler.options.soundsEnabled) {
+      if (this.sounds[sound].currentTime > 0) {
+        (this.sounds[sound].cloneNode() as HTMLAudioElement).play();
+      } else {
+        this.sounds[sound].play();
+      }
+    }
+  }
+
+  public static playAmbient() {
+    this.sounds.ambient.play();
+  }
+
+  public static stopAmbient() {
+    this.sounds.ambient.pause();
+  }
+}