Refactor frontend

frontend/src/scripts/helper/extrapolators/circle-extrapolator.ts

@@ -0,0 +1,23 @@
+import { vec2 } from 'gl-matrix';
+import { Circle } from 'shared';
+import { LinearExtrapolator } from './linear-extrapolator';
+import { Vec2Extrapolator } from './vec2-extrapolator';
+
+export class CircleExtrapolator {
+  private center: Vec2Extrapolator;
+  private radius: LinearExtrapolator;
+
+  constructor(currentValue: Circle) {
+    this.center = new Vec2Extrapolator(currentValue.center);
+    this.radius = new LinearExtrapolator(currentValue.radius);
+  }
+
+  public addFrame(value: Circle, rateOfChange: Circle) {
+    this.center.addFrame(value.center, rateOfChange.center);
+    this.radius.addFrame(value.radius, rateOfChange.radius);
+  }
+
+  public getValue(deltaTime: number): Circle {
+    return new Circle(this.center.getValue(deltaTime), this.radius.getValue(deltaTime));
+  }
+}

frontend/src/scripts/helper/extrapolators/linear-extrapolator.ts

@@ -0,0 +1,38 @@
+import { clamp } from 'shared';
+
+export class LinearExtrapolator {
+  private velocity = 0;
+  private compensationVelocity = 0;
+  private timeSinceSet = 0;
+
+  constructor(private currentValue: number) {}
+
+  public addFrame(value: number, rateOfChange: number) {
+    this.timeSinceSet = 0;
+    const differenceFromCurrent = value - this.currentValue;
+
+    if (Math.abs(differenceFromCurrent) > 200) {
+      this.currentValue = value;
+      this.compensationVelocity = 0;
+    } else {
+      this.compensationVelocity = differenceFromCurrent / (1 / 30);
+    }
+
+    this.velocity = rateOfChange;
+  }
+
+  public getValue(deltaTime: number): number {
+    this.currentValue += deltaTime * this.velocity;
+
+    const compensationTimeLeft = 1 / 30 - this.timeSinceSet;
+
+    if (compensationTimeLeft > 0) {
+      this.currentValue +=
+        Math.min(compensationTimeLeft, deltaTime) * this.compensationVelocity;
+    }
+
+    this.timeSinceSet += deltaTime;
+
+    return this.currentValue;
+  }
+}

frontend/src/scripts/helper/extrapolators/vec2-extrapolator.ts

@@ -0,0 +1,21 @@
+import { vec2 } from 'gl-matrix';
+import { LinearExtrapolator } from './linear-extrapolator';
+
+export class Vec2Extrapolator {
+  private x: LinearExtrapolator;
+  private y: LinearExtrapolator;
+
+  constructor(currentValue: vec2) {
+    this.x = new LinearExtrapolator(currentValue.x);
+    this.y = new LinearExtrapolator(currentValue.y);
+  }
+
+  public addFrame(value: vec2, rateOfChange: vec2) {
+    this.x.addFrame(value.x, rateOfChange.x);
+    this.y.addFrame(value.y, rateOfChange.y);
+  }
+
+  public getValue(deltaTime: number): vec2 {
+    return vec2.fromValues(this.x.getValue(deltaTime), this.y.getValue(deltaTime));
+  }
+}

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;