Improve gameplay

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

@@ -1,32 +1,62 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable, Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, Random, PlanetBase, UpdateMessage } from 'shared';
+import {
+  CommandExecutors,
+  Id,
+  Random,
+  PlanetBase,
+  UpdateMessage,
+  settings,
+} from 'shared';
 import { RenderCommand } from '../commands/types/render';
-import { Polygon } from '../shapes/polygon';
+import { PlanetShape } from '../shapes/planet-shape';
 import { ViewObject } from './view-object';
 
 export class PlanetView extends PlanetBase implements ViewObject {
-  private shape: Drawable;
+  private shape: PlanetShape;
+  private ownershipProgess: HTMLElement;
 
   protected commandExecutors: CommandExecutors = {
     [RenderCommand.type]: (c: RenderCommand) => c.renderer.addDrawable(this.shape),
   };
 
-  constructor(id: Id, vertices: Array<vec2>) {
+  constructor(id: Id, vertices: Array<vec2>, ownership: number) {
     super(id, vertices);
-    this.shape = new Polygon(vertices);
+    this.shape = new PlanetShape(vertices, ownership);
     (this.shape as any).randomOffset = Random.getRandom();
-  }
 
-  public update(message: Array<UpdateMessage>): void {
-    throw new Error('Method not implemented.');
+    this.ownershipProgess = document.createElement('div');
+    this.ownershipProgess.className = 'ownership';
   }
 
   public step(deltaTimeInMilliseconds: number): void {
-    (this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
+    this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
+    this.shape.colorMixQ = this.ownership;
+    let teamName = 'Neutral';
+    if (this.ownership < 0.5 - settings.planetControlThreshold) {
+      teamName = 'Decla';
+    } else if (this.ownership > 0.5 + settings.planetControlThreshold) {
+      teamName = 'Red';
+    }
+
+    this.ownershipProgess.innerText = `${teamName} ${Math.round(
+      (Math.abs(this.ownership - 0.5) / 0.5) * 100,
+    )}%`;
   }
 
-  public draw(renderer: Renderer): void {
+  public beforeDestroy(): void {
+    this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
+  }
+
+  public draw(renderer: Renderer, overlay: HTMLElement): void {
+    if (!this.ownershipProgess.parentElement) {
+      overlay.appendChild(this.ownershipProgess);
+    }
+
+    const screenPosition = renderer.worldToDisplayCoordinates(this.center);
+    this.ownershipProgess.style.left = screenPosition.x + 'px';
+    this.ownershipProgess.style.top = screenPosition.y + 'px';
+
     renderer.addDrawable(this.shape);
   }
 }