html: add fps counter

1 files changed, 6 insertions, 2 deletions

diff --git a/site/main.mjs b/site/main.mjs
index 859b8d0..626a6b4 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -8,6 +8,7 @@ const TICK_BUTTON_SELECTOR = '#tick';
 const TICK_RATE_SELECTOR = '#tick-rate-select';
 const BENCH_BUTTON_SELECTOR = '#bench';
 const BLINKEN_BUTTON_SELECTOR = '#blinken';
+const FPS_SELECTOR = '#fps';
 
 // one per bot
 const SRC_SELECT_SELECTOR = '#src-select';
@@ -101,7 +102,7 @@ function clamp(radius, x, y, width, height) {
 function renderRobo(ctx, x, y) {
     ctx.fillStyle = 'rgb(200 0 0)';
     ctx.beginPath();
-    ctx.arc(x, y, 25, 0, 2 * Math.PI);
+    ctx.arc(Math.floor(x), Math.floor(y), 25, 0, 2 * Math.PI);
     ctx.fill();
 }
 
@@ -271,10 +272,13 @@ async function loaded() {
 
             // we often get called with the same time stamp many times
             // in a row due to fingerprint-reduction tech.
-            if (t > lastTime) {
+            const ms = t - lastTime;
+            if (ms > 0) {
                 lastTime = t;
                 const delta = robo.lastTick ? t - robo.lastTick : 0;
                 renderArena([robo], delta);
+                const fps = document.querySelector(FPS_SELECTOR);
+                fps.textContent = ms > 0 ? Math.floor(1_000 / ms) : '0';
             }
         }