use overlay for persistent storage

index.html

@@ -140,11 +140,11 @@ lib.startGameLoop(loop);
             Copyright © 2025 S. J. Fakobsen (do whatever idc)
         </footer>
 
-        <dialog id="AssetStore-popup">
-            <h1>Karlkoder would like persistant storage permission</h1>
+        <div id="persistent-storage-overlay">
+            <h1>Allow persistent storage to avoid data loss</h1>
             <p>
                 Your code is saved only in your browser, not on our servers. To provide an optimal
-                experience, we would permission to use <a
+                experience, we would like permission to use <a
                     href="https://developer.mozilla.org/en-US/docs/Web/API/StorageManager/persist"
                 >persistent storage</a>, otherwise, your browser may clear your Karlkoder data at
                 any point it wants to.
@@ -159,12 +159,7 @@ lib.startGameLoop(loop);
                 data, i.e. if you clear your browser history, so we would still recommend to save it
                 to your hard drive every now and then.
             </p>
-            <p><b id="AssetStore-popup-error"></b></p>
-            <button id="AssetStore-popup-allow">
-                Allow persistant storage (Will create a popup from browser)
-            </button>
-            <button id="AssetStore-popup-deny">Don't allow persistent storage</button>
-        </dialog>
+        </div>
 
         <!-- fix flash bug in furry browser -->
         <script>

src/asset_store.js

@@ -107,37 +107,32 @@ export class AssetStore {
         try {
             isAlreadyPersisted = await storage.persisted();
         } catch {
-            console.log("[AssetStore] User has storage disabled, cannot persist!");
+            console.warn("[AssetStore] User has storage disabled, cannot persist!");
             return;
         }
+
         if (isAlreadyPersisted) {
             console.log("[AssetStore] already got persistent storage!");
             return;
         }
-        if (globalThis.localStorage.getItem("persistence-denied")) {
+
+        if (localStorage.getItem("persistence-denied")) {
             console.log("[AssetStore] already denied persistent storage!");
             return;
         }
-        const dialog = document.querySelector("#AssetStore-popup");
-        const error = dialog.querySelector("#AssetStore-popup-error");
-        const allow = dialog.querySelector("#AssetStore-popup-allow");
-        const deny = dialog.querySelector("#AssetStore-popup-deny");
-        allow.addEventListener("click", async () => {
-            try {
-                const didPersist = await storage.persist();
-                if (!didPersist) {
-                    error.textContent = "could not persist: permission denied";
-                    return;
+
+        const overlay = document.querySelector("#persistent-storage-overlay");
+        overlay.style.display = "flex";
+
+        const persisted = await storage.persist();
+
+        if (!persisted) {
+            alert("Persistent storage denied - Please remember to save often!");
+
+            localStorage.setItem("persistence-denied", "1");
         }
-                dialog.close();
-            } catch (err) {
-                error.textContent = `could not persist: ${err}`;
-            }
-        });
-        deny.addEventListener("click", () => {
-            globalThis.localStorage.setItem("persistence-denied", true);
-            dialog.close();
-        });
-        dialog.showModal();
+
+        overlay.style.opacity = 0;
+        setTimeout(() => overlay.style.display = "none", 200);
     }
 }

src/index.js

@@ -81,6 +81,8 @@ const loadButton = document.querySelector("#load-button");
 const exportButton = document.querySelector("#export-button");
 const dropZone = document.querySelector("main");
 
+AssetStore.requestPersistence();
+
 const sessionSaveHandler = new SessionSaveHandler(editor, projectName);
 sessionSaveHandler.loadAll();
 
@@ -156,5 +158,3 @@ dropZone.ondrop = async (ev) => {
 
     ev.preventDefault();
 };
-
-AssetStore.requestPersistence();

style.css

@@ -436,3 +436,25 @@ footer {
     align-items: center;
     justify-content: center;
 }
+
+#persistent-storage-overlay {
+    display: none;
+    position: absolute;
+    inset: 0;
+    padding: 0 20rem;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    z-index: 100;
+    transition: opacity 200ms ease-in-out;
+}
+
+#persistent-storage-overlay p {
+    color: #bdbdbd;
+}
+
+#persistent-storage-overlay a {
+    color: #2196f3;
+}