Add KD stats and joystick deadzone

frontend/src/scripts/commands/generators/touch-joystick-listener.ts

@@ -73,11 +73,19 @@ export class TouchJoystickListener extends CommandGenerator {
       this.joystickButton.style.transform = `translateX(${movement.x}px) translateY(${movement.y}px) translateX(-50%) translateY(-50%)`;
 
       vec2.set(movement, movement.x, -movement.y);
-      if (vec2.squaredLength(movement) > 0) {
-        vec2.normalize(movement, movement);
-
+      if (length > 10) {
         this.sendCommandToSubcribers(
-          new MoveActionCommand(movement, OptionsHandler.options.relativeMovementEnabled),
+          new MoveActionCommand(
+            vec2.normalize(movement, movement),
+            OptionsHandler.options.relativeMovementEnabled,
+          ),
+        );
+      } else {
+        this.sendCommandToSubcribers(
+          new MoveActionCommand(
+            vec2.create(),
+            OptionsHandler.options.relativeMovementEnabled,
+          ),
         );
       }
     });

frontend/src/scripts/game.ts

@@ -41,12 +41,14 @@ export class Game {
   private declaPlanetCountElement = document.createElement('div');
   private redPlanetCountElement = document.createElement('div');
   private neutralPlanetCountElement = document.createElement('div');
+  private announcementText = document.createElement('h2');
 
   constructor(
     private readonly playerDecision: PlayerDecision,
     private readonly canvas: HTMLCanvasElement,
     private readonly overlay: HTMLElement,
   ) {
+    this.announcementText.className = 'announcement';
     const progressBar = document.createElement('div');
     progressBar.className = 'planet-progress';
     overlay.appendChild(progressBar);
@@ -75,7 +77,7 @@ export class Game {
         if (OptionsHandler.options.vibrationEnabled) {
           navigator.vibrate(150);
         }
-        this.overlay.appendChild(this.announcmentText);
+        this.overlay.appendChild(this.announcementText);
       } else if (command instanceof UpdateGameState) {
         const all = command.declaCount + command.redCount + command.neutralCount;
         this.declaPlanetCountElement.style.width = (command.declaCount / all) * 100 + '%';
@@ -84,13 +86,13 @@ export class Game {
         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 🎉';
+          this.overlay.appendChild(this.announcementText);
+          this.announcementText.innerText = 'Decla team won 🎉';
         }
 
         if (command.redCount > all * 0.5) {
-          this.overlay.appendChild(this.announcmentText);
-          this.announcmentText.innerText = 'Red team won 🎉';
+          this.overlay.appendChild(this.announcementText);
+          this.announcementText.innerText = 'Red team won 🎉';
         }
 
         this.arrowElements
@@ -233,7 +235,6 @@ export class Game {
     this.isActive = false;
   }
 
-  private announcmentText = document.createElement('h2');
   private gameLoop(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
@@ -242,9 +243,9 @@ export class Game {
     this.renderer = renderer;
 
     if ((this.deadTimeout -= deltaTime / 1000) > 0) {
-      this.announcmentText.innerText = `Respawning in ${Math.floor(this.deadTimeout)} …`;
+      this.announcementText.innerText = `Reviving in ${Math.floor(this.deadTimeout)}…`;
     } else {
-      this.announcmentText.parentElement?.removeChild(this.announcmentText);
+      this.announcementText.parentElement?.removeChild(this.announcementText);
     }
 
     this.gameObjects.stepObjects(deltaTime);

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

@@ -21,6 +21,9 @@ export class GameObjectContainer extends CommandReceiver {
 
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
+      if (this.camera) {
+        this.deleteObject(this.camera.id);
+      }
       this.player = c.character as PlayerCharacterView;
       this.camera = new Camera(this.game);
       this.addObject(this.player);

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

@@ -8,14 +8,17 @@ import { ViewObject } from './view-object';
 
 export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
   private shape: BlobShape;
-  private nameElement: HTMLElement;
-  private healthElement: HTMLElement;
+  private nameElement: HTMLElement = document.createElement('div');
+  private statsElement: HTMLElement = document.createElement('div');
+  private healthElement: HTMLElement = document.createElement('div');
   private timeSinceLastNameElementUpdate = 0;
   private previousHealth;
 
   constructor(
     id: Id,
     name: string,
+    killCount: number,
+    deathCount: number,
     colorIndex: number,
     team: CharacterTeam,
     health: number,
@@ -23,15 +26,25 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     leftFoot?: Circle,
     rightFoot?: Circle,
   ) {
-    super(id, name, colorIndex, team, health, head, leftFoot, rightFoot);
+    super(
+      id,
+      name,
+      killCount,
+      deathCount,
+      colorIndex,
+      team,
+      health,
+      head,
+      leftFoot,
+      rightFoot,
+    );
     this.shape = new BlobShape(colorIndex);
 
     this.previousHealth = this.health;
-    this.nameElement = document.createElement('div');
     this.nameElement.className = 'player-tag ' + this.team;
     this.nameElement.innerText = this.name;
-    this.healthElement = document.createElement('div');
     this.nameElement.appendChild(this.healthElement);
+    this.nameElement.appendChild(this.statsElement);
   }
 
   public get position(): vec2 {
@@ -41,10 +54,11 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
   public step(deltaTimeInMilliseconds: number): void {
     this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
     this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
+    this.statsElement.innerText = this.getStatsText();
     if (this.previousHealth > this.health) {
       this.previousHealth = this.health;
       if (OptionsHandler.options.vibrationEnabled) {
-        navigator.vibrate(50);
+        navigator.vibrate(75);
       }
     }
     this.previousHealth = this.health;
@@ -72,6 +86,10 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     renderer.addDrawable(this.shape);
   }
 
+  private getStatsText(): string {
+    return `${this.killCount}⚔/${this.deathCount}☠`;
+  }
+
   private calculateTextPosition(): vec2 {
     const footAverage = vec2.add(
       vec2.create(),
@@ -82,7 +100,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 + 60);
+    const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 80);
     return vec2.add(textOffset, this.head!.center, textOffset);
   }
 }