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(),

frontend/src/scripts/game.ts

@@ -13,7 +13,6 @@ import {
 import {
   broadcastCommands,
   deserialize,
-  prettyPrint,
   serialize,
   settings,
   SetViewAreaActionCommand,
@@ -41,6 +40,7 @@ export class Game {
   private deltaTimeCalculator = new DeltaTimeCalculator();
   private overlay: HTMLElement = document.querySelector('#overlay');
   private keyboardListener: KeyboardListener;
+  private touchListener: TouchListener;
 
   private async setupCommunication(): Promise<void> {
     await Configuration.initialize();
@@ -62,14 +62,11 @@ export class Game {
 
     this.socket.emit(TransportEvents.PlayerJoining, null);
 
-    this.keyboardListener = new KeyboardListener(document.body, 100);
+    this.keyboardListener = new KeyboardListener(document.body);
+    this.touchListener = new TouchListener(this.canvas);
 
     broadcastCommands(
-      [
-        this.keyboardListener,
-        new MouseListener(this.canvas),
-        new TouchListener(this.canvas),
-      ],
+      [this.keyboardListener, new MouseListener(this.canvas), this.touchListener],
       [this.gameObjects, new CommandReceiverSocket(this.socket)],
     );
   }
@@ -82,15 +79,15 @@ export class Game {
       [
         {
           ...InvertedTunnel.descriptor,
-          shaderCombinationSteps: [0, 2, 4, 8, 16],
+          shaderCombinationSteps: [0, 2, 6, 16],
         },
         {
           ...BlobShape.descriptor,
-          shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 8],
+          shaderCombinationSteps: [0, 1, 2, 8],
         },
         {
           ...Circle.descriptor,
-          shaderCombinationSteps: [0, 2, 4, 8, 16],
+          shaderCombinationSteps: [0, 2, 16],
         },
         {
           ...CircleLight.descriptor,
@@ -146,6 +143,7 @@ export class Game {
   private gameLoop(time: DOMHighResTimeStamp) {
     const deltaTime = this.deltaTimeCalculator.getNextDeltaTimeInMilliseconds(time);
     this.keyboardListener.generateCommands();
+    this.touchListener.generateCommands();
 
     if (this.gameObjects.camera) {
       // todo: Should only send aspect ratio
@@ -171,7 +169,7 @@ export class Game {
 
     this.renderer.renderDrawables();
 
-    this.overlay.innerText = prettyPrint(this.renderer.insights);
+    //this.overlay.innerText = prettyPrint(this.renderer.insights);
     requestAnimationFrame(this.gameLoop.bind(this));
   }
 }

frontend/src/scripts/shapes/blob-shape.ts

@@ -98,15 +98,11 @@ export class BlobShape extends Drawable {
   }
 
   public minDistance(target: vec2): number {
-    // todo
-    return 0;
-    /*return (
-      Math.min(
-        this.head.distance(target),
-        this.leftFoot.distance(target),
-        this.rightFoot.distance(target)
-      ) / 2
-    );*/
+    return Math.min(
+      this.head.distance(target),
+      this.leftFoot.distance(target),
+      this.rightFoot.distance(target),
+    );
   }
 
   protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {