diff options
| author | Brian Cully <bjc@spork.org> | 2025-12-15 13:36:10 -0500 |
|---|---|---|
| committer | Brian Cully <bjc@spork.org> | 2025-12-15 13:43:43 -0500 |
| commit | 2854f9ea1580e05a2ec8992a08c9f86df8bf2bcd (patch) | |
| tree | 8e7af43e8765f69602dcbb88980d67dcea0de75e /site | |
| parent | ece1f7854ba9b77110be660834cf69b567defc65 (diff) | |
| download | automathon-2854f9ea1580e05a2ec8992a08c9f86df8bf2bcd.tar.gz automathon-2854f9ea1580e05a2ec8992a08c9f86df8bf2bcd.zip | |
html: add arena canvas and update robo from code
Diffstat (limited to 'site')
| -rw-r--r-- | site/index.html | 10 | ||||
| -rw-r--r-- | site/main.css | 7 | ||||
| -rw-r--r-- | site/main.mjs | 47 | ||||
| -rw-r--r-- | site/samples/rob.fs | 7 |
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 |