Add npcs

frontend/package.json

@@ -47,7 +47,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.27.0",
     "sass-loader": "^8.0.2",
-    "sdf-2d": "^0.6.0",
+    "sdf-2d": "^0.6.2",
     "shared": "file:../shared",
     "socket.io-client": "^2.3.1",
     "source-map-loader": "^1.1.1",

frontend/src/index.ts

@@ -1,13 +1,11 @@
 import { glMatrix } from 'gl-matrix';
 import {
-  CharacterBase,
   LampBase,
   overrideDeserialization,
   PlanetBase,
   PlayerCharacterBase,
   ProjectileBase,
 } from 'shared';
-import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
@@ -33,7 +31,6 @@ import { SoundHandler, Sounds } from './scripts/sound-handler';
 
 glMatrix.setMatrixArrayType(Array);
 
-overrideDeserialization(CharacterBase, CharacterView);
 overrideDeserialization(PlayerCharacterBase, PlayerCharacterView);
 overrideDeserialization(PlanetBase, PlanetView);
 overrideDeserialization(LampBase, LampView);

frontend/src/main.scss

@@ -115,7 +115,7 @@ body {
 
     .player-tag {
       transform: translateX(-50%) translateY(-50%) rotate(-15deg);
-      transition: left 200ms, top 200ms;
+      transition: left 150ms, top 150ms;
       border-radius: 1000px;
 
       &.decla {

frontend/src/scripts/game.ts

@@ -155,7 +155,12 @@ export class Game extends CommandReceiver {
       const angle = Math.atan2(direction.y, direction.x);
       e.className = 'other-player-arrow ' + team;
 
-      const { width, height } = this.overlay.getBoundingClientRect();
+      if (!this.renderer) {
+        return;
+      }
+
+      const width = this.renderer.canvasSize.x;
+      const height = this.renderer.canvasSize.y;
       const aspectRatio = width / height;
       const directionRatio = direction.x / direction.y;
 

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

@@ -1,35 +0,0 @@
-import { vec2 } from 'gl-matrix';
-import { Renderer } from 'sdf-2d';
-import { CharacterBase, CharacterTeam, Circle, Id, settings } from 'shared';
-
-import { BlobShape } from '../shapes/blob-shape';
-import { ViewObject } from './view-object';
-
-export class CharacterView extends CharacterBase implements ViewObject {
-  private shape: BlobShape;
-
-  constructor(
-    id: Id,
-    team: CharacterTeam,
-    health: number,
-    head?: Circle,
-    leftFoot?: Circle,
-    rightFoot?: Circle,
-  ) {
-    super(id, team, health, head, leftFoot, rightFoot);
-    this.shape = new BlobShape(settings.colorIndices[team]);
-  }
-
-  public get position(): vec2 {
-    return this.head!.center;
-  }
-
-  public beforeDestroy(): void {}
-
-  public step(deltaTimeInSeconds: number): 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/player-character-view.ts

@@ -12,7 +12,6 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
   private nameElement: HTMLElement = document.createElement('div');
   private statsElement: HTMLElement = document.createElement('div');
   private healthElement: HTMLElement = document.createElement('div');
-  private timeSinceLastNameElementUpdate = 0;
   private previousHealth;
 
   constructor(
@@ -50,7 +49,6 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
   }
 
   public step(deltaTimeInSeconds: number): void {
-    this.timeSinceLastNameElementUpdate += deltaTimeInSeconds;
     this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
     this.statsElement.innerText = this.getStatsText();
     if (this.previousHealth > this.health) {
@@ -75,14 +73,11 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
       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;
-    }
+    const screenPosition = renderer.worldToDisplayCoordinates(
+      this.calculateTextPosition(),
+    );
+    this.nameElement.style.left = screenPosition.x + 'px';
+    this.nameElement.style.top = screenPosition.y + 'px';
 
     this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
     renderer.addDrawable(this.shape);

frontend/src/scripts/sound-handler.ts

@@ -33,6 +33,7 @@ export abstract class SoundHandler {
     setTimeout(() => {
       this.ambientSound.muted = false;
       this.ambientSound.volume = 0.5;
+      this.ambientSound.loop = true;
       if (!this.isAmbientPlaying) {
         this.ambientSound.pause();
       }