From 75e981335f6206958850f1c04c08aebb08cb135a Mon Sep 17 00:00:00 2001 From: "Eevee (Evelyn Woods)" Date: Fri, 11 Dec 2020 14:25:02 -0700 Subject: [PATCH] Restore the input viewer --- index.html | 60 ++++++++++++++++++++++++++++++++++++++---------------- js/main.js | 27 ++++++++++++++++++++---- style.css | 21 +++++++++++++++++++ 3 files changed, 86 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 9040098..be64350 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Lexy's Labyrinth

@@ -143,6 +172,8 @@

+
+

@@ -203,36 +234,29 @@
- - - -
diff --git a/js/main.js b/js/main.js index f8804fe..5d8a1e5 100644 --- a/js/main.js +++ b/js/main.js @@ -637,6 +637,17 @@ class Player extends PrimaryView { time_moves_el: this.root.querySelector('#player-debug-time-moves'), 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 let inventory_el = debug_el.querySelector('.-inventory'); let make_button = (label, onclick) => { @@ -886,13 +897,14 @@ class Player extends PrimaryView { } get_input() { + let input; if (this.demo_faucet) { let step = this.demo_faucet.next(); if (step.done) { - return new Set; + input = new Set; } else { - return step.value; + input = step.value; } } else { @@ -900,7 +912,7 @@ class Player extends PrimaryView { // because there might be multiple keys bound to one // action, and it still counts as pressed as long as at // least one key is held - let input = new Set; + input = new Set; for (let key of this.current_keys) { input.add(this.key_mapping[key]); } @@ -911,8 +923,15 @@ class Player extends PrimaryView { for (let action of Object.values(this.current_touches)) { 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) { diff --git a/style.css b/style.css index c7798d2..a7247bb 100644 --- a/style.css +++ b/style.css @@ -123,6 +123,10 @@ a:active { color: hsl(0, 50%, 60%); } +svg#svg-iconsheet { + /* This is a collection of SVG icons to be re-d */ + display: none; +} svg.svg-icon { width: 1em; height: 1em; @@ -913,6 +917,23 @@ dl.score-chart .-sum { display: flex; 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 { display: grid; display: none;