4 files changed, 70 insertions, 1 deletions
diff --git a/site/index.html b/site/index.html
index 0b6b8c8..a0775ae 100644
--- a/site/index.html
+++ b/site/index.html
@@ -8,9 +8,14 @@
   <body>
     <h1>automathon</h1>
 
+    <canvas id='arena' width='300px' height='300px'>
+      oh no! no canvas support!
+    </canvas>
+
     <div id='editor'>
       <div id='code'>
         <select id='src-select'>
+          <option>rob.fs</option>
           <option>fac.fs</option>
           <option>slo-fac.fs</option>
         </select>
@@ -41,6 +46,11 @@
             <legend>call stack</legend>
             <ol id='callstack'></ol>
           </fieldset>
+
+          <fieldset class='vars'>
+            <legend>vars</legend>
+            <dl id='vars'></dl>
+          </fieldset>
         </div>
       </div>
     </div>
diff --git a/site/main.css b/site/main.css
index 62b5179..52b3063 100644
--- a/site/main.css
+++ b/site/main.css
@@ -53,6 +53,11 @@ html {
     grid-column: 1 / span 2;
 }
 
+#state .vars {
+    grid-row: 3;
+    grid-column: 1 / span 2;
+}
+
 #wordlist .ip {
     background-color: yellow;
 }
@@ -76,5 +81,5 @@ x-op {
 }
 
 canvas {
-    border: 1px solid greenyellow;
+    border: 1px solid orangered;
 }
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 => {
diff --git a/site/samples/rob.fs b/site/samples/rob.fs
new file mode 100644
index 0000000..2175294
--- /dev/null
+++ b/site/samples/rob.fs
@@ -0,0 +1,7 @@
+: loop
+	head 10 + sethead
+	loop
+;
+
+2 setvel
+loop