Polish styling, add row sum

assets/main.css

@@ -1,22 +1,28 @@
 /* App-wide styling */
+html, body, #main {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
 body {
     background-color: #efeffc;
     color: #000000;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
 }
 
 main {
   margin: auto;
   max-width: 40rem;
-  justify-content: center;
+  justify-content: space-between;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
+	margin: 3rem 0;
 }
 
 tr {
@@ -26,6 +32,16 @@ tr {
 td {
     border: 1px solid gray;
     text-align: center;
+	padding: 2px;
+}
+
+#controls {
+	margin: 3rem 0;
+	display: flex;
+}
+
+#controls > * {
+	flex: 1 1 auto;
 }
 
 .number {

src/main.rs

@@ -15,16 +15,20 @@ impl State {
         if self.rows.is_empty() {
             self.rows.push(Vec::new());
         }
-        let row = match self.rows.last_mut() {
+        let row = self.rows.last_mut().unwrap();
-            Some(row) if row.len() > 1 && row.last().copied() == Some(5) => {
-                self.rows.push(Vec::new());
-                self.rows.last_mut().unwrap()
-            }
-            Some(row) => row,
-            None => unreachable!(),
-        };
         row.push(rand::thread_rng().gen_range(1..=6));
     }
+
+    pub fn row_finished(&self) -> bool {
+        match self.rows.last() {
+            Some(row) => row.len() > 1 && row.last().copied() == Some(5),
+            None => true,
+        }
+    }
+
+    pub fn new_row(&mut self) {
+        self.rows.push(Vec::new());
+    }
 }
 
 fn main() {
@@ -34,7 +38,7 @@ fn main() {
 #[component]
 fn App() -> Element {
     let mut rows = use_signal(State::default);
-    let snow = true;
+    let snow = false;
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: MAIN_CSS }
@@ -49,16 +53,33 @@ fn App() -> Element {
                     tr {
                         th { colspan: 100, "Game 1" }
                     }
-                    for row in &rows().rows {
+                    for row in &rows.read().rows {
                         tr {
                             for number in &row {
                                 td { class: "number", "{number}" }
                             }
+                            td {
+                                class: "number",
+                                colspan: (19 - row.len()).to_string()
+                            }
+                            td {
+                                class: "number",
+                                b {
+                                    {row.iter().copied().sum::<u8>().to_string()}
+                                }
+                            }
                         }
                     }
                 }
             }
-            button { onclick: move |_| rows.write().roll(), "Roll" }
+            div {
+                id: "controls",
+                if rows.read().row_finished() {
+                    button { onclick: move |_| rows.write().new_row(), "Start new row" }   
+                } else {
+                    button { onclick: move |_| rows.write().roll(), "Roll" }
+                }
+            }
         }
         if snow {
             Snow {}