feat(highlight): replace the small-player highlight toggle with a strength slider (#4588)

## Description:

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.

## 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
This commit is contained in:
Zixer1
2026-07-13 11:07:22 -07:00
committed by GitHub
parent e76b34be22
commit d07f7d46dd
9 changed files with 120 additions and 50 deletions
+12
View File
@@ -35,6 +35,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
@@ -91,6 +95,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) => {
@@ -244,6 +250,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. */