toggle stats panel plus fps counter

amcolash · Jan 13, 2025 · e2277df · e2277df
1 parent 80d042d
commit e2277df
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/public/assets/icons/bar-chart-2.svg b/public/assets/icons/bar-chart-2.svg
diff --git a/public/style.css b/public/style.css
@@ -29,3 +29,7 @@ body {
   max-width: calc(100% - 20px);
   max-height: calc(100% - 20px);
 }
+
+#stats.hidden > canvas {
+  display: none !important;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -21,7 +21,7 @@ import { Colors, getColorNumber } from './utils/colors';
 import { CRTPipeline, PipelinePlugin } from './utils/shaders/crt';
 import { XRayPipeline } from './utils/shaders/xray';
 import { createStats } from './utils/stats';
-import { isMobile, setupCursorHiding } from './utils/util';
+import { setupCursorHiding } from './utils/util';
 
 // SW injection is done build-time in vite config
 
@@ -99,4 +99,4 @@ loading?.remove();
 const game = new Game(config);
 
 // Only create stats in dev mode
-if ((!Config.prod || Config.debug) && !isMobile()) createStats(game);
+if (!Config.prod || Config.debug) createStats(game);
diff --git a/src/utils/stats.ts b/src/utils/stats.ts
@@ -7,6 +7,7 @@
 type StatsType = {
   REVISION: number;
   dom: HTMLDivElement;
+  fps: HTMLDivElement;
   panels: PanelType[];
   addPanel: (panel: PanelType) => PanelType;
 };
@@ -18,8 +19,33 @@ type PanelType = {
 
 const Stats = (): StatsType => {
   const container = document.createElement('div');
+  container.id = 'stats';
   container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
 
+  const fullStats = !(localStorage.getItem('chrono-sleuth-stats') === 'false');
+  container.classList.toggle('hidden', !fullStats);
+
+  const img = document.createElement('img');
+  img.src = '/assets/icons/bar-chart-2.svg';
+
+  const button = document.createElement('button');
+  button.style.cssText =
+    'background-color:transparent;border:none;padding:0;bottom:8px;right:8px;position:fixed;cursor:pointer';
+  button.appendChild(img);
+  button.onclick = () => {
+    const current = !container.classList.contains('hidden');
+
+    container.classList.toggle('hidden', current);
+    localStorage.setItem('chrono-sleuth-stats', (!current).toString());
+  };
+
+  container.appendChild(button);
+
+  const fps = document.createElement('div');
+  fps.style.cssText =
+    'position:fixed;top:6px;left:6px;color:white;font-family:sans-serif;text-shadow:1px 1px 1px black';
+  container.appendChild(fps);
+
   const panels: PanelType[] = [];
 
   function addPanel(panel: PanelType) {
@@ -32,6 +58,7 @@ const Stats = (): StatsType => {
     REVISION: 17,
 
     dom: container,
+    fps,
     panels,
 
     addPanel,
@@ -158,6 +185,8 @@ function createStats(game: Phaser.Game) {
     fpsPanel.update(1000 / avgFps);
     framePanel.update(performance.now() - preStep);
 
+    globalStats.fps.textContent = `${Math.floor(1000 / avgFps)}`;
+
     // This might not work in all browsers
     if (performance.memory) memoryPanel.update(performance.memory.usedJSHeapSize / 1048576);
   });