html: use svg buttons rather than text

3 files changed, 66 insertions, 34 deletions

diff --git a/site/index.html b/site/index.html
index 702bc96..67ce13d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -17,8 +17,27 @@
 
         <div class='controls'>
           <!-- <button id='bench'>bench</button> -->
-          <button id='tick'>tick</button>
-          <button id='blinken'>blinken</button>
+          <button id='tick'>
+            <svg version='1.1' width='30' height='20' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+              <title>tick</title>
+              <g class='step' stroke='black' stroke-width='2' fill='red'>
+                <polyline points='0 0 0 100 55 50 0 0'/>
+                <rect x='60' y='0' width='30' height='100'/>
+              </g>
+            </svg>
+          </button>
+          <button id='run' class='halten'>
+            <svg version='1.1' width='30' height='20' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+              <title>blinken</title>
+              <g class='play' stroke='black' stroke-width='2' fill='red'>
+                <polyline points='0 0 0 100 100 50 0 0'/>
+              </g>
+              <g class='pause' stroke='black' stroke-width='2' fill='red'>
+                <rect x='0' y='0' width='40' height='100'/>
+                <rect x='60' y='0' width='40' height='100'/>
+              </g>
+            </svg>
+          </button>
           <label for='tick-rate-select'>tps:</label>
           <select id='tick-rate-select'>
             <option>5</option>
@@ -29,7 +48,7 @@
             <option>60</option>
           </select>
         </div> <!-- controls -->
-        <label for='fps'>fps: </label><span id='fps'>0</span>
+        <label for='fps'>fps: </label><span id='fps'>n/a</span>
       </section> <!-- arena -->
 
       <section id='robview'>
diff --git a/site/main.css b/site/main.css
index 2414a49..00c6453 100644
--- a/site/main.css
+++ b/site/main.css
@@ -87,3 +87,11 @@ canvas {
     border: 1px solid orangered;
     background-color: rgb(200 200 200);
 }
+
+button.halten .play, button.blinken .pause {
+    display: block;
+}
+
+button.blinken .play, button.halten .pause {
+    display: none;
+}
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);