Add npcs

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