Fix some issues

frontend/src/main.scss

@@ -180,6 +180,8 @@ body {
     }
 
     .other-player-arrow {
+      transition: transform 150ms;
+
       @include square($large-icon);
       @media (max-width: $breakpoint) {
         @include square($small-icon);
@@ -191,6 +193,7 @@ body {
       &.decla {
         background-color: $bright-decla;
       }
+
       &.red {
         background-color: $bright-red;
       }

frontend/src/scripts/game.ts

@@ -3,7 +3,6 @@ import { Renderer, renderNoise } from 'sdf-2d';
 import {
   broadcastCommands,
   deserialize,
-  serialize,
   TransportEvents,
   SetAspectRatioActionCommand,
   PlayerInformation,
@@ -27,7 +26,6 @@ import { CommandReceiverSocket } from './commands/receivers/command-receiver-soc
 import { startAnimation } from './start-animation';
 import { PlayerDecision } from './join-form-handler';
 import { GameObjectContainer } from './objects/game-object-container';
-import { OptionsHandler } from './options-handler';
 import parser from 'socket.io-msgpack-parser';
 import { VibrationHandler } from './vibration-handler';
 
@@ -44,7 +42,7 @@ export class Game extends CommandReceiver {
   private redPlanetCountElement = document.createElement('div');
   private announcementText = document.createElement('h2');
   private progressBar = document.createElement('div');
-  private arrowElements: Array<HTMLElement> = [];
+  private arrows: { [id: number]: HTMLElement } = {};
   private socketReceiver!: CommandReceiverSocket;
 
   constructor(
@@ -66,6 +64,7 @@ export class Game extends CommandReceiver {
     this.socket?.close();
     this.gameObjects = new GameObjectContainer(this);
     this.overlay.innerHTML = '';
+    this.isEnding = false;
     this.lastAnnouncementText = '';
     this.overlay.appendChild(this.progressBar);
     this.announcementText.innerText = '';
@@ -119,7 +118,7 @@ export class Game extends CommandReceiver {
   }
 
   private lastGameState?: UpdateGameState;
-
+  private isEnding = false;
   private lastAnnouncementText = '';
   protected commandExecutors: CommandExecutors = {
     [ServerAnnouncement.type]: (c: ServerAnnouncement) =>
@@ -127,11 +126,9 @@ export class Game extends CommandReceiver {
     [PlayerDiedCommand.type]: (c: PlayerDiedCommand) => VibrationHandler.vibrate(150),
     [UpdateGameState.type]: (c: UpdateGameState) => (this.lastGameState = c),
     [GameEnd.type]: (c: GameEnd) => {
-      const team =
-        c.winningTeam === CharacterTeam.decla
-          ? '<span class="decla">decla</span>'
-          : '<span class="red">red</span>';
+      const team = `<span class="${c.winningTeam}">${c.winningTeam}</span>`;
       this.lastAnnouncementText = `Team ${team} won 🎉`;
+      this.isEnding = true;
     },
     [UpdateOtherPlayerDirections.type]: (c: UpdateOtherPlayerDirections) =>
       (this.lastOtherPlayerDirections = c),
@@ -140,23 +137,16 @@ export class Game extends CommandReceiver {
 
   private lastOtherPlayerDirections?: UpdateOtherPlayerDirections;
   private handleOtherPlayerDirections(command: UpdateOtherPlayerDirections) {
-    this.arrowElements
-      .splice(command.otherPlayerDirections.length, this.arrowElements.length)
-      .forEach((e) => e.parentElement?.removeChild(e));
+    command.otherPlayerDirections.forEach((d) => {
+      if (!(d.id! in this.arrows)) {
+        const element = document.createElement('div');
+        this.arrows[d.id!] = element;
+        this.overlay.appendChild(element);
+      }
 
-    for (
-      let i = this.arrowElements.length;
-      i < command.otherPlayerDirections.length;
-      i++
-    ) {
-      const element = document.createElement('div');
-      this.arrowElements.push(element);
-      this.overlay.appendChild(element);
-    }
-
-    this.arrowElements.forEach((e, i) => {
-      const direction = command.otherPlayerDirections[i].direction;
-      const team = command.otherPlayerDirections[i].team;
+      const e = this.arrows[d.id!];
+      const direction = d.direction;
+      const team = d.team;
       const angle = Math.atan2(direction.y, direction.x);
       e.className = 'other-player-arrow ' + team;
 
@@ -191,6 +181,16 @@ export class Game extends CommandReceiver {
         p.y
       }px) translateX(-50%) translateY(-50%) rotate(${-angle + Math.PI / 2}rad) `;
     });
+
+    for (let id in this.arrows) {
+      if (
+        Object.prototype.hasOwnProperty.call(this.arrows, id) &&
+        command.otherPlayerDirections.find((v) => v.id?.toString() === id) === undefined
+      ) {
+        this.arrows[id].parentElement?.removeChild(this.arrows[id]);
+        delete this.arrows[id];
+      }
+    }
   }
 
   public async start(): Promise<void> {
@@ -237,7 +237,7 @@ export class Game extends CommandReceiver {
     this.renderer = renderer;
 
     this.socketReceiver.sendQueuedCommands();
-    this.gameObjects.stepObjects(deltaTime);
+    this.gameObjects.stepObjects(this.isEnding ? 0 : deltaTime);
     this.gameObjects.drawObjects(this.renderer, this.overlay, shouldChangeLayout);
 
     return this.isActive;

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));
+  }
+}

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;
 }