Fix some issues

frontend/src/scripts/helper/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/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/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));
+  }
+}