Stub out debug controls

index.html

@@ -129,16 +129,42 @@
                 <div class="input"></div>
             </div>
         </div>
-        <!-- TODO debug panel?
+        <div id="player-debug">
-        - current tic
+            <p>Play time: A tics, B moves, C seconds</p>
-        - list of actors, or currently pointed-to actor?
+            <p>
-        <div class="debug">
                 <button>« 4 tics</button>
                 <button>« 1 tic</button>
                 <button>1 tic »</button>
                 <button>4 tics »</button>
-        </div>
+            </p>
+            <p>Speed: 6× (0.5 frame), 3× (1 frame), 2× (???), 1.5× (2 frames), 1× (3 frames), ½× (6 frames), ⅓× (9 frames), ¼× (12 frames)</p>
+            <p>Viewport: 9/10, 12, 16, 24, 32, map size</p>
+
+            <p><input type="checkbox"> Show actor info</p>
+            <p><input type="checkbox"> Show actor bounding boxes</p>
+
+            <p><input type="checkbox"> Freeze time for everything else</p>
+            <p><input type="checkbox"> Immortal / intangible?</p>
+            <p><input type="checkbox"> Ignore collisions</p>
+            <p><input type="checkbox"> Levitate</p>
+            <p><input type="checkbox"> Stop clock</p>  <!-- TODO toggle clock like the ingame tile? -->
+            <p>Give item: <img src="icons/tool-bg-selected.png"> (Click inventory to destroy items)</p>
+
+            <p>
+                <button>Green button</button>
+                <button>Blue button</button>
+            </p>
+
+            <!-- TODO?
+                - inspect with mouse
+                    - list of actors, or currently pointed-to actor?
+                - activate something manually?
+                - click a button ingame?
+                - pan viewport (like editor)
+                - show connections, directions, other editor features
+                - look under anything
             -->
+        </div>
     </main>
     <main id="editor" hidden>
         <header>
@@ -157,7 +183,10 @@
             <div id="editor-toolbar">
                 <!-- tools go here -->
             </div>
+            <div class="-buttons">
                 <button id="editor-share-url" type="button">Share?</button>
+                <button id="editor-toggle-green" type="button">Toggle green objects</button>
+            </div>
             <div id="editor-tool-help">
                 <strong>Pencil</strong> — <span>Select a tile and draw with the left mouse button.  Erase with the right mouse button.</span>
             </div>

style.css

@@ -753,6 +753,14 @@ main.--has-demo .demo-controls {
 }
 
 /* Debug stuff */
+#player-debug {
+    display: none;
+    background-image: repeating-linear-gradient(135deg,
+        hsl(0, 0%, 12.5%) 0em,
+        hsl(0, 0%, 12.5%) 1em,
+        hsl(45, 25%, 12.5%) 1em,
+        hsl(45, 25%, 12.5%) 2em);
+}
 .input {
     display: grid;
     display: none;
@@ -831,13 +839,12 @@ main.--has-demo .demo-controls {
     grid:
         "controls   controls"   min-content
         "palette    level"      1fr
-        / minmax(25%, auto) 1fr
+        / calc((32px + 4px) * 8) 1fr
     ;
     gap: 0.5em;
 
     min-height: 0;
-    margin: auto;
+    margin: auto 1em;
-    padding: 1em;
 }
 
 #editor .level {
@@ -886,9 +893,20 @@ main.--has-demo .demo-controls {
 
 #editor .controls {
     grid-area: controls;
+    display: grid;
+    grid:
+        "toolbar    layer   direction   menu" auto
+        "hint       hint    hint        hint" 1.5em
+    ;
 }
-#editor .controls p img {
+#editor .controls #editor-toolbar {
-    background: url(icons/tool-bg-unselected.png);
+    grid-area: toolbar;
+}
+#editor .controls .-buttons {
+    grid-area: menu;
+}
+#editor .controls #editor-tool-help {
+    grid-area: hint;
 }
 .icon-button-set {
     display: flex;
@@ -910,6 +928,7 @@ main.--has-demo .demo-controls {
 .icon-button-set button img {
     display: block;
 }
+
 #editor .palette {
     grid-area: palette;
     min-width: 20vw;
@@ -928,7 +947,7 @@ main.--has-demo .demo-controls {
 #editor .palette section {
     display: grid;
     grid: auto-flow 32px / repeat(auto-fit, 32px);
-    gap: 3px;
+    gap: 4px;
 }
 .palette-entry {
     margin: 0.25em;