Add a system for named saves

macrovision.css

@@ -810,7 +810,7 @@ button:enabled:active {
     animation-name: toast-animation;
     animation-duration: 5s;
     animation-timing-function: linear;
-    z-index: 1001;
+    z-index: 99999;
 }
 
 @keyframes toast-animation {

macrovision.js

@@ -1646,14 +1646,22 @@ function prepareSidebar() {
             classes: ["flipped"]
         },
         {
-            name: "Save",
+            name: "Save Scene",
             id: "menu-save",
-            icon: "fas fa-download"
+            icon: "fas fa-download",
+            input: true
         },
         {
-            name: "Load",
+            name: "Load Scene",
             id: "menu-load",
-            icon: "fas fa-upload"
+            icon: "fas fa-upload",
+            select: true
+        },
+        {
+            name: "Delete Scene",
+            id: "menu-delete",
+            icon: "fas fa-trash",
+            select: true
         },
         {
             name: "Load Autosave",
@@ -1695,6 +1703,28 @@ function prepareSidebar() {
 
         buttonHolder.appendChild(button);
         buttonHolder.appendChild(actionText);
+
+        if (entry.input) {
+            const input = document.createElement("input");
+            buttonHolder.appendChild(input);
+            input.placeholder = "default";
+            input.addEventListener("keyup", e => {
+                if (e.key === "Enter") {
+                    const name = document.querySelector("#menu-save ~ input").value;
+                    if (/\S/.test(name)) {
+                        saveScene(name);
+                    }
+                    updateSaveInfo();
+                    e.preventDefault();
+                }
+            })
+        }
+
+        if (entry.select) {
+            const select = document.createElement("select");
+            buttonHolder.appendChild(select);
+        }
+
         menubar.appendChild(buttonHolder);
     });
 }
@@ -1702,6 +1732,7 @@ function prepareSidebar() {
 function checkBodyClass(cls) {
     return document.body.classList.contains(cls);
 }
+
 function toggleBodyClass(cls, setting) {
     if (setting) {
         document.body.classList.add(cls);
@@ -1972,12 +2003,49 @@ function prepareSettings(userSettings) {
 
 function prepareMenu() {
     prepareSidebar();
+    updateSaveInfo();
 
     if (checkHelpDate()) {
         document.querySelector("#open-help").classList.add("highlighted");
     }
 }
 
+function updateSaveInfo() {
+    const saves = getSaves();
+    const load = document.querySelector("#menu-load ~ select");
+    load.innerHTML = "";
+    saves.forEach(save => {
+        const option = document.createElement("option");
+        option.innerText = save;
+        option.value = save;
+        load.appendChild(option);
+    });
+    
+    const del = document.querySelector("#menu-delete ~ select");
+    del.innerHTML = "";
+    saves.forEach(save => {
+        const option = document.createElement("option");
+        option.innerText = save;
+        option.value = save;
+        del.appendChild(option);
+    });
+}
+
+function getSaves() {
+    try {
+        const results = [];
+        Object.keys(localStorage).forEach(key => {
+            if (key.startsWith("macrovision-save-")) {
+                results.push(key.replace("macrovision-save-", ""));
+            }
+        })
+        return results;
+    } catch (err) {
+        alert("Something went wrong while loading (maybe you didn't have anything saved. Check the F12 console for the error.")
+        console.error(err);
+        return false;
+    }
+}
 function getUserSettings() {
     try {
         const settings = JSON.parse(localStorage.getItem("settings"));
@@ -2628,11 +2696,26 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     document.querySelector("#menu-save").addEventListener("click", e => {
-        saveScene();
+        const name = document.querySelector("#menu-save ~ input").value;
+        if (/\S/.test(name)) {
+            saveScene(name);
+        }
+        updateSaveInfo();
     });
 
     document.querySelector("#menu-load").addEventListener("click", e => {
-        loadScene();
+        const name = document.querySelector("#menu-load ~ select").value;
+        if (/\S/.test(name)) {
+            loadScene(name);
+        }
+        
+    });
+
+    document.querySelector("#menu-delete").addEventListener("click", e => {
+        const name = document.querySelector("#menu-delete ~ select").value;
+        if (/\S/.test(name)) {
+            deleteScene(name);
+        }
     });
 
     document.querySelector("#menu-load-autosave").addEventListener("click", e => {
@@ -3424,12 +3507,17 @@ function setWorldHeight(oldHeight, newHeight) {
 }
 
 function loadScene(name = "default") {
+    if (name === "") {
+        name = "default"
+    }
     try {
         const data = JSON.parse(localStorage.getItem("macrovision-save-" + name));
         if (data === null) {
+            console.error("Couldn't load " + name)
             return false;
         }
         importScene(data);
+        toast("Loaded " + name);
         return true;
     } catch (err) {
         alert("Something went wrong while loading (maybe you didn't have anything saved. Check the F12 console for the error.")
@@ -3442,6 +3530,7 @@ function saveScene(name = "default") {
     try {
         const string = JSON.stringify(exportScene());
         localStorage.setItem("macrovision-save-" + name, string);
+        toast("Saved as " + name);
     } catch (err) {
         alert("Something went wrong while saving (maybe I don't have localStorage permissions, or exporting failed). Check the F12 console for the error.")
         console.error(err);
@@ -3449,11 +3538,15 @@ function saveScene(name = "default") {
 }
 
 function deleteScene(name = "default") {
-    try {
-        localStorage.removeItem("macrovision-save-" + name)
-    } catch (err) {
-        console.error(err);
+    if (confirm("Really delete the " + name + " scene?")) {
+        try {
+            localStorage.removeItem("macrovision-save-" + name)
+            toast("Deleted " + name);
+        } catch (err) {
+            console.error(err);
+        }
     }
+    updateSaveInfo();
 }
 
 function exportScene() {