Stylize stats

This commit is contained in:
Yash Karandikar 2021-11-23 15:34:28 -06:00
parent 50f53e747d
commit 9724a6a0b3
Signed by: karx
GPG key ID: A794DA2529474BA5
2 changed files with 39 additions and 6 deletions

View file

@ -118,12 +118,28 @@ fn main() {
sycamore::render(|| {
template! {
div(class="wrapper") {
p { (time_left.get()) }
p { (total_errors.get()) }
p { (error_count.get()) }
p { (characters_typed.get()) }
p { (cpm.get()) }
p { (wpm.get()) }
div(class="text-align-center") {
div(class="inline card") {
"Time Left"
br {}
(time_left.get())
}
div(class="inline incorrect card") {
"Total Errors"
br {}
(total_errors.get())
}
div(class="inline card") {
"CPM"
br {}
(((*cpm.get()).round() as u64))
}
div(class="inline card") {
"WPM"
br {}
(((*wpm.get()).round() as u64))
}
}
(if !*finished.get() {
cloned!((value) => template! {
div(id="quote") {

View file

@ -19,4 +19,21 @@
.text-align-center {
text-align: center;
}
.card {
border: 0.1rem solid #d1d1d1;
border-radius: .4rem;
padding: .6rem 1.0rem .7rem;
margin-bottom: 1.5rem;
word-wrap: break-word;
white-space: pre-wrap;
}
.inline {
display: inline-block;
}
.card + .card {
margin-left: .75rem;
}