js: put x/y coords in robo object, not global

1 files changed, 38 insertions, 33 deletions

diff --git a/site/main.mjs b/site/main.mjs
index 83aee29..b1a98ac 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -78,23 +78,24 @@ function renderRobo(ctx, x, y) {
     ctx.fillRect(x, y, 50, 50);
 }
 
-let [offx, offy] = [125, 25];
-function renderArena(vm) {
+function renderArena(robos) {
     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);
+    robos.forEach(robo => {
+        let heading = robo.vm.heading();
+        let velocity = robo.vm.velocity();
+        let [velx, vely] = [
+            Math.cos(2 * Math.PI * heading / 360),
+            Math.sin(2 * Math.PI * heading / 360)
+        ].map(x => velocity * x);
 
-    renderRobo(ctx, offx, offy);
-    offx += velx;
-    offy += vely;
+        renderRobo(ctx, robo.x, robo.y);
+        robo.x += velx;
+        robo.y += vely;
+    });
 }
 
 const highRange = new Range();
@@ -111,22 +112,22 @@ function renderTextHighlight(vm) {
     highRange.setEnd(src.childNodes[0], anno.end);
 }
 
-function tick(vm) {
-    if (!vm.tick()) {
-        vm.reset_ip();
+function tick(robo) {
+    if (!robo.vm.tick()) {
+        robo.vm.reset_ip();
     }
 
-    const { word, offset } = vm.ip();
+    const { word, offset } = robo.vm.ip();
     document.querySelectorAll('#wordlist .ip').forEach(e => e.classList.remove('ip'));
     const sel = selectorForIP(word, offset);
     document.querySelectorAll(sel).forEach(e => {
         e.classList.add('ip');
     });
-    renderStack(vm);
-    renderCallStack(vm);
-    renderVars(vm);
-    renderTextHighlight(vm);
-    renderArena(vm);
+    renderStack(robo.vm);
+    renderCallStack(robo.vm);
+    renderVars(robo.vm);
+    renderTextHighlight(robo.vm);
+    renderArena([robo]);
 }
 
 function loadForth(taintedPath) {
@@ -154,7 +155,11 @@ async function loaded() {
     console.debug('running init');
     const mod = await init();
     console.debug('init done', mod);
-    const vm = make_vm();
+    const robo = {
+        x: 125,
+        y: 25,
+        vm: make_vm()
+    };
 
     document.querySelectorAll('#src-select').forEach(async sel => {
         sel.onchange = _ => loadForth(sel.value);
@@ -174,34 +179,34 @@ async function loaded() {
         const text = document.querySelector('#src').textContent + '\n';
         console.debug('compiling', text);
         const start = performance.now();
-        const res = vm.compile(text);
+        const res = robo.vm.compile(text);
         const end = performance.now();
         console.info(`compile took ${end-start} ms`);
         if (res) {
-            const wordlist = wordlistElts(vm.wordlist());
+            const wordlist = wordlistElts(robo.vm.wordlist());
             wordlist.forEach(elt => wordlistContainer.appendChild(elt));
             initWordlist();
-            renderStack(vm);
-            renderCallStack(vm);
-            renderVars(vm);
-            renderTextHighlight(vm);
-            renderArena(vm);
+            renderStack(robo.vm);
+            renderCallStack(robo.vm);
+            renderVars(robo.vm);
+            renderTextHighlight(robo.vm);
+            renderArena([robo]);
         }
     };
     document.querySelector('#tick').onclick = e => {
         console.debug('tick clicked', e);
-        tick(vm);
+        tick(robo);
     };
     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++) {
-            tickCount += vm.run();
+            tickCount += robo.vm.run();
         }
         const end = performance.now();
         console.info(`run took ${end-start} ms for ${tickCount} ticks (${(end-start)/tickCount * 1_000_000} ns/tick).`);
-        console.info('result', vm.stack());
+        console.info('result', robo.vm.stack());
     };
 
     let blinkenRun = false;
@@ -216,13 +221,13 @@ async function loaded() {
         const frameRate = 6;
         const onTimeout = _ => {
             if (blinkenRun) {
-                tick(vm);
+                tick(robo);
                 setTimeout(onTimeout, 1_000 / frameRate);
             }
         }
         setTimeout(onTimeout);
     }
-    window.vm = vm;
+    window.robo = robo;
 }
 
 document.addEventListener('DOMContentLoaded', loaded);