Improve gameplay

.do/apps.yml

@@ -9,7 +9,7 @@ services:
     http_port: 3000
     instance_count: 1
     instance_size_slug: basic-xxs
-    run_command: node main.js --name=Frankfurt --seed=102
+    run_command: ' node main.js --name=Frankfurt --seed=102'
     name: decla-red-server
     routes:
       - path: /

Dockerfile

@@ -13,4 +13,6 @@ RUN npm install --production
 COPY --from=build backend/dist/main.js main.js 
 
 EXPOSE 3000
-CMD [ "node", "main.js" ]
+
+CMD ["--port=3000", "--name=Docker server", "--seed=500"]
+ENTRYPOINT [ "node", "main.js" ]

backend/src/game-server.ts

@@ -29,7 +29,7 @@ export class GameServer {
 
     io.on('connection', (socket: SocketIO.Socket) => {
       socket.on(TransportEvents.PlayerJoining, (playerInfo: PlayerInformation) => {
-        const player = new Player(playerInfo, this.objects, socket);
+        const player = new Player(playerInfo, this.players, this.objects, socket);
         this.players.push(player);
         socket.on(TransportEvents.PlayerToServer, (json: string) => {
           const command = deserialize(json);
@@ -61,7 +61,7 @@ export class GameServer {
       this.deltaTimes.sort((a, b) => a - b);
       console.log(
         `Median physics time: ${this.deltaTimes[
-          framesBetweenDeltaTimeCalculation
+          Math.floor(framesBetweenDeltaTimeCalculation / 2)
         ].toFixed(2)} ms`,
       );
       console.log(

backend/src/map/create-world.ts

@@ -1,5 +1,5 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { Random, settings, PlanetBase } from 'shared';
+import { Random, settings, PlanetBase, hsl } from 'shared';
 import { LampPhysical } from '../objects/lamp-physical';
 import { PlanetPhysical } from '../objects/planet-physical';
 import { PhysicalContainer } from '../physics/containers/physical-container';
@@ -17,7 +17,7 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
     ),
   );
 
-  for (let i = 0; i < worldSize / 400; i++) {
+  for (let i = 0; i < 15; i++) {
     console.log('planet', i);
 
     let position: vec2;
@@ -44,7 +44,7 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
     );
   }
 
-  for (let i = 0; i < worldSize / 350; i++) {
+  for (let i = 0; i < 15; i++) {
     console.log('light', i);
     let position: vec2;
     do {
@@ -54,20 +54,17 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
       );
     } while (
       evaluateSdf(position, objects) < 200 ||
-      lights.find((l) => l.distance(position) < 1800)
+      lights.find((l) => l.distance(position) < 1500)
     );
     lights.push(
       new LampPhysical(
         position,
-        vec3.normalize(
+        hsl(
-          vec3.create(),
+          Random.getRandomInRange(0, 360),
-          vec3.fromValues(
+          Random.getRandomInRange(50, 100),
-            Random.getRandomInRange(0.5, 1),
+          Random.getRandomInRange(25, 50),
-            0,
-            Random.getRandomInRange(0.5, 1),
-          ),
         ),
-        Random.getRandomInRange(0.25, 1),
+        Random.getRandomInRange(0.5, 2),
       ),
     );
   }

backend/src/objects/circle-physical.ts

@@ -30,10 +30,6 @@ 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/planet-physical.ts

@@ -9,23 +9,28 @@ import {
   serializesTo,
   settings,
   PlanetBase,
+  CharacterTeam,
+  UpdateObjectMessage,
 } from 'shared';
 
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
 import { StaticPhysical } from '../physics/physicals/static-physical';
+import { UpdateGameObjectMessage } from '../update-game-object-message';
 
 @serializesTo(PlanetBase)
 export class PlanetPhysical extends PlanetBase implements StaticPhysical {
   public readonly canCollide = true;
   public readonly canMove = false;
-  private center: vec2;
+
+  public static neutralPlanetCount = 0;
+  public static declaPlanetCount = 0;
+  public static redPlanetCount = 0;
 
   private _boundingBox?: ImmutableBoundingBox;
 
   constructor(vertices: Array<vec2>) {
     super(id(), vertices);
-    this.center = vertices.reduce((sum, v) => vec2.add(sum, sum, v), vec2.create());
+    PlanetPhysical.neutralPlanetCount++;
-    vec2.scale(this.center, this.center, 1 / vertices.length);
   }
 
   public distance(target: vec2): number {
@@ -62,6 +67,47 @@ export class PlanetPhysical extends PlanetBase implements StaticPhysical {
     return sign * d;
   }
 
+  public calculateUpdates(): UpdateObjectMessage {
+    return new UpdateGameObjectMessage(this, ['ownership']);
+  }
+
+  public takeControl(team: CharacterTeam, deltaTime: number) {
+    const previousOwnership = this.ownership;
+    if (team === CharacterTeam.decla) {
+      this.ownership -= (0.5 / settings.takeControlTimeInSeconds) * deltaTime;
+      if (
+        previousOwnership >= 0.5 - settings.planetControlThreshold &&
+        this.ownership < 0.5 - settings.planetControlThreshold
+      ) {
+        PlanetPhysical.declaPlanetCount++;
+        PlanetPhysical.neutralPlanetCount--;
+      } else if (
+        previousOwnership > 0.5 + settings.planetControlThreshold &&
+        previousOwnership <= 0.5 + settings.planetControlThreshold
+      ) {
+        PlanetPhysical.redPlanetCount--;
+        PlanetPhysical.neutralPlanetCount++;
+      }
+    } else {
+      this.ownership += (0.5 / settings.takeControlTimeInSeconds) * deltaTime;
+      if (
+        previousOwnership < 0.5 + settings.planetControlThreshold &&
+        this.ownership >= 0.5 + settings.planetControlThreshold
+      ) {
+        PlanetPhysical.redPlanetCount++;
+        PlanetPhysical.neutralPlanetCount--;
+      } else if (
+        previousOwnership <= 0.5 - settings.planetControlThreshold &&
+        previousOwnership > 0.5 + settings.planetControlThreshold
+      ) {
+        PlanetPhysical.declaPlanetCount--;
+        PlanetPhysical.neutralPlanetCount++;
+      }
+    }
+
+    this.ownership = clamp01(this.ownership);
+  }
+
   public get boundingBox(): ImmutableBoundingBox {
     if (!this._boundingBox) {
       const { xMin, xMax, yMin, yMax } = this.vertices.reduce(

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

@@ -9,6 +9,7 @@ import {
   GameObject,
   Circle,
   PlayerCharacterBase,
+  CharacterTeam,
 } from 'shared';
 import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
 import { CirclePhysical } from './circle-physical';
@@ -32,6 +33,8 @@ export class PlayerCharacterPhysical
 
   private static readonly headRadius = 50;
   private static readonly feetRadius = 20;
+  private projectileStrength = settings.playerMaxStrength;
+
   // offsets are meassured from (0, 0)
   private static readonly desiredHeadOffset = vec2.fromValues(0, 65);
   private static readonly desiredLeftFootOffset = vec2.fromValues(-20, 0);
@@ -93,10 +96,11 @@ export class PlayerCharacterPhysical
   constructor(
     name: string,
     public readonly colorIndex: number,
+    team: CharacterTeam,
     private readonly container: PhysicalContainer,
     startPosition: vec2,
   ) {
-    super(id(), name, colorIndex);
+    super(id(), name, colorIndex, team, settings.playerMaxHealth);
 
     this.head = new CirclePhysical(
       vec2.add(vec2.create(), startPosition, PlayerCharacterPhysical.headOffset),
@@ -129,7 +133,7 @@ export class PlayerCharacterPhysical
   }
 
   public calculateUpdates(): UpdateObjectMessage {
-    return new UpdateGameObjectMessage(this, ['head', 'leftFoot', 'rightFoot']);
+    return new UpdateGameObjectMessage(this, ['head', 'leftFoot', 'rightFoot', 'health']);
   }
 
   public handleMovementAction(c: MoveActionCommand) {
@@ -137,12 +141,44 @@ export class PlayerCharacterPhysical
   }
 
   public onCollision(other: GameObject) {
-    if (other instanceof ProjectilePhysical) {
+    if (other instanceof ProjectilePhysical && other.team !== this.team) {
       other.destroy();
-      this.destroy();
+      this.health -= other.strength;
+      if (this.health <= 0) {
+        this.destroy();
+      }
     }
   }
 
+  public shootTowards(position: vec2) {
+    if (!this.isAlive) {
+      return;
+    }
+
+    const start = vec2.clone(this.center);
+    const direction = vec2.subtract(vec2.create(), position, start);
+    vec2.normalize(direction, direction);
+    vec2.add(
+      start,
+      start,
+      vec2.scale(vec2.create(), direction, settings.projectileStartOffset),
+    );
+    const velocity = vec2.scale(direction, direction, settings.projectileSpeed);
+    vec2.add(velocity, velocity, this.velocity);
+    const strength = this.projectileStrength / 2;
+    this.projectileStrength -= strength;
+    const projectile = new ProjectilePhysical(
+      start,
+      20,
+      this.colorIndex,
+      strength,
+      this.team,
+      velocity,
+      this.container,
+    );
+    this.container.addObject(projectile);
+  }
+
   public get boundingBox(): BoundingBoxBase {
     this.bound.center = this.head.center;
     return this.bound.boundingBox;
@@ -197,6 +233,13 @@ export class PlayerCharacterPhysical
       this.currentPlanet = undefined;
     }
 
+    this.projectileStrength = Math.min(
+      settings.playerMaxStrength,
+      this.projectileStrength + settings.playerStrengthRegenerationPerSeconds * deltaTime,
+    );
+
+    this.currentPlanet?.takeControl(this.team, deltaTime);
+
     const intersectingWithForcefield = this.container.findIntersecting(
       getBoundingBoxOfCircle(
         new Circle(
@@ -205,7 +248,13 @@ export class PlayerCharacterPhysical
         ),
       ),
     );
-    const actualGravity = forceAtPosition(this.center, intersectingWithForcefield);
+    const feetCenter = vec2.add(
+      vec2.create(),
+      this.leftFoot.center,
+      this.rightFoot.center,
+    );
+    vec2.scale(feetCenter, feetCenter, 0.5);
+    const actualGravity = forceAtPosition(feetCenter, intersectingWithForcefield);
 
     const direction = this.averageAndResetMovementActions();
     const movementForce = vec2.scale(direction, direction, settings.maxAcceleration);
@@ -269,7 +318,7 @@ export class PlayerCharacterPhysical
 
   private springMove(object: CirclePhysical, center: vec2, offset: vec2) {
     // todo: make time-independent
-    const springConstant = 0.35;
+    const springConstant = 0.55;
 
     const desiredPosition = vec2.add(vec2.create(), center, offset);
     vec2.rotate(desiredPosition, desiredPosition, center, this.direction);

backend/src/objects/projectile-physical.ts

@@ -1,5 +1,12 @@
 import { vec2 } from 'gl-matrix';
-import { id, settings, serializesTo, ProjectileBase, GameObject } from 'shared';
+import {
+  id,
+  settings,
+  serializesTo,
+  ProjectileBase,
+  GameObject,
+  CharacterTeam,
+} from 'shared';
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
 import { CirclePhysical } from './circle-physical';
 import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
@@ -8,6 +15,7 @@ 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';
+import { PlayerCharacterPhysical } from './player-character-physical';
 
 @serializesTo(ProjectileBase)
 export class ProjectilePhysical
@@ -15,6 +23,7 @@ export class ProjectilePhysical
   implements DynamicPhysical, ReactsToCollision {
   public readonly canCollide = true;
   public readonly canMove = true;
+
   private isDestroyed = false;
   private bounceCount = 0;
   private _boundingBox?: ImmutableBoundingBox;
@@ -24,15 +33,18 @@ export class ProjectilePhysical
   constructor(
     center: vec2,
     radius: number,
+    colorIndex: number,
+    public strength: number,
+    public team: CharacterTeam,
     private velocity: vec2,
     readonly container: PhysicalContainer,
   ) {
-    super(id(), center, radius);
+    super(id(), center, radius, colorIndex, strength);
     this.object = new CirclePhysical(center, radius, this, container, 0.9);
   }
 
   public calculateUpdates(): UpdateObjectMessage {
-    return new UpdateGameObjectMessage(this, ['center']);
+    return new UpdateGameObjectMessage(this, ['center', 'strength']);
   }
 
   public get boundingBox(): ImmutableBoundingBox {
@@ -59,12 +71,20 @@ export class ProjectilePhysical
   }
 
   public onCollision(other: GameObject) {
-    if (this.bounceCount++ === settings.projectileMaxBounceCount) {
+    if (
+      !(other instanceof PlayerCharacterPhysical && other.team === this.team) &&
+      this.bounceCount++ === settings.projectileMaxBounceCount
+    ) {
       this.destroy();
     }
   }
 
   public step(deltaTime: number) {
+    if ((this.strength -= settings.projectileFadeSpeed * deltaTime) < 0) {
+      this.destroy();
+      return;
+    }
+
     const gravity = vec2.create();
     const intersecting = this.container.findIntersecting(this.boundingBox);
     intersecting.forEach((i) => {

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

@@ -1,9 +1,6 @@
-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-color-service.ts

@@ -1,15 +0,0 @@
-import { settings } from 'shared';
-
-const colorUsage: Array<boolean> = new Array(settings.playerColors.length).fill(false);
-
-export const requestColor = (): number => {
-  const index = colorUsage.findIndex((a) => !a);
-  if (index >= 0) {
-    colorUsage[index] = true;
-  }
-  return index + settings.playerColorIndexOffset;
-};
-
-export const freeColor = (index: number) => {
-  colorUsage[index - settings.playerColorIndexOffset] = false;
-};

backend/src/players/player-team-service.ts

@@ -0,0 +1,22 @@
+import { CharacterTeam, Random } from 'shared';
+
+let declaCount = 0;
+let redCount = 0;
+
+export const requestTeam = (): { team: CharacterTeam; colorIndex: number } => {
+  if ((declaCount === redCount && Random.getRandom() > 0.5) || declaCount < redCount) {
+    declaCount++;
+    return { team: CharacterTeam.decla, colorIndex: 0 };
+  } else {
+    redCount++;
+    return { team: CharacterTeam.red, colorIndex: 1 };
+  }
+};
+
+export const freeTeam = (team: CharacterTeam) => {
+  if (team === CharacterTeam.decla) {
+    declaCount--;
+  } else {
+    redCount--;
+  }
+};

backend/src/players/player.ts

@@ -12,30 +12,32 @@ import {
   SetAspectRatioActionCommand,
   calculateViewArea,
   SecondaryActionCommand,
+  PlayerDiedCommand,
   settings,
   Circle,
   PlayerInformation,
+  CharacterTeam,
+  UpdatePlanetOwnershipCommand,
+  GameObject,
+  Command,
+  UpdateObjectMessage,
 } from 'shared';
 import { getTimeInMilliseconds } from '../helper/get-time-in-milliseconds';
-import { ProjectilePhysical } from '../objects/projectile-physical';
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 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';
+import { freeTeam, requestTeam } from './player-team-service';
+import { PlanetPhysical } from '../objects/planet-physical';
 
 export class Player extends CommandReceiver {
-  private character: PlayerCharacterPhysical;
+  private character?: PlayerCharacterPhysical | null;
   private aspectRatio: number = 16 / 9;
   private isActive = true;
 
-  private timeSinceLastProjectile = 0;
+  private objectsPreviouslyInViewArea: Array<GameObject> = [];
-
-  private objectsPreviouslyInViewArea: Array<Physical> = [];
-  private objectsInViewArea: Array<Physical> = [];
 
   private pingTime?: number;
   private _latency?: number;
@@ -55,35 +57,20 @@ export class Player extends CommandReceiver {
     [SetAspectRatioActionCommand.type]: (v: SetAspectRatioActionCommand) =>
       (this.aspectRatio = v.aspectRatio),
     [MoveActionCommand.type]: (c: MoveActionCommand) =>
-      this.character.handleMovementAction(c),
+      this.character?.handleMovementAction(c),
     [SecondaryActionCommand.type]: (c: SecondaryActionCommand) => {
-      if (
+      this.character?.shootTowards(c.position);
-        !this.character.isAlive ||
-        this.timeSinceLastProjectile < settings.projectileCreationInterval
-      ) {
-        return;
-      }
-
-      const start = vec2.clone(this.character.center);
-      const direction = vec2.subtract(vec2.create(), c.position, start);
-      vec2.normalize(direction, direction);
-      vec2.add(
-        start,
-        start,
-        vec2.scale(vec2.create(), direction, settings.projectileStartOffset),
-      );
-      const velocity = vec2.scale(direction, direction, settings.projectileSpeed);
-      vec2.add(velocity, velocity, this.character.velocity);
-      const projectile = new ProjectilePhysical(start, 20, velocity, this.objects);
-      this.objects.addObject(projectile);
-
-      this.timeSinceLastProjectile = 0;
     },
   };
 
   private findEmptyPositionForPlayer(): vec2 {
-    let rotation = 0;
+    let possibleCenter = this.players.find((p) => p.team === this.team)?.center;
-    let radius = 0;
+    if (!possibleCenter) {
+      possibleCenter = vec2.create();
+    }
+
+    let rotation = Math.atan2(possibleCenter.y, possibleCenter.x);
+    let radius = vec2.length(possibleCenter);
     for (;;) {
       const playerPosition = vec2.fromValues(
         radius * Math.cos(rotation),
@@ -106,27 +93,21 @@ export class Player extends CommandReceiver {
     }
   }
 
+  public readonly team: CharacterTeam;
+  private colorIndex: number;
+
   constructor(
-    playerInfo: PlayerInformation,
+    private readonly playerInfo: PlayerInformation,
+    private readonly players: Array<Player>,
     private readonly objects: PhysicalContainer,
     private readonly socket: SocketIO.Socket,
   ) {
     super();
-    const colorIndex = requestColor();
+    const { team, colorIndex } = requestTeam();
+    this.team = team;
+    this.colorIndex = colorIndex;
 
-    this.character = new PlayerCharacterPhysical(
+    this.createCharacter();
-      playerInfo.name,
-      colorIndex,
-      objects,
-      this.findEmptyPositionForPlayer(),
-    );
-
-    this.objects.addObject(this.character);
-
-    socket.emit(
-      TransportEvents.ServerToPlayer,
-      serialize(new CreatePlayerCommand(this.character)),
-    );
 
     socket.on(
       TransportEvents.Pong,
@@ -134,78 +115,99 @@ export class Player extends CommandReceiver {
     );
 
     this.measureLatency();
-    this.sendObjects();
+    this.step(0);
   }
 
+  private createCharacter() {
+    this.character = new PlayerCharacterPhysical(
+      this.playerInfo.name.slice(0, 20),
+      this.colorIndex,
+      this.team,
+      this.objects,
+      this.findEmptyPositionForPlayer(),
+    );
+
+    this.objects.addObject(this.character);
+    this.objectsPreviouslyInViewArea.push(this.character);
+
+    this.socket.emit(
+      TransportEvents.ServerToPlayer,
+      serialize(new CreatePlayerCommand(this.character)),
+    );
+  }
+
+  private center: vec2 = vec2.create();
+  private timeUntilRespawn = 0;
   public step(deltaTime: number) {
-    this.sendObjects();
+    if (this.character) {
-    this.timeSinceLastProjectile += deltaTime;
+      this.center = this.character?.center;
-  }
 
-  public sendObjects() {
+      if (!this.character.isAlive) {
-    const viewArea = calculateViewArea(this.character.center, this.aspectRatio, 1.5);
+        this.socket.emit(
+          TransportEvents.ServerToPlayer,
+          serialize(new PlayerDiedCommand(settings.playerDiedTimeout)),
+        );
+        this.character = null;
+        this.timeUntilRespawn = settings.playerDiedTimeout;
+      }
+    } else if ((this.timeUntilRespawn -= deltaTime) < 0) {
+      this.createCharacter();
+    }
+
+    const viewArea = calculateViewArea(this.center, this.aspectRatio, 1.5);
     const bb = new BoundingBox();
     bb.topLeft = viewArea.topLeft;
     bb.size = viewArea.size;
 
-    this.objectsInViewArea = this.objects.findIntersecting(bb);
+    const objectsInViewArea = Array.from(
+      new Set(this.objects.findIntersecting(bb).map((o) => o.gameObject)),
+    );
 
-    const newlyIntersecting = this.objectsInViewArea.filter(
+    const newlyIntersecting = objectsInViewArea.filter(
       (o) => !this.objectsPreviouslyInViewArea.includes(o),
     );
 
     const noLongerIntersecting = this.objectsPreviouslyInViewArea.filter(
-      (o) => !this.objectsInViewArea.includes(o),
+      (o) => !objectsInViewArea.includes(o),
     );
 
-    this.objectsPreviouslyInViewArea = this.objectsInViewArea;
+    this.objectsPreviouslyInViewArea = objectsInViewArea;
 
     if (noLongerIntersecting.length > 0) {
-      this.socket.emit(
+      this.sendToPlayer(new DeleteObjectsCommand(noLongerIntersecting.map((g) => g.id)));
-        TransportEvents.ServerToPlayer,
-        serialize(
-          new DeleteObjectsCommand([
-            ...new Set(
-              noLongerIntersecting
-                .filter((p) => p.gameObject !== this.character)
-                .map((p) => p.gameObject.id),
-            ),
-          ]),
-        ),
-      );
     }
 
     if (newlyIntersecting.length > 0) {
-      this.socket.emit(
+      this.sendToPlayer(new CreateObjectsCommand(newlyIntersecting));
-        TransportEvents.ServerToPlayer,
-        serialize(
-          new CreateObjectsCommand([
-            ...new Set(
-              newlyIntersecting
-                .map((p) => p.gameObject)
-                .filter((g) => g !== this.character),
-            ),
-          ]),
-        ),
-      );
     }
 
-    this.socket.emit(
+    this.sendToPlayer(
-      TransportEvents.ServerToPlayer,
+      new UpdateObjectsCommand(
-      serialize(
+        this.objectsPreviouslyInViewArea
-        new UpdateObjectsCommand(
+          .map((g) => g.calculateUpdates())
-          Array.from(new Set(this.objectsInViewArea))
+          .filter((u) => u) as Array<UpdateObjectMessage>,
-            .filter((p) => p.canMove)
+      ),
-            .map((p) => (p as DynamicPhysical).calculateUpdates())
+    );
-            .filter((p) => p !== null) as any,
+
-        ),
+    this.sendToPlayer(
+      new UpdatePlanetOwnershipCommand(
+        PlanetPhysical.declaPlanetCount,
+        PlanetPhysical.redPlanetCount,
+        PlanetPhysical.neutralPlanetCount,
       ),
     );
   }
 
+  private sendToPlayer(command: Command) {
+    this.socket.emit(TransportEvents.ServerToPlayer, serialize(command));
+  }
+
   public destroy() {
     this.isActive = false;
-    freeColor(this.character.colorIndex);
+    freeTeam(this.team);
-    this.character.destroy();
+
+    if (this.character) {
+      this.character.destroy();
+    }
   }
 }

frontend/package.json

@@ -45,7 +45,7 @@
     "ts-loader": "^8.0.3",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.2",
-    "sdf-2d": "^0.5.3",
+    "sdf-2d": "^0.6.0",
     "shared": "0.0.0",
     "socket.io-client": "^2.3.1",
     "source-map-loader": "^1.1.0",

frontend/src/index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width,initial-scale=1,viewport-fit=cover"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
+      user-scalable=0"
     />
     <meta name="theme-color" content="#b7455e" />
 
@@ -15,10 +16,12 @@
   </head>
 
   <body>
+    <noscript>Javascript is required for this website.</noscript>
+
     <canvas></canvas>
     <div id="overlay"></div>
 
-    <article id="landing-ui">
+    <section id="landing-ui">
       <h1>decla.<span class="red">red</span></h1>
       <form id="join-game-form">
         <fieldset class="content">
@@ -41,8 +44,28 @@
           <button id="join-game" type="submit">Join</button>
         </fieldset>
       </form>
-    </article>
+    </section>
 
-    <noscript>Javascript is required for this website.</noscript>
+    <img id="open-settings" class="icon" alt="open-settings" src="static/settings.svg" />
+
+    <section id="settings">
+      <h2>Settings</h2>
+      <input id="enable-relative-movement" checked type="checkbox" />
+      <label for="enable-relative-movement">Enable relative movement</label>
+      <button id="close-settings">Back</button>
+    </section>
+
+    <img
+      class="full-screen-controllers icon"
+      id="minimize"
+      alt="minimize-application"
+      src="static/minimize.svg"
+    />
+    <img
+      class="full-screen-controllers icon"
+      id="maximize"
+      alt="maximize-application"
+      src="static/maximize.svg"
+    />
   </body>
 </html>

frontend/src/index.ts

@@ -14,6 +14,7 @@ import { PlanetView } from './scripts/objects/planet-view';
 import './styles/main.scss';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
+import { handleFullScreen } from './scripts/handle-full-screen';
 import { Game } from './scripts/game';
 import { PlayerCharacterView } from './scripts/objects/player-character-view';
 
@@ -32,15 +33,28 @@ const main = async () => {
     const serverContainer = document.querySelector('#server-container') as HTMLElement;
     const canvas = document.querySelector('canvas') as HTMLCanvasElement;
     const overlay = document.querySelector('#overlay') as HTMLElement;
+    const settings = document.querySelector('#settings') as HTMLElement;
+    const openSettings = document.querySelector('#open-settings') as HTMLElement;
+    const closeSettings = document.querySelector('#close-settings') as HTMLElement;
+    const minimize = document.querySelector('#minimize') as HTMLElement;
+    const maximize = document.querySelector('#maximize') as HTMLElement;
+    const enableRelativeMovementCheckbox = document.querySelector(
+      '#enable-relative-movement',
+    ) as HTMLElement;
+
+    openSettings.addEventListener('click', () => (settings.style.visibility = 'visible'));
+    closeSettings.addEventListener('click', () => (settings.style.visibility = 'hidden'));
 
     const background = new LandingPageBackground(canvas);
     const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
 
+    handleFullScreen(minimize, maximize);
     const playerDecision = await joinHandler.getPlayerDecision();
     landingUI.style.display = 'none';
 
     background.destroy();
-    await new Game(playerDecision, canvas, overlay).start();
+
+    new Game(playerDecision, canvas, overlay);
   } catch (e) {
     console.error(e);
     alert(e);

frontend/src/scripts/game.ts

@@ -1,11 +1,13 @@
 import { vec2 } from 'gl-matrix';
 import {
   CircleLight,
+  ColorfulCircle,
   compile,
   FilteringOptions,
   Flashlight,
   Renderer,
   renderNoise,
+  runAnimation,
   WrapOptions,
 } from 'sdf-2d';
 import {
@@ -17,36 +19,41 @@ import {
   SetAspectRatioActionCommand,
   rgb,
   PlayerInformation,
+  PlayerDiedCommand,
+  UpdatePlanetOwnershipCommand,
 } from 'shared';
 import io from 'socket.io-client';
 import { KeyboardListener } from './commands/generators/keyboard-listener';
 import { MouseListener } from './commands/generators/mouse-listener';
 import { TouchListener } from './commands/generators/touch-listener';
 import { CommandReceiverSocket } from './commands/receivers/command-receiver-socket';
-
-import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { PlayerDecision } from './join-form-handler';
 import { GameObjectContainer } from './objects/game-object-container';
 import { BlobShape } from './shapes/blob-shape';
-import { Circle } from './shapes/circle';
+import { PlanetShape } from './shapes/planet-shape';
-import { Polygon } from './shapes/polygon';
 
 export class Game {
   public readonly gameObjects = new GameObjectContainer(this);
-  private renderer!: Renderer;
+  private renderer?: Renderer;
   private socket!: SocketIOClient.Socket;
-  private promises: Promise<[void, void]>;
+  private deadTimeout = 0;
-  private deltaTimeCalculator = new DeltaTimeCalculator();
+
+  private declaPlanetCountElement = document.createElement('div');
+  private redPlanetCountElement = document.createElement('div');
+  private neutralPlanetCountElement = document.createElement('div');
 
   constructor(
     private readonly playerDecision: PlayerDecision,
     private readonly canvas: HTMLCanvasElement,
     private readonly overlay: HTMLElement,
   ) {
-    this.promises = Promise.all([
+    this.start();
-      this.setupCommunication(playerDecision.server),
+    const progressBar = document.createElement('div');
-      this.setupRenderer(),
+    progressBar.className = 'planet-progress';
-    ]);
+    overlay.appendChild(progressBar);
+    progressBar.appendChild(this.declaPlanetCountElement);
+    progressBar.appendChild(this.neutralPlanetCountElement);
+    progressBar.appendChild(this.redPlanetCountElement);
   }
 
   private async setupCommunication(serverUrl: string): Promise<void> {
@@ -61,7 +68,26 @@ export class Game {
 
     this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => {
       const command = deserialize(serialized);
-      this.gameObjects.sendCommand(command);
+      if (command instanceof PlayerDiedCommand) {
+        this.deadTimeout = command.timeout;
+        this.overlay.appendChild(this.announcmentText);
+      } else if (command instanceof UpdatePlanetOwnershipCommand) {
+        const all = command.declaCount + command.redCount + command.neutralCount;
+        this.declaPlanetCountElement.style.width = (command.declaCount / all) * 100 + '%';
+        this.neutralPlanetCountElement.style.width =
+          (command.neutralCount / all) * 100 + '%';
+        this.redPlanetCountElement.style.width = (command.redCount / all) * 100 + '%';
+
+        if (command.declaCount > all * 0.5) {
+          this.overlay.appendChild(this.announcmentText);
+          this.announcmentText.innerText = 'Decla team won 🎉';
+        }
+
+        if (command.redCount > all * 0.5) {
+          this.overlay.appendChild(this.announcmentText);
+          this.announcmentText.innerText = 'Red team won 🎉';
+        }
+      } else this.gameObjects.sendCommand(command);
     });
 
     this.socket.on(TransportEvents.Ping, () => {
@@ -82,14 +108,14 @@ export class Game {
     );
   }
 
-  private async setupRenderer(): Promise<void> {
+  private async start(): Promise<void> {
     const noiseTexture = await renderNoise([256, 256], 2, 1);
-
+    this.setupCommunication(this.playerDecision.server);
-    this.renderer = await compile(
+    runAnimation(
       this.canvas,
       [
         {
-          ...Polygon.descriptor,
+          ...PlanetShape.descriptor,
           shaderCombinationSteps: [0, 1, 2, 3],
         },
         {
@@ -97,55 +123,49 @@ export class Game {
           shaderCombinationSteps: [0, 1, 2, 8],
         },
         {
-          ...Circle.descriptor,
+          ...ColorfulCircle.descriptor,
           shaderCombinationSteps: [0, 2, 16],
         },
         {
           ...CircleLight.descriptor,
-          shaderCombinationSteps: [0, 1, 2, 4, 8],
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
         },
         {
           ...Flashlight.descriptor,
           shaderCombinationSteps: [0],
         },
       ],
+      this.gameLoop.bind(this),
       {
         shadowTraceCount: 16,
-        paletteSize: 10,
+        paletteSize: settings.palette.length,
         //enableStopwatch: true,
       },
-    );
+      {
-
+        ambientLight: rgb(0.45, 0.4, 0.45),
-    this.renderer.setRuntimeSettings({
+        colorPalette: settings.palette,
-      ambientLight: rgb(0.45, 0.4, 0.45),
+        enableHighDpiRendering: true,
-      colorPalette: [
+        lightCutoffDistance: settings.lightCutoffDistance,
-        rgb(1, 1, 1),
+        textures: {
-        rgb(0.4, 0.4, 0.4),
+          noiseTexture: {
-        rgb(1, 1, 1),
+            source: noiseTexture,
-        ...settings.playerColors,
+            overrides: {
-      ],
+              maxFilter: FilteringOptions.LINEAR,
-      enableHighDpiRendering: true,
+              wrapS: WrapOptions.MIRRORED_REPEAT,
-      lightCutoffDistance: settings.lightCutoffDistance,
+              wrapT: WrapOptions.MIRRORED_REPEAT,
-      textures: {
+            },
-        noiseTexture: {
-          source: noiseTexture,
-          overrides: {
-            maxFilter: FilteringOptions.LINEAR,
-            wrapS: WrapOptions.MIRRORED_REPEAT,
-            wrapT: WrapOptions.MIRRORED_REPEAT,
           },
         },
       },
-    });
+    );
-  }
-
-  public async start(): Promise<void> {
-    await this.promises;
-    requestAnimationFrame(this.gameLoop.bind(this));
   }
 
   public displayToWorldCoordinates(p: vec2): vec2 {
-    return this.renderer?.displayToWorldCoordinates(p);
+    const result = this.renderer?.displayToWorldCoordinates(p);
+    if (!result) {
+      return vec2.create();
+    }
+    return result;
   }
 
   public aspectRatioChanged(aspectRatio: number) {
@@ -155,14 +175,23 @@ export class Game {
     );
   }
 
-  private gameLoop(time: DOMHighResTimeStamp) {
+  private announcmentText = document.createElement('h2');
-    const deltaTime = this.deltaTimeCalculator.getNextDeltaTimeInMilliseconds(time);
+  private gameLoop(
+    renderer: Renderer,
+    currentTime: DOMHighResTimeStamp,
+    deltaTime: DOMHighResTimeStamp,
+  ): boolean {
+    this.renderer = renderer;
+
+    if ((this.deadTimeout -= deltaTime / 1000) > 0) {
+      this.announcmentText.innerText = `Respawning in ${Math.floor(this.deadTimeout)} …`;
+    } else {
+      this.announcmentText.parentElement?.removeChild(this.announcmentText);
+    }
 
     this.gameObjects.stepObjects(deltaTime);
-    this.gameObjects.drawObjects(this.renderer);
+    this.gameObjects.drawObjects(this.renderer, this.overlay);
-    this.renderer.renderDrawables();
 
-    // this.overlay.innerText = prettyPrint(this.renderer.insights);
+    return true;
-    requestAnimationFrame(this.gameLoop.bind(this));
   }
 }

frontend/src/scripts/handle-full-screen.ts

@@ -0,0 +1,27 @@
+export const handleFullScreen = (
+  minimizeButton: HTMLElement,
+  maximizeButton: HTMLElement,
+) => {
+  if (!document.fullscreenEnabled) {
+    minimizeButton.style.visibility = 'hidden';
+    maximizeButton.style.visibility = 'hidden';
+    return;
+  }
+
+  let isInFullScreen = document.fullscreenElement !== null;
+
+  const showButtons = () => {
+    minimizeButton.style.visibility = isInFullScreen ? 'visible' : 'hidden';
+    maximizeButton.style.visibility = isInFullScreen ? 'hidden' : 'visible';
+  };
+
+  showButtons();
+
+  maximizeButton.addEventListener('click', () => document.body.requestFullscreen());
+  minimizeButton.addEventListener('click', () => document.exitFullscreen());
+
+  document.addEventListener('fullscreenchange', () => {
+    isInFullScreen = !isInFullScreen;
+    showButtons();
+  });
+};

frontend/src/scripts/helper/delta-time-calculator.ts

@@ -1,25 +0,0 @@
-export class DeltaTimeCalculator {
-  private previousTime: DOMHighResTimeStamp | null = null;
-
-  constructor() {
-    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
-  }
-
-  public getNextDeltaTimeInMilliseconds(
-    currentTime: DOMHighResTimeStamp,
-  ): DOMHighResTimeStamp {
-    if (this.previousTime === null) {
-      this.previousTime = currentTime;
-    }
-
-    const delta = currentTime - this.previousTime;
-    this.previousTime = currentTime;
-    return delta;
-  }
-
-  private handleVisibilityChange() {
-    if (!document.hidden) {
-      this.previousTime = null;
-    }
-  }
-}

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

@@ -7,6 +7,7 @@ import {
   NoisyPolygonFactory,
   Renderer,
   renderNoise,
+  runAnimation,
   WrapOptions,
 } from 'sdf-2d';
 import { settings, rgb, PlanetBase, Random } from 'shared';
@@ -18,17 +19,17 @@ const LangindPagePolygon = NoisyPolygonFactory(
 );
 
 export class LandingPageBackground {
-  private renderer!: Renderer;
+  private isActive = true;
 
-  constructor(private readonly canvas: HTMLCanvasElement) {
+  constructor(canvas: HTMLCanvasElement) {
-    this.start();
+    this.start(canvas);
   }
 
-  private async start(): Promise<void> {
+  private async start(canvas: HTMLCanvasElement): Promise<void> {
     const noiseTexture = await renderNoise([256, 256], 1.2, 2);
 
-    this.renderer = await compile(
+    runAnimation(
-      this.canvas,
+      canvas,
       [
         {
           ...LangindPagePolygon.descriptor,
@@ -39,45 +40,36 @@ export class LandingPageBackground {
           shaderCombinationSteps: [0, 2],
         },
       ],
+      this.gameLoop.bind(this),
       {
         shadowTraceCount: 16,
         paletteSize: 1,
       },
-    );
+      {
-
+        ambientLight: rgb(0, 0, 0),
-    this.renderer.setRuntimeSettings({
+        lightCutoffDistance: settings.lightCutoffDistance,
-      ambientLight: rgb(0, 0, 0),
+        textures: {
-      lightCutoffDistance: settings.lightCutoffDistance,
+          noiseTexture: {
-      textures: {
+            source: noiseTexture,
-        noiseTexture: {
+            overrides: {
-          source: noiseTexture,
+              maxFilter: FilteringOptions.LINEAR,
-          overrides: {
+              wrapS: WrapOptions.MIRRORED_REPEAT,
-            maxFilter: FilteringOptions.LINEAR,
+              wrapT: WrapOptions.MIRRORED_REPEAT,
-            wrapS: WrapOptions.MIRRORED_REPEAT,
+            },
-            wrapT: WrapOptions.MIRRORED_REPEAT,
           },
         },
       },
-    });
+    );
-
-    requestAnimationFrame(this.gameLoop.bind(this));
   }
 
-  public destroy() {
+  private gameLoop(renderer: Renderer, time: DOMHighResTimeStamp, _: number): boolean {
-    this.renderer.destroy();
-  }
-
-  private gameLoop(time: DOMHighResTimeStamp) {
     Random.seed = 42;
 
-    this.renderer.setViewArea(
+    renderer.setViewArea(vec2.fromValues(0, renderer.canvasSize.y), renderer.canvasSize);
-      vec2.fromValues(0, this.renderer.canvasSize.y),
-      this.renderer.canvasSize,
-    );
 
     const topPlanetPosition = vec2.fromValues(
-      0.7 * this.renderer.canvasSize.x,
+      0.7 * renderer.canvasSize.x,
-      0.7 * this.renderer.canvasSize.y,
+      0.7 * renderer.canvasSize.y,
     );
 
     const topPlanet = new LangindPagePolygon(
@@ -93,8 +85,8 @@ export class LandingPageBackground {
     (topPlanet as any).randomOffset = 0.5 + time / 3500;
 
     const bottomPlanetPosition = vec2.fromValues(
-      0.3 * this.renderer.canvasSize.x,
+      0.3 * renderer.canvasSize.x,
-      0.3 * this.renderer.canvasSize.y,
+      0.3 * renderer.canvasSize.y,
     );
 
     const bottomPlanet = new LangindPagePolygon(
@@ -118,11 +110,12 @@ export class LandingPageBackground {
     const planetDirection = vec2.normalize(planetDistance, planetDistance);
     const planetAngle = Math.atan2(planetDirection.y, planetDirection.x);
 
-    this.renderer.addDrawable(topPlanet);
+    renderer.addDrawable(topPlanet);
-    this.renderer.addDrawable(bottomPlanet);
+    renderer.addDrawable(bottomPlanet);
-    this.renderer.addDrawable(
+    renderer.addDrawable(
       new CircleLight(
         this.calculateLightPosition(
+          renderer,
           planetAngle,
           planetDistanceLength * 1.2,
           -time / 3000,
@@ -132,9 +125,10 @@ export class LandingPageBackground {
       ),
     );
 
-    this.renderer.addDrawable(
+    renderer.addDrawable(
       new CircleLight(
         this.calculateLightPosition(
+          renderer,
           planetAngle,
           planetDistanceLength * 1.2,
           time / 2000 + Math.PI,
@@ -144,21 +138,28 @@ export class LandingPageBackground {
       ),
     );
 
-    this.renderer.renderDrawables();
+    return this.isActive;
-
-    requestAnimationFrame(this.gameLoop.bind(this));
   }
 
-  private calculateLightPosition(angle: number, length: number, t: number): vec2 {
+  private calculateLightPosition(
+    renderer: Renderer,
+    angle: number,
+    length: number,
+    t: number,
+  ): vec2 {
     const lightPosition = vec2.fromValues(
       length * Math.sin(t),
       length * Math.sin(t) * Math.cos(t),
     );
 
-    const canvasCenter = vec2.scale(vec2.create(), this.renderer.canvasSize, 0.5);
+    const canvasCenter = vec2.scale(vec2.create(), renderer.canvasSize, 0.5);
 
     vec2.add(lightPosition, lightPosition, canvasCenter);
     vec2.rotate(lightPosition, lightPosition, canvasCenter, angle);
     return lightPosition;
   }
+
+  public destroy() {
+    this.isActive = false;
+  }
 }

frontend/src/scripts/objects/camera.ts

@@ -14,13 +14,11 @@ export class Camera extends GameObject implements ViewObject {
     super(null);
   }
 
-  public update(updates: Array<UpdateMessage>) {
+  public beforeDestroy(): void {}
-    throw new Error();
-  }
 
   public step(deltaTimeInMilliseconds: number): void {}
 
-  public draw(renderer: Renderer) {
+  public draw(renderer: Renderer, overlay: HTMLElement) {
     const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;
     if (canvasAspectRatio !== this.aspectRatio) {
       this.aspectRatio = canvasAspectRatio;

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, UpdateMessage } from 'shared';
+import { CharacterBase, CharacterTeam, Circle, Id, UpdateMessage } from 'shared';
 
 import { BlobShape } from '../shapes/blob-shape';
 import { ViewObject } from './view-object';
@@ -11,25 +11,25 @@ export class CharacterView extends CharacterBase implements ViewObject {
   constructor(
     id: Id,
     colorIndex: number,
+    team: CharacterTeam,
+    health: number,
     head?: Circle,
     leftFoot?: Circle,
     rightFoot?: Circle,
   ) {
-    super(id, colorIndex, head, leftFoot, rightFoot);
+    super(id, colorIndex, team, health, 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 beforeDestroy(): void {}
+
   public step(deltaTimeInMilliseconds: number): void {}
 
-  public draw(renderer: Renderer): void {
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
     this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
     renderer.addDrawable(this.shape);
   }

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

@@ -22,6 +22,7 @@ export class GameObjectContainer extends CommandReceiver {
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
       this.player = c.character as PlayerCharacterView;
+      console.log(c.character);
       this.camera = new Camera(this.game);
       this.addObject(this.player);
       this.addObject(this.camera);
@@ -31,7 +32,7 @@ export class GameObjectContainer extends CommandReceiver {
       c.objects.forEach((o) => this.addObject(o as ViewObject)),
 
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
-      c.ids.forEach((id: Id) => this.objects.delete(id)),
+      c.ids.forEach((id: Id) => this.deleteObject(id)),
 
     [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
       c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
@@ -50,11 +51,17 @@ export class GameObjectContainer extends CommandReceiver {
     this.objects.forEach((o) => o.step(delta));
   }
 
-  public drawObjects(renderer: Renderer) {
+  public drawObjects(renderer: Renderer, overlay: HTMLElement) {
-    this.objects.forEach((o) => o.draw(renderer));
+    this.objects.forEach((o) => o.draw(renderer, overlay));
   }
 
   private addObject(object: ViewObject) {
     this.objects.set(object.id, object);
   }
+
+  private deleteObject(id: Id) {
+    const object = this.objects.get(id);
+    object?.beforeDestroy();
+    this.objects.delete(id);
+  }
 }

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

@@ -16,13 +16,11 @@ 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 {
+  public beforeDestroy(): void {}
+
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
     renderer.addDrawable(this.light);
   }
 }

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

@@ -1,32 +1,62 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable, Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, Random, PlanetBase, UpdateMessage } from 'shared';
+import {
+  CommandExecutors,
+  Id,
+  Random,
+  PlanetBase,
+  UpdateMessage,
+  settings,
+} from 'shared';
 import { RenderCommand } from '../commands/types/render';
-import { Polygon } from '../shapes/polygon';
+import { PlanetShape } from '../shapes/planet-shape';
 import { ViewObject } from './view-object';
 
 export class PlanetView extends PlanetBase implements ViewObject {
-  private shape: Drawable;
+  private shape: PlanetShape;
+  private ownershipProgess: HTMLElement;
 
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: (c: RenderCommand) => c.renderer.addDrawable(this.shape),
   };
 
-  constructor(id: Id, vertices: Array<vec2>) {
+  constructor(id: Id, vertices: Array<vec2>, ownership: number) {
     super(id, vertices);
-    this.shape = new Polygon(vertices);
+    this.shape = new PlanetShape(vertices, ownership);
     (this.shape as any).randomOffset = Random.getRandom();
-  }
 
-  public update(message: Array<UpdateMessage>): void {
+    this.ownershipProgess = document.createElement('div');
-    throw new Error('Method not implemented.');
+    this.ownershipProgess.className = 'ownership';
   }
 
   public step(deltaTimeInMilliseconds: number): void {
-    (this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
+    this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
+    this.shape.colorMixQ = this.ownership;
+    let teamName = 'Neutral';
+    if (this.ownership < 0.5 - settings.planetControlThreshold) {
+      teamName = 'Decla';
+    } else if (this.ownership > 0.5 + settings.planetControlThreshold) {
+      teamName = 'Red';
+    }
+
+    this.ownershipProgess.innerText = `${teamName} ${Math.round(
+      (Math.abs(this.ownership - 0.5) / 0.5) * 100,
+    )}%`;
   }
 
-  public draw(renderer: Renderer): void {
+  public beforeDestroy(): void {
+    this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
+  }
+
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
+    if (!this.ownershipProgess.parentElement) {
+      overlay.appendChild(this.ownershipProgess);
+    }
+
+    const screenPosition = renderer.worldToDisplayCoordinates(this.center);
+    this.ownershipProgess.style.left = screenPosition.x + 'px';
+    this.ownershipProgess.style.top = screenPosition.y + 'px';
+
     renderer.addDrawable(this.shape);
   }
 }

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

@@ -1,37 +1,84 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { Circle, Id, PlayerCharacterBase, UpdateMessage } from 'shared';
+import { Circle, Id, PlayerCharacterBase, UpdateMessage, CharacterTeam } from 'shared';
 
 import { BlobShape } from '../shapes/blob-shape';
 import { ViewObject } from './view-object';
 
 export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
   private shape: BlobShape;
+  private nameElement: HTMLElement;
+  private healthElement: HTMLElement;
+  private timeSinceLastNameElementUpdate = 0;
 
   constructor(
     id: Id,
     name: string,
     colorIndex: number,
+    team: CharacterTeam,
+    health: number,
     head?: Circle,
     leftFoot?: Circle,
     rightFoot?: Circle,
   ) {
-    super(id, name, colorIndex, head, leftFoot, rightFoot);
+    super(id, name, colorIndex, team, health, head, leftFoot, rightFoot);
     this.shape = new BlobShape(colorIndex);
-  }
 
-  public update(updates: Array<UpdateMessage>) {
+    console.log(this.id, 'created');
-    updates.forEach((u) => ((this as any)[u.key] = u.value));
+
+    this.nameElement = document.createElement('div');
+    this.nameElement.className = 'player-tag';
+    this.nameElement.innerText = this.name;
+    this.healthElement = document.createElement('div');
+    this.nameElement.appendChild(this.healthElement);
   }
 
   public get position(): vec2 {
     return this.head!.center;
   }
 
-  public step(deltaTimeInMilliseconds: number): void {}
+  public step(deltaTimeInMilliseconds: number): void {
+    this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
+    this.healthElement.style.width = this.health + '%';
+  }
+
+  public beforeDestroy(): void {
+    console.log(this.id, 'destroyes');
+    this.nameElement.parentElement?.removeChild(this.nameElement);
+  }
+
+  private elementAdded = false;
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
+    if (!this.elementAdded) {
+      this.elementAdded = true;
+      console.log(this.id, 'add', this.nameElement, this.nameElement.parentElement);
+      overlay.appendChild(this.nameElement);
+    }
+
+    if (this.timeSinceLastNameElementUpdate > 0.15) {
+      const screenPosition = renderer.worldToDisplayCoordinates(
+        this.calculateTextPosition(),
+      );
+      this.nameElement.style.left = screenPosition.x + 'px';
+      this.nameElement.style.top = screenPosition.y + 'px';
+      this.timeSinceLastNameElementUpdate = 0;
+    }
 
-  public draw(renderer: Renderer): void {
     this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
     renderer.addDrawable(this.shape);
   }
+
+  private calculateTextPosition(): vec2 {
+    const footAverage = vec2.add(
+      vec2.create(),
+      this.leftFoot!.center,
+      this.rightFoot!.center,
+    );
+    vec2.scale(footAverage, footAverage, 0.5);
+
+    const headFeetDelta = vec2.subtract(footAverage, this.head!.center, footAverage);
+    vec2.normalize(headFeetDelta, headFeetDelta);
+    const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 50);
+    return vec2.add(textOffset, this.head!.center, textOffset);
+  }
 }

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

@@ -1,29 +1,33 @@
 import { vec2 } from 'gl-matrix';
-import { CircleLight, Renderer } from 'sdf-2d';
+import { CircleLight, ColorfulCircle, Renderer } from 'sdf-2d';
-import { Id, ProjectileBase, rgb, UpdateMessage } from 'shared';
+import { Id, ProjectileBase, settings, UpdateMessage } from 'shared';
 import { ViewObject } from './view-object';
-import { Circle } from '../shapes/circle';
 
 export class ProjectileView extends ProjectileBase implements ViewObject {
-  private circle: InstanceType<typeof Circle>;
+  private circle: ColorfulCircle;
   private light: CircleLight;
 
-  constructor(id: Id, center: vec2, radius: number) {
+  constructor(
-    super(id, center, radius);
+    id: Id,
-    this.circle = new Circle(center, radius / 2);
+    center: vec2,
-    this.light = new CircleLight(center, rgb(1, 0.5, 0), 0.15);
+    radius: number,
-  }
+    colorIndex: number,
-
+    strength: number,
-  update(updates: Array<UpdateMessage>): void {
+  ) {
-    updates.forEach((u) => ((this as any)[u.key] = u.value));
+    super(id, center, radius, colorIndex, strength);
+    this.circle = new ColorfulCircle(center, radius / 2, colorIndex);
+    this.light = new CircleLight(center, settings.palette[colorIndex], 0);
   }
 
   public step(deltaTimeInMilliseconds: number): void {
     this.circle.center = this.center;
     this.light.center = this.center;
+    this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength;
   }
 
-  public draw(renderer: Renderer): void {
+  public beforeDestroy(): void {}
+
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
     renderer.addDrawable(this.circle);
     renderer.addDrawable(this.light);
   }

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

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

frontend/src/scripts/shapes/circle.ts

@@ -1,3 +0,0 @@
-import { CircleFactory } from 'sdf-2d';
-
-export const Circle = CircleFactory(2);

frontend/src/scripts/shapes/planet-shape.ts

@@ -0,0 +1,163 @@
+import { mat2d, vec2, vec3, vec4 } from 'gl-matrix';
+import { PolygonFactory, DrawableDescriptor, Drawable } from 'sdf-2d';
+import { settings } from 'shared';
+
+export const colorToString = (v: vec3 | vec4): string =>
+  `vec4(${v[0]}, ${v[1]}, ${v[2]}, ${v.length > 3 ? v[3] : 1})`;
+
+export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
+  public static descriptor: DrawableDescriptor = {
+    sdf: {
+      shader: `
+          uniform vec2 planetVertices[PLANET_COUNT * ${settings.planetEdgeCount}];
+          uniform vec2 planetCenters[PLANET_COUNT];
+          uniform float planetLengths[PLANET_COUNT];
+          uniform float planetRandoms[PLANET_COUNT];
+          uniform float planetColorMixQ[PLANET_COUNT];
+
+          uniform sampler2D noiseTexture;
+
+          #ifdef WEBGL2_IS_AVAILABLE
+            float planetTerrain(vec2 h) {
+              return texture(noiseTexture, h)[0] - 0.5;
+            }
+          #else
+            float planetTerrain(vec2 h) {
+              return texture2D(noiseTexture, h)[0] - 0.5;
+            }
+          #endif
+
+          vec2 planetLineDistance(vec2 target, vec2 from, vec2 to) {
+            vec2 targetFromDelta = target - from;
+            vec2 toFromDelta = to - from;
+            float h = clamp(
+              dot(targetFromDelta, toFromDelta) / dot(toFromDelta, toFromDelta),
+              0.0, 1.0
+            );
+
+            vec2 diff = targetFromDelta - toFromDelta * h;
+            return vec2(
+              dot(diff, diff),
+              toFromDelta.x * targetFromDelta.y - toFromDelta.y * targetFromDelta.x
+            );
+          }
+
+          float planetMinDistance(vec2 target, out vec4 color) {
+            float minDistance = 100.0;
+
+            for (int j = 0; j < PLANET_COUNT; j++) {
+              vec2 startEnd = planetVertices[j * ${settings.planetEdgeCount}];
+              vec2 vb = startEnd;
+
+              vec2 center = planetCenters[j];
+              float l = planetLengths[j];
+              float randomOffset = planetRandoms[j];
+              vec2 targetTangent = normalize(target - center);
+              vec2 noisyTarget = target - (
+                targetTangent * planetTerrain(vec2(
+                  l * abs(atan(targetTangent.y, targetTangent.x)),
+                  randomOffset
+                )) / 12.0
+              );
+            
+              float d = 10000.0;
+              float s = 1.0;
+              for (int k = 1; k < ${settings.planetEdgeCount}; k++) {
+                vec2 va = vb;
+                vb = planetVertices[j * ${settings.planetEdgeCount} + k];
+                vec2 ds = planetLineDistance(noisyTarget, va, vb);
+
+                bvec3 cond = bvec3(noisyTarget.y >= va.y, noisyTarget.y < vb.y, ds.y > 0.0);
+                if (all(cond) || all(not(cond))) {
+                  s *= -1.0;
+                }
+
+                d = min(d, ds.x);
+              }
+
+              vec2 ds = planetLineDistance(noisyTarget, vb, startEnd);
+              bvec3 cond = bvec3(noisyTarget.y >= vb.y, noisyTarget.y < startEnd.y, ds.y > 0.0);
+              if (all(cond) || all(not(cond))) {
+                s *= -1.0;
+              }
+
+              d = min(d, ds.x);
+              float dist = s * sqrt(d);
+
+              if (dist < minDistance) {
+                minDistance = dist;
+                color = mix(${colorToString(settings.declaPlanetColor)}, ${colorToString(
+        settings.redPlanetColor,
+      )}, planetColorMixQ[j]);
+              }
+            }
+
+            return minDistance;
+          }
+        `,
+      distanceFunctionName: 'planetMinDistance',
+    },
+    propertyUniformMapping: {
+      length: 'planetLengths',
+      random: 'planetRandoms',
+      center: 'planetCenters',
+      vertices: 'planetVertices',
+      colorMixQ: 'planetColorMixQ',
+    },
+    uniformCountMacroName: `PLANET_COUNT`,
+    shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
+    empty: new PlanetShape(new Array(settings.planetEdgeCount).fill(vec2.create()), 0),
+  };
+
+  public randomOffset = 0;
+
+  constructor(public vertices: Array<vec2>, public colorMixQ: number) {
+    super(vertices);
+  }
+
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    const transformedVertices = (this as any).actualVertices.map((v: vec2) =>
+      vec2.transformMat2d(vec2.create(), v, transform2d),
+    );
+
+    const center = transformedVertices.reduce(
+      (sum: vec2, v: vec2) => vec2.add(sum, sum, v),
+      vec2.create(),
+    );
+    vec2.scale(center, center, 1 / transformedVertices.length);
+
+    let length = 0;
+    for (let i = 1; i < this.vertices.length; i++) {
+      length += vec2.distance(transformedVertices[i - 1], transformedVertices[i]);
+    }
+
+    return {
+      vertices: transformedVertices,
+      center,
+      length,
+      random: this.randomOffset,
+      colorMixQ: this.colorMixQ,
+    };
+  }
+
+  public serializeToUniforms(
+    uniforms: any,
+    transform2d: mat2d,
+    transform1d: number,
+  ): void {
+    const { propertyUniformMapping } = (this.constructor as typeof Drawable).descriptor;
+
+    const serialized = this.getObjectToSerialize(transform2d, transform1d);
+    Object.entries(propertyUniformMapping).forEach(([k, v]) => {
+      if (!Object.prototype.hasOwnProperty.call(uniforms, v)) {
+        uniforms[v] = [];
+      }
+
+      if (k === 'vertices') {
+        uniforms[v].push(...serialized[k]);
+      } else {
+        uniforms[v].push(serialized[k]);
+      }
+    });
+  }
+}

frontend/src/scripts/shapes/polygon.ts

@@ -1,4 +0,0 @@
-import { NoisyPolygonFactory } from 'sdf-2d';
-import { settings } from 'shared';
-
-export const Polygon = NoisyPolygonFactory(settings.polygonEdgeCount, 1);

frontend/src/styles/form.scss

@@ -1,9 +1,18 @@
 @import './vars.scss';
+@import './mixins.scss';
 
 form {
-  backdrop-filter: blur(24px);
+  @include background;
-  background-color: rgba(0, 0, 0, 0.15);
+
   padding: $small-padding / 2 $small-padding $small-padding $small-padding;
+  border-radius: $border-radius;
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus {
+    -webkit-text-fill-color: white;
+    transition: background-color 5000s ease-in-out 0s;
+  }
 
   input,
   label {
@@ -57,6 +66,7 @@ form {
         display: block;
         transition: $animation-time;
         color: $gray;
+        font-size: 1.1rem;
       }
 
       input:focus,
@@ -78,6 +88,7 @@ form {
     input[type='radio'] {
       width: 0;
       height: 0;
+      appearance: none;
 
       + label {
         display: block;
@@ -100,25 +111,23 @@ form {
       }
     }
   }
-
+}
-  button {
+
-    border: none;
+button {
-    background: none;
+  border: none;
-    font-size: 2rem;
+  background: none;
-    font-family: 'Comfortaa', sans-serif;
+  font-size: 2rem;
-    cursor: pointer;
+  font-family: 'Comfortaa', sans-serif;
-    display: block;
+  cursor: pointer;
-    margin: auto;
+  display: block;
-    padding-top: $medium-padding;
+  margin: auto;
-    transition: transform $animation-time;
+  padding-top: $medium-padding;
-
+  transition: transform $animation-time;
-    &:hover,
+
-    &:focus {
+  &:hover,
-      outline: none;
+  &:focus {
-      color: $accent;
+    outline: none;
-      transform: translateY(-8px);
+    color: $accent;
-    }
+    transform: translateY(-8px);
-  }
+  }
-
-  border-radius: $border-radius;
 }

frontend/src/styles/main.scss

@@ -1,5 +1,6 @@
 @import './vars.scss';
 @import './form.scss';
+@import './mixins.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 * {
@@ -21,7 +22,8 @@ html {
   }
 }
 
-h1 {
+h1,
+h2 {
   &,
   * {
     font-family: 'Comfortaa', sans-serif;
@@ -31,6 +33,10 @@ h1 {
   padding-bottom: $medium-padding;
 }
 
+h2 {
+  font-size: 4rem;
+}
+
 .red {
   color: $red;
   &::selection {
@@ -48,6 +54,8 @@ canvas {
 }
 
 body {
+  overflow: hidden;
+
   #landing-ui {
     width: 100%;
     height: 100%;
@@ -67,7 +75,104 @@ body {
     top: 0;
 
     pointer-events: none;
+    user-select: none;
 
-    font-size: 0.75rem;
+    overflow: hidden;
+
+    h2 {
+      margin: $large-padding 0;
+    }
+
+    .player-tag {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%) rotate(-15deg);
+      transition: left 200ms, top 200ms;
+
+      div {
+        height: 3px;
+        background-color: rebeccapurple;
+      }
+    }
+
+    .ownership {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .planet-progress {
+      position: absolute;
+      top: $small-padding;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 50%;
+      display: flex;
+      $height: 8px;
+      height: $height;
+
+      border-radius: 4px;
+
+      div {
+        height: $height;
+      }
+
+      div:nth-child(1) {
+        background: rebeccapurple;
+      }
+
+      div:nth-child(2) {
+        background: gray;
+      }
+
+      div:nth-child(3) {
+        background: red;
+      }
+    }
+  }
+
+  #open-settings {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    animation: spin 32s linear infinite;
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  .icon {
+    box-sizing: content-box;
+
+    user-select: none;
+    cursor: pointer;
+
+    padding: $medium-padding;
+    @include square(48px);
+    @media (max-width: $breakpoint) {
+      @include square(32px);
+      padding: $small-padding;
+    }
+  }
+
+  .full-screen-controllers {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  #settings {
+    @include background;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    padding: $large-padding;
+    visibility: hidden;
   }
 }

frontend/src/styles/mixins.scss

@@ -0,0 +1,11 @@
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin background {
+  backdrop-filter: blur(24px);
+  @supports not (backdrop-filter: blur(24px)) {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}

frontend/static/maximize.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+  <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+  <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+  <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+</svg>

frontend/static/minimize.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M15 19v-2a2 2 0 0 1 2 -2h2" />
+  <path d="M15 5v2a2 2 0 0 0 2 2h2" />
+  <path d="M5 15h2a2 2 0 0 1 2 2v2" />
+  <path d="M5 9h2a2 2 0 0 0 2 -2v-2" />
+</svg>

frontend/static/settings.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 512 512" width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="white">
+  <path d="m272.066 512h-32.133c-25.989 0-47.134-21.144-47.134-47.133v-10.871c-11.049-3.53-21.784-7.986-32.097-13.323l-7.704 7.704c-18.659 18.682-48.548 18.134-66.665-.007l-22.711-22.71c-18.149-18.129-18.671-48.008.006-66.665l7.698-7.698c-5.337-10.313-9.792-21.046-13.323-32.097h-10.87c-25.988 0-47.133-21.144-47.133-47.133v-32.134c0-25.989 21.145-47.133 47.134-47.133h10.87c3.531-11.05 7.986-21.784 13.323-32.097l-7.704-7.703c-18.666-18.646-18.151-48.528.006-66.665l22.713-22.712c18.159-18.184 48.041-18.638 66.664.006l7.697 7.697c10.313-5.336 21.048-9.792 32.097-13.323v-10.87c0-25.989 21.144-47.133 47.134-47.133h32.133c25.989 0 47.133 21.144 47.133 47.133v10.871c11.049 3.53 21.784 7.986 32.097 13.323l7.704-7.704c18.659-18.682 48.548-18.134 66.665.007l22.711 22.71c18.149 18.129 18.671 48.008-.006 66.665l-7.698 7.698c5.337 10.313 9.792 21.046 13.323 32.097h10.87c25.989 0 47.134 21.144 47.134 47.133v32.134c0 25.989-21.145 47.133-47.134 47.133h-10.87c-3.531 11.05-7.986 21.784-13.323 32.097l7.704 7.704c18.666 18.646 18.151 48.528-.006 66.665l-22.713 22.712c-18.159 18.184-48.041 18.638-66.664-.006l-7.697-7.697c-10.313 5.336-21.048 9.792-32.097 13.323v10.871c0 25.987-21.144 47.131-47.134 47.131zm-106.349-102.83c14.327 8.473 29.747 14.874 45.831 19.025 6.624 1.709 11.252 7.683 11.252 14.524v22.148c0 9.447 7.687 17.133 17.134 17.133h32.133c9.447 0 17.134-7.686 17.134-17.133v-22.148c0-6.841 4.628-12.815 11.252-14.524 16.084-4.151 31.504-10.552 45.831-19.025 5.895-3.486 13.4-2.538 18.243 2.305l15.688 15.689c6.764 6.772 17.626 6.615 24.224.007l22.727-22.726c6.582-6.574 6.802-17.438.006-24.225l-15.695-15.695c-4.842-4.842-5.79-12.348-2.305-18.242 8.473-14.326 14.873-29.746 19.024-45.831 1.71-6.624 7.684-11.251 14.524-11.251h22.147c9.447 0 17.134-7.686 17.134-17.133v-32.134c0-9.447-7.687-17.133-17.134-17.133h-22.147c-6.841 0-12.814-4.628-14.524-11.251-4.151-16.085-10.552-31.505-19.024-45.831-3.485-5.894-2.537-13.4 2.305-18.242l15.689-15.689c6.782-6.774 6.605-17.634.006-24.225l-22.725-22.725c-6.587-6.596-17.451-6.789-24.225-.006l-15.694 15.695c-4.842 4.843-12.35 5.791-18.243 2.305-14.327-8.473-29.747-14.874-45.831-19.025-6.624-1.709-11.252-7.683-11.252-14.524v-22.15c0-9.447-7.687-17.133-17.134-17.133h-32.133c-9.447 0-17.134 7.686-17.134 17.133v22.148c0 6.841-4.628 12.815-11.252 14.524-16.084 4.151-31.504 10.552-45.831 19.025-5.896 3.485-13.401 2.537-18.243-2.305l-15.688-15.689c-6.764-6.772-17.627-6.615-24.224-.007l-22.727 22.726c-6.582 6.574-6.802 17.437-.006 24.225l15.695 15.695c4.842 4.842 5.79 12.348 2.305 18.242-8.473 14.326-14.873 29.746-19.024 45.831-1.71 6.624-7.684 11.251-14.524 11.251h-22.148c-9.447.001-17.134 7.687-17.134 17.134v32.134c0 9.447 7.687 17.133 17.134 17.133h22.147c6.841 0 12.814 4.628 14.524 11.251 4.151 16.085 10.552 31.505 19.024 45.831 3.485 5.894 2.537 13.4-2.305 18.242l-15.689 15.689c-6.782 6.774-6.605 17.634-.006 24.225l22.725 22.725c6.587 6.596 17.451 6.789 24.225.006l15.694-15.695c3.568-3.567 10.991-6.594 18.244-2.304z"/>
+  <path d="m256 367.4c-61.427 0-111.4-49.974-111.4-111.4s49.973-111.4 111.4-111.4 111.4 49.974 111.4 111.4-49.973 111.4-111.4 111.4zm0-192.8c-44.885 0-81.4 36.516-81.4 81.4s36.516 81.4 81.4 81.4 81.4-36.516 81.4-81.4-36.515-81.4-81.4-81.4z"/>
+</svg>

frontend/tsconfig.json

@@ -1,9 +1,6 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,
     "target": "es6",
     "esModuleInterop": true,
     "strict": true,
@@ -14,5 +11,5 @@
     "composite": true,
     "lib": ["dom", "es2017"]
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/*.ts"]
 }

frontend/webpack.config.js

@@ -80,6 +80,16 @@ module.exports = (env, argv) => ({
           },
         },
       },
+      {
+        test: /\.svg$/,
+        use: {
+          loader: 'file-loader',
+          query: {
+            outputPath: '/static',
+            name: '[name].[ext]',
+          },
+        },
+      },
       {
         test: /\.scss$/,
         use: [

shared/src/commands/types/player-died.ts

@@ -0,0 +1,14 @@
+import { vec2 } from 'gl-matrix';
+import { serializable } from '../../transport/serialization/serializable';
+import { Command } from '../command';
+
+@serializable
+export class PlayerDiedCommand extends Command {
+  public constructor(public readonly timeout: number) {
+    super();
+  }
+
+  public toArray(): Array<any> {
+    return [this.timeout];
+  }
+}

shared/src/commands/types/update-planet-ownership.ts

@@ -0,0 +1,17 @@
+import { serializable } from '../../transport/serialization/serializable';
+import { Command } from '../command';
+
+@serializable
+export class UpdatePlanetOwnershipCommand extends Command {
+  public constructor(
+    public readonly declaCount: number,
+    public readonly redCount: number,
+    public readonly neutralCount: number,
+  ) {
+    super();
+  }
+
+  public toArray(): Array<any> {
+    return [this.declaCount, this.redCount, this.neutralCount];
+  }
+}

shared/src/helper/hsl.ts

@@ -0,0 +1,34 @@
+import { vec3 } from 'gl-matrix';
+import { rgb } from './rgb';
+
+export const hsl = (hue: number, saturation: number, lightness: number): vec3 => {
+  hue /= 360;
+  saturation /= 100;
+  lightness /= 100;
+  let r, g, b;
+
+  if (saturation == 0) {
+    r = g = b = lightness;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q =
+      lightness < 0.5
+        ? lightness * (1 + saturation)
+        : lightness + saturation - lightness * saturation;
+    const p = 2 * lightness - q;
+
+    r = hue2rgb(p, q, hue + 1 / 3);
+    g = hue2rgb(p, q, hue);
+    b = hue2rgb(p, q, hue - 1 / 3);
+  }
+
+  return rgb(r, g, b);
+};

shared/src/main.ts

@@ -5,7 +5,9 @@ export * from './commands/types/delete-objects';
 export * from './commands/types/ternary-action';
 export * from './commands/types/move-action';
 export * from './commands/types/primary-action';
+export * from './commands/types/player-died';
 export * from './commands/types/update-objects';
+export * from './commands/types/update-planet-ownership';
 export * from './commands/types/secondary-action';
 export * from './commands/command-receiver';
 export * from './commands/command-executors';
@@ -15,6 +17,7 @@ export * from './commands/types/set-aspect-ratio-action';
 export * from './helper/array';
 export * from './helper/last';
 export * from './helper/rgb';
+export * from './helper/hsl';
 export * from './helper/rgb255';
 export * from './helper/mix-rgb';
 export * from './helper/clamp';
@@ -36,6 +39,7 @@ export * from './transport/serialization/serializes-to';
 export * from './transport/serialization/serializable';
 export * from './transport/serialization/override-deserialization';
 export * from './objects/types/character-base';
+export * from './objects/types/character-team';
 export * from './objects/update-message';
 export * from './objects/types/player-character-base';
 export * from './objects/types/lamp-base';

shared/src/objects/game-object.ts

@@ -1,5 +1,14 @@
+import { UpdateMessage, UpdateObjectMessage } from '../main';
 import { Id } from '../transport/identity';
 
 export abstract class GameObject {
   constructor(public readonly id: Id) {}
+
+  public calculateUpdates(): UpdateObjectMessage | undefined {
+    return;
+  }
+
+  update(updates: Array<UpdateMessage>): void {
+    updates.forEach((u) => ((this as any)[u.key] = u.value));
+  }
 }

shared/src/objects/types/character-base.ts

@@ -2,12 +2,15 @@ import { Circle } from '../../helper/circle';
 import { Id } from '../../transport/identity';
 import { serializable } from '../../transport/serialization/serializable';
 import { GameObject } from '../game-object';
+import { CharacterTeam } from './character-team';
 
 @serializable
 export class CharacterBase extends GameObject {
   constructor(
     id: Id,
     public colorIndex: number,
+    public team: CharacterTeam,
+    public health: number,
     public head?: Circle,
     public leftFoot?: Circle,
     public rightFoot?: Circle,
@@ -16,7 +19,7 @@ export class CharacterBase extends GameObject {
   }
 
   public toArray(): Array<any> {
-    const { id, colorIndex, head, leftFoot, rightFoot } = this;
+    const { id, colorIndex, team, health, head, leftFoot, rightFoot } = this;
-    return [id, colorIndex, head, leftFoot, rightFoot];
+    return [id, colorIndex, team, health, head, leftFoot, rightFoot];
   }
 }

shared/src/objects/types/character-team.ts

@@ -0,0 +1,4 @@
+export enum CharacterTeam {
+  decla = 'decla',
+  red = 'red',
+}

shared/src/objects/types/planet-base.ts

@@ -7,8 +7,16 @@ import { GameObject } from '../game-object';
 
 @serializable
 export class PlanetBase extends GameObject {
-  constructor(id: Id, public readonly vertices: Array<vec2>) {
+  public readonly center: vec2;
+
+  constructor(
+    id: Id,
+    public readonly vertices: Array<vec2>,
+    public ownership: number = 0.5,
+  ) {
     super(id);
+    this.center = vertices.reduce((sum, v) => vec2.add(sum, sum, v), vec2.create());
+    vec2.scale(this.center, this.center, 1 / vertices.length);
   }
 
   public static createPlanetVertices(
@@ -16,7 +24,7 @@ export class PlanetBase extends GameObject {
     width: number,
     height: number,
     randomness: number,
-    vertexCount = settings.polygonEdgeCount,
+    vertexCount = settings.planetEdgeCount,
   ): Array<vec2> {
     const vertices = [];
 

shared/src/objects/types/player-character-base.ts

@@ -2,6 +2,7 @@ import { CharacterBase } from './character-base';
 import { Circle } from '../../helper/circle';
 import { Id } from '../../transport/identity';
 import { serializable } from '../../transport/serialization/serializable';
+import { CharacterTeam } from './character-team';
 
 @serializable
 export class PlayerCharacterBase extends CharacterBase {
@@ -9,15 +10,17 @@ export class PlayerCharacterBase extends CharacterBase {
     id: Id,
     public name: string,
     colorIndex: number,
+    team: CharacterTeam,
+    health: number,
     head?: Circle,
     leftFoot?: Circle,
     rightFoot?: Circle,
   ) {
-    super(id, colorIndex, head, leftFoot, rightFoot);
+    super(id, colorIndex, team, health, head, leftFoot, rightFoot);
   }
 
   public toArray(): Array<any> {
-    const { id, name, colorIndex, head, leftFoot, rightFoot } = this;
+    const { id, name, colorIndex, team, health, head, leftFoot, rightFoot } = this;
-    return [id, name, colorIndex, head, leftFoot, rightFoot];
+    return [id, name, colorIndex, team, health, head, leftFoot, rightFoot];
   }
 }

shared/src/objects/types/projectile-base.ts

@@ -5,11 +5,17 @@ import { GameObject } from '../game-object';
 
 @serializable
 export class ProjectileBase extends GameObject {
-  constructor(id: Id, public center: vec2, public radius: number) {
+  constructor(
+    id: Id,
+    public center: vec2,
+    public radius: number,
+    public colorIndex: number,
+    public strength: number,
+  ) {
     super(id);
   }
 
   public toArray(): Array<any> {
-    return [this.id, this.center, this.radius];
+    return [this.id, this.center, this.radius, this.colorIndex, this.strength];
   }
 }

shared/src/settings.ts

@@ -1,55 +1,47 @@
+import { rgb } from './helper/rgb';
 import { rgb255 } from './helper/rgb255';
 
+const declaColor = rgb255(181, 138, 255);
+const redColor = rgb255(255, 138, 138);
+const declaPlanetColor = rgb(0, 0, 3);
+const redPlanetColor = rgb(3, 0, 0);
+
 export const settings = {
   lightCutoffDistance: 600,
   physicsMaxStep: 2,
   maxVelocityX: 1000,
   maxVelocityY: 1000,
-  polygonEdgeCount: 7,
+  planetEdgeCount: 7,
+  takeControlTimeInSeconds: 10,
   maxGravityDistance: 700,
   maxGravityQ: 180,
+  planetControlThreshold: 0.2,
+  playerMaxHealth: 100,
   maxGravityStrength: 10000,
   maxAcceleration: 10000,
+  playerMaxStrength: 80,
+  playerDiedTimeout: 5,
+  playerStrengthRegenerationPerSeconds: 40,
+  projectileMaxStrength: 40,
   projectileSpeed: 4000,
   projectileMaxBounceCount: 1,
-  projectileStartOffset: 250,
+  projectileTimeout: 3,
+  projectileFadeSpeed: 20,
+  projectileStartOffset: 150,
   projectileCreationInterval: 0.1,
   playerColorIndexOffset: 3,
-  worldTopEdge: 10000,
+  worldTopEdge: 3000,
-  worldRightEdge: 10000,
+  worldRightEdge: 3000,
-  worldLeftEdge: -10000,
+  worldLeftEdge: -3000,
-  worldBottomEdge: -10000,
+  worldBottomEdge: -3000,
   backgroundGradient: [rgb255(90, 38, 43), rgb255(43, 39, 73)],
-  playerColors: [
+  declaColor,
-    rgb255(107, 48, 188),
+  declaPlanetColor,
-    rgb255(56, 254, 220),
+  redColor,
-    rgb255(197, 17, 17),
+  redPlanetColor,
-    rgb255(24, 24, 24),
+  declaIndex: 0,
-    rgb255(245, 245, 88),
+  redIndex: 1,
-    rgb255(80, 239, 58),
+  palette: [declaColor, redColor],
-    rgb255(18, 127, 45),
-    rgb255(240, 125, 13),
-    rgb255(214, 227, 241),
-    rgb255(0, 161, 161),
-    rgb255(250, 161, 151),
-    rgb255(235, 84, 185),
-    rgb255(114, 73, 30),
-    rgb255(75, 75, 75),
-    rgb255(107, 48, 188),
-    rgb255(56, 254, 220),
-    rgb255(197, 17, 17),
-    rgb255(24, 24, 24),
-    rgb255(245, 245, 88),
-    rgb255(80, 239, 58),
-    rgb255(18, 127, 45),
-    rgb255(240, 125, 13),
-    rgb255(214, 227, 241),
-    rgb255(0, 161, 161),
-    rgb255(250, 161, 151),
-    rgb255(235, 84, 185),
-    rgb255(114, 73, 30),
-    rgb255(75, 75, 75),
-  ],
   targetPhysicsDeltaTimeInMilliseconds: 20,
   minPhysicsSleepTime: 4,
   velocityAttenuation: 0.25,

shared/tsconfig.json

@@ -13,5 +13,6 @@
     "module": "commonjs",
     "composite": true,
     "lib": ["dom", "es2017"]
-  }
+  },
+  "include": ["src/**/*.ts", "src/*.ts"]
 }

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "esModuleInterop": true,
+    "strict": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "composite": true,
+    "lib": ["dom", "es2017"]
+  }
+}