Improve multiplayer

frontend/src/scripts/objects/camera.ts

@@ -1,36 +1,29 @@
 import { vec2 } from 'gl-matrix';
-import { CommandExecutors, GameObject, Rectangle, settings } from 'shared';
+import { calculateViewArea, CommandExecutors, GameObject } from 'shared';
 import { RenderCommand } from '../commands/types/render';
+import { Game } from '../game';
 
 export class Camera extends GameObject {
-  private static readonly inViewAreaSize = settings.inViewAreaSize;
-  private _viewArea = new Rectangle();
+  public center: vec2 = vec2.create();
+
+  private aspectRatio?: number;
 
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: this.draw.bind(this),
   };
 
-  constructor(public center: vec2 = vec2.create()) {
+  constructor(private game: Game) {
     super(null);
   }
 
-  public get viewArea(): Rectangle {
-    return this._viewArea;
-  }
-
   private draw(c: RenderCommand) {
     const canvasAspectRatio = c.renderer.canvasSize.x / c.renderer.canvasSize.y;
+    if (canvasAspectRatio !== this.aspectRatio) {
+      this.aspectRatio = canvasAspectRatio;
+      this.game.aspectRatioChanged(canvasAspectRatio);
+    }
 
-    this._viewArea.topLeft = vec2.fromValues(
-      this.center.x - this._viewArea.size.x / 2,
-      this.center.y + this._viewArea.size.y / 2,
-    );
-
-    this._viewArea.size = vec2.fromValues(
-      Math.sqrt(Camera.inViewAreaSize * canvasAspectRatio),
-      Math.sqrt(Camera.inViewAreaSize / canvasAspectRatio),
-    );
-
-    c.renderer.setViewArea(this._viewArea.topLeft, this._viewArea.size);
+    const viewArea = calculateViewArea(this.center, canvasAspectRatio);
+    c.renderer.setViewArea(viewArea.topLeft, viewArea.size);
   }
 }

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

@@ -10,6 +10,7 @@ import {
   StepCommand,
   UpdateObjectsCommand,
 } from 'shared';
+import { Game } from '../game';
 import { Camera } from './camera';
 import { CharacterView } from './character-view';
 
@@ -21,7 +22,7 @@ export class GameObjectContainer extends CommandReceiver {
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
       this.player = c.character as CharacterView;
-      this.camera = new Camera();
+      this.camera = new Camera(this.game);
       this.addObject(this.player);
       this.addObject(this.camera);
     },
@@ -49,6 +50,10 @@ export class GameObjectContainer extends CommandReceiver {
     },
   };
 
+  constructor(private game: Game) {
+    super();
+  }
+
   protected defaultCommandExecutor(c: Command) {
     this.objects.forEach((o) => o.sendCommand(c));
   }