From 55214fad75af6390a4dd389d05a824477cbc8124 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Thu, 10 Sep 2020 18:07:49 -0600
Subject: [PATCH] Add some visual feedback to the chip, time, and score
 counters

---
 js/main.js | 18 ++++++++++++++++++
 style.css  | 26 ++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/js/main.js b/js/main.js
index 775a657..46e5167 100644
--- a/js/main.js
+++ b/js/main.js
@@ -369,6 +369,13 @@ class Player extends PrimaryView {
     restart_level() {
         this.level.restart(this.compat);
         this.set_state('waiting');
+
+        this.chips_el.classList.remove('--done');
+        this.time_el.classList.remove('--frozen');
+        this.time_el.classList.remove('--danger');
+        this.time_el.classList.remove('--warning');
+        this.root.classList.remove('--bonus-visible');
+
         this.update_ui();
         this._redraw();
     }
@@ -504,13 +511,24 @@ class Player extends PrimaryView {
 
         // TODO can we do this only if they actually changed?
         this.chips_el.textContent = this.level.chips_remaining;
+        if (this.level.chips_remaining === 0) {
+            this.chips_el.classList.add('--done');
+        }
+
+        this.time_el.classList.toggle('--frozen', this.level.time_remaining === null || this.level.timer_paused);
         if (this.level.time_remaining === null) {
             this.time_el.textContent = '---';
         }
         else {
             this.time_el.textContent = Math.ceil(this.level.time_remaining / 20);
+            this.time_el.classList.toggle('--warning', this.level.time_remaining < 30 * 20);
+            this.time_el.classList.toggle('--danger', this.level.time_remaining < 10 * 20);
         }
+
         this.bonus_el.textContent = this.level.bonus_points;
+        if (this.level.bonus_points > 0) {
+            this.root.classList.add('--bonus-visible');
+        }
         this.message_el.textContent = this.level.hint_shown ?? "";
 
         this.inventory_el.textContent = '';
diff --git a/style.css b/style.css
index 85bf198..fc677e2 100644
--- a/style.css
+++ b/style.css
@@ -409,10 +409,32 @@ dl.score-chart .-sum {
     line-height: 1;
     text-align: right;
     font-family: monospace;
-    color: hsl(45, 100%, 60%);
-    background: #080808;
+    color: hsl(45, 100%, 40%);
+    background: hsl(0, 0%, 3%);
     border: 1px inset #202020;
 }
+.chips output.--done {
+    color: hsl(90, 100%, 40%);
+    background: hsl(90, 50%, 3%);
+}
+.time output.--warning {
+    color: hsl(30, 100%, 40%);
+    background: hsl(0, 50%, 5%);
+}
+.time output.--danger {
+    color: hsl(0, 100%, 40%);
+    background: hsl(0, 75%, 8%);
+}
+.time output.--frozen {
+    color: hsl(195, 100%, 40%);
+    background: hsl(195, 25%, 3%);
+}
+#player .bonus {
+    visibility: hidden;
+}
+#player.--bonus-visible .bonus {
+    visibility: initial;
+}
 
 .message {
     grid-area: message;