nothing to see, test

index.html

@@ -274,6 +274,7 @@
     <multi-tab-modal></multi-tab-modal>
     <game-left-sidebar></game-left-sidebar>
     <performance-overlay></performance-overlay>
+    <webgpu-debug-overlay></webgpu-debug-overlay>
     <player-info-overlay></player-info-overlay>
     <leader-board></leader-board>
     <team-stats></team-stats>

resources/lang/en.json

@@ -526,6 +526,8 @@
     "attack_ratio_desc": "What percentage of your troops to send in an attack (1–100%)",
     "territory_patterns_label": "🏳️ Territory Skins",
     "territory_patterns_desc": "Choose whether to display territory skin designs in game",
+    "territory_border_mode_label": "Territory Borders",
+    "territory_border_mode_desc": "Select border rendering style (visual only)",
     "performance_overlay_label": "Performance Overlay",
     "performance_overlay_desc": "Toggle the performance overlay. When enabled, the performance overlay will be displayed. Press shift-D during game to toggle.",
     "easter_writing_speed_label": "Writing Speed Multiplier",

src/client/ClientGameRunner.ts

@@ -9,6 +9,7 @@ import {
   PlayerCosmeticRefs,
   PlayerRecord,
   ServerMessage,
+  Turn,
 } from "../core/Schemas";
 import { createPartialGameRecord, replacer } from "../core/Util";
 import { ServerConfig } from "../core/configuration/Config";
@@ -35,7 +36,9 @@ import {
   InputHandler,
   MouseMoveEvent,
   MouseUpEvent,
+  SetWorkerDebugEvent,
   TickMetricsEvent,
+  WorkerMetricsEvent,
 } from "./InputHandler";
 import { endGame, startGame, startTime } from "./LocalPersistantStats";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
@@ -226,6 +229,12 @@ async function createClientGame(
     lobbyConfig.clientID,
   );
   await worker.initialize();
+  worker.onWorkerMetrics((metrics) => {
+    eventBus.emit(new WorkerMetricsEvent(metrics));
+  });
+  eventBus.on(SetWorkerDebugEvent, (event: SetWorkerDebugEvent) => {
+    worker.setWorkerDebug(event.config);
+  });
   const gameView = new GameView(
     worker,
     config,
@@ -386,15 +395,6 @@ export class ClientGameRunner {
       }
     });
 
-    const worker = this.worker;
-    const keepWorkerAlive = () => {
-      if (this.isActive) {
-        worker.sendHeartbeat();
-        requestAnimationFrame(keepWorkerAlive);
-      }
-    };
-    requestAnimationFrame(keepWorkerAlive);
-
     const onconnect = () => {
       console.log("Connected to game server!");
       this.transport.rejoinGame(this.turnsSeen);
@@ -436,20 +436,43 @@ export class ClientGameRunner {
           goToPlayer();
         }
 
-        for (const turn of message.turns) {
+        const normalizeTurn = (turn: Turn): Turn =>
+          this.gameView.config().isReplay()
+            ? {
+                ...turn,
+                intents: turn.intents.filter((i) => i.type !== "toggle_pause"),
+              }
+            : turn;
+
+        // Firefox in particular suffers from a storm of thousands of tiny
+        // postMessage() calls on reconnect. Batch turns to keep the worker
+        // event loop responsive for render_frame and sim scheduling.
+        const batchSize = 256;
+        let batch: Turn[] = [];
+        const flush = () => {
+          if (batch.length === 0) return;
+          this.worker.sendTurnBatch(batch);
+          batch = [];
+        };
+
+        for (const rawTurn of message.turns as Turn[]) {
+          const turn = normalizeTurn(rawTurn);
           if (turn.turnNumber < this.turnsSeen) {
             continue;
           }
           while (turn.turnNumber - 1 > this.turnsSeen) {
-            this.worker.sendTurn({
+            batch.push({
               turnNumber: this.turnsSeen,
               intents: [],
             });
             this.turnsSeen++;
+            if (batch.length >= batchSize) flush();
           }
-          this.worker.sendTurn(turn);
+          batch.push(turn);
           this.turnsSeen++;
+          if (batch.length >= batchSize) flush();
         }
+        flush();
       }
       if (message.type === "desync") {
         if (this.lobby.gameStartInfo === undefined) {
@@ -543,11 +566,19 @@ export class ClientGameRunner {
     const tile = this.gameView.ref(cell.x, cell.y);
     if (
       this.gameView.isLand(tile) &&
-      !this.gameView.hasOwner(tile) &&
       this.gameView.inSpawnPhase() &&
       !this.gameView.config().isRandomSpawn()
     ) {
-      this.eventBus.emit(new SendSpawnIntentEvent(tile));
+      // Main thread no longer maintains authoritative tile ownership. Query the
+      // worker for spawn validation.
+      this.worker
+        .tileContext(tile)
+        .then((ctx) => {
+          if (!ctx.hasOwner) {
+            this.eventBus.emit(new SendSpawnIntentEvent(tile));
+          }
+        })
+        .catch((err) => console.warn("tileContext spawn lookup failed:", err));
       return;
     }
     if (this.gameView.inSpawnPhase()) {
@@ -561,12 +592,22 @@ export class ClientGameRunner {
     this.myPlayer.actions(tile).then((actions) => {
       if (this.myPlayer === null) return;
       if (actions.canAttack) {
-        this.eventBus.emit(
-          new SendAttackIntentEvent(
-            this.gameView.owner(tile).id(),
-            this.myPlayer.troops() * this.renderer.uiState.attackRatio,
-          ),
-        );
+        this.worker
+          .tileContext(tile)
+          .then((ctx) => {
+            if (!this.myPlayer) {
+              return;
+            }
+            this.eventBus.emit(
+              new SendAttackIntentEvent(
+                ctx.ownerId ?? null,
+                this.myPlayer.troops() * this.renderer.uiState.attackRatio,
+              ),
+            );
+          })
+          .catch((err) =>
+            console.warn("tileContext attack lookup failed:", err),
+          );
       } else if (this.canAutoBoat(actions, tile)) {
         this.sendBoatAttackIntent(tile);
       }
@@ -677,12 +718,22 @@ export class ClientGameRunner {
     this.myPlayer.actions(tile).then((actions) => {
       if (this.myPlayer === null) return;
       if (actions.canAttack) {
-        this.eventBus.emit(
-          new SendAttackIntentEvent(
-            this.gameView.owner(tile).id(),
-            this.myPlayer.troops() * this.renderer.uiState.attackRatio,
-          ),
-        );
+        this.worker
+          .tileContext(tile)
+          .then((ctx) => {
+            if (!this.myPlayer) {
+              return;
+            }
+            this.eventBus.emit(
+              new SendAttackIntentEvent(
+                ctx.ownerId ?? null,
+                this.myPlayer.troops() * this.renderer.uiState.attackRatio,
+              ),
+            );
+          })
+          .catch((err) =>
+            console.warn("tileContext attack lookup failed:", err),
+          );
       }
     });
   }

src/client/InputHandler.ts

@@ -2,6 +2,7 @@ import { EventBus, GameEvent } from "../core/EventBus";
 import { UnitType } from "../core/game/Game";
 import { UnitView } from "../core/game/GameView";
 import { UserSettings } from "../core/game/UserSettings";
+import type { WorkerMetricsMessage } from "../core/worker/WorkerMessages";
 import { UIState } from "./graphics/UIState";
 import { ReplaySpeedMultiplier } from "./utilities/ReplaySpeedMultiplier";
 
@@ -81,6 +82,20 @@ export class RefreshGraphicsEvent implements GameEvent {}
 
 export class TogglePerformanceOverlayEvent implements GameEvent {}
 
+export class SetWorkerDebugEvent implements GameEvent {
+  constructor(
+    public readonly config: {
+      enabled: boolean;
+      intervalMs?: number;
+      includeTrace?: boolean;
+    },
+  ) {}
+}
+
+export class WorkerMetricsEvent implements GameEvent {
+  constructor(public readonly metrics: WorkerMetricsMessage) {}
+}
+
 export class ToggleStructureEvent implements GameEvent {
   constructor(public readonly structureTypes: UnitType[] | null) {}
 }
@@ -136,6 +151,10 @@ export class TickMetricsEvent implements GameEvent {
   ) {}
 }
 
+export class WebGPUComputeMetricsEvent implements GameEvent {
+  constructor(public readonly computeMs: number) {}
+}
+
 export class InputHandler {
   private lastPointerX: number = 0;
   private lastPointerY: number = 0;

src/client/UserSettingModal.ts

@@ -5,6 +5,7 @@ import { UserSettings } from "../core/game/UserSettings";
 import "./components/baseComponents/setting/SettingKeybind";
 import { SettingKeybind } from "./components/baseComponents/setting/SettingKeybind";
 import "./components/baseComponents/setting/SettingNumber";
+import "./components/baseComponents/setting/SettingSelect";
 import "./components/baseComponents/setting/SettingSlider";
 import "./components/baseComponents/setting/SettingToggle";
 import { BaseModal } from "./components/BaseModal";

src/client/components/baseComponents/setting/SettingSelect.ts

@@ -0,0 +1,62 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type SettingSelectOption = { value: string; label: string };
+
+@customElement("setting-select")
+export class SettingSelect extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property() id = "";
+  @property() value = "";
+  @property({ attribute: false }) options: SettingSelectOption[] = [];
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    this.value = select.value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    const rainbowClass = this.easter
+      ? "bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)] bg-[length:1400%_1400%] animate-rainbow-bg text-white hover:bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)]"
+      : "";
+
+    return html`
+      <div
+        class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4 ${rainbowClass}"
+      >
+        <div class="flex flex-col flex-1 min-w-0 mr-4">
+          <div class="text-white font-bold text-base block mb-1">
+            ${this.label}
+          </div>
+          <div class="text-white/50 text-sm leading-snug">
+            ${this.description}
+          </div>
+        </div>
+
+        <select
+          id=${this.id}
+          class="shrink-0 bg-black/60 border border-white/10 text-white/90 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600"
+          .value=${this.value}
+          @change=${this.handleChange}
+        >
+          ${this.options.map(
+            (o) => html`<option value=${o.value}>${o.label}</option>`,
+          )}
+        </select>
+      </div>
+    `;
+  }
+}

src/client/graphics/GameRenderer.ts

@@ -38,11 +38,11 @@ import { SpawnVideoAd } from "./layers/SpawnVideoReward";
 import { StructureIconsLayer } from "./layers/StructureIconsLayer";
 import { StructureLayer } from "./layers/StructureLayer";
 import { TeamStats } from "./layers/TeamStats";
-import { TerrainLayer } from "./layers/TerrainLayer";
 import { TerritoryLayer } from "./layers/TerritoryLayer";
 import { UILayer } from "./layers/UILayer";
 import { UnitDisplay } from "./layers/UnitDisplay";
 import { UnitLayer } from "./layers/UnitLayer";
+import { WebGPUDebugOverlay } from "./layers/WebGPUDebugOverlay";
 import { WinModal } from "./layers/WinModal";
 
 export function createRenderer(
@@ -224,6 +224,16 @@ export function createRenderer(
   performanceOverlay.eventBus = eventBus;
   performanceOverlay.userSettings = userSettings;
 
+  const webgpuDebugOverlay = document.querySelector(
+    "webgpu-debug-overlay",
+  ) as WebGPUDebugOverlay;
+  if (!(webgpuDebugOverlay instanceof WebGPUDebugOverlay)) {
+    console.error("webgpu debug overlay not found");
+  }
+  webgpuDebugOverlay.eventBus = eventBus;
+  webgpuDebugOverlay.userSettings = userSettings;
+  webgpuDebugOverlay.requestUpdate();
+
   const alertFrame = document.querySelector("alert-frame") as AlertFrame;
   if (!(alertFrame instanceof AlertFrame)) {
     console.error("alert frame not found");
@@ -263,7 +273,6 @@ export function createRenderer(
   // Try to group layers by the return value of shouldTransform.
   // Not grouping the layers may cause excessive calls to context.save() and context.restore().
   const layers: Layer[] = [
-    new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus, transformHandler, userSettings),
     new RailroadLayer(game, eventBus, transformHandler),
     structureLayer,
@@ -306,6 +315,7 @@ export function createRenderer(
     spawnVideoAd,
     alertFrame,
     performanceOverlay,
+    webgpuDebugOverlay,
   ];
 
   return new GameRenderer(
@@ -316,6 +326,7 @@ export function createRenderer(
     uiState,
     layers,
     performanceOverlay,
+    webgpuDebugOverlay,
   );
 }
 
@@ -331,8 +342,10 @@ export class GameRenderer {
     public uiState: UIState,
     private layers: Layer[],
     private performanceOverlay: PerformanceOverlay,
+    private webgpuDebugOverlay: WebGPUDebugOverlay,
   ) {
-    const context = canvas.getContext("2d", { alpha: false });
+    // Keep the main canvas transparent; the WebGPU territory canvas renders the background.
+    const context = canvas.getContext("2d", { alpha: true });
     if (context === null) throw new Error("2d context not supported");
     this.context = context;
   }
@@ -380,13 +393,8 @@ export class GameRenderer {
   renderGame() {
     FrameProfiler.clear();
     const start = performance.now();
-    // Set background
-    this.context.fillStyle = this.game
-      .config()
-      .theme()
-      .backgroundColor()
-      .toHex();
-    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    // Clear overlay canvas to transparent; the territory WebGPU canvas draws the base.
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
     const handleTransformState = (
       needsTransform: boolean,
@@ -424,6 +432,7 @@ export class GameRenderer {
 
     const layerDurations = FrameProfiler.consume();
     this.performanceOverlay.updateFrameMetrics(duration, layerDurations);
+    this.webgpuDebugOverlay.updateFrameMetrics(duration);
 
     if (duration > 50) {
       console.warn(