diff --git a/index.html b/index.html index be64350..bd87c89 100644 --- a/index.html +++ b/index.html @@ -115,97 +115,153 @@
-
-
-
-

-
-

-

+
+
+
+ + + + + +
+
+ + + +
-
-
-

Hearts

- +
+
+
+

+
+

+

+
+
+
+

Hearts

+ +
+
+

Time

+ +
+
+

Bonus

+ +
+
+
+
+
+ 🎡 title by author +
+
+ + +
+
-
-

Time

- -
-
-

Bonus

- -
-
-
+
-
- - - - - - - - - - - - - - - - - - - -
0tics
0moves
0seconds
-

Game speed: - -

-
-

+

Time

+ + + + + + + + + + + + + + + + + + + +
0tics
0moves
0seconds
+
+
+

Game speed: + +

+ +

Replay

+ +
+

-
-

Viewport size: - -

-
    -
    • -
    • - -
-

(Middle-click to teleport.)

-
+ +

Options

+

Viewport size: + +

+
    +
    • +
    • + +
+ +

Inventory

-
+ +

Misc

+
+

Tip: Middle-click to teleport.

-
-
- 🎡 title by author -
-
- - -
-
-
-
- - - - - -
-
- - - -
-
diff --git a/js/main.js b/js/main.js index 36a0c63..23656af 100644 --- a/js/main.js +++ b/js/main.js @@ -508,7 +508,7 @@ class Player extends PrimaryView { // Similarly, grab touch events and translate them to directions this.current_touches = {}; // ident => action this.touch_restart_delay = new util.DelayTimer; - let touch_target = this.root.querySelector('.-main-area'); + let touch_target = this.root.querySelector('#player-game-area'); let collect_touches = ev => { ev.stopPropagation(); ev.preventDefault(); @@ -738,16 +738,7 @@ class Player extends PrimaryView { } }); this._update_replay_button_enabled(); - debug_el.querySelector('.-buttons').append( - this.debug.replay_button, - make_button("green button", () => { - TILE_TYPES['button_green'].do_button(this.level); - this._redraw(); - }), - make_button("blue button", () => { - TILE_TYPES['button_blue'].do_button(this.level); - this._redraw(); - }), + debug_el.querySelector('#player-debug-time-buttons').append( make_button("toggle clock", () => { this.level.pause_timer(); this.update_ui(); @@ -765,6 +756,17 @@ class Player extends PrimaryView { this.update_ui(); }), ); + debug_el.querySelector('#player-debug-misc-buttons').append( + this.debug.replay_button, + make_button("green button", () => { + TILE_TYPES['button_green'].do_button(this.level); + this._redraw(); + }), + make_button("blue button", () => { + TILE_TYPES['button_blue'].do_button(this.level); + this._redraw(); + }), + ); // Link up some options checkboxes let wire_checkbox = (name, onclick) => { @@ -781,6 +783,7 @@ class Player extends PrimaryView { this._redraw(); }); + this.adjust_scale(); if (this.level) { this.update_ui(); } @@ -1507,9 +1510,13 @@ class Player extends PrimaryView { // - the difference between the size of the play area and the size of our root (which will // add in any gap around the player, e.g. if the controls stretch the root to be wider) let root_rect = this.root.getBoundingClientRect(); - let player_rect = this.root.querySelector('.-main-area').getBoundingClientRect(); + let player_rect = this.root.querySelector('#player-game-area').getBoundingClientRect(); avail_x += root_rect.width - player_rect.width; avail_y += root_rect.height - player_rect.height; + // ...minus the width of the debug panel, if visible + if (this.debug.enabled) { + avail_x -= this.root.querySelector('#player-debug').getBoundingClientRect().width; + } // - the margins around our root, which consume all the extra space let margin_x = parseFloat(style['margin-left']) + parseFloat(style['margin-right']); let margin_y = parseFloat(style['margin-top']) + parseFloat(style['margin-bottom']); diff --git a/style.css b/style.css index a7247bb..e562bbf 100644 --- a/style.css +++ b/style.css @@ -306,7 +306,6 @@ label.option { } label.option:hover { outline: 2px solid #d0d0d0; - outline-radius: 2px; } label.option .option-label { flex: 1; @@ -544,12 +543,9 @@ button.level-pack-button p { /* Player */ #player { - flex: 0; + flex: 1; + position: relative; display: flex; - flex-direction: column; - justify-content: stretch; - gap: 0.5em; - margin: auto; /* center in both directions baby */ image-rendering: crisp-edges; image-rendering: pixelated; @@ -558,8 +554,20 @@ button.level-pack-button p { --tile-height: 32px; --scale: 1; } -#player > .-main-area { +#player-main { + /* This element basically just exists so that #player can have relative positioning and the + * debug panel can use that to sit against the right edge; absolute positioning excludes + * margins, so if it were positioned as a child of THIS element, it would be stuffed into the + * game area (oops!) */ + display: flex; + flex-direction: column; + justify-content: stretch; + gap: 0.5em; + margin: auto; /* center in both directions baby */ +} +#player-game-area { isolation: isolate; + align-self: center; /* don't stretch if the buttons or music blow out somehow */ display: grid; align-items: center; grid: @@ -570,7 +578,7 @@ button.level-pack-button p { "level inventory" min-content "level actions" min-content /* Need explicit min-content to force the hint to wrap */ - / min-content min-content min-content + / min-content min-content ; column-gap: 2em; row-gap: 0.5em; @@ -847,59 +855,67 @@ dl.score-chart .-sum { /* Debug stuff */ #player.--debug #player-debug { - display: grid; + display: flex; } #player-debug { + flex: 0 0 max-content; + align-self: center; display: none; - grid: - "time inventory options" - "buttons buttons buttons" - / 2fr 1fr 2fr - ; + /* FIXME this blows out the height instead of scrolling and i cannot figure out how to make it + * stop, so here is an arbitrary max height on it which i extremely hate */ + overflow: auto; + max-height: 75vh; + flex-direction: column; + justify-content: start; gap: 0.25em; padding: 0.5em; background-image: repeating-linear-gradient(135deg, - hsl(0, 0%, 4%) 0em, - hsl(0, 0%, 4%) 1em, - hsl(15, 25%, 8%) 1em, - hsl(15, 25%, 8%) 2em); - border: 0.25em solid hsla(30, 100%, 50%, 0.5); + hsl(0, 0%, 4%) 0px, + hsl(0, 0%, 4%) 16px, + hsl(30, 25%, 8%) 16px, + hsl(30, 25%, 8%) 32px); + border: 0.25em solid hsl(30, 75%, 50%); + border-right-width: 0; box-shadow: inset 0 0 0.25em 0.25em #0004; - } -#player-debug > .-time { - grid-area: time; +#player-debug > h3 { + margin: -0.25em -0.25em 0.25em; + padding: 0 0.5em; + background: hsl(30, 60%, 20%); + color: black; } -#player-debug > .-time table.-time-controls { +#player-debug > * + h3 { + margin-top: 0.5em; } -#player-debug > .-time table.-time-controls button { +#player-debug table.-time-controls { + border-collapse: collapse; + width: 100%; + margin-bottom: 0.5em; +} +#player-debug table.-time-controls button { width: 100%; text-align: inherit; } -#player-debug > .-time table.-time-controls td:nth-child(1) { +#player-debug table.-time-controls td:nth-child(1) { /* go backwards button */ text-align: left; } -#player-debug > .-time table.-time-controls td:nth-child(2) { +#player-debug table.-time-controls td:nth-child(2) { /* value */ - width: 6em; + width: 4em; text-align: right; } -#player-debug > .-time table.-time-controls td:nth-child(3) { +#player-debug table.-time-controls td:nth-child(3) { /* label */ } -#player-debug > .-time table.-time-controls td:nth-child(4) { +#player-debug table.-time-controls td:nth-child(4) { /* go forward button */ text-align: right; } -#player-debug > .-options { - grid-area: options; -} -#player-debug > .-inventory { - grid-area: inventory; +#player-debug .-inventory { display: grid; - margin: auto; - grid: auto-fill var(--tile-height) / repeat(4, var(--tile-width)); + margin: 0 auto; + grid: auto-fill var(--tile-height) / repeat(8, var(--tile-width)); gap: 2px; } #player-debug > .-inventory > button { @@ -909,14 +925,17 @@ dl.score-chart .-sum { display: block; } #player-debug > .-inventory > button.-wide { - grid-column: span 4; + grid-column: span 8; padding: 0.25em; } -#player-debug > .-buttons { - grid-area: buttons; +#player-debug .-buttons { display: flex; + justify-content: space-between; gap: 0.25em; } +#player-debug .-buttons button { + flex: 1 0 max-content; +} #player-debug-input { display: grid; @@ -974,7 +993,7 @@ dl.score-chart .-sum { #player .controls { flex-direction: column; } - #player > .-main-area { + #player-game-area { /* Rearrange the grid to be vertical */ grid: "level level"