Show matching renderer debug panel

src/client/graphics/layers/WebGLTerritoryBackend.ts

@@ -5,7 +5,11 @@ import { ColoredTeams, PlayerType, Team } from "../../../core/game/Game";
 import { euclDistFN, TileRef } from "../../../core/game/GameMap";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView, PlayerView } from "../../../core/game/GameView";
-import { UserSettings } from "../../../core/game/UserSettings";
+import {
+  USER_SETTINGS_CHANGED_EVENT,
+  UserSettings,
+  WEBGL_DEBUG_KEY,
+} from "../../../core/game/UserSettings";
 import {
   AlternateViewEvent,
   ContextMenuEvent,
@@ -25,7 +29,6 @@ const ENABLE_CONTEST_TRACKING = false;
 const CONTEST_STRENGTH_EMA_ALPHA = 0.8;
 const CONTEST_STRENGTH_MIN = 0.01;
 const CONTEST_STRENGTH_MAX = 0.95;
-const DEBUG_TERRITORY_OVERLAY = false;
 
 type ContestComponent = {
   id: number;
@@ -104,6 +107,7 @@ export class WebGLTerritoryBackend implements TerritoryBackend {
     event.preventDefault();
     this.failureReason = "WebGL context lost.";
   };
+  private readonly debugSettingChanged = () => this.syncSmoothingDebugUi();
 
   constructor(
     private game: GameView,
@@ -409,8 +413,12 @@ export class WebGLTerritoryBackend implements TerritoryBackend {
         this.hoverHighlightOptions(),
       );
     });
+    globalThis.addEventListener?.(
+      `${USER_SETTINGS_CHANGED_EVENT}:${WEBGL_DEBUG_KEY}`,
+      this.debugSettingChanged,
+    );
     this.redraw();
-    this.ensureSmoothingDebugUi();
+    this.syncSmoothingDebugUi();
   }
 
   getFailureReason(): string | null {
@@ -418,6 +426,10 @@ export class WebGLTerritoryBackend implements TerritoryBackend {
   }
 
   dispose() {
+    globalThis.removeEventListener?.(
+      `${USER_SETTINGS_CHANGED_EVENT}:${WEBGL_DEBUG_KEY}`,
+      this.debugSettingChanged,
+    );
     this.smoothingDebugUi?.remove();
     this.smoothingDebugUi = null;
     this.territoryRenderer?.canvas.removeEventListener(
@@ -428,8 +440,17 @@ export class WebGLTerritoryBackend implements TerritoryBackend {
     this.territoryRenderer = null;
   }
 
+  private syncSmoothingDebugUi() {
+    if (!this.userSettings.webglDebug()) {
+      this.smoothingDebugUi?.remove();
+      this.smoothingDebugUi = null;
+      return;
+    }
+    this.ensureSmoothingDebugUi();
+  }
+
   private ensureSmoothingDebugUi() {
-    if (!DEBUG_TERRITORY_OVERLAY) return;
+    if (!this.userSettings.webglDebug()) return;
     if (this.smoothingDebugUi) return;
 
     const root = document.createElement("div");
@@ -1001,7 +1022,7 @@ export class WebGLTerritoryBackend implements TerritoryBackend {
       );
     }
 
-    if (DEBUG_TERRITORY_OVERLAY) {
+    if (this.userSettings.webglDebug()) {
       const overlayStart = FrameProfiler.start();
       this.drawDebugOverlay(context);
       FrameProfiler.end("TerritoryLayer:debugOverlay", overlayStart);

src/client/graphics/layers/WebGPUDebugOverlay.ts

@@ -2,7 +2,11 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 import { EventBus } from "../../../core/EventBus";
-import { UserSettings } from "../../../core/game/UserSettings";
+import {
+  USER_SETTINGS_CHANGED_EVENT,
+  UserSettings,
+  WEBGPU_DEBUG_KEY,
+} from "../../../core/game/UserSettings";
 import { WebGPUComputeMetricsEvent } from "../../InputHandler";
 import {
   TERRAIN_SHADER_KEY,
@@ -177,6 +181,10 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
 
   init() {
     this.restorePosition();
+    globalThis.addEventListener?.(
+      `${USER_SETTINGS_CHANGED_EVENT}:${WEBGPU_DEBUG_KEY}`,
+      this.handleDebugSettingChanged,
+    );
     this.eventBus.on(WebGPUComputeMetricsEvent, (e) => {
       if (typeof e.computeMs === "number" && Number.isFinite(e.computeMs)) {
         this.tickComputeMs = e.computeMs;
@@ -189,8 +197,16 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.endDrag();
+    globalThis.removeEventListener?.(
+      `${USER_SETTINGS_CHANGED_EVENT}:${WEBGPU_DEBUG_KEY}`,
+      this.handleDebugSettingChanged,
+    );
   }
 
+  private readonly handleDebugSettingChanged = () => {
+    this.requestUpdate();
+  };
+
   updateFrameMetrics(frameDurationMs: number): void {
     if (!this.userSettings || !this.userSettings.webgpuDebug()) {
       return;

src/core/game/UserSettings.ts

@@ -48,6 +48,8 @@ export const DARK_MODE_KEY = "settings.darkMode";
 export const PERFORMANCE_OVERLAY_KEY = "settings.performanceOverlay";
 export const KEYBINDS_KEY = "settings.keybinds";
 export const TERRITORY_RENDERER_KEY = "settings.territoryRenderer";
+export const WEBGL_DEBUG_KEY = "settings.webglDebug";
+export const WEBGPU_DEBUG_KEY = "settings.webgpuDebug";
 export type TerritoryRendererPreference =
   | "auto"
   | "classic"
@@ -160,7 +162,19 @@ export class UserSettings {
   }
 
   webgpuDebug(): boolean {
-    return this.get("settings.webgpuDebug", false);
+    return this.get(WEBGPU_DEBUG_KEY, false);
+  }
+
+  webglDebug(): boolean {
+    return this.get(WEBGL_DEBUG_KEY, false);
+  }
+
+  setWebgpuDebug(value: boolean): void {
+    this.set(WEBGPU_DEBUG_KEY, value);
+  }
+
+  setWebglDebug(value: boolean): void {
+    this.set(WEBGL_DEBUG_KEY, value);
   }
 
   alertFrame() {
@@ -221,6 +235,8 @@ export class UserSettings {
       value === "classic" || value === "webgl" || value === "webgpu"
         ? value
         : "auto";
+    this.setWebglDebug(renderer === "webgl");
+    this.setWebgpuDebug(renderer === "webgpu");
     this.setString(TERRITORY_RENDERER_KEY, renderer);
   }
 
@@ -254,7 +270,7 @@ export class UserSettings {
   }
 
   toggleWebgpuDebug() {
-    this.set("settings.webgpuDebug", !this.webgpuDebug());
+    this.setWebgpuDebug(!this.webgpuDebug());
   }
 
   toggleAlertFrame() {