From 2854f9ea1580e05a2ec8992a08c9f86df8bf2bcd Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Mon, 15 Dec 2025 13:36:10 -0500 Subject: html: add arena canvas and update robo from code --- site/index.html | 10 ++++++++++ site/main.css | 7 ++++++- site/main.mjs | 47 +++++++++++++++++++++++++++++++++++++++++++++++ site/samples/rob.fs | 7 +++++++ 4 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 site/samples/rob.fs (limited to 'site') 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 @@

automathon

+ + oh no! no canvas support! + +
@@ -41,6 +46,11 @@ call stack
    + +
    + vars +
    +
    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 -- cgit v1.3