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>
This commit is contained in:
Kerod Kibatu
2025-11-03 16:25:54 -05:00
committed by evanpelle
parent 45539623fc
commit 822d08bb7c
7 changed files with 136 additions and 32 deletions
+5
View File
@@ -130,9 +130,13 @@ export class GameRunner {
this.currTurn++;
let updates: GameUpdates;
let tickExecutionDuration: number = 0;
try {
const startTime = performance.now();
updates = this.game.executeNextTick();
const endTime = performance.now();
tickExecutionDuration = endTime - startTime;
} catch (error: unknown) {
if (error instanceof Error) {
console.error("Game tick error:", error.message);
@@ -173,6 +177,7 @@ export class GameRunner {
packedTileUpdates: new BigUint64Array(packedTileUpdates),
updates: updates,
playerNameViewData: this.playerViewData,
tickExecutionDuration: tickExecutionDuration,
});
this.isExecuting = false;
}
+1
View File
@@ -19,6 +19,7 @@ export interface GameUpdateViewData {
updates: GameUpdates;
packedTileUpdates: BigUint64Array;
playerNameViewData: Record<string, NameViewData>;
tickExecutionDuration?: number;
}
export interface ErrorUpdate {