add target visualization for boat attacks (#2025)

## Description:
- Adds warship count, transport count (deployed out of maximum) to unit
display
- Adds a target that appears when a boat attack is dispatched, which
disappears when the boat attack arrives
- Updates the unit display alt text to pass through translation

## Please complete the following:

- [X] I have added screenshots for all UI updates (see below)
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file (in this case it is only alt-text)
- [X] I have added relevant tests to the test directory (n/a, fully
visual)
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

See new target effect and addition to units display 

As each transport ship arrives, the target draw stops, together with the
effect for the trail.


https://github.com/user-attachments/assets/c36c57d3-e2b7-456e-85ab-1e786bd28a07

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

@dxtron_28992 (my invite is still pending to dev discord)

src/client/graphics/fx/TargetFx.ts

@@ -0,0 +1,64 @@
+import { Fx } from "./Fx";
+
+export class TargetFx implements Fx {
+  private lifeTime = 0;
+  private ended = false;
+  private endFade = 300;
+
+  constructor(
+    private x: number,
+    private y: number,
+    private duration = 0,
+    private radius = 8,
+    private persistent = false,
+  ) {}
+
+  end() {
+    if (this.persistent) {
+      this.ended = true;
+      this.lifeTime = 0; // reuse for fade-out timing
+    }
+  }
+
+  renderTick(frameTime: number, ctx: CanvasRenderingContext2D): boolean {
+    this.lifeTime += frameTime;
+
+    if (!this.persistent) {
+      if (this.lifeTime >= this.duration) return false;
+    } else if (this.ended) {
+      if (this.lifeTime >= this.endFade) return false;
+    }
+
+    const t = this.persistent
+      ? (this.lifeTime % 1000) / 1000 // looping for pulse
+      : this.lifeTime / this.duration;
+    const baseAlpha = this.persistent ? 0.9 : 1 - t;
+    const fadeAlpha =
+      this.persistent && this.ended ? 1 - this.lifeTime / this.endFade : 1;
+    const alpha = Math.max(0, Math.min(1, baseAlpha * fadeAlpha));
+    const pulse = 1 + 0.2 * Math.sin(t * Math.PI * 2);
+
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = `rgba(255,0,0,${alpha})`;
+
+    // size follows the pulsing radius so crosshair scales with it
+    const size = this.radius * pulse;
+
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, size, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // crosshair (fixed size, does not scale with pulse)
+    ctx.beginPath();
+    ctx.moveTo(this.x - this.radius * 1.2, this.y);
+    ctx.lineTo(this.x + this.radius * 1.2, this.y);
+    ctx.moveTo(this.x, this.y - this.radius * 1.2);
+    ctx.lineTo(this.x, this.y + this.radius * 1.2);
+    ctx.stroke();
+
+    ctx.restore();
+    return true;
+  }
+}