Fix bugs, add number buttons, add easter egg

src/main.rs

@@ -1,13 +1,16 @@
+use std::cmp::max;
+
 use dioxus::prelude::*;
 use rand::Rng;
 
 const FAVICON: Asset = asset!("/assets/icon.svg");
 const MAIN_CSS: Asset = asset!("/assets/main.css");
 const SNOW_CSS: Asset = asset!("/assets/snow.css");
+const DANIEL: Asset = asset!("/assets/daniel.png");
 
 #[derive(Clone, Debug, Default)]
 struct State {
-    pub rows: Vec<Vec<u8>>,
+    pub rows: Vec<Vec<u16>>,
 }
 
 impl State {
@@ -19,6 +22,17 @@ impl State {
         row.push(rand::thread_rng().gen_range(1..=6));
     }
 
+    pub fn push(&mut self, value: u16) {
+        if self.row_finished() {
+            return;
+        }
+        self.rows.last_mut().unwrap().push(value);
+    }
+
+    pub fn longest(&self) -> usize {
+        self.rows.iter().map(|row| row.len()).max().unwrap_or(0)
+    }
+
     pub fn row_finished(&self) -> bool {
         match self.rows.last() {
             Some(row) => row.len() > 1 && row.last().copied() == Some(5),
@@ -38,11 +52,28 @@ fn main() {
 #[component]
 fn App() -> Element {
     let mut rows = use_signal(State::default);
-    let snow = false;
+    let longest = use_memo(move || rows.read().longest());
+    let snow = true;
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: MAIN_CSS }
+        document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
+        document::Link { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }
+        document::Link { href: "https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap", rel: "stylesheet" }
         main {
+            onkeydown: move |event: Event<KeyboardData>| {
+                let number = match event.data.key() {
+                    Key::Character(c) if c == "1" => 1,
+                    Key::Character(c) if c == "2" => 2,
+                    Key::Character(c) if c == "3" => 3,
+                    Key::Character(c) if c == "4" => 4,
+                    Key::Character(c) if c == "5" => 5,
+                    Key::Character(c) if c == "6" => 6,
+                    _ => return,
+                };
+                let Ok(mut rows) = rows.try_write() else { return };
+                rows.push(number);
+            },
             table {
                 thead {
                     for _ in 0..20 {
@@ -60,12 +91,12 @@ fn App() -> Element {
                             }
                             td {
                                 class: "number",
-                                colspan: (19 - row.len()).to_string()
+                                colspan: (max(19, longest()).saturating_sub(row.len())).to_string()
                             }
                             td {
                                 class: "number",
                                 b {
-                                    {row.iter().copied().sum::<u8>().to_string()}
+                                    {row.iter().copied().sum::<u16>().to_string()}
                                 }
                             }
                         }
@@ -73,10 +104,22 @@ fn App() -> Element {
                 }
             }
             div {
-                id: "controls",
+                class: "controls",
                 if rows.read().row_finished() {
-                    button { onclick: move |_| rows.write().new_row(), "Start new row" }   
+                    div {
+                        class: "number-buttons",
+                        for n in 1..=6 {
+                            button { disabled: true, "{n}" }
+                        }
+                    }
+                    button { onclick: move |_| rows.write().new_row(), "Start new row" }
                 } else {
+                    div {
+                        class: "number-buttons",
+                        for n in 1..=6 {
+                            button { onclick: move |_| rows.write().push(n), "{n}" }
+                        }
+                    }
                     button { onclick: move |_| rows.write().roll(), "Roll" }
                 }
             }
@@ -100,6 +143,10 @@ fn Snow() -> Element {
                     div { class: "inner", "❅" }
                 }
             }
+            div {
+                class: "snowflake",
+                img { class: "inner", src: DANIEL }
+            }
         }
     }
 }