Fix touch shooting and typo

frontend/package-lock.json

@@ -33,7 +33,7 @@
         "resolve-url-loader": "^3.1.1",
         "sass": "^1.27.0",
         "sass-loader": "^8.0.2",
-        "sdf-2d": "^0.6.2",
+        "sdf-2d": "^0.7.0",
         "shared": "file:../shared",
         "socket.io-client": "^2.3.1",
         "socket.io-msgpack-parser": "^2.0.0",
@@ -15128,9 +15128,9 @@
       }
     },
     "node_modules/sdf-2d": {
-      "version": "0.6.2",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.7.0.tgz",
-      "integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==",
+      "integrity": "sha512-ZEpjVmCUVVndOI2axY0ZyGpkw1IYPdxiaxGGsN4b5hjKnPZKapc28405vn0az8H0CyLem5eRbECWix0anRC58A==",
       "dev": true,
       "dependencies": {
         "gl-matrix": "^3.3.0",
@@ -20716,13 +20716,15 @@
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz",
       "integrity": "sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/auth-types": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.1.tgz",
       "integrity": "sha512-/+gBHb1O9x/YlG7inXfxff/6X3BPZt4zgBv4kql6HEmdzNQCodIRlEYnI+/da+lN+dha7PjaFH7C7ewMmfV7rw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/component": {
       "version": "0.1.19",
@@ -20779,7 +20781,8 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.14.0.tgz",
       "integrity": "sha512-WF8IBwHzZDhwyOgQnmB0pheVrLNP78A8PGxk1nxb/Nrgh1amo4/zYvFMGgSsTeaQK37xMYS/g7eS948te/dJxw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/functions": {
       "version": "0.5.1",
@@ -20817,7 +20820,8 @@
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz",
       "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/logger": {
       "version": "0.2.6",
@@ -20843,7 +20847,8 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz",
       "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/performance": {
       "version": "0.4.2",
@@ -20912,7 +20917,8 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.13.tgz",
       "integrity": "sha512-pL7b8d5kMNCCL0w9hF7pr16POyKkb3imOW7w0qYrhBnbyJTdVxMWZhb0HxCFyQWC0w3EiIFFmxoz8NTFZDEFog==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@firebase/util": {
       "version": "0.3.2",
@@ -21625,7 +21631,8 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "adjust-sourcemap-loader": {
       "version": "3.0.0",
@@ -21708,13 +21715,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -31854,9 +31863,9 @@
       }
     },
     "sdf-2d": {
-      "version": "0.6.2",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.7.0.tgz",
-      "integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==",
+      "integrity": "sha512-ZEpjVmCUVVndOI2axY0ZyGpkw1IYPdxiaxGGsN4b5hjKnPZKapc28405vn0az8H0CyLem5eRbECWix0anRC58A==",
       "dev": true,
       "requires": {
         "gl-matrix": "^3.3.0",

frontend/package.json

@@ -47,7 +47,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.27.0",
     "sass-loader": "^8.0.2",
-    "sdf-2d": "^0.6.3",
+    "sdf-2d": "^0.7.0",
     "shared": "file:../shared",
     "socket.io-client": "^2.3.1",
     "socket.io-msgpack-parser": "^2.0.0",

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(
+      const delta = vec2.subtract(vec2.create(), touchPosition, this.touchStartPosition);
-        vec2.create(),
+      vec2.scale(delta, delta, this.deltaScaling);
-        touchPosition,
+      const deltaLength = vec2.length(delta);
-        this.touchStartPosition,
+
-      );
+      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));
+      vec2.scale(delta, delta, Math.min(1, maxLength / deltaLength));
-      this.joystickButton.style.transform = `translateX(${movement.x}px) translateY(${movement.y}px) translateX(-50%) translateY(-50%)`;
+      this.joystickButton.style.transform = `translateX(${delta.x}px) translateY(${delta.y}px) translateX(-50%) translateY(-50%)`;
 
-      vec2.set(movement, movement.x, -movement.y);
+      vec2.set(delta, delta.x, -delta.y);
-      if (length > 10) {
+      if (deltaLength > this.deadZone) {
-        this.sendCommandToSubcribers(
+        this.sendCommandToSubscribers(
-          new MoveActionCommand(vec2.normalize(movement, movement)),
+          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,

package.json

@@ -7,10 +7,7 @@
   "scripts": {
     "build": "cd shared && npm run build && cd ../frontend && npm run build && cd ../backend && npm run build",
     "lint": "eslint './**/src/**/*.{js,ts,json}' --fix",
-    "frontend": "yarn workspace decla.red-frontend start",
     "init": "cd shared && npm install && cd ../frontend && npm install && cd ../backend && npm install",
-    "shared": "yarn workspace shared start",
-    "backend": "yarn workspace declared-server start",
     "start": "concurrently --kill-others-on-fail \"cd shared && npm start\"  \"cd backend && npm start\"  \"cd frontend && npm start\""
   }
 }

shared/src/commands/command-generator.ts

@@ -8,7 +8,7 @@ export class CommandGenerator {
     this.subscribers.push(subscriber);
   }
 
-  protected sendCommandToSubcribers(command: Command): void {
+  protected sendCommandToSubscribers(command: Command): void {
     this.subscribers.forEach((s) => s.sendCommand(command));
   }
 }