From 1ef08a29a4d9c751d3d7d6493545fdc8e57e6242 Mon Sep 17 00:00:00 2001
From: Adrian Wannenmacher <tfld@tfld.dev>
Date: Mon, 9 Mar 2026 20:47:21 +0100
Subject: [PATCH] implement splash screen

---
 index.html   | 24 +++++++++++++++++-------
 style.css    |  1 +
 ui/layout.js | 33 ++++++++++++++++++++++-----------
 3 files changed, 40 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index 3adf900..bb7e76a 100644
--- a/index.html
+++ b/index.html
@@ -18,15 +18,25 @@
 </head>
 
 <body class="wb-layout">
-  <p>Watterblock wird geladen…</p>
-  <noscript>
-    <p>Das Laden des Watterblocks ist fehlgeschlagen.</p>
+  <div class="wb-splash" id="initial" style="display: none;">
+    <div class="spinner"></div>
+    <h1>Watterblock</h1>
+    <p>I lad grad…</p>
+  </div>
+  <script>document.getElementById("initial").removeAttribute("style")</script>
+
+  <noscript class="wb-splash">
+    <h1>Watterblock</h1>
+    <p>Da Watterblock kann nit aufgmacht werdn.</p>
     <p>
-      Der Watterblock ist ein Programm, dass direkt in deinem Browser läuft.
-      Der Server sendet nur am Anfang die benötigten Dateien. Für die
-      Funktionalität ist daher <em>JavaScript</em> zwingend erforderlich.
+      Des ligt daran, dass ea als Programm direkt in deim Browser laft. Daher
+      is ea a völlig von <em>JavaScript</em> abhängig. Sonst geht ea nit.
+    </p>
+    <p>
+      <strong>
+        Sei doch so guat und schoit <em>JavaScript</em> wieder ein.
+      </strong>
     </p>
-    <p><strong>Bitte aktiviere <em>JavaScript</em> wieder.</strong></p>
   </noscript>
 </body>
 
diff --git a/style.css b/style.css
index 8f0eeb9..406f5f7 100644
--- a/style.css
+++ b/style.css
@@ -6,6 +6,7 @@
 @import "/ui/round.css";
 @import "/ui/session-list.css";
 @import "/ui/session-view.css";
+@import "/ui/splash.css";
 
 /* || COLORS
  *
diff --git a/ui/layout.js b/ui/layout.js
index 4940991..7b3be8f 100644
--- a/ui/layout.js
+++ b/ui/layout.js
@@ -7,6 +7,7 @@ export default class Layout {
   #dbErrorsHandled = false;
 
   constructor() {
+    // set up event handler once db opens
     this.#db.addEventListener(WbDb.EVENT_CHANGE, () => {
       if (!this.#dbErrorsHandled) {
         this.#db.addEventListener("error", this.#handleDbError.bind(this));
@@ -15,6 +16,7 @@ export default class Layout {
       m.redraw();
     });
 
+    // set up event handler if db is already open
     if (this.#db.open && !this.#dbErrorsHandled) {
       this.#db.addEventListener("error", this.#handleDbError.bind(this));
       this.#dbErrorsHandled = true;
@@ -27,23 +29,32 @@ export default class Layout {
 
   view({ children, attrs: { backHref }}) {
     if (this.#db.failed)
-      return m.fragment([
-        m("h1", "Watterblock kann nicht geöffnet werden"),
-        m("p", "Die IndexedDB-Verbindung funktioniert gerade nicht"),
+      return m(".wb-splash", [
+        m("h1", ["Watterblock", m("br"), "geht nit"]),
+        m("p", [
+          "Di Spieldatnbank kann nit aufgmacht werdn. Des is fast sicha a ",
+          "Fehla im Kod. Meld di doch bitte bei ",
+          m("a", { href: "mailto:tfld@tfld.dev" }, "tfld@tfld.dev"), " und ",
+          "gib ma bscheid, damit i des repariern kann.",
+        ]),
       ]);
 
     if (this.#db.blocked)
-      return m.fragment([
-        m("h1", "Watterblock muss warten"),
-        m("p",
-          "Bitte schließe alle anderen Tabs, in denen der Watterblock " +
-          "geöffnet ist"
-        ),
-        m("p", "Die Spieledatenbank muss aktualisiert werden."),
+      return m(".wb-splash", [
+        m("h1", ["Watterblock", m("br"), "muss warten"]),
+        m("p", [
+          "Di Spieldatnbank muas bessa gmacht werdn. Des geht aba nit, solang ",
+          "da Block no in am andern Tab offn is."
+        ]),
+        m("p", "Bitte mach alle andern Watterblock-Tabs zua oda lad si nei!"),
       ]);
 
     if (!this.#db.open)
-      return m("p", "Öffne Datenbank, bitte warten…");
+      return m(".wb-splash", [
+        m(".spinner"),
+        m("h1", "Watterblock"),
+        m("p", "Geduld, i mach grad di Datnbank auf…"),
+      ]);
 
     return m.fragment([
       m("header.header._alternate._apply", [
