From 69296dff670131e85d22079778010cf6ad346ea8 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Sat, 9 Jan 2021 12:46:43 -0700
Subject: [PATCH] Make ending more readable, less CPU-heavy

---
 js/main.js |  2 +-
 style.css  | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/js/main.js b/js/main.js
index 31e2396..2150121 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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
diff --git a/style.css b/style.css
index 32c9958..474eab3 100644
--- a/style.css
+++ b/style.css
@@ -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 {