Fix bugs, add number buttons, add easter egg

Cargo.toml

@@ -7,8 +7,8 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { version = "0.6.0", features = [] }
-getrandom = { version = "0.2" }
+dioxus = { version = "0.7.2", features = [] }
+getrandom = "0.2"
 rand = "0.8"
 
 [features]

assets/main.css

@@ -5,51 +5,63 @@ html, body, #main {
 	height: 100%;
 }
 body {
-    background-color: #efeffc;
-    color: #000000;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	background-color: #efeffc;
+	color: #000000;
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 main {
-  margin: auto;
-  max-width: 40rem;
-  justify-content: space-between;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+	margin: auto;
+	max-width: 40rem;
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 	margin: 3rem 0;
 }
 
 tr {
-    border: 1px solid gray;
+	border: 1px solid gray;
 }
 
 td {
-    border: 1px solid gray;
-    text-align: center;
+	border: 1px solid gray;
+	text-align: center;
 	padding: 2px;
 }
 
-#controls {
+.controls {
 	margin: 3rem 0;
 	display: flex;
+	flex-direction: column;
+
+	justify-items: stretch;
+	gap: 1rem;
+}
+.controls button {
+	flex: 1 1 auto;
+	font-size: larger;
+	font-weight: bold;
 }
 
-#controls > * {
-	flex: 1 1 auto;
+.controls .number-buttons {
+	display: flex;
+	justify-content: stretch;
+	gap: 1rem;
 }
 
+
 .number {
-    width: 1rem;
-    animation: 1s ease-in-out 1s backwards number-scale;
+	width: 1rem;
+	animation: 1s ease-in-out 1s backwards number-scale;
 }
 
 @keyframes number-scale {
-    from { font-size: xx-large; }
-    to { font-size: initial; }
+	from { font-size: xx-large; }
+	to { font-size: initial; }
 }

assets/snow.css

@@ -6,6 +6,10 @@
 	text-shadow: 0 0 5px #000;
 }
 
+.snowflake img {
+	width: 64px;
+}
+
 .snowflake,
 .snowflake .inner {
 	animation-iteration-count: infinite;
@@ -81,6 +85,7 @@
 	animation-delay: 6s
 }
 
+.snowflake:nth-of-type(12) .inner,
 .snowflake:nth-of-type(3) {
 	left: 30%;
 	animation-delay: 2s
@@ -147,3 +152,12 @@
 	left: 65%;
 	animation-delay: 2.5s
 }
+
+.snowflake:nth-of-type(12) {
+	left: 5%;
+	animation-delay: 3.5s;
+}
+
+.snowflake:nth-of-type(13) {
+	left: -5%;
+}

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 }
+            }
         }
     }
 }