1 files changed, 50 insertions, 8 deletions

diff --git a/main.mjs b/main.mjs
index 7bc2ba4..f8c9267 100644
--- a/main.mjs
+++ b/main.mjs
@@ -20,6 +20,47 @@ function selectorForIP(word, offset) {
     return sel;
 }
 
+function initWordlist() {
+    const sel = selectorForIP(0, 0);
+    document.querySelectorAll(sel).forEach(e => {
+        e.classList.add('ip')
+    });
+}
+
+function renderStack(interp) {
+    document.querySelectorAll('#stack').forEach(e => {
+        while (e.lastChild) {
+            e.removeChild(e.lastChild);
+        }
+        interp.stack().reverse()
+            .forEach(datum => {
+                console.debug('creating elt for', datum);
+                const elt = document.createElement('li');
+                elt.textContent = datum;
+                console.debug('elt', elt);
+                e.appendChild(elt);
+                return elt;
+            });
+    });
+}
+
+function renderCallStack(interp) {
+    document.querySelectorAll('#callstack').forEach(e => {
+        while (e.lastChild) {
+            e.removeChild(e.lastChild);
+        }
+        interp.callstack().reverse()
+            .forEach(datum => {
+                console.debug('creating elt for', datum);
+                const elt = document.createElement('li');
+                elt.textContent = `${datum.word}@${datum.offset}`;
+                console.debug('elt', elt);
+                e.appendChild(elt);
+                return elt;
+            });
+    });
+}
+
 async function loaded() {
     console.debug('running init');
     const mod = await init();
@@ -45,15 +86,14 @@ async function loaded() {
         if (res) {
             const wordlist = wordlistElts(interp.wordlist());
             wordlist.forEach(elt => wordlistContainer.appendChild(elt));
-            const sel = selectorForIP(0, 0);
-            document.querySelectorAll(sel).forEach(e => {
-                e.classList.add('ip')
-            });
+            initWordlist();
         }
     };
     document.querySelector('#tick').onclick = e => {
         console.debug('tick clicked', e);
-        interp.tick();
+        if (!interp.tick()) {
+            interp.reset_ip();
+        }
         console.info('callstack', interp.callstack());
         console.info('stack', interp.stack());
 
@@ -62,11 +102,13 @@ async function loaded() {
         document.querySelectorAll('#wordlist .ip').forEach(e => e.classList.remove('ip'));
         const sel = selectorForIP(word, offset);
         document.querySelectorAll(sel).forEach(e => {
-            e.classList.add('ip')
+            e.classList.add('ip');
         });
+        renderStack(interp);
+        renderCallStack(interp);
     };
-    document.querySelector('#run').onclick = e => {
-        console.debug('run clicked', e);
+    document.querySelector('#bench').onclick = e => {
+        console.debug('bench clicked', e);
         const start = performance.now();
         let tickCount = 0;
         for (let i = 0; i < 1_000_000; i++) {