From 03a5d691ee1028cc2a8bffcab5b3b07a9bfd6d20 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Thu, 11 Jun 2026 15:27:56 -0700
Subject: [PATCH] Add white glow behind hovered player's name

The hovered player (tile owner under the cursor, already tracked via
uHighlightOwnerID for cull bypass) now gets a soft white glow behind
their name. The glow is derived from the MSDF distance field: a white
band past the outline with quadratic falloff, composited behind the
glyph and clamped to the SDF margin so it never clips at quad edges.

Glow size and strength are tunable via hoverGlowWidth/hoverGlowAlpha
in render-settings.json, exposed as sliders in the graphics settings
modal (persisted as graphics overrides) and in the debug GUI.

Includes schema and apply tests for the new override fields,
covering the 0 edge case (0 disables the glow, not "unset").
---
 resources/lang/en.json                        |  4 +
 .../hud/layers/GraphicsSettingsModal.ts       | 84 +++++++++++++++++++
 src/client/render/gl/GraphicsOverrides.ts     |  2 +
 src/client/render/gl/RenderOverrides.ts       |  6 ++
 src/client/render/gl/RenderSettings.ts        |  4 +
 src/client/render/gl/debug/Layout.ts          |  2 +
 .../render/gl/passes/name-pass/TextProgram.ts | 12 +++
 src/client/render/gl/render-settings.json     |  4 +-
 .../render/gl/shaders/name/name.frag.glsl     | 39 +++++++--
 .../render/gl/shaders/name/name.vert.glsl     |  7 ++
 tests/GraphicsOverrides.test.ts               | 33 ++++++++
 11 files changed, 188 insertions(+), 9 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 46e49b848..664828bf9 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -944,6 +944,10 @@
     "name_cull_desc": "Hide names smaller than this size",
     "hover_fade_label": "Name opacity under cursor",
     "hover_fade_desc": "How visible names are while your cursor is over them (1 to disable fading)",
+    "hover_glow_width_label": "Hover glow size",
+    "hover_glow_width_desc": "How far the white glow extends behind the hovered player's name",
+    "hover_glow_alpha_label": "Hover glow strength",
+    "hover_glow_alpha_desc": "How bright the white glow behind the hovered player's name is (0 to disable)",
     "colored_names_label": "Name color",
     "colored_names_desc": "Show player names in their player color or in black",
     "colored": "Colored",
diff --git a/src/client/hud/layers/GraphicsSettingsModal.ts b/src/client/hud/layers/GraphicsSettingsModal.ts
index c5aff6ae9..b41842be6 100644
--- a/src/client/hud/layers/GraphicsSettingsModal.ts
+++ b/src/client/hud/layers/GraphicsSettingsModal.ts
@@ -24,6 +24,14 @@ const HOVER_FADE_MIN = 0;
 const HOVER_FADE_MAX = 1;
 const HOVER_FADE_STEP = 0.05;
 
+const HOVER_GLOW_WIDTH_MIN = 0;
+const HOVER_GLOW_WIDTH_MAX = 8;
+const HOVER_GLOW_WIDTH_STEP = 0.5;
+
+const HOVER_GLOW_ALPHA_MIN = 0;
+const HOVER_GLOW_ALPHA_MAX = 1;
+const HOVER_GLOW_ALPHA_STEP = 0.05;
+
 const HIGHLIGHT_FILL_MIN = 0;
 const HIGHLIGHT_FILL_MAX = 1;
 const HIGHLIGHT_FILL_STEP = 0.01;
@@ -159,6 +167,20 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
     );
   }
 
+  private currentHoverGlowWidth(): number {
+    return (
+      this.userSettings.graphicsOverrides().name?.hoverGlowWidth ??
+      renderDefaults.name.hoverGlowWidth
+    );
+  }
+
+  private currentHoverGlowAlpha(): number {
+    return (
+      this.userSettings.graphicsOverrides().name?.hoverGlowAlpha ??
+      renderDefaults.name.hoverGlowAlpha
+    );
+  }
+
   private patchName(patch: Partial<GraphicsOverrides["name"]>) {
     const current = this.userSettings.graphicsOverrides();
     this.userSettings.setGraphicsOverrides({
@@ -349,6 +371,16 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
     this.patchName({ hoverFadeAlpha: value });
   }
 
+  private onHoverGlowWidthChange(event: Event) {
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    this.patchName({ hoverGlowWidth: value });
+  }
+
+  private onHoverGlowAlphaChange(event: Event) {
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    this.patchName({ hoverGlowAlpha: value });
+  }
+
   private currentDarkNames(): boolean {
     return (
       this.userSettings.graphicsOverrides().name?.darkNames ??
@@ -371,6 +403,8 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
     const nameScale = this.currentNameScale();
     const nameCull = this.currentNameCull();
     const hoverFade = this.currentHoverFade();
+    const hoverGlowWidth = this.currentHoverGlowWidth();
+    const hoverGlowAlpha = this.currentHoverGlowAlpha();
     const namesColored = !this.currentDarkNames();
     const classicIcons = this.currentClassicIcons();
     const highlightFill = this.currentHighlightFill();
@@ -492,6 +526,56 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
               </div>
             </div>
 
+            <div
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+            >
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("graphics_setting.hover_glow_width_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("graphics_setting.hover_glow_width_desc")}
+                </div>
+                <input
+                  type="range"
+                  min=${HOVER_GLOW_WIDTH_MIN}
+                  max=${HOVER_GLOW_WIDTH_MAX}
+                  step=${HOVER_GLOW_WIDTH_STEP}
+                  .value=${String(hoverGlowWidth)}
+                  @input=${this.onHoverGlowWidthChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400 w-12 text-right">
+                ${hoverGlowWidth.toFixed(1)}
+              </div>
+            </div>
+
+            <div
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+            >
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("graphics_setting.hover_glow_alpha_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("graphics_setting.hover_glow_alpha_desc")}
+                </div>
+                <input
+                  type="range"
+                  min=${HOVER_GLOW_ALPHA_MIN}
+                  max=${HOVER_GLOW_ALPHA_MAX}
+                  step=${HOVER_GLOW_ALPHA_STEP}
+                  .value=${String(hoverGlowAlpha)}
+                  @input=${this.onHoverGlowAlphaChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400 w-12 text-right">
+                ${hoverGlowAlpha.toFixed(2)}
+              </div>
+            </div>
+
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click=${this.onToggleNamesColored}
diff --git a/src/client/render/gl/GraphicsOverrides.ts b/src/client/render/gl/GraphicsOverrides.ts
index 72ab17a78..1a34dd585 100644
--- a/src/client/render/gl/GraphicsOverrides.ts
+++ b/src/client/render/gl/GraphicsOverrides.ts
@@ -8,6 +8,8 @@ export const GraphicsOverridesSchema = z
         cullThreshold: z.number(),
         darkNames: z.boolean(),
         hoverFadeAlpha: z.number(),
+        hoverGlowWidth: z.number(),
+        hoverGlowAlpha: z.number(),
       })
       .partial(),
     structure: z
diff --git a/src/client/render/gl/RenderOverrides.ts b/src/client/render/gl/RenderOverrides.ts
index 5d718cb13..6c47f0c85 100644
--- a/src/client/render/gl/RenderOverrides.ts
+++ b/src/client/render/gl/RenderOverrides.ts
@@ -21,6 +21,12 @@ export function applyGraphicsOverrides(
   if (overrides.name?.hoverFadeAlpha !== undefined) {
     settings.name.hoverFadeAlpha = overrides.name.hoverFadeAlpha;
   }
+  if (overrides.name?.hoverGlowWidth !== undefined) {
+    settings.name.hoverGlowWidth = overrides.name.hoverGlowWidth;
+  }
+  if (overrides.name?.hoverGlowAlpha !== undefined) {
+    settings.name.hoverGlowAlpha = overrides.name.hoverGlowAlpha;
+  }
   if (overrides.structure?.classicIcons === true) {
     // Classic look: lighter player-colored shape behind a dark icon glyph,
     // with a touch of translucency.
diff --git a/src/client/render/gl/RenderSettings.ts b/src/client/render/gl/RenderSettings.ts
index 716029e51..ce89784a8 100644
--- a/src/client/render/gl/RenderSettings.ts
+++ b/src/client/render/gl/RenderSettings.ts
@@ -243,6 +243,10 @@ export interface RenderSettings {
     statusRowOffset: number;
     /** Alpha multiplier applied to a name while the cursor is over it. */
     hoverFadeAlpha: number;
+    /** White glow behind the hovered player's name: px past the outline. */
+    hoverGlowWidth: number;
+    /** Peak opacity of the hover glow (0 disables it). */
+    hoverGlowAlpha: number;
   };
   fx: {
     shockwaveRingWidth: number;
diff --git a/src/client/render/gl/debug/Layout.ts b/src/client/render/gl/debug/Layout.ts
index 131fc5893..e885f11fa 100644
--- a/src/client/render/gl/debug/Layout.ts
+++ b/src/client/render/gl/debug/Layout.ts
@@ -326,6 +326,8 @@ export function buildTree(s: RenderSettings, d: RenderSettings): DebugNode[] {
       slider(s.name, "emojiRowOffset", d.name, 0, 5, 0.1, "Emoji Row Offset"),
       slider(s.name, "statusRowOffset", d.name, 0, 5, 0.1, "Status Row Offset"),
       slider(s.name, "hoverFadeAlpha", d.name, 0, 1, 0.05, "Hover Fade Alpha"),
+      slider(s.name, "hoverGlowWidth", d.name, 0, 8, 0.25, "Hover Glow Width"),
+      slider(s.name, "hoverGlowAlpha", d.name, 0, 1, 0.05, "Hover Glow Alpha"),
     ]),
 
     folder("FX", [
diff --git a/src/client/render/gl/passes/name-pass/TextProgram.ts b/src/client/render/gl/passes/name-pass/TextProgram.ts
index 448a25cd1..66ff87ee1 100644
--- a/src/client/render/gl/passes/name-pass/TextProgram.ts
+++ b/src/client/render/gl/passes/name-pass/TextProgram.ts
@@ -49,6 +49,8 @@ export class TextProgram {
   private uOutlineColor: WebGLUniformLocation;
   private uOutlineUsePlayerColor: WebGLUniformLocation;
   private uFillUsePlayerColor: WebGLUniformLocation;
+  private uHoverGlowWidth: WebGLUniformLocation;
+  private uHoverGlowAlpha: WebGLUniformLocation;
 
   private distanceRange: number;
 
@@ -128,6 +130,14 @@ export class TextProgram {
       this.program,
       "uFillUsePlayerColor",
     )!;
+    this.uHoverGlowWidth = gl.getUniformLocation(
+      this.program,
+      "uHoverGlowWidth",
+    )!;
+    this.uHoverGlowAlpha = gl.getUniformLocation(
+      this.program,
+      "uHoverGlowAlpha",
+    )!;
 
     this.loadAtlas();
   }
@@ -188,6 +198,8 @@ export class TextProgram {
       ns.outlineUsePlayerColor ? 1.0 : 0.0,
     );
     gl.uniform1f(this.uFillUsePlayerColor, ns.fillUsePlayerColor ? 1.0 : 0.0);
+    gl.uniform1f(this.uHoverGlowWidth, ns.hoverGlowWidth);
+    gl.uniform1f(this.uHoverGlowAlpha, ns.hoverGlowAlpha);
 
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, this.atlasTex!);
diff --git a/src/client/render/gl/render-settings.json b/src/client/render/gl/render-settings.json
index c10473556..616fb9864 100644
--- a/src/client/render/gl/render-settings.json
+++ b/src/client/render/gl/render-settings.json
@@ -207,7 +207,9 @@
     "nameShadeBot": 0.4,
     "emojiRowOffset": 1.4,
     "statusRowOffset": 1.4,
-    "hoverFadeAlpha": 0.25
+    "hoverFadeAlpha": 0.5,
+    "hoverGlowWidth": 5,
+    "hoverGlowAlpha": 0.75
   },
   "fx": {
     "shockwaveRingWidth": 0.04,
diff --git a/src/client/render/gl/shaders/name/name.frag.glsl b/src/client/render/gl/shaders/name/name.frag.glsl
index 2b9727482..c1c14610b 100644
--- a/src/client/render/gl/shaders/name/name.frag.glsl
+++ b/src/client/render/gl/shaders/name/name.frag.glsl
@@ -8,10 +8,13 @@ uniform float uNightAmbient;
 uniform vec3  uOutlineColor;
 uniform float uOutlineUsePlayerColor;
 uniform float uFillUsePlayerColor;
+uniform float uHoverGlowWidth; // px the white hover glow extends past the outline
+uniform float uHoverGlowAlpha; // peak opacity of the hover glow
 
 in vec2 vUV;
 in vec4 vPlayerColor;   // player territory color (rgb) + alpha
 in float vNameShade;      // name fill grayscale shade (0.0 = black)
+flat in float vHighlight; // 1.0 when this player is hovered (white glow)
 out vec4 fragColor;
 
 float median(float r, float g, float b) {
@@ -42,20 +45,40 @@ void main() {
   float screenPxDist = screenPxRange * (sd - 0.5);
   float fillAlpha = clamp(screenPxDist + 0.5, 0.0, 1.0);
 
-  if (uOutlineWidth > 0.0) {
-    // The SDF saturates at sd=0 (screenPxDist = -screenPxRange*0.5).
-    // Reserve a 1px margin so saturated fragments always get alpha=0.
-    float maxOutline = max(screenPxRange * 0.5 - 1.0, 0.0);
-    float effectiveOutline = min(uOutlineWidth, maxOutline);
+  // The SDF saturates at sd=0 (screenPxDist = -screenPxRange*0.5).
+  // Reserve a 1px margin so saturated fragments always get alpha=0.
+  float maxOutline = max(screenPxRange * 0.5 - 1.0, 0.0);
+  float effectiveOutline = min(uOutlineWidth, maxOutline);
 
+  vec3 color;
+  float coverage;
+  if (uOutlineWidth > 0.0) {
     float outlineDist = screenPxDist + effectiveOutline;
     float outlineAlpha = clamp(outlineDist + 0.5, 0.0, 1.0);
 
     vec3 nightOutlineColor = mix(vec3(0.0), uOutlineColor, borderT);
     vec3 borderColor = mix(nightOutlineColor, vPlayerColor.rgb, uOutlineUsePlayerColor);
-    vec3 color = mix(borderColor, fillColor, fillAlpha);
-    fragColor = vec4(color, vPlayerColor.a * outlineAlpha);
+    color = mix(borderColor, fillColor, fillAlpha);
+    coverage = outlineAlpha;
   } else {
-    fragColor = vec4(fillColor, vPlayerColor.a * fillAlpha);
+    color = fillColor;
+    coverage = fillAlpha;
   }
+
+  // Soft white glow behind the hovered player's name. Width is clamped to
+  // the SDF margin past the outline so it never hard-clips at the quad edge.
+  if (vHighlight > 0.5 && uHoverGlowAlpha > 0.0) {
+    float glowWidth = min(uHoverGlowWidth, max(maxOutline - effectiveOutline, 0.0));
+    if (glowWidth > 0.0) {
+      float g = clamp(1.0 + (screenPxDist + effectiveOutline) / glowWidth, 0.0, 1.0);
+      float glowAlpha = g * g * uHoverGlowAlpha;
+      float total = coverage + glowAlpha * (1.0 - coverage);
+      if (total > 0.0) {
+        color = mix(vec3(1.0), color, coverage / total);
+        coverage = total;
+      }
+    }
+  }
+
+  fragColor = vec4(color, vPlayerColor.a * coverage);
 }
diff --git a/src/client/render/gl/shaders/name/name.vert.glsl b/src/client/render/gl/shaders/name/name.vert.glsl
index c9f6021b5..de3322d65 100644
--- a/src/client/render/gl/shaders/name/name.vert.glsl
+++ b/src/client/render/gl/shaders/name/name.vert.glsl
@@ -34,6 +34,7 @@ uniform float uHoverFadeAlpha; // alpha multiplier applied to that player's name
 out vec2 vUV;
 out vec4 vPlayerColor;  // player territory color (rgb) + alpha
 out float vNameShade;     // name fill grayscale shade (0.0 = black)
+flat out float vHighlight; // 1.0 when this player is hovered (white glow)
 
 void main() {
   // 1. Decode instance ID → playerIdx, lineIdx, charPos
@@ -57,6 +58,7 @@ void main() {
     vUV = vec2(0.0);
     vPlayerColor = vec4(0.0);
     vNameShade = 0.0;
+    vHighlight = 0.0;
     return;
   }
 
@@ -67,6 +69,7 @@ void main() {
     vUV = vec2(0.0);
     vPlayerColor = vec4(0.0);
     vNameShade = 0.0;
+    vHighlight = 0.0;
     return;
   }
 
@@ -78,6 +81,7 @@ void main() {
     vUV = vec2(0.0);
     vPlayerColor = vec4(0.0);
     vNameShade = 0.0;
+    vHighlight = 0.0;
     return;
   }
 
@@ -112,6 +116,7 @@ void main() {
     vUV = vec2(0.0);
     vPlayerColor = vec4(0.0);
     vNameShade = 0.0;
+    vHighlight = 0.0;
     return;
   }
 
@@ -136,6 +141,7 @@ void main() {
     vUV = vec2(0.0);
     vPlayerColor = vec4(0.0);
     vNameShade = 0.0;
+    vHighlight = 0.0;
     return;
   }
 
@@ -166,4 +172,5 @@ void main() {
   vUV = vec2(mix(u0, u1, aPos.x), mix(v0, v1, aPos.y));
   vPlayerColor = vec4(pd2.rgb, pd2.a * hoverAlpha); // player territory color + alpha
   vNameShade = pd3.z;         // name fill grayscale shade (0.0 = black)
+  vHighlight = isHighlighted ? 1.0 : 0.0;
 }
diff --git a/tests/GraphicsOverrides.test.ts b/tests/GraphicsOverrides.test.ts
index a92ea9b0a..9bcd442b6 100644
--- a/tests/GraphicsOverrides.test.ts
+++ b/tests/GraphicsOverrides.test.ts
@@ -23,7 +23,10 @@ describe("GraphicsOverridesSchema", () => {
       { name: { nameScaleFactor: 0.8 } },
       { name: { cullThreshold: 0.02 } },
       { name: { darkNames: true } },
+      { name: { hoverGlowWidth: 5 } },
+      { name: { hoverGlowAlpha: 0.6 } },
       { name: { nameScaleFactor: 1.2, cullThreshold: 0, darkNames: false } },
+      { name: { hoverGlowWidth: 0, hoverGlowAlpha: 0 } },
     ];
     for (const c of cases) {
       expect(GraphicsOverridesSchema.safeParse(c).success).toBe(true);
@@ -74,6 +77,14 @@ describe("GraphicsOverridesSchema", () => {
     expect(
       GraphicsOverridesSchema.safeParse({ name: { darkNames: "yes" } }).success,
     ).toBe(false);
+    expect(
+      GraphicsOverridesSchema.safeParse({ name: { hoverGlowWidth: "wide" } })
+        .success,
+    ).toBe(false);
+    expect(
+      GraphicsOverridesSchema.safeParse({ name: { hoverGlowAlpha: true } })
+        .success,
+    ).toBe(false);
     expect(
       GraphicsOverridesSchema.safeParse({
         structure: { classicIcons: "yes" },
@@ -132,6 +143,28 @@ describe("applyGraphicsOverrides", () => {
     expect(gen({ name: { cullThreshold: 0 } }).name.cullThreshold).toBe(0);
   });
 
+  test("applies hoverGlowWidth override (including 0)", () => {
+    expect(gen({ name: { hoverGlowWidth: 6 } }).name.hoverGlowWidth).toBe(6);
+    expect(gen({ name: { hoverGlowWidth: 0 } }).name.hoverGlowWidth).toBe(0);
+  });
+
+  test("applies hoverGlowAlpha override (including 0)", () => {
+    expect(gen({ name: { hoverGlowAlpha: 0.9 } }).name.hoverGlowAlpha).toBe(
+      0.9,
+    );
+    expect(gen({ name: { hoverGlowAlpha: 0 } }).name.hoverGlowAlpha).toBe(0);
+  });
+
+  test("hover glow overrides leave other name fields at defaults", () => {
+    const defaults = createRenderSettings().name;
+    const s = gen({
+      name: { hoverGlowWidth: 7, hoverGlowAlpha: 0.1 },
+    }).name;
+    expect(s.hoverFadeAlpha).toBe(defaults.hoverFadeAlpha);
+    expect(s.nameScaleFactor).toBe(defaults.nameScaleFactor);
+    expect(s.cullThreshold).toBe(defaults.cullThreshold);
+  });
+
   test("darkNames=true → black fill + player-colored outline + outline RGB 0", () => {
     const s = gen({ name: { darkNames: true } }).name;
     expect(s.fillUsePlayerColor).toBe(false);