feat: WarShips red color outside if target current player

Hard to know when warship captures your trade so if they target one of
your trade or war ship they are highlighted in red.
Known limitation: doesn't work well if the WarShip is already in red
(player's color)

src/client/graphics/layers/UnitLayer.ts

@@ -1,4 +1,4 @@
-import { Colord } from "colord";
+import { colord, Colord } from "colord";
 import { Theme } from "../../../core/configuration/Config";
 import { Unit, UnitType, Player } from "../../../core/game/Game";
 import { Layer } from "./Layer";
@@ -240,15 +240,20 @@ export class UnitLayer implements Layer {
       return;
     }
 
+    let outerColor = this.theme.territoryColor(unit.owner().info());
+    if (unit.targetId()) {
+      const targetOwner = this.game
+        .units()
+        .find((u) => u.id() == unit.targetId())
+        .owner();
+      if (targetOwner == this.myPlayer) {
+        outerColor = colord({ r: 200, b: 0, g: 0 });
+      }
+    }
+
     // Paint outer territory
     for (const t of this.game.bfs(unit.tile(), euclDistFN(unit.tile(), 5))) {
-      this.paintCell(
-        this.game.x(t),
-        this.game.y(t),
-        rel,
-        this.theme.territoryColor(unit.owner().info()),
-        255,
-      );
+      this.paintCell(this.game.x(t), this.game.y(t), rel, outerColor, 255);
     }
 
     // Paint border

src/core/execution/WarshipExecution.ts

@@ -96,6 +96,7 @@ export class WarshipExecution implements Execution {
         return distSortUnit(this.mg, this.warship)(a, b);
       })[0] ?? null;
 
+    this.warship.setTarget(this.target);
     if (this.target == null || this.target.type() != UnitType.TradeShip) {
       // Patrol unless we are hunting down a tradeship
       const result = this.pathfinder.nextTile(

src/core/game/Game.ts

@@ -193,6 +193,8 @@ export class PlayerInfo {
 }
 
 export interface Unit {
+  id(): number;
+
   // Properties
   type(): UnitType;
   troops(): number;
@@ -209,6 +211,9 @@ export interface Unit {
   hasHealth(): boolean;
   health(): number;
   modifyHealth(delta: number): void;
+  // State for warships (currently)
+  setTarget(target: Unit): void;
+  target(): Unit;
 
   // Mutations
   setTroops(troops: number): void;

src/core/game/GameUpdates.ts

@@ -71,6 +71,7 @@ export interface UnitUpdate {
   isActive: boolean;
   health?: number;
   constructionType?: UnitType;
+  targetId?: number;
 }
 
 export interface AttackUpdate {

src/core/game/GameView.ts

@@ -5,7 +5,6 @@ import {
   Player,
   PlayerActions,
   PlayerProfile,
-  Unit,
 } from "./Game";
 import { AttackUpdate, PlayerUpdate } from "./GameUpdates";
 import { UnitUpdate } from "./GameUpdates";
@@ -92,6 +91,9 @@ export class UnitView {
   constructionType(): UnitType | undefined {
     return this.data.constructionType;
   }
+  targetId() {
+    return this.data.targetId;
+  }
 }
 
 export class PlayerView {

src/core/game/UnitImpl.ts

@@ -11,6 +11,8 @@ export class UnitImpl implements Unit {
   private _active = true;
   private _health: bigint;
   private _lastTile: TileRef = null;
+  // Currently only warship use it
+  private _target: Unit = null;
 
   private _constructionType: UnitType = undefined;
 
@@ -28,6 +30,10 @@ export class UnitImpl implements Unit {
     this._lastTile = _tile;
   }
 
+  id() {
+    return this._id;
+  }
+
   toUpdate(): UnitUpdate {
     return {
       type: GameUpdateType.Unit,
@@ -40,6 +46,7 @@ export class UnitImpl implements Unit {
       lastPos: this._lastTile,
       health: this.hasHealth() ? Number(this._health) : undefined,
       constructionType: this._constructionType,
+      targetId: this.target() ? this.target().id() : null,
     };
   }
 
@@ -150,4 +157,12 @@ export class UnitImpl implements Unit {
   dstPort(): Unit {
     return this._dstPort;
   }
+
+  setTarget(target: Unit) {
+    this._target = target;
+  }
+
+  target() {
+    return this._target;
+  }
 }