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

Restore the input viewer

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-12-11 14:25:02 -07:00
parent 6c2afd7e32
commit 75e981335f
3 changed files with 86 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -13,6 +13,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head> </head>
<body data-mode="splash"> <body data-mode="splash">
<svg id="svg-iconsheet">
<defs>
<!-- Actions -->
<g id="svg-icon-up">
<path d="M0,12 l8,-8 l8,8 z"></path>
</g>
<g id="svg-icon-right">
<use href="#svg-icon-up" transform="rotate(90 8 8)"></use>
</g>
<g id="svg-icon-down">
<use href="#svg-icon-up" transform="rotate(180 8 8)"></use>
</g>
<g id="svg-icon-left">
<use href="#svg-icon-up" transform="rotate(270 8 8)"></use>
</g>
<g id="svg-icon-drop">
<path d="M6,0 h4 v9 h3 l-5,5 h7 v2 h-14 v-2 h7 l-5,-5 h3"></path>
</g>
<g id="svg-icon-cycle">
<path d="M2,3 H11 V1 l4,4 -4,4 V7 H2 Z"></path>
<path d="M14,9 H5 V7 l-4,4 4,4 v-2 h9 z"></path>
</g>
<g id="svg-icon-swap">
<path d="m 7,1 h 2 l 1,1 V 6 L 9,7 v 4 L 8,11.5 7,11 V 7 L 6,6 V 2 Z"></path>
<path d="M 8,13 13,11 8,9 3,11 Z m 0,2 7,-3 V 11 L 8,8 1,11 v 1 z"></path>
<ellipse cx="5.5" cy="11" rx="0.75" ry="0.5"></ellipse>
</g>
</defs>
</svg>
<header id="header-main"> <header id="header-main">
<img id="header-icon" src="icon.png" alt=""> <img id="header-icon" src="icon.png" alt="">
<h1>Lexy's Labyrinth</h1> <h1>Lexy's Labyrinth</h1>
@ -143,6 +172,8 @@
<option value="1/4">¼× — 5 tics per second</option> <option value="1/4">¼× — 5 tics per second</option>
</select> </select>
</p> </p>
<div id="player-debug-input"></div>
<p id="player-debug-demo-progress"></p>
</div> </div>
<div class="input"></div> <div class="input"></div>
<div class="-options"> <div class="-options">
@ -203,36 +234,29 @@
</div> </div>
<div class="controls"> <div class="controls">
<div class="play-controls"> <div class="play-controls">
<button class="control-pause" type="button"> <button class="control-pause" type="button" title="pause">
<svg class="svg-icon" viewBox="0 0 16 16" title="pause"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg> <svg class="svg-icon" viewBox="0 0 16 16"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg>
<span class="keyhint">p</span></button> <span class="keyhint">p</span></button>
<button class="control-restart" type="button"> <button class="control-restart" type="button" title="restart">
<svg class="svg-icon" viewBox="0 0 16 16" title="restart"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg> <svg class="svg-icon" viewBox="0 0 16 16"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg>
</button> </button>
<button class="control-undo" type="button"> <button class="control-undo" type="button" title="undo">
<svg class="svg-icon" viewBox="0 0 16 16" title="undo"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg> <svg class="svg-icon" viewBox="0 0 16 16"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg>
</button> </button>
<button class="control-rewind" type="button"> <button class="control-rewind" type="button" title="rewind">
<svg class="svg-icon" viewBox="0 0 16 16" title="rewind"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg> <svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg>
<span class="keyhint">z</span></button> <span class="keyhint">z</span></button>
<label><input class="control-turn-based" type="checkbox"> Turn-based mode</label> <label><input class="control-turn-based" type="checkbox"> Turn-based mode</label>
</div> </div>
<div class="actions"> <div class="actions">
<button class="action-drop" type="button"> <button class="action-drop" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="pause"><path d="M6,0 h4 v9 h3 l-5,5 h7 v2 h-14 v-2 h7 l-5,-5 h3"></svg> <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-drop"></use></svg>
drop <span class="keyhint">q</span></button> drop <span class="keyhint">q</span></button>
<button class="action-cycle" type="button"> <button class="action-cycle" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="pause"> <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-cycle"></use></svg>
<path d="M2,3 H11 V1 l4,4 -4,4 V7 H2 Z"></path>
<path d="M14,9 H5 V7 l-4,4 4,4 v-2 h9 z"></path>
</svg>
cycle <span class="keyhint">e</span></button> cycle <span class="keyhint">e</span></button>
<button class="action-swap" type="button"> <button class="action-swap" type="button">
<svg class="svg-icon" viewBox="0 0 16 16" title="pause"> <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-swap"></use></svg>
<path d="m 7,1 h 2 l 1,1 V 6 L 9,7 v 4 L 8,11.5 7,11 V 7 L 6,6 V 2 Z"></path>
<path d="M 8,13 13,11 8,9 3,11 Z m 0,2 7,-3 V 11 L 8,8 1,11 v 1 z"></path>
<ellipse cx="5.5" cy="11" rx="0.75" ry="0.5"></ellipse>
</svg>
switch <span class="keyhint">c</span></button> switch <span class="keyhint">c</span></button>
</div> </div>
</div> </div>

27
js/main.js
View File

@ -637,6 +637,17 @@ class Player extends PrimaryView {
time_moves_el: this.root.querySelector('#player-debug-time-moves'), time_moves_el: this.root.querySelector('#player-debug-time-moves'),
time_secs_el: this.root.querySelector('#player-debug-time-secs'), time_secs_el: this.root.querySelector('#player-debug-time-secs'),
}; };
let input_el = debug_el.querySelector('#player-debug-input');
this.debug.input_els = {};
for (let [action, label] of Object.entries({up: 'W', left: 'A', down: 'S', right: 'D', drop: 'Q', cycle: 'E', swap: 'C'})) {
let el = mk_svg('svg.svg-icon', {viewBox: '0 0 16 16'},
mk_svg('use', {href: `#svg-icon-${action}`}));
el.style.gridArea = action;
this.debug.input_els[action] = el;
input_el.append(el);
}
// Add a button for every kind of inventory item // Add a button for every kind of inventory item
let inventory_el = debug_el.querySelector('.-inventory'); let inventory_el = debug_el.querySelector('.-inventory');
let make_button = (label, onclick) => { let make_button = (label, onclick) => {
@ -886,13 +897,14 @@ class Player extends PrimaryView {
} }
get_input() { get_input() {
let input;
if (this.demo_faucet) { if (this.demo_faucet) {
let step = this.demo_faucet.next(); let step = this.demo_faucet.next();
if (step.done) { if (step.done) {
return new Set; input = new Set;
} }
else { else {
return step.value; input = step.value;
} }
} }
else { else {
@ -900,7 +912,7 @@ class Player extends PrimaryView {
// because there might be multiple keys bound to one // because there might be multiple keys bound to one
// action, and it still counts as pressed as long as at // action, and it still counts as pressed as long as at
// least one key is held // least one key is held
let input = new Set; input = new Set;
for (let key of this.current_keys) { for (let key of this.current_keys) {
input.add(this.key_mapping[key]); input.add(this.key_mapping[key]);
} }
@ -911,8 +923,15 @@ class Player extends PrimaryView {
for (let action of Object.values(this.current_touches)) { for (let action of Object.values(this.current_touches)) {
input.add(action); input.add(action);
} }
return input;
} }
if (this.debug.enabled) {
for (let [action, el] of Object.entries(this.debug.input_els)) {
el.classList.toggle('--held', input.has(action));
}
}
return input;
} }
advance_by(tics) { advance_by(tics) {

21
style.css
View File

@ -123,6 +123,10 @@ a:active {
color: hsl(0, 50%, 60%); color: hsl(0, 50%, 60%);
} }
svg#svg-iconsheet {
/* This is a collection of SVG icons to be re-<use>d */
display: none;
}
svg.svg-icon { svg.svg-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -913,6 +917,23 @@ dl.score-chart .-sum {
display: flex; display: flex;
gap: 0.25em; gap: 0.25em;
} }
#player-debug-input {
display: grid;
grid:
"drop up cycle" 1em
"left . right" 1em
". down swap" 1em
/ 1em 1em 1em
;
gap: 0.5em;
}
#player-debug-input > svg {
fill: #404040;
}
#player-debug-input > svg.--held {
fill: white;
}
.input { .input {
display: grid; display: grid;
display: none; display: none;