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... // time, say something if you skipped levels...
// TODO disable most of the ui here? probably?? // TODO disable most of the ui here? probably??
overlay_reason = 'ended'; 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; let savefile = this.conductor.current_pack_savefile;
overlay_bottom = `FINAL SCORE: ${savefile.total_score.toLocaleString()}`; overlay_bottom = `FINAL SCORE: ${savefile.total_score.toLocaleString()}`;
// TODO press spacebar to... restart from level 1?? or what // 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; position: relative;
display: grid; display: grid;
grid-template-rows: 2fr 6fr 2fr 1fr; grid-template-rows: 2fr 6fr 2fr 1fr;
justify-content: center; justify-content: stretch;
align-items: center; align-items: center;
/* Prevent blowout; force using the canvas's height */ /* Prevent blowout; force using the canvas's height */
height: 0; height: 0;
@ -965,12 +965,14 @@ ol.packtest-summary > li {
z-index: 2; z-index: 2;
font-size: calc(0.5 * var(--tile-width) * var(--scale)); font-size: calc(0.5 * var(--tile-width) * var(--scale));
padding: 2% 5%;
background: #0009; background: #0009;
color: white; color: white;
text-align: center; text-align: center;
text-shadow: 0 2px 1px black; text-shadow: 0 2px 1px black;
} }
#player .overlay-message > * {
padding: 0 5%;
}
/* Allow clicking through the overlay in debug mode */ /* Allow clicking through the overlay in debug mode */
body.--debug .overlay-message { body.--debug .overlay-message {
pointer-events: none; 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 */ /* 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; grid-template-rows: 8fr 4fr 2fr 0;
overflow: hidden; overflow: hidden;
color: black; x-color: black;
background: url(ending.png) no-repeat center center / cover; background: url(ending.png) no-repeat center center / cover;
box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(225, 50%, 25%); 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 { #player .overlay-message[data-reason=ended] .-bottom {
font-size: 1.5em; font-size: 1.5em;
background: #0006;
} }
@supports (mask-image: none) or (-webkit-mask-image: none) { @supports (mask-image: none) or (-webkit-mask-image: none) {
/* Do this complicated rotating sunburst thing only if masks work */ /* Do this complicated rotating sunburst thing only if masks work */
@ -1024,9 +1029,10 @@ body.--debug .overlay-message {
left: -50%; left: -50%;
right: -50%; right: -50%;
background: repeating-conic-gradient(at center, #fbf8ad 0turn 0.025turn, #f6d87e 0.025turn 0.075turn, #fbf8ad 0.075turn 0.1turn); 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; /* Alas, the spinning part apparently eats a lot of CPU */
-webkit-mask-image: radial-gradient(at center, #0000 0%, #0006 50%); /* animation: ending-spinner 10s linear infinite; */
mask-image: radial-gradient(at center, #0000 0%, #0006 50%); -webkit-mask-image: radial-gradient(at center, #0000 0%, #000c 50%);
mask-image: radial-gradient(at center, #0000 0%, #000c 50%);
} }
} }
@keyframes ending-spinner { @keyframes ending-spinner {
@ -1040,7 +1046,7 @@ body.--debug .overlay-message {
dl.score-chart { dl.score-chart {
display: grid; display: grid;
grid-auto-columns: 1fr 1fr; grid-auto-columns: 1fr 1fr;
margin: auto; margin: auto 10%;
font-weight: normal; font-weight: normal;
} }
dl.score-chart dt { dl.score-chart dt {