html: add tick rate selector

2 files changed, 19 insertions, 3 deletions

diff --git a/site/index.html b/site/index.html
index dac9b4f..eeebbe9 100644
--- a/site/index.html
+++ b/site/index.html
@@ -19,6 +19,15 @@
           <!-- <button id='bench'>bench</button> -->
           <button id='tick'>tick</button>
           <button id='blinken'>blinken</button>
+          <label for='tick-rate-select'>tps:</label>
+          <select id='tick-rate-select'>
+            <option>5</option>
+            <option>10</option>
+            <option selected>15</option>
+            <option>30</option>
+            <option>45</option>
+            <option>60</option>
+          </select>
         </div> <!-- controls -->
       </section> <!-- arena -->
 
diff --git a/site/main.mjs b/site/main.mjs
index 958e82d..859b8d0 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -1,10 +1,11 @@
 // simulation speed
-const TICKS_PER_SECOND = 12;
-const MS_PER_TICK = 1_000 / TICKS_PER_SECOND;
+let TICKS_PER_SECOND = 15;
+let MS_PER_TICK = 1_000 / TICKS_PER_SECOND;
 
 // one per page
 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';
 
@@ -187,7 +188,6 @@ async function loaded() {
             }
             break;
         case 'tick':
-            console.debug('bjc tick', robo.heading, trans.vars.heading);
             const { word, offset } = trans.ip;
             document.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip'));
             const sel = selectorForIP(word, offset);
@@ -249,6 +249,13 @@ async function loaded() {
         roboWorker.postMessage({ kind: 'tick' });
     };
 
+    document.querySelector(TICK_RATE_SELECTOR).onchange = e => {
+        console.debug('tick rate changed', e, Number(e.target.value));
+        TICKS_PER_SECOND = e.target.value;
+        MS_PER_TICK = 1_000 / TICKS_PER_SECOND;
+    }
+    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);