html: add fps counter

3 files changed, 13 insertions, 2 deletions

diff --git a/site/index.html b/site/index.html
index eeebbe9..702bc96 100644
--- a/site/index.html
+++ b/site/index.html
@@ -29,6 +29,7 @@
             <option>60</option>
           </select>
         </div> <!-- controls -->
+        <label for='fps'>fps: </label><span id='fps'>0</span>
       </section> <!-- arena -->
 
       <section id='robview'>
diff --git a/site/main.css b/site/main.css
index 519ae31..2414a49 100644
--- a/site/main.css
+++ b/site/main.css
@@ -22,6 +22,12 @@ body #arena {
     flex: 1;
 }
 
+#fps {
+    display: inline-block;
+    width: 2em;
+    text-align: right;
+}
+
 body #robview {
     flex: 1;
 }
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';
             }
         }