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

Finally fix display of long hints

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-01-05 23:46:00 -07:00
parent a7310cf59b
commit 04940ff42c
3 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -172,7 +172,9 @@
<p class="-bottom"></p> <p class="-bottom"></p>
<p class="-keyhint"></p> <p class="-keyhint"></p>
</div> </div>
<div class="player-hint-wrapper">
<div class="player-hint"></div> <div class="player-hint"></div>
</div>
<div class="chips"> <div class="chips">
<h3>Hearts</h3> <h3>Hearts</h3>
<output></output> <output></output>

1
js/main.js
View File

@ -1365,6 +1365,7 @@ class Player extends PrimaryView {
if (hint_tile !== this.previous_hint_tile) { if (hint_tile !== this.previous_hint_tile) {
this.previous_hint_tile = hint_tile; this.previous_hint_tile = hint_tile;
this.hint_el.textContent = ''; this.hint_el.textContent = '';
this.hint_el.parentNode.classList.toggle('--visible', !! hint_tile);
if (hint_tile) { if (hint_tile) {
// Parse out %X sequences and replace them with <kbd> elements // Parse out %X sequences and replace them with <kbd> elements
let hint_text = hint_tile.hint_text ?? this.level.stored_level.hint; let hint_text = hint_tile.hint_text ?? this.level.stored_level.hint;

21
style.css
View File

@ -1101,10 +1101,13 @@ dl.score-chart .-sum {
display: flex; display: flex;
} }
#player-game-area > .player-hint { /* This has a wrapper because scrollables don't work too well as the direct child of a grid or flex
* parent; they really want to expand to their natural size, and I do not want that */
#player-game-area > .player-hint-wrapper {
grid-area: hint; grid-area: hint;
align-self: stretch; align-self: stretch;
display: none;
font-size: calc(var(--tile-height) * var(--scale) / 3); font-size: calc(var(--tile-height) * var(--scale) / 3);
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
font-family: serif; font-family: serif;
@ -1112,12 +1115,16 @@ dl.score-chart .-sum {
color: hsl(45, 100%, 60%); color: hsl(45, 100%, 60%);
background: #080808; background: #080808;
border: 1px inset #202020; border: 1px inset #202020;
/* FIXME find a way to enforce that the hint never makes the grid get bigger */
overflow: auto;
} }
#player-game-area > .player-hint:empty { #player-game-area > .player-hint-wrapper > .player-hint {
display: none; overflow: auto;
/* Set our inherent height or whatever to zero, but then force us to expand to whatever size our
* parent happens to be. Magic! */
height: 0;
min-height: 100%;
}
#player-game-area > .player-hint-wrapper.--visible {
display: initial;
} }
#player .inventory { #player .inventory {
@ -1424,7 +1431,7 @@ body.--debug #player-debug {
/* stick me in the center right */ /* stick me in the center right */
place-self: center end; place-self: center end;
} }
#player > .player-hint { #player-game-area > .player-hint-wrapper {
/* Overlay hints on the inventory area */ /* Overlay hints on the inventory area */
grid-row: chips / bonus; grid-row: chips / bonus;
grid-column: level; grid-column: level;