Fix touch shooting and typo

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

@@ -1,6 +1,5 @@
 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();
@@ -35,7 +34,7 @@ export class KeyboardListener extends CommandGenerator {
     if (vec2.squaredLength(movement) > 0) {
       vec2.normalize(movement, movement);
     }
-    this.sendCommandToSubcribers(new MoveActionCommand(movement));
+    this.sendCommandToSubscribers(new MoveActionCommand(movement));
   }
 
   private normalize(key: string): string {

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

@@ -10,14 +10,14 @@ export class MouseListener extends CommandGenerator {
       const position = this.positionFromEvent(event);
 
       if (event.button == 0) {
-        this.sendCommandToSubcribers(new SecondaryActionCommand(position));
+        this.sendCommandToSubscribers(new SecondaryActionCommand(position));
       }
     });
 
     target.addEventListener('contextmenu', (event: MouseEvent) => {
       event.preventDefault();
       const position = this.positionFromEvent(event);
-      this.sendCommandToSubcribers(new TernaryActionCommand(position));
+      this.sendCommandToSubscribers(new TernaryActionCommand(position));
     });
   }
 

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

@@ -2,14 +2,15 @@ import { vec2 } from 'gl-matrix';
 import {
   CommandGenerator,
   SecondaryActionCommand,
-  TernaryActionCommand,
   MoveActionCommand,
   last,
 } from 'shared';
 import { Game } from '../../game';
-import { OptionsHandler } from '../../options-handler';
 
 export class TouchJoystickListener extends CommandGenerator {
+  private readonly deadZone = 8;
+  private readonly deltaScaling = 0.4;
+
   private joystick: HTMLElement;
   private joystickButton: HTMLElement;
 
@@ -35,50 +36,47 @@ export class TouchJoystickListener extends CommandGenerator {
           last(event.touches)!.clientX,
           last(event.touches)!.clientY,
         );
-        this.sendCommandToSubcribers(
+        this.sendCommandToSubscribers(
           new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)),
         );
+      } else {
+        this.touchStartPosition = vec2.fromValues(
+          event.touches[0].clientX,
+          event.touches[0].clientY,
+        );
       }
     });
 
     target.addEventListener('touchmove', (event: TouchEvent) => {
       event.preventDefault();
 
-      if (!this.isJoystickActive) {
-        this.isJoystickActive = true;
-        this.overlay.appendChild(this.joystick);
-        this.touchStartPosition = vec2.fromValues(
-          event.touches[0].clientX,
-          event.touches[0].clientY,
-        );
-        this.joystickButton.style.transform = `translateX(-50%) translateY(-50%)`;
-        this.joystick.style.transform = `translateX(${this.touchStartPosition.x}px) translateY(${this.touchStartPosition.y}px) translateX(-50%) translateY(-50%)`;
-      }
-
       const touchPosition = vec2.fromValues(
         event.touches[0].clientX,
         event.touches[0].clientY,
       );
 
-      const movement = vec2.subtract(
-        vec2.create(),
-        touchPosition,
-        this.touchStartPosition,
-      );
+      const delta = vec2.subtract(vec2.create(), touchPosition, this.touchStartPosition);
+      vec2.scale(delta, delta, this.deltaScaling);
+      const deltaLength = vec2.length(delta);
+
+      if (!this.isJoystickActive && deltaLength > this.deadZone) {
+        this.isJoystickActive = true;
+        this.overlay.appendChild(this.joystick);
+        this.joystickButton.style.transform = `translateX(-50%) translateY(-50%)`;
+        this.joystick.style.transform = `translateX(${this.touchStartPosition.x}px) translateY(${this.touchStartPosition.y}px) translateX(-50%) translateY(-50%)`;
+      }
 
-      vec2.scale(movement, movement, 1 / 3);
-      const length = vec2.length(movement);
       const maxLength = 20;
-      vec2.scale(movement, movement, Math.min(1, maxLength / length));
-      this.joystickButton.style.transform = `translateX(${movement.x}px) translateY(${movement.y}px) translateX(-50%) translateY(-50%)`;
+      vec2.scale(delta, delta, Math.min(1, maxLength / deltaLength));
+      this.joystickButton.style.transform = `translateX(${delta.x}px) translateY(${delta.y}px) translateX(-50%) translateY(-50%)`;
 
-      vec2.set(movement, movement.x, -movement.y);
-      if (length > 10) {
-        this.sendCommandToSubcribers(
-          new MoveActionCommand(vec2.normalize(movement, movement)),
+      vec2.set(delta, delta.x, -delta.y);
+      if (deltaLength > this.deadZone) {
+        this.sendCommandToSubscribers(
+          new MoveActionCommand(vec2.normalize(delta, delta)),
         );
       } else {
-        this.sendCommandToSubcribers(new MoveActionCommand(vec2.create()));
+        this.sendCommandToSubscribers(new MoveActionCommand(vec2.create()));
       }
     });
 
@@ -90,13 +88,13 @@ export class TouchJoystickListener extends CommandGenerator {
           event.changedTouches[0].clientX,
           event.changedTouches[0].clientY,
         );
-        this.sendCommandToSubcribers(
+        this.sendCommandToSubscribers(
           new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)),
         );
       } else if (event.touches.length === 0) {
         this.isJoystickActive = false;
         this.joystick.parentElement?.removeChild(this.joystick);
-        this.sendCommandToSubcribers(new MoveActionCommand(vec2.create()));
+        this.sendCommandToSubscribers(new MoveActionCommand(vec2.create()));
       }
     });
   }

frontend/src/scripts/handle-full-screen.ts

@@ -10,7 +10,7 @@ export const handleFullScreen = (
     return;
   }
 
-  let isInFullScreen = (): boolean => document.fullscreenElement !== null;
+  const isInFullScreen = (): boolean => document.fullscreenElement !== null;
 
   const showButtons = () => {
     minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';

frontend/src/scripts/landing-page-background.ts

@@ -47,8 +47,6 @@ export class LandingPageBackground {
       {
         shadowTraceCount: 16,
         paletteSize: 1,
-      },
-      {
         ambientLight: rgb(0, 0, 0),
         lightCutoffDistance: settings.lightCutoffDistance,
         textures: {

frontend/src/scripts/start-animation.ts

@@ -44,8 +44,6 @@ export const startAnimation = async (
     {
       shadowTraceCount: 16,
       paletteSize: settings.palette.length,
-    },
-    {
       colorPalette: settings.palette,
       enableHighDpiRendering: true,
       lightCutoffDistance: settings.lightCutoffDistance,