Use icons for debug buttons

bbrk24 · Sep 14, 2023 · 4a033f9 · 4a033f9
1 parent 77376b1
commit 4a033f9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/wasm/in.coffee b/wasm/in.coffee
@@ -194,10 +194,10 @@ debugBase = createWorker 'debugProgram'
   elements.program.value = elements.stdout.innerText
   elements.stdout.innerText = ''
 
-pause = ->
+pause = =>
   clearInterval interval
-  elements.playPause.textContent = 'Play'
-  elements.playPause.onclick = play
+  interval = -1
+  elements.playPause.textContent = @PLAY_TEXT
   elements.slower.disabled = true
   elements.faster.disabled = true
   elements.step.disabled = false
@@ -206,14 +206,18 @@ pause = ->
 minDelay = 4
 # Not really a useful upper limit but one that keeps setInterval from breaking
 maxDelay = 1 << 30
-play = ->
-  elements.playPause.textContent = 'Pause'
-  elements.playPause.onclick = pause
-  elements.slower.disabled = false
+play = =>
+  elements.playPause.textContent = @PAUSE_TEXT
+  elements.slower.disabled = delay >= maxDelay
   elements.faster.disabled = delay <= minDelay
-  elements.step.disabled = delay >= maxDelay
+  elements.step.disabled = true
   interval = setInterval step, delay
 
+Object.defineProperty @, 'isPaused', get: -> interval is -1
+
+@playPause = =>
+  if @isPaused then play() else pause()
+
 @faster = ->
   clearInterval interval
   delay /= 2
@@ -228,7 +232,7 @@ play = ->
   elements.faster.disabled = false
   elements.slower.disabled = delay >= maxDelay
 
-@debugProgram = ->
+@debugProgram = =>
   await expandBase()
 
   elements.debugProgram.hidden = false
@@ -254,9 +258,11 @@ play = ->
   elements.stdout.innerText = ''
 
   elements.debugInfo.hidden = false
-  setTimeout ->
-    elements.playPause.style.width = "#{elements.playPause.offsetWidth}px"
-    pause()
+  if not elements.playPause.style?.width
+    elements.playPause.textContent = @PAUSE_TEXT
+    setTimeout ->
+      elements.playPause.style.width = "#{elements.playPause.offsetWidth}px"
+      pause()
 
   await debugBase()
 
@@ -265,6 +271,7 @@ play = ->
   elements.debugProgram.innerHTML = ''
   elements.debugProgram.hidden = true
   elements.program.hidden = false
+  pause()
 
 renderThreads = ->
   for row in elements.threads.children

diff --git a/wasm/in.scss b/wasm/in.scss
@@ -84,7 +84,7 @@ a {
 }
 
 body {
-    font-family: sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
     -webkit-text-size-adjust: 100%;
     margin: 0;
     min-height: 100vh;
@@ -512,6 +512,11 @@ footer,
     min-width: fit-content;
 }
 
+#step {
+    letter-spacing: -0.1875em;
+    padding-right: 0.5625em;
+}
+
 [id^="row-"] {
     width: fit-content;
 

diff --git a/wasm/index.html b/wasm/index.html
@@ -38,6 +38,8 @@
     </div>
     <script>
       window.WORKER_URL = new URL('worker.js', location);
+      window.PLAY_TEXT = '▶︎';
+      window.PAUSE_TEXT = '\ufe0e⏸';
 
       let localState = localStorage.getItem('dark-mode');
       const dark = localState === null ? matchMedia('(prefers-color-scheme: dark)').matches : localState === 'true';
@@ -61,6 +63,14 @@
         else document.body.classList.remove('high-contrast');
         localStorage.setItem('high-contrast', this.checked ? 'true' : 'false');
       };
+
+      addEventListener('DOMContentLoaded', function() {
+        const ppButton = document.getElementById('play-pause');
+        ppButton.addEventListener('click', window.playPause, { passive: true });
+        ppButton.addEventListener('click', function() {
+          this.title = this.textContent === window.PLAY_TEXT ? 'play' : 'pause';
+        }, { passive: true });
+      }, { once: true });
     </script>
     <main class="grid">
       <fieldset id="program-container">
@@ -101,10 +111,10 @@
     <div id="debug-info" hidden>
       <div id="debug-header">
         <div id="debug-buttons">
-          <button type="button" id="step" onclick="step()">Step</button>
-          <button type="button" id="slower" alt="slow down" onclick="slower()">Slower</button>
-          <button type="button" id="play-pause">Pause</button>
-          <button type="button" id="faster" alt="speed up" onclick="faster()">Faster</button>
+          <button type="button" id="step" title="step" onclick="step()">▶︎|</button>
+          <button type="button" id="slower" title="slow down" onclick="slower()">🐢</button>
+          <button type="button" id="play-pause">▶︎</button>
+          <button type="button" id="faster" title="speed up" onclick="faster()">🐇</button>
         </div>
         <span id="select-icon">⠿</span>
       </div>

diff --git a/wasm/lowdata.html b/wasm/lowdata.html
@@ -7,4 +7,4 @@
    o " " " o "
   " , W r " ! 3
  l o o o d o : o
-o " " " o ' ( @ .</textarea><div id=debug-program hidden class=textarea></div></fieldset><fieldset id=input-container><legend>Input</legend><div><input type=checkbox id=include-input><label for=include-input>Include input in URL</label></div><textarea id=stdin rows=10 class=textarea></textarea></fieldset></div><button type=button onclick=clearOutput()>Clear output &amp; errors</button><p>Output</p><pre id=stdout></pre><p>Errors</p><p id=stderr></p></main><div id=debug-info hidden><div id=debug-header><button type=button id=step onclick=step()>Step</button><button type=button id=slower onclick=slower()>Slower</button><button type=button id=play-pause>Pause</button><button type=button id=faster onclick=faster()>Faster</button></div><table><thead><tr><th>Thread&nbsp;#</th><th>Stack</th></tr></thead><tbody id=threads></tbody></table></div><div class=spacer></div><footer>© 2023 William Baker <a rel=license href="https://github.com/bbrk24/Trilangle/blob/master/LICENSE">MIT License</a><br><a href="https://github.com/bbrk24/Trilangle">GitHub page</a><br><a rel=alternate href="./index.html" hreflang=en-US type="text/html">Rich version</a></footer><script>window.WORKER_URL=new URL('ldworker.js',location);</script><script async src="./index.js"></script></body></html>
+o " " " o ' ( @ .</textarea><div id=debug-program hidden class=textarea></div></fieldset><fieldset id=input-container><legend>Input</legend><div><input type=checkbox id=include-input><label for=include-input>Include input in URL</label></div><textarea id=stdin rows=10 class=textarea></textarea></fieldset></div><button type=button onclick=clearOutput()>Clear output &amp; errors</button><p>Output</p><pre id=stdout></pre><p>Errors</p><p id=stderr></p></main><div id=debug-info hidden><div id=debug-header><button type=button id=step onclick=step()>Step</button><button type=button id=slower onclick=slower()>Slower</button><button type=button id=play-pause onclick=playPause()></button><button type=button id=faster onclick=faster()>Faster</button></div><table><thead><tr><th>Thread&nbsp;#</th><th>Stack</th></tr></thead><tbody id=threads></tbody></table></div><div class=spacer></div><footer>© 2023 William Baker <a rel=license href="https://github.com/bbrk24/Trilangle/blob/master/LICENSE">MIT License</a><br><a href="https://github.com/bbrk24/Trilangle">GitHub page</a><br><a rel=alternate href="./index.html" hreflang=en-US type="text/html">Rich version</a></footer><script>window.WORKER_URL=new URL('ldworker.js',location);window.PLAY_TEXT='Play';window.PAUSE_TEXT='Pause'</script><script async src="./index.js"></script></body></html>