Merge branch 'master' into dev-submaps

modules/load.js

@@ -12,6 +12,36 @@ function quickLoad() {
   });
 }
 
+async function loadFromDropbox(fileName) {
+  const map = document.querySelector("#loadFromDropbox select").value;
+  console.log('loading dropbox map', map);
+  const blob = await Cloud.providers.dropbox.load(map);
+  uploadMap(blob);
+}
+
+async function createSharableDropboxLink() {
+  const mapFile = document.querySelector("#loadFromDropbox select").value;
+  const sharableLink = document.getElementById("sharableLink");
+  const sharableLinkContainer = document.getElementById("sharableLinkContainer");
+  let url
+  try {
+    url = await Cloud.providers.dropbox.getLink(mapFile);
+  } catch {
+    tip("Dropbox API error. Can not create link.", true, "error", 2000);
+    return
+  }
+
+  const fmg = window.location.href.split("?")[0];
+  const reallink= `${fmg}?maplink=${url}`;
+  // voodoo magic required by the yellow god of CORS
+  const link = reallink.replace('www.dropbox.com/s/', 'dl.dropboxusercontent.com/1/view/')
+  const shortLink = link.slice(0, 50) + "...";
+
+  sharableLinkContainer.style.display = "block";
+  sharableLink.innerText = shortLink;
+  sharableLink.setAttribute("href", link);
+}
+
 function loadMapPrompt(blob) {
   const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
   if (workingTime < 5) {
@@ -46,54 +76,111 @@ function loadMapPrompt(blob) {
   }
 }
 
+function loadMapFromURL(maplink, random) {
+  const URL = decodeURIComponent(maplink);
+
+  fetch(URL, {method: "GET", mode: "cors"})
+    .then(response => {
+      if (response.ok) return response.blob();
+      throw new Error("Cannot load map from URL");
+    })
+    .then(blob => uploadMap(blob))
+    .catch(error => {
+      showUploadErrorMessage(error.message, URL, random);
+      if (random) generateMapOnLoad();
+    });
+}
+
+function showUploadErrorMessage(error, URL, random) {
+  ERROR && console.error(error);
+  alertMessage.innerHTML = `Cannot load map from the ${link(URL, "link provided")}.
+    ${random ? `A new random map is generated. ` : ""}
+    Please ensure the linked file is reachable and CORS is allowed on server side`;
+  $("#alert").dialog({
+    title: "Loading error",
+    width: "32em",
+    buttons: {
+      OK: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
 function uploadMap(file, callback) {
   uploadMap.timeStart = performance.now();
+  const OLDEST_SUPPORTED_VERSION = 0.7;
+  const currentVersion = parseFloat(version);
 
   const fileReader = new FileReader();
   fileReader.onload = function (fileLoadedEvent) {
     if (callback) callback();
     document.getElementById("coas").innerHTML = ""; // remove auto-generated emblems
+    const result = fileLoadedEvent.target.result;
+    const [mapData, mapVersion] = parseLoadedResult(result);
 
-    const dataLoaded = fileLoadedEvent.target.result;
-    const data = dataLoaded.split("\r\n");
+    const isInvalid = !mapData || isNaN(mapVersion) || mapData.length < 26 || !mapData[5];
+    const isUpdated = mapVersion === currentVersion;
+    const isAncient = mapVersion < OLDEST_SUPPORTED_VERSION;
+    const isNewer = mapVersion > currentVersion;
+    const isOutdated = mapVersion < currentVersion;
 
-    const mapVersion = data[0].split("|")[0] || data[0];
-    if (mapVersion === version) {
-      parseLoadedData(data);
-      return;
-    }
-
-    const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
-    const parsed = parseFloat(mapVersion);
-    let message = "",
-      load = false;
-    if (isNaN(parsed) || data.length < 26 || !data[5]) {
-      message = `The file you are trying to load is outdated or not a valid .map file.
-                <br>Please try to open it using an ${archive}`;
-    } else if (parsed < 0.7) {
-      message = `The map version you are trying to load (${mapVersion}) is too old and cannot be updated to the current version.
-                <br>Please keep using an ${archive}`;
-    } else {
-      load = true;
-      message = `The map version (${mapVersion}) does not match the Generator version (${version}).
-                 <br>Click OK to get map <b>auto-updated</b>. In case of issues please keep using an ${archive} of the Generator`;
-    }
-    alertMessage.innerHTML = message;
-    $("#alert").dialog({
-      title: "Version conflict",
-      width: "38em",
-      buttons: {
-        OK: function () {
-          $(this).dialog("close");
-          if (load) parseLoadedData(data);
-        }
-      }
-    });
+    if (isInvalid) return showUploadMessage("invalid", mapData, mapVersion);
+    if (isUpdated) return parseLoadedData(mapData);
+    if (isAncient) return showUploadMessage("ancient", mapData, mapVersion);
+    if (isNewer) return showUploadMessage("newer", mapData, mapVersion);
+    if (isOutdated) return showUploadMessage("outdated", mapData, mapVersion);
   };
 
   fileReader.readAsText(file, "UTF-8");
 }
 
+function parseLoadedResult(result) {
+  try {
+    // data can be in FMG internal format or base64 encoded
+    const isDelimited = result.substr(0, 10).includes("|");
+    const decoded = isDelimited ? result : decodeURIComponent(atob(result));
+    const mapData = decoded.split("\r\n");
+    const mapVersion = parseFloat(mapData[0].split("|")[0] || mapData[0]);
+    return [mapData, mapVersion];
+  } catch (error) {
+    console.error(error);
+    return [null, null];
+  }
+}
+
+function showUploadMessage(type, mapData, mapVersion) {
+  const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
+  let message, title, canBeLoaded;
+
+  if (type === "invalid") {
+    message = `The file does not look like a valid <i>.map</i> file.<br>Please check the data format`;
+    title = "Invalid file";
+    canBeLoaded = false;
+  } else if (type === "ancient") {
+    message = `The map version you are trying to load (${mapVersion}) is too old and cannot be updated to the current version.<br>Please keep using an ${archive}`;
+    title = "Ancient file";
+    canBeLoaded = false;
+  } else if (type === "newer") {
+    message = `The map version you are trying to load (${mapVersion}) is newer than the current version.<br>Please load the file in the appropriate version`;
+    title = "Newer file";
+    canBeLoaded = false;
+  } else if (type === "outdated") {
+    message = `The map version (${mapVersion}) does not match the Generator version (${version}).<br>Click OK to get map <b>auto-updated</b>.<br>In case of issues please keep using an ${archive} of the Generator`;
+    title = "Outdated file";
+    canBeLoaded = true;
+  }
+
+  alertMessage.innerHTML = message;
+  const buttons = {
+    OK: function () {
+      $(this).dialog("close");
+      if (canBeLoaded) parseLoadedData(mapData);
+    }
+  };
+  $("#alert").dialog({title, buttons});
+}
+
 function parseLoadedData(data) {
   try {
     // exit customization
@@ -710,29 +797,40 @@ function parseLoadedData(data) {
 
       if (version < 1.65) {
         // v 1.65 changed rivers data
-        rivers.attr("style", null); // remove style to unhide layer
+        d3.select("#rivers").attr("style", null); // remove style to unhide layer
+        const {cells, rivers} = pack;
 
-        for (const river of pack.rivers) {
+        for (const river of rivers) {
           const node = document.getElementById("river" + river.i);
           if (node && !river.cells) {
-            const riverCells = new Set();
+            const riverCells = [];
+            const riverPoints = [];
+
             const length = node.getTotalLength() / 2;
             const segments = Math.ceil(length / 6);
             const increment = length / segments;
-            for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) {
-              const p1 = node.getPointAtLength(i);
-              const p2 = node.getPointAtLength(c);
-              const x = (p1.x + p2.x) / 2;
-              const y = (p1.y + p2.y) / 2;
-              const cell = findCell(x, y, 6);
-              if (cell) riverCells.add(cell);
+
+            for (let i = 0; i <= segments; i++) {
+              const shift = increment * i;
+              const {x: x1, y: y1} = node.getPointAtLength(length + shift);
+              const {x: x2, y: y2} = node.getPointAtLength(length - shift);
+              const x = rn((x1 + x2) / 2, 1);
+              const y = rn((y1 + y2) / 2, 1);
+
+              const cell = findCell(x, y);
+              riverPoints.push([x, y]);
+              riverCells.push(cell);
             }
 
-            river.cells = Array.from(riverCells);
+            river.cells = riverCells;
+            river.points = riverPoints;
           }
 
-          pack.cells.i.forEach(i => {
-            if (pack.cells.r[i] && pack.cells.h[i] < 20) pack.cells.r[i] = 0;
+          river.widthFactor = 1;
+
+          cells.i.forEach(i => {
+            const riverInWater = cells.r[i] && cells.h[i] < 20;
+            if (riverInWater) cells.r[i] = 0;
           });
         }
       }