Simplify timer appearance

AlexBuz · Dec 16, 2023 · d4bf7fa · d4bf7fa
1 parent c552525
commit d4bf7fa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -125,23 +125,25 @@ 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 {
                 if best == Some(time) {
                     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>
         }
     }