1 files changed, 36 insertions, 31 deletions

diff --git a/site/main.mjs b/site/main.mjs
index 27da04f..ffbda00 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -7,7 +7,7 @@ const CANVAS_SELECTOR = '#arena canvas';
 const TICK_BUTTON_SELECTOR = '#tick';
 const TICK_RATE_SELECTOR = '#tick-rate-select';
 const BENCH_BUTTON_SELECTOR = '#bench';
-const BLINKEN_BUTTON_SELECTOR = '#blinken';
+const RUN_BUTTON_SELECTOR = '#run';
 const FPS_SELECTOR = '#fps';
 
 // one per bot
@@ -262,46 +262,51 @@ async function loaded() {
     document.querySelector(TICK_RATE_SELECTOR).onchange({target: { value: TICKS_PER_SECOND }});
 
     let blinkenRun = false;
-    document.querySelector(BLINKEN_BUTTON_SELECTOR).onclick = e => {
-        console.debug('blinken clicked', e);
+    let lastTime = 0;
+    function renderFrame(t) {
+        if (!blinkenRun) {
+            return;
+        }
+        self.requestAnimationFrame(renderFrame);
 
-        let lastTime = 0;
-        function renderFrame(t) {
-            if (!blinkenRun) {
-                return;
-            }
-            window.requestAnimationFrame(renderFrame);
+        // we often get called with the same time stamp many times
+        // in a row due to fingerprint-reduction tech.
+        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';
+        }
+    }
 
-            // we often get called with the same time stamp many times
-            // in a row due to fingerprint-reduction tech.
-            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';
-            }
+    function timeout() {
+        if (!blinkenRun) {
+            return
         }
+        self.setTimeout(timeout, MS_PER_TICK);
+
+        robo.worker.postMessage({ kind: 'tick' });
+    }
+
+    document.querySelector(RUN_BUTTON_SELECTOR).onclick = e => {
+        console.debug('blinken clicked', e);
 
         blinkenRun = !blinkenRun;
         if (blinkenRun) {
-            e.target.textContent = 'haltenblinken';
+            e.currentTarget.classList.remove('halten');
+            e.currentTarget.classList.add('blinken');
+            e.currentTarget.querySelector('title').textContent = 'halten';
+            setTimeout(timeout);
             renderFrame(document.timeline.currentTime);
         } else {
-            e.target.textContent = 'blinken';
-        }
-        const onTimeout = _ => {
-            if (!blinkenRun) {
-                return
-            }
-            setTimeout(onTimeout, MS_PER_TICK);
-
-            roboWorker.postMessage({ kind: 'tick' });
+            e.currentTarget.classList.remove('blinken');
+            e.currentTarget.classList.add('halten');
+            e.currentTarget.querySelector('title').textContent = 'blinken';
+            document.querySelector(FPS_SELECTOR).textContent = 'n/a';
         }
-        setTimeout(onTimeout);
     }
-    window.robo = robo;
 }
 
 document.addEventListener('DOMContentLoaded', loaded);