Improve movement

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

@@ -4,7 +4,7 @@ import { CommandGenerator, MoveActionCommand } from 'shared';
 export class KeyboardListener extends CommandGenerator {
   private keysDown: Set<string> = new Set();
 
-  constructor(target: Element, private moveScale: number) {
+  constructor(target: HTMLElement) {
     super();
 
     target.addEventListener('keydown', (event: KeyboardEvent) => {
@@ -31,7 +31,6 @@ export class KeyboardListener extends CommandGenerator {
     const movement = vec2.fromValues(right - left, up - down);
     if (vec2.squaredLength(movement) > 0) {
       vec2.normalize(movement, movement);
-      vec2.scale(movement, movement, this.moveScale);
       this.sendCommandToSubcribers(new MoveActionCommand(movement));
     }
   }

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

@@ -7,7 +7,7 @@ import {
 } from 'shared';
 
 export class MouseListener extends CommandGenerator {
-  constructor(target: Element) {
+  constructor(target: HTMLElement) {
     super();
 
     target.addEventListener('mousemove', (event: MouseEvent) => {

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

@@ -1,14 +1,17 @@
 import { vec2 } from 'gl-matrix';
 import {
   CommandGenerator,
-  MoveActionCommand,
   PrimaryActionCommand,
   SecondaryActionCommand,
   TernaryActionCommand,
+  MoveActionCommand,
 } from 'shared';
 
 export class TouchListener extends CommandGenerator {
   private previousPosition = vec2.create();
+  private currentPosition = vec2.create();
+
+  private previousDeltas: Array<vec2> = [];
 
   constructor(target: HTMLElement) {
     super();
@@ -19,6 +22,7 @@ export class TouchListener extends CommandGenerator {
       const touchCount = event.touches.length;
       const position = this.positionFromEvent(event);
       this.previousPosition = position;
+      this.currentPosition = position;
 
       if (touchCount == 1) {
         this.sendCommandToSubcribers(new PrimaryActionCommand(position));
@@ -33,20 +37,29 @@ export class TouchListener extends CommandGenerator {
       event.preventDefault();
 
       const position = this.positionFromEvent(event);
-
-      this.sendCommandToSubcribers(
-        new MoveActionCommand(
-          vec2.subtract(vec2.create(), position, this.previousPosition),
-        ),
+      this.previousDeltas.push(
+        vec2.subtract(vec2.create(), position, this.previousPosition),
       );
-
-      this.previousPosition = position;
+      this.currentPosition = position;
     });
   }
 
+  public generateCommands() {
+    const movement = vec2.subtract(
+      vec2.create(),
+      this.currentPosition,
+      this.previousPosition,
+    );
+    this.previousPosition = this.currentPosition;
+    if (vec2.squaredLength(movement) > 0) {
+      vec2.normalize(movement, movement);
+      this.sendCommandToSubcribers(new MoveActionCommand(movement));
+    }
+  }
+
   private positionFromEvent(event: TouchEvent): vec2 {
-    const center = Array.prototype.reduce.call(
-      event.touches,
+    const touches = Array.prototype.slice.call(event.touches);
+    const center = touches.reduce(
       (center: vec2, touch: Touch) =>
         vec2.add(center, center, vec2.fromValues(-touch.clientX, touch.clientY)),
       vec2.create(),