refactor: generation script

src/scripts/findAll.js

@@ -0,0 +1,84 @@
+import * as d3 from "d3";
+
+// findAll d3.quandtree search from https://bl.ocks.org/lwthatcher/b41479725e0ff2277c7ac90df2de2b5e
+export function addFindAll() {
+  const Quad = function (node, x0, y0, x1, y1) {
+    this.node = node;
+    this.x0 = x0;
+    this.y0 = y0;
+    this.x1 = x1;
+    this.y1 = y1;
+  };
+
+  const tree_filter = function (x, y, radius) {
+    var t = {x, y, x0: this._x0, y0: this._y0, x3: this._x1, y3: this._y1, quads: [], node: this._root};
+    if (t.node) {
+      t.quads.push(new Quad(t.node, t.x0, t.y0, t.x3, t.y3));
+    }
+    radiusSearchInit(t, radius);
+
+    var i = 0;
+    while ((t.q = t.quads.pop())) {
+      i++;
+
+      // Stop searching if this quadrant can’t contain a closer node.
+      if (
+        !(t.node = t.q.node) ||
+        (t.x1 = t.q.x0) > t.x3 ||
+        (t.y1 = t.q.y0) > t.y3 ||
+        (t.x2 = t.q.x1) < t.x0 ||
+        (t.y2 = t.q.y1) < t.y0
+      )
+        continue;
+
+      // Bisect the current quadrant.
+      if (t.node.length) {
+        t.node.explored = true;
+        var xm = (t.x1 + t.x2) / 2,
+          ym = (t.y1 + t.y2) / 2;
+
+        t.quads.push(
+          new Quad(t.node[3], xm, ym, t.x2, t.y2),
+          new Quad(t.node[2], t.x1, ym, xm, t.y2),
+          new Quad(t.node[1], xm, t.y1, t.x2, ym),
+          new Quad(t.node[0], t.x1, t.y1, xm, ym)
+        );
+
+        // Visit the closest quadrant first.
+        if ((t.i = ((y >= ym) << 1) | (x >= xm))) {
+          t.q = t.quads[t.quads.length - 1];
+          t.quads[t.quads.length - 1] = t.quads[t.quads.length - 1 - t.i];
+          t.quads[t.quads.length - 1 - t.i] = t.q;
+        }
+      }
+
+      // Visit this point. (Visiting coincident points isn’t necessary!)
+      else {
+        var dx = x - +this._x.call(null, t.node.data),
+          dy = y - +this._y.call(null, t.node.data),
+          d2 = dx * dx + dy * dy;
+        radiusSearchVisit(t, d2);
+      }
+    }
+    return t.result;
+  };
+
+  d3.quadtree.prototype.findAll = tree_filter;
+
+  var radiusSearchInit = function (t, radius) {
+    t.result = [];
+    (t.x0 = t.x - radius), (t.y0 = t.y - radius);
+    (t.x3 = t.x + radius), (t.y3 = t.y + radius);
+    t.radius = radius * radius;
+  };
+
+  var radiusSearchVisit = function (t, d2) {
+    t.node.data.scanned = true;
+    if (d2 < t.radius) {
+      do {
+        t.result.push(t.node.data);
+        t.node.data.selected = true;
+      } while ((t.node = t.node.next));
+    }
+  };
+}

src/scripts/generation/generation.ts

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 
 import {ERROR, INFO, WARN} from "config/logging";
 import {closeDialogs} from "dialogs/utils";
+import {openDialog} from "dialogs";
 import {initLayers, renderLayer, restoreLayers} from "layers";
 // @ts-expect-error js module
 import {drawCoastline} from "modules/coastline";
@@ -29,11 +30,29 @@ import {rankCells} from "../rankCells";
 import {showStatistics} from "../statistics";
 import {createGrid} from "./grid";
 import {reGraph} from "./reGraph";
+import {getInputValue, setInputValue} from "utils/nodeUtils";
 
-const {Zoom, Lakes, OceanLayers, Rivers, Biomes, Cultures, BurgsAndStates, Religions, Military, Markers, Names} =
-  window;
+const {
+  Zoom,
+  Lakes,
+  OceanLayers,
+  Rivers,
+  Biomes,
+  Cultures,
+  BurgsAndStates,
+  Religions,
+  Military,
+  Markers,
+  Names,
+  ThreeD
+} = window;
 
-async function generate(options?: {seed: string; graph: IGrid}) {
+interface IGenerationOptions {
+  seed: string;
+  graph: IGrid;
+}
+
+async function generate(options?: IGenerationOptions) {
   try {
     const timeStart = performance.now();
     const {seed: precreatedSeed, graph: precreatedGraph} = options || {};
@@ -47,17 +66,17 @@ async function generate(options?: {seed: string; graph: IGrid}) {
     randomizeOptions();
 
     const newGrid = await createGrid(grid, precreatedGraph);
+    const newPack = reGraph(newGrid);
 
-    const pack = reGraph(newGrid);
-    reMarkFeatures(pack, newGrid);
-    drawCoastline();
+    reMarkFeatures(newPack, newGrid);
+    drawCoastline(newPack);
 
-    Rivers.generate();
-    renderLayer("rivers");
-    Lakes.defineGroup();
-    Biomes.define();
+    Rivers.generate(newPack, newGrid);
+    renderLayer("rivers", newPack);
+    Lakes.defineGroup(newPack);
+    Biomes.define(newPack, newGrid);
 
-    rankCells();
+    rankCells(newPack);
     Cultures.generate();
     Cultures.expand();
     BurgsAndStates.generate();
@@ -82,6 +101,9 @@ async function generate(options?: {seed: string; graph: IGrid}) {
     drawScaleBar(window.scale);
     Names.getMapName();
 
+    // @ts-expect-error redefine global
+    pack = newPack;
+
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
     showStatistics();
     INFO && console.groupEnd();
@@ -142,10 +164,10 @@ export function undraw() {
   unfog();
 }
 
-export const regenerateMap = debounce(async function (options) {
+export const regenerateMap = debounce(async function (options: IGenerationOptions) {
   WARN && console.warn("Generate new random map");
 
-  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const cellsDesired = Number(byId("pointsInput")?.dataset.cells);
   const shouldShowLoading = cellsDesired > 10000;
   shouldShowLoading && showLoading();
 
@@ -156,7 +178,7 @@ export const regenerateMap = debounce(async function (options) {
   await generate(options);
   restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
-  if ($("#worldConfigurator").is(":visible")) editWorld();
+  if ($("#worldConfigurator").is(":visible")) openDialog("worldConfigurator");
 
   shouldShowLoading && hideLoading();
   clearMainTip();
@@ -164,14 +186,13 @@ export const regenerateMap = debounce(async function (options) {
 
 // focus on coordinates, cell or burg provided in searchParams
 function focusOn() {
-  const url = new URL(window.location.href);
-  const params = url.searchParams;
+  const params = new URL(window.location.href).searchParams;
 
   const fromMGCG = params.get("from") === "MFCG" && document.referrer;
   if (fromMGCG) {
-    if (params.get("seed").length === 13) {
+    if (params.get("seed")?.length === 13) {
       // show back burg from MFCG
-      const burgSeed = params.get("seed").slice(-4);
+      const burgSeed = params.get("seed")!.slice(-4);
       params.set("burg", burgSeed);
     } else {
       // select burg for MFCG
@@ -185,10 +206,10 @@ function focusOn() {
   const burgParam = params.get("burg");
 
   if (scaleParam || cellParam || burgParam) {
-    const scale = +scaleParam || 8;
+    const scale = scaleParam ? Number(scaleParam) : 8;
 
     if (cellParam) {
-      const cell = +params.get("cell");
+      const cell = Number(scaleParam);
       const [x, y] = pack.cells.p[cell];
       Zoom.to(x, y, scale, 1600);
       return;
@@ -203,14 +224,14 @@ function focusOn() {
       return;
     }
 
-    const x = +params.get("x") || graphWidth / 2;
-    const y = +params.get("y") || graphHeight / 2;
+    const x = params.get("x") ? Number(params.get("x")) : graphWidth / 2;
+    const y = params.get("y") ? Number(params.get("y")) : graphHeight / 2;
     Zoom.to(x, y, scale, 1600);
   }
 }
 
 // find burg for MFCG and focus on it
-function findBurgForMFCG(params) {
+function findBurgForMFCG(params: URLSearchParams) {
   const {cells, burgs} = pack;
 
   if (pack.burgs.length < 2) {
@@ -219,17 +240,17 @@ function findBurgForMFCG(params) {
   }
 
   // used for selection
-  const size = +params.get("size");
-  const coast = +params.get("coast");
-  const port = +params.get("port");
-  const river = +params.get("river");
+  const size = params.get("size") ? Number(params.get("size")) : 10;
+  const coast = Boolean(params.get("coast"));
+  const port = Boolean(params.get("port"));
+  const river = Boolean(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 = defineSelection(!coast, false, !river);
   if (!selection.length) selection = [burgs[1]]; // select first if nothing is found
 
-  function defineSelection(coast, port, river) {
+  function defineSelection(coast: boolean, port: boolean, river: boolean) {
     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]);
@@ -240,29 +261,27 @@ function findBurgForMFCG(params) {
 
   // 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 burgId = selected && selection[selected].i;
+  if (!burgId) return ERROR && console.error("Cannot select a burg for MFCG");
 
   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
+  const searchParams = new URL(document.referrer).searchParams;
+  for (let [param, value] of searchParams) {
+    if (param === "name") b.name = value;
+    else if (param === "size") b.population = +value;
+    else if (param === "seed") b.MFCG = +value;
+    else if (param === "shantytown") b.shanty = +value;
   }
-  if (params.get("name") && params.get("name") != "null") b.name = params.get("name");
+
+  const nameParam = params.get("name");
+  if (nameParam && nameParam !== "null") b.name = nameParam;
 
   const label = burgLabels.select("[data-id='" + burgId + "']");
   if (label.size()) {
     label
       .text(b.name)
       .classed("drag", true)
-      .on("mouseover", function () {
+      .on("mouseover", function (this: Element) {
         d3.select(this).classed("drag", false);
         label.on("mouseover", null);
       });
@@ -270,24 +289,27 @@ function findBurgForMFCG(params) {
 
   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) {
+function setSeed(precreatedSeed?: string) {
   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);
+
+    const params = new URL(window.location.href).searchParams;
+    const urlSeed = params.get("seed");
+    const optionsSeed = getInputValue("optionsSeed");
+
+    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 if (optionsSeed && optionsSeed !== seed) seed = optionsSeed;
     else seed = generateSeed();
   } else {
     seed = precreatedSeed;
   }
 
-  byId("optionsSeed").value = seed;
+  setInputValue("optionsSeed", seed);
   Math.random = aleaPRNG(seed);
 }

src/scripts/generation/graph.ts

@@ -0,0 +1,87 @@
+import Delaunator from "delaunator";
+
+import {Voronoi} from "modules/voronoi";
+import {TIME} from "config/logging";
+// @ts-expect-error js module
+import {aleaPRNG} from "scripts/aleaPRNG";
+import {createTypedArray} from "utils/arrayUtils";
+import {rn} from "utils/numberUtils";
+import {byId} from "utils/shorthands";
+
+export function generateGrid() {
+  Math.random = aleaPRNG(seed); // reset PRNG
+  const {spacing, cellsDesired, boundary, points, cellsX, cellsY} = placePoints();
+  const {cells, vertices} = calculateVoronoi(points, boundary);
+  return {spacing, cellsDesired, boundary, points, cellsX, cellsY, cells, vertices};
+}
+
+// place random points to calculate Voronoi diagram
+function placePoints() {
+  TIME && console.time("placePoints");
+  const cellsDesired = Number(byId("pointsInput")?.dataset.cells);
+  const spacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2); // spacing between points before jirrering
+
+  const boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
+  const points = getJitteredGrid(graphWidth, graphHeight, spacing); // points of jittered square grid
+  const cellsX = Math.floor((graphWidth + 0.5 * spacing - 1e-10) / spacing);
+  const cellsY = Math.floor((graphHeight + 0.5 * spacing - 1e-10) / spacing);
+  TIME && console.timeEnd("placePoints");
+
+  return {spacing, cellsDesired, boundary, points, cellsX, cellsY};
+}
+
+// calculate Delaunay and then Voronoi diagram
+export function calculateVoronoi(points: TPoints, boundary: TPoints): IGraph {
+  TIME && console.time("calculateDelaunay");
+  const allPoints: TPoints = points.concat(boundary);
+  const delaunay = Delaunator.from(allPoints);
+  TIME && console.timeEnd("calculateDelaunay");
+
+  TIME && console.time("calculateVoronoi");
+  const {cells, vertices} = new Voronoi(delaunay, allPoints, points.length);
+  const i = createTypedArray({maxValue: points.length, length: points.length}).map((_, i) => i); // array of indexes
+
+  TIME && console.timeEnd("calculateVoronoi");
+  return {cells: {...cells, i}, vertices};
+}
+
+// add points along map edge to pseudo-clip voronoi cells
+function getBoundaryPoints(width: number, height: number, spacing: number) {
+  const offset = rn(-1 * spacing);
+  const bSpacing = spacing * 2;
+  const w = width - offset * 2;
+  const h = height - offset * 2;
+  const numberX = Math.ceil(w / bSpacing) - 1;
+  const numberY = Math.ceil(h / bSpacing) - 1;
+  const points: TPoints = [];
+
+  for (let i = 0.5; i < numberX; i++) {
+    let x = Math.ceil((w * i) / numberX + offset);
+    points.push([x, offset], [x, h + offset]);
+  }
+
+  for (let i = 0.5; i < numberY; i++) {
+    let y = Math.ceil((h * i) / numberY + offset);
+    points.push([offset, y], [w + offset, y]);
+  }
+
+  return points;
+}
+
+// get points on a regular square grid and jitter them a bit
+function getJitteredGrid(width: number, height: number, spacing: number) {
+  const radius = spacing / 2; // square radius
+  const jittering = radius * 0.9; // max deviation
+  const doubleJittering = jittering * 2;
+  const jitter = () => Math.random() * doubleJittering - jittering;
+
+  const points: TPoints = [];
+  for (let y = radius; y < height; y += spacing) {
+    for (let x = radius; x < width; x += spacing) {
+      const xj = Math.min(rn(x + jitter(), 2), width);
+      const yj = Math.min(rn(y + jitter(), 2), height);
+      points.push([xj, yj]);
+    }
+  }
+  return points;
+}

src/scripts/generation/grid.ts

@@ -1,5 +1,5 @@
 import {calculateTemperatures} from "modules/temperature";
-import {generateGrid} from "utils/graphUtils";
+import {generateGrid} from "scripts/generation/graph";
 import {calculateMapCoordinates, defineMapSize} from "modules/coordinates";
 import {markupGridFeatures} from "modules/markup";
 // @ts-expect-error js module

src/scripts/generation/reGraph.ts

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 import {TIME} from "config/logging";
 import {UINT16_MAX} from "constants";
 import {createTypedArray} from "utils/arrayUtils";
-import {calculateVoronoi, getPackPolygon} from "utils/graphUtils";
+import {calculateVoronoi} from "scripts/generation/graph";
 import {rn} from "utils/numberUtils";
 import {DISTANCE_FIELD, MIN_LAND_HEIGHT} from "config/generation";
 
@@ -51,20 +51,21 @@ export function reGraph(grid: IGrid): IPackBase {
     newCells.h.push(height);
   }
 
+  const {cells, vertices} = calculateVoronoi(newCells.p, grid.boundary);
+
   function getCellArea(i: number) {
-    const area = Math.abs(d3.polygonArea(getPackPolygon(i)));
+    const polygon = cells.v[i].map(v => vertices.p[v]);
+    const area = Math.abs(d3.polygonArea(polygon));
     return Math.min(area, UINT16_MAX);
   }
 
-  const {cells, vertices} = calculateVoronoi(newCells.p, grid.boundary);
-
   const pack: IPackBase = {
     vertices,
     cells: {
       ...cells,
       p: newCells.p,
       g: createTypedArray({maxValue: grid.points.length, from: newCells.g}),
-      q: d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i])),
+      q: d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i])) as unknown as Quadtree,
       h: new Uint8Array(newCells.h),
       area: createTypedArray({maxValue: UINT16_MAX, from: cells.i}).map(getCellArea)
     }

src/scripts/listeners.ts

@@ -8,6 +8,8 @@ import {addResizeListener} from "modules/ui/options";
 // @ts-ignore
 import {addDragToUpload} from "modules/io/load";
 import {addHotkeyListeners} from "scripts/hotkeys";
+// @ts-ignore
+import {addFindAll} from "scripts/findAll";
 
 export function addGlobalListeners() {
   if (PRODUCTION) {
@@ -22,6 +24,7 @@ export function addGlobalListeners() {
   addHotkeyListeners();
   assignSpeakerBehavior();
   addDragToUpload();
+  addFindAll();
 }
 
 function registerServiceWorker() {

src/scripts/rankCells.ts

@@ -8,7 +8,7 @@ const FLUX_MAX_BONUS = 250;
 const SUITABILITY_FACTOR = 5;
 
 // assess cells suitability for population and rank cells for culture centers and burgs placement
-export function rankCells() {
+export function rankCells(pack: IPack) {
   TIME && console.time("rankCells");
   const {cells, features} = pack;