leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stub out debug controls

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-11-01 11:29:48 -07:00
parent 060dfdc7d7
commit 37b44bcca4
2 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -129,16 +129,42 @@
<div class="input"></div>
</div>
</div>
<!-- TODO debug panel?
- current tic
- list of actors, or currently pointed-to actor?
<div class="debug">
<div id="player-debug">
<p>Play time: A tics, B moves, C seconds</p>
<p>
<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>

31
style.css
View File

@ -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;
padding: 1em;
margin: auto 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 {
background: url(icons/tool-bg-unselected.png);
#editor .controls #editor-toolbar {
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;