Refactor rendering

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

@@ -9,40 +9,46 @@ import { GameObject } from '../game-object';
 import { Lamp } from './lamp';
 
 export class Camera extends GameObject {
-  private inViewArea = 1920 * 1080 * 5;
+  private inViewAreaSize = 1920 * 1080 * 5;
   private cursorPosition = vec2.create();
-  private boundingBox: BoundingBox;
+  private _viewArea: BoundingBox;
 
   constructor() {
     super();
 
-    this.boundingBox = new BoundingBox(null);
+    this._viewArea = new BoundingBox(null);
 
     this.addCommandExecutor(BeforeRenderCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));
-    this.addCommandExecutor(
-      CursorMoveCommand,
-      this.setCursorPosition.bind(this)
-    );
+    this.addCommandExecutor(CursorMoveCommand, this.setCursorPosition.bind(this));
     this.addCommandExecutor(ZoomCommand, this.zoom.bind(this));
   }
 
-  public get viewAreaSize(): vec2 {
-    return this.boundingBox.size;
+  public get viewArea(): BoundingBox {
+    return this._viewArea;
   }
 
   private draw(c: BeforeRenderCommand) {
-    c.renderer.setCameraPosition(this.boundingBox.topLeft);
+    const canvasAspectRatio = c.renderer.canvasSize.x / c.renderer.canvasSize.y;
+
+    this.viewArea.size = vec2.fromValues(
+      Math.sqrt(this.inViewAreaSize * canvasAspectRatio),
+      Math.sqrt(this.inViewAreaSize / canvasAspectRatio)
+    );
+
+    c.renderer.setViewArea(this._viewArea);
     c.renderer.setCursorPosition(this.cursorPosition);
-    this.boundingBox.size = c.renderer.setInViewArea(this.inViewArea);
   }
 
   private moveTo(c: MoveToCommand) {
-    this.boundingBox.topLeft = c.position;
+    this._viewArea.topLeft = vec2.fromValues(
+      c.position.x - this._viewArea.size.x / 2,
+      c.position.y + this._viewArea.size.y / 2
+    );
   }
 
   private zoom(c: ZoomCommand) {
-    this.inViewArea *= c.factor;
+    this.inViewAreaSize *= c.factor;
   }
 
   private setCursorPosition(c: CursorMoveCommand) {

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

@@ -1,4 +1,4 @@
-import { vec2 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
 import { KeyDownCommand } from '../../input/commands/key-down';
 import { KeyUpCommand } from '../../input/commands/key-up';
 import { SwipeCommand } from '../../input/commands/swipe';
@@ -13,21 +13,25 @@ import { Blob } from '../../shapes/types/blob';
 import { RenderCommand } from '../../drawing/commands/render';
 import { DrawableBlob } from '../../drawing/drawables/drawable-blob';
 import { Lamp } from './lamp';
+import { Game } from '../../game';
+import { IGame } from '../../i-game';
 
 export class Character extends GameObject {
   private keysDown: Set<string> = new Set();
+  private light = new Lamp(
+    vec2.create(),
+    40,
+    vec3.fromValues(0.67, 0.0, 0.33),
+    2
+  );
 
-  private shape: DrawableBlob;
+  private shape = new DrawableBlob(vec2.create());
   private static speed = 1.5;
 
-  constructor(
-    private physics: Physics,
-    private camera: Camera,
-    private light: Lamp
-  ) {
+  constructor(private game: IGame) {
     super();
 
-    this.shape = new DrawableBlob(vec2.create());
+    game.addObject(this.light);
 
     this.addCommandExecutor(StepCommand, this.stepHandler.bind(this));
     this.addCommandExecutor(RenderCommand, this.draw.bind(this));
@@ -38,13 +42,18 @@ export class Character extends GameObject {
     this.addCommandExecutor(KeyUpCommand, (c) => this.keysDown.delete(c.key));
     this.addCommandExecutor(SwipeCommand, (c) => {
       this.tryMoving(
-        vec2.multiply(vec2.create(), c.delta, this.camera.viewAreaSize)
+        vec2.multiply(vec2.create(), c.delta, this.game.viewArea.size)
       );
     });
   }
 
+  public get position(): vec2 {
+    return this.shape.center;
+  }
+
   private draw(c: RenderCommand) {
     c.renderer.drawShape(this.shape);
+    this.light.sendCommand(c);
   }
 
   private tryMoving(delta: vec2, isFirstIteration = true) {
@@ -87,6 +96,9 @@ export class Character extends GameObject {
         )
         .sort((e) => Math.abs(e.distance));
 
+      if (intersecting.length < 1) {
+        return;
+      }
       const normal = intersecting[0].shape.normal(this.shape.center);
 
       const maxDistance = intersecting.reduce((p, c) =>
@@ -106,7 +118,7 @@ export class Character extends GameObject {
   private getNearShapesTo(
     shape: Blob
   ): Array<{ shape: IShape; distance: number }> {
-    return this.physics
+    return this.game
       .findIntersecting(shape.boundingBox)
       .filter((b) => b.shape)
       .map((b) => ({
@@ -118,7 +130,6 @@ export class Character extends GameObject {
 
   private setPosition(value: vec2) {
     this.shape.position = value;
-    this.camera.sendCommand(new MoveToCommand(value));
     vec2.add(value, value, vec2.fromValues(80, 0));
     this.light.sendCommand(new MoveToCommand(value));
   }

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

@@ -10,7 +10,7 @@ export class Lamp extends GameObject {
   constructor(center: vec2, radius: number, color: vec3, lightness: number) {
     super();
 
-    this.light = new CircleLight(this, center, radius, color, lightness);
+    this.light = new CircleLight(center, radius, color, lightness);
 
     this.addCommandExecutor(RenderCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));

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

@@ -17,7 +17,7 @@ export class Tunnel extends GameObject {
   ) {
     super();
 
-    this.shape = new DrawableTunnel(from, to, fromRadius, toRadius);
+    this.shape = new DrawableTunnel(from, to, fromRadius, toRadius, this);
     physics.addStaticBoundingBox(this.shape.boundingBox);
     this.addCommandExecutor(RenderCommand, this.draw.bind(this));
   }

frontend/src/scripts/objects/world/create-character.ts

@@ -1,27 +0,0 @@
-import { vec2, vec3 } from 'gl-matrix';
-import { Objects } from '../objects';
-import { Camera } from '../types/camera';
-import { Character } from '../types/character';
-import { Lamp } from '../types/lamp';
-import { Physics } from '../../physics/physics';
-import { GameObject } from '../game-object';
-
-export const createCharacter = (
-  objects: Objects,
-  physics: Physics
-): GameObject => {
-  const light = new Lamp(
-    vec2.create(),
-    40,
-    vec3.fromValues(0.67, 0.0, 0.33),
-    2
-  );
-
-  const camera = new Camera();
-  const character = new Character(physics, camera, light);
-  objects.addObject(light);
-  objects.addObject(camera);
-  objects.addObject(character);
-
-  return character;
-};