chore: modularize main.js

src/scripts/generation.js

@@ -0,0 +1,284 @@
+import {ERROR, INFO, WARN} from "config/logging";
+import {initLayers, renderLayer, restoreLayers} from "layers";
+import {drawCoastline} from "modules/coastline";
+import {calculateMapCoordinates, defineMapSize} from "modules/coordinates";
+import {markFeatures, markupGridOcean} from "modules/markup";
+import {drawScaleBar, Rulers} from "modules/measurers";
+import {generatePrecipitation} from "modules/precipitation";
+import {calculateTemperatures} from "modules/temperature";
+import {applyMapSize, randomizeOptions} from "modules/ui/options";
+import {applyStyleOnLoad} from "modules/ui/stylePresets";
+import {addZones} from "modules/zones";
+import {aleaPRNG} from "scripts/aleaPRNG";
+import {hideLoading, showLoading} from "scripts/loading";
+import {clearMainTip, tip} from "scripts/tooltips";
+import {parseError} from "utils/errorUtils";
+import {debounce} from "utils/functionUtils";
+import {generateGrid, shouldRegenerateGrid} from "utils/graphUtils";
+import {rn} from "utils/numberUtils";
+import {generateSeed} from "utils/probabilityUtils";
+import {byId} from "utils/shorthands";
+import {showStatistics} from "./statistics";
+import {reGraph} from "./reGraph";
+import {rankCells} from "./rankCells";
+
+export async function generate(options) {
+  try {
+    const timeStart = performance.now();
+    const {seed: precreatedSeed, graph: precreatedGraph} = options || {};
+
+    Zoom.invoke();
+    setSeed(precreatedSeed);
+    INFO && console.group("Generated Map " + seed);
+
+    applyMapSize();
+    randomizeOptions();
+
+    if (shouldRegenerateGrid(grid)) grid = precreatedGraph || generateGrid();
+    else delete grid.cells.h;
+    grid.cells.h = await HeightmapGenerator.generate(grid);
+
+    markFeatures();
+    markupGridOcean();
+
+    Lakes.addLakesInDeepDepressions();
+    Lakes.openNearSeaLakes();
+
+    OceanLayers();
+    defineMapSize();
+    window.mapCoordinates = calculateMapCoordinates();
+    calculateTemperatures();
+    generatePrecipitation();
+
+    reGraph();
+    drawCoastline();
+
+    Rivers.generate();
+    renderLayer("rivers");
+    Lakes.defineGroup();
+    Biomes.define();
+
+    rankCells();
+    Cultures.generate();
+    Cultures.expand();
+    BurgsAndStates.generate();
+    Religions.generate();
+    BurgsAndStates.defineStateForms();
+    BurgsAndStates.generateProvinces();
+    BurgsAndStates.defineBurgFeatures();
+
+    renderLayer("states");
+    renderLayer("borders");
+    BurgsAndStates.drawStateLabels();
+
+    Rivers.specify();
+    Lakes.generateName();
+
+    Military.generate();
+    Markers.generate();
+    addZones();
+
+    drawScaleBar(scale);
+    Names.getMapName();
+
+    WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
+    showStatistics();
+    INFO && console.groupEnd("Generated Map " + seed);
+  } catch (error) {
+    ERROR && console.error(error);
+    const parsedError = parseError(error);
+    clearMainTip();
+
+    alertMessage.innerHTML = /* html */ `An error has occurred on map generation. Please retry. <br />If error is critical, clear the stored data and try again.
+      <p id="errorBox">${parsedError}</p>`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Generation error",
+      width: "32em",
+      buttons: {
+        "Clear data": function () {
+          localStorage.clear();
+          localStorage.setItem("version", version);
+        },
+        Regenerate: function () {
+          regenerateMap("generation error");
+          $(this).dialog("close");
+        },
+        Ignore: function () {
+          $(this).dialog("close");
+        }
+      },
+      position: {my: "center", at: "center", of: "svg"}
+    });
+  }
+}
+
+export async function generateMapOnLoad() {
+  await applyStyleOnLoad(); // apply previously selected default or custom style
+  await generate(); // generate map
+  focusOn(); // based on searchParams focus on point, cell or burg from MFCG
+  initLayers(); // apply saved layers data
+}
+
+// clear the map
+export function undraw() {
+  viewbox.selectAll("path, circle, polygon, line, text, use, #zones > g, #armies > g, #ruler > g").remove();
+  document
+    .getElementById("deftemp")
+    .querySelectorAll("path, clipPath, svg")
+    .forEach(el => el.remove());
+  byId("coas").innerHTML = ""; // remove auto-generated emblems
+  notes = [];
+  rulers = new Rulers();
+  unfog();
+}
+
+export const regenerateMap = debounce(async function (options) {
+  WARN && console.warn("Generate new random map");
+
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const shouldShowLoading = cellsDesired > 10000;
+  shouldShowLoading && showLoading();
+
+  closeDialogs("#worldConfigurator, #options3d");
+  customization = 0;
+  Zoom.reset(1000);
+  undraw();
+  await generate(options);
+  restoreLayers();
+  if (ThreeD.options.isOn) ThreeD.redraw();
+  if ($("#worldConfigurator").is(":visible")) editWorld();
+
+  shouldShowLoading && hideLoading();
+  clearMainTip();
+}, 250);
+
+// focus on coordinates, cell or burg provided in searchParams
+function focusOn() {
+  const url = new URL(window.location.href);
+  const params = url.searchParams;
+
+  const fromMGCG = params.get("from") === "MFCG" && document.referrer;
+  if (fromMGCG) {
+    if (params.get("seed").length === 13) {
+      // show back burg from MFCG
+      const burgSeed = params.get("seed").slice(-4);
+      params.set("burg", burgSeed);
+    } else {
+      // select burg for MFCG
+      findBurgForMFCG(params);
+      return;
+    }
+  }
+
+  const scaleParam = params.get("scale");
+  const cellParam = params.get("cell");
+  const burgParam = params.get("burg");
+
+  if (scaleParam || cellParam || burgParam) {
+    const scale = +scaleParam || 8;
+
+    if (cellParam) {
+      const cell = +params.get("cell");
+      const [x, y] = pack.cells.p[cell];
+      Zoom.to(x, y, scale, 1600);
+      return;
+    }
+
+    if (burgParam) {
+      const burg = isNaN(+burgParam) ? pack.burgs.find(burg => burg.name === burgParam) : pack.burgs[+burgParam];
+      if (!burg) return;
+
+      const {x, y} = burg;
+      Zoom.to(x, y, scale, 1600);
+      return;
+    }
+
+    const x = +params.get("x") || graphWidth / 2;
+    const y = +params.get("y") || graphHeight / 2;
+    Zoom.to(x, y, scale, 1600);
+  }
+}
+
+// find burg for MFCG and focus on it
+function findBurgForMFCG(params) {
+  const {cells, burgs} = pack;
+
+  if (pack.burgs.length < 2) {
+    ERROR && console.error("Cannot select a burg for MFCG");
+    return;
+  }
+
+  // used for selection
+  const size = +params.get("size");
+  const coast = +params.get("coast");
+  const port = +params.get("port");
+  const river = +params.get("river");
+
+  let selection = defineSelection(coast, port, river);
+  if (!selection.length) selection = defineSelection(coast, !port, !river);
+  if (!selection.length) selection = defineSelection(!coast, 0, !river);
+  if (!selection.length) selection = [burgs[1]]; // select first if nothing is found
+
+  function defineSelection(coast, port, river) {
+    if (port && river) return burgs.filter(b => b.port && cells.r[b.cell]);
+    if (!port && coast && river) return burgs.filter(b => !b.port && cells.t[b.cell] === 1 && cells.r[b.cell]);
+    if (!coast && !river) return burgs.filter(b => cells.t[b.cell] !== 1 && !cells.r[b.cell]);
+    if (!coast && river) return burgs.filter(b => cells.t[b.cell] !== 1 && cells.r[b.cell]);
+    if (coast && river) return burgs.filter(b => cells.t[b.cell] === 1 && cells.r[b.cell]);
+    return [];
+  }
+
+  // select a burg with closest population from selection
+  const selected = d3.scan(selection, (a, b) => Math.abs(a.population - size) - Math.abs(b.population - size));
+  const burgId = selection[selected].i;
+  if (!burgId) {
+    ERROR && console.error("Cannot select a burg for MFCG");
+    return;
+  }
+
+  const b = burgs[burgId];
+  const referrer = new URL(document.referrer);
+  for (let p of referrer.searchParams) {
+    if (p[0] === "name") b.name = p[1];
+    else if (p[0] === "size") b.population = +p[1];
+    else if (p[0] === "seed") b.MFCG = +p[1];
+    else if (p[0] === "shantytown") b.shanty = +p[1];
+    else b[p[0]] = +p[1]; // other parameters
+  }
+  if (params.get("name") && params.get("name") != "null") b.name = params.get("name");
+
+  const label = burgLabels.select("[data-id='" + burgId + "']");
+  if (label.size()) {
+    label
+      .text(b.name)
+      .classed("drag", true)
+      .on("mouseover", function () {
+        d3.select(this).classed("drag", false);
+        label.on("mouseover", null);
+      });
+  }
+
+  Zoom.to(b.x, b.y, 8, 1600);
+  Zoom.invoke();
+  tip("Here stands the glorious city of " + b.name, true, "success", 15000);
+}
+
+// set map seed (string!)
+function setSeed(precreatedSeed) {
+  if (!precreatedSeed) {
+    const first = !mapHistory[0];
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+    const urlSeed = url.searchParams.get("seed");
+    if (first && params.get("from") === "MFCG" && urlSeed.length === 13) seed = urlSeed.slice(0, -4);
+    else if (first && urlSeed) seed = urlSeed;
+    else if (optionsSeed.value && optionsSeed.value != seed) seed = optionsSeed.value;
+    else seed = generateSeed();
+  } else {
+    seed = precreatedSeed;
+  }
+
+  byId("optionsSeed").value = seed;
+  Math.random = aleaPRNG(seed);
+}

src/scripts/listeners.ts

@@ -1,11 +1,16 @@
 import {PRODUCTION} from "../constants";
+// @ts-ignore
+import {checkIfServerless} from "./loading";
 import {assignLockBehavior} from "./options/lock";
 import {addTooptipListers} from "./tooltips";
 import {assignSpeakerBehavior} from "./speaker";
 // @ts-ignore
 import {addResizeListener} from "modules/ui/options";
+// @ts-ignore
+import {addDragToUpload} from "modules/io/load";
 
 export function addGlobalListeners() {
+  checkIfServerless();
   if (PRODUCTION) {
     registerServiceWorker();
     addInstallationPrompt();
@@ -15,6 +20,7 @@ export function addGlobalListeners() {
   addTooptipListers();
   addResizeListener();
   assignSpeakerBehavior();
+  addDragToUpload();
 }
 
 function registerServiceWorker() {

src/scripts/loading.js

@@ -0,0 +1,100 @@
+import {ERROR, WARN} from "config/logging";
+import {generateMapOnLoad} from "./generation";
+import {loadMapFromURL} from "modules/io/load";
+import {restoreDefaultEvents} from "scripts/events";
+
+export function checkIfServerless() {
+  document.on("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 <a href="${wiki}" target="_blank">instructions</a> 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");
+          }
+        }
+      });
+    } else {
+      hideLoading();
+      await checkLoadParameters();
+    }
+    restoreDefaultEvents(); // apply default viewbox events
+  });
+}
+
+// decide which map should be loaded or generated on page load
+async function checkLoadParameters() {
+  const url = new URL(window.location.href);
+  const params = url.searchParams;
+
+  // of there is a valid maplink, try to load .map file from URL
+  if (params.get("maplink")) {
+    WARN && console.warn("Load map from URL");
+    const maplink = params.get("maplink");
+    const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+    const valid = pattern.test(maplink);
+    if (valid) {
+      setTimeout(() => {
+        loadMapFromURL(maplink, 1);
+      }, 1000);
+      return;
+    } else showUploadErrorMessage("Map link is not a valid URL", maplink);
+  }
+
+  // if there is a seed (user of MFCG provided), generate map for it
+  if (params.get("seed")) {
+    WARN && console.warn("Generate map for seed");
+    await generateMapOnLoad();
+    return;
+  }
+
+  // open latest map if option is active and map is stored
+  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) {
+            reject(error);
+          }
+        } else {
+          reject("No map stored");
+        }
+      });
+    });
+
+  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();
+  }
+}
+
+export function hideLoading() {
+  d3.select("#loading").transition().duration(3000).style("opacity", 0);
+  d3.select("#optionsContainer").transition().duration(2000).style("opacity", 1);
+  d3.select("#tooltip").transition().duration(3000).style("opacity", 1);
+}
+
+export function showLoading() {
+  d3.select("#loading").transition().duration(200).style("opacity", 1);
+  d3.select("#optionsContainer").transition().duration(100).style("opacity", 0);
+  d3.select("#tooltip").transition().duration(200).style("opacity", 0);
+}

src/scripts/rankCells.js

@@ -0,0 +1,44 @@
+import {TIME} from "config/logging";
+import {normalize} from "utils/numberUtils";
+
+// assess cells suitability to calculate population and rand cells for culture center and burgs placement
+export function rankCells() {
+  TIME && console.time("rankCells");
+  const {cells, features} = pack;
+  cells.s = new Int16Array(cells.i.length); // cell suitability array
+  cells.pop = new Float32Array(cells.i.length); // cell population array
+
+  const flMean = d3.median(cells.fl.filter(f => f)) || 0;
+  const flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux
+  const areaMean = d3.mean(cells.area); // to adjust population by cell area
+
+  for (const i of cells.i) {
+    if (cells.h[i] < 20) continue; // no population in water
+    let s = +biomesData.habitability[cells.biome[i]]; // base suitability derived from biome habitability
+    if (!s) continue; // uninhabitable biomes has 0 suitability
+    if (flMean) s += normalize(cells.fl[i] + cells.conf[i], flMean, flMax) * 250; // big rivers and confluences are valued
+    s -= (cells.h[i] - 50) / 5; // low elevation is valued, high is not;
+
+    if (cells.t[i] === 1) {
+      if (cells.r[i]) s += 15; // estuary is valued
+      const feature = features[cells.f[cells.haven[i]]];
+      if (feature.type === "lake") {
+        if (feature.group === "freshwater") s += 30;
+        else if (feature.group == "salt") s += 10;
+        else if (feature.group == "frozen") s += 1;
+        else if (feature.group == "dry") s -= 5;
+        else if (feature.group == "sinkhole") s -= 5;
+        else if (feature.group == "lava") s -= 30;
+      } else {
+        s += 5; // ocean coast is valued
+        if (cells.harbor[i] === 1) s += 20; // safe sea harbor is valued
+      }
+    }
+
+    cells.s[i] = s / 5; // general population rate
+    // cell rural population is suitability adjusted by cell area
+    cells.pop[i] = cells.s[i] > 0 ? (cells.s[i] * cells.area[i]) / areaMean : 0;
+  }
+
+  TIME && console.timeEnd("rankCells");
+}

src/scripts/reGraph.js

@@ -0,0 +1,60 @@
+import {TIME} from "config/logging";
+import {UINT16_MAX} from "constants";
+import {createTypedArray} from "utils/arrayUtils";
+import {calculateVoronoi, getPackPolygon} from "utils/graphUtils";
+import {rn} from "utils/numberUtils";
+
+// recalculate Voronoi Graph to pack cells
+export function reGraph() {
+  TIME && console.time("reGraph");
+  const {cells: gridCells, points, features} = grid;
+  const newCells = {p: [], g: [], h: []}; // store new data
+  const spacing2 = grid.spacing ** 2;
+
+  for (const i of gridCells.i) {
+    const height = gridCells.h[i];
+    const type = gridCells.t[i];
+    if (height < 20 && type !== -1 && type !== -2) continue; // exclude all deep ocean points
+    if (type === -2 && (i % 4 === 0 || features[gridCells.f[i]].type === "lake")) continue; // exclude non-coastal lake points
+    const [x, y] = points[i];
+
+    addNewPoint(i, x, y, height);
+
+    // add additional points for cells along coast
+    if (type === 1 || type === -1) {
+      if (gridCells.b[i]) continue; // not for near-border cells
+      gridCells.c[i].forEach(e => {
+        if (i > e) return;
+        if (gridCells.t[e] === type) {
+          const dist2 = (y - points[e][1]) ** 2 + (x - points[e][0]) ** 2;
+          if (dist2 < spacing2) return; // too close to each other
+          const x1 = rn((x + points[e][0]) / 2, 1);
+          const y1 = rn((y + points[e][1]) / 2, 1);
+          addNewPoint(i, x1, y1, height);
+        }
+      });
+    }
+  }
+
+  function addNewPoint(i, x, y, height) {
+    newCells.p.push([x, y]);
+    newCells.g.push(i);
+    newCells.h.push(height);
+  }
+
+  function getCellArea(i) {
+    const area = Math.abs(d3.polygonArea(getPackPolygon(i)));
+    return Math.min(area, UINT16_MAX);
+  }
+
+  const {cells: packCells, vertices} = calculateVoronoi(newCells.p, grid.boundary);
+  pack.vertices = vertices;
+  pack.cells = packCells;
+  pack.cells.p = newCells.p;
+  pack.cells.g = createTypedArray({maxValue: grid.points.length, from: newCells.g});
+  pack.cells.q = d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i]));
+  pack.cells.h = createTypedArray({maxValue: 100, from: newCells.h});
+  pack.cells.area = createTypedArray({maxValue: UINT16_MAX, from: pack.cells.i}).map(getCellArea);
+
+  TIME && console.timeEnd("reGraph");
+}

src/scripts/statistics

@@ -0,0 +1,29 @@
+import {INFO} from "config/logging";
+import {byId} from "utils/shorthands";
+import {heightmapTemplates} from "config/heightmap-templates";
+import {locked} from "scripts/options/lock";
+
+// show map stats on generation complete
+export function showStatistics() {
+  const heightmap = byId("templateInput").value;
+  const isTemplate = heightmap in heightmapTemplates;
+  const heightmapType = isTemplate ? "template" : "precreated";
+  const isRandomTemplate = isTemplate && !locked("template") ? "random " : "";
+
+  const stats = `  Seed: ${seed}
+    Canvas size: ${graphWidth}x${graphHeight} px
+    Heightmap: ${heightmap} (${isRandomTemplate}${heightmapType})
+    Points: ${grid.points.length}
+    Cells: ${pack.cells.i.length}
+    Map size: ${mapSizeOutput.value}%
+    States: ${pack.states.length - 1}
+    Provinces: ${pack.provinces.length - 1}
+    Burgs: ${pack.burgs.length - 1}
+    Religions: ${pack.religions.length - 1}
+    Culture set: ${culturesSet.selectedOptions[0].innerText}
+    Cultures: ${pack.cultures.length - 1}`;
+
+  mapId = Date.now(); // unique map id is it's creation date number
+  mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
+  INFO && console.log(stats);
+}