make session UI somewhat nice

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

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

ui/game.js

@@ -12,12 +12,14 @@ export default class GameView {
     let markers = "•".repeat(points);
 
     return m("[", [
-      m("tbody", model.rounds.map(function(round) {
+      (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", [

ui/round.js

@@ -12,40 +12,48 @@ export default class RoundView {
     else if (model.winner === Team.They)
       winner = "se";
 
-    return m("section", [
+    return m("section.current-round", [
-      m("p", `${model.points} Punkte`),
+      m("span.current-points", `${model.points}`),
-      m("div", [
+      m("button.they-raise",
-        m("button",
         {
           onclick: () => model.raise(Team.They),
           disabled: !model.canRaise(Team.They),
         },
         "se erhöhn",
       ),
-        m("button",
+      m("button.we-raise",
         {
           onclick: () => model.raise(Team.We),
           disabled: !model.canRaise(Team.We),
         },
         "mia erhöhn",
       ),
-      ]),
+      m("button.they-win",
-      m("div", [
-        m("button",
         {
-            onclick: () => model.winner = Team.They,
+          onclick: () => {
+            model.winner = Team.They;
+            window.scrollTo({
+              top: document.body.scrollHeight,
+              behavior: "smooth",
+            });
+          },
           disabled: model.decided,
         },
         "se habn gwonnen",
       ),
-        m("button",
+      m("button.we-win",
         {
-            onclick: () => model.winner = Team.We,
+          onclick: () => {
+            model.winner = Team.We;
+            window.scrollTo({
+              top: document.body.scrollHeight,
+              behavior: "smooth",
+            });
+          },
           disabled: model.decided,
         },
         "mia habn gwonnen",
       ),
-      ]),
     ]);
   }
 }

ui/session.js

@@ -10,9 +10,7 @@ export default class SessionView {
 
     let res = model.result;
 
-    return m("article", {
+    return m("article.session-view", [
-      class: ["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("th", "•".repeat(res.theirPoints)),
-            m("td", "•".repeat(res.ourPoints)),
+            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"),
+          ]),
     ]);
   }
 }

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