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! { - { content } + { if let Some(time) = time { + html! { <> { TimerElapsed(time) } } + } else { + html! { <> { "--:--.--" } } + } } } }