Add glMatrix

frontend/src/scripts/objects/game-object.ts

@@ -1,19 +1,19 @@
 import { Typed } from '../transport/serializable';
-import { Vec2 } from '../math/vec2';
 import { IdentityManager } from '../identity/identity-manager';
 import { Command } from '../commands/command';
 import { CommandReceiver } from '../commands/command-receiver';
+import { vec2 } from 'gl-matrix';
 
 export abstract class GameObject extends Typed implements CommandReceiver {
   public readonly id = IdentityManager.generateId();
 
-  protected _position = new Vec2();
-  public get position(): Vec2 {
+  protected _position = vec2.create();
+  public get position(): vec2 {
     return this._position;
   }
 
-  protected _boundingBoxSize = new Vec2();
-  public get boundingBoxSize(): Vec2 {
+  protected _boundingBoxSize = vec2.create();
+  public get boundingBoxSize(): vec2 {
     return this._boundingBoxSize;
   }
 

frontend/src/scripts/objects/types/camera.ts

@@ -2,9 +2,12 @@ import { GameObject } from '../game-object';
 import { MoveToCommand } from '../../commands/types/move-to';
 import { ZoomCommand } from '../../commands/types/zoom';
 import { BeforeDrawCommand } from '../../commands/types/before-draw';
+import { PrimaryActionCommand } from '../../commands/types/primary-action';
+import { vec2 } from 'gl-matrix';
 
 export class Camera extends GameObject {
   private inViewArea = 1920 * 1080;
+  private cursorPosition = vec2.create();
 
   constructor() {
     super();
@@ -12,10 +15,15 @@ export class Camera extends GameObject {
     this.addCommandExecutor(BeforeDrawCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));
     this.addCommandExecutor(ZoomCommand, this.zoom.bind(this));
+    this.addCommandExecutor(
+      PrimaryActionCommand,
+      this.setCursorPosition.bind(this)
+    );
   }
 
   private draw(c: BeforeDrawCommand) {
     c.drawer.setCameraPosition(this.position);
+    c.drawer.setCursorPosition(this.cursorPosition);
     this._boundingBoxSize = c.drawer.setInViewArea(this.inViewArea);
   }
 
@@ -26,4 +34,8 @@ export class Camera extends GameObject {
   private zoom(c: ZoomCommand) {
     this.inViewArea *= c.factor;
   }
+
+  private setCursorPosition(c: PrimaryActionCommand) {
+    this.cursorPosition = c.position;
+  }
 }

frontend/src/scripts/objects/types/character.ts

@@ -1,5 +1,4 @@
 import { GameObject } from '../game-object';
-import { Vec2 } from '../../math/vec2';
 import { ObjectContainer } from '../object-container';
 import { Camera } from './camera';
 import { MoveToCommand } from '../../commands/types/move-to';
@@ -7,6 +6,7 @@ import { StepCommand } from '../../commands/types/step';
 import { KeyDownCommand } from '../../commands/types/key-down';
 import { KeyUpCommand } from '../../commands/types/key-up';
 import { SwipeCommand } from '../../commands/types/swipe';
+import { vec2 } from 'gl-matrix';
 
 export class Character extends GameObject {
   private keysDown: Set<string> = new Set();
@@ -23,12 +23,16 @@ export class Character extends GameObject {
     this.addCommandExecutor(KeyUpCommand, (c) => this.keysDown.delete(c.key));
     this.addCommandExecutor(SwipeCommand, (c) =>
       this.setPosition(
-        this.position.add(c.delta.times(this.camera.boundingBoxSize))
+        vec2.add(
+          vec2.create(),
+          this.position,
+          vec2.multiply(vec2.create(), c.delta, this.camera.boundingBoxSize)
+        )
       )
     );
   }
 
-  private setPosition(value: Vec2) {
+  private setPosition(value: vec2) {
     this._position = value;
     this.camera.sendCommand(new MoveToCommand(this.position));
   }
@@ -41,11 +45,17 @@ export class Character extends GameObject {
     const left = ~~this.keysDown.has('a');
     const right = ~~this.keysDown.has('d');
 
-    const movementVector = new Vec2(right - left, up - down);
+    const movementVector = vec2.fromValues(right - left, up - down);
     if (movementVector.length > 0) {
       this.setPosition(
-        this.position.add(
-          movementVector.normalized.scale(Character.speed * deltaTime)
+        vec2.add(
+          vec2.create(),
+          this.position,
+          vec2.scale(
+            vec2.create(),
+            vec2.normalize(movementVector, movementVector),
+            Character.speed * deltaTime
+          )
         )
       );
     }

frontend/src/scripts/objects/types/dungeon.ts

@@ -1,12 +1,12 @@
 import { GameObject } from '../game-object';
 import { DrawCommand } from '../../commands/types/draw';
-import { Vec2 } from '../../math/vec2';
-import { last } from '../../helper/last';
+import { vec2 } from 'gl-matrix';
 
 export interface Line {
-  start: Vec2;
-  end: Vec2;
-  radius: number;
+  start: vec2;
+  end: vec2;
+  radiusFrom: number;
+  radiusTo: number;
 }
 
 export class Dungeon extends GameObject {
@@ -17,33 +17,36 @@ export class Dungeon extends GameObject {
 
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
 
-    let previousHeight = 0;
-    let previousEnd = new Vec2();
+    let previousRadius = 0;
+    let previousEnd = vec2.create();
 
     for (let i = 0; i < 5000; i += 50) {
-      const height = previousHeight + (Math.random() - 0.5) * 200;
-      previousHeight = height;
-      const currentEnd = new Vec2(i, height);
+      const height = previousEnd.y + (Math.random() - 0.5) * 200;
+      const currentEnd = vec2.fromValues(i, height);
+      const currentToRadius = Math.random() * 10 + 30;
 
       this.lines.push({
         start: previousEnd,
         end: currentEnd,
-        radius: Math.random() * 15 + 15,
+        radiusFrom: previousRadius,
+        radiusTo: currentToRadius,
       });
 
       previousEnd = currentEnd;
+      previousRadius = currentToRadius;
     }
   }
 
   private draw(c: DrawCommand) {
-    const lines: Array<Vec2> = [];
+    const lines: Array<vec2> = [];
     const radii: Array<number> = [];
 
     for (let line of this.lines) {
       if (c.drawer.isOnScreen(line.start) || c.drawer.isOnScreen(line.end)) {
         lines.push(line.start);
         lines.push(line.end);
-        radii.push(line.radius);
+        radii.push(line.radiusFrom);
+        radii.push(line.radiusTo);
       }
     }