Add basic gameobject system

frontend/src/scripts/commands/command.ts

@@ -1,3 +1,6 @@
 import { Typed } from '../transport/serializable';
+import { Id } from '../identity/identity';
 
-export abstract class Command extends Typed {}
+export abstract class Command extends Typed {
+  target?: Id;
+}

frontend/src/scripts/commands/types/draw.ts

@@ -0,0 +1,8 @@
+import { Drawer } from '../../drawing/drawer';
+import { Command } from '../command';
+
+export class DrawCommand extends Command {
+  public constructor(public readonly drawer?: Drawer) {
+    super();
+  }
+}

frontend/src/scripts/commands/types/key-down.ts

@@ -1,7 +1,7 @@
 import { Command } from '../command';
 
 export class KeyDownCommand extends Command {
-  public constructor(public readonly key: string) {
+  public constructor(public readonly key?: string) {
     super();
   }
 }

frontend/src/scripts/commands/types/key-up.ts

@@ -1,7 +1,7 @@
 import { Command } from '../command';
 
 export class KeyUpCommand extends Command {
-  public constructor(public readonly key: string) {
+  public constructor(public readonly key?: string) {
     super();
   }
 }

frontend/src/scripts/commands/types/move-to.ts

@@ -0,0 +1,9 @@
+import { Drawer } from '../../drawing/drawer';
+import { Command } from '../command';
+import { Vec2 } from '../../math/vec2';
+
+export class MoveToCommand extends Command {
+  public constructor(public readonly position?: Vec2) {
+    super();
+  }
+}

frontend/src/scripts/commands/types/primary-action.ts

@@ -2,7 +2,7 @@ import { Command } from '../command';
 import { Vec2 } from '../../math/vec2';
 
 export class PrimaryActionCommand extends Command {
-  public constructor(public readonly position: Vec2) {
+  public constructor(public readonly position?: Vec2) {
     super();
   }
 }

frontend/src/scripts/commands/types/secondary-action.ts

@@ -2,7 +2,7 @@ import { Command } from '../command';
 import { Vec2 } from '../../math/vec2';
 
 export class SecondaryActionCommand extends Command {
-  public constructor(public readonly position: Vec2) {
+  public constructor(public readonly position?: Vec2) {
     super();
   }
 }

frontend/src/scripts/commands/types/step.ts

@@ -0,0 +1,9 @@
+import { Command } from '../command';
+
+export class StepCommand extends Command {
+  public constructor(
+    public readonly deltaTimeInMiliseconds?: DOMHighResTimeStamp
+  ) {
+    super();
+  }
+}

frontend/src/scripts/commands/types/swipe.ts

@@ -2,7 +2,7 @@ import { Command } from '../command';
 import { Vec2 } from '../../math/vec2';
 
 export class SwipeCommand extends Command {
-  public constructor(public readonly delta: Vec2) {
+  public constructor(public readonly delta?: Vec2) {
     super();
   }
 }

frontend/src/scripts/drawing/drawer.ts

@@ -0,0 +1,9 @@
+import { Vec2 } from '../math/vec2';
+
+export interface Drawer {
+  startWaitingForInstructions();
+  finishWaitingForInstructions();
+  setCameraPosition(position: Vec2);
+  setViewBoxSize(size: Vec2);
+  drawCornerText(text: string);
+}

frontend/src/scripts/drawing/graphics-library.ts

@@ -0,0 +1 @@
+//export function

frontend/src/scripts/drawing/renderer.ts

@@ -1,10 +1,9 @@
 const twgl = require('twgl.js');
 
-import { TimeIt } from '../helper/timing';
+import { Drawer } from './drawer';
 import { Vec2 } from '../math/vec2';
-import { ObjectContainer } from '../objects/object-container';
 
-export class Renderer {
+export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
   private programInfo: any;
   private bufferInfo: any;
@@ -12,7 +11,7 @@ export class Renderer {
 
   constructor(
     private canvas: HTMLCanvasElement,
-    private objects: ObjectContainer,
+    private overlay: HTMLElement,
     shaderSources: Array<string>
   ) {
     twgl.setDefaults({ attribPrefix: 'a_' });
@@ -42,7 +41,14 @@ export class Renderer {
     );
   }
 
-  public render(time: number) {
+  startWaitingForInstructions() {
+    //throw new Error("Method not implemented.");
+  }
+
+  private cameraPosition: Vec2;
+  private viewBoxSize: Vec2;
+
+  finishWaitingForInstructions() {
     const gl = this.gl;
 
     twgl.resizeCanvasToDisplaySize(this.canvas);
@@ -51,8 +57,8 @@ export class Renderer {
     gl.clear(gl.COLOR_BUFFER_BIT);
 
     const uniforms = {
-      cameraPosition: this.objects.camera.position.list,
-      viewBoxSize: [this.gl.canvas.width, this.gl.canvas.height],
+      cameraPosition: this.cameraPosition.list,
+      viewBoxSize: this.viewBoxSize.list,
       resolution: [this.gl.canvas.width, this.gl.canvas.height],
     };
 
@@ -63,4 +69,18 @@ export class Renderer {
     twgl.setUniforms(this.programInfo, uniforms);
     twgl.drawBufferInfo(this.gl, this.bufferInfo);
   }
+
+  setCameraPosition(position: Vec2) {
+    this.cameraPosition = position;
+  }
+
+  setViewBoxSize(size: Vec2) {
+    this.viewBoxSize = size;
+  }
+
+  drawCornerText(text: string) {
+    if (this.overlay.innerText != text) {
+      this.overlay.innerText = text;
+    }
+  }
 }

frontend/src/scripts/game-logic/game-logic.ts

@@ -1,54 +0,0 @@
-import { Command } from '../commands/command';
-import { CommandReceiver } from '../commands/command-receiver';
-import { ObjectContainer } from '../objects/object-container';
-import { KeyDownCommand } from '../commands/types/key-down';
-import { KeyUpCommand } from '../commands/types/key-up';
-import { SwipeCommand } from '../commands/types/swipe';
-
-export class GameLogic implements CommandReceiver {
-  private commandBuffer: Array<Command> = [];
-  private keysDown: Set<string> = new Set();
-
-  constructor(private objects: ObjectContainer) {}
-
-  public step(time: DOMHighResTimeStamp) {
-    while (this.commandBuffer.length > 0) {
-      const command = this.commandBuffer.pop();
-      console.log(command);
-
-      if (command instanceof KeyDownCommand) {
-        this.keysDown.add(command.key);
-      }
-
-      if (command instanceof KeyUpCommand) {
-        this.keysDown.delete(command.key);
-      }
-
-      if (command instanceof SwipeCommand) {
-        this.objects.camera.position = this.objects.camera.position.subtract(
-          command.delta.scale(200)
-        );
-      }
-    }
-
-    if (this.keysDown.has('w')) {
-      this.objects.camera.position.y += 10;
-    }
-
-    if (this.keysDown.has('s')) {
-      this.objects.camera.position.y -= 10;
-    }
-
-    if (this.keysDown.has('a')) {
-      this.objects.camera.position.x -= 10;
-    }
-
-    if (this.keysDown.has('d')) {
-      this.objects.camera.position.x += 10;
-    }
-  }
-
-  public sendCommand(command: Command) {
-    this.commandBuffer.push(command);
-  }
-}

frontend/src/scripts/game.ts

@@ -0,0 +1,60 @@
+import { WebGl2Renderer } from './drawing/renderer';
+import { KeyboardListener } from './input/keyboard-listener';
+import { MouseListener } from './input/mouse-listener';
+import { TouchListener } from './input/touch-listener';
+import { CommandBroadcaster } from './commands/command-broadcaster';
+import { ObjectContainer } from './objects/object-container';
+import { DrawCommand } from './commands/types/draw';
+import passthroughVertexShader from '../shaders/passthrough.vert';
+import distanceFragmentShader from '../shaders/dist.frag';
+import { StepCommand } from './commands/types/step';
+import { Character } from './objects/types/character';
+import { InfoText } from './objects/types/info-text';
+import { timeIt } from './helper/timing';
+
+export class Game {
+  private previousTime: DOMHighResTimeStamp = 0;
+  private objects: ObjectContainer = new ObjectContainer();
+  private renderer: WebGl2Renderer;
+
+  constructor() {
+    const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
+    const overlay: HTMLElement = document.querySelector('#overlay');
+
+    new CommandBroadcaster(
+      [
+        new KeyboardListener(document.body),
+        new MouseListener(canvas),
+        new TouchListener(canvas),
+      ],
+      [this.objects]
+    );
+
+    this.renderer = new WebGl2Renderer(canvas, overlay, [
+      passthroughVertexShader,
+      distanceFragmentShader,
+    ]);
+
+    this.initializeScene();
+    requestAnimationFrame(this.gameLoop.bind(this));
+  }
+
+  private initializeScene() {
+    this.objects.addObject(new Character(this.objects));
+    this.objects.addObject(new InfoText());
+  }
+
+  @timeIt()
+  private gameLoop(time: DOMHighResTimeStamp) {
+    const deltaTime = time - this.previousTime;
+    this.previousTime = time;
+
+    this.objects.sendCommand(new StepCommand(deltaTime));
+
+    this.renderer.startWaitingForInstructions();
+    this.objects.sendCommand(new DrawCommand(this.renderer));
+    this.renderer.finishWaitingForInstructions();
+
+    requestAnimationFrame(this.gameLoop.bind(this));
+  }
+}

frontend/src/scripts/helper/timing.ts

@@ -1,22 +1,37 @@
-export const TimeIt = (func, interval = 60) => {
-  let i = 0;
-  let values = [];
+import { InfoText } from '../objects/types/info-text';
 
-  return () => {
-    const start = performance.now();
-    func();
-    const end = performance.now();
+export function timeIt(interval = 60) {
+  return function (
+    target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor
+  ) {
+    let i = 0;
+    let previousTimes: Array<DOMHighResTimeStamp> = [];
 
-    values.push(end - start);
-    if (++i % interval == 0) {
-      values.sort();
-      console.log(
-        `${func.name}\n\tMax ${values[values.length - 1].toFixed(
+    const targetFunction = descriptor.value;
+
+    descriptor.value = function (...values) {
+      const start = performance.now();
+      targetFunction.bind(this)(...values);
+      const end = performance.now();
+
+      previousTimes.push(end - start);
+
+      if (i++ % interval == 0) {
+        previousTimes.sort();
+        const text = `Max: ${previousTimes[previousTimes.length - 1].toFixed(
           2
-        )} ms\n\tMedian ${values[Math.floor(values.length / 2)].toFixed(2)} ms`
-      );
+        )} ms\n\tMedian: ${previousTimes[
+          Math.floor(previousTimes.length / 2)
+        ].toFixed(2)} ms`;
 
-      values = [];
-    }
+        InfoText.modifyRecord(propertyKey, text);
+
+        previousTimes = [];
+      }
+    };
+
+    return descriptor;
   };
-};
+}

frontend/src/scripts/identity/identity-manager.ts

@@ -1,4 +1,8 @@
+import { Id } from './identity';
+import { v4 } from 'uuid';
+
 export class IdentityManager {
-  public static sourceId: string;
-  public static targetId: string;
+  public static generateId(): Id {
+    return v4();
+  }
 }

frontend/src/scripts/identity/identity.ts

@@ -0,0 +1 @@
+export type Id = string;

frontend/src/scripts/input/keyboard-listener.ts

@@ -3,7 +3,7 @@ import { KeyDownCommand } from '../commands/types/key-down';
 import { KeyUpCommand } from '../commands/types/key-up';
 
 export class KeyboardListener extends CommandGenerator {
-  constructor(target: Element = document.body) {
+  constructor(target: Element) {
     super();
 
     target.addEventListener('keydown', (event: KeyboardEvent) => {

frontend/src/scripts/input/mouse-listener.ts

@@ -8,7 +8,7 @@ export class MouseListener extends CommandGenerator {
   private previousPosition: Vec2 = null;
   private isMouseDown = false;
 
-  constructor(private target: Element = document.body) {
+  constructor(private target: Element) {
     super();
 
     target.addEventListener('mousedown', (event: MouseEvent) => {
@@ -48,9 +48,11 @@ export class MouseListener extends CommandGenerator {
   }
 
   private positionFromEvent(event: MouseEvent): Vec2 {
+    const bb = this.target.getBoundingClientRect();
+
     return new Vec2(
-      -event.clientX / this.target.clientWidth,
-      event.clientY / this.target.clientHeight
-    );
+      (event.clientX - bb.x) / bb.width,
+      1 - (event.clientY - bb.y) / bb.height
+    ).clamped_0_1;
   }
 }

frontend/src/scripts/input/touch-listener.ts

@@ -7,10 +7,12 @@ import { SwipeCommand } from '../commands/types/swipe';
 export class TouchListener extends CommandGenerator {
   private previousPosition: Vec2 = null;
 
-  constructor(private target: Element = document.body) {
+  constructor(private target: HTMLElement) {
     super();
 
     target.addEventListener('touchstart', (event: TouchEvent) => {
+      event.preventDefault();
+
       const touchCount = event.touches.length;
       const position = this.positionFromEvent(event);
       this.previousPosition = position;
@@ -23,6 +25,8 @@ export class TouchListener extends CommandGenerator {
     });
 
     target.addEventListener('touchmove', (event: TouchEvent) => {
+      event.preventDefault();
+
       const position = this.positionFromEvent(event);
 
       this.sendCommand(
@@ -34,9 +38,11 @@ export class TouchListener extends CommandGenerator {
   }
 
   private positionFromEvent(event: TouchEvent): Vec2 {
+    const bb = this.target.getBoundingClientRect();
+
     return new Vec2(
-      event.touches[0].clientX / this.target.clientWidth,
-      -event.touches[0].clientY / this.target.clientHeight
-    );
+      1 - (event.touches[0].clientX - bb.x) / bb.width,
+      (event.touches[0].clientY - bb.y) / bb.height
+    ).clamped_0_1;
   }
 }