Improve settings

frontend/src/scripts/commands/generators/keyboard-listener.ts

@@ -1,5 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { CommandGenerator, MoveActionCommand } from 'shared';
+import { OptionsHandler } from '../../options-handler';
 
 export class KeyboardListener extends CommandGenerator {
   private keysDown: Set<string> = new Set();
@@ -34,7 +35,9 @@ export class KeyboardListener extends CommandGenerator {
     if (vec2.squaredLength(movement) > 0) {
       vec2.normalize(movement, movement);
     }
-    this.sendCommandToSubcribers(new MoveActionCommand(movement, true));
+    this.sendCommandToSubcribers(
+      new MoveActionCommand(movement, OptionsHandler.options.relativeMovementEnabled),
+    );
   }
 
   private normalize(key: string): string {

frontend/src/scripts/commands/generators/touch-listener.ts

@@ -7,6 +7,7 @@ import {
   MoveActionCommand,
 } from 'shared';
 import { Game } from '../../game';
+import { OptionsHandler } from '../../options-handler';
 
 export class TouchListener extends CommandGenerator {
   private previousPosition = vec2.create();
@@ -38,7 +39,9 @@ export class TouchListener extends CommandGenerator {
 
       if (vec2.squaredLength(movement) > 0) {
         vec2.normalize(movement, movement);
-        this.sendCommandToSubcribers(new MoveActionCommand(movement, false));
+        this.sendCommandToSubcribers(
+          new MoveActionCommand(movement, OptionsHandler.options.relativeMovementEnabled),
+        );
       }
 
       this.previousPosition = position;
@@ -46,7 +49,12 @@ export class TouchListener extends CommandGenerator {
 
     target.addEventListener('touchend', (event: TouchEvent) => {
       event.preventDefault();
-      this.sendCommandToSubcribers(new MoveActionCommand(vec2.create(), false));
+      this.sendCommandToSubcribers(
+        new MoveActionCommand(
+          vec2.create(),
+          OptionsHandler.options.relativeMovementEnabled,
+        ),
+      );
     });
   }
 

frontend/src/scripts/game.ts

@@ -29,7 +29,7 @@ import { TouchListener } from './commands/generators/touch-listener';
 import { CommandReceiverSocket } from './commands/receivers/command-receiver-socket';
 import { PlayerDecision } from './join-form-handler';
 import { GameObjectContainer } from './objects/game-object-container';
-import { options } from './options';
+import { OptionsHandler } from './options-handler';
 import { BlobShape } from './shapes/blob-shape';
 import { PlanetShape } from './shapes/planet-shape';
 
@@ -48,7 +48,6 @@ export class Game {
     private readonly canvas: HTMLCanvasElement,
     private readonly overlay: HTMLElement,
   ) {
-    this.start();
     const progressBar = document.createElement('div');
     progressBar.className = 'planet-progress';
     overlay.appendChild(progressBar);
@@ -71,7 +70,7 @@ export class Game {
       const command = deserialize(serialized);
       if (command instanceof PlayerDiedCommand) {
         this.deadTimeout = command.timeout;
-        if (options.vibrationEnabled) {
+        if (OptionsHandler.options.vibrationEnabled) {
           navigator.vibrate(150);
         }
         this.overlay.appendChild(this.announcmentText);
@@ -112,10 +111,10 @@ export class Game {
     );
   }
 
-  private async start(): Promise<void> {
+  public async start(): Promise<void> {
     const noiseTexture = await renderNoise([256, 256], 2, 1);
     this.setupCommunication(this.playerDecision.server);
-    runAnimation(
+    await runAnimation(
       this.canvas,
       [
         {
@@ -162,6 +161,8 @@ export class Game {
         },
       },
     );
+    this.socket.close();
+    this.overlay.innerHTML = '';
   }
 
   public displayToWorldCoordinates(p: vec2): vec2 {
@@ -179,6 +180,11 @@ export class Game {
     );
   }
 
+  private isActive = true;
+  public destroy() {
+    this.isActive = false;
+  }
+
   private announcmentText = document.createElement('h2');
   private gameLoop(
     renderer: Renderer,
@@ -196,6 +202,6 @@ export class Game {
     this.gameObjects.stepObjects(deltaTime);
     this.gameObjects.drawObjects(this.renderer, this.overlay);
 
-    return true;
+    return this.isActive;
   }
 }

frontend/src/scripts/objects/player-character-view.ts

@@ -8,7 +8,7 @@ import {
   CharacterTeam,
   settings,
 } from 'shared';
-import { options } from '../options';
+import { OptionsHandler } from '../options-handler';
 
 import { BlobShape } from '../shapes/blob-shape';
 import { ViewObject } from './view-object';
@@ -50,7 +50,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     this.healthElement.style.width = this.health + '%';
     if (this.previousHealth > this.health) {
       this.previousHealth = this.health;
-      if (options.vibrationEnabled) {
+      if (OptionsHandler.options.vibrationEnabled) {
         navigator.vibrate(50);
       }
     }

frontend/src/scripts/options-handler.ts

@@ -0,0 +1,51 @@
+interface Options {
+  vibrationEnabled: boolean;
+  soundsEnabled: boolean;
+  relativeMovementEnabled: boolean;
+}
+
+export abstract class OptionsHandler {
+  private static initialized = false;
+  private static _options: Options = {
+    vibrationEnabled: true,
+    soundsEnabled: true,
+    relativeMovementEnabled: false,
+  };
+
+  public static initialize(
+    inputElements: { [k in Extract<keyof Options, string>]: HTMLInputElement },
+  ) {
+    if (localStorage.getItem('options')) {
+      const stored: Partial<Options> | null = JSON.parse(
+        localStorage.getItem('options')!,
+      );
+      this._options = {
+        ...this._options,
+        ...stored,
+      };
+    }
+
+    for (const k in inputElements) {
+      const element = inputElements[k as keyof Options];
+      element.checked = OptionsHandler._options[k as keyof Options];
+      element.addEventListener('change', function () {
+        OptionsHandler._options[k as keyof Options] = this.checked;
+        OptionsHandler.save();
+      });
+    }
+
+    this.initialized = true;
+  }
+
+  private static save() {
+    localStorage.setItem('options', JSON.stringify(this._options));
+  }
+
+  public static get options(): Options {
+    if (!this.initialized) {
+      throw new Error('Uninitialized');
+    }
+
+    return this._options;
+  }
+}

frontend/src/scripts/options.ts

@@ -1,3 +0,0 @@
-export const options = {
-  vibrationEnabled: true,
-};