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

src/client/render/gl/GameView.ts

@@ -30,6 +30,7 @@ import type {
   RadialMenuItem,
 } from "./Events";
 import type { SpawnCenter } from "./passes/SpawnOverlayPass";
+import type { AttackTroopLabel } from "./passes/WorldTextPass";
 import { GPURenderer } from "./Renderer";
 import type { RenderSettings } from "./RenderSettings";
 
@@ -289,6 +290,9 @@ export class GameView {
   applyConquestEvents(events: ConquestFx[]): void {
     this.renderer?.applyConquestEvents(events);
   }
+  setAttackTroopLabels(labels: AttackTroopLabel[]): void {
+    this.renderer?.setAttackTroopLabels(labels);
+  }
   applyBonusEvents(events: BonusEvent[]): void {
     this.renderer?.applyBonusEvents(events);
   }

src/client/render/gl/Renderer.ts

@@ -734,6 +734,12 @@ export class GPURenderer {
     }
   }
 
+  setAttackTroopLabels(
+    labels: import("./passes/WorldTextPass").AttackTroopLabel[],
+  ): void {
+    this.worldTextPass.setAttackTroopLabels(labels);
+  }
+
   applyBonusEvents(events: BonusEvent[]): void {
     if (events.length === 0) return;
     // In live game, filter to local player only. In replay (localPlayerID=0), show all.
@@ -1173,15 +1179,17 @@ export class GPURenderer {
       this.fxPass.draw(cam, zoom);
     }
 
-    this.worldTextPass.tick();
-    this.worldTextPass.draw(cam, zoom);
-
     // Grid shows on either trigger; names hide only under alt-view (space
     // hold), not under the persistent M-key gridView toggle.
     if (this.gridView || this.altView) this.coordinateGridPass.draw(cam, zoom);
     if (pe.name && !this.altView)
       this.namePass.draw(cam, this.nightCompositePass.getAmbient());
 
+    // World text (attack-troop labels, popups, ghost cost) draws on top of
+    // player names so attack callouts aren't hidden behind a centered name.
+    this.worldTextPass.tick(zoom);
+    this.worldTextPass.draw(cam, zoom);
+
     this.radialMenuPass.draw();
 
     gl.disable(gl.BLEND);

src/client/render/gl/passes/WorldTextPass.ts

@@ -44,6 +44,13 @@ const GHOST_COST_Y_OFFSET = 3;
 const GHOST_COST_SCALE = 4;
 /** Matches player-name outline width for a consistent UI look. */
 const GHOST_COST_OUTLINE_WIDTH = 1.4;
+/**
+ * Screen-relative em scale for attack troop labels. Pre-divided by the current
+ * zoom each frame so the on-screen label size stays constant regardless of
+ * how far the camera is zoomed.
+ */
+const ATTACK_LABEL_SCREEN_SCALE = 34.0;
+const ATTACK_LABEL_OUTLINE_WIDTH = 1.2;
 
 // ---------------------------------------------------------------------------
 // Active popup tracking
@@ -63,6 +70,20 @@ interface ActivePopup {
   outlineWidth: number;
 }
 
+/**
+ * Persistent attack-troop label rendered at a world-space position.
+ * AttackingTroopsController pushes a fresh list each frame with already-
+ * interpolated positions (smoothing happens controller-side).
+ */
+export interface AttackTroopLabel {
+  x: number;
+  y: number;
+  text: string;
+  colorR: number;
+  colorG: number;
+  colorB: number;
+}
+
 function formatGold(gold: number): string {
   if (gold >= 1_000_000) return (gold / 1_000_000).toFixed(1) + "M";
   if (gold >= 1_000) return (gold / 1_000).toFixed(1) + "K";
@@ -119,6 +140,10 @@ export class WorldTextPass {
     colorB: number;
   } | null = null;
 
+  // Persistent attack-troop labels. Controller pushes the full list each frame
+  // (already interpolated), so we just iterate and render.
+  private attackTroopLabels: AttackTroopLabel[] = [];
+
   // Settings reference
   private settings: RenderSettings;
 
@@ -336,12 +361,24 @@ export class WorldTextPass {
     };
   }
 
+  /**
+   * Replace the set of attack-troop labels. Controller pushes the full list
+   * each frame with interpolated positions; empty array clears them.
+   */
+  setAttackTroopLabels(labels: AttackTroopLabel[]): void {
+    this.attackTroopLabels = labels;
+  }
+
   // -------------------------------------------------------------------------
   // Tick — cull expired, rebuild instance buffer
   // -------------------------------------------------------------------------
 
-  tick(): void {
-    if (this.active.length === 0 && this.ghostCostLabel === null) {
+  tick(zoom: number): void {
+    if (
+      this.active.length === 0 &&
+      this.ghostCostLabel === null &&
+      this.attackTroopLabels.length === 0
+    ) {
       this.instanceCount = 0;
       return;
     }
@@ -355,10 +392,10 @@ export class WorldTextPass {
       }
     }
 
-    this.rebuildInstances(now);
+    this.rebuildInstances(now, zoom);
   }
 
-  private rebuildInstances(now: number): void {
+  private rebuildInstances(now: number, zoom: number): void {
     let count = 0;
 
     for (const popup of this.active) {
@@ -402,6 +439,38 @@ export class WorldTextPass {
       }
     }
 
+    // Attack troop labels — persistent, no fade. Controller interpolates
+    // positions before pushing. Scale is divided by zoom so the label keeps
+    // a constant on-screen size regardless of how zoomed-in the camera is.
+    const attackScale = ATTACK_LABEL_SCREEN_SCALE / Math.max(zoom, 0.0001);
+    for (const label of this.attackTroopLabels) {
+      layoutString(
+        label.text,
+        this.glyph,
+        this.kernTable,
+        this.charCodes,
+        this.cursors,
+      );
+      const len = Math.min(label.text.length, MAX_CHARS);
+      for (let i = 0; i < len; i++) {
+        if (this.charCodes[i] === 0) continue;
+        if (count >= this.maxInstances) this.growBuffer();
+
+        const off = count * FLOATS_PER_INSTANCE;
+        this.instanceData[off + 0] = label.x;
+        this.instanceData[off + 1] = label.y;
+        this.instanceData[off + 2] = this.cursors[i];
+        this.instanceData[off + 3] = this.charCodes[i];
+        this.instanceData[off + 4] = 1;
+        this.instanceData[off + 5] = label.colorR;
+        this.instanceData[off + 6] = label.colorG;
+        this.instanceData[off + 7] = label.colorB;
+        this.instanceData[off + 8] = attackScale;
+        this.instanceData[off + 9] = ATTACK_LABEL_OUTLINE_WIDTH;
+        count++;
+      }
+    }
+
     // Ghost cost label — persistent, no fade or rise. layoutString already
     // centers cursors around 0, so passing the tile coord places the text
     // centered on the tile (vertex shader adds the +0.5 tile-center offset).
@@ -495,6 +564,7 @@ export class WorldTextPass {
 
   clear(): void {
     this.active.length = 0;
+    this.attackTroopLabels = [];
     this.instanceCount = 0;
   }
 

src/client/render/gl/shaders/world-text/world-text.frag.glsl

@@ -33,6 +33,17 @@ void main() {
   float outlineDist = screenPxDist + effectiveOutline;
   float outlineAlpha = clamp(outlineDist + 0.5, 0.0, 1.0);
 
+  // Soft dark halo extending past the hard outline — easier to read over
+  // busy terrain. Uses whatever SDF range is left after the hard outline so
+  // it can always fade fully to zero before hitting the SDF saturation
+  // boundary (otherwise the glow clips at the glyph quad and looks square).
+  // Quadratic falloff for a true glow shape — brightest right next to the
+  // text, smoothly thinning to nothing.
+  float glowExtent = max(screenPxRange * 0.5 - effectiveOutline - 0.5, 0.0);
+  float glowT =
+    clamp((outlineDist + glowExtent) / max(glowExtent, 0.0001), 0.0, 1.0);
+  float glowAlpha = glowExtent > 0.0 ? glowT * glowT * 0.75 : 0.0;
+
   vec3 color = mix(vec3(0.0), vColor, fillAlpha);
-  fragColor = vec4(color, outlineAlpha * vAlpha);
+  fragColor = vec4(color, max(outlineAlpha, glowAlpha) * vAlpha);
 }