Add Graphics Settings modal with live name-label tuning

index.html

@@ -341,6 +341,7 @@
       <replay-panel></replay-panel>
     </div>
     <settings-modal></settings-modal>
+    <graphics-settings-modal></graphics-settings-modal>
     <player-panel></player-panel>
     <spawn-timer></spawn-timer>
     <immunity-timer></immunity-timer>

resources/lang/en.json

@@ -827,6 +827,8 @@
     "render_debug_gui": "Render Debug GUI",
     "render_debug_gui_desc": "Toggle the renderer tuning panel",
     "development_only": "Development Only",
+    "graphics_settings_label": "Graphics Settings",
+    "graphics_settings_desc": "Adjust how the map looks",
     "easter_writing_speed_label": "Writing Speed Multiplier",
     "easter_writing_speed_desc": "Adjust how fast you pretend to code (x1–x100)",
     "easter_bug_count_label": "Bug Count",
@@ -915,6 +917,15 @@
     "sound_effects_volume": "Sound Effects Volume",
     "keybind_conflict_error": "The key {key} is already bound to another action."
   },
+  "graphics_setting": {
+    "title": "Graphics Settings",
+    "section_name_labels": "Name Labels",
+    "name_scale_label": "Name Scale",
+    "name_cull_label": "Minimum name size",
+    "name_cull_desc": "Hide names smaller than this size",
+    "reset_label": "Reset to defaults",
+    "reset_desc": "Clear all graphics overrides"
+  },
   "chat": {
     "title": "Quick Chat",
     "to": "Sent {user}: {msg}",

src/client/ClientGameRunner.ts

@@ -31,6 +31,7 @@ import { GameView, PlayerView } from "../core/game/GameView";
 import { loadTerrainMap, TerrainMapData } from "../core/game/TerrainMapLoader";
 import {
   DARK_MODE_KEY,
+  GRAPHICS_KEY,
   USER_SETTINGS_CHANGED_EVENT,
   UserSettings,
 } from "../core/game/UserSettings";
@@ -67,7 +68,11 @@ import {
 import { createCanvas } from "./Utils";
 import { WebGLFrameBuilder } from "./WebGLFrameBuilder";
 import { createRenderer, GameRenderer } from "./hud/GameRenderer";
-import { createDebugGui, GameView as WebGLGameView } from "./render/gl";
+import {
+  createDebugGui,
+  generateRenderSettings,
+  GameView as WebGLGameView,
+} from "./render/gl";
 import { ALL_UNIT_TYPES, UnitState } from "./render/types";
 import { SoundManager } from "./sound/SoundManager";
 
@@ -479,6 +484,21 @@ async function createClientGame(
       (e) => view.setShowPatterns((e as CustomEvent<string>).detail === "true"),
     );
 
+    const graphicsListenerAbort = new AbortController();
+    const applyGraphicsOverrides = (): void => {
+      const generated = generateRenderSettings(
+        userSettings.graphicsOverrides(),
+      );
+      const live = view.getSettings();
+      Object.assign(live.name, generated.name);
+    };
+    applyGraphicsOverrides();
+    globalThis.addEventListener(
+      `${USER_SETTINGS_CHANGED_EVENT}:${GRAPHICS_KEY}`,
+      applyGraphicsOverrides,
+      { signal: graphicsListenerAbort.signal },
+    );
+
     let debugGui: ReturnType<typeof createDebugGui> | null = null;
     eventBus.on(ToggleRenderDebugGuiEvent, () => {
       if (debugGui === null) {
@@ -524,6 +544,7 @@ async function createClientGame(
       soundManager,
       userSettings,
       webglBuilder,
+      graphicsListenerAbort,
     );
   } catch (err) {
     soundManager.dispose();
@@ -557,6 +578,7 @@ export class ClientGameRunner {
     private soundManager: SoundManager,
     private userSettings: UserSettings,
     private webglBuilder: WebGLFrameBuilder | null = null,
+    private graphicsListenerAbort: AbortController | null = null,
   ) {
     this.lastMessageTime = Date.now();
   }
@@ -813,6 +835,7 @@ export class ClientGameRunner {
 
   public stop() {
     this.soundManager.dispose();
+    this.graphicsListenerAbort?.abort();
     if (!this.isActive) return;
 
     this.isActive = false;

src/client/hud/GameRenderer.ts

@@ -24,6 +24,7 @@ import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
 import { GameLeftSidebar } from "./layers/GameLeftSidebar";
 import { GameRightSidebar } from "./layers/GameRightSidebar";
+import { GraphicsSettingsModal } from "./layers/GraphicsSettingsModal";
 import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { ImmunityTimer } from "./layers/ImmunityTimer";
 import { InGamePromo } from "./layers/InGamePromo";
@@ -190,6 +191,15 @@ export function createRenderer(
   settingsModal.userSettings = userSettings;
   settingsModal.eventBus = eventBus;
 
+  const graphicsSettingsModal = document.querySelector(
+    "graphics-settings-modal",
+  ) as GraphicsSettingsModal;
+  if (!(graphicsSettingsModal instanceof GraphicsSettingsModal)) {
+    console.error("graphics settings modal not found");
+  }
+  graphicsSettingsModal.userSettings = userSettings;
+  graphicsSettingsModal.eventBus = eventBus;
+
   const unitDisplay = document.querySelector("unit-display") as UnitDisplay;
   if (!(unitDisplay instanceof UnitDisplay)) {
     console.error("unit display not found");
@@ -309,6 +319,7 @@ export function createRenderer(
     winModal,
     replayPanel,
     settingsModal,
+    graphicsSettingsModal,
     teamStats,
     playerPanel,
     headsUpMessage,

src/client/hud/layers/GraphicsSettingsModal.ts

@@ -0,0 +1,256 @@
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { crazyGamesSDK } from "src/client/CrazyGamesSDK";
+import { PauseGameIntentEvent } from "src/client/Transport";
+import { assetUrl } from "../../../core/AssetUrls";
+import { EventBus } from "../../../core/EventBus";
+import { UserSettings } from "../../../core/game/UserSettings";
+import { Controller } from "../../Controller";
+import { translateText } from "../../Utils";
+import type { GraphicsOverrides } from "../../render/gl";
+import renderDefaults from "../../render/gl/render-settings.json";
+
+const settingsIcon = assetUrl("images/SettingIconWhite.svg");
+
+const NAME_SCALE_MIN = 0.2;
+const NAME_SCALE_MAX = 1.5;
+const NAME_SCALE_STEP = 0.05;
+
+const NAME_CULL_MIN = 0;
+const NAME_CULL_MAX = 0.05;
+const NAME_CULL_STEP = 0.001;
+
+export class ShowGraphicsSettingsModalEvent {
+  constructor(
+    public readonly isVisible: boolean = true,
+    public readonly shouldPause: boolean = false,
+    public readonly isPaused: boolean = false,
+  ) {}
+}
+
+@customElement("graphics-settings-modal")
+export class GraphicsSettingsModal extends LitElement implements Controller {
+  public eventBus: EventBus;
+  public userSettings: UserSettings;
+
+  @state()
+  private isVisible: boolean = false;
+
+  @query(".modal-overlay")
+  private modalOverlay!: HTMLElement;
+
+  @property({ type: Boolean })
+  shouldPause = false;
+
+  @property({ type: Boolean })
+  wasPausedWhenOpened = false;
+
+  init() {
+    this.eventBus.on(ShowGraphicsSettingsModalEvent, (event) => {
+      this.isVisible = event.isVisible;
+      this.shouldPause = event.shouldPause;
+      this.wasPausedWhenOpened = event.isPaused;
+      this.pauseGame(true);
+      this.requestUpdate();
+    });
+  }
+
+  private pauseGame(pause: boolean) {
+    if (this.shouldPause && !this.wasPausedWhenOpened) {
+      if (pause) {
+        crazyGamesSDK.gameplayStop();
+      } else {
+        crazyGamesSDK.gameplayStart();
+      }
+      this.eventBus.emit(new PauseGameIntentEvent(pause));
+    }
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleOutsideClick, true);
+    window.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("click", this.handleOutsideClick, true);
+    window.removeEventListener("keydown", this.handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  private handleOutsideClick = (event: MouseEvent) => {
+    if (
+      this.isVisible &&
+      this.modalOverlay &&
+      event.target === this.modalOverlay
+    ) {
+      this.closeModal();
+    }
+  };
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (this.isVisible && event.key === "Escape") {
+      this.closeModal();
+    }
+  };
+
+  public closeModal() {
+    this.isVisible = false;
+    this.requestUpdate();
+    this.pauseGame(false);
+  }
+
+  private currentNameScale(): number {
+    return (
+      this.userSettings.graphicsOverrides().name?.nameScaleFactor ??
+      renderDefaults.name.nameScaleFactor
+    );
+  }
+
+  private currentNameCull(): number {
+    return (
+      this.userSettings.graphicsOverrides().name?.cullThreshold ??
+      renderDefaults.name.cullThreshold
+    );
+  }
+
+  private patchName(patch: Partial<GraphicsOverrides["name"]>) {
+    const current = this.userSettings.graphicsOverrides();
+    this.userSettings.setGraphicsOverrides({
+      ...current,
+      name: { ...current.name, ...patch },
+    });
+    this.requestUpdate();
+  }
+
+  private onNameScaleChange(event: Event) {
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    this.patchName({ nameScaleFactor: value });
+  }
+
+  private onNameCullChange(event: Event) {
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    this.patchName({ cullThreshold: value });
+  }
+
+  private onResetClick() {
+    this.userSettings.setGraphicsOverrides({});
+    this.requestUpdate();
+  }
+
+  render() {
+    if (!this.isVisible) return null;
+
+    const nameScale = this.currentNameScale();
+    const nameCull = this.currentNameCull();
+
+    return html`
+      <div
+        class="modal-overlay fixed inset-0 bg-black/60 backdrop-blur-xs z-2000 flex items-center justify-center p-4"
+        @contextmenu=${(e: Event) => e.preventDefault()}
+      >
+        <div
+          class="bg-slate-800 border border-slate-600 rounded-lg max-w-md w-full max-h-[80vh] overflow-y-auto"
+        >
+          <div
+            class="flex items-center justify-between p-4 border-b border-slate-600"
+          >
+            <div class="flex items-center gap-2">
+              <img
+                src=${settingsIcon}
+                alt="graphicsSettings"
+                width="24"
+                height="24"
+                class="align-middle"
+              />
+              <h2 class="text-xl font-semibold text-white">
+                ${translateText("graphics_setting.title")}
+              </h2>
+            </div>
+            <button
+              class="text-slate-400 hover:text-white text-2xl font-bold leading-none"
+              @click=${this.closeModal}
+            >
+              ×
+            </button>
+          </div>
+
+          <div class="p-4 flex flex-col gap-3">
+            <div
+              class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wider"
+            >
+              ${translateText("graphics_setting.section_name_labels")}
+            </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.name_scale_label")}
+                </div>
+                <input
+                  type="range"
+                  min=${NAME_SCALE_MIN}
+                  max=${NAME_SCALE_MAX}
+                  step=${NAME_SCALE_STEP}
+                  .value=${String(nameScale)}
+                  @input=${this.onNameScaleChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400 w-12 text-right">
+                ${nameScale.toFixed(2)}
+              </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.name_cull_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("graphics_setting.name_cull_desc")}
+                </div>
+                <input
+                  type="range"
+                  min=${NAME_CULL_MIN}
+                  max=${NAME_CULL_MAX}
+                  step=${NAME_CULL_STEP}
+                  .value=${String(nameCull)}
+                  @input=${this.onNameCullChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400 w-12 text-right">
+                ${nameCull.toFixed(3)}
+              </div>
+            </div>
+
+            <div class="border-t border-slate-600 pt-3 mt-4">
+              <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.onResetClick}
+              >
+                <div class="flex-1">
+                  <div class="font-medium">
+                    ${translateText("graphics_setting.reset_label")}
+                  </div>
+                  <div class="text-sm text-slate-400">
+                    ${translateText("graphics_setting.reset_desc")}
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}