Add better object updates

frontend/src/scripts/game.ts

@@ -16,6 +16,7 @@ import {
   TransportEvents,
   SetAspectRatioActionCommand,
   rgb,
+  PlayerInformation,
 } from 'shared';
 import io from 'socket.io-client';
 import { KeyboardListener } from './commands/generators/keyboard-listener';
@@ -32,15 +33,16 @@ import { Polygon } from './shapes/polygon';
 
 export class Game {
   public readonly gameObjects = new GameObjectContainer(this);
-  private readonly canvas = document.querySelector('canvas') as HTMLCanvasElement;
   private renderer!: Renderer;
   private socket!: SocketIOClient.Socket;
   private promises: Promise<[void, void]>;
   private deltaTimeCalculator = new DeltaTimeCalculator();
-  private overlay: HTMLElement = document.querySelector('#overlay') as HTMLDivElement;
 
-  constructor(playerDecision: PlayerDecision) {
-    console.log(playerDecision.server);
+  constructor(
+    private readonly playerDecision: PlayerDecision,
+    private readonly canvas: HTMLCanvasElement,
+    private readonly overlay: HTMLElement,
+  ) {
     this.promises = Promise.all([
       this.setupCommunication(playerDecision.server),
       this.setupRenderer(),
@@ -66,7 +68,9 @@ export class Game {
       this.socket.emit(TransportEvents.Pong);
     });
 
-    this.socket.emit(TransportEvents.PlayerJoining, null);
+    this.socket.emit(TransportEvents.PlayerJoining, {
+      name: this.playerDecision.playerName,
+    } as PlayerInformation);
 
     broadcastCommands(
       [
@@ -98,7 +102,7 @@ export class Game {
         },
         {
           ...CircleLight.descriptor,
-          shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
+          shaderCombinationSteps: [0, 1, 2, 4, 8],
         },
         {
           ...Flashlight.descriptor,

frontend/src/scripts/landing-page-background.ts

@@ -18,10 +18,9 @@ const LangindPagePolygon = NoisyPolygonFactory(
 );
 
 export class LandingPageBackground {
-  private readonly canvas = document.querySelector('canvas') as HTMLCanvasElement;
   private renderer!: Renderer;
 
-  constructor() {
+  constructor(private readonly canvas: HTMLCanvasElement) {
     this.start();
   }
 

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, UpdateMessage } from 'shared';
 
 import { Game } from '../game';
 import { ViewObject } from './view-object';
@@ -14,6 +14,10 @@ export class Camera extends GameObject implements ViewObject {
     super(null);
   }
 
+  public update(updates: Array<UpdateMessage>) {
+    throw new Error();
+  }
+
   public step(deltaTimeInMilliseconds: number): void {}
 
   public draw(renderer: Renderer) {

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

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { CharacterBase, Circle, Id } from 'shared';
+import { CharacterBase, Circle, Id, UpdateMessage } from 'shared';
 
 import { BlobShape } from '../shapes/blob-shape';
 import { ViewObject } from './view-object';
@@ -19,6 +19,10 @@ export class CharacterView extends CharacterBase implements ViewObject {
     this.shape = new BlobShape(colorIndex);
   }
 
+  public update(updates: Array<UpdateMessage>) {
+    updates.forEach((u) => ((this as any)[u.key] = u.value));
+  }
+
   public get position(): vec2 {
     return this.head!.center;
   }

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

@@ -5,22 +5,23 @@ import {
   CreateObjectsCommand,
   CreatePlayerCommand,
   DeleteObjectsCommand,
+  GameObject,
   Id,
   UpdateObjectsCommand,
 } from 'shared';
 import { Game } from '../game';
 import { Camera } from './camera';
-import { CharacterView } from './character-view';
+import { PlayerCharacterView } from './player-character-view';
 import { ViewObject } from './view-object';
 
 export class GameObjectContainer extends CommandReceiver {
   protected objects: Map<Id, ViewObject> = new Map();
-  public player!: CharacterView;
+  public player!: PlayerCharacterView;
   public camera!: Camera;
 
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
-      this.player = c.character as CharacterView;
+      this.player = c.character as PlayerCharacterView;
       this.camera = new Camera(this.game);
       this.addObject(this.player);
       this.addObject(this.camera);
@@ -33,13 +34,7 @@ export class GameObjectContainer extends CommandReceiver {
       c.ids.forEach((id: Id) => this.objects.delete(id)),
 
     [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
-      c.objects.forEach((o) => {
-        this.objects.delete(o.id);
-        this.addObject(o as ViewObject);
-        if (o.id === this.player.id) {
-          this.player = o as CharacterView;
-        }
-      });
+      c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
     },
   };
 

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, UpdateMessage } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { ViewObject } from './view-object';
 
@@ -16,6 +16,10 @@ export class LampView extends LampBase implements ViewObject {
     this.light = new CircleLight(center, color, lightness);
   }
 
+  public update(message: Array<UpdateMessage>): void {
+    throw new Error('Method not implemented.');
+  }
+
   public step(deltaTimeInMilliseconds: number): void {}
 
   public draw(renderer: Renderer): void {

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

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable, Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
+import { CommandExecutors, Id, Random, PlanetBase, UpdateMessage } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { Polygon } from '../shapes/polygon';
 import { ViewObject } from './view-object';
@@ -18,6 +18,10 @@ export class PlanetView extends PlanetBase implements ViewObject {
     (this.shape as any).randomOffset = Random.getRandom();
   }
 
+  public update(message: Array<UpdateMessage>): void {
+    throw new Error('Method not implemented.');
+  }
+
   public step(deltaTimeInMilliseconds: number): void {
     (this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
   }

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

@@ -0,0 +1,37 @@
+import { vec2 } from 'gl-matrix';
+import { Renderer } from 'sdf-2d';
+import { Circle, Id, PlayerCharacterBase, UpdateMessage } from 'shared';
+
+import { BlobShape } from '../shapes/blob-shape';
+import { ViewObject } from './view-object';
+
+export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
+  private shape: BlobShape;
+
+  constructor(
+    id: Id,
+    name: string,
+    colorIndex: number,
+    head?: Circle,
+    leftFoot?: Circle,
+    rightFoot?: Circle,
+  ) {
+    super(id, name, colorIndex, head, leftFoot, rightFoot);
+    this.shape = new BlobShape(colorIndex);
+  }
+
+  public update(updates: Array<UpdateMessage>) {
+    updates.forEach((u) => ((this as any)[u.key] = u.value));
+  }
+
+  public get position(): vec2 {
+    return this.head!.center;
+  }
+
+  public step(deltaTimeInMilliseconds: number): void {}
+
+  public draw(renderer: Renderer): void {
+    this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
+    renderer.addDrawable(this.shape);
+  }
+}

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

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { CircleLight, Renderer } from 'sdf-2d';
-import { Id, ProjectileBase, rgb } from 'shared';
+import { Id, ProjectileBase, rgb, UpdateMessage } from 'shared';
 import { ViewObject } from './view-object';
 import { Circle } from '../shapes/circle';
 
@@ -14,7 +14,14 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
     this.light = new CircleLight(center, rgb(1, 0.5, 0), 0.15);
   }
 
-  public step(deltaTimeInMilliseconds: number): void {}
+  update(updates: Array<UpdateMessage>): void {
+    updates.forEach((u) => ((this as any)[u.key] = u.value));
+  }
+
+  public step(deltaTimeInMilliseconds: number): void {
+    this.circle.center = this.center;
+    this.light.center = this.center;
+  }
 
   public draw(renderer: Renderer): void {
     renderer.addDrawable(this.circle);

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

@@ -1,7 +1,8 @@
 import { Renderer } from 'sdf-2d';
-import { GameObject } from 'shared';
+import { GameObject, UpdateMessage } from 'shared';
 
 export interface ViewObject extends GameObject {
+  update(updates: Array<UpdateMessage>): void;
   step(deltaTimeInMilliseconds: number): void;
   draw(renderer: Renderer): void;
 }