Loading/error overlay

ScottyThePilot · Nov 11, 2023 · 6bceb77 · 6bceb77
1 parent 81548da
commit 6bceb77
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
     <script src="main.js"></script>
   </head>
   <body>
+    <div id="planner-overlay" class="hide"></div>
     <div id="planner-container">
       <header>
         <h1>Project Zomboid Build Planner</h1>

diff --git a/main.js b/main.js
@@ -47,6 +47,12 @@ SKILL_NAMES.set("Foraging", "Foraging");
 $(window).on("load", function () {
   reload(DEFAULT_MOD_URLS);
 
+  $(window).on("keydown", function (event) {
+    if (event.key == "Escape") {
+      $("#planner-overlay").addClass("hide").empty();
+    }
+  });
+
   $("#setting-is-multiplayer").on("change", function () {
     if (State.instance == null) return;
     const state = State.get();
@@ -88,11 +94,18 @@ $(window).on("load", function () {
 
 /** @param {string[]} modUrls */
 async function reload(modUrls) {
+  $("#planner-overlay").removeClass("hide").text("Loading...");
   const expandedModUrls = modUrls.map(expandLink);
+  await Promise.all(expandedModUrls.map(fetchJSON))
+    .then(modsLoadingSuccess, modsLoadingFailure);
+}
 
+/** @param {any[]} mods */
+function modsLoadingSuccess(mods) {
+  $("#planner-overlay").addClass("hide").empty();
   /** @type {Map<string, Mod>} */
   let loadedMods = new Map();
-  for (let mod of await Promise.all(expandedModUrls.map(fetchJSON))) {
+  for (let mod of mods) {
     mod.requires = mod.requires || [];
     mod.incompatible = mod.incompatible || [];
     loadedMods.set(mod.id, mod);
@@ -104,6 +117,11 @@ async function reload(modUrls) {
   State.get().save();
 }
 
+function modsLoadingFailure(error) {
+  $("#planner-overlay").removeClass("hide").text(error.toString());
+  console.log(error);
+}
+
 /** @param {Mod} mod */
 function createModElement(mod) {
   const preset = State.get().preset;

diff --git a/stylesheet.css b/stylesheet.css
@@ -103,6 +103,23 @@ div.pips {
   user-select: none;
 }
 
+.hide {
+  display: none !important;
+}
+
+#planner-overlay {
+  position: fixed;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.75);
+  user-select: none;
+  z-index: 2;
+  padding: 4rem;
+}
+
 #planner-main button:disabled {
   color: #d00;
   border-color: #d00;