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(
-          vec3.create(),
-          vec3.fromValues(
-            Random.getRandomInRange(0.5, 1),
-            0,
-            Random.getRandomInRange(0.5, 1),
+        hsl(
+          Random.getRandomInRange(0, 360),
+          Random.getRandomInRange(50, 100),
+          Random.getRandomInRange(25, 50),
         ),
-        ),
-        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());
-    vec2.scale(this.center, this.center, 1 / vertices.length);
+    PlanetPhysical.neutralPlanetCount++;
   }
 
   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,11 +141,43 @@ export class PlayerCharacterPhysical
   }
 
   public onCollision(other: GameObject) {
-    if (other instanceof ProjectilePhysical) {
+    if (other instanceof ProjectilePhysical && other.team !== this.team) {
       other.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;
@@ -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<Physical> = [];
-  private objectsInViewArea: Array<Physical> = [];
+  private objectsPreviouslyInViewArea: Array<GameObject> = [];
 
   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.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;
+      this.character?.shootTowards(c.position);
     },
   };
 
   private findEmptyPositionForPlayer(): vec2 {
-    let rotation = 0;
-    let radius = 0;
+    let possibleCenter = this.players.find((p) => p.team === this.team)?.center;
+    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(
-      playerInfo.name,
-      colorIndex,
-      objects,
-      this.findEmptyPositionForPlayer(),
-    );
-
-    this.objects.addObject(this.character);
-
-    socket.emit(
-      TransportEvents.ServerToPlayer,
-      serialize(new CreatePlayerCommand(this.character)),
-    );
+    this.createCharacter();
 
     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();
-    this.timeSinceLastProjectile += deltaTime;
+    if (this.character) {
+      this.center = this.character?.center;
+
+      if (!this.character.isAlive) {
+        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();
     }
 
-  public sendObjects() {
-    const viewArea = calculateViewArea(this.character.center, this.aspectRatio, 1.5);
+    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(
-        TransportEvents.ServerToPlayer,
-        serialize(
-          new DeleteObjectsCommand([
-            ...new Set(
-              noLongerIntersecting
-                .filter((p) => p.gameObject !== this.character)
-                .map((p) => p.gameObject.id),
-            ),
-          ]),
-        ),
-      );
+      this.sendToPlayer(new DeleteObjectsCommand(noLongerIntersecting.map((g) => g.id)));
     }
 
     if (newlyIntersecting.length > 0) {
-      this.socket.emit(
-        TransportEvents.ServerToPlayer,
-        serialize(
-          new CreateObjectsCommand([
-            ...new Set(
-              newlyIntersecting
-                .map((p) => p.gameObject)
-                .filter((g) => g !== this.character),
+      this.sendToPlayer(new CreateObjectsCommand(newlyIntersecting));
+    }
+
+    this.sendToPlayer(
+      new UpdateObjectsCommand(
+        this.objectsPreviouslyInViewArea
+          .map((g) => g.calculateUpdates())
+          .filter((u) => u) as Array<UpdateObjectMessage>,
       ),
-          ]),
+    );
+
+    this.sendToPlayer(
+      new UpdatePlanetOwnershipCommand(
+        PlanetPhysical.declaPlanetCount,
+        PlanetPhysical.redPlanetCount,
+        PlanetPhysical.neutralPlanetCount,
       ),
     );
   }
 
-    this.socket.emit(
-      TransportEvents.ServerToPlayer,
-      serialize(
-        new UpdateObjectsCommand(
-          Array.from(new Set(this.objectsInViewArea))
-            .filter((p) => p.canMove)
-            .map((p) => (p as DynamicPhysical).calculateUpdates())
-            .filter((p) => p !== null) as any,
-        ),
-      ),
-    );
+  private sendToPlayer(command: Command) {
+    this.socket.emit(TransportEvents.ServerToPlayer, serialize(command));
   }
 
   public destroy() {
     this.isActive = false;
-    freeColor(this.character.colorIndex);
+    freeTeam(this.team);
+
+    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 { Polygon } from './shapes/polygon';
+import { PlanetShape } from './shapes/planet-shape';
 
 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 deltaTimeCalculator = new DeltaTimeCalculator();
+  private deadTimeout = 0;
+
+  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.setupCommunication(playerDecision.server),
-      this.setupRenderer(),
-    ]);
+    this.start();
+    const progressBar = document.createElement('div');
+    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.renderer = await compile(
+    this.setupCommunication(this.playerDecision.server);
+    runAnimation(
       this.canvas,
       [
         {
-          ...Polygon.descriptor,
+          ...PlanetShape.descriptor,
           shaderCombinationSteps: [0, 1, 2, 3],
         },
         {
@@ -97,33 +123,27 @@ 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,
       },
-    );
-
-    this.renderer.setRuntimeSettings({
+      {
         ambientLight: rgb(0.45, 0.4, 0.45),
-      colorPalette: [
-        rgb(1, 1, 1),
-        rgb(0.4, 0.4, 0.4),
-        rgb(1, 1, 1),
-        ...settings.playerColors,
-      ],
+        colorPalette: settings.palette,
         enableHighDpiRendering: true,
         lightCutoffDistance: settings.lightCutoffDistance,
         textures: {
@@ -136,16 +156,16 @@ export class Game {
             },
           },
         },
-    });
-  }
-
-  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) {
-    const deltaTime = this.deltaTimeCalculator.getNextDeltaTimeInMilliseconds(time);
+  private announcmentText = document.createElement('h2');
+  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.renderer.renderDrawables();
+    this.gameObjects.drawObjects(this.renderer, this.overlay);
 
-    // this.overlay.innerText = prettyPrint(this.renderer.insights);
-    requestAnimationFrame(this.gameLoop.bind(this));
+    return true;
   }
 }

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) {
-    this.start();
+  constructor(canvas: HTMLCanvasElement) {
+    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(
-      this.canvas,
+    runAnimation(
+      canvas,
       [
         {
           ...LangindPagePolygon.descriptor,
@@ -39,13 +40,12 @@ export class LandingPageBackground {
           shaderCombinationSteps: [0, 2],
         },
       ],
+      this.gameLoop.bind(this),
       {
         shadowTraceCount: 16,
         paletteSize: 1,
       },
-    );
-
-    this.renderer.setRuntimeSettings({
+      {
         ambientLight: rgb(0, 0, 0),
         lightCutoffDistance: settings.lightCutoffDistance,
         textures: {
@@ -58,26 +58,18 @@ export class LandingPageBackground {
             },
           },
         },
-    });
-
-    requestAnimationFrame(this.gameLoop.bind(this));
+      },
+    );
   }
 
-  public destroy() {
-    this.renderer.destroy();
-  }
-
-  private gameLoop(time: DOMHighResTimeStamp) {
+  private gameLoop(renderer: Renderer, time: DOMHighResTimeStamp, _: number): boolean {
     Random.seed = 42;
 
-    this.renderer.setViewArea(
-      vec2.fromValues(0, this.renderer.canvasSize.y),
-      this.renderer.canvasSize,
-    );
+    renderer.setViewArea(vec2.fromValues(0, renderer.canvasSize.y), renderer.canvasSize);
 
     const topPlanetPosition = vec2.fromValues(
-      0.7 * this.renderer.canvasSize.x,
-      0.7 * this.renderer.canvasSize.y,
+      0.7 * renderer.canvasSize.x,
+      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 * this.renderer.canvasSize.y,
+      0.3 * renderer.canvasSize.x,
+      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);
-    this.renderer.addDrawable(bottomPlanet);
-    this.renderer.addDrawable(
+    renderer.addDrawable(topPlanet);
+    renderer.addDrawable(bottomPlanet);
+    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();
-
-    requestAnimationFrame(this.gameLoop.bind(this));
+    return this.isActive;
   }
 
-  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>) {
-    throw new Error();
-  }
+  public beforeDestroy(): void {}
 
   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;