Feature/frame profiler (#2467)

## Description:

Adds a reusable FrameProfiler utility, and a way to export profiling
data for offline analysis.


### What this PR changes in the existing performance monitor

This PR enhances the performance monitor by:

- **Introducing a reusable `FrameProfiler` utility**
- New `FrameProfiler` singleton in
`src/client/graphics/FrameProfiler.ts`.
- Profiling is only active when the performance overlay is visible
(toggled via user settings), to avoid unnecessary overhead.

- **Per-layer and span-level timing integration**
  - `GameRenderer.renderGame` now:
    - Clears the profiler at the start of each frame.
- Wraps each `layer.renderLayer?.(this.context)` call with
`FrameProfiler.start()/end()`, keyed by the layer’s constructor name.
- Consumes the recorded timings at the end of the frame and passes them
into `PerformanceOverlay.updateFrameMetrics(frameDuration,
layerDurations)`.
  - `TerritoryLayer` instruments key operations:
    - `renderTerritory`
    - `putImageData`
    - Drawing the main canvas
    - Drawing the highlight canvas during spawn
- These show up in the performance overlay as additional entries (e.g.
`TerritoryLayer:renderTerritory`).

- **JSON export of performance snapshots**
- `PerformanceOverlay` can now build a full performance snapshot
(`buildPerformanceSnapshot`) containing:
    - FPS and frame time stats (current, 60s average, 60s history).
    - Tick metrics (avg/max execution and delay, plus raw samples).
- Layer breakdown (EMA-smoothed avg, max, total time per layer/span).
  - A new “Copy JSON” button:
- Uses `navigator.clipboard.writeText` when available and falls back to
a hidden `<textarea>` + `document.execCommand("copy")`.
- Provides user feedback via a transient status ("Copy JSON" → "Copied!"
or "Failed to copy").

- **Enable/disable functionality hooked into the UI**
  - `FrameProfiler.setEnabled(visible)` is invoked:
    - When the overlay visibility is toggled (`init` → `setVisible`).
- When the overlay re-checks visibility in `updateFrameMetrics`, so the
profiler state stays in sync with user settings.
- When disabled, `FrameProfiler` becomes a no-op (returns `0` from
`start`, ignores `record`/`end`, and `consume` returns an empty object),
ensuring minimal overhead when performance monitoring is off.

- **Performance overlay UX and i18n improvements**
  - New controls:
    - **Reset** button to clear all FPS/tick/layer stats.
    - **Copy JSON** button with a tooltip and transient status text.
  - Visual enhancements:
- Wider overlay (`min-width: 420px`) and extra padding for readability.
    - Layer breakdown section with:
      - A list that is now sorted by total accumulated time.
      - A horizontal bar per entry, scaled by average cost.
      - Avg / max time display per layer/span.
- All new text is routed through `translateText` and backed by
`en.json`:
    - `performance_overlay.reset`
    - `performance_overlay.copy_json_title`
    - `performance_overlay.copy_clipboard`
    - `performance_overlay.copied`
    - `performance_overlay.failed_copy`
    - `performance_overlay.fps`
    - `performance_overlay.avg_60s`
    - `performance_overlay.frame`
    - `performance_overlay.tick_exec`
    - `performance_overlay.tick_delay`
    - `performance_overlay.layers_header`

---

### How to set up profiling for new functions / code paths

For any function or code block you want to profile during a frame:

```ts
import { FrameProfiler } from "../FrameProfiler"; 

function heavyOperation() {
  const spanStart = FrameProfiler.start();
  // ... your existing work ...
  FrameProfiler.end("MyFeature:heavyOperation", spanStart);
}
```

Guidelines:

- Use descriptive, stable names:
  - Prefix with the component or layer name, e.g.:
    - `"TerritoryLayer:prepareTiles"`
    - `"GameRenderer:resolveVisibility"`
    - `"FooFeature:fetchData"`
- The same name can be called multiple times per frame; the profiler
accumulates the durations in that frame.
- The accumulated values will appear:
  - In `layerDurations` consumed at the end of the frame.
  - In the overlay “Layers (avg / max, sorted by total time)” section.
  - In the exported JSON under `layers` with `avg`, `max`, and `total`.

**3. Record pre-computed durations (optional)**

If you already have a measured duration and just want to attach it:

```ts
FrameProfiler.record("MyFeature:step1", someDurationInMs);
```

- This is equivalent to calling `start`/`end` but with your own timing
logic.
- Again, multiple calls with the same name in one frame will be summed.

---

<img width="466" height="823" alt="image"
src="https://github.com/user-attachments/assets/354b249a-25eb-4c3f-bd2e-9906372f761b"
/>


## 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

- [ ] I have added relevant tests to the test directory

- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

---------

Co-authored-by: Evan <evanpelle@gmail.com>

Author: scamiv

resources/lang/en.json

@@ -671,6 +671,19 @@
     },
     "desync_notice": "You are desynced from other players. What you see might differ from other players."
   },
+  "performance_overlay": {
+    "reset": "Reset",
+    "copy_json_title": "Copy current performance metrics as JSON",
+    "copy_clipboard": "Copy JSON",
+    "copied": "Copied!",
+    "failed_copy": "Failed to copy",
+    "fps": "FPS:",
+    "avg_60s": "Avg (60s):",
+    "frame": "Frame:",
+    "tick_exec": "Tick Exec:",
+    "tick_delay": "Tick Delay:",
+    "layers_header": "Layers (avg / max, sorted by total time):"
+  },
   "heads_up_message": {
     "choose_spawn": "Choose a starting location",
     "random_spawn": "Random spawn is enabled. Selecting starting location for you..."

src/client/graphics/FrameProfiler.ts

@@ -0,0 +1,62 @@
+export class FrameProfiler {
+  private static timings: Record<string, number> = {};
+  private static enabled: boolean = false;
+
+  /**
+   * Enable or disable profiling.
+   */
+  static setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+  }
+
+  /**
+   * Check if profiling is enabled.
+   */
+  static isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  /**
+   * Clear all accumulated timings for the current frame.
+   */
+  static clear(): void {
+    if (!this.enabled) return;
+    this.timings = {};
+  }
+
+  /**
+   * Record a duration (in ms) for a named span.
+   */
+  static record(name: string, duration: number): void {
+    if (!this.enabled || !Number.isFinite(duration)) return;
+    this.timings[name] = (this.timings[name] ?? 0) + duration;
+  }
+
+  /**
+   * Convenience helper to start a span.
+   * Returns a high-resolution timestamp to be passed into end().
+   */
+  static start(): number {
+    if (!this.enabled) return 0;
+    return performance.now();
+  }
+
+  /**
+   * Convenience helper to end a span started with start().
+   */
+  static end(name: string, startTime: number): void {
+    if (!this.enabled || startTime === 0) return;
+    const duration = performance.now() - startTime;
+    this.record(name, duration);
+  }
+
+  /**
+   * Consume and reset all timings collected so far.
+   */
+  static consume(): Record<string, number> {
+    if (!this.enabled) return {};
+    const copy = { ...this.timings };
+    this.timings = {};
+    return copy;
+  }
+}

src/client/graphics/GameRenderer.ts

@@ -3,6 +3,7 @@ import { GameView } from "../../core/game/GameView";
 import { UserSettings } from "../../core/game/UserSettings";
 import { GameStartingModal } from "../GameStartingModal";
 import { RefreshGraphicsEvent as RedrawGraphicsEvent } from "../InputHandler";
+import { FrameProfiler } from "./FrameProfiler";
 import { TransformHandler } from "./TransformHandler";
 import { UIState } from "./UIState";
 import { AdTimer } from "./layers/AdTimer";
@@ -343,6 +344,7 @@ export class GameRenderer {
   }
 
   renderGame() {
+    FrameProfiler.clear();
     const start = performance.now();
     // Set background
     this.context.fillStyle = this.game
@@ -375,15 +377,19 @@ export class GameRenderer {
         needsTransform,
         isTransformActive,
       );
+
+      const layerStart = FrameProfiler.start();
       layer.renderLayer?.(this.context);
+      FrameProfiler.end(layer.constructor?.name ?? "UnknownLayer", layerStart);
     }
     handleTransformState(false, isTransformActive); // Ensure context is clean after rendering
     this.transformHandler.resetChanged();
 
     requestAnimationFrame(() => this.renderGame());
     const duration = performance.now() - start;
 
-    this.performanceOverlay.updateFrameMetrics(duration);
+    const layerDurations = FrameProfiler.consume();
+    this.performanceOverlay.updateFrameMetrics(duration, layerDurations);
 
     if (duration > 50) {
       console.warn(