tfld/watterblock
1
0
Fork 0
Code

implement splash screen

Browse Source
This commit is contained in:
Adrian Wannenmacher 2026-03-09 20:47:21 +01:00
parent a068895037
commit 1ef08a29a4
Signed by: tfld
GPG Key ID: 19D986ECB1E492D5
3 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -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>

1
style.css
View File

@ -6,6 +6,7 @@
@import "/ui/round.css";
@import "/ui/session-list.css";
@import "/ui/session-view.css";
@import "/ui/splash.css";
/* || COLORS
*

33
ui/layout.js
View File

@ -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", [