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> </head>
<body class="wb-layout"> <body class="wb-layout">
<p>Watterblock wird geladen…</p> <div class="wb-splash" id="initial" style="display: none;">
<noscript> <div class="spinner"></div>
<p>Das Laden des Watterblocks ist fehlgeschlagen.</p> <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> <p>
Der Watterblock ist ein Programm, dass direkt in deinem Browser läuft. Des ligt daran, dass ea als Programm direkt in deim Browser laft. Daher
Der Server sendet nur am Anfang die benötigten Dateien. Für die is ea a völlig von <em>JavaScript</em> abhängig. Sonst geht ea nit.
Funktionalität ist daher <em>JavaScript</em> zwingend erforderlich. </p>
<p>
<strong>
Sei doch so guat und schoit <em>JavaScript</em> wieder ein.
</strong>
</p> </p>
<p><strong>Bitte aktiviere <em>JavaScript</em> wieder.</strong></p>
</noscript> </noscript>
</body> </body>

1
style.css
View File

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

33
ui/layout.js
View File

@ -7,6 +7,7 @@ export default class Layout {
#dbErrorsHandled = false; #dbErrorsHandled = false;
constructor() { constructor() {
// set up event handler once db opens
this.#db.addEventListener(WbDb.EVENT_CHANGE, () => { this.#db.addEventListener(WbDb.EVENT_CHANGE, () => {
if (!this.#dbErrorsHandled) { if (!this.#dbErrorsHandled) {
this.#db.addEventListener("error", this.#handleDbError.bind(this)); this.#db.addEventListener("error", this.#handleDbError.bind(this));
@ -15,6 +16,7 @@ export default class Layout {
m.redraw(); m.redraw();
}); });
// set up event handler if db is already open
if (this.#db.open && !this.#dbErrorsHandled) { if (this.#db.open && !this.#dbErrorsHandled) {
this.#db.addEventListener("error", this.#handleDbError.bind(this)); this.#db.addEventListener("error", this.#handleDbError.bind(this));
this.#dbErrorsHandled = true; this.#dbErrorsHandled = true;
@ -27,23 +29,32 @@ export default class Layout {
view({ children, attrs: { backHref }}) { view({ children, attrs: { backHref }}) {
if (this.#db.failed) if (this.#db.failed)
return m.fragment([ return m(".wb-splash", [
m("h1", "Watterblock kann nicht geöffnet werden"), m("h1", ["Watterblock", m("br"), "geht nit"]),
m("p", "Die IndexedDB-Verbindung funktioniert gerade nicht"), 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) if (this.#db.blocked)
return m.fragment([ return m(".wb-splash", [
m("h1", "Watterblock muss warten"), m("h1", ["Watterblock", m("br"), "muss warten"]),
m("p", m("p", [
"Bitte schließe alle anderen Tabs, in denen der Watterblock " + "Di Spieldatnbank muas bessa gmacht werdn. Des geht aba nit, solang ",
"geöffnet ist" "da Block no in am andern Tab offn is."
), ]),
m("p", "Die Spieledatenbank muss aktualisiert werden."), m("p", "Bitte mach alle andern Watterblock-Tabs zua oda lad si nei!"),
]); ]);
if (!this.#db.open) 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([ return m.fragment([
m("header.header._alternate._apply", [ m("header.header._alternate._apply", [