Refactor frontend

frontend/package.json

@@ -47,7 +47,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.27.0",
     "sass-loader": "^8.0.2",
-    "sdf-2d": "^0.7.1",
+    "sdf-2d": "^0.7.2",
     "shared": "file:../shared",
     "socket.io-client": "^2.3.1",
     "socket.io-msgpack-parser": "^2.0.0",

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

@@ -1,4 +1,3 @@
-import { Renderer } from 'sdf-2d';
 import {
   Command,
   CommandExecutors,
@@ -20,28 +19,20 @@ import { CharacterView } from './types/character-view';
 export class GameObjectContainer extends CommandReceiver {
   protected objects: Map<Id, GameObject> = new Map();
   public player!: CharacterView;
-  public camera!: Camera;
+  public camera: Camera = new Camera(this.game);
 
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
-      if (this.camera) {
-        this.deleteObject(this.camera.id);
-      }
-
       this.player = c.character as CharacterView;
       this.player.isMainCharacter = true;
-
-      this.camera = new Camera(this.game);
-
       this.addObject(this.player);
-      this.addObject(this.camera);
     },
 
     [CreateObjectsCommand.type]: (c: CreateObjectsCommand) =>
       c.objects.forEach((o) => this.addObject(o as GameObject)),
 
     [StepCommand.type]: (c: StepCommand) => {
-      this.objects.forEach((o) => o.handleCommand(c));
+      this.defaultCommandExecutor(c);
 
       if (this.player) {
         this.camera.center = this.player.position;
@@ -68,6 +59,7 @@ export class GameObjectContainer extends CommandReceiver {
 
   protected defaultCommandExecutor(c: Command) {
     this.objects.forEach((o) => o.handleCommand(c));
+    this.camera.handleCommand(c);
   }
 
   private addObject(object: GameObject) {

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

@@ -2,19 +2,19 @@ import { vec2 } from 'gl-matrix';
 import {
   calculateViewArea,
   CommandExecutors,
-  GameObject,
+  CommandReceiver,
   mixRgb,
   settings,
 } from 'shared';
 import { RenderCommand } from '../../commands/types/render';
 import { Game } from '../../game';
 
-export class Camera extends GameObject {
+export class Camera extends CommandReceiver {
   public center: vec2 = vec2.create();
   private aspectRatio?: number;
 
   constructor(private game: Game) {
-    super(null);
+    super();
   }
 
   protected commandExecutors: CommandExecutors = {

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

@@ -12,7 +12,7 @@ import {
 import { BeforeDestroyCommand } from '../../commands/types/before-destroy';
 import { RenderCommand } from '../../commands/types/render';
 import { StepCommand } from '../../commands/types/step';
-import { CircleExtrapolator } from '../../helper/circle-extrapolator';
+import { CircleExtrapolator } from '../../helper/extrapolators/circle-extrapolator';
 import { BlobShape } from '../../shapes/blob-shape';
 import { SoundHandler, Sounds } from '../../sound-handler';
 import { VibrationHandler } from '../../vibration-handler';

frontend/src/scripts/objects/types/projectile-view.ts

@@ -10,7 +10,7 @@ import {
 } from 'shared';
 import { RenderCommand } from '../../commands/types/render';
 import { StepCommand } from '../../commands/types/step';
-import { Vec2Extrapolator } from '../../helper/vec2-extrapolator';
+import { Vec2Extrapolator } from '../../helper/extrapolators/vec2-extrapolator';
 
 export class ProjectileView extends ProjectileBase {
   private light: CircleLight;