Add FPS counter overlay to WASM demo (#22)

streamcode9 · web-flow · commit 887e063b7731 · 2025-09-25T11:22:31.000+02:00
diff --git a/wasm/game.js b/wasm/game.js
@@ -1,7 +1,10 @@
 const canvas = document.getElementById('game-canvas');
 const context = canvas.getContext('2d');
+const fpsDisplay = document.getElementById('fps-counter');
 let wasmExports = null;
 let lastTime = null;
+let fpsFrameCount = 0;
+let fpsLastTimestamp = 0;
 
 function resizeCanvas() {
   canvas.width = window.innerWidth;
@@ -34,6 +37,7 @@ function drawFrame() {
 function updateAndRender(timestamp) {
   if (!lastTime) {
     lastTime = timestamp;
+    fpsLastTimestamp = timestamp;
   }
 
   const deltaSeconds = (timestamp - lastTime) / 1000;
@@ -42,6 +46,17 @@ function updateAndRender(timestamp) {
   wasmExports.update(deltaSeconds);
   drawFrame();
 
+  fpsFrameCount += 1;
+  const fpsElapsed = timestamp - fpsLastTimestamp;
+  if (fpsElapsed >= 250) {
+    const fps = Math.round((fpsFrameCount * 1000) / fpsElapsed);
+    if (fpsDisplay) {
+      fpsDisplay.textContent = `${fps} FPS`;
+    }
+    fpsFrameCount = 0;
+    fpsLastTimestamp = timestamp;
+  }
+
   requestAnimationFrame(updateAndRender);
 }
 
diff --git a/wasm/index.html b/wasm/index.html
@@ -37,12 +37,29 @@
         height: 100%;
         display: block;
       }
+
+      #fps-counter {
+        position: fixed;
+        top: 1rem;
+        left: 1rem;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        background: rgba(15, 23, 42, 0.75);
+        color: #facc15;
+        font-weight: 600;
+        font-size: 0.875rem;
+        letter-spacing: 0.02em;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(6px);
+        pointer-events: none;
+      }
     </style>
   </head>
   <body>
     <h1>WebAssembly Bouncing Ball Demo</h1>
     <p>The ball is simulated inside WebAssembly and rendered on an HTML canvas.</p>
     <canvas id="game-canvas"></canvas>
+    <div id="fps-counter" role="status" aria-live="polite">-- FPS</div>
     <script type="module" src="game.js"></script>
   </body>
 </html>
