From 1887bb00cf21177b7ba70954e8a1f638ef7dcb53 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Tue, 23 Dec 2025 13:53:49 -0500 Subject: simplify css, allow multiple inspectors --- site/index.html | 79 +++++++++++++++++++++++++++--------------------------- site/inspector.mjs | 18 ++++++------- site/main.css | 65 +++++++++++++------------------------------- site/main.mjs | 2 +- 4 files changed, 68 insertions(+), 96 deletions(-) (limited to 'site') 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 @@

automathon

-
-
+
+

arena

- + oh no! no canvas support!
-
- -

inspector

-
- source code -
- - -
-
-
-
+
+ +

inspector

+
+ source code +
+ + +
+
+
+
-
- scope -
- word list -
-
+
+ scope +
+ word list +
+
-
- vars -
-
+
+ vars +
+
-
- stack -
    -
    +
    + stack +
      +
      -
      - call stack -
        -
        -
        - +
        + call stack +
          +
          +
          +           +
          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'; -- cgit v1.3