summaryrefslogtreecommitdiffstats
path: root/site
diff options
context:
space:
mode:
authorBrian Cully <bjc@spork.org>2025-12-23 13:53:49 -0500
committerBrian Cully <bjc@spork.org>2025-12-23 13:53:49 -0500
commit1887bb00cf21177b7ba70954e8a1f638ef7dcb53 (patch)
tree0e8f8f155d9a5dae323800fa8ea678d167b11647 /site
parenta2c8d50e62713eed9fc6820b68eda49bebea8314 (diff)
downloadautomathon-1887bb00cf21177b7ba70954e8a1f638ef7dcb53.tar.gz
automathon-1887bb00cf21177b7ba70954e8a1f638ef7dcb53.zip
simplify css, allow multiple inspectors
Diffstat (limited to 'site')
-rw-r--r--site/index.html79
-rw-r--r--site/inspector.mjs18
-rw-r--r--site/main.css65
-rw-r--r--site/main.mjs2
4 files changed, 68 insertions, 96 deletions
diff --git a/site/index.html b/site/index.html
index 4ddb3ea..2273668 100644
--- a/site/index.html
+++ b/site/index.html
@@ -10,15 +10,14 @@
<body>
<h1>automathon</h1>
- <div id='ff'>
- <section id='arena'>
+ <div class='flex-col'>
+ <section>
<h2>arena</h2>
- <canvas width='300' height='300'>
+ <canvas id='arena' width='300' height='300'>
oh no! no canvas support!
</canvas>
<div class='controls'>
- <!-- <button id='bench'>bench</button> -->
<button id='tick'>
<svg version='1.1' width='30' height='20' viewbox='0 0 100 100'>
<title>tick</title>
@@ -53,45 +52,47 @@
fps: <span id='fps'>n/a</span>
</section> <!-- arena -->
- <x-inspector id='robview'>
- <h2>inspector</h2>
- <details id='editor' open>
- <summary>source code</summary>
- <div id='code'>
- <select id='src-select'>
- <option>rob.fs</option>
- <option>fac.fs</option>
- <option>slo-fac.fs</option>
- </select>
- <button id='compile'>compile</button>
- <br>
- <div id='src' contenteditable='plaintext-only'></div>
- </div> <!-- code -->
- </details>
+ <section>
+ <x-inspector>
+ <h2>inspector</h2>
+ <details open>
+ <summary>source code</summary>
+ <div>
+ <select class='src-select'>
+ <option>rob.fs</option>
+ <option>fac.fs</option>
+ <option>slo-fac.fs</option>
+ </select>
+ <button class='compile'>compile</button>
+ <br>
+ <div class='src' contenteditable='plaintext-only'></div>
+ </div> <!-- code -->
+ </details>
- <details id='scope' open>
- <summary>scope</summary>
- <fieldset class='wordlist'>
- <legend>word list</legend>
- <div id='wordlist'></div>
- </fieldset>
+ <details open>
+ <summary>scope</summary>
+ <fieldset>
+ <legend>word list</legend>
+ <div class='wordlist'></div>
+ </fieldset>
- <fieldset class='vars'>
- <legend>vars</legend>
- <dl id='vars'></dl>
- </fieldset>
+ <fieldset>
+ <legend>vars</legend>
+ <dl class='vars'></dl>
+ </fieldset>
- <fieldset class='stack'>
- <legend>stack</legend>
- <ol id='stack'></ol>
- </fieldset>
+ <fieldset>
+ <legend>stack</legend>
+ <ol class='stack'></ol>
+ </fieldset>
- <fieldset class='callstack'>
- <legend>call stack</legend>
- <ol id='callstack'></ol>
- </fieldset>
- </details> <!-- scope -->
- </x-inspector>
+ <fieldset>
+ <legend>call stack</legend>
+ <ol class='callstack'></ol>
+ </fieldset>
+ </details> <!-- scope -->
+ </x-inspector>
+ </section>
</div>
<script src='./main.mjs' type='module'></script>
diff --git a/site/inspector.mjs b/site/inspector.mjs
index b2efb1c..398ad2c 100644
--- a/site/inspector.mjs
+++ b/site/inspector.mjs
@@ -1,14 +1,14 @@
-const SRC_SELECT_SELECTOR = '#src-select';
-const COMPILE_BUTTON_SELECTOR = '#compile';
-const WORDLIST_SELECTOR = '#wordlist';
-const STACK_SELECTOR = '#stack';
-const CALLSTACK_SELECTOR = '#callstack';
-const VARS_SELECTOR = '#vars';
-const SRC_SELECTOR = '#src';
-const IP_SELECTOR = '#wordlist .ip';
+const SRC_SELECT_SELECTOR = '.src-select';
+const COMPILE_BUTTON_SELECTOR = '.compile';
+const WORDLIST_SELECTOR = '.wordlist';
+const STACK_SELECTOR = '.stack';
+const CALLSTACK_SELECTOR = '.callstack';
+const VARS_SELECTOR = '.vars';
+const SRC_SELECTOR = '.src';
+const IP_SELECTOR = '.wordlist .ip';
function selectorForIP(word, offset) {
- return `#wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
+ return `.wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
}
function wordlistElts(wordlist) {
diff --git a/site/main.css b/site/main.css
index 00c6453..bf3eff8 100644
--- a/site/main.css
+++ b/site/main.css
@@ -5,21 +5,26 @@ html {
box-sizing: inherit;
}
-#ff {
+.flex-col {
display: flex;
flex-direction: row;
}
-body h1 {
- flex: 2;
+.flex-col section {
+ flex: 1;
}
-body footer {
- flex: 2;
+#arena {
+ border: 1px solid orangered;
+ background-color: rgb(200 200 200);
}
-body #arena {
- flex: 1;
+button.halten .play, button.blinken .pause {
+ display: block;
+}
+
+button.blinken .play, button.halten .pause {
+ display: none;
}
#fps {
@@ -28,11 +33,7 @@ body #arena {
text-align: right;
}
-body #robview {
- flex: 1;
-}
-
-#code #src {
+x-inspector .src {
min-height: 25ex;
margin-top: 1ex;
padding: 1em;
@@ -40,36 +41,19 @@ body #robview {
white-space: pre-wrap;
}
-::highlight(exec) {
+x-inspector ::highlight(exec) {
background-color: yellowgreen;
}
-#scope {
- /* display: grid; */
- /* grid-template-columns: repeat(2, 1fr); */
-}
-
-#scope summary {
- grid-column: 1 / span 2;
-}
-
-#scope .wordlist {
- grid-column: 1 / span 2;
-}
-
-#scope .vars {
- grid-column: 1 / span 2;
-}
-
-#scope .wordlist .ip {
+x-inspector .wordlist .ip {
background-color: yellow;
}
-x-bytecode {
+x-inspector x-bytecode {
display: block;
}
-x-bytecode::before {
+x-inspector x-bytecode::before {
display: inline-block;
width: 1em;
content: attr(x-index);
@@ -77,21 +61,8 @@ x-bytecode::before {
padding-right: 0.4em;
}
-x-op {
+x-inspector x-op {
display: inline-block;
padding: 5px;
border: 1px solid grey;
}
-
-canvas {
- border: 1px solid orangered;
- background-color: rgb(200 200 200);
-}
-
-button.halten .play, button.blinken .pause {
- display: block;
-}
-
-button.blinken .play, button.halten .pause {
- display: none;
-}
diff --git a/site/main.mjs b/site/main.mjs
index d99b3a3..5a4d94a 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -5,7 +5,7 @@ let TICKS_PER_SECOND = 15;
let MS_PER_TICK = 1_000 / TICKS_PER_SECOND;
// one per page
-const CANVAS_SELECTOR = '#arena canvas';
+const CANVAS_SELECTOR = '#arena';
const TICK_BUTTON_SELECTOR = '#tick';
const TICK_RATE_SELECTOR = '#tick-rate-select';
const RUN_BUTTON_SELECTOR = '#run';
generated by cgit v1.3 (git 2.53.0) at 2026-05-13 12:17:04 +0000