Add vibration

frontend/src/scripts/game.ts

@@ -29,12 +29,13 @@ import { TouchListener } from './commands/generators/touch-listener';
 import { CommandReceiverSocket } from './commands/receivers/command-receiver-socket';
 import { PlayerDecision } from './join-form-handler';
 import { GameObjectContainer } from './objects/game-object-container';
+import { options } from './options';
 import { BlobShape } from './shapes/blob-shape';
 import { PlanetShape } from './shapes/planet-shape';
 
 export class Game {
   public readonly gameObjects = new GameObjectContainer(this);
-  private renderer?: Renderer;
+  public renderer?: Renderer;
   private socket!: SocketIOClient.Socket;
   private deadTimeout = 0;
 
@@ -70,6 +71,9 @@ export class Game {
       const command = deserialize(serialized);
       if (command instanceof PlayerDiedCommand) {
         this.deadTimeout = command.timeout;
+        if (options.vibrationEnabled) {
+          navigator.vibrate(150);
+        }
         this.overlay.appendChild(this.announcmentText);
       } else if (command instanceof UpdatePlanetOwnershipCommand) {
         const all = command.declaCount + command.redCount + command.neutralCount;

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

@@ -1,6 +1,14 @@
 import { vec2 } from 'gl-matrix';
 import { Renderer } from 'sdf-2d';
-import { Circle, Id, PlayerCharacterBase, UpdateMessage, CharacterTeam } from 'shared';
+import {
+  Circle,
+  Id,
+  PlayerCharacterBase,
+  UpdateMessage,
+  CharacterTeam,
+  settings,
+} from 'shared';
+import { options } from '../options';
 
 import { BlobShape } from '../shapes/blob-shape';
 import { ViewObject } from './view-object';
@@ -10,6 +18,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
   private nameElement: HTMLElement;
   private healthElement: HTMLElement;
   private timeSinceLastNameElementUpdate = 0;
+  private previousHealth;
 
   constructor(
     id: Id,
@@ -24,6 +33,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     super(id, name, 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.nameElement.innerText = this.name;
@@ -38,6 +48,13 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
   public step(deltaTimeInMilliseconds: number): void {
     this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
     this.healthElement.style.width = this.health + '%';
+    if (this.previousHealth > this.health) {
+      this.previousHealth = this.health;
+      if (options.vibrationEnabled) {
+        navigator.vibrate(50);
+      }
+    }
+    this.previousHealth = this.health;
   }
 
   public beforeDestroy(): void {

frontend/src/scripts/options.ts

@@ -0,0 +1,3 @@
+export const options = {
+  vibrationEnabled: true,
+};