Move attack troop overlay to WebGL (#3996)

## Description:

Replaces the DOM-based `AttackingTroopsOverlay` with
`AttackingTroopsController`, rendering attack troop counts through
`WorldTextPass` instead of a separate fixed-position DOM container.

## Summary

- New `AttackingTroopsController` polls `attackClusteredPositions()`
every 200ms and pushes labels to the WebGL view each frame, lerping
cluster positions over 250ms for smooth front-line movement (replaces
the old CSS `transform 0.25s` transition).
- `WorldTextPass` gains `setAttackTroopLabels()` and renders them at a
fixed on-screen size (zoom-independent) using `screenScale / zoom`.
- World text now draws on top of `NamePass` so attack callouts aren't
hidden behind centered player names.
- Fragment shader adds a soft quadratic dark halo around every
world-text label; extent uses the remaining SDF range after the hard
outline so it fades smoothly to zero (no rectangular clipping).
- Deletes `AttackingTroopsOverlay.ts`; existing unit tests repointed to
the controller's exported `alignClusterOrder`.

<img width="369" height="395" alt="Screenshot 2026-05-24 at 4 43 51 PM"
src="https://github.com/user-attachments/assets/4dbffe20-77f9-4c0f-b956-ecf543538f8d"
/>

## 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:

evan

tests/client/graphics/layers/AttackingTroopsOverlay.test.ts

@@ -1,38 +1,21 @@
 import { describe, expect, test } from "vitest";
 import {
   alignClusterOrder,
-  computeLabelScale,
-} from "../../../../src/client/hud/layers/AttackingTroopsOverlay";
+  Slot,
+} from "../../../../src/client/controllers/AttackingTroopsController";
 import { Cell } from "../../../../src/core/game/Game";
 
-describe("computeLabelScale", () => {
-  // LABEL_FULL_SIZE_ZOOM = 4, LABEL_MIN_RENDERED_SIZE = 0.63,
-  // LABEL_SIZE_MULTIPLIER = 1.0. Rendered size at zoom z:
-  //   1.0 * (0.63 + 0.37 * min(1, z/4)).
-  test("at the full-size threshold, rendered size is capped at the multiplier", () => {
-    // zoom = 4 → rendered = 1.0 → scale = 1.0 / 4.
-    expect(computeLabelScale(4)).toBeCloseTo(1.0 / 4);
-  });
-
-  test("above the threshold, rendered size stays capped (counter-scales zoom)", () => {
-    // zoom = 8 → rendered still 1.0 → scale = 1.0 / 8.
-    expect(computeLabelScale(8)).toBeCloseTo(1.0 / 8);
-  });
-
-  test("at zoom = 0+, rendered size approaches the floor", () => {
-    // As zoom→0, t→0, rendered → 1.0 * 0.63 (the floor).
-    // At zoom = 0.001, rendered ≈ floor, so scale ≈ floor / zoom = huge.
-    const scale = computeLabelScale(0.001);
-    const floorRendered = 1.0 * 0.63;
-    // Within 1% of the floor-divided-by-zoom value.
-    expect(scale).toBeGreaterThan((floorRendered / 0.001) * 0.99);
-    expect(scale).toBeLessThan((floorRendered / 0.001) * 1.01);
-  });
-
-  test("interpolates linearly between floor and full-size threshold", () => {
-    // zoom = 2 → t = 0.5 → rendered = 1.0 * (0.63 + 0.185) = 0.815.
-    expect(computeLabelScale(2)).toBeCloseTo(0.815 / 2);
-  });
+// Slots only need the `dst` fields populated for `alignClusterOrder` — it
+// compares the new positions against the previous targets to decide whether
+// the worker reordered same-size clusters.
+const slot = (x: number, y: number): Slot => ({
+  curX: x,
+  curY: y,
+  srcX: x,
+  srcY: y,
+  dstX: x,
+  dstY: y,
+  startMs: 0,
 });
 
 describe("alignClusterOrder", () => {
@@ -40,7 +23,7 @@ describe("alignClusterOrder", () => {
 
   test("preserves order when direct mapping is closer", () => {
     const next = [c(10, 10), c(100, 100)];
-    const prev = [c(12, 11), c(98, 102)];
+    const prev = [slot(12, 11), slot(98, 102)];
     alignClusterOrder(next, prev);
     expect(next[0].x).toBe(10);
     expect(next[1].x).toBe(100);
@@ -50,7 +33,7 @@ describe("alignClusterOrder", () => {
     // prev[0] is near (10,10), prev[1] is near (100,100); the worker returned
     // them in the opposite order. Expect swap so each label sticks to its front.
     const next = [c(101, 99), c(11, 12)];
-    const prev = [c(10, 10), c(100, 100)];
+    const prev = [slot(10, 10), slot(100, 100)];
     alignClusterOrder(next, prev);
     expect(next[0].x).toBe(11);
     expect(next[1].x).toBe(101);
@@ -58,7 +41,7 @@ describe("alignClusterOrder", () => {
 
   test("does not swap on a tie (strict less-than)", () => {
     const next = [c(0, 0), c(10, 0)];
-    const prev = [c(5, 0), c(5, 0)];
+    const prev = [slot(5, 0), slot(5, 0)];
     alignClusterOrder(next, prev);
     expect(next[0].x).toBe(0);
     expect(next[1].x).toBe(10);
@@ -66,32 +49,28 @@ describe("alignClusterOrder", () => {
 
   test("no-op when fewer than two new positions", () => {
     const single = [c(99, 99)];
-    alignClusterOrder(single, [c(0, 0), c(1000, 1000)]);
+    alignClusterOrder(single, [slot(0, 0), slot(1000, 1000)]);
     expect(single[0].x).toBe(99);
 
     const empty: Cell[] = [];
-    alignClusterOrder(empty, [c(0, 0), c(1000, 1000)]);
+    alignClusterOrder(empty, [slot(0, 0), slot(1000, 1000)]);
     expect(empty.length).toBe(0);
   });
 
-  test("no-op when either previous slot is null (initial render)", () => {
+  test("no-op when fewer than two previous slots (initial render)", () => {
     const next = [c(100, 100), c(0, 0)];
-    alignClusterOrder(next, [null, c(0, 0)]);
+    alignClusterOrder(next, [slot(0, 0)]);
     expect(next[0].x).toBe(100);
     expect(next[1].x).toBe(0);
 
-    alignClusterOrder(next, [c(0, 0), null]);
-    expect(next[0].x).toBe(100);
-    expect(next[1].x).toBe(0);
-
-    alignClusterOrder(next, [null, null]);
+    alignClusterOrder(next, []);
     expect(next[0].x).toBe(100);
     expect(next[1].x).toBe(0);
   });
 
   test("no-op when more than two new positions (assumed cap)", () => {
     const next = [c(100, 0), c(0, 0), c(50, 0)];
-    alignClusterOrder(next, [c(0, 0), c(100, 0)]);
+    alignClusterOrder(next, [slot(0, 0), slot(100, 0)]);
     expect(next.map((p) => p.x)).toEqual([100, 0, 50]);
   });
 });