restructure basic UI for better semantics

ui/game.js

@@ -11,33 +11,19 @@ export default class GameView {
 
     let markers = "•".repeat(points);
 
-    return m("section", [
+    return m("[", [
-      m("table", [
+      m("tbody", model.rounds.map(function(round) {
-        m("thead", [
+        return m("tr", [
-          m("tr", [
+          m("td", round.winner === Team.They ? round.points : ""),
-            m("th", "se"), m("th", "mia"),
+          m("td", round.winner === Team.We ? round.points : ""),
-          ]),
+        ]);
-          winner !== null
+      })),
-            ? m("tr", [
+      (!model.decided)
-                m("td", winner === Team.We ? markers : ""),
+        ? m("tfoot", [
-                m("td", winner === Team.They ? markers : ""),
+            m("tr", [
-              ])
+              m("th", theirPoints), m("th", ourPoints),
-            : null,
+           ]),
-        ]),
+          ])
-        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("tfoot", [
-          m("tr", [
-            m("th", theirPoints), m("th", ourPoints),
-          ]),
-        ]),
-      ]),
-      (model.currentRound !== null)
-        ? m(RoundView, { model: model.currentRound })
         : null,
     ]);
   }

ui/session.js

@@ -2,15 +2,37 @@
 
 import Session from "../models/session.js";
 import GameView from "./game.js";
+import RoundView from "./round.js";
 
 export default class SessionView {
   /** @param {{ attrs: { model: Session } }} param The session model to use. */
   view({ attrs: { model, onDeselect } }) {
-    return m("article", [
+
+    let res = model.result;
+
+    return m("article", {
+      class: ["session-view"],
+    }, [
       m("button", { onclick: () => onDeselect() }, "Zruck"),
-      model.games.map((g) => m(GameView, { model: g })),
+      m("table", [
+        m("thead", [
+          m("tr", [
+            m("th", "se"), m("th", "mia"),
+          ]),
+          m("tr", [
+            m("td", "•".repeat(res.theirPoints)),
+            m("td", "•".repeat(res.ourPoints)),
+          ]),
+        ]),
+        model.games.map((g) => m(GameView, { model: g })),
+        model.currentGame !== null
+          ? m(GameView, { model: model.currentGame })
+          : null,
+      ]),
       model.currentGame !== null
-        ? m(GameView, { model: model.currentGame })
+        ? model.currentGame.currentRound !== null
+          ? m(RoundView, { model: model.currentGame.currentRound })
+          : null
         : m("button", { onclick: () => model.anotherGame() }, "no a spiel"),
     ]);
   }

ui/shell.js

@@ -22,7 +22,7 @@ export default class Shell {
     if (this.#currentSession !== null)
       return m(SessionView, {
         model: this.#currentSession,
-        onDeselect: () => this.#currentSession = null;
+        onDeselect: () => this.#currentSession = null,
       });
 
     if (this.#sessions !== null)