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

Make ending more readable, less CPU-heavy

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-01-09 12:46:43 -07:00
parent 723af175cb
commit 69296dff67
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/main.js
View File

@ -1666,7 +1666,7 @@ class Player extends PrimaryView {
// time, say something if you skipped levels...
// TODO disable most of the ui here? probably??
overlay_reason = 'ended';
overlay_middle = "You made your way through a bunch of weird escape rooms! Time to improve your score, or try a new set!";
overlay_middle = "Congratulations! You solved a whole set of funny escape rooms. But is that the best score you can manage...?";
let savefile = this.conductor.current_pack_savefile;
overlay_bottom = `FINAL SCORE: ${savefile.total_score.toLocaleString()}`;
// TODO press spacebar to... restart from level 1?? or what

24
style.css
View File

@ -954,7 +954,7 @@ ol.packtest-summary > li {
position: relative;
display: grid;
grid-template-rows: 2fr 6fr 2fr 1fr;
justify-content: center;
justify-content: stretch;
align-items: center;
/* Prevent blowout; force using the canvas's height */
height: 0;
@ -965,12 +965,14 @@ ol.packtest-summary > li {
z-index: 2;
font-size: calc(0.5 * var(--tile-width) * var(--scale));
padding: 2% 5%;
background: #0009;
color: white;
text-align: center;
text-shadow: 0 2px 1px black;
}
#player .overlay-message > * {
padding: 0 5%;
}
/* Allow clicking through the overlay in debug mode */
body.--debug .overlay-message {
pointer-events: none;
@ -1004,14 +1006,17 @@ body.--debug .overlay-message {
/* Shove the middle + bottom parts down so they don't overlay the busiest part of the ending image */
grid-template-rows: 8fr 4fr 2fr 0;
overflow: hidden;
color: black;
x-color: black;
background: url(ending.png) no-repeat center center / cover;
box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(225, 50%, 25%);
text-shadow: 0 0 2px white, 0 2px 2px white;
x-text-shadow: 0 0 2px white, 0 2px 2px white;
}
#player .overlay-message[data-reason=ended] .-middle {
background: #0009;
}
#player .overlay-message[data-reason=ended] .-top,
#player .overlay-message[data-reason=ended] .-bottom {
font-size: 1.5em;
background: #0006;
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
/* Do this complicated rotating sunburst thing only if masks work */
@ -1024,9 +1029,10 @@ body.--debug .overlay-message {
left: -50%;
right: -50%;
background: repeating-conic-gradient(at center, #fbf8ad 0turn 0.025turn, #f6d87e 0.025turn 0.075turn, #fbf8ad 0.075turn 0.1turn);
animation: ending-spinner 10s linear infinite;
-webkit-mask-image: radial-gradient(at center, #0000 0%, #0006 50%);
mask-image: radial-gradient(at center, #0000 0%, #0006 50%);
/* Alas, the spinning part apparently eats a lot of CPU */
/* animation: ending-spinner 10s linear infinite; */
-webkit-mask-image: radial-gradient(at center, #0000 0%, #000c 50%);
mask-image: radial-gradient(at center, #0000 0%, #000c 50%);
}
}
@keyframes ending-spinner {
@ -1040,7 +1046,7 @@ body.--debug .overlay-message {
dl.score-chart {
display: grid;
grid-auto-columns: 1fr 1fr;
margin: auto;
margin: auto 10%;
font-weight: normal;
}
dl.score-chart dt {