Add project files.

2026-07-09 08:52:32 +02:00
parent c0df845c6e
commit b72f04cb4e
22 changed files with 1811 additions and 0 deletions
@@ -0,0 +1,118 @@
+<style>
+    .components-reconnect-first-attempt-visible,
+    .components-reconnect-repeated-attempt-visible,
+    .components-reconnect-failed-visible,
+    .components-pause-visible,
+    .components-resume-failed-visible,
+    .components-rejoining-animation {
+        display: none;
+    }
+
+    #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
+    #components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
+    #components-reconnect-modal.components-reconnect-paused .components-pause-visible,
+    #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
+    #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
+    #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
+    #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
+        display: block;
+    }
+</style>
+
+<dialog id="components-reconnect-modal" class="bg-white w-80 my-[20vh] mx-auto p-8 rounded-lg shadow-lg opacity-0 transition-all duration-500 backdrop:bg-black/40 backdrop:animate-[fadeIn_0.5s_ease-in-out] open:animate-[slideUp_1.5s_cubic-bezier(0.05,0.89,0.25,1.02)_0.3s,fadeIn_0.5s_ease-in-out_0.3s]" data-nosnippet>
+    <div class="flex flex-col items-center gap-4">
+        <div class="components-rejoining-animation relative w-20 h-20" aria-hidden="true">
+            <div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite]"></div>
+            <div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite] -delay-500"></div>
+        </div>
+        <p class="components-reconnect-first-attempt-visible m-0 text-center">
+            Rejoining the server...
+        </p>
+        <p class="components-reconnect-repeated-attempt-visible m-0 text-center">
+            Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
+        </p>
+        <p class="components-reconnect-failed-visible m-0 text-center">
+            Failed to rejoin.<br />Please retry or reload the page.
+        </p>
+        <button id="components-reconnect-button" class="components-reconnect-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
+            Retry
+        </button>
+        <p class="components-pause-visible m-0 text-center">
+            The session has been paused by the server.
+        </p>
+        <p class="components-resume-failed-visible m-0 text-center">
+            Failed to resume the session.<br />Please retry or reload the page.
+        </p>
+        <button id="components-resume-button" class="components-pause-visible components-resume-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
+            Resume
+        </button>
+    </div>
+</dialog>
+
+<script>
+    (function () {
+        // Set up event handlers
+        const reconnectModal = document.getElementById("components-reconnect-modal");
+        reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
+
+        const retryButton = document.getElementById("components-reconnect-button");
+        retryButton.addEventListener("click", retry);
+
+        const resumeButton = document.getElementById("components-resume-button");
+        resumeButton.addEventListener("click", resume);
+
+        function handleReconnectStateChanged(event) {
+            if (event.detail.state === "show") {
+                reconnectModal.showModal();
+            } else if (event.detail.state === "hide") {
+                reconnectModal.close();
+            } else if (event.detail.state === "failed") {
+                document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+            } else if (event.detail.state === "rejected") {
+                location.reload();
+            }
+        }
+
+        async function retry() {
+            document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+
+            try {
+                // Reconnect will asynchronously return:
+                // - true to mean success
+                // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
+                // - exception to mean we didn't reach the server (this can be sync or async)
+                const successful = await Blazor.reconnect();
+                if (!successful) {
+                    // We have been able to reach the server, but the circuit is no longer available.
+                    // We'll reload the page so the user can continue using the app as quickly as possible.
+                    const resumeSuccessful = await Blazor.resumeCircuit();
+                    if (!resumeSuccessful) {
+                        location.reload();
+                    } else {
+                        reconnectModal.close();
+                    }
+                }
+            } catch (err) {
+                // We got an exception, server is currently unavailable
+                document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+            }
+        }
+
+        async function resume() {
+            try {
+                const successful = await Blazor.resumeCircuit();
+                if (!successful) {
+                    location.reload();
+                }
+            } catch {
+                reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
+            }
+        }
+
+        async function retryWhenDocumentBecomesVisible() {
+            if (document.visibilityState === "visible") {
+                await retry();
+            }
+        }
+    })();
+</script>