Add input handling

README.md

@@ -19,3 +19,7 @@ A good-looking 2D adventure.
 - lightweight object storage
 - 502 error page for ingress
 - vs code glsl formatter
+- docker engine dashboard?
+- local dev env
+- vs code config
+- prettier script

frontend/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true
+}

frontend/package.json

@@ -48,6 +48,7 @@
     "ts-loader": "^8.0.1",
     "twgl.js": "^4.15.2",
     "typescript": "^3.8.3",
+    "uuid": "^8.2.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"

frontend/src/index.html

@@ -3,11 +3,14 @@
   <head>
     <meta charset="utf-8" />
 
-        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,viewport-fit=cover"
+    />
     <meta name="theme-color" content="#b7455e" />
 
-        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
-        <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
 
     <title>Test</title>
   </head>

frontend/src/index.ts

@@ -1,4 +1,4 @@
-import './styling/main.scss';
-import { main } from './scripting/main';
+import './styles/main.scss';
+import { main } from './scripts/main';
 
 main();

frontend/src/scripting/helper/keyboard-listener.ts

@@ -1,21 +0,0 @@
-export class KeyboardListener {
-  private keysDown: Set<string> = new Set();
-
-  constructor() {
-    document.addEventListener('keydown', (event) => {
-      this.keysDown.add(event.key);
-    });
-
-    document.addEventListener('keyup', (event) => {
-      this.keysDown.delete(event.key);
-    });
-  }
-
-  isKeyDown(key: string): boolean {
-    return (
-      this.keysDown.has(key) ||
-      this.keysDown.has(key.toLowerCase()) ||
-      this.keysDown.has(key.toUpperCase())
-    );
-  }
-}

frontend/src/scripting/main.ts

@@ -1,20 +0,0 @@
-import { Renderer } from './drawing/renderer';
-import { KeyboardListener } from './helper/keyboard-listener';
-
-import passthroughVertexShader from '../shaders/passthrough.vert';
-import distanceFragmentShader from '../shaders/dist.frag';
-
-export const main = async () => {
-  try {
-    const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
-
-    const renderer = new Renderer(canvas, [
-      passthroughVertexShader,
-      distanceFragmentShader,
-    ]);
-
-    renderer.start();
-  } catch (e) {
-    console.error(e);
-  }
-};

frontend/src/scripting/shared/vec2.ts

@@ -1,4 +0,0 @@
-export interface Vec2 {
-  x: number;
-  y: number;
-}

frontend/src/scripting/shared/world-map.ts

@@ -1,18 +0,0 @@
-import { Line } from './line';
-
-export class WorldMap {
-  private lines: Array<Line> = [];
-
-  constructor() {
-    const delta = 0.01;
-    for (let i = delta; i < 30; i += delta) {
-      const linePoints = {
-        a: { x: i - delta, y: Math.sin(i - delta) },
-        b: { x: i, y: Math.sin(i) },
-      };
-      /*Vec2 tangent = lines[i].b - lines[i].a;
-            lines[i].normal = vec2(-lines[i].normal.x * tangent.y, lines[i].normal.x * tangent.x);
-            linePoints.normal = */
-    }
-  }
-}

frontend/src/scripts/commands/command-broadcaster.ts

@@ -0,0 +1,13 @@
+import { CommandReceiver } from './command-receiver';
+import { CommandGenerator } from './command-generator';
+
+export class CommandBroadcaster {
+  constructor(
+    commandGenerators: Array<CommandGenerator>,
+    commandReceivers: Array<CommandReceiver>
+  ) {
+    commandReceivers.forEach((r) =>
+      commandGenerators.forEach((g) => g.subscribe(r))
+    );
+  }
+}

frontend/src/scripts/commands/command-generator.ts

@@ -0,0 +1,14 @@
+import { CommandReceiver } from './command-receiver';
+import { Command } from './command';
+
+export class CommandGenerator {
+  private subscribers: Array<CommandReceiver> = [];
+
+  public subscribe(subscriber: CommandReceiver): void {
+    this.subscribers.push(subscriber);
+  }
+
+  protected sendCommand(command: Command): void {
+    this.subscribers.forEach((s) => s.sendCommand(command));
+  }
+}

frontend/src/scripts/commands/command-receiver.ts

@@ -0,0 +1,5 @@
+import { Command } from './command';
+
+export interface CommandReceiver {
+  sendCommand(command: Command): void;
+}

frontend/src/scripts/commands/command.ts

@@ -0,0 +1,3 @@
+import { Typed } from '../transport/serializable';
+
+export abstract class Command extends Typed {}

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

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

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

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

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

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

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

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

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

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

frontend/src/scripts/drawing/renderer.ts

@@ -0,0 +1,66 @@
+const twgl = require('twgl.js');
+
+import { TimeIt } from '../helper/timing';
+import { Vec2 } from '../math/vec2';
+import { ObjectContainer } from '../objects/object-container';
+
+export class Renderer {
+  private gl: WebGL2RenderingContext;
+  private programInfo: any;
+  private bufferInfo: any;
+  private vao: any;
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    private objects: ObjectContainer,
+    shaderSources: Array<string>
+  ) {
+    twgl.setDefaults({ attribPrefix: 'a_' });
+
+    this.gl = this.canvas.getContext('webgl2');
+    if (!this.gl) {
+      throw new Error('WebGl2 not supported');
+    }
+
+    this.programInfo = twgl.createProgramInfo(this.gl, shaderSources);
+
+    const arrays = {
+      position: {
+        numComponents: 3,
+        data: [-1.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0],
+      },
+      indices: {
+        numComponents: 3,
+        data: [0, 1, 2, 0, 2, 3],
+      },
+    };
+    this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, arrays);
+    this.vao = twgl.createVAOFromBufferInfo(
+      this.gl,
+      this.programInfo,
+      this.bufferInfo
+    );
+  }
+
+  public render(time: number) {
+    const gl = this.gl;
+
+    twgl.resizeCanvasToDisplaySize(this.canvas);
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    const uniforms = {
+      cameraPosition: this.objects.camera.position.list,
+      viewBoxSize: [this.gl.canvas.width, this.gl.canvas.height],
+      resolution: [this.gl.canvas.width, this.gl.canvas.height],
+    };
+
+    this.gl.useProgram(this.programInfo.program);
+    this.gl.bindVertexArray(this.vao);
+    //twgl.setBuffersAndAttributes(this.gl, this.programInfo, this.bufferInfo);
+
+    twgl.setUniforms(this.programInfo, uniforms);
+    twgl.drawBufferInfo(this.gl, this.bufferInfo);
+  }
+}