Add better object updates

backend/src/game-server.ts

@@ -1,7 +1,13 @@
 import { PhysicalContainer } from './physics/containers/physical-container';
 import { Player } from './players/player';
 import ioserver from 'socket.io';
-import { TransportEvents, deserialize, settings, ServerInformation } from 'shared';
+import {
+  TransportEvents,
+  deserialize,
+  settings,
+  ServerInformation,
+  PlayerInformation,
+} from 'shared';
 import { createWorld } from './map/create-world';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { Options } from './options';
@@ -22,8 +28,8 @@ export class GameServer {
     this.objects.initialize();
 
     io.on('connection', (socket: SocketIO.Socket) => {
-      socket.on(TransportEvents.PlayerJoining, () => {
+      socket.on(TransportEvents.PlayerJoining, (playerInfo: PlayerInformation) => {
-        const player = new Player(this.objects, socket);
+        const player = new Player(playerInfo, this.objects, socket);
         this.players.push(player);
         socket.on(TransportEvents.PlayerToServer, (json: string) => {
           const command = deserialize(json);

backend/src/objects/circle-physical.ts

@@ -1,5 +1,5 @@
 import { vec2 } from 'gl-matrix';
-import { Circle, GameObject, serializesTo, settings } from 'shared';
+import { Circle, GameObject, serializesTo, settings, UpdateObjectMessage } from 'shared';
 import { PhysicalBase } from '../physics/physicals/physical-base';
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
 import { BoundingBoxBase } from '../physics/bounding-boxes/bounding-box-base';
@@ -30,6 +30,10 @@ export class CirclePhysical implements Circle, DynamicPhysical, ReactsToCollisio
     this.recalculateBoundingBox();
   }
 
+  public calculateUpdates(): UpdateObjectMessage | null {
+    return null;
+  }
+
   public get boundingBox(): BoundingBoxBase {
     return this._boundingBox;
   }

backend/src/objects/player-character-physical.ts

@@ -0,0 +1,318 @@
+import { vec2 } from 'gl-matrix';
+import {
+  id,
+  settings,
+  MoveActionCommand,
+  serializesTo,
+  clamp,
+  last,
+  GameObject,
+  Circle,
+  PlayerCharacterBase,
+} from 'shared';
+import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
+import { CirclePhysical } from './circle-physical';
+import { PhysicalContainer } from '../physics/containers/physical-container';
+import { BoundingBoxBase } from '../physics/bounding-boxes/bounding-box-base';
+import { ProjectilePhysical } from './projectile-physical';
+import { interpolateAngles } from '../helper/interpolate-angles';
+import { forceAtPosition } from '../physics/functions/force-at-position';
+import { getBoundingBoxOfCircle } from '../physics/functions/get-bounding-box-of-circle';
+import { PlanetPhysical } from './planet-physical';
+import { ReactsToCollision } from '../physics/physicals/reacts-to-collision';
+import { UpdateObjectMessage } from 'shared/lib/src/objects/update-object-message';
+import { UpdateGameObjectMessage } from '../update-game-object-message';
+
+@serializesTo(PlayerCharacterBase)
+export class PlayerCharacterPhysical
+  extends PlayerCharacterBase
+  implements DynamicPhysical, ReactsToCollision {
+  public readonly canCollide = true;
+  public readonly canMove = true;
+
+  private static readonly headRadius = 50;
+  private static readonly feetRadius = 20;
+  // offsets are meassured from (0, 0)
+  private static readonly desiredHeadOffset = vec2.fromValues(0, 65);
+  private static readonly desiredLeftFootOffset = vec2.fromValues(-20, 0);
+  private static readonly desiredRightFootOffset = vec2.fromValues(20, 0);
+  private static readonly centerOfMass = vec2.scale(
+    vec2.create(),
+    vec2.add(
+      vec2.create(),
+      vec2.add(
+        vec2.create(),
+        PlayerCharacterPhysical.desiredHeadOffset,
+        PlayerCharacterPhysical.desiredLeftFootOffset,
+      ),
+      PlayerCharacterPhysical.desiredRightFootOffset,
+    ),
+    1 / 3,
+  );
+
+  private static readonly headOffset = vec2.subtract(
+    vec2.create(),
+    PlayerCharacterPhysical.desiredHeadOffset,
+    PlayerCharacterPhysical.centerOfMass,
+  );
+  private static readonly leftFootOffset = vec2.subtract(
+    vec2.create(),
+    PlayerCharacterPhysical.desiredLeftFootOffset,
+    PlayerCharacterPhysical.centerOfMass,
+  );
+  private static readonly rightFootOffset = vec2.subtract(
+    vec2.create(),
+    PlayerCharacterPhysical.desiredRightFootOffset,
+    PlayerCharacterPhysical.centerOfMass,
+  );
+
+  public static readonly boundRadius =
+    (PlayerCharacterPhysical.headRadius + PlayerCharacterPhysical.feetRadius * 2) * 2;
+
+  private isDestroyed = false;
+  private direction = 0;
+  private currentPlanet?: PlanetPhysical;
+  private lastMovementWasRelative = false;
+  private secondsSinceOnSurface = 1000;
+
+  public head: CirclePhysical;
+  public leftFoot: CirclePhysical;
+  public rightFoot: CirclePhysical;
+  public bound: CirclePhysical;
+
+  public get isAlive(): boolean {
+    return !this.isDestroyed;
+  }
+
+  private movementActions: Array<MoveActionCommand> = [];
+  private lastMovementAction: MoveActionCommand = new MoveActionCommand(
+    vec2.create(),
+    false,
+  );
+
+  constructor(
+    name: string,
+    public readonly colorIndex: number,
+    private readonly container: PhysicalContainer,
+    startPosition: vec2,
+  ) {
+    super(id(), name, colorIndex);
+
+    this.head = new CirclePhysical(
+      vec2.add(vec2.create(), startPosition, PlayerCharacterPhysical.headOffset),
+      PlayerCharacterPhysical.headRadius,
+      this,
+      container,
+    );
+    this.leftFoot = new CirclePhysical(
+      vec2.add(vec2.create(), startPosition, PlayerCharacterPhysical.leftFootOffset),
+      PlayerCharacterPhysical.feetRadius,
+      this,
+      container,
+    );
+    this.rightFoot = new CirclePhysical(
+      vec2.add(vec2.create(), startPosition, PlayerCharacterPhysical.rightFootOffset),
+      PlayerCharacterPhysical.feetRadius,
+      this,
+      container,
+    );
+    container.addObject(this.head);
+    container.addObject(this.leftFoot);
+    container.addObject(this.rightFoot);
+
+    this.bound = new CirclePhysical(
+      vec2.create(),
+      PlayerCharacterPhysical.boundRadius,
+      this,
+      container,
+    );
+  }
+
+  public calculateUpdates(): UpdateObjectMessage {
+    return new UpdateGameObjectMessage(this, ['head', 'leftFoot', 'rightFoot']);
+  }
+
+  public handleMovementAction(c: MoveActionCommand) {
+    this.movementActions.push(c);
+  }
+
+  public onCollision(other: GameObject) {
+    if (other instanceof ProjectilePhysical) {
+      other.destroy();
+      this.destroy();
+    }
+  }
+
+  public get boundingBox(): BoundingBoxBase {
+    this.bound.center = this.head.center;
+    return this.bound.boundingBox;
+  }
+
+  public get gameObject(): this {
+    return this;
+  }
+
+  public get center(): vec2 {
+    return this.head.center;
+  }
+
+  public get velocity(): vec2 {
+    return this.head.velocity;
+  }
+
+  public distance(target: vec2): number {
+    return (
+      Math.min(
+        this.head.distance(target),
+        this.leftFoot.distance(target),
+        this.rightFoot.distance(target),
+      ) - 20
+    );
+  }
+
+  private averageAndResetMovementActions(): vec2 {
+    let direction: vec2;
+    if (this.movementActions.length === 0) {
+      direction = vec2.clone(this.lastMovementAction.direction);
+    } else {
+      direction = this.movementActions.reduce(
+        (sum, current) => vec2.add(sum, sum, current.direction),
+        vec2.create(),
+      );
+
+      vec2.scale(direction, direction, 1 / this.movementActions.length);
+
+      this.lastMovementWasRelative =
+        this.movementActions.find((a) => a.isCharacterRelative) !== undefined;
+
+      this.lastMovementAction = last(this.movementActions)!;
+      this.movementActions = [];
+    }
+
+    return direction;
+  }
+
+  public step(deltaTime: number) {
+    if ((this.secondsSinceOnSurface += deltaTime) > 1) {
+      this.currentPlanet = undefined;
+    }
+
+    const intersectingWithForcefield = this.container.findIntersecting(
+      getBoundingBoxOfCircle(
+        new Circle(
+          this.center,
+          PlayerCharacterPhysical.boundRadius + settings.maxGravityDistance,
+        ),
+      ),
+    );
+    const actualGravity = forceAtPosition(this.center, intersectingWithForcefield);
+
+    const direction = this.averageAndResetMovementActions();
+    const movementForce = vec2.scale(direction, direction, settings.maxAcceleration);
+
+    if (!this.currentPlanet) {
+      this.applyForce(this.leftFoot, actualGravity, deltaTime);
+      this.applyForce(this.rightFoot, actualGravity, deltaTime);
+
+      const sumForce = vec2.subtract(vec2.create(), actualGravity, movementForce);
+
+      this.setDirection(
+        vec2.length(sumForce) === 0 ? vec2.fromValues(0, -1) : sumForce,
+        deltaTime,
+      );
+    } else {
+      const leftFootGravity = this.currentPlanet!.getForce(this.leftFoot.center);
+      const rightFootGravity = this.currentPlanet!.getForce(this.rightFoot.center);
+      if (movementForce.y > settings.maxAcceleration / 4) {
+        vec2.scale(leftFootGravity, leftFootGravity, 0.35);
+        vec2.scale(rightFootGravity, rightFootGravity, 0.35);
+      }
+      this.applyForce(this.leftFoot, leftFootGravity, deltaTime);
+      this.applyForce(this.rightFoot, rightFootGravity, deltaTime);
+
+      if (this.lastMovementWasRelative) {
+        vec2.rotate(movementForce, movementForce, vec2.create(), this.direction);
+      }
+
+      const headGravity = this.currentPlanet!.getForce(this.head.center);
+
+      if (vec2.length(headGravity) < vec2.length(actualGravity) / 2) {
+        this.currentPlanet = undefined;
+      }
+      this.setDirection(headGravity, deltaTime);
+    }
+
+    this.applyForce(this.leftFoot, movementForce, deltaTime);
+    this.applyForce(this.rightFoot, movementForce, deltaTime);
+
+    this.stepBodyPart(this.leftFoot, deltaTime);
+    this.stepBodyPart(this.rightFoot, deltaTime);
+    this.keepPosture();
+  }
+
+  private setDirection(direction: vec2, deltaTime: number) {
+    this.direction = interpolateAngles(
+      this.direction,
+      Math.atan2(direction.y, direction.x) + Math.PI / 2,
+      Math.pow(4, deltaTime),
+    );
+  }
+
+  private keepPosture() {
+    const bodyCenter = vec2.add(vec2.create(), this.head.center, this.leftFoot.center);
+    vec2.add(bodyCenter, bodyCenter, this.rightFoot.center);
+    vec2.scale(bodyCenter, bodyCenter, 1 / 3);
+    this.springMove(this.leftFoot, bodyCenter, PlayerCharacterPhysical.leftFootOffset);
+    this.springMove(this.rightFoot, bodyCenter, PlayerCharacterPhysical.rightFootOffset);
+    this.springMove(this.head, bodyCenter, PlayerCharacterPhysical.headOffset);
+  }
+
+  private springMove(object: CirclePhysical, center: vec2, offset: vec2) {
+    // todo: make time-independent
+    const springConstant = 0.35;
+
+    const desiredPosition = vec2.add(vec2.create(), center, offset);
+    vec2.rotate(desiredPosition, desiredPosition, center, this.direction);
+    const positionDelta = vec2.subtract(desiredPosition, desiredPosition, object.center);
+    vec2.scale(positionDelta, positionDelta, springConstant);
+    const hitObject = object.tryMove(positionDelta);
+
+    if (hitObject instanceof PlanetPhysical) {
+      this.secondsSinceOnSurface = 0;
+      this.currentPlanet = hitObject;
+    }
+  }
+
+  private stepBodyPart(part: CirclePhysical, deltaTime: number) {
+    const hitObject = part.step2(deltaTime);
+
+    if (hitObject instanceof PlanetPhysical) {
+      this.secondsSinceOnSurface = 0;
+      this.currentPlanet = hitObject;
+    }
+  }
+
+  public applyForce(circle: CirclePhysical, force: vec2, timeInSeconds: number) {
+    vec2.add(
+      circle.velocity,
+      circle.velocity,
+      vec2.scale(vec2.create(), force, timeInSeconds),
+    );
+
+    vec2.set(
+      circle.velocity,
+      clamp(circle.velocity.x, -settings.maxVelocityX, settings.maxVelocityX),
+      clamp(circle.velocity.y, -settings.maxVelocityY, settings.maxVelocityY),
+    );
+  }
+
+  public destroy() {
+    if (!this.isDestroyed) {
+      this.isDestroyed = true;
+      this.container.removeObject(this);
+      this.container.removeObject(this.head);
+      this.container.removeObject(this.leftFoot);
+      this.container.removeObject(this.rightFoot);
+    }
+  }
+}

backend/src/objects/projectile-physical.ts

@@ -6,6 +6,8 @@ import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 import { PlanetPhysical } from './planet-physical';
 import { ReactsToCollision } from '../physics/physicals/reacts-to-collision';
+import { UpdateObjectMessage } from 'shared/lib/src/objects/update-object-message';
+import { UpdateGameObjectMessage } from '../update-game-object-message';
 
 @serializesTo(ProjectileBase)
 export class ProjectilePhysical
@@ -15,6 +17,7 @@ export class ProjectilePhysical
   public readonly canMove = true;
   private isDestroyed = false;
   private bounceCount = 0;
+  private _boundingBox?: ImmutableBoundingBox;
 
   public object: CirclePhysical;
 
@@ -28,7 +31,9 @@ export class ProjectilePhysical
     this.object = new CirclePhysical(center, radius, this, container, 0.9);
   }
 
-  private _boundingBox?: ImmutableBoundingBox;
+  public calculateUpdates(): UpdateObjectMessage {
+    return new UpdateGameObjectMessage(this, ['center']);
+  }
 
   public get boundingBox(): ImmutableBoundingBox {
     if (!this._boundingBox) {

backend/src/physics/containers/bounding-box-list.ts

@@ -1,4 +1,4 @@
-import { DynamicPhysical } from '../dynamic-physical';
+import { DynamicPhysical } from '../physicals/dynamic-physical';
 import { BoundingBoxBase } from '../bounding-boxes/bounding-box-base';
 
 export class BoundingBoxList {

backend/src/physics/containers/bounding-box-tree.ts

@@ -1,5 +1,5 @@
 import { BoundingBoxBase } from '../bounding-boxes/bounding-box-base';
-import { StaticPhysical } from './static-physical';
+import { StaticPhysical } from '../physicals/static-physical';
 // source: https://github.com/ubilabs/kd-tree-javascript/blob/master/kdTree.js
 
 class Node {

backend/src/physics/physicals/dynamic-physical.ts

@@ -1,6 +1,9 @@
+import { UpdateObjectMessage } from 'shared/lib/src/objects/update-object-message';
 import { PhysicalBase } from './physical-base';
 
 export interface DynamicPhysical extends PhysicalBase {
   readonly canMove: true;
   step(deltaTimeInMilliseconds: number): void;
+
+  calculateUpdates(): UpdateObjectMessage | null;
 }

backend/src/players/player.ts

@@ -14,27 +14,28 @@ import {
   SecondaryActionCommand,
   settings,
   Circle,
+  PlayerInformation,
 } from 'shared';
 import { getTimeInMilliseconds } from '../helper/get-time-in-milliseconds';
-import { CharacterPhysical } from '../objects/character-physical';
 import { ProjectilePhysical } from '../objects/projectile-physical';
-
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
 import { PhysicalContainer } from '../physics/containers/physical-container';
-import { PhysicalBase } from '../physics/physicals/physical-base';
 import { getBoundingBoxOfCircle } from '../physics/functions/get-bounding-box-of-circle';
 import { isCircleIntersecting } from '../physics/functions/is-circle-intersecting';
 import { requestColor, freeColor } from './player-color-service';
+import { PlayerCharacterPhysical } from '../objects/player-character-physical';
+import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
+import { Physical } from '../physics/physicals/physical';
 
 export class Player extends CommandReceiver {
-  private character: CharacterPhysical;
+  private character: PlayerCharacterPhysical;
   private aspectRatio: number = 16 / 9;
   private isActive = true;
 
   private timeSinceLastProjectile = 0;
 
-  private objectsPreviouslyInViewArea: Array<PhysicalBase> = [];
+  private objectsPreviouslyInViewArea: Array<Physical> = [];
-  private objectsInViewArea: Array<PhysicalBase> = [];
+  private objectsInViewArea: Array<Physical> = [];
 
   private pingTime?: number;
   private _latency?: number;
@@ -56,7 +57,10 @@ export class Player extends CommandReceiver {
     [MoveActionCommand.type]: (c: MoveActionCommand) =>
       this.character.handleMovementAction(c),
     [SecondaryActionCommand.type]: (c: SecondaryActionCommand) => {
-      if (this.timeSinceLastProjectile < settings.projectileCreationInterval) {
+      if (
+        !this.character.isAlive ||
+        this.timeSinceLastProjectile < settings.projectileCreationInterval
+      ) {
         return;
       }
 
@@ -88,7 +92,7 @@ export class Player extends CommandReceiver {
 
       const playerBoundingCircle = new Circle(
         playerPosition,
-        CharacterPhysical.boundRadius,
+        PlayerCharacterPhysical.boundRadius,
       );
 
       const playerBoundingBox = getBoundingBoxOfCircle(playerBoundingCircle);
@@ -97,27 +101,26 @@ export class Player extends CommandReceiver {
         return playerPosition;
       }
 
-      rotation += Math.PI / 12;
+      rotation += Math.PI / 8;
-      radius += 10;
+      radius += 30;
     }
   }
 
   constructor(
+    playerInfo: PlayerInformation,
     private readonly objects: PhysicalContainer,
     private readonly socket: SocketIO.Socket,
   ) {
     super();
     const colorIndex = requestColor();
 
-    this.character = new CharacterPhysical(
+    this.character = new PlayerCharacterPhysical(
+      playerInfo.name,
       colorIndex,
       objects,
       this.findEmptyPositionForPlayer(),
     );
 
-    this.objectsPreviouslyInViewArea.push(this.character);
-    this.objectsInViewArea.push(this.character);
-
     this.objects.addObject(this.character);
 
     socket.emit(
@@ -138,6 +141,7 @@ export class Player extends CommandReceiver {
     this.sendObjects();
     this.timeSinceLastProjectile += deltaTime;
   }
+
   public sendObjects() {
     const viewArea = calculateViewArea(this.character.center, this.aspectRatio, 1.5);
     const bb = new BoundingBox();
@@ -161,7 +165,11 @@ export class Player extends CommandReceiver {
         TransportEvents.ServerToPlayer,
         serialize(
           new DeleteObjectsCommand([
-            ...new Set(noLongerIntersecting.map((p) => p.gameObject.id)),
+            ...new Set(
+              noLongerIntersecting
+                .filter((p) => p.gameObject !== this.character)
+                .map((p) => p.gameObject.id),
+            ),
           ]),
         ),
       );
@@ -172,20 +180,25 @@ export class Player extends CommandReceiver {
         TransportEvents.ServerToPlayer,
         serialize(
           new CreateObjectsCommand([
-            ...new Set(newlyIntersecting.map((p) => p.gameObject)),
+            ...new Set(
+              newlyIntersecting
+                .map((p) => p.gameObject)
+                .filter((g) => g !== this.character),
+            ),
           ]),
         ),
       );
     }
 
-    this.socket.volatile.emit(
+    this.socket.emit(
       TransportEvents.ServerToPlayer,
       serialize(
-        new UpdateObjectsCommand([
+        new UpdateObjectsCommand(
-          ...new Set(
+          Array.from(new Set(this.objectsInViewArea))
-            this.objectsInViewArea.filter((p) => p.canMove).map((p) => p.gameObject),
+            .filter((p) => p.canMove)
-          ),
+            .map((p) => (p as DynamicPhysical).calculateUpdates())
-        ]),
+            .filter((p) => p !== null) as any,
+        ),
       ),
     );
   }

backend/src/update-game-object-message.ts

@@ -0,0 +1,11 @@
+import { GameObject, serializesTo, UpdateMessage, UpdateObjectMessage } from 'shared';
+
+@serializesTo(UpdateObjectMessage)
+export class UpdateGameObjectMessage<T extends GameObject> extends UpdateObjectMessage {
+  constructor(object: T, keys: Array<string & keyof T>) {
+    super(
+      object.id,
+      keys.map((k) => new UpdateMessage(k, object[k])),
+    );
+  }
+}

frontend/src/index.html

@@ -15,6 +15,9 @@
   </head>
 
   <body>
+    <canvas></canvas>
+    <div id="overlay"></div>
+
     <article id="landing-ui">
       <h1>decla.<span class="red">red</span></h1>
       <form id="join-game-form">
@@ -41,7 +44,5 @@
     </article>
 
     <noscript>Javascript is required for this website.</noscript>
-    <div id="overlay"></div>
-    <canvas></canvas>
   </body>
 </html>

frontend/src/index.ts

@@ -1,7 +1,12 @@
 import { glMatrix } from 'gl-matrix';
-import { CharacterBase, LampBase, overrideDeserialization, PlanetBase } from 'shared';
+import {
-import { ProjectileBase } from 'shared/src/objects/types/projectile-base';
+  CharacterBase,
-
+  LampBase,
+  overrideDeserialization,
+  PlanetBase,
+  PlayerCharacterBase,
+  ProjectileBase,
+} from 'shared';
 import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
@@ -10,43 +15,32 @@ import './styles/main.scss';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { Game } from './scripts/game';
+import { PlayerCharacterView } from './scripts/objects/player-character-view';
 
 glMatrix.setMatrixArrayType(Array);
 
 overrideDeserialization(CharacterBase, CharacterView);
+overrideDeserialization(PlayerCharacterBase, PlayerCharacterView);
 overrideDeserialization(PlanetBase, PlanetView);
 overrideDeserialization(LampBase, LampView);
 overrideDeserialization(ProjectileBase, ProjectileView);
 
-const addSupportForTabNavigation = () =>
-  (document.onkeydown = (e) => {
-    if (e.key === ' ') {
-      (document.activeElement as HTMLElement)?.click();
-      e.preventDefault();
-    }
-  });
-
-/*const removeUnnecessaryOutlines = () =>
-  (document.onclick = (e) => {
-    (e.target as HTMLElement)?.blur();
-  });
-*/
-addSupportForTabNavigation();
-//removeUnnecessaryOutlines();
-
 const main = async () => {
   try {
     const landingUI = document.querySelector('#landing-ui') as HTMLElement;
-    const background = new LandingPageBackground();
+    const joinGameForm = document.querySelector('#join-game-form') as HTMLFormElement;
-    const joinHandler = new JoinFormHandler(
+    const serverContainer = document.querySelector('#server-container') as HTMLElement;
-      document.querySelector('#join-game-form') as HTMLFormElement,
+    const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-      document.querySelector('#server-container') as HTMLElement,
+    const overlay = document.querySelector('#overlay') as HTMLElement;
-    );
+
+    const background = new LandingPageBackground(canvas);
+    const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
+
     const playerDecision = await joinHandler.getPlayerDecision();
     landingUI.style.display = 'none';
-    console.log(playerDecision);
+
     background.destroy();
-    await new Game(playerDecision).start();
+    await new Game(playerDecision, canvas, overlay).start();
   } catch (e) {
     console.error(e);
     alert(e);

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) {
+  constructor(
-    console.log(playerDecision.server);
+    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) => {
+      c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
-        this.objects.delete(o.id);
-        this.addObject(o as ViewObject);
-        if (o.id === this.player.id) {
-          this.player = o as CharacterView;
-        }
-      });
     },
   };
 

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