html: add arena canvas and update robo from code

1 files changed, 47 insertions, 0 deletions

diff --git a/site/main.mjs b/site/main.mjs
index 22d1f96..62a8a58 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -55,6 +55,49 @@ function renderCallStack(vm) {
     });
 }
 
+function renderVars(vm) {
+    document.querySelectorAll('#vars').forEach(e => {
+        while (e.lastChild) {
+            e.removeChild(e.lastChild);
+        }
+
+        ['out', 'heading', 'velocity', 'doppler'].forEach(name => {
+            const dt = document.createElement('dt');
+            dt.textContent = name;
+            e.appendChild(dt);
+
+            const dd = document.createElement('dd');
+            dd.textContent = vm[name]();
+            e.appendChild(dd);
+        });
+    });
+}
+
+function renderRobo(ctx, x, y) {
+    ctx.fillStyle = 'rgb(200 0 0)';
+    ctx.fillRect(x, y, 50, 50);
+}
+
+let [offx, offy] = [125, 25];
+function renderArena(vm) {
+    const canvas = document.querySelector('#arena');
+    const ctx = canvas.getContext('2d');
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    let heading = vm.heading();
+    let velocity = vm.velocity();
+    let [velx, vely] = [
+        Math.cos(2 * Math.PI * heading / 360),
+        Math.sin(2 * Math.PI * heading / 360)
+    ].map(x => velocity * x);
+    console.debug('velocity', heading, velx, vely)
+
+    renderRobo(ctx, offx, offy);
+    offx += velx;
+    offy += vely;
+}
+
 const highRange = new Range();
 const highlight = new Highlight(highRange);
 CSS.highlights.set('exec', highlight);
@@ -82,7 +125,9 @@ function tick(vm) {
     });
     renderStack(vm);
     renderCallStack(vm);
+    renderVars(vm);
     renderTextHighlight(vm);
+    renderArena(vm);
 }
 
 function loadForth(taintedPath) {
@@ -139,7 +184,9 @@ async function loaded() {
             initWordlist();
             renderStack(vm);
             renderCallStack(vm);
+            renderVars(vm);
             renderTextHighlight(vm);
+            renderArena(vm);
         }
     };
     document.querySelector('#tick').onclick = e => {