diff --git a/index.css b/index.css index ed81773f..c8d5efb0 100644 --- a/index.css +++ b/index.css @@ -50,6 +50,7 @@ iframe { mask-mode: alpha; mask-clip: no-clip; fill-rule: evenodd; + user-select: none; } #canvas { diff --git a/main.js b/main.js index c35206fe..3019dd89 100644 --- a/main.js +++ b/main.js @@ -172,29 +172,32 @@ landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight); oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight); -if (!location.hostname) { - const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally"; - alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless. - Follow the instructions on how you can easily run a local web-server`; +document.addEventListener("DOMContentLoaded", async () => { + if (!location.hostname) { + const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally"; + alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless. + Follow the instructions on how you can easily run a local web-server`; - $("#alert").dialog({ - resizable: false, - title: "Loading error", - width: "28em", - position: {my: "center center-4em", at: "center", of: "svg"}, - buttons: { - OK: function () { - $(this).dialog("close"); + $("#alert").dialog({ + resizable: false, + title: "Loading error", + width: "28em", + position: {my: "center center-4em", at: "center", of: "svg"}, + buttons: { + OK: function () { + $(this).dialog("close"); + } } - } - }); + }); - d3.select("#loading-text").transition().duration(1000).style("opacity", 0); - d3.select("#init-rose").transition().duration(4000).style("opacity", 0); -} else { - hideLoading(); - checkLoadParameters(); -} + d3.select("#loading-text").transition().duration(1000).style("opacity", 0); + d3.select("#init-rose").transition().duration(4000).style("opacity", 0); + } else { + hideLoading(); + await checkLoadParameters(); + } + restoreDefaultEvents(); // apply default viewbox events +}); function hideLoading() { const queryString = window.location.search; @@ -218,7 +221,7 @@ function showLoading() { } // decide which map should be loaded or generated on page load -function checkLoadParameters() { +async function checkLoadParameters() { const url = new URL(window.location.href); const params = url.searchParams; @@ -239,32 +242,39 @@ function checkLoadParameters() { // if there is a seed (user of MFCG provided), generate map for it if (params.get("seed")) { WARN && console.warn("Generate map for seed"); - generateMapOnLoad(); + await generateMapOnLoad(); return; } // open latest map if option is active and map is stored - if (onloadMap.value === "saved") { + const loadLastMap = () => new Promise((resolve, reject) => { ldb.get("lastMap", blob => { if (blob) { WARN && console.warn("Load last saved map"); try { uploadMap(blob); + resolve(); } catch (error) { - ERROR && console.error(error); - WARN && console.warn("Cannot load stored map, random map to be generated"); - generateMapOnLoad(); + reject(error); } } else { - ERROR && console.error("No map stored, random map to be generated"); - generateMapOnLoad(); + reject("No map stored"); } - }); - return; - } + }) + }) - WARN && console.warn("Generate random map"); - generateMapOnLoad(); + if (onloadMap.value === "saved") { + try { + await loadLastMap(); + } catch(error) { + ERROR && console.error(error); + WARN && console.warn("Cannot load stored map, random map to be generated"); + await generateMapOnLoad(); + } + } else { + WARN && console.warn("Generate random map"); + await generateMapOnLoad(); + } } async function generateMapOnLoad() { diff --git a/modules/ui/editors.js b/modules/ui/editors.js index be97102c..e13f8eff 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -2,7 +2,6 @@ "use strict"; modules.editors = true; -restoreDefaultEvents(); // apply default viewbox events on load // restore default viewbox events function restoreDefaultEvents() { @@ -478,14 +477,14 @@ function createPicker() { .attr("height", 20) .on("mousemove", () => tip("Color value in different color spaces. Edit to change")); const html = ` -