From 81d701adc4102d8ee4bcf12dac7399d5c9f01727 Mon Sep 17 00:00:00 2001
From: Zixer1 <99333209+Zixer1@users.noreply.github.com>
Date: Mon, 13 Jul 2026 14:07:22 -0400
Subject: [PATCH] feat(highlight): replace the small-player highlight toggle
 with a strength slider (#4588)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the "Highlight small players" on/off toggle with a **0-500%
Strength slider** controlling the glow's **width** (0 = off, 100% = the
previous default).

- `UserSettings`: `highlightSmallPlayers()`/toggle →
`highlightGlowStrength()`/set, float-backed, clamped to [0, 5].
- `SmallPlayerGlowPass` takes the strength via a setter (pushed by
`ClientGameRunner` on the settings-changed event), so it stays a pure
consumer and the slider still updates live while the settings modal has
the sim paused. Width = a non-linear blur-iteration count; intensity
compensated so wider stays about as bright.
- `MapRenderer` persists the strength across a WebGL context restore.
- `SettingsModal`: the toggle row becomes a range input.

Behavior note: with the toggle gone the glow **defaults ON at 100%**
(old toggle defaulted OFF); can default to 0 (opt-in) if preferred.

- [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
---
 resources/lang/en.json                        |  2 +-
 src/client/ClientGameRunner.ts                | 11 +++
 src/client/WebGLFrameBuilder.ts               |  5 +-
 src/client/hud/layers/SettingsModal.ts        | 32 +++++----
 src/client/render/gl/MapRenderer.ts           | 12 ++++
 src/client/render/gl/Renderer.ts              |  4 ++
 .../render/gl/passes/SmallPlayerGlowPass.ts   | 68 +++++++++++++++----
 src/core/game/UserSettings.ts                 | 14 ++--
 tests/UserSettings.test.ts                    | 22 +++---
 9 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 9f5529854..3d8704cfe 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -1410,8 +1410,8 @@
     "ground_attack_desc": "Send a ground attack to the tile under your cursor.",
     "help_messages_desc": "Show contextual tips and warnings during gameplay, such as army limit warnings and general gameplay advice.",
     "help_messages_label": "Help Messages",
+    "highlight_glow_strength_label": "Highlight strength",
     "highlight_small_players_desc": "Add a glow to small players so they're easy to find.",
-    "highlight_small_players_label": "Highlight small players",
     "keybind_conflict_error": "The key {key} is already bound to another action.",
     "keybinds_hint": "Click a key to rebind it. You can assign a single key or Shift + key combination.",
     "left_click_desc": "When ON, left-click opens menu and sword button attacks. When OFF, left-click attacks directly.",
diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index fcb79f42f..76e3215ef 100644
--- a/src/client/ClientGameRunner.ts
+++ b/src/client/ClientGameRunner.ts
@@ -527,6 +527,17 @@ async function createClientGame(
       { signal: graphicsListenerAbort.signal },
     );
 
+    // Push the small-player glow Strength to the pass (which is a pure consumer)
+    // on the settings-changed event, so moving the slider updates the glow live
+    // even while the settings modal has the sim paused.
+    view.setSmallPlayerGlowStrength(userSettings.highlightGlowStrength());
+    globalThis.addEventListener(
+      `${USER_SETTINGS_CHANGED_EVENT}:settings.highlightGlowStrength`,
+      () =>
+        view.setSmallPlayerGlowStrength(userSettings.highlightGlowStrength()),
+      { signal: graphicsListenerAbort.signal },
+    );
+
     // Re-resolve names drawn on the map when the anonymous-names setting toggles
     // so they switch live, like the leaderboard.
     globalThis.addEventListener(
diff --git a/src/client/WebGLFrameBuilder.ts b/src/client/WebGLFrameBuilder.ts
index 79194795d..359f8fffe 100644
--- a/src/client/WebGLFrameBuilder.ts
+++ b/src/client/WebGLFrameBuilder.ts
@@ -3,7 +3,6 @@ import { base64url } from "jose";
 import { assetUrl } from "../core/AssetUrls";
 import { decodePatternData } from "../core/PatternDecoder";
 import { PlayerType } from "../core/game/Game";
-import { UserSettings } from "../core/game/UserSettings";
 import { uploadFrameData } from "./render/frame/Upload";
 // Type-only: a value import would pull GPURenderer and its `.glsl?raw` shader
 // imports into any non-Vite consumer (e.g. the Node perf harness).
@@ -93,7 +92,6 @@ export class WebGLFrameBuilder {
   }
 
   private readonly highlightSetBuf = new Uint8Array(PALETTE_SIZE);
-  private readonly userSettings = new UserSettings();
   private glowRescanTick = 0;
 
   update(gameView: GameView): void {
@@ -209,8 +207,9 @@ export class WebGLFrameBuilder {
    * Client-only view — toggle it live in the settings.
    */
   private syncSmallPlayerGlow(gameView: GameView): void {
+    // Strength (incl. off at 0) is read live in the glow pass; here we only
+    // decide who qualifies. Skip spawn + the first minute.
     if (
-      !this.userSettings.highlightSmallPlayers() ||
       gameView.inSpawnPhase() ||
       gameView.elapsedGameSeconds() < SMALL_PLAYER_GLOW_GRACE_SECONDS
     ) {
diff --git a/src/client/hud/layers/SettingsModal.ts b/src/client/hud/layers/SettingsModal.ts
index 6b905f63a..8b9880a0c 100644
--- a/src/client/hud/layers/SettingsModal.ts
+++ b/src/client/hud/layers/SettingsModal.ts
@@ -135,11 +135,6 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
-  private onToggleHighlightSmallPlayersButtonClick() {
-    this.userSettings.toggleHighlightSmallPlayers();
-    this.requestUpdate();
-  }
-
   private onToggleAlertFrameButtonClick() {
     this.userSettings.toggleAlertFrame();
     this.requestUpdate();
@@ -210,6 +205,12 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
+  private onHighlightGlowStrengthChange(event: Event) {
+    const strength = parseFloat((event.target as HTMLInputElement).value) / 100;
+    this.userSettings.setHighlightGlowStrength(strength);
+    this.requestUpdate();
+  }
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -356,30 +357,35 @@ export class SettingsModal extends LitElement implements Controller {
               </div>
             </button>
 
-            <button
+            <div
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
-              @click="${this.onToggleHighlightSmallPlayersButtonClick}"
             >
               <img
                 src=${highlightIcon}
-                alt="highlightSmallPlayers"
+                alt="highlightGlowStrength"
                 width="20"
                 height="20"
               />
               <div class="flex-1">
                 <div class="font-medium">
-                  ${translateText("user_setting.highlight_small_players_label")}
+                  ${translateText("user_setting.highlight_glow_strength_label")}
                 </div>
                 <div class="text-sm text-slate-400">
                   ${translateText("user_setting.highlight_small_players_desc")}
                 </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="500"
+                  .value=${this.userSettings.highlightGlowStrength() * 100}
+                  @input=${this.onHighlightGlowStrengthChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
               </div>
               <div class="text-sm text-slate-400">
-                ${this.userSettings.highlightSmallPlayers()
-                  ? translateText("user_setting.on")
-                  : translateText("user_setting.off")}
+                ${Math.round(this.userSettings.highlightGlowStrength() * 100)}%
               </div>
-            </button>
+            </div>
 
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
diff --git a/src/client/render/gl/MapRenderer.ts b/src/client/render/gl/MapRenderer.ts
index 0aa4cd6df..42b10a0e3 100644
--- a/src/client/render/gl/MapRenderer.ts
+++ b/src/client/render/gl/MapRenderer.ts
@@ -36,6 +36,10 @@ import type { RenderSettings } from "./RenderSettings";
 export class MapRenderer {
   private renderer: GPURenderer | null = null;
   private resizeObs: ResizeObserver | null = null;
+  // Persisted so a WebGL context restore (which recreates GPURenderer via
+  // initRenderer) reapplies the user's chosen glow strength instead of
+  // resetting it to the pass default until the next settings change.
+  private smallPlayerGlowStrength = 1;
 
   /**
    * Called after a lost WebGL context is restored and the renderer has been
@@ -89,6 +93,8 @@ export class MapRenderer {
 
     const rect = this.canvas.getBoundingClientRect();
     if (rect.width > 0) this.renderer.resize(rect.width, rect.height);
+    // Reapply state that lives outside RenderSettings so it survives a restore.
+    this.renderer.setSmallPlayerGlowStrength(this.smallPlayerGlowStrength);
   };
 
   private handleContextLost = (e: Event) => {
@@ -227,6 +233,12 @@ export class MapRenderer {
     this.renderer?.updateSmallPlayerGlow(set);
   }
 
+  /** Set the small-player glow Strength (0 = off, 1 = default, capped at 5). */
+  setSmallPlayerGlowStrength(strength: number): void {
+    this.smallPlayerGlowStrength = strength;
+    this.renderer?.setSmallPlayerGlowStrength(strength);
+  }
+
   // ---- Selection box ----
 
   /** Set multiple selected units (multi-select). Pass [] to clear. */
diff --git a/src/client/render/gl/Renderer.ts b/src/client/render/gl/Renderer.ts
index 0a589a01e..530743a7e 100644
--- a/src/client/render/gl/Renderer.ts
+++ b/src/client/render/gl/Renderer.ts
@@ -917,6 +917,10 @@ export class GPURenderer {
     this.smallPlayerGlowPass.update(set);
   }
 
+  setSmallPlayerGlowStrength(strength: number): void {
+    this.smallPlayerGlowPass.setGlowStrength(strength);
+  }
+
   // ---------------------------------------------------------------------------
   // Queries
   // ---------------------------------------------------------------------------
diff --git a/src/client/render/gl/passes/SmallPlayerGlowPass.ts b/src/client/render/gl/passes/SmallPlayerGlowPass.ts
index d04da631d..f0da3350f 100644
--- a/src/client/render/gl/passes/SmallPlayerGlowPass.ts
+++ b/src/client/render/gl/passes/SmallPlayerGlowPass.ts
@@ -57,6 +57,8 @@ export class SmallPlayerGlowPass {
   private dirty = false; // aura needs rebuilding (set changed)
   private animTime = 0;
   private lastTime = 0;
+  private lastPasses = 1; // last width the aura was blurred at (to detect change)
+  private glowStrength = 1; // pushed via setGlowStrength; 0 = off, 1 = default, capped at 5
 
   constructor(
     gl: WebGL2RenderingContext,
@@ -121,6 +123,16 @@ export class SmallPlayerGlowPass {
     this.quadVao = createFullscreenQuad(gl);
   }
 
+  /**
+   * Push the glow Strength (0 = off, 1 = default, capped at 5). The client reads
+   * it from UserSettings and pushes it here so the pass stays a pure consumer
+   * (passes never read game/DOM state directly); pushing on the settings-changed
+   * event keeps it live even while the settings modal has the sim paused.
+   */
+  setGlowStrength(strength: number): void {
+    this.glowStrength = strength;
+  }
+
   /** Push the highlight set (1 byte per owner smallID), or null to disable. */
   update(set: Uint8Array | null): void {
     if (set === null) {
@@ -144,8 +156,34 @@ export class SmallPlayerGlowPass {
     this.dirty = true;
   }
 
+  // Strength (0 = off, 1 = default width) -> blur iterations; each iteration
+  // widens the Gaussian aura. Non-linear so the slider ramps gently low and
+  // grows fast toward the top: 500% ≈ 82 passes (very wide). Clamped for perf.
+  private passesFor(strength: number): number {
+    return Math.min(96, Math.max(1, Math.round(strength ** 2.74)));
+  }
+
+  // One separable-blur axis: sample `src`, write the blurred result into `dst`.
+  private blurAxis(
+    src: RenderTarget,
+    dst: RenderTarget,
+    dx: number,
+    dy: number,
+  ): void {
+    const gl = this.gl;
+    toTarget(gl, dst, () => {
+      gl.uniform2f(this.uBlurDir, dx, dy);
+      gl.bindTexture(gl.TEXTURE_2D, src.tex);
+      gl.bindVertexArray(this.quadVao);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+    });
+  }
+
   draw(cameraMatrix: Float32Array): void {
-    if (!this.active) return;
+    // Strength is pushed by the client (not tick-gated), so a slider change is
+    // live even while the sim is paused (e.g. the settings modal is open).
+    const strength = this.glowStrength;
+    if (!this.active || strength <= 0) return;
 
     const gl = this.gl;
     const s = this.settings;
@@ -161,6 +199,11 @@ export class SmallPlayerGlowPass {
     }
     this.lastTime = now;
     const pulse = 0.5 + 0.5 * Math.sin(this.animTime);
+    const passes = this.passesFor(strength);
+    if (passes !== this.lastPasses) {
+      this.dirty = true; // width changed -> rebuild the aura this frame
+      this.lastPasses = passes;
+    }
 
     // Rebuild the blurred aura only when the set changed (~1/s); its inputs
     // don't move faster than that. The composite below still runs every frame.
@@ -179,21 +222,14 @@ export class SmallPlayerGlowPass {
         gl.drawArrays(gl.TRIANGLES, 0, 6);
       });
 
-      // Separable blur: horizontal into B, vertical back into A.
+      // Separable blur, iterated `passes` times to widen the aura (more
+      // iterations = wider Gaussian). Each pass: horizontal A->B, vertical B->A.
       gl.useProgram(this.blurProg);
       gl.activeTexture(gl.TEXTURE0);
-      toTarget(gl, b, () => {
-        gl.uniform2f(this.uBlurDir, 1 / a.w, 0);
-        gl.bindTexture(gl.TEXTURE_2D, a.tex);
-        gl.bindVertexArray(this.quadVao);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-      });
-      toTarget(gl, a, () => {
-        gl.uniform2f(this.uBlurDir, 0, 1 / b.h);
-        gl.bindTexture(gl.TEXTURE_2D, b.tex);
-        gl.bindVertexArray(this.quadVao);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-      });
+      for (let k = 0; k < passes; k++) {
+        this.blurAxis(a, b, 1 / a.w, 0); // horizontal A->B
+        this.blurAxis(b, a, 0, 1 / b.h); // vertical B->A
+      }
       this.dirty = false;
     }
 
@@ -207,7 +243,9 @@ export class SmallPlayerGlowPass {
       gl.uniformMatrix3fv(this.uCompositeCam, false, cameraMatrix);
       gl.uniform2f(this.uCompositeMapSize, this.mapW, this.mapH);
       gl.uniform3fv(this.uGlowColor, s.color);
-      gl.uniform1f(this.uIntensity, s.alpha * pulse);
+      // Widening spreads the mask thinner, so scale intensity up to keep the
+      // glow about as bright (wider, not darker), capped by the shader's alpha.
+      gl.uniform1f(this.uIntensity, s.alpha * pulse * Math.sqrt(passes));
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, a.tex);
       gl.bindVertexArray(this.mapVao);
diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts
index f001fab01..3895a7abc 100644
--- a/src/core/game/UserSettings.ts
+++ b/src/core/game/UserSettings.ts
@@ -137,8 +137,11 @@ export class UserSettings {
     return this.getBool("settings.emojis", true);
   }
 
-  highlightSmallPlayers() {
-    return this.getBool("settings.highlightSmallPlayers", false);
+  highlightGlowStrength() {
+    // 0 = off, 1 = default; capped at 5 (the 500% slider max) so a value
+    // persisted from an older, larger range can't display/apply above it.
+    const v = this.getFloat("settings.highlightGlowStrength", 1);
+    return Math.min(5, Math.max(0, v));
   }
 
   performanceOverlay() {
@@ -193,11 +196,8 @@ export class UserSettings {
     this.setBool("settings.emojis", !this.emojis());
   }
 
-  toggleHighlightSmallPlayers() {
-    this.setBool(
-      "settings.highlightSmallPlayers",
-      !this.highlightSmallPlayers(),
-    );
+  setHighlightGlowStrength(value: number) {
+    this.setFloat("settings.highlightGlowStrength", value);
   }
 
   // Performance overlay specifically needs a direct setter for Shift-D
diff --git a/tests/UserSettings.test.ts b/tests/UserSettings.test.ts
index 285c1f6ea..911c40ee9 100644
--- a/tests/UserSettings.test.ts
+++ b/tests/UserSettings.test.ts
@@ -1,6 +1,6 @@
 import { UserSettings } from "../src/core/game/UserSettings";
 
-describe("UserSettings highlight small players", () => {
+describe("UserSettings highlight glow strength", () => {
   beforeEach(() => {
     localStorage.clear();
     // UserSettings keeps a static in-memory cache; reset it too so each test
@@ -10,22 +10,22 @@ describe("UserSettings highlight small players", () => {
     ).cache.clear();
   });
 
-  it("defaults to off", () => {
-    expect(new UserSettings().highlightSmallPlayers()).toBe(false);
+  it("defaults to 1 (100%, on)", () => {
+    expect(new UserSettings().highlightGlowStrength()).toBe(1);
   });
 
-  it("toggles on and off", () => {
+  it("persists a set value, including 0 (off)", () => {
     const s = new UserSettings();
-    s.toggleHighlightSmallPlayers();
-    expect(s.highlightSmallPlayers()).toBe(true);
-    s.toggleHighlightSmallPlayers();
-    expect(s.highlightSmallPlayers()).toBe(false);
+    s.setHighlightGlowStrength(2.5);
+    expect(s.highlightGlowStrength()).toBe(2.5);
+    s.setHighlightGlowStrength(0);
+    expect(s.highlightGlowStrength()).toBe(0);
   });
 
   it("shares state across instances via the static cache", () => {
     // The settings modal and the renderer's frame builder each hold their own
-    // UserSettings; a toggle in one must be visible to the other.
-    new UserSettings().toggleHighlightSmallPlayers();
-    expect(new UserSettings().highlightSmallPlayers()).toBe(true);
+    // UserSettings; a change in one must be visible to the other.
+    new UserSettings().setHighlightGlowStrength(3);
+    expect(new UserSettings().highlightGlowStrength()).toBe(3);
   });
 });