From eba36600b9228cc9b7187614b0eb616712bd68a4 Mon Sep 17 00:00:00 2001
From: Adrian Wannenmacher <tfld@tfld.dev>
Date: Wed, 18 Feb 2026 19:01:14 +0100
Subject: [PATCH] make session UI somewhat nice

---
 index.html                   |   2 +
 style.css                    | 105 +++++++++++
 ui/game.js                   |  14 +-
 ui/round.js                  |  72 ++++----
 ui/session.js                |  23 ++-
 vendored/normalize-8.0.1.css | 349 +++++++++++++++++++++++++++++++++++
 6 files changed, 521 insertions(+), 44 deletions(-)
 create mode 100644 style.css
 create mode 100644 vendored/normalize-8.0.1.css

diff --git a/index.html b/index.html
index c6f3404..a027b0e 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Watterblock</title>
+  <link rel="stylesheet" href="vendored/normalize-8.0.1.css">
+  <link rel="stylesheet" href="style.css">
   <script src="vendored/mithril-2.3.8.js" defer></script>
   <script type="module">
     // initialize DB early
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c36c8c4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  height: 1px;
+}
+
+.session-view {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  >.spacer {
+    flex-grow: 1;
+  }
+
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    text-align: center;
+  }
+
+  th,
+  td {
+    border-right: 1px solid black;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  thead {
+    border-bottom: 1px solid black;
+    position: sticky;
+    top: 0;
+    background: white;
+  }
+
+  tbody {
+    border-bottom: 1px solid black;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    min-height: 5px;
+  }
+}
+
+button {
+  border: none;
+  border-radius: 5px;
+  background: light-grey;
+  padding: 0.5em 1em;
+  margin: 0.5em;
+}
+
+.current-round {
+  display: grid;
+  grid-template-areas:
+    "they-raise current-points current-points we-raise"
+    "they-win they-win we-win we-win";
+  grid-template-columns: 1fr auto auto 1fr;
+
+  background: white;
+  position: sticky;
+  bottom: 0;
+
+  .current-points {
+    grid-area: current-points;
+    align-content: center;
+    margin: 0 1em;
+  }
+
+  .they-raise {
+    grid-area: they-raise;
+  }
+
+  .we-raise {
+    grid-area: we-raise;
+  }
+
+  .they-win {
+    grid-area: they-win;
+  }
+
+  .we-win {
+    grid-area: we-win;
+  }
+}
+
+.continue {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  background: white;
+
+  >* {
+    width: calc(100% - 1em);
+  }
+}
\ No newline at end of file
diff --git a/ui/game.js b/ui/game.js
index 52638f3..eb6f060 100644
--- a/ui/game.js
+++ b/ui/game.js
@@ -12,12 +12,14 @@ export default class GameView {
     let markers = "•".repeat(points);
 
     return m("[", [
-      m("tbody", model.rounds.map(function(round) {
-        return m("tr", [
-          m("td", round.winner === Team.They ? round.points : ""),
-          m("td", round.winner === Team.We ? round.points : ""),
-        ]);
-      })),
+      (model.rounds.length !== 0)
+        ? m("tbody", model.rounds.map(function(round) {
+            return m("tr", [
+              m("td", round.winner === Team.They ? round.points : ""),
+              m("td", round.winner === Team.We ? round.points : ""),
+            ]);
+          }))
+        : m("tbody", [ m("td", "0"), m("td", "0") ]),
       (!model.decided)
         ? m("tfoot", [
             m("tr", [
diff --git a/ui/round.js b/ui/round.js
index 992a4d7..6bc5b57 100644
--- a/ui/round.js
+++ b/ui/round.js
@@ -12,40 +12,48 @@ export default class RoundView {
     else if (model.winner === Team.They)
       winner = "se";
 
-    return m("section", [
-      m("p", `${model.points} Punkte`),
-      m("div", [
-        m("button",
-          {
-            onclick: () => model.raise(Team.They),
-            disabled: !model.canRaise(Team.They),
+    return m("section.current-round", [
+      m("span.current-points", `${model.points}`),
+      m("button.they-raise",
+        {
+          onclick: () => model.raise(Team.They),
+          disabled: !model.canRaise(Team.They),
+        },
+        "se erhöhn",
+      ),
+      m("button.we-raise",
+        {
+          onclick: () => model.raise(Team.We),
+          disabled: !model.canRaise(Team.We),
+        },
+        "mia erhöhn",
+      ),
+      m("button.they-win",
+        {
+          onclick: () => {
+            model.winner = Team.They;
+            window.scrollTo({
+              top: document.body.scrollHeight,
+              behavior: "smooth",
+            });
           },
-          "se erhöhn",
-        ),
-        m("button",
-          {
-            onclick: () => model.raise(Team.We),
-            disabled: !model.canRaise(Team.We),
+          disabled: model.decided,
+        },
+        "se habn gwonnen",
+      ),
+      m("button.we-win",
+        {
+          onclick: () => {
+            model.winner = Team.We;
+            window.scrollTo({
+              top: document.body.scrollHeight,
+              behavior: "smooth",
+            });
           },
-          "mia erhöhn",
-        ),
-      ]),
-      m("div", [
-        m("button",
-          {
-            onclick: () => model.winner = Team.They,
-            disabled: model.decided,
-          },
-          "se habn gwonnen",
-        ),
-        m("button",
-          {
-            onclick: () => model.winner = Team.We,
-            disabled: model.decided,
-          },
-          "mia habn gwonnen",
-        ),
-      ]),
+          disabled: model.decided,
+        },
+        "mia habn gwonnen",
+      ),
     ]);
   }
 }
diff --git a/ui/session.js b/ui/session.js
index 7226352..1b8f1f1 100644
--- a/ui/session.js
+++ b/ui/session.js
@@ -10,9 +10,7 @@ export default class SessionView {
 
     let res = model.result;
 
-    return m("article", {
-      class: ["session-view"],
-    }, [
+    return m("article.session-view", [
       m("button", { onclick: () => onDeselect() }, "Zruck"),
       m("table", [
         m("thead", [
@@ -20,8 +18,8 @@ export default class SessionView {
             m("th", "se"), m("th", "mia"),
           ]),
           m("tr", [
-            m("td", "•".repeat(res.theirPoints)),
-            m("td", "•".repeat(res.ourPoints)),
+            m("th", "•".repeat(res.theirPoints)),
+            m("th", "•".repeat(res.ourPoints)),
           ]),
         ]),
         model.games.map((g) => m(GameView, { model: g })),
@@ -29,11 +27,24 @@ export default class SessionView {
           ? m(GameView, { model: model.currentGame })
           : null,
       ]),
+      m(".spacer"),
       model.currentGame !== null
         ? model.currentGame.currentRound !== null
           ? m(RoundView, { model: model.currentGame.currentRound })
           : null
-        : m("button", { onclick: () => model.anotherGame() }, "no a spiel"),
+        : m(".continue", [
+            m("button",
+              {
+                onclick: () => {
+                  model.anotherGame();
+                  window.scrollTo({
+                    top: document.body.scrollHeight,
+                    behavior: "smooth",
+                  });
+                },
+              },
+              "no a spiel"),
+          ]),
     ]);
   }
 }
diff --git a/vendored/normalize-8.0.1.css b/vendored/normalize-8.0.1.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/vendored/normalize-8.0.1.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}