2 files changed, 28 insertions, 11 deletions
diff --git a/web/js-transition.css b/web/js-transition.css
index 54a899f..867e30c 100644
--- a/web/js-transition.css
+++ b/web/js-transition.css
@@ -14,3 +14,21 @@
         background-color: transparent;
     }
 }
+
+.jst-fade {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+}
+.jst-error {
+    position: fixed;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+    color: rgb(247, 69, 69);
+    font-size: large;
+    z-index: 101;
+}
diff --git a/web/script/transition.ts b/web/script/transition.ts
index 809abd6..747ed70 100644
--- a/web/script/transition.ts
+++ b/web/script/transition.ts
@@ -5,6 +5,8 @@
 */
 /// <reference lib="dom" />
 
+import { e } from "./jshelper/src/element.ts";
+
 const duration = 200
 globalThis.addEventListener("load", () => {
     patch_page()
@@ -12,7 +14,6 @@ globalThis.addEventListener("load", () => {
 
 globalThis.addEventListener("popstate", (_e) => {
     transition_to(window.location.href, true)
-    // transition_to(_e.state.href, true)
 })
 
 function patch_page() {
@@ -30,23 +31,26 @@ async function transition_to(href: string, back?: boolean) {
     trigger_load()
 }
 
+function show_error(mesg: string) {
+    document.body.append(e("span", { class: "jst-error" }, mesg))
+}
+
 function prepare_load(href: string, back?: boolean) {
     const r_promise = fetch(href)
     return async () => {
         let rt = ""
         try {
             const r = await r_promise
-            if (!r.ok) return document.body.innerHTML = "<h1>error</h1>"
+            if (!r.ok) return show_error("Error response. Try again.")
             rt = await r.text()
         } catch (e) {
-            console.error(e)
-            return
+            if (e instanceof TypeError) return show_error("Navigation failed. Check your connection.")
+            return show_error("unknown error when fetching page")
         }
         const [head, body] = rt.split("<head>")[1].split("</head>")
         document.head.innerHTML = head
         document.body.outerHTML = body
         fade(true)
-        // if (!back) window.history.pushState({href}, "", href)
         if (!back) window.history.pushState({}, "", href)
         patch_page()
     }
@@ -54,13 +58,8 @@ function prepare_load(href: string, back?: boolean) {
 
 function fade(dir: boolean) {
     const overlay = document.createElement("div")
-    overlay.style.position = "absolute"
-    overlay.style.left = "0px"
-    overlay.style.top = "0px"
-    overlay.style.width = "100vw"
-    overlay.style.height = "100vh"
+    overlay.classList.add("jst-fade")
     overlay.style.backgroundColor = dir ? "black" : "transparent"
-    overlay.style.zIndex = "99999";
     overlay.style.animationName = dir ? "jst-fadeout" : "jst-fadein"
     overlay.style.animationFillMode = "forwards"
     overlay.style.animationDuration = `${duration}ms`