persistant storage popup

index.html

@@ -138,6 +138,32 @@ lib.startGameLoop(loop);
             Copyright © 2025 S. J. Fakobsen (do whatever idc)
         </footer>
 
+        <dialog id="AssetStore-popup">
+            <h1>Karlkoder would like persistant storage permission</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
+                    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.
+            </p>
+            <p>
+                If you deny permission, you can still save and load your code manually with the
+                "save" and "load" buttons, you will just have to vigilant to save and load yourself,
+                as otherwise your data might get randomly cleared between sessions.
+            </p>
+            <p>
+                Even if you enable persistent storage, your browser can still choose to clear your
+                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>
+
         <!-- fix flash bug in furry browser -->
         <script>
             0;

src/asset_store.js

@@ -90,4 +90,44 @@ export class AssetStore {
         this.#isInternalConstructing = true;
         return new AssetStore(db);
     }
+
+    static async requestPersistance() {
+        const storage = globalThis.navigator.storage;
+        let isAlreadyPersisted;
+        try {
+            isAlreadyPersisted = await storage.persisted();
+        } catch {
+            console.log("[AssetStore] User has storage disabled, cannot persist!");
+            return;
+        }
+        if (isAlreadyPersisted) {
+            console.log("[AssetStore] already got persistant storage!");
+            return;
+        }
+        if (globalThis.localStorage.getItem("persistance-denied")) {
+            console.log("[AssetStore] already denied persistant 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;
+                }
+                dialog.close();
+            } catch (err) {
+                error.textContent = `could not persist: ${err}`;
+            }
+        });
+        deny.addEventListener("click", () => {
+            globalThis.localStorage.setItem("persistance-denied", true);
+            dialog.close();
+        });
+        dialog.showModal();
+    }
 }

src/index.js

@@ -8,6 +8,7 @@ import { AssetProvider } from "./asset_provider.js";
 import { Gamelib } from "./gamelib.js";
 import { ConsoleInput } from "./console_input.js";
 import { ProjectSaveHandler } from "./project_save_handler.js";
+import { AssetStore } from "./asset_store.js";
 
 const editor = ace.edit("editor");
 editor.setTheme("ace/theme/gruvbox");
@@ -161,3 +162,5 @@ dropZone.ondrop = async (ev) => {
 
     ev.preventDefault();
 };
+
+AssetStore.requestPersistance();