Fix some issues

frontend/src/scripts/objects/camera.ts

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { calculateViewArea, GameObject, mixRgb, settings } from 'shared';
+import { calculateViewArea, GameObject, mixRgb, settings, UpdateProperty } from 'shared';
 
 import { Game } from '../game';
 import { ViewObject } from './view-object';
@@ -14,6 +14,8 @@ export class Camera extends GameObject implements ViewObject {
     super(null);
   }
 
+  public updateProperties(update: UpdateProperty[]): void {}
+
   public beforeDestroy(): void {}
 
   public step(deltaTimeInSeconds: number): void {}

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

@@ -6,6 +6,7 @@ import {
   CreatePlayerCommand,
   DeleteObjectsCommand,
   Id,
+  PropertyUpdatesForObjects,
   RemoteCallsForObjects,
 } from 'shared';
 import { Game } from '../game';
@@ -41,6 +42,9 @@ export class GameObjectContainer extends CommandReceiver {
         this.objects.get(c.id)?.processRemoteCalls(c.calls),
       ),
 
+    [PropertyUpdatesForObjects.type]: (c: PropertyUpdatesForObjects) =>
+      c.updates.forEach((c) => this.objects.get(c.id)?.updateProperties(c.updates)),
+
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
       c.ids.forEach((id: Id) => this.deleteObject(id)),
   };
@@ -50,11 +54,11 @@ export class GameObjectContainer extends CommandReceiver {
   }
 
   public stepObjects(deltaTimeInSeconds: number) {
+    this.objects.forEach((o) => o.step(deltaTimeInSeconds));
+
     if (this.player) {
       this.camera.center = this.player.position;
     }
-
-    this.objects.forEach((o) => o.step(deltaTimeInSeconds));
   }
 
   public drawObjects(

frontend/src/scripts/objects/lamp-view.ts

@@ -1,6 +1,6 @@
 import { vec2, vec3 } from 'gl-matrix';
 import { CircleLight, Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, LampBase } from 'shared';
+import { CommandExecutors, Id, LampBase, UpdateProperty } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { ViewObject } from './view-object';
 
@@ -16,6 +16,8 @@ export class LampView extends LampBase implements ViewObject {
     this.light = new CircleLight(center, color, lightness);
   }
 
+  public updateProperties(update: UpdateProperty[]): void {}
+
   public step(deltaTimeInSeconds: number): void {}
 
   public beforeDestroy(): void {}

frontend/src/scripts/objects/planet-view.ts

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
+import { CommandExecutors, Id, Random, PlanetBase, UpdateProperty } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { PlanetShape } from '../shapes/planet-shape';
 import { ViewObject } from './view-object';
@@ -30,6 +30,8 @@ export class PlanetView extends PlanetBase implements ViewObject {
     this.ownershipProgess.className = 'ownership';
   }
 
+  public updateProperties(update: UpdateProperty[]): void {}
+
   public step(deltaTimeInSeconds: number): void {
     this.shape.randomOffset += deltaTimeInSeconds / 4;
     this.shape.colorMixQ = this.ownership;

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

@@ -1,6 +1,14 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { Circle, Id, PlayerCharacterBase, CharacterTeam, settings } from 'shared';
+import {
+  Circle,
+  Id,
+  PlayerCharacterBase,
+  CharacterTeam,
+  settings,
+  UpdateProperty,
+} from 'shared';
+import { CircleExtrapolator } from '../helper/circle-extrapolator';
 import { BlobShape } from '../shapes/blob-shape';
 import { SoundHandler, Sounds } from '../sound-handler';
 import { VibrationHandler } from '../vibration-handler';
@@ -15,6 +23,10 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
 
   public isMainCharacter = false;
 
+  private leftFootExtrapolator: CircleExtrapolator;
+  private rightFootExtrapolator: CircleExtrapolator;
+  private headExtrapolator: CircleExtrapolator;
+
   constructor(
     id: Id,
     name: string,
@@ -29,6 +41,10 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     super(id, name, killCount, deathCount, team, health, head, leftFoot, rightFoot);
     this.shape = new BlobShape(settings.colorIndices[team]);
 
+    this.leftFootExtrapolator = new CircleExtrapolator(this.leftFoot!);
+    this.rightFootExtrapolator = new CircleExtrapolator(this.rightFoot!);
+    this.headExtrapolator = new CircleExtrapolator(this.head!);
+
     this.previousHealth = this.health;
     this.nameElement.className = 'player-tag ' + this.team;
     this.nameElement.innerText = this.name;
@@ -40,6 +56,20 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     return this.head!.center;
   }
 
+  public updateProperties(update: Array<UpdateProperty>) {
+    update.forEach((u) => {
+      if (u.propertyKey === 'head') {
+        this.headExtrapolator.addFrame(u.propertyValue, u.rateOfChange);
+      }
+      if (u.propertyKey === 'leftFoot') {
+        this.leftFootExtrapolator.addFrame(u.propertyValue, u.rateOfChange);
+      }
+      if (u.propertyKey === 'rightFoot') {
+        this.rightFootExtrapolator.addFrame(u.propertyValue, u.rateOfChange);
+      }
+    });
+  }
+
   public setHealth(health: number) {
     const previousHealth = this.health;
     super.setHealth(health);
@@ -57,10 +87,14 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
 
       this.previousHealth = this.health;
     }
+
+    this.head! = this.headExtrapolator.getValue(deltaTimeInSeconds);
+    this.leftFoot! = this.leftFootExtrapolator.getValue(deltaTimeInSeconds);
+    this.rightFoot! = this.rightFootExtrapolator.getValue(deltaTimeInSeconds);
   }
 
   public onShoot(strength: number) {
-    SoundHandler.play(Sounds.shoot, (0.3 * 2 * strength) / settings.playerMaxStrength);
+    SoundHandler.play(Sounds.shoot, (0.6 * strength) / settings.playerMaxStrength);
   }
 
   public beforeDestroy(): void {

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

@@ -1,12 +1,15 @@
 import { vec2 } from 'gl-matrix';
 import { CircleLight, ColorfulCircle, Renderer } from 'sdf-2d';
-import { CharacterTeam, Id, ProjectileBase, settings } from 'shared';
+import { CharacterTeam, Id, ProjectileBase, settings, UpdateProperty } from 'shared';
+import { Vec2Extrapolator } from '../helper/vec2-extrapolator';
 import { ViewObject } from './view-object';
 
 export class ProjectileView extends ProjectileBase implements ViewObject {
   private circle: ColorfulCircle;
   private light: CircleLight;
 
+  private centerExtrapolator: Vec2Extrapolator;
+
   constructor(
     id: Id,
     center: vec2,
@@ -21,11 +24,19 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
       settings.paletteDim[settings.colorIndices[team]],
       0,
     );
+    this.centerExtrapolator = new Vec2Extrapolator(center);
+  }
+
+  public updateProperties(update: UpdateProperty[]): void {
+    update.forEach((u) => {
+      this.centerExtrapolator.addFrame(u.propertyValue, u.rateOfChange);
+    });
   }
 
   public step(deltaTimeInSeconds: number): void {
     super.step(deltaTimeInSeconds);
 
+    this.center = this.centerExtrapolator.getValue(deltaTimeInSeconds);
     this.circle.center = this.center;
     this.light.center = this.center;
     this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength;

frontend/src/scripts/objects/view-object.ts

@@ -1,8 +1,9 @@
 import { Renderer } from 'sdf-2d';
-import { GameObject } from 'shared';
+import { GameObject, UpdateProperty } from 'shared';
 
 export interface ViewObject extends GameObject {
   step(deltaTimeInMilliseconds: number): void;
   draw(renderer: Renderer, overlay: HTMLElement, shouldChangeLayout: boolean): void;
+  updateProperties(update: Array<UpdateProperty>): void;
   beforeDestroy(): void;
 }