Add performance stats (#2338)

## Description:

Enhanced the performance overlay to display additional tick-related
performance metrics. The overlay now shows:

1. **Tick Execution Duration** - Average and maximum time (in
milliseconds) it takes to execute a game tick
2. **Tick Delay** - Average and maximum time (in milliseconds) between
receiving tick updates from the server

The server sends 10 updates per second (100ms interval), so these
metrics help identify:
- Client-side performance bottlenecks (tick execution duration)
- Network latency issues (tick delay)

**Additional improvements:**
- Renamed `FPSDisplay` component to `PerformanceOverlay` to better
reflect its expanded purpose
- Updated method names (`updateFPS` → `updateFrameMetrics`) and CSS
classes for consistency

All metrics are tracked over the last 60 ticks, providing rolling
averages and maximum values for performance analysis.

## Please complete the following:

- [x] I have added screenshots for all UI updates:
- <img width="495" height="227" alt="image"
src="https://github.com/user-attachments/assets/142b0313-61bf-46cc-b595-61fe73f6b54c"
/>


- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- Translation keys already exist in en.json for
"performance_overlay_label" and "performance_overlay_desc"

- [x] I have added relevant tests to the test directory
  - All existing tests pass (309/310 tests passed)
  - No new tests added as this is primarily a display enhancement

- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
  - Tested locally with npm test
  - Verified performance overlay displays all metrics correctly
  - Confirmed tick metrics are calculated and displayed accurately

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Discord: kerverse

---------

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

src/client/ClientGameRunner.ts

@@ -33,6 +33,7 @@ import {
   InputHandler,
   MouseMoveEvent,
   MouseUpEvent,
+  TickMetricsEvent,
 } from "./InputHandler";
 import { endGame, startGame, startTime } from "./LocalPersistantStats";
 import { getPersistentID } from "./Main";
@@ -201,6 +202,8 @@ export class ClientGameRunner {
 
   private lastMessageTime: number = 0;
   private connectionCheckInterval: NodeJS.Timeout | null = null;
+  private lastTickReceiveTime: number = 0;
+  private currentTickDelay: number | undefined = undefined;
 
   constructor(
     private lobby: LobbyConfig,
@@ -292,6 +295,14 @@ export class ClientGameRunner {
       this.gameView.update(gu);
       this.renderer.tick();
 
+      // Emit tick metrics event for performance overlay
+      this.eventBus.emit(
+        new TickMetricsEvent(gu.tickExecutionDuration, this.currentTickDelay),
+      );
+
+      // Reset tick delay for next measurement
+      this.currentTickDelay = undefined;
+
       if (gu.updates[GameUpdateType.Win].length > 0) {
         this.saveGame(gu.updates[GameUpdateType.Win][0]);
       }
@@ -359,6 +370,14 @@ export class ClientGameRunner {
           this.transport.joinGame(0);
           return;
         }
+        // Track when we receive the turn to calculate delay
+        const now = Date.now();
+        if (this.lastTickReceiveTime > 0) {
+          // Calculate delay between receiving turn messages
+          this.currentTickDelay = now - this.lastTickReceiveTime;
+        }
+        this.lastTickReceiveTime = now;
+
         if (this.turnsSeen !== message.turn.turnNumber) {
           console.error(
             `got wrong turn have turns ${this.turnsSeen}, received turn ${message.turn.turnNumber}`,