Merge pull request #796 from Azgaar/pwa

Progressive Web App

index.css

@@ -2273,8 +2273,9 @@ svg.button {
 
 
 .dontAsk {
-  display: inline-block;
   margin: 0.9em 0 0 0.6em;
+  display: inline-flex;
+  align-items: center;
 }
 
 #errorBox {

index.html

@@ -11,9 +11,11 @@
     <meta property="og:title" content="Azgaar's Fantasy Map Generator" />
     <meta property="og:description" content="Web application generating interactive and customizable maps" />
     <meta property="og:image" content="images/preview.png" />
-    <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
+    <link rel="icon" type="image/png" href="images/icons/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="images/icons/favicon-16x16.png" sizes="16x16" />
+    <link rel="apple-touch-icon" href="images/icons/maskable_icon_x192.png" />
     <link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/" />
+    <link rel="manifest" href="manifest.webmanifest" />
 
     <!-- inline css for loading screen -->
     <style type="text/css">
@@ -6341,7 +6343,7 @@
 
     <script src="modules/ui/general.js"></script>
     <script src="modules/ui/options.js"></script>
-    <script src="main.js"></script>
+    <script src="main.js?v=13052022"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>

main.js

@@ -10,13 +10,22 @@ const TIME = DEBUG || !PRODUCTION;
 const WARN = true;
 const ERROR = true;
 
-// register service worker responsible for caching
 if (PRODUCTION && "serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker.register("./sw.js").catch(err => {
       console.error("ServiceWorker registration failed: ", err);
     });
   });
+
+  window.addEventListener(
+    "beforeinstallprompt",
+    async event => {
+      event.preventDefault();
+      const Installation = await import("/modules/dynamic/installation.js");
+      Installation.init(event);
+    },
+    {once: true}
+  );
 }
 
 // append svg layers (in default order)

manifest.webmanifest

@@ -0,0 +1,41 @@
+{
+  "background_color": "#fff",
+  "display": "standalone",
+  "orientation": "landscape",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Azgaar's Fantansy Map Generator",
+  "short_name": "Azgaar's Fantansy Map Generator",
+  "description": "Web application generating interactive and highly customizable maps",
+  "icons": [
+    {
+      "src": "images/icons/icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/icons/maskable_icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/icons/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/icons/maskable_icon_x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

modules/dynamic/installation.js

@@ -0,0 +1,73 @@
+// module to prompt PWA installation
+let installButton = null;
+let deferredPrompt = null;
+
+export function init(event) {
+  const dontAskforInstallation = localStorage.getItem("installationDontAsk");
+  if (dontAskforInstallation) return;
+
+  installButton = createButton();
+  deferredPrompt = event;
+
+  window.addEventListener("appinstalled", () => {
+    tip("Application is installed", false, "success", 8000);
+    cleanup();
+  });
+}
+
+function createButton() {
+  const button = document.createElement("button");
+  button.style = `
+      position: fixed;
+      top: 1em;
+      right: 1em;
+      padding: 0.6em 0.8em;
+      width: auto;
+    `;
+  button.className = "options glow";
+  button.innerHTML = "Install";
+  button.onclick = openDialog;
+  button.onmouseenter = () => tip("Install the Application");
+  document.querySelector("body").appendChild(button);
+  return button;
+}
+
+function openDialog() {
+  alertMessage.innerHTML = /* html */ `You can install the tool so that it will look and feel like desktop application:
+    have its own icon on your home screen and work offline with some limitations
+  `;
+  $("#alert").dialog({
+    resizable: false,
+    title: "Install the Application",
+    width: "38em",
+    buttons: {
+      Install: function () {
+        $(this).dialog("close");
+        deferredPrompt.prompt();
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    },
+    open: function () {
+      const checkbox =
+        '<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>';
+      const pane = this.parentElement.querySelector(".ui-dialog-buttonpane");
+      pane.insertAdjacentHTML("afterbegin", checkbox);
+    },
+    close: function () {
+      const box = this.parentElement.querySelector(".checkbox");
+      if (box?.checked) {
+        localStorage.setItem("installationDontAsk", true);
+        cleanup();
+      }
+      $(this).dialog("destroy");
+    }
+  });
+
+  function cleanup() {
+    installButton.remove();
+    installButton = null;
+    deferredPrompt = null;
+  }
+}

modules/ui/tools.js

@@ -2,10 +2,7 @@
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 
 toolsContent.addEventListener("click", function (event) {
-  if (customization) {
-    tip("Please exit the customization mode first", false, "warning");
-    return;
-  }
+  if (customization) return tip("Please exit the customization mode first", false, "warning");
   if (!["BUTTON", "I"].includes(event.target.tagName)) return;
   const button = event.target.id;
 
@@ -30,10 +27,8 @@ toolsContent.addEventListener("click", function (event) {
 
   // click on Regenerate buttons
   if (event.target.parentNode.id === "regenerateFeature") {
-    if (sessionStorage.getItem("regenerateFeatureDontAsk")) {
-      processFeatureRegeneration(event, button);
-      return;
-    }
+    const dontAsk = sessionStorage.getItem("regenerateFeatureDontAsk");
+    if (dontAsk) return processFeatureRegeneration(event, button);
 
     alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.<br /><br />Are you sure you want to proceed?`;
     $("#alert").dialog({
@@ -49,15 +44,14 @@ toolsContent.addEventListener("click", function (event) {
         }
       },
       open: function () {
-        const pane = $(this).dialog("widget").find(".ui-dialog-buttonpane");
-        $(
-          '<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>'
-        ).prependTo(pane);
+        const checkbox =
+          '<span><input id="dontAsk" class="checkbox" type="checkbox"><label for="dontAsk" class="checkbox-label dontAsk"><i>do not ask again</i></label><span>';
+        const pane = this.parentElement.querySelector(".ui-dialog-buttonpane");
+        pane.insertAdjacentHTML("afterbegin", checkbox);
       },
       close: function () {
-        const box = $(this).dialog("widget").find(".checkbox")[0];
-        if (!box) return;
-        if (box.checked) sessionStorage.setItem("regenerateFeatureDontAsk", true);
+        const box = this.parentElement.querySelector(".checkbox");
+        if (box?.checked) sessionStorage.setItem("regenerateFeatureDontAsk", true);
         $(this).dialog("destroy");
       }
     });

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.81"; // generator version, update each time
+const version = "1.811"; // generator version, update each time
 
 {
   document.title += " v" + version;
@@ -25,6 +25,8 @@ const version = "1.81"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
+        <li>Ability to install the App</li>
+        <li>14 new default fonts</li>
         <li>Caching for faster startup</li>
         <li>Submap tool by Goteguru</li>
         <li>Resample tool by Goteguru</li>
@@ -32,9 +34,6 @@ const version = "1.81"; // generator version, update each time
         <li>Advanced notes editor</li>
         <li>Zones editor: filter by type</li>
         <li>Color picker: new hatchings</li>
-        <li>New style presets: Cyberpunk and Atlas</li>
-        <li>Burg temperature graph</li>
-        <li>4 new textures</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>