Update gameplay

frontend/src/scripts/game.ts

@@ -18,7 +18,8 @@ import {
   SetAspectRatioActionCommand,
   PlayerInformation,
   PlayerDiedCommand,
-  UpdatePlanetOwnershipCommand,
+  UpdateGameState,
+  clamp,
 } from 'shared';
 import io from 'socket.io-client';
 import { KeyboardListener } from './commands/generators/keyboard-listener';
@@ -54,6 +55,7 @@ export class Game {
     progressBar.appendChild(this.redPlanetCountElement);
   }
 
+  private arrowElements: Array<HTMLElement> = [];
   private async setupCommunication(serverUrl: string): Promise<void> {
     this.socket = io(serverUrl, {
       reconnectionDelayMax: 10000,
@@ -74,7 +76,7 @@ export class Game {
           navigator.vibrate(150);
         }
         this.overlay.appendChild(this.announcmentText);
-      } else if (command instanceof UpdatePlanetOwnershipCommand) {
+      } else if (command instanceof UpdateGameState) {
         const all = command.declaCount + command.redCount + command.neutralCount;
         this.declaPlanetCountElement.style.width = (command.declaCount / all) * 100 + '%';
         this.neutralPlanetCountElement.style.width =
@@ -90,6 +92,53 @@ export class Game {
           this.overlay.appendChild(this.announcmentText);
           this.announcmentText.innerText = 'Red team won 🎉';
         }
+
+        this.arrowElements
+          .splice(command.otherPlayerDirections.length, this.arrowElements.length)
+          .forEach((e) => e.parentElement?.removeChild(e));
+
+        for (
+          let i = this.arrowElements.length;
+          i < command.otherPlayerDirections.length;
+          i++
+        ) {
+          const element = document.createElement('div');
+          this.arrowElements.push(element);
+          this.overlay.appendChild(element);
+        }
+
+        this.arrowElements.forEach((e, i) => {
+          const direction = command.otherPlayerDirections[i].direction;
+          const team = command.otherPlayerDirections[i].team;
+          const angle = Math.atan2(direction.y, direction.x);
+          e.className = 'other-player-arrow ' + team;
+
+          const { width, height } = this.overlay.getBoundingClientRect();
+          const aspectRatio = width / height;
+          const directionRatio = direction.x / direction.y;
+
+          let deltaX: number, deltaY: number;
+          if (aspectRatio < Math.abs(directionRatio)) {
+            deltaX = (width / 2) * Math.sign(direction.x);
+            deltaY = deltaX / directionRatio;
+          } else {
+            deltaY = (height / 2) * Math.sign(direction.y);
+            deltaX = deltaY * directionRatio;
+          }
+
+          const delta = vec2.fromValues(deltaX, deltaY);
+          const center = vec2.fromValues(width / 2, height / 2);
+          const p = vec2.add(center, center, delta);
+          const arrowPadding = 16;
+          vec2.set(
+            p,
+            clamp(p.x, arrowPadding, width - 3 * arrowPadding),
+            clamp(height - p.y, arrowPadding, height - 3 * arrowPadding),
+          );
+          e.style.transform = `translateX(${p.x}px) translateY(${p.y}px) rotate(${
+            -angle + Math.PI / 2
+          }rad) translateX(-50%) translateY(-50%)`;
+        });
       } else this.gameObjects.sendCommand(command);
     });
 

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

@@ -30,12 +30,18 @@ export class PlanetView extends PlanetBase implements ViewObject {
   private getGradient(): string {
     const sideDecla = this.ownership < 0.5;
     const sidePercent = (Math.abs(this.ownership - 0.5) / 0.5) * 100;
-    const color = sideDecla ? 'var(--bright-decla)' : 'var(--bright-red)';
-    return `conic-gradient(
-      ${color} ${sidePercent}%,
-      ${color} ${sidePercent}%,
+    return sideDecla
+      ? `conic-gradient(
+      var(--bright-decla) ${sidePercent}%,
+      var(--bright-decla) ${sidePercent}%,
       var(--bright-neutral) ${sidePercent}%,
       var(--bright-neutral) 100%
+    )`
+      : `conic-gradient(
+      var(--bright-neutral) 0%,
+      var(--bright-neutral) ${100 - sidePercent}%,
+      var(--bright-red) ${100 - sidePercent}%,
+      var(--bright-red) 100%
     )`;
   }
   public beforeDestroy(): void {

frontend/src/scripts/shapes/blob-shape.ts

@@ -15,8 +15,8 @@ export class BlobShape extends Drawable {
 
       float blobSmoothMin(float a, float b)
       {
-        const float k = 300.0;
-        float res = exp2(-k * a) + exp2(-k * b);
+        const highp float k = 300.0;
+        highp float res = exp2(-k * a) + exp2(-k * b);
         return -log2(res) / k;
       }
 

frontend/src/scripts/shapes/planet-shape.ts

@@ -52,7 +52,9 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
               vec2 center = planetCenters[j];
               float l = planetLengths[j];
               float randomOffset = planetRandoms[j];
-              vec2 targetTangent = normalize(target - center);
+              vec2 targetCenterDelta = target - center;
+              float targetDistance = length(targetCenterDelta);
+              vec2 targetTangent = targetCenterDelta / clamp(targetDistance, 0.01, 1000.0);
               vec2 noisyTarget = target - (
                 targetTangent * planetTerrain(vec2(
                   l * abs(atan(targetTangent.y, targetTangent.x)),