From d4bf7fafb822f5a5d9afa20a049efbbc81f8e01a Mon Sep 17 00:00:00 2001
From: AlexBuz <alexbuzanis@gmail.com>
Date: Fri, 15 Dec 2023 21:45:39 -0600
Subject: [PATCH] Simplify timer appearance

---
 main.css            |  6 +++++-
 src/client/timer.rs | 16 +++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/main.css b/main.css
index ea51702..d639e07 100644
--- a/main.css
+++ b/main.css
@@ -70,7 +70,11 @@ thead td {
 .timer {
     padding: 1px 3px;
     border-radius: 3px;
-    font-family: 'Courier New', Courier, monospace;
+    font-family: 'Menlo', 'Consolas', monospace;
+}
+
+.timer.faded {
+    color: gray;
 }
 
 tbody:not(.punish-guessing) {
diff --git a/src/client/timer.rs b/src/client/timer.rs
index 9840dc8..e550ce9 100644
--- a/src/client/timer.rs
+++ b/src/client/timer.rs
@@ -125,11 +125,9 @@ impl Component for Timer {
         let props = ctx.props();
         let best = self.best_times.get(&props.game_config).copied();
         let mut timer_classes = classes!("timer");
-        let content = if let TimerMode::Reset = props.timer_mode {
-            match best {
-                Some(best) => format!("Best: {}", TimerElapsed(best)),
-                None => String::from("Best: N/A"),
-            }
+        let time = if let TimerMode::Reset = props.timer_mode {
+            timer_classes.push("faded");
+            best
         } else {
             let time = self.elapsed_secs();
             if let TimerMode::Stopped { won_game: true } = props.timer_mode {
@@ -137,11 +135,15 @@ impl Component for Timer {
                     timer_classes.push("bg-green");
                 }
             }
-            format!("Time: {}", TimerElapsed(time))
+            Some(time)
         };
         html! {
             <span class={timer_classes}>
-                { content }
+                { if let Some(time) = time {
+                    html! { <> { TimerElapsed(time) } </> }
+                } else {
+                    html! { <> { "--:--.--" } </> }
+                } }
             </span>
         }
     }