Change gameplay

frontend/src/scripts/objects/camera.ts

@@ -16,7 +16,7 @@ export class Camera extends GameObject implements ViewObject {
 
   public beforeDestroy(): void {}
 
-  public step(deltaTimeInMilliseconds: number): void {}
+  public step(deltaTimeInSeconds: number): void {}
 
   public draw(renderer: Renderer, overlay: HTMLElement) {
     const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;

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

@@ -33,7 +33,7 @@ export class CharacterView extends CharacterBase implements ViewObject {
 
   public beforeDestroy(): void {}
 
-  public step(deltaTimeInMilliseconds: number): void {}
+  public step(deltaTimeInSeconds: number): void {}
 
   public draw(renderer: Renderer, overlay: HTMLElement): void {
     this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);

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

@@ -5,9 +5,8 @@ import {
   CreateObjectsCommand,
   CreatePlayerCommand,
   DeleteObjectsCommand,
-  GameObject,
   Id,
-  UpdateObjectsCommand,
+  RemoteCallsForObjects,
 } from 'shared';
 import { Game } from '../game';
 import { Camera } from './camera';
@@ -24,8 +23,11 @@ export class GameObjectContainer extends CommandReceiver {
       if (this.camera) {
         this.deleteObject(this.camera.id);
       }
+
       this.player = c.character as PlayerCharacterView;
+
       this.camera = new Camera(this.game);
+
       this.addObject(this.player);
       this.addObject(this.camera);
     },
@@ -33,24 +35,25 @@ export class GameObjectContainer extends CommandReceiver {
     [CreateObjectsCommand.type]: (c: CreateObjectsCommand) =>
       c.objects.forEach((o) => this.addObject(o as ViewObject)),
 
+    [RemoteCallsForObjects.type]: (c: RemoteCallsForObjects) =>
+      c.callsForObjects.forEach((c) =>
+        this.objects.get(c.id)?.processRemoteCalls(c.calls),
+      ),
+
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
       c.ids.forEach((id: Id) => this.deleteObject(id)),
-
-    [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
-      c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
-    },
   };
 
   constructor(private game: Game) {
     super();
   }
 
-  public stepObjects(delta: number) {
+  public stepObjects(deltaTimeInSeconds: number) {
     if (this.player) {
       this.camera.center = this.player.position;
     }
 
-    this.objects.forEach((o) => o.step(delta));
+    this.objects.forEach((o) => o.step(deltaTimeInSeconds));
   }
 
   public drawObjects(renderer: Renderer, overlay: HTMLElement) {

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

@@ -16,7 +16,7 @@ export class LampView extends LampBase implements ViewObject {
     this.light = new CircleLight(center, color, lightness);
   }
 
-  public step(deltaTimeInMilliseconds: number): void {}
+  public step(deltaTimeInSeconds: number): void {}
 
   public beforeDestroy(): void {}
 

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

@@ -5,6 +5,14 @@ import { RenderCommand } from '../commands/types/render';
 import { PlanetShape } from '../shapes/planet-shape';
 import { ViewObject } from './view-object';
 
+type FallingPoint = {
+  velocity: vec2;
+  position: vec2;
+  element: HTMLElement;
+  addedToOverlay: boolean;
+  timeToLive: number;
+};
+
 export class PlanetView extends PlanetBase implements ViewObject {
   private shape: PlanetShape;
   private ownershipProgess: HTMLElement;
@@ -22,9 +30,48 @@ export class PlanetView extends PlanetBase implements ViewObject {
     this.ownershipProgess.className = 'ownership';
   }
 
-  public step(deltaTimeInMilliseconds: number): void {
-    this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
+  public step(deltaTimeInSeconds: number): void {
+    this.shape.randomOffset += deltaTimeInSeconds / 4;
     this.shape.colorMixQ = this.ownership;
+
+    this.generatedPointElements.forEach((p) => {
+      vec2.add(
+        p.velocity,
+        p.velocity,
+        vec2.scale(vec2.create(), vec2.fromValues(0, 50), deltaTimeInSeconds),
+      );
+
+      vec2.add(
+        p.position,
+        p.position,
+        vec2.scale(vec2.create(), p.velocity, deltaTimeInSeconds),
+      );
+
+      if ((p.timeToLive -= deltaTimeInSeconds) <= 0) {
+        p.element.parentElement?.removeChild(p.element);
+      } else {
+        p.element.style.opacity = Math.min(1, p.timeToLive).toString();
+      }
+    });
+
+    this.generatedPointElements = this.generatedPointElements.filter(
+      (p) => p.timeToLive > 0,
+    );
+  }
+
+  private generatedPointElements: Array<FallingPoint> = [];
+
+  public generatedPoints(value: number) {
+    const element = document.createElement('div');
+    element.className = 'falling-point ' + (this.ownership < 0.5 ? 'decla' : 'red');
+    element.innerText = '+' + value;
+    this.generatedPointElements.push({
+      element,
+      addedToOverlay: false,
+      timeToLive: Random.getRandomInRange(2, 3),
+      position: vec2.create(),
+      velocity: vec2.fromValues(Random.getRandomInRange(-30, 30), 0),
+    });
   }
 
   private getGradient(): string {
@@ -34,18 +81,21 @@ export class PlanetView extends PlanetBase implements ViewObject {
       ? `conic-gradient(
       var(--bright-decla) ${sidePercent}%,
       var(--bright-decla) ${sidePercent}%,
-      var(--bright-neutral) ${sidePercent}%,
-      var(--bright-neutral) 100%
+      rgba(0, 0, 0, 0) ${sidePercent}%,
+      rgba(0, 0, 0, 0) 100%
     )`
       : `conic-gradient(
-      var(--bright-neutral) 0%,
-      var(--bright-neutral) ${100 - sidePercent}%,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) ${100 - sidePercent}%,
       var(--bright-red) ${100 - sidePercent}%,
       var(--bright-red) 100%
     )`;
   }
   public beforeDestroy(): void {
     this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
+    this.generatedPointElements.forEach((p) =>
+      p.element.parentElement?.removeChild(p.element),
+    );
   }
 
   public draw(renderer: Renderer, overlay: HTMLElement): void {
@@ -54,6 +104,16 @@ export class PlanetView extends PlanetBase implements ViewObject {
     }
 
     const screenPosition = renderer.worldToDisplayCoordinates(this.center);
+
+    this.generatedPointElements.forEach((p) => {
+      if (!p.addedToOverlay) {
+        overlay.appendChild(p.element);
+      }
+
+      p.element.style.left = screenPosition.x + p.position.x + 'px';
+      p.element.style.top = screenPosition.y + p.position.y + 'px';
+    });
+
     this.ownershipProgess.style.left = screenPosition.x + 'px';
     this.ownershipProgess.style.top = screenPosition.y + 'px';
     this.ownershipProgess.style.background = this.getGradient();

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

@@ -4,6 +4,7 @@ import { Circle, Id, PlayerCharacterBase, CharacterTeam, settings } from 'shared
 import { OptionsHandler } from '../options-handler';
 
 import { BlobShape } from '../shapes/blob-shape';
+import { SoundHandler, Sounds } from '../sound-handler';
 import { ViewObject } from './view-object';
 
 export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
@@ -39,8 +40,17 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     return this.head!.center;
   }
 
-  public step(deltaTimeInMilliseconds: number): void {
-    this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
+  public setHealth(health: number) {
+    const previousHealth = this.health;
+    super.setHealth(health);
+    SoundHandler.play(
+      Sounds.hit,
+      (0.4 * 2 * (previousHealth - health)) / settings.playerMaxStrength,
+    );
+  }
+
+  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) {
@@ -52,6 +62,10 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     this.previousHealth = this.health;
   }
 
+  public onShoot(strength: number) {
+    SoundHandler.play(Sounds.shoot, (0.3 * 2 * strength) / settings.playerMaxStrength);
+  }
+
   public beforeDestroy(): void {
     this.nameElement.parentElement?.removeChild(this.nameElement);
   }

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

@@ -23,7 +23,9 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
     );
   }
 
-  public step(deltaTimeInMilliseconds: number): void {
+  public step(deltaTimeInSeconds: number): void {
+    super.step(deltaTimeInSeconds);
+
     this.circle.center = this.center;
     this.light.center = this.center;
     this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength;