2661 PR 3/3 Warship Manual Override, Aggro Override, and Heal-at-Port Command (#3501)

Part of [#2661](https://github.com/openfrontio/OpenFrontIO/issues/2661)
(split into 3 PRs so they are not too large..)

## Description:

Part 3/3 of
[#2661](https://github.com/openfrontio/OpenFrontIO/issues/2661).

This PR adds the retreat control and override behavior for warships:

- Manual override: moving a warship manually cancels retreat and
suppresses auto-retreat for 5 seconds
- Aggro override: a retreating warship will aggro a nearby enemy
transport or warship before continuing retreat
- Heal-at-port command for sending a warship to a friendly port manually
- Friendly-port validation for HealAtPortExecution
- Regression tests for manual override, aggro override, and heal-at-port
behavior



## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

zixer._

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/graphics/layers/AttacksDisplay.ts

@@ -377,16 +377,16 @@ export class AttacksDisplay extends LitElement implements Layer {
               "text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
             translate: false,
           })}
-          ${!boat.retreating()
-            ? this.renderButton({
-                content: "❌",
+          ${boat.transportShipState().isRetreating
+            ? html`<span class="ml-auto truncate text-aquarius"
+                >(${translateText("events_display.retreating")}...)</span
+              >`
+            : this.renderButton({
+                content: "\u274C",
                 onClick: () => this.emitBoatCancelIntent(boat.id()),
                 className: "ml-auto text-left shrink-0",
-                disabled: boat.retreating(),
-              })
-            : html`<span class="ml-auto truncate text-aquarius"
-                >(${translateText("events_display.retreating")}...)</span
-              >`}
+                disabled: boat.transportShipState().isRetreating,
+              })}
         </div>
       `,
     );

src/client/graphics/layers/UnitLayer.ts

@@ -456,12 +456,17 @@ export class UnitLayer implements Layer {
   }
 
   private handleWarShipEvent(unit: UnitView) {
-    if (unit.retreating()) {
-      this.drawSprite(unit, colord("rgb(0,180,255)"));
+    if (unit.warshipState().state !== "patrolling" && unit.isActive()) {
+      if (unit.warshipState().isInCombat) {
+        this.drawSprite(unit, colord("rgb(200,0,0)"));
+      } else {
+        this.drawSprite(unit);
+      }
+      this.drawRetreatCross(unit);
       return;
     }
 
-    if (unit.targetUnitId()) {
+    if (unit.warshipState().isInCombat) {
       this.drawSprite(unit, colord("rgb(200,0,0)"));
       return;
     }
@@ -469,6 +474,27 @@ export class UnitLayer implements Layer {
     this.drawSprite(unit);
   }
 
+  private drawRetreatCross(unit: UnitView) {
+    // Blink: 500ms on, 500ms off
+    if (Math.floor(Date.now() / 500) % 2 === 0) return;
+    const x = this.game.x(unit.tile());
+    const y = this.game.y(unit.tile());
+    const ctx = this.context;
+    ctx.save();
+    const cx = x + 0.5;
+    const cy = y + 0.5;
+    ctx.lineCap = "square";
+    ctx.strokeStyle = "rgb(36,36,36)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - 1.5);
+    ctx.lineTo(cx, cy + 1.5);
+    ctx.moveTo(cx - 1.5, cy);
+    ctx.lineTo(cx + 1.5, cy);
+    ctx.stroke();
+    ctx.restore();
+  }
+
   private handleShellEvent(unit: UnitView) {
     const rel = this.relationship(unit);
 

src/client/graphics/ui/NavalTarget.ts

@@ -122,7 +122,8 @@ export class NavalTarget extends Target {
     if (
       !this.ended &&
       (!this.unit.isActive() ||
-        (this.unit.type() === UnitType.TransportShip && this.unit.retreating()))
+        (this.unit.type() === UnitType.TransportShip &&
+          this.unit.transportShipState().isRetreating))
     ) {
       this.ended = true;
     }