allow editing session head data

style.css

@@ -66,6 +66,7 @@ button {
 .current-round {
   display: grid;
   grid-template-areas:
+    "title title title title"
     "they-raise current-points current-points we-raise"
     "they-win they-win we-win we-win";
   grid-template-columns: 1fr auto auto 1fr;
@@ -74,25 +75,29 @@ button {
   position: sticky;
   bottom: 0;
 
-  .current-points {
+  >h3 {
+    grid-area: title;
+  }
+
+  >.current-points {
     grid-area: current-points;
     align-content: center;
     margin: 0 1em;
   }
 
-  .they-raise {
+  >.they-raise {
     grid-area: they-raise;
   }
 
-  .we-raise {
+  >.we-raise {
     grid-area: we-raise;
   }
 
-  .they-win {
+  >.they-win {
     grid-area: they-win;
   }
 
-  .we-win {
+  >.we-win {
     grid-area: we-win;
   }
 }

ui/round.js

@@ -7,6 +7,7 @@ export default class RoundView {
   /** @param { { attrs: { model: Round } } } param The round model to use. */
   view({ attrs: { model } }) {
     return m("section.current-round", [
+      m("h3", "Rundnschreiba"),
       m("span.current-points", `${model.points}`),
       m("button.they-raise",
         {

ui/session.js

@@ -3,6 +3,7 @@
 import Session from "/models/session.js";
 import GameView from "/ui/game.js";
 import RoundView from "/ui/round.js";
+import SessionHead from "/ui/session_head.js";
 
 export default class SessionView {
   /** @param {{ attrs: { model: Session } }} param The session model to use. */
@@ -12,17 +13,28 @@ export default class SessionView {
 
     return m("article.session-view", [
       m(m.route.Link, { href: "/", selector: "button" }, "Zruck"),
-      m("table", [
+      ( model.games.length === 0 && model.currentGame === null)
-        m("thead", [
+        ? m(SessionHead, { model })
-          m("tr", [
+        : m.fragment([
-            m("th", ["se", " ", "•".repeat(res.theirPoints)]),
+            m("details", [
-            m("th", ["mia", " ", "•".repeat(res.ourPoints)]),
+              m("summary", "Einstellungen"),
-          ]),
+              m(SessionHead, { model }),
-        ]),
+            ]),
-        model.games.map((g) => m(GameView, { model: g })),
+            m("section.record", [
-        model.currentGame !== null
+              m("h3", "Mitschrift"),
-          ? m(GameView, { model: model.currentGame })
+              m("table", [
-          : null,
+                m("thead", [
+                  m("tr", [
+                    m("th", ["se", " ", "•".repeat(res.theirPoints)]),
+                    m("th", ["mia", " ", "•".repeat(res.ourPoints)]),
+                  ]),
+                ]),
+                model.games.map((g) => m(GameView, { model: g })),
+                model.currentGame !== null
+                  ? m(GameView, { model: model.currentGame })
+                  : null,
+              ])
+            ]),
       ]),
       m(".spacer"),
       model.currentGame !== null

ui/session_head.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import { RaisingRule } from "/models/game_rules.js";
+import Session from "/models/session.js";
+
+export default class SessionHead {
+  /** @param {{ attrs: { model: Session } }} param The session model to use. */
+  view({ attrs: { model } }) {
+    return m("section.session_head", [
+      m("h3", "Satzeinstellungen"),
+      m("section.session_head_names", [
+        m("h4", "Teamnamen"),
+        m("label", [
+          "Nam von eana",
+          m("input", {
+            placeholder: "Se",
+            value: model.theirTeam,
+            oninput: (e) => model.theirTeam = e.target.value,
+          }),
+        ]),
+        m("label", [
+          "Nam von ins",
+          m("input", {
+            placeholder: "Mia",
+            value: model.ourTeam,
+            oninput: (e) => model.ourTeam = e.target.value,
+          }),
+        ]),
+      ]),
+      m("section.session_head_base", [
+        m("h4", "Grundregln"),
+        m("label", [
+          "Punkte zum gwinna",
+          m("input", {
+            placeholder: "mindestns 1",
+            type: "number",
+            value: model.rules.goal,
+            oninput: (e) => {
+              let num = parseInt(e.target.value);
+              if (!isNaN(num) && num >= 1)
+                model.rules.goal = num;
+              else
+                alert("Es Punkteziel muas a Nummer größer als null sein.");
+            },
+          }),
+        ]),
+      ]),
+      m("section.session_head_raising", [
+        m("h4", "Erhöhn"),
+        m("label", [
+          m("input", {
+            type: "radio",
+            checked: model.rules.raising === RaisingRule.UnlessStricken,
+            oninput: () => model.rules.raising = RaisingRule.UnlessStricken,
+          }),
+          "Außa wenn gstrichn",
+        ]),
+        m("label", [
+          m("input", {
+            type: "radio",
+            checked: model.rules.raising === RaisingRule.UntilEnough,
+            oninput: () => model.rules.raising = RaisingRule.UntilEnough,
+          }),
+          "Bis es langt",
+        ]),
+      ]),
+    ])
+  }
+}