Add sounds

frontend/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mp3' {
+  const content: string;
+  export default content;
+}

frontend/src/index.html

@@ -89,6 +89,11 @@
           />
         </label>
 
+        <label for="enable-music">
+          <input id="enable-music" type="checkbox" />
+          <img title="Enable music" alt="music note" src="../static/music.svg" />
+        </label>
+
         <img
           title="Exit from current game"
           id="logout"

frontend/src/index.ts

@@ -25,6 +25,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { OptionsHandler } from './scripts/options-handler';
 import { hide } from './scripts/helper/hide';
 import { show } from './scripts/helper/show';
+import { SoundHandler, Sounds } from './scripts/sound-handler';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -50,6 +51,7 @@ const enableRelativeMovement = document.querySelector(
   '#enable-relative-movement',
 ) as HTMLInputElement;
 const enableSounds = document.querySelector('#enable-sounds') as HTMLInputElement;
+const enableMusic = document.querySelector('#enable-music') as HTMLInputElement;
 const enableVibration = document.querySelector('#enable-vibration') as HTMLInputElement;
 const spinner = document.querySelector('#spinner-container') as HTMLElement;
 
@@ -86,8 +88,10 @@ const startInsights = (getRenderer: () => Renderer | undefined) => {
   );
 };
 
-const toggleSettings = () =>
-  (settings.className = settings.className === 'open' ? '' : 'open');
+const toggleSettings = () => {
+  settings.className = settings.className === 'open' ? '' : 'open';
+  SoundHandler.play(Sounds.click);
+};
 
 const applyServerContainerShadows = () => {
   const { scrollHeight, clientHeight, scrollTop } = serverContainer;
@@ -104,6 +108,7 @@ const applyServerContainerShadows = () => {
 const main = async () => {
   try {
     let game: Game;
+    SoundHandler.initialize();
 
     handleFullScreen(minimize, maximize);
     toggleSettingsButton.addEventListener('click', toggleSettings);
@@ -115,6 +120,7 @@ const main = async () => {
       relativeMovementEnabled: enableRelativeMovement,
       soundsEnabled: enableSounds,
       vibrationEnabled: enableVibration,
+      musicEnabled: enableMusic,
     });
 
     logoutButton.addEventListener('click', () => {

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();
+  }
+}

frontend/static/music.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="6" cy="17" r="3" />
+  <circle cx="16" cy="17" r="3" />
+  <polyline points="9 17 9 4 19 4 19 17" />
+  <line x1="9" y1="8" x2="19" y2="8" />
+</svg>

frontend/webpack.config.js

@@ -80,7 +80,17 @@ module.exports = {
         },
       },
       {
-        test: /\.png$/,
+        test: /\.mp3$/,
+        use: {
+          loader: 'file-loader',
+          query: {
+            outputPath: '/static',
+            name: '[name].[ext]',
+          },
+        },
+      },
+      {
+        test: /og-image.png$/,
         use: {
           loader: 'file-loader',
           query: {