Improve gameplay and design

frontend/src/scripts/game.ts

@@ -2,7 +2,6 @@ import { vec2 } from 'gl-matrix';
 import {
   CircleLight,
   ColorfulCircle,
-  compile,
   FilteringOptions,
   Flashlight,
   Renderer,
@@ -17,7 +16,6 @@ import {
   settings,
   TransportEvents,
   SetAspectRatioActionCommand,
-  rgb,
   PlayerInformation,
   PlayerDiedCommand,
   UpdatePlanetOwnershipCommand,
@@ -66,6 +64,8 @@ export class Game {
       this.socket.io.opts.transports = ['polling', 'websocket'];
     });
 
+    this.socket.on('disconnect', this.destroy.bind(this));
+
     this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => {
       const command = deserialize(serialized);
       if (command instanceof PlayerDiedCommand) {
@@ -145,7 +145,6 @@ export class Game {
         //enableStopwatch: true,
       },
       {
-        ambientLight: rgb(0.45, 0.4, 0.45),
         colorPalette: settings.palette,
         enableHighDpiRendering: true,
         lightCutoffDistance: settings.lightCutoffDistance,

frontend/src/scripts/objects/camera.ts

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { calculateViewArea, GameObject, mixRgb, settings, UpdateMessage } from 'shared';
+import { calculateViewArea, GameObject, mixRgb, settings } from 'shared';
 
 import { Game } from '../game';
 import { ViewObject } from './view-object';
@@ -32,8 +32,7 @@ export class Camera extends GameObject implements ViewObject {
       ambientLight: mixRgb(
         settings.backgroundGradient[0],
         settings.backgroundGradient[1],
-        (this.center.x - settings.worldLeftEdge) /
-          (Math.abs(settings.worldLeftEdge) + Math.abs(settings.worldRightEdge)),
+        vec2.length(this.center) / settings.worldRadius,
       ),
     });
   }

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

@@ -1,13 +1,6 @@
 import { vec2 } from 'gl-matrix';
-import { Drawable, Renderer } from 'sdf-2d';
-import {
-  CommandExecutors,
-  Id,
-  Random,
-  PlanetBase,
-  UpdateMessage,
-  settings,
-} from 'shared';
+import { Renderer } from 'sdf-2d';
+import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { PlanetShape } from '../shapes/planet-shape';
 import { ViewObject } from './view-object';
@@ -32,18 +25,19 @@ export class PlanetView extends PlanetBase implements ViewObject {
   public step(deltaTimeInMilliseconds: number): void {
     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,
-    )}%`;
   }
 
+  private getGradient(): string {
+    const sideDecla = this.ownership < 0.5;
+    const sidePercent = (Math.abs(this.ownership - 0.5) / 0.5) * 100;
+    const color = sideDecla ? 'var(--bright-decla)' : 'var(--bright-red)';
+    return `conic-gradient(
+      ${color} ${sidePercent}%,
+      ${color} ${sidePercent}%,
+      var(--bright-neutral) ${sidePercent}%,
+      var(--bright-neutral) 100%
+    )`;
+  }
   public beforeDestroy(): void {
     this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
   }
@@ -56,6 +50,7 @@ export class PlanetView extends PlanetBase implements ViewObject {
     const screenPosition = renderer.worldToDisplayCoordinates(this.center);
     this.ownershipProgess.style.left = screenPosition.x + 'px';
     this.ownershipProgess.style.top = screenPosition.y + 'px';
+    this.ownershipProgess.style.background = this.getGradient();
 
     renderer.addDrawable(this.shape);
   }

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

@@ -1,13 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import {
-  Circle,
-  Id,
-  PlayerCharacterBase,
-  UpdateMessage,
-  CharacterTeam,
-  settings,
-} from 'shared';
+import { Circle, Id, PlayerCharacterBase, CharacterTeam, settings } from 'shared';
 import { OptionsHandler } from '../options-handler';
 
 import { BlobShape } from '../shapes/blob-shape';
@@ -35,7 +28,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
 
     this.previousHealth = this.health;
     this.nameElement = document.createElement('div');
-    this.nameElement.className = 'player-tag';
+    this.nameElement.className = 'player-tag ' + this.team;
     this.nameElement.innerText = this.name;
     this.healthElement = document.createElement('div');
     this.nameElement.appendChild(this.healthElement);
@@ -47,7 +40,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
 
   public step(deltaTimeInMilliseconds: number): void {
     this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
-    this.healthElement.style.width = this.health + '%';
+    this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
     if (this.previousHealth > this.health) {
       this.previousHealth = this.health;
       if (OptionsHandler.options.vibrationEnabled) {
@@ -89,7 +82,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
 
     const headFeetDelta = vec2.subtract(footAverage, this.head!.center, footAverage);
     vec2.normalize(headFeetDelta, headFeetDelta);
-    const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 50);
+    const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 60);
     return vec2.add(textOffset, this.head!.center, textOffset);
   }
 }