make depressions resolve elevation change not that big

index.css

@@ -104,7 +104,7 @@ a {
 }
 
 #biomes {
-  stroke-width: .7;
+  stroke-width: 0.7;
 }
 
 #landmass {
@@ -285,6 +285,12 @@ i.icon-lock {
   animation: dash 80s linear backwards;
 }
 
+.arrow {
+  marker-end: url(#end-arrow-small);
+  stroke: #555;
+  stroke-width: 0.5;
+}
+
 @keyframes dash {
   to {
     stroke-dashoffset: 0;

index.html

@@ -3451,6 +3451,9 @@
       <marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="7" markerHeight="7" orient="auto">
         <path d="M0,-5L10,0L0,5" fill="#000"></path>
       </marker>
+      <marker id="end-arrow-small" viewBox="0 -5 10 10" refX="6" markerWidth="2" markerHeight="2" orient="auto">
+        <path d="M0,-5L10,0L0,5" fill="#555"></path>
+      </marker>
 
       <symbol id="icon-store" viewBox="0 0 616 512">
         <path d="M602 118.6L537.1 15C531.3 5.7 521 0 510 0H106C95 0 84.7 5.7 78.9 15L14 118.6c-33.5 53.5-3.8 127.9 58.8 136.4 4.5.6 9.1.9 13.7.9 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18.1 20.1 44.3 33.1 73.8 33.1 4.7 0 9.2-.3 13.7-.9 62.8-8.4 92.6-82.8 59-136.4zM529.5 288c-10 0-19.9-1.5-29.5-3.8V384H116v-99.8c-9.6 2.2-19.5 3.8-29.5 3.8-6 0-12.1-.4-18-1.2-5.6-.8-11.1-2.1-16.4-3.6V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32V283.2c-5.4 1.6-10.8 2.9-16.4 3.6-6.1.8-12.1 1.2-18.2 1.2z"></path>

modules/lakes.js

@@ -1,90 +1,110 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof exports === "object" && typeof module !== "undefined" ? (module.exports = factory()) : typeof define === "function" && define.amd ? define(factory) : (global.Lakes = factory());
-  typeof define === 'function' && define.amd ? define(factory) :
+})(this, function () {
-  (global.Lakes = factory());
+  "use strict";
-}(this, (function () {'use strict';
 
-const setClimateData = function(h) {
+  const setClimateData = function (h) {
-  const cells = pack.cells;
+    const cells = pack.cells;
-  const lakeOutCells = new Uint16Array(cells.i.length);
+    const lakeOutCells = new Uint16Array(cells.i.length);
 
-  pack.features.forEach(f => {
+    pack.features.forEach(f => {
-    if (f.type !== "lake") return;
+      if (f.type !== "lake") return;
 
-    // default flux: sum of precipition around lake first cell
+      // default flux: sum of precipition around lake first cell
-    f.flux = rn(d3.sum(f.shoreline.map(c => grid.cells.prec[cells.g[c]])) / 2);
+      f.flux = rn(d3.sum(f.shoreline.map(c => grid.cells.prec[cells.g[c]])) / 2);
 
-    // temperature and evaporation to detect closed lakes
+      // temperature and evaporation to detect closed lakes
-    f.temp = f.cells < 6 ? grid.cells.temp[cells.g[f.firstCell]] : rn(d3.mean(f.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
+      f.temp = f.cells < 6 ? grid.cells.temp[cells.g[f.firstCell]] : rn(d3.mean(f.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
-    const height = (f.height - 18) ** heightExponentInput.value; // height in meters
+      const height = (f.height - 18) ** heightExponentInput.value; // height in meters
-    const evaporation = (700 * (f.temp + .006 * height) / 50 + 75) / (80 - f.temp); // based on Penman formula, [1-11]
+      const evaporation = ((700 * (f.temp + 0.006 * height)) / 50 + 75) / (80 - f.temp); // based on Penman formula, [1-11]
-    f.evaporation = rn(evaporation * f.cells);
+      f.evaporation = rn(evaporation * f.cells);
 
-    // lake outlet cell
+      // no outlet for lakes in depressed areas
-    f.outCell = f.shoreline[d3.scan(f.shoreline, (a,b) => h[a] - h[b])];
+      if (f.closed) return;
-    lakeOutCells[f.outCell] = f.i;
-  });
 
-  return lakeOutCells;
+      // lake outlet cell
-}
+      f.outCell = f.shoreline[d3.scan(f.shoreline, (a, b) => h[a] - h[b])];
+      lakeOutCells[f.outCell] = f.i;
+    });
 
-const cleanupLakeData = function() {
+    return lakeOutCells;
-  for (const feature of pack.features) {
+  };
-    if (feature.type !== "lake") continue;
-    delete feature.river;
-    delete feature.enteringFlux;
-    delete feature.shoreline;
-    delete feature.outCell;
-    feature.height = rn(feature.height);
 
-    const inlets = feature.inlets?.filter(r => pack.rivers.find(river => river.i === r));
+  // get array of land cells aroound lake
-    if (!inlets || !inlets.length) delete feature.inlets;
+  const getShoreline = function (lake) {
-    else feature.inlets = inlets;
+    const queue = [lake.firstCell];
+    const used = [queue[0]];
+    const landCellsAround = [];
+    while (queue.length) {
+      const q = queue.pop();
+      for (const c of pack.cells.c[q]) {
+        if (used[c]) continue;
+        used[c] = true;
+        if (pack.cells.f[c] === lake.i) queue.push(c);
+        if (pack.cells.h[c] >= 20) landCellsAround.push(c);
+      }
+    }
 
-    const outlet = feature.outlet && pack.rivers.find(river => river.i === feature.outlet);
+    lake.shoreline = landCellsAround;
-    if (!outlet) delete feature.outlet;
+  };
-  }
-}
 
-const defineGroup = function() {
+  const cleanupLakeData = function () {
-  for (const feature of pack.features) {
+    for (const feature of pack.features) {
-    if (feature.type !== "lake") continue;
+      if (feature.type !== "lake") continue;
-    const lakeEl = lakes.select(`[data-f="${feature.i}"]`).node();
+      delete feature.river;
-    if (!lakeEl) continue;
+      delete feature.enteringFlux;
+      delete feature.shoreline;
+      delete feature.outCell;
+      delete feature.closed;
+      feature.height = rn(feature.height);
 
-    feature.group = getGroup(feature);
+      const inlets = feature.inlets?.filter(r => pack.rivers.find(river => river.i === r));
-    document.getElementById(feature.group).appendChild(lakeEl);
+      if (!inlets || !inlets.length) delete feature.inlets;
-  }
+      else feature.inlets = inlets;
-}
 
-const generateName = function() {
+      const outlet = feature.outlet && pack.rivers.find(river => river.i === feature.outlet);
-  Math.random = aleaPRNG(seed);
+      if (!outlet) delete feature.outlet;
-  for (const feature of pack.features) {
+    }
-    if (feature.type !== "lake") continue;
+  };
-    feature.name = getName(feature);
-  }
-}
 
-const getName = function(feature) {
+  const defineGroup = function () {
-  const landCell = pack.cells.c[feature.firstCell].find(c => pack.cells.h[c] >= 20);
+    for (const feature of pack.features) {
-  const culture = pack.cells.culture[landCell];
+      if (feature.type !== "lake") continue;
-  return Names.getCulture(culture);
+      const lakeEl = lakes.select(`[data-f="${feature.i}"]`).node();
-}
+      if (!lakeEl) continue;
 
-function getGroup(feature) {
+      feature.group = getGroup(feature);
-  if (feature.temp < -3) return "frozen";
+      document.getElementById(feature.group).appendChild(lakeEl);
-  if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 5 === 0) return "lava";
+    }
+  };
 
-  if (!feature.inlets && !feature.outlet) {
+  const generateName = function () {
-    if (feature.evaporation / 2 > feature.flux) return "dry";
+    Math.random = aleaPRNG(seed);
-    if (feature.cells < 3 && feature.firstCell % 5 === 0) return "sinkhole";
+    for (const feature of pack.features) {
+      if (feature.type !== "lake") continue;
+      feature.name = getName(feature);
+    }
+  };
+
+  const getName = function (feature) {
+    const landCell = pack.cells.c[feature.firstCell].find(c => pack.cells.h[c] >= 20);
+    const culture = pack.cells.culture[landCell];
+    return Names.getCulture(culture);
+  };
+
+  function getGroup(feature) {
+    if (feature.temp < -3) return "frozen";
+    if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 5 === 0) return "lava";
+
+    if (!feature.inlets && !feature.outlet) {
+      if (feature.evaporation / 2 > feature.flux) return "dry";
+      if (feature.cells < 3 && feature.firstCell % 5 === 0) return "sinkhole";
+    }
+
+    if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
+
+    return "freshwater";
   }
 
-  if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
+  return {setClimateData, cleanupLakeData, defineGroup, generateName, getName, getShoreline};
-
+});
-  return "freshwater";
-}
-
-return {setClimateData, cleanupLakeData, defineGroup, generateName, getName};
-
-})));

modules/river-generator.js

@@ -1,355 +1,389 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof exports === "object" && typeof module !== "undefined" ? (module.exports = factory()) : typeof define === "function" && define.amd ? define(factory) : (global.Rivers = factory());
-  typeof define === 'function' && define.amd ? define(factory) :
+})(this, function () {
-  (global.Rivers = factory());
+  "use strict";
-}(this, (function () {'use strict';
 
-const generate = function(changeHeights = true) {
+  const generate = function (changeHeights = true) {
-  TIME && console.time('generateRivers');
+    TIME && console.time("generateRivers");
-  Math.random = aleaPRNG(seed);
+    Math.random = aleaPRNG(seed);
-  const cells = pack.cells, p = cells.p, features = pack.features;
+    const cells = pack.cells,
+      p = cells.p,
+      features = pack.features;
 
-  const riversData = []; // rivers data
+    const riversData = []; // rivers data
-  cells.fl = new Uint16Array(cells.i.length); // water flux array
+    cells.fl = new Uint16Array(cells.i.length); // water flux array
-  cells.r = new Uint16Array(cells.i.length); // rivers array
+    cells.r = new Uint16Array(cells.i.length); // rivers array
-  cells.conf = new Uint8Array(cells.i.length); // confluences array
+    cells.conf = new Uint8Array(cells.i.length); // confluences array
-  let riverNext = 1; // first river id is 1
+    let riverNext = 1; // first river id is 1
 
-  const h = alterHeights();
+    const h = alterHeights();
-  removeStoredLakeData();
+    prepareLakeData();
-  resolveDepressions(h);
+    resolveDepressions(h, 200);
-  drainWater();
+    drainWater();
-  defineRivers();
+    defineRivers();
-  Lakes.cleanupLakeData();
+    Lakes.cleanupLakeData();
 
-  if (changeHeights) cells.h = Uint8Array.from(h); // apply changed heights as basic one
+    if (changeHeights) cells.h = Uint8Array.from(h); // apply changed heights as basic one
 
-  TIME && console.timeEnd('generateRivers');
+    TIME && console.timeEnd("generateRivers");
 
-  // height with added t value to make map less depressed
+    function prepareLakeData() {
-  function alterHeights() {
+      features.forEach(f => {
-    const h = Array.from(cells.h)
+        if (f.type !== "lake") return;
-      .map((h, i) => h < 20 || cells.t[i] < 1 ? h : h + cells.t[i] / 100)
+        delete f.flux;
-      .map((h, i) => h < 20 || cells.t[i] < 1 ? h : h + d3.mean(cells.c[i].map(c => cells.t[c])) / 10000);
+        delete f.inlets;
-    return h;
+        delete f.outlet;
-  }
+        delete f.height;
+        !f.shoreline && Lakes.getShoreline(f);
+      });
+    }
 
-  function removeStoredLakeData() {
+    function drainWater() {
-    features.forEach(f => {
+      const MIN_FLUX_TO_FORM_RIVER = 30;
-      delete f.flux;
+      const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]);
-      delete f.inlets;
+      const lakeOutCells = Lakes.setClimateData(h);
-      delete f.outlet;
-      delete f.height;
-    });
-  }
 
-  function drainWater() {
+      land.forEach(function (i) {
-    const MIN_FLUX_TO_FORM_RIVER = 30;
+        cells.fl[i] += grid.cells.prec[cells.g[i]]; // flux from precipitation
-    const land = cells.i.filter(i => h[i] >= 20).sort((a,b) => h[b] - h[a]);
+        const [x, y] = p[i];
-    const lakeOutCells = Lakes.setClimateData(h);
 
-    land.forEach(function(i) {
+        // create lake outlet if lake is not in deep depression and flux > evaporation
-      cells.fl[i] += grid.cells.prec[cells.g[i]]; // flux from precipitation
+        const lakes = lakeOutCells[i] ? features.filter(feature => i === feature.outCell && feature.flux > feature.evaporation) : [];
-      const x = p[i][0], y = p[i][1];
+        for (const lake of lakes) {
+          const lakeCell = cells.c[i].find(c => h[c] < 20 && cells.f[c] === lake.i);
 
-      // create lake outlet if flux > evaporation
+          cells.fl[lakeCell] += Math.max(lake.flux - lake.evaporation, 0); // not evaporated lake water drains to outlet
-      const lakes = !lakeOutCells[i] ? [] : features.filter(feature => i === feature.outCell && feature.flux > feature.evaporation);
-      for (const lake of lakes) {
-        const lakeCell = cells.c[i].find(c => h[c] < 20 && cells.f[c] === lake.i);
 
-        cells.fl[lakeCell] += Math.max(lake.flux - lake.evaporation, 0); // not evaporated lake water drains to outlet
+          // allow chain lakes to retain identity
-
+          if (cells.r[lakeCell] !== lake.river) {
-        // allow chain lakes to retain identity
+            const sameRiver = cells.c[lakeCell].some(c => cells.r[c] === lake.river);
-        if (cells.r[lakeCell] !== lake.river) {
+            if (sameRiver) {
-          const sameRiver = cells.c[lakeCell].some(c => cells.r[c] === lake.river);
+              cells.r[lakeCell] = lake.river;
-          if (sameRiver) {
+              riversData.push({river: lake.river, cell: lakeCell, x: p[lakeCell][0], y: p[lakeCell][1], flux: cells.fl[lakeCell]});
-            cells.r[lakeCell] = lake.river;
+            } else {
-            riversData.push({river: lake.river, cell: lakeCell, x: p[lakeCell][0], y: p[lakeCell][1], flux: cells.fl[lakeCell]});
+              cells.r[lakeCell] = riverNext;
-          } else {
+              riversData.push({river: riverNext, cell: lakeCell, x: p[lakeCell][0], y: p[lakeCell][1], flux: cells.fl[lakeCell]});
-            cells.r[lakeCell] = riverNext;
+              riverNext++;
-            riversData.push({river: riverNext, cell: lakeCell, x: p[lakeCell][0], y: p[lakeCell][1], flux: cells.fl[lakeCell]});
+            }
-            riverNext++;
           }
+
+          lake.outlet = cells.r[lakeCell];
+          flowDown(i, cells.fl[i], cells.fl[lakeCell], lake.outlet);
         }
 
-        lake.outlet = cells.r[lakeCell];
+        // assign all tributary rivers to outlet basin
-        flowDown(i, cells.fl[i], cells.fl[lakeCell], lake.outlet);
+        for (let outlet = lakes[0]?.outlet, l = 0; l < lakes.length; l++) {
+          lakes[l].inlets?.forEach(fork => (riversData.find(r => r.river === fork).parent = outlet));
+        }
+
+        // near-border cell: pour water out of the screen
+        if (cells.b[i] && cells.r[i]) {
+          let to = [];
+          const min = Math.min(y, graphHeight - y, x, graphWidth - x);
+          if (min === y) to = [x, 0];
+          else if (min === graphHeight - y) to = [x, graphHeight];
+          else if (min === x) to = [0, y];
+          else if (min === graphWidth - x) to = [graphWidth, y];
+          riversData.push({river: cells.r[i], cell: i, x: to[0], y: to[1], flux: cells.fl[i]});
+          return;
+        }
+
+        // downhill cell (make sure it's not in the source lake)
+        const min = lakeOutCells[i] ? cells.c[i].filter(c => !lakes.map(lake => lake.i).includes(cells.f[c])).sort((a, b) => h[a] - h[b])[0] : cells.c[i].sort((a, b) => h[a] - h[b])[0];
+
+        if (cells.fl[i] < MIN_FLUX_TO_FORM_RIVER) {
+          if (h[min] >= 20) cells.fl[min] += cells.fl[i];
+          return; // flux is too small to operate as river
+        }
+
+        // proclaim a new river
+        if (!cells.r[i]) {
+          cells.r[i] = riverNext;
+          riversData.push({river: riverNext, cell: i, x, y, flux: cells.fl[i]});
+          riverNext++;
+        }
+
+        flowDown(min, cells.fl[min], cells.fl[i], cells.r[i], i);
+      });
+    }
+
+    function flowDown(toCell, toFlux, fromFlux, river, fromCell = 0) {
+      if (cells.r[toCell]) {
+        // downhill cell already has river assigned
+        if (toFlux < fromFlux) {
+          cells.conf[toCell] = cells.fl[toCell]; // mark confluence
+          if (h[toCell] >= 20) riversData.find(r => r.river === cells.r[toCell]).parent = river; // min river is a tributary of current river
+          cells.r[toCell] = river; // re-assign river if downhill part has less flux
+        } else {
+          cells.conf[toCell] += fromFlux; // mark confluence
+          if (h[toCell] >= 20) riversData.find(r => r.river === river).parent = cells.r[toCell]; // current river is a tributary of min river
+        }
+      } else cells.r[toCell] = river; // assign the river to the downhill cell
+
+      if (h[toCell] < 20) {
+        // pour water to the water body
+        const haven = fromCell ? cells.haven[fromCell] : toCell;
+        riversData.push({river, cell: haven, x: p[toCell][0], y: p[toCell][1], flux: fromFlux});
+
+        const waterBody = features[cells.f[toCell]];
+        if (waterBody.type === "lake") {
+          if (!waterBody.river || fromFlux > waterBody.enteringFlux) {
+            waterBody.river = river;
+            waterBody.enteringFlux = fromFlux;
+          }
+          waterBody.flux = waterBody.flux + fromFlux;
+          waterBody.inlets ? waterBody.inlets.push(river) : (waterBody.inlets = [river]);
+        }
+      } else {
+        // propagate flux and add next river segment
+        cells.fl[toCell] += fromFlux;
+        riversData.push({river, cell: toCell, x: p[toCell][0], y: p[toCell][1], flux: fromFlux});
+      }
+    }
+
+    function defineRivers() {
+      cells.r = new Uint16Array(cells.i.length); // re-initiate rivers array
+      pack.rivers = []; // rivers data
+      const riverPaths = [];
+
+      for (let r = 1; r <= riverNext; r++) {
+        const riverSegments = riversData.filter(d => d.river === r);
+        if (riverSegments.length < 3) continue;
+
+        for (const segment of riverSegments) {
+          const i = segment.cell;
+          if (cells.r[i]) continue;
+          if (cells.h[i] < 20) continue;
+          cells.r[i] = r;
+        }
+
+        const source = riverSegments[0].cell;
+        const mouth = riverSegments[riverSegments.length - 2].cell;
+
+        const widthFactor = rn(0.8 + Math.random() * 0.4, 1); // river width modifier [.8, 1.2]
+        const sourceWidth = cells.h[source] >= 20 ? 0.1 : rn(Math.min(Math.max((cells.fl[source] / 500) ** 0.4, 0.5), 1.7), 2);
+
+        const riverMeandered = addMeandering(riverSegments, sourceWidth * 10, 0.5);
+        const [path, length, offset] = getPath(riverMeandered, widthFactor, sourceWidth);
+        riverPaths.push([path, r]);
+
+        const parent = riverSegments[0].parent || 0;
+        const width = rn(offset ** 2, 2); // mounth width in km
+        const discharge = last(riverSegments).flux; // in m3/s
+        pack.rivers.push({i: r, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent});
       }
 
-      // assign all tributary rivers to outlet basin
+      // draw rivers
-      for (let outlet = lakes[0]?.outlet, l = 0; l < lakes.length; l++) {
+      rivers.html(riverPaths.map(d => `<path id="river${d[1]}" d="${d[0]}"/>`).join(""));
-        lakes[l].inlets?.forEach(fork => riversData.find(r => r.river === fork).parent = outlet);
+    }
-      }
+  };
 
-      // near-border cell: pour water out of the screen
+  // add distance to water value to land cells to make map less depressed
-      if (cells.b[i] && cells.r[i]) {
+  function alterHeights() {
-        const to = [];
+    const cells = pack.cells;
-        const min = Math.min(y, graphHeight - y, x, graphWidth - x);
+    return Array.from(cells.h).map((h, i) => {
-        if (min === y) {to[0] = x; to[1] = 0;} else
+      if (h < 20 || cells.t[i] < 1) return h;
-        if (min === graphHeight - y) {to[0] = x; to[1] = graphHeight;} else
+      return h + cells.t[i] / 100 + d3.mean(cells.c[i].map(c => cells.t[c])) / 10000;
-        if (min === x) {to[0] = 0; to[1] = y;} else
-        if (min === graphWidth - x) {to[0] = graphWidth; to[1] = y;}
-        riversData.push({river: cells.r[i], cell: i, x: to[0], y: to[1], flux: cells.fl[i]});
-        return;
-      }
-
-      // downhill cell (make sure it's not in the source lake)
-      const min = lakeOutCells[i]
-        ? cells.c[i].filter(c => !lakes.map(lake => lake.i).includes(cells.f[c])).sort((a, b) => h[a] - h[b])[0]
-        : cells.c[i].sort((a, b) => h[a] - h[b])[0];
-
-      if (cells.fl[i] < MIN_FLUX_TO_FORM_RIVER) {
-        if (h[min] >= 20) cells.fl[min] += cells.fl[i];
-        return; // flux is too small to operate as river
-      }
-
-      // proclaim a new river
-      if (!cells.r[i]) {
-        cells.r[i] = riverNext;
-        riversData.push({river: riverNext, cell: i, x, y, flux: cells.fl[i]});
-        riverNext++;
-      }
-
-      flowDown(min, cells.fl[min], cells.fl[i], cells.r[i], i);
     });
   }
 
-  function flowDown(toCell, toFlux, fromFlux, river, fromCell = 0) {
+  // depression filling algorithm (for a correct water flux modeling)
-    if (cells.r[toCell]) {
+  const resolveDepressions = function (h, maxIterations) {
-      // downhill cell already has river assigned
+    const {cells, features} = pack;
-      if (toFlux < fromFlux) {
+    const height = i => features[cells.f[i]].height || h[i]; // height of lake or specific cell
-        cells.conf[toCell] = cells.fl[toCell]; // mark confluence
+
-        if (h[toCell] >= 20) riversData.find(r => r.river === cells.r[toCell]).parent = river; // min river is a tributary of current river
+    const lakes = features.filter(f => f.type === "lake");
-        cells.r[toCell] = river; // re-assign river if downhill part has less flux
+    const land = cells.i.filter(i => h[i] >= 20 && !cells.b[i]); // exclude near-border cells
-      } else {
+    land.sort((a, b) => h[b] - h[a]); // highest cells go first
-        cells.conf[toCell] += fromFlux; // mark confluence
+
-        if (h[toCell] >= 20) riversData.find(r => r.river === river).parent = cells.r[toCell]; // current river is a tributary of min river
+    const progress = [];
+    let depressions = Infinity;
+    let prevDepressions = null;
+    for (let iteration = 0; depressions && iteration < maxIterations; iteration++) {
+      if (progress.length > 5 && d3.sum(progress) > 0) {
+        // bad progress, abort and set heights back
+        h = alterHeights();
+        depressions = progress[0];
+        break;
       }
-    } else cells.r[toCell] = river; // assign the river to the downhill cell
 
-    if (h[toCell] < 20) {
+      depressions = 0;
-      // pour water to the water body
-      const haven = fromCell ? cells.haven[fromCell] : toCell;
-      riversData.push({river, cell: haven, x: p[toCell][0], y: p[toCell][1], flux: fromFlux});
 
-      const waterBody = features[cells.f[toCell]];
+      if (iteration < 180) {
-      if (waterBody.type === "lake") {
+        for (const l of lakes) {
-        if (!waterBody.river || fromFlux > waterBody.enteringFlux) {
+          if (l.closed) continue;
-          waterBody.river = river;
+          const minHeight = d3.min(l.shoreline.map(s => h[s]));
-          waterBody.enteringFlux = fromFlux;
+          if (minHeight >= 100 || l.height > minHeight) continue;
+
+          if (iteration > 150) {
+            l.shoreline.forEach(i => (h[i] = cells.h[i]));
+            l.height = d3.min(l.shoreline.map(s => h[s])) - 1;
+            l.closed = true;
+            continue;
+          }
+
+          depressions++;
+          l.height = minHeight + 0.2;
         }
-        waterBody.flux = waterBody.flux + fromFlux;
-        waterBody.inlets ? waterBody.inlets.push(river) : waterBody.inlets = [river];
-      }
-    } else {
-      // propagate flux and add next river segment
-      cells.fl[toCell] += fromFlux;
-      riversData.push({river, cell: toCell, x: p[toCell][0], y: p[toCell][1], flux: fromFlux});
-    }
-  }
-
-  function defineRivers() {
-    cells.r = new Uint16Array(cells.i.length); // re-initiate rivers array
-    pack.rivers = []; // rivers data
-    const riverPaths = [];
-
-    for (let r = 1; r <= riverNext; r++) {
-      const riverSegments = riversData.filter(d => d.river === r);
-      if (riverSegments.length < 3) continue;
-
-      for (const segment of riverSegments) {
-        const i = segment.cell;
-        if (cells.r[i]) continue;
-        if (cells.h[i] < 20) continue;
-        cells.r[i] = r;
       }
 
-      const source = riverSegments[0].cell;
+      for (const i of land) {
-      const mouth = riverSegments[riverSegments.length-2].cell;
+        const minHeight = d3.min(cells.c[i].map(c => height(c)));
+        if (minHeight >= 100 || h[i] > minHeight) continue;
 
-      const widthFactor = rn(.8 + Math.random() * .4, 1); // river width modifier [.8, 1.2]
+        depressions++;
-      const sourceWidth = cells.h[source] >= 20 ? .1 : rn(Math.min(Math.max((cells.fl[source] / 500) ** .4, .5), 1.7), 2);
+        h[i] = minHeight + 0.1;
+      }
 
-      const riverMeandered = addMeandering(riverSegments, sourceWidth * 10, .5);
+      prevDepressions !== null && progress.push(depressions - prevDepressions);
-      const [path, length, offset] = getPath(riverMeandered, widthFactor, sourceWidth);
+      prevDepressions = depressions;
-      riverPaths.push([path, r]);
-
-      const parent = riverSegments[0].parent || 0;
-      const width = rn(offset ** 2, 2); // mounth width in km
-      const discharge = last(riverSegments).flux; // in m3/s
-      pack.rivers.push({i:r, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent});
     }
 
-    // draw rivers
+    if (!depressions) return;
-    rivers.html(riverPaths.map(d => `<path id="river${d[1]}" d="${d[0]}"/>`).join(""));
+    WARN && console.warn(`Unresolved depressions: ${depressions}. Edit heightmap to fix`);
-  }
+    //const flow = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length);
-}
+    //flow[i] = min;
+    //debug.append("path").attr("class", "arrow").attr("d", `M${cells.p[i][0]},${cells.p[i][1]}L${cells.p[min][0]},${cells.p[min][1]}`);
+  };
 
-// depression filling algorithm (for a correct water flux modeling)
+  // add more river points on 1/3 and 2/3 of length
-const resolveDepressions = function(h) {
+  const addMeandering = function (segments, width = 1, meandering = 0.5) {
-  const {cells, features} = pack;
+    const riverMeandered = []; // to store enhanced segments
-  const ITERATIONS = 150;
 
-  const lakes = features.filter(f => f.type === "lake");
+    for (let s = 0; s < segments.length; s++, width++) {
-  lakes.forEach(l => {
+      const sX = segments[s].x,
-    const uniqueCells = new Set();
+        sY = segments[s].y; // segment start coordinates
-    l.vertices.forEach(v => pack.vertices.c[v].forEach(c => cells.h[c] >= 20 && uniqueCells.add(c)));
+      const c = pack.cells.conf[segments[s].cell] || 0; // if segment is river confluence
-    l.shoreline = [...uniqueCells];
+      riverMeandered.push([sX, sY, c]);
-  });
 
-  const land = cells.i.filter(i => h[i] >= 20 && !cells.b[i]); // exclude near-border cells
+      if (s + 1 === segments.length) break; // do not meander last segment
-  land.sort((a,b) => h[b] - h[a]); // highest cells go first
 
-  let depressions = Infinity;
+      const eX = segments[s + 1].x,
-  for (let l = 0; depressions && l < ITERATIONS; l++) {
+        eY = segments[s + 1].y; // segment end coordinates
-    depressions = 0;
+      const angle = Math.atan2(eY - sY, eX - sX);
+      const sin = Math.sin(angle),
+        cos = Math.cos(angle);
 
-    for (const l of lakes) {
+      const meander = meandering + 1 / width + Math.random() * Math.max(meandering - width / 100, 0);
-      const minHeight = d3.min(l.shoreline.map(s => h[s]));
+      const dist2 = (eX - sX) ** 2 + (eY - sY) ** 2; // square distance between segment start and end
-      if (minHeight >= 100 || l.height > minHeight) continue;
+
-      l.height = minHeight + 1;
+      if (width < 10 && (dist2 > 64 || (dist2 > 36 && segments.length < 6))) {
-      depressions++;
+        // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment
+        const p1x = (sX * 2 + eX) / 3 + -sin * meander;
+        const p1y = (sY * 2 + eY) / 3 + cos * meander;
+        const p2x = (sX + eX * 2) / 3 + sin * meander;
+        const p2y = (sY + eY * 2) / 3 + cos * meander;
+        riverMeandered.push([p1x, p1y], [p2x, p2y]);
+      } else if (dist2 > 25 || segments.length < 6) {
+        // if dist is medium or river is small add 1 extra middlepoint
+        const p1x = (sX + eX) / 2 + -sin * meander;
+        const p1y = (sY + eY) / 2 + cos * meander;
+        riverMeandered.push([p1x, p1y]);
+      }
     }
 
-    for (const i of land) {
+    return riverMeandered;
-      const minHeight = d3.min(cells.c[i].map(c => cells.t[c] > 0 ? h[c] : pack.features[cells.f[c]].height || h[c]));
+  };
-      if (minHeight >= 100 || h[i] > minHeight) continue;
-      h[i] = minHeight + 1;
-      depressions++;
-    }
-  }
 
-  depressions && ERROR && console.error("Heightmap is depressed. Issues with rivers expected. Remove depressed areas to resolve");
+  const getPath = function (points, widthFactor = 1, sourceWidth = 0.1) {
-}
+    let offset,
+      extraOffset = sourceWidth; // starting river width (to make river source visible)
+    const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); // summ of segments length
+    const widening = 1000 + riverLength * 30;
+    const riverPointsLeft = [],
+      riverPointsRight = []; // store points on both sides to build a valid polygon
+    const last = points.length - 1;
+    const factor = riverLength / points.length;
 
-// add more river points on 1/3 and 2/3 of length
+    // first point
-const addMeandering = function(segments, width = 1, meandering = .5) {
+    let x = points[0][0],
-  const riverMeandered = []; // to store enhanced segments
+      y = points[0][1],
-
+      c;
-  for (let s = 0; s < segments.length; s++, width++) {
+    let angle = Math.atan2(y - points[1][1], x - points[1][0]);
-    const sX = segments[s].x, sY = segments[s].y; // segment start coordinates
+    let sin = Math.sin(angle),
-    const c = pack.cells.conf[segments[s].cell] || 0; // if segment is river confluence
+      cos = Math.cos(angle);
-    riverMeandered.push([sX, sY, c]);
+    let xLeft = x + -sin * extraOffset,
-
+      yLeft = y + cos * extraOffset;
-    if (s+1 === segments.length) break; // do not meander last segment
-
-    const eX = segments[s+1].x, eY = segments[s+1].y; // segment end coordinates
-    const angle = Math.atan2(eY - sY, eX - sX);
-    const sin = Math.sin(angle), cos = Math.cos(angle);
-
-    const meander = meandering + 1 / width + Math.random() * Math.max(meandering - width / 100, 0);
-    const dist2 = (eX - sX) ** 2 + (eY - sY) ** 2; // square distance between segment start and end
-
-    if (width < 10 && (dist2 > 64 || (dist2 > 36 && segments.length < 6))) {
-      // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment
-      const p1x = (sX * 2 + eX) / 3 + -sin * meander;
-      const p1y = (sY * 2 + eY) / 3 + cos * meander;
-      const p2x = (sX + eX * 2) / 3 + sin * meander;
-      const p2y = (sY + eY * 2) / 3 + cos * meander;
-      riverMeandered.push([p1x, p1y], [p2x, p2y]);
-    } else if (dist2 > 25 || segments.length < 6) {
-      // if dist is medium or river is small add 1 extra middlepoint
-      const p1x = (sX + eX) / 2 + -sin * meander;
-      const p1y = (sY + eY) / 2 + cos * meander;
-      riverMeandered.push([p1x, p1y]);
-    }
-
-  }
-
-  return riverMeandered;
-}
-
-const getPath = function(points, widthFactor = 1, sourceWidth = .1) {
-  let offset, extraOffset = sourceWidth; // starting river width (to make river source visible)
-  const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i-1][0], v[1] - p[i-1][1]) : 0), 0); // summ of segments length
-  const widening = 1000 + riverLength * 30;
-  const riverPointsLeft = [], riverPointsRight = []; // store points on both sides to build a valid polygon
-  const last = points.length - 1;
-  const factor = riverLength / points.length;
-
-  // first point
-  let x = points[0][0], y = points[0][1], c;
-  let angle = Math.atan2(y - points[1][1], x - points[1][0]);
-  let sin = Math.sin(angle), cos = Math.cos(angle);
-  let xLeft = x + -sin * extraOffset, yLeft = y + cos * extraOffset;
-  riverPointsLeft.push([xLeft, yLeft]);
-  let xRight = x + sin * extraOffset, yRight = y + -cos * extraOffset;
-  riverPointsRight.unshift([xRight, yRight]);
-
-  // middle points
-  for (let p = 1; p < last; p++) {
-    x = points[p][0], y = points[p][1], c = points[p][2] || 0;
-    const xPrev = points[p-1][0], yPrev = points[p - 1][1];
-    const xNext = points[p+1][0], yNext = points[p + 1][1];
-    angle = Math.atan2(yPrev - yNext, xPrev - xNext);
-    sin = Math.sin(angle), cos = Math.cos(angle);
-    offset = (Math.atan(Math.pow(p * factor, 2) / widening) / 2 * widthFactor) + extraOffset;
-    const confOffset = Math.atan(c * 5 / widening);
-    extraOffset += confOffset;
-    xLeft = x + -sin * offset, yLeft = y + cos * (offset + confOffset);
     riverPointsLeft.push([xLeft, yLeft]);
-    xRight = x + sin * offset, yRight = y + -cos * offset;
+    let xRight = x + sin * extraOffset,
+      yRight = y + -cos * extraOffset;
     riverPointsRight.unshift([xRight, yRight]);
-  }
 
-  // end point
+    // middle points
-  x = points[last][0], y = points[last][1], c = points[last][2];
+    for (let p = 1; p < last; p++) {
-  if (c) extraOffset += Math.atan(c * 10 / widening); // add extra width on river confluence
+      (x = points[p][0]), (y = points[p][1]), (c = points[p][2] || 0);
-  angle = Math.atan2(points[last-1][1] - y, points[last-1][0] - x);
+      const xPrev = points[p - 1][0],
-  sin = Math.sin(angle), cos = Math.cos(angle);
+        yPrev = points[p - 1][1];
-  xLeft = x + -sin * offset, yLeft = y + cos * offset;
+      const xNext = points[p + 1][0],
-  riverPointsLeft.push([xLeft, yLeft]);
+        yNext = points[p + 1][1];
-  xRight = x + sin * offset, yRight = y + -cos * offset;
+      angle = Math.atan2(yPrev - yNext, xPrev - xNext);
-  riverPointsRight.unshift([xRight, yRight]);
+      (sin = Math.sin(angle)), (cos = Math.cos(angle));
+      offset = (Math.atan(Math.pow(p * factor, 2) / widening) / 2) * widthFactor + extraOffset;
+      const confOffset = Math.atan((c * 5) / widening);
+      extraOffset += confOffset;
+      (xLeft = x + -sin * offset), (yLeft = y + cos * (offset + confOffset));
+      riverPointsLeft.push([xLeft, yLeft]);
+      (xRight = x + sin * offset), (yRight = y + -cos * offset);
+      riverPointsRight.unshift([xRight, yRight]);
+    }
 
-  // generate polygon path and return
+    // end point
-  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+    (x = points[last][0]), (y = points[last][1]), (c = points[last][2]);
-  const right = lineGen(riverPointsRight);
+    if (c) extraOffset += Math.atan((c * 10) / widening); // add extra width on river confluence
-  let left = lineGen(riverPointsLeft);
+    angle = Math.atan2(points[last - 1][1] - y, points[last - 1][0] - x);
-  left = left.substring(left.indexOf("C"));
+    (sin = Math.sin(angle)), (cos = Math.cos(angle));
-  return [round(right + left, 2), rn(riverLength, 2), offset];
+    (xLeft = x + -sin * offset), (yLeft = y + cos * offset);
-}
+    riverPointsLeft.push([xLeft, yLeft]);
+    (xRight = x + sin * offset), (yRight = y + -cos * offset);
+    riverPointsRight.unshift([xRight, yRight]);
 
-const specify = function() {
+    // generate polygon path and return
-  const rivers = pack.rivers;
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
-  if (!rivers.length) return;
+    const right = lineGen(riverPointsRight);
-  Math.random = aleaPRNG(seed);
+    let left = lineGen(riverPointsLeft);
-  const tresholdElement = Math.ceil(rivers.length * .15);
+    left = left.substring(left.indexOf("C"));
-  const smallLength = rivers.map(r => r.length || 0).sort((a, b) => a-b)[tresholdElement];
+    return [round(right + left, 2), rn(riverLength, 2), offset];
-  const smallType = {"Creek":9, "River":3, "Brook":3, "Stream":1}; // weighted small river types
+  };
 
-  for (const r of rivers) {
+  const specify = function () {
-    r.basin = getBasin(r.i);
+    const rivers = pack.rivers;
-    r.name = getName(r.mouth);
+    if (!rivers.length) return;
-    const small = r.length < smallLength;
+    Math.random = aleaPRNG(seed);
-    r.type = r.parent && !(r.i%6) ? small ? "Branch" : "Fork" : small ? rw(smallType) : "River";
+    const tresholdElement = Math.ceil(rivers.length * 0.15);
-  }
+    const smallLength = rivers.map(r => r.length || 0).sort((a, b) => a - b)[tresholdElement];
-}
+    const smallType = {Creek: 9, River: 3, Brook: 3, Stream: 1}; // weighted small river types
 
-const getName = function(cell) {
+    for (const r of rivers) {
-  return Names.getCulture(pack.cells.culture[cell]);
+      r.basin = getBasin(r.i);
-}
+      r.name = getName(r.mouth);
+      const small = r.length < smallLength;
+      r.type = r.parent && !(r.i % 6) ? (small ? "Branch" : "Fork") : small ? rw(smallType) : "River";
+    }
+  };
 
-// remove river and all its tributaries
+  const getName = function (cell) {
-const remove = function(id) {
+    return Names.getCulture(pack.cells.culture[cell]);
-  const cells = pack.cells;
+  };
-  const riversToRemove = pack.rivers.filter(r => r.i === id || r.parent === id || r.basin === id).map(r => r.i);
-  riversToRemove.forEach(r => rivers.select("#river"+r).remove());
-  cells.r.forEach((r, i) => {
-    if (!r || !riversToRemove.includes(r)) return;
-    cells.r[i] = 0;
-    cells.fl[i] = grid.cells.prec[cells.g[i]];
-    cells.conf[i] = 0;
-  });
-  pack.rivers = pack.rivers.filter(r => !riversToRemove.includes(r.i));
-}
 
-const getBasin = function(r) {
+  // remove river and all its tributaries
-  const parent = pack.rivers.find(river => river.i === r)?.parent;
+  const remove = function (id) {
-  if (!parent || r === parent) return r;
+    const cells = pack.cells;
-  return getBasin(parent);
+    const riversToRemove = pack.rivers.filter(r => r.i === id || r.parent === id || r.basin === id).map(r => r.i);
-}
+    riversToRemove.forEach(r => rivers.select("#river" + r).remove());
+    cells.r.forEach((r, i) => {
+      if (!r || !riversToRemove.includes(r)) return;
+      cells.r[i] = 0;
+      cells.fl[i] = grid.cells.prec[cells.g[i]];
+      cells.conf[i] = 0;
+    });
+    pack.rivers = pack.rivers.filter(r => !riversToRemove.includes(r.i));
+  };
 
-return {generate, resolveDepressions, addMeandering, getPath, specify, getName, getBasin, remove};
+  const getBasin = function (r) {
+    const parent = pack.rivers.find(river => river.i === r)?.parent;
+    if (!parent || r === parent) return r;
+    return getBasin(parent);
+  };
 
-})));
+  return {generate, resolveDepressions, addMeandering, getPath, specify, getName, getBasin, remove};
+});

modules/ui/heightmap-editor.js

@@ -2,7 +2,7 @@
 "use strict";
 
 function editHeightmap() {
-  void function selectEditMode() {
+  void (function selectEditMode() {
     alertMessage.innerHTML = `Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
       So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.
       <p><i>Erase</i> mode also allows you Convert an Image into a heightmap or use Template Editor.</p>
@@ -11,15 +11,26 @@ function editHeightmap() {
       <p>Please <span class="pseudoLink" onclick=saveMap(); editHeightmap();>save the map</span> before editing the heightmap!</p>
       <p>Check out ${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Heightmap-customization", "wiki")} for guidance.</p>`;
 
-    $("#alert").dialog({resizable: false, title: "Edit Heightmap", width: "28em",
+    $("#alert").dialog({
+      resizable: false,
+      title: "Edit Heightmap",
+      width: "28em",
       buttons: {
-        Erase: function() {enterHeightmapEditMode("erase");},
+        Erase: function () {
-        Keep: function() {enterHeightmapEditMode("keep");},
+          enterHeightmapEditMode("erase");
-        Risk: function() {enterHeightmapEditMode("risk");},
+        },
-        Cancel: function() {$(this).dialog("close");}
+        Keep: function () {
+          enterHeightmapEditMode("keep");
+        },
+        Risk: function () {
+          enterHeightmapEditMode("risk");
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
-  }()
+  })();
 
   restartHistory();
   viewbox.insert("g", "#terrs").attr("id", "heights");
@@ -35,8 +46,8 @@ function editHeightmap() {
   document.getElementById("heightmap3DView").addEventListener("click", changeViewMode);
   document.getElementById("finalizeHeightmap").addEventListener("click", finalizeHeightmap);
   document.getElementById("renderOcean").addEventListener("click", mockHeightmap);
-  document.getElementById("templateUndo").addEventListener("click", () => restoreHistory(edits.n-1));
+  document.getElementById("templateUndo").addEventListener("click", () => restoreHistory(edits.n - 1));
-  document.getElementById("templateRedo").addEventListener("click", () => restoreHistory(edits.n+1));
+  document.getElementById("templateRedo").addEventListener("click", () => restoreHistory(edits.n + 1));
 
   function enterHeightmapEditMode(type) {
     editHeightmap.layers = Array.from(mapLayers.querySelectorAll("li:not(.buttonoff)")).map(node => node.id); // store layers preset
@@ -77,9 +88,7 @@ function editHeightmap() {
       exitCustomization.style.bottom = svgHeight / 2 + "px";
       exitCustomization.style.transform = "scale(2)";
       exitCustomization.style.display = "block";
-      d3.select("#exitCustomization")
+      d3.select("#exitCustomization").transition().duration(1000).style("opacity", 1).transition().duration(2000).ease(d3.easeSinInOut).style("right", "10px").style("bottom", "10px").style("transform", "scale(1)");
-        .transition().duration(1000).style("opacity", 1)
-        .transition().duration(2000).ease(d3.easeSinInOut).style("right", "10px").style("bottom", "10px").style("transform", "scale(1)");
     } else exitCustomization.style.display = "block";
 
     openBrushesPanel();
@@ -91,7 +100,8 @@ function editHeightmap() {
   }
 
   function moveCursor() {
-    const p = d3.mouse(this), cell = findGridCell(p[0], p[1]);
+    const p = d3.mouse(this),
+      cell = findGridCell(p[0], p[1]);
     heightmapInfoX.innerHTML = rn(p[0]);
     heightmapInfoY.innerHTML = rn(p[1]);
     heightmapInfoCell.innerHTML = cell;
@@ -108,12 +118,13 @@ function editHeightmap() {
   function getHeight(h) {
     const unit = heightUnit.value;
     let unitRatio = 3.281; // default calculations are in feet
-    if (unit === "m") unitRatio = 1; // if meter
+    if (unit === "m") unitRatio = 1;
+    // if meter
     else if (unit === "f") unitRatio = 0.5468; // if fathom
 
     let height = -990;
     if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value);
-    else if (h < 20 && h > 0) height = (h - 20) / h * 50;
+    else if (h < 20 && h > 0) height = ((h - 20) / h) * 50;
 
     return rn(height * unitRatio) + " " + unit;
   }
@@ -156,10 +167,14 @@ function editHeightmap() {
     //viewbox.select("#heights").remove();
     document.getElementById("heights").remove();
     turnButtonOff("toggleHeight");
-    document.getElementById("mapLayers").querySelectorAll("li").forEach(function(e) {
+    document
-      if (editHeightmap.layers.includes(e.id) && !layerIsOn(e.id)) e.click(); // turn on
+      .getElementById("mapLayers")
-      else if (!editHeightmap.layers.includes(e.id) && layerIsOn(e.id)) e.click(); // turn off
+      .querySelectorAll("li")
-    });
+      .forEach(function (e) {
+        if (editHeightmap.layers.includes(e.id) && !layerIsOn(e.id)) e.click();
+        // turn on
+        else if (!editHeightmap.layers.includes(e.id) && layerIsOn(e.id)) e.click(); // turn off
+      });
     getCurrentPreset();
   }
 
@@ -169,7 +184,7 @@ function editHeightmap() {
 
     const change = changeHeights.checked;
     markFeatures();
-    getSignedDistanceField();
+    markupGridOcean();
     if (change) openNearSeaLakes();
     OceanLayers();
     calculateTemperatures();
@@ -275,7 +290,7 @@ function editHeightmap() {
     }
 
     // recalculate zones to grid
-    zones.selectAll("g").each(function() {
+    zones.selectAll("g").each(function () {
       const zone = d3.select(this);
       const dataCells = zone.attr("data-cells");
       const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
@@ -285,7 +300,7 @@ function editHeightmap() {
     });
 
     markFeatures();
-    getSignedDistanceField();
+    markupGridOcean();
     OceanLayers();
     calculateTemperatures();
     generatePrecipitation();
@@ -339,14 +354,12 @@ function editHeightmap() {
     }
 
     // find closest land cell to burg
-    const findBurgCell = function(x, y) {
+    const findBurgCell = function (x, y) {
       let i = findCell(x, y);
       if (pack.cells.h[i] >= 20) return i;
-      const dist = pack.cells.c[i].map(c => 
+      const dist = pack.cells.c[i].map(c => (pack.cells.h[c] < 20 ? Infinity : (pack.cells.p[c][0] - x) ** 2 + (pack.cells.p[c][1] - y) ** 2));
-        pack.cells.h[c] < 20 ? Infinity : (pack.cells.p[c][0] - x) ** 2 + (pack.cells.p[c][1] - y) ** 2
-      );
       return pack.cells.c[i][d3.scan(dist)];
-    }
+    };
 
     // find best cell for burgs
     for (const b of pack.burgs) {
@@ -372,7 +385,10 @@ function editHeightmap() {
       }
 
       if (p.burg && !pack.burgs[p.burg].removed) p.center = pack.burgs[p.burg].cell;
-      else {p.center = provCells[0]; p.burg = pack.cells.burg[p.center];}
+      else {
+        p.center = provCells[0];
+        p.burg = pack.cells.burg[p.center];
+      }
     }
 
     for (const c of pack.cultures) {
@@ -390,7 +406,7 @@ function editHeightmap() {
     }
 
     // restore zones from grid
-    zones.selectAll("g").each(function() {
+    zones.selectAll("g").each(function () {
       const zone = d3.select(this);
       const g = zone.attr("data-cells");
       const gCells = g ? g.split(",").map(i => +i) : [];
@@ -399,8 +415,13 @@ function editHeightmap() {
       zone.attr("data-cells", cells);
       zone.selectAll("*").remove();
       const base = zone.attr("id") + "_"; // id generic part
-      zone.selectAll("*").data(cells).enter().append("polygon")
+      zone
-        .attr("points", d => getPackPolygon(d)).attr("id", d => base + d);
+        .selectAll("*")
+        .data(cells)
+        .enter()
+        .append("polygon")
+        .attr("points", d => getPackPolygon(d))
+        .attr("id", d => base + d);
     });
 
     TIME && console.timeEnd("restoreRiskedData");
@@ -410,7 +431,7 @@ function editHeightmap() {
   // trigger heightmap redraw and history update if at least 1 cell is changed
   function updateHeightmap() {
     const prev = last(edits);
-    const changed = grid.cells.h.reduce((s, h, i) => h !== prev[i] ? s+1 : s, 0);
+    const changed = grid.cells.h.reduce((s, h, i) => (h !== prev[i] ? s + 1 : s), 0);
     tip("Cells changed: " + changed);
     if (!changed) return;
 
@@ -429,8 +450,13 @@ function editHeightmap() {
   function mockHeightmap() {
     const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
     const scheme = getColorScheme();
-    viewbox.select("#heights").selectAll("polygon").data(data).join("polygon")
+    viewbox
-      .attr("points", d => getGridPolygon(d)).attr("id", d => "cell"+d)
+      .select("#heights")
+      .selectAll("polygon")
+      .data(data)
+      .join("polygon")
+      .attr("points", d => getGridPolygon(d))
+      .attr("id", d => "cell" + d)
       .attr("fill", d => getColor(grid.cells.h[d], scheme));
   }
 
@@ -439,17 +465,25 @@ function editHeightmap() {
     const ocean = renderOcean.checked;
     const scheme = getColorScheme();
 
-    selection.forEach(function(i) {
+    selection.forEach(function (i) {
-      let cell = viewbox.select("#heights").select("#cell"+i);
+      let cell = viewbox.select("#heights").select("#cell" + i);
-      if (!ocean && grid.cells.h[i] < 20) {cell.remove(); return;}
+      if (!ocean && grid.cells.h[i] < 20) {
-      if (!cell.size()) cell = viewbox.select("#heights").append("polygon").attr("points", getGridPolygon(i)).attr("id", "cell"+i);
+        cell.remove();
+        return;
+      }
+      if (!cell.size())
+        cell = viewbox
+          .select("#heights")
+          .append("polygon")
+          .attr("points", getGridPolygon(i))
+          .attr("id", "cell" + i);
       cell.attr("fill", getColor(grid.cells.h[i], scheme));
     });
   }
 
   function updateStatistics() {
-    const landCells = grid.cells.h.reduce((s, h) => h >= 20 ? s+1 : s);
+    const landCells = grid.cells.h.reduce((s, h) => (h >= 20 ? s + 1 : s));
-    landmassCounter.innerHTML = `${landCells} (${rn(landCells/grid.cells.i.length*100)}%)`;
+    landmassCounter.innerHTML = `${landCells} (${rn((landCells / grid.cells.i.length) * 100)}%)`;
     landmassAverage.innerHTML = rn(d3.mean(grid.cells.h));
   }
 
@@ -493,10 +527,13 @@ function editHeightmap() {
 
   function openBrushesPanel() {
     if ($("#brushesPanel").is(":visible")) return;
-    $("#brushesPanel").dialog({
+    $("#brushesPanel")
-      title: "Paint Brushes", resizable: false,
+      .dialog({
-      position: {my: "right top", at: "right-10 top+10", of: "svg"}
+        title: "Paint Brushes",
-    }).on('dialogclose', exitBrushMode);
+        resizable: false,
+        position: {my: "right top", at: "right-10 top+10", of: "svg"}
+      })
+      .on("dialogclose", exitBrushMode);
 
     if (modules.openBrushesPanel) return;
     modules.openBrushesPanel = true;
@@ -504,8 +541,8 @@ function editHeightmap() {
     // add listeners
     document.getElementById("brushesButtons").addEventListener("click", e => toggleBrushMode(e));
     document.getElementById("changeOnlyLand").addEventListener("click", e => changeOnlyLandClick(e));
-    document.getElementById("undo").addEventListener("click", () => restoreHistory(edits.n-1));
+    document.getElementById("undo").addEventListener("click", () => restoreHistory(edits.n - 1));
-    document.getElementById("redo").addEventListener("click", () => restoreHistory(edits.n+1));
+    document.getElementById("redo").addEventListener("click", () => restoreHistory(edits.n + 1));
     document.getElementById("rescaleShow").addEventListener("click", () => {
       document.getElementById("modifyButtons").style.display = "none";
       document.getElementById("rescaleSection").style.display = "block";
@@ -514,7 +551,7 @@ function editHeightmap() {
       document.getElementById("modifyButtons").style.display = "block";
       document.getElementById("rescaleSection").style.display = "none";
     });
-    document.getElementById("rescaler").addEventListener("change", (e) => rescale(e.target.valueAsNumber));
+    document.getElementById("rescaler").addEventListener("change", e => rescale(e.target.valueAsNumber));
     document.getElementById("rescaleCondShow").addEventListener("click", () => {
       document.getElementById("modifyButtons").style.display = "none";
       document.getElementById("rescaleCondSection").style.display = "block";
@@ -539,7 +576,10 @@ function editHeightmap() {
     }
 
     function toggleBrushMode(e) {
-      if (e.target.classList.contains("pressed")) {exitBrushMode(); return;}
+      if (e.target.classList.contains("pressed")) {
+        exitBrushMode();
+        return;
+      }
       exitBrushMode();
       document.getElementById("brushesSliders").style.display = "block";
       e.target.classList.add("pressed");
@@ -568,17 +608,19 @@ function editHeightmap() {
       const power = brushPower.valueAsNumber;
       const interpolate = d3.interpolateRound(power, 1);
       const land = changeOnlyLand.checked;
-      function lim(v) {return Math.max(Math.min(v, 100), land ? 20 : 0);}
+      function lim(v) {
+        return Math.max(Math.min(v, 100), land ? 20 : 0);
+      }
       const h = grid.cells.h;
 
       const brush = document.querySelector("#brushesButtons > button.pressed").id;
-      if (brush === "brushRaise") s.forEach(i => h[i] = h[i] < 20 ? 20 : lim(h[i] + power)); else
+      if (brush === "brushRaise") s.forEach(i => (h[i] = h[i] < 20 ? 20 : lim(h[i] + power)));
-      if (brush === "brushElevate") s.forEach((i,d) => h[i] = lim(h[i] + interpolate(d/Math.max(s.length-1, 1)))); else
+      else if (brush === "brushElevate") s.forEach((i, d) => (h[i] = lim(h[i] + interpolate(d / Math.max(s.length - 1, 1)))));
-      if (brush === "brushLower") s.forEach(i => h[i] = lim(h[i] - power)); else
+      else if (brush === "brushLower") s.forEach(i => (h[i] = lim(h[i] - power)));
-      if (brush === "brushDepress") s.forEach((i,d) => h[i] = lim(h[i] - interpolate(d/Math.max(s.length-1, 1)))); else
+      else if (brush === "brushDepress") s.forEach((i, d) => (h[i] = lim(h[i] - interpolate(d / Math.max(s.length - 1, 1)))));
-      if (brush === "brushAlign") s.forEach(i => h[i] = lim(h[start])); else
+      else if (brush === "brushAlign") s.forEach(i => (h[i] = lim(h[start])));
-      if (brush === "brushSmooth") s.forEach(i => h[i] = rn((d3.mean(grid.cells.c[i].filter(i => land ? h[i] >= 20 : 1).map(c => h[c])) + h[i]*(10-power) + .6) / (11-power),1)); else
+      else if (brush === "brushSmooth") s.forEach(i => (h[i] = rn((d3.mean(grid.cells.c[i].filter(i => (land ? h[i] >= 20 : 1)).map(c => h[c])) + h[i] * (10 - power) + 0.6) / (11 - power), 1)));
-      if (brush === "brushDisrupt") s.forEach(i => h[i] = h[i] < 15 ? h[i] : lim(h[i] + power/1.6 - Math.random()*power));
+      else if (brush === "brushDisrupt") s.forEach(i => (h[i] = h[i] < 15 ? h[i] : lim(h[i] + power / 1.6 - Math.random() * power)));
 
       mockHeightmapSelection(s);
       // updateHistory(); uncomment to update history every step
@@ -592,7 +634,7 @@ function editHeightmap() {
 
     function rescale(v) {
       const land = changeOnlyLand.checked;
-      grid.cells.h = grid.cells.h.map(h => land && (h < 20 || h+v < 20) ? h : lim(h+v));
+      grid.cells.h = grid.cells.h.map(h => (land && (h < 20 || h + v < 20) ? h : lim(h + v)));
       updateHeightmap();
       document.getElementById("rescaler").value = 0;
     }
@@ -601,14 +643,20 @@ function editHeightmap() {
       const range = rescaleLower.value + "-" + rescaleHigher.value;
       const operator = conditionSign.value;
       const operand = rescaleModifier.valueAsNumber;
-      if (Number.isNaN(operand)) {tip("Operand should be a number", false, "error"); return;}
+      if (Number.isNaN(operand)) {
-      if ((operator === "add" || operator === "subtract") && !Number.isInteger(operand)) {tip("Operand should be an integer", false, "error"); return;}
+        tip("Operand should be a number", false, "error");
+        return;
+      }
+      if ((operator === "add" || operator === "subtract") && !Number.isInteger(operand)) {
+        tip("Operand should be an integer", false, "error");
+        return;
+      }
 
-      if (operator === "multiply") HeightmapGenerator.modify(range, 0, operand, 0); else
+      if (operator === "multiply") HeightmapGenerator.modify(range, 0, operand, 0);
-      if (operator === "divide") HeightmapGenerator.modify(range, 0, 1 / operand, 0); else
+      else if (operator === "divide") HeightmapGenerator.modify(range, 0, 1 / operand, 0);
-      if (operator === "add") HeightmapGenerator.modify(range, operand, 1, 0); else
+      else if (operator === "add") HeightmapGenerator.modify(range, operand, 1, 0);
-      if (operator === "subtract") HeightmapGenerator.modify(range, -1 * operand, 1, 0); else
+      else if (operator === "subtract") HeightmapGenerator.modify(range, -1 * operand, 1, 0);
-      if (operator === "exponent") HeightmapGenerator.modify(range, 0, 1, operand);
+      else if (operator === "exponent") HeightmapGenerator.modify(range, 0, 1, operand);
 
       updateHeightmap();
     }
@@ -619,19 +667,24 @@ function editHeightmap() {
     }
 
     function disruptAllHeights() {
-      grid.cells.h = grid.cells.h.map(h => h < 15 ? h : lim(h + 2.5 - Math.random() * 4));
+      grid.cells.h = grid.cells.h.map(h => (h < 15 ? h : lim(h + 2.5 - Math.random() * 4)));
       updateHeightmap();
     }
 
     function startFromScratch() {
-      if (changeOnlyLand.checked) {tip("Not allowed when 'Change only land cells' mode is set", false, "error"); return;}
+      if (changeOnlyLand.checked) {
+        tip("Not allowed when 'Change only land cells' mode is set", false, "error");
+        return;
+      }
       const someHeights = grid.cells.h.some(h => h);
-      if (!someHeights) {tip("Heightmap is already cleared, please do not click twice if not required", false, "error"); return;}
+      if (!someHeights) {
+        tip("Heightmap is already cleared, please do not click twice if not required", false, "error");
+        return;
+      }
       grid.cells.h = new Uint8Array(grid.cells.i.length);
       viewbox.select("#heights").selectAll("*").remove();
       updateHistory();
     }
-
   }
 
   function openTemplateEditor() {
@@ -639,7 +692,10 @@ function editHeightmap() {
     const body = document.getElementById("templateBody");
 
     $("#templateEditor").dialog({
-      title: "Template Editor", minHeight: "auto", width: "fit-content", resizable: false,
+      title: "Template Editor",
+      minHeight: "auto",
+      width: "fit-content",
+      resizable: false,
       position: {my: "right top", at: "right-10 top+10", of: "svg"}
     });
 
@@ -649,12 +705,12 @@ function editHeightmap() {
     $("#templateBody").sortable({items: "> div", handle: ".icon-resize-vertical", containment: "#templateBody", axis: "y"});
 
     // add listeners
-    body.addEventListener("click", function(ev) {
+    body.addEventListener("click", function (ev) {
       const el = ev.target;
       if (el.classList.contains("icon-check")) {
         el.classList.remove("icon-check");
         el.classList.add("icon-check-empty");
-        el.parentElement.style.opacity = .5;
+        el.parentElement.style.opacity = 0.5;
         body.dataset.changed = 1;
         return;
       }
@@ -665,7 +721,8 @@ function editHeightmap() {
         return;
       }
       if (el.classList.contains("icon-trash-empty")) {
-        el.parentElement.remove(); return;
+        el.parentElement.remove();
+        return;
       }
     });
 
@@ -674,7 +731,9 @@ function editHeightmap() {
     document.getElementById("templateRun").addEventListener("click", executeTemplate);
     document.getElementById("templateSave").addEventListener("click", downloadTemplate);
     document.getElementById("templateLoad").addEventListener("click", () => templateToLoad.click());
-    document.getElementById("templateToLoad").addEventListener("change", function() {uploadFile(this, uploadTemplate)});
+    document.getElementById("templateToLoad").addEventListener("change", function () {
+      uploadFile(this, uploadTemplate);
+    });
 
     function addStepOnClick(e) {
       if (e.target.tagName !== "BUTTON") return;
@@ -689,7 +748,9 @@ function editHeightmap() {
       const elDist = body.querySelector("div:last-child").querySelector(".templateDist");
       if (elDist) elDist.addEventListener("change", setRange);
       if (dist && elDist && elDist.tagName === "SELECT") {
-        for (const o of elDist.options) {if (o.value === dist) elDist.value = dist;}
+        for (const o of elDist.options) {
+          if (o.value === dist) elDist.value = dist;
+        }
         if (elDist.value !== dist) {
           const opt = document.createElement("option");
           opt.value = opt.innerHTML = dist;
@@ -705,23 +766,23 @@ function editHeightmap() {
       const Reorder = `<i class="icon-resize-vertical" data-tip="Drag to reorder"></i>`;
       const common = `<div data-type="${type}">${Hide}<div style="width:4em">${type}</div>${Trash}${Reorder}`;
 
-      const TempY = `<span>y:<input class="templateY" data-tip="Placement range percentage along Y axis (minY-maxY)" value=${arg5||"20-80"}></span>`;
+      const TempY = `<span>y:<input class="templateY" data-tip="Placement range percentage along Y axis (minY-maxY)" value=${arg5 || "20-80"}></span>`;
-      const TempX = `<span>x:<input class="templateX" data-tip="Placement range percentage along X axis (minX-maxX)" value=${arg4||"15-85"}></span>`;
+      const TempX = `<span>x:<input class="templateX" data-tip="Placement range percentage along X axis (minX-maxX)" value=${arg4 || "15-85"}></span>`;
-      const Height = `<span>h:<input class="templateHeight" data-tip="Blob maximum height, use hyphen to get a random number in range" value=${arg3||"40-50"}></span>`;
+      const Height = `<span>h:<input class="templateHeight" data-tip="Blob maximum height, use hyphen to get a random number in range" value=${arg3 || "40-50"}></span>`;
-      const Count = `<span>n:<input class="templateCount" data-tip="Blobs to add, use hyphen to get a random number in range" value=${count||"1-2"}></span>`;
+      const Count = `<span>n:<input class="templateCount" data-tip="Blobs to add, use hyphen to get a random number in range" value=${count || "1-2"}></span>`;
       const blob = `${common}${TempY}${TempX}${Height}${Count}</div>`;
 
       if (type === "Hill" || type === "Pit" || type === "Range" || type === "Trough") return blob;
-      if (type === "Strait") return `${common}<span>d:<select class="templateDist" data-tip="Strait direction"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></span><span>w:<input class="templateCount" data-tip="Strait width, use hyphen to get a random number in range" value=${count||"2-7"}></span></div>`;
+      if (type === "Strait") return `${common}<span>d:<select class="templateDist" data-tip="Strait direction"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></span><span>w:<input class="templateCount" data-tip="Strait width, use hyphen to get a random number in range" value=${count || "2-7"}></span></div>`;
-      if (type === "Add") return `${common}<span>to:<select class="templateDist" data-tip="Change only land or all cells"><option value="all" selected>all cells</option><option value="land">land only</option><option value="interval">interval</option></select></span><span>v:<input class="templateCount" data-tip="Add value to height of all cells (negative values are allowed)" type="number" value=${count||-10} min=-100 max=100 step=1></span></div>`;
+      if (type === "Add") return `${common}<span>to:<select class="templateDist" data-tip="Change only land or all cells"><option value="all" selected>all cells</option><option value="land">land only</option><option value="interval">interval</option></select></span><span>v:<input class="templateCount" data-tip="Add value to height of all cells (negative values are allowed)" type="number" value=${count || -10} min=-100 max=100 step=1></span></div>`;
-      if (type === "Multiply") return `${common}<span>to:<select class="templateDist" data-tip="Change only land or all cells"><option value="all" selected>all cells</option><option value="land">land only</option><option value="interval">interval</option></select></span><span>v:<input class="templateCount" data-tip="Multiply all cells Height by the value" type="number" value=${count||1.1} min=0 max=10 step=.1></span></div>`;
+      if (type === "Multiply") return `${common}<span>to:<select class="templateDist" data-tip="Change only land or all cells"><option value="all" selected>all cells</option><option value="land">land only</option><option value="interval">interval</option></select></span><span>v:<input class="templateCount" data-tip="Multiply all cells Height by the value" type="number" value=${count || 1.1} min=0 max=10 step=.1></span></div>`;
-      if (type === "Smooth") return `${common}<span>f:<input class="templateCount" data-tip="Set smooth fraction. 1 - full smooth, 2 - half-smooth, etc." type="number" min=1 max=10 value=${count||2}></span></div>`;
+      if (type === "Smooth") return `${common}<span>f:<input class="templateCount" data-tip="Set smooth fraction. 1 - full smooth, 2 - half-smooth, etc." type="number" min=1 max=10 value=${count || 2}></span></div>`;
     }
 
     function setRange(event) {
       if (event.target.value !== "interval") return;
 
-      prompt("Set a height interval. Avoid space, use hyphen as a separator", {default:"17-20"}, v => {
+      prompt("Set a height interval. Avoid space, use hyphen as a separator", {default: "17-20"}, v => {
         const opt = document.createElement("option");
         opt.value = opt.innerHTML = v;
         event.target.add(opt);
@@ -734,13 +795,24 @@ function editHeightmap() {
       const steps = body.querySelectorAll("div").length;
       const changed = +body.getAttribute("data-changed");
       const template = e.target.value;
-      if (!steps || !changed) {changeTemplate(template); return;}
+      if (!steps || !changed) {
+        changeTemplate(template);
+        return;
+      }
 
       alertMessage.innerHTML = "Are you sure you want to select a different template? All changes will be lost.";
-      $("#alert").dialog({resizable: false, title: "Change Template",
+      $("#alert").dialog({
+        resizable: false,
+        title: "Change Template",
         buttons: {
-          Change: function() {changeTemplate(template); $(this).dialog("close");},
+          Change: function () {
-          Cancel: function() {$(this).dialog("close");}}
+            changeTemplate(template);
+            $(this).dialog("close");
+          },
+          Cancel: function () {
+            $(this).dialog("close");
+          }
+        }
       });
     }
 
@@ -751,15 +823,13 @@ function editHeightmap() {
 
       if (template === "templateVolcano") {
         addStep("Hill", "1", "90-100", "44-56", "40-60");
-        addStep("Multiply", .8, "50-100");
+        addStep("Multiply", 0.8, "50-100");
         addStep("Range", "1.5", "30-55", "45-55", "40-60");
         addStep("Smooth", 2);
         addStep("Hill", "1.5", "25-35", "25-30", "20-75");
         addStep("Hill", "1", "25-35", "75-80", "25-75");
         addStep("Hill", "0.5", "20-25", "10-15", "20-25");
-      }
+      } else if (template === "templateHighIsland") {
-
-      else if (template === "templateHighIsland") {
         addStep("Hill", "1", "90-100", "65-75", "47-53");
         addStep("Add", 5, "all");
         addStep("Hill", "6", "20-23", "25-55", "45-55");
@@ -769,13 +839,11 @@ function editHeightmap() {
         addStep("Trough", "2-3", "20-30", "60-80", "70-80");
         addStep("Hill", "1", "10-15", "60-60", "50-50");
         addStep("Hill", "1.5", "13-16", "15-20", "20-75");
-        addStep("Multiply", .8, "20-100");
+        addStep("Multiply", 0.8, "20-100");
         addStep("Range", "1.5", "30-40", "15-85", "30-40");
         addStep("Range", "1.5", "30-40", "15-85", "60-70");
         addStep("Pit", "2-3", "10-15", "15-85", "20-80");
-      }
+      } else if (template === "templateLowIsland") {
-
-      else if (template === "templateLowIsland") {
         addStep("Hill", "1", "90-99", "60-80", "45-55");
         addStep("Hill", "4-5", "25-35", "20-65", "40-60");
         addStep("Range", "1", "40-50", "45-55", "45-55");
@@ -785,13 +853,11 @@ function editHeightmap() {
         addStep("Hill", "1.5", "10-15", "5-15", "20-80");
         addStep("Hill", "1", "10-15", "85-95", "70-80");
         addStep("Pit", "3-5", "10-15", "15-85", "20-80");
-        addStep("Multiply", .4, "20-100");
+        addStep("Multiply", 0.4, "20-100");
-      }
+      } else if (template === "templateContinents") {
-
-      else if (template === "templateContinents") {
         addStep("Hill", "1", "80-85", "75-80", "40-60");
         addStep("Hill", "1", "80-85", "20-25", "40-60");
-        addStep("Multiply", .22, "20-100");
+        addStep("Multiply", 0.22, "20-100");
         addStep("Hill", "5-6", "15-20", "25-75", "20-82");
         addStep("Range", ".8", "30-60", "5-15", "20-45");
         addStep("Range", ".8", "30-60", "5-15", "55-80");
@@ -802,9 +868,7 @@ function editHeightmap() {
         addStep("Trough", "1-2", "5-10", "45-55", "45-55");
         addStep("Pit", "3-4", "10-15", "15-85", "20-80");
         addStep("Hill", "1", "5-10", "40-60", "40-60");
-      }
+      } else if (template === "templateArchipelago") {
-
-      else if (template === "templateArchipelago") {
         addStep("Add", 11, "all");
         addStep("Range", "2-3", "40-60", "20-80", "20-80");
         addStep("Hill", "5", "15-20", "10-90", "30-70");
@@ -814,18 +878,14 @@ function editHeightmap() {
         addStep("Trough", "10", "20-30", "5-95", "5-95");
         addStep("Strait", "2", "vertical");
         addStep("Strait", "2", "horizontal");
-      }
+      } else if (template === "templateAtoll") {
-
-      else if (template === "templateAtoll") {
         addStep("Hill", "1", "75-80", "50-60", "45-55");
         addStep("Hill", "1.5", "30-50", "25-75", "30-70");
         addStep("Hill", ".5", "30-50", "25-35", "30-70");
         addStep("Smooth", 1);
-        addStep("Multiply", .2, "25-100");
+        addStep("Multiply", 0.2, "25-100");
         addStep("Hill", ".5", "10-20", "50-55", "48-52");
-      }
+      } else if (template === "templateMediterranean") {
-
-      else if (template === "templateMediterranean") {
         addStep("Range", "3-4", "30-50", "0-100", "0-10");
         addStep("Range", "3-4", "30-50", "0-100", "90-100");
         addStep("Hill", "5-6", "30-70", "0-100", "0-5");
@@ -833,12 +893,10 @@ function editHeightmap() {
         addStep("Smooth", 1);
         addStep("Hill", "2-3", "30-70", "0-5", "20-80");
         addStep("Hill", "2-3", "30-70", "95-100", "20-80");
-        addStep("Multiply", .8, "land");
+        addStep("Multiply", 0.8, "land");
         addStep("Trough", "3-5", "40-50", "0-100", "0-10");
         addStep("Trough", "3-5", "40-50", "0-100", "90-100");
-      }
+      } else if (template === "templatePeninsula") {
-
-      else if (template === "templatePeninsula") {
         addStep("Range", "2-3", "20-35", "40-50", "0-15");
         addStep("Add", 5, "all");
         addStep("Hill", "1", "90-100", "10-90", "0-5");
@@ -847,22 +905,18 @@ function editHeightmap() {
         addStep("Hill", "1-2", "3-5", "5-95", "40-60");
         addStep("Trough", "5-6", "10-25", "5-95", "5-95");
         addStep("Smooth", 3);
-      }
+      } else if (template === "templatePangea") {
-
-      else if (template === "templatePangea") {
         addStep("Hill", "1-2", "25-40", "15-50", "0-10");
         addStep("Hill", "1-2", "5-40", "50-85", "0-10");
         addStep("Hill", "1-2", "25-40", "50-85", "90-100");
         addStep("Hill", "1-2", "5-40", "15-50", "90-100");
         addStep("Hill", "8-12", "20-40", "20-80", "48-52");
         addStep("Smooth", 2);
-        addStep("Multiply", .7, "land");
+        addStep("Multiply", 0.7, "land");
         addStep("Trough", "3-4", "25-35", "5-95", "10-20");
         addStep("Trough", "3-4", "25-35", "5-95", "80-90");
         addStep("Range", "5-6", "30-40", "10-90", "35-65");
-      }
+      } else if (template === "templateIsthmus") {
-
-      else if (template === "templateIsthmus") {
         addStep("Hill", "5-10", "15-30", "0-30", "0-20");
         addStep("Hill", "5-10", "15-30", "10-50", "20-40");
         addStep("Hill", "5-10", "15-30", "30-70", "40-60");
@@ -874,15 +928,12 @@ function editHeightmap() {
         addStep("Trough", "4-8", "15-30", "30-70", "40-60");
         addStep("Trough", "4-8", "15-30", "50-90", "60-80");
         addStep("Trough", "4-8", "15-30", "70-100", "80-100");
-      }
+      } else if (template === "templateShattered") {
-
-      else if (template === "templateShattered") {
         addStep("Hill", "8", "35-40", "15-85", "30-70");
         addStep("Trough", "10-20", "40-50", "5-95", "5-95");
         addStep("Range", "5-7", "30-40", "10-90", "20-80");
         addStep("Pit", "12-20", "30-40", "15-85", "20-80");
       }
-
     }
 
     function executeTemplate() {
@@ -893,7 +944,7 @@ function editHeightmap() {
       grid.cells.h = new Uint8Array(grid.cells.i.length); // clean all heights
 
       for (const s of steps) {
-        if (s.style.opacity == .5) continue;
+        if (s.style.opacity == 0.5) continue;
         const type = s.getAttribute("data-type");
         const elCount = s.querySelector(".templateCount") || "";
         const elHeight = s.querySelector(".templateHeight") || "";
@@ -906,14 +957,14 @@ function editHeightmap() {
         const templateY = s.querySelector(".templateY");
         const y = templateY ? templateY.value : null;
 
-        if (type === "Hill") HeightmapGenerator.addHill(elCount.value, elHeight.value, x, y); else
+        if (type === "Hill") HeightmapGenerator.addHill(elCount.value, elHeight.value, x, y);
-        if (type === "Pit") HeightmapGenerator.addPit(elCount.value, elHeight.value, x, y); else
+        else if (type === "Pit") HeightmapGenerator.addPit(elCount.value, elHeight.value, x, y);
-        if (type === "Range") HeightmapGenerator.addRange(elCount.value, elHeight.value, x, y); else
+        else if (type === "Range") HeightmapGenerator.addRange(elCount.value, elHeight.value, x, y);
-        if (type === "Trough") HeightmapGenerator.addTrough(elCount.value, elHeight.value, x, y); else
+        else if (type === "Trough") HeightmapGenerator.addTrough(elCount.value, elHeight.value, x, y);
-        if (type === "Strait") HeightmapGenerator.addStrait(elCount.value, dist); else
+        else if (type === "Strait") HeightmapGenerator.addStrait(elCount.value, dist);
-        if (type === "Add") HeightmapGenerator.modify(dist, +elCount.value, 1); else
+        else if (type === "Add") HeightmapGenerator.modify(dist, +elCount.value, 1);
-        if (type === "Multiply") HeightmapGenerator.modify(dist, 0, +elCount.value); else
+        else if (type === "Multiply") HeightmapGenerator.modify(dist, 0, +elCount.value);
-        if (type === "Smooth") HeightmapGenerator.smooth(+elCount.value);
+        else if (type === "Smooth") HeightmapGenerator.smooth(+elCount.value);
 
         updateHistory("noStat"); // update history every step
       }
@@ -932,7 +983,7 @@ function editHeightmap() {
 
       let data = "";
       for (const s of steps) {
-        if (s.style.opacity == .5) continue;
+        if (s.style.opacity == 0.5) continue;
         const type = s.getAttribute("data-type");
         const elCount = s.querySelector(".templateCount");
         const count = elCount ? elCount.value : "0";
@@ -952,14 +1003,19 @@ function editHeightmap() {
 
     function uploadTemplate(dataLoaded) {
       const steps = dataLoaded.split("\r\n");
-      if (!steps.length) {tip("Cannot parse the template, please check the file", false, "error"); return;}
+      if (!steps.length) {
+        tip("Cannot parse the template, please check the file", false, "error");
+        return;
+      }
       templateBody.innerHTML = "";
       for (const s of steps) {
         const step = s.split(" ");
-        if (step.length !== 5) {ERROR && console.error("Cannot parse step, wrong arguments count", s); continue;}
+        if (step.length !== 5) {
+          ERROR && console.error("Cannot parse step, wrong arguments count", s);
+          continue;
+        }
         addStep(step[0], step[1], step[2], step[3], step[4]);
       }
-
     }
   }
 
@@ -969,7 +1025,10 @@ function editHeightmap() {
     closeDialogs("#imageConverter");
 
     $("#imageConverter").dialog({
-      title: "Image Converter", maxHeight: svgHeight*.8, minHeight: "auto", width: "20em",
+      title: "Image Converter",
+      maxHeight: svgHeight * 0.8,
+      minHeight: "auto",
+      width: "20em",
       position: {my: "right top", at: "right-10 top+10", of: "svg"},
       beforeClose: closeImageConverter
     });
@@ -983,7 +1042,7 @@ function editHeightmap() {
 
     setOverlayOpacity(0);
     clearMainTip();
-    tip('Image Converter is opened. Upload image and assign height value for each color', false, "warn"); // main tip
+    tip("Image Converter is opened. Upload image and assign height value for each color", false, "warn"); // main tip
 
     // remove all heights
     grid.cells.h = new Uint8Array(grid.cells.i.length);
@@ -994,13 +1053,18 @@ function editHeightmap() {
     modules.openImageConverter = true;
 
     // add color pallete
-    void function createColorPallete() {
+    void (function createColorPallete() {
-      d3.select("#imageConverterPalette").selectAll("div").data(d3.range(101))
+      d3.select("#imageConverterPalette")
-        .enter().append("div").attr("data-color", i => i)
+        .selectAll("div")
-        .style("background-color", i => color(1-(i < 20 ? i-5 : i) / 100))
+        .data(d3.range(101))
-        .style("width", i => i < 40 || i > 68 ? ".2em" : ".1em")
+        .enter()
-        .on("touchmove mousemove", showPalleteHeight).on("click", assignHeight);
+        .append("div")
-    }()
+        .attr("data-color", i => i)
+        .style("background-color", i => color(1 - (i < 20 ? i - 5 : i) / 100))
+        .style("width", i => (i < 40 || i > 68 ? ".2em" : ".1em"))
+        .on("touchmove mousemove", showPalleteHeight)
+        .on("click", assignHeight);
+    })();
 
     // add listeners
     document.getElementById("convertImageLoad").addEventListener("click", () => imageToLoad.click());
@@ -1011,14 +1075,18 @@ function editHeightmap() {
     document.getElementById("convertColorsButton").addEventListener("click", setConvertColorsNumber);
     document.getElementById("convertComplete").addEventListener("click", applyConversion);
     document.getElementById("convertCancel").addEventListener("click", cancelConversion);
-    document.getElementById("convertOverlay").addEventListener("input", function() {setOverlayOpacity(this.value)});
+    document.getElementById("convertOverlay").addEventListener("input", function () {
-    document.getElementById("convertOverlayNumber").addEventListener("input", function() {setOverlayOpacity(this.value)});
+      setOverlayOpacity(this.value);
+    });
+    document.getElementById("convertOverlayNumber").addEventListener("input", function () {
+      setOverlayOpacity(this.value);
+    });
 
     function showPalleteHeight() {
       const height = +this.getAttribute("data-color");
       colorsSelectValue.innerHTML = height;
       colorsSelectFriendly.innerHTML = getHeight(height);
-      const former = imageConverterPalette.querySelector(".hoveredColor")
+      const former = imageConverterPalette.querySelector(".hoveredColor");
       if (former) former.className = "";
       this.className = "hoveredColor";
     }
@@ -1028,15 +1096,15 @@ function editHeightmap() {
       this.value = ""; // reset input value to get triggered if the file is re-uploaded
       const reader = new FileReader();
 
-      const img = new Image;
+      const img = new Image();
-      img.onload = function() {
+      img.onload = function () {
         const ctx = document.getElementById("canvas").getContext("2d");
         ctx.drawImage(img, 0, 0, graphWidth, graphHeight);
         heightsFromImage(+convertColors.value);
         resetZoom();
       };
 
-      reader.onloadend = () => img.src = reader.result;
+      reader.onloadend = () => (img.src = reader.result);
       reader.readAsDataURL(file);
     }
 
@@ -1045,9 +1113,9 @@ function editHeightmap() {
       const sampleCanvas = document.createElement("canvas");
       sampleCanvas.width = grid.cellsX;
       sampleCanvas.height = grid.cellsY;
-      sampleCanvas.getContext('2d').drawImage(sourceImage, 0, 0, grid.cellsX, grid.cellsY);
+      sampleCanvas.getContext("2d").drawImage(sourceImage, 0, 0, grid.cellsX, grid.cellsY);
 
-      const q = new RgbQuant({colors:count});
+      const q = new RgbQuant({colors: count});
       q.sample(sampleCanvas);
       const data = q.reduce(sampleCanvas);
       const pallete = q.palette(true);
@@ -1059,15 +1127,26 @@ function editHeightmap() {
       colorsAssigned.style.display = "none";
       sampleCanvas.remove(); // no need to keep
 
-      viewbox.select("#heights").selectAll("polygon").data(grid.cells.i).join("polygon")
+      viewbox
-        .attr("points", d => getGridPolygon(d)).attr("id", d => "cell"+d)
+        .select("#heights")
-        .attr("fill", d => `rgb(${data[d*4]}, ${data[d*4+1]}, ${data[d*4+2]})`)
+        .selectAll("polygon")
+        .data(grid.cells.i)
+        .join("polygon")
+        .attr("points", d => getGridPolygon(d))
+        .attr("id", d => "cell" + d)
+        .attr("fill", d => `rgb(${data[d * 4]}, ${data[d * 4 + 1]}, ${data[d * 4 + 2]})`)
         .on("click", mapClicked);
 
       const colors = pallete.map(p => `rgb(${p[0]}, ${p[1]}, ${p[2]})`);
-      d3.select("#colorsUnassigned").selectAll("div").data(colors).enter().append("div")
+      d3.select("#colorsUnassigned")
-        .attr("data-color", i => i).style("background-color", i => i)
+        .selectAll("div")
-        .attr("class", "color-div").on("click", colorClicked);
+        .data(colors)
+        .enter()
+        .append("div")
+        .attr("data-color", i => i)
+        .style("background-color", i => i)
+        .attr("class", "color-div")
+        .on("click", colorClicked);
 
       document.getElementById("colorsUnassignedNumber").innerHTML = colors.length;
     }
@@ -1100,21 +1179,27 @@ function editHeightmap() {
 
       const color = this.getAttribute("data-color");
       viewbox.select("#heights").selectAll("polygon.selectedCell").classed("selectedCell", 0);
-      viewbox.select("#heights").selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
+      viewbox
+        .select("#heights")
+        .selectAll("polygon[fill='" + color + "']")
+        .classed("selectedCell", 1);
     }
 
     function assignHeight() {
       const height = +this.dataset.color;
-      const rgb = color(1 - (height < 20 ? height-5 : height) / 100);
+      const rgb = color(1 - (height < 20 ? height - 5 : height) / 100);
       const selectedColor = imageConverter.querySelector("div.selectedColor");
       selectedColor.style.backgroundColor = rgb;
       selectedColor.setAttribute("data-color", rgb);
       selectedColor.setAttribute("data-height", height);
 
-      viewbox.select("#heights").selectAll(".selectedCell").each(function() {
+      viewbox
-        this.setAttribute("fill", rgb);
+        .select("#heights")
-        this.setAttribute("data-height", height);
+        .selectAll(".selectedCell")
-      });
+        .each(function () {
+          this.setAttribute("fill", rgb);
+          this.setAttribute("data-height", height);
+        });
 
       if (selectedColor.parentNode.id === "colorsUnassigned") {
         colorsAssigned.appendChild(selectedColor);
@@ -1123,7 +1208,6 @@ function editHeightmap() {
         document.getElementById("colorsUnassignedNumber").innerHTML = colorsUnassigned.childElementCount - 2;
         document.getElementById("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2;
       }
-
     }
 
     // auto assign color based on luminosity or hue
@@ -1138,37 +1222,44 @@ function editHeightmap() {
         }
       }
 
-      const getHeightByHue = function(color) {
+      const getHeightByHue = function (color) {
         let hue = d3.hsl(color).h;
         if (hue > 300) hue -= 360;
-        if (hue > 170) return Math.abs(hue-250) / 3 |0; // water
+        if (hue > 170) return (Math.abs(hue - 250) / 3) | 0; // water
-        return Math.abs(hue-250+20) / 3 |0; // land
+        return (Math.abs(hue - 250 + 20) / 3) | 0; // land
-      }
+      };
 
-      const getHeightByLum = function(color) {
+      const getHeightByLum = function (color) {
         let lum = d3.lab(color).l;
-        if (lum < 13) return lum / 13 * 20 |0; // water
+        if (lum < 13) return ((lum / 13) * 20) | 0; // water
-        return lum|0; // land
+        return lum | 0; // land
-      }
+      };
 
       const scheme = d3.range(101).map(i => getColor(i, color()));
-      const hues = scheme.map(rgb => d3.hsl(rgb).h|0);
+      const hues = scheme.map(rgb => d3.hsl(rgb).h | 0);
-      const getHeightByScheme = function(color) {
+      const getHeightByScheme = function (color) {
         let height = scheme.indexOf(color);
         if (height !== -1) return height; // exact match
         const hue = d3.hsl(color).h;
         const closest = hues.reduce((prev, curr) => (Math.abs(curr - hue) < Math.abs(prev - hue) ? curr : prev));
         return hues.indexOf(closest);
-      }
+      };
 
       const assinged = []; // store assigned heights
       unassigned.forEach(el => {
         const clr = el.dataset.color;
         const height = type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr);
-        const colorTo = color(1 - (height < 20 ? (height-5) / 100 : height / 100));
+        const colorTo = color(1 - (height < 20 ? (height - 5) / 100 : height / 100));
-        viewbox.select("#heights").selectAll("polygon[fill='" + clr + "']").attr("fill", colorTo).attr("data-height", height);
+        viewbox
+          .select("#heights")
+          .selectAll("polygon[fill='" + clr + "']")
+          .attr("fill", colorTo)
+          .attr("data-height", height);
 
-        if (assinged[height]) {el.remove(); return;} // if color is already added, remove it
+        if (assinged[height]) {
+          el.remove();
+          return;
+        } // if color is already added, remove it
         el.style.backgroundColor = el.dataset.color = colorTo;
         el.dataset.height = height;
         colorsAssigned.appendChild(el);
@@ -1186,8 +1277,7 @@ function editHeightmap() {
     }
 
     function setConvertColorsNumber() {
-      prompt(`Please set maximum number of colors. <br>An actual number is usually lower and depends on color scheme`,
+      prompt(`Please set maximum number of colors. <br>An actual number is usually lower and depends on color scheme`, {default: +convertColors.value, step: 1, min: 3, max: 255}, number => {
-      {default:+convertColors.value, step:1, min:3, max:255}, number => {
         convertColors.value = number;
         heightsFromImage(number);
       });
@@ -1204,11 +1294,14 @@ function editHeightmap() {
         return;
       }
 
-      viewbox.select("#heights").selectAll("polygon").each(function() {
+      viewbox
-        const height = +this.dataset.height || 0;
+        .select("#heights")
-        const i = +this.id.slice(4);
+        .selectAll("polygon")
-        grid.cells.h[i] = height;
+        .each(function () {
-      });
+          const height = +this.dataset.height || 0;
+          const i = +this.id.slice(4);
+          grid.cells.h[i] = height;
+        });
 
       viewbox.select("#heights").selectAll("polygon").remove();
       updateHeightmap();
@@ -1218,7 +1311,7 @@ function editHeightmap() {
     function cancelConversion() {
       restoreImageConverterState();
       viewbox.select("#heights").selectAll("polygon").remove();
-      restoreHistory(edits.n-1);
+      restoreHistory(edits.n - 1);
     }
 
     function restoreImageConverterState() {
@@ -1244,20 +1337,22 @@ function editHeightmap() {
         Click "Complete" to apply the conversion. 
         Click "Close" to exit conversion mode and restore previous heightmap`;
 
-      $("#alert").dialog({resizable: false, title: "Close Image Converter",
+      $("#alert").dialog({
+        resizable: false,
+        title: "Close Image Converter",
         buttons: {
-          Cancel: function() {
+          Cancel: function () {
             $(this).dialog("close");
           },
-          Complete: function() {
+          Complete: function () {
             $(this).dialog("close");
             applyConversion();
           },
-          Close: function() {
+          Close: function () {
             $(this).dialog("close");
             restoreImageConverterState();
             viewbox.select("#heights").selectAll("polygon").remove();
-            restoreHistory(edits.n-1);
+            restoreHistory(edits.n - 1);
           }
         }
       });
@@ -1285,11 +1380,11 @@ function editHeightmap() {
 
     grid.cells.h.forEach((height, i) => {
       let h = height < 20 ? Math.max(height / 1.5, 0) : height;
-      const v = h / 100 * 255;
+      const v = (h / 100) * 255;
-      imageData.data[i*4] = v;
+      imageData.data[i * 4] = v;
-      imageData.data[i*4 + 1] = v;
+      imageData.data[i * 4 + 1] = v;
-      imageData.data[i*4 + 2] = v;
+      imageData.data[i * 4 + 2] = v;
-      imageData.data[i*4 + 3] = 255;
+      imageData.data[i * 4 + 3] = 255;
     });
 
     ctx.putImageData(imageData, 0, 0);
@@ -1302,7 +1397,7 @@ function editHeightmap() {
     const img = new Image();
     img.src = dataURL;
 
-    img.onload = function() {
+    img.onload = function () {
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
       canvas.width = svgWidth;
@@ -1315,7 +1410,6 @@ function editHeightmap() {
       link.href = imgBig;
       link.click();
       canvas.remove();
-    }
+    };
   }
-
 }

modules/ui/tools.js

@@ -1,44 +1,57 @@
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 "use strict";
 
-toolsContent.addEventListener("click", function(event) {
+toolsContent.addEventListener("click", function (event) {
-  if (customization) {tip("Please exit the customization mode first", false, "warning"); return;}
+  if (customization) {
+    tip("Please exit the customization mode first", false, "warning");
+    return;
+  }
   if (event.target.tagName !== "BUTTON") return;
   const button = event.target.id;
 
   // Click to open Editor buttons
-  if (button === "editHeightmapButton") editHeightmap(); else
+  if (button === "editHeightmapButton") editHeightmap();
-  if (button === "editBiomesButton") editBiomes(); else
+  else if (button === "editBiomesButton") editBiomes();
-  if (button === "editStatesButton") editStates(); else
+  else if (button === "editStatesButton") editStates();
-  if (button === "editProvincesButton") editProvinces(); else
+  else if (button === "editProvincesButton") editProvinces();
-  if (button === "editDiplomacyButton") editDiplomacy(); else
+  else if (button === "editDiplomacyButton") editDiplomacy();
-  if (button === "editCulturesButton") editCultures(); else
+  else if (button === "editCulturesButton") editCultures();
-  if (button === "editReligions") editReligions(); else
+  else if (button === "editReligions") editReligions();
-  if (button === "editEmblemButton") openEmblemEditor(); else
+  else if (button === "editEmblemButton") openEmblemEditor();
-  if (button === "editNamesBaseButton") editNamesbase(); else
+  else if (button === "editNamesBaseButton") editNamesbase();
-  if (button === "editUnitsButton") editUnits(); else
+  else if (button === "editUnitsButton") editUnits();
-  if (button === "editNotesButton") editNotes(); else
+  else if (button === "editNotesButton") editNotes();
-  if (button === "editZonesButton") editZones(); else
+  else if (button === "editZonesButton") editZones();
-  if (button === "overviewBurgsButton") overviewBurgs(); else
+  else if (button === "overviewBurgsButton") overviewBurgs();
-  if (button === "overviewRiversButton") overviewRivers(); else
+  else if (button === "overviewRiversButton") overviewRivers();
-  if (button === "overviewMilitaryButton") overviewMilitary(); else
+  else if (button === "overviewMilitaryButton") overviewMilitary();
-  if (button === "overviewCellsButton") viewCellDetails();
+  else if (button === "overviewCellsButton") viewCellDetails();
 
   // Click to Regenerate buttons
   if (event.target.parentNode.id === "regenerateFeature") {
-    if (sessionStorage.getItem("regenerateFeatureDontAsk")) {processFeatureRegeneration(event, button); return;}
+    if (sessionStorage.getItem("regenerateFeatureDontAsk")) {
+      processFeatureRegeneration(event, button);
+      return;
+    }
 
-    alertMessage.innerHTML = `Regeneration will remove all the custom changes for the element.<br><br>Are you sure you want to proceed?`
+    alertMessage.innerHTML = `Regeneration will remove all the custom changes for the element.<br><br>Are you sure you want to proceed?`;
-    $("#alert").dialog({resizable: false, title: "Regenerate element",
+    $("#alert").dialog({
+      resizable: false,
+      title: "Regenerate element",
       buttons: {
-        Proceed: function() {processFeatureRegeneration(event, button); $(this).dialog("close");},
+        Proceed: function () {
-        Cancel: function() {$(this).dialog("close");}
+          processFeatureRegeneration(event, button);
+          $(this).dialog("close");
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       },
-      open: function() {
+      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);
       },
-      close: function() {
+      close: function () {
         const box = $(this).dialog("widget").find(".checkbox")[0];
         if (!box) return;
         if (box.checked) sessionStorage.setItem("regenerateFeatureDontAsk", true);
@@ -48,29 +61,35 @@ toolsContent.addEventListener("click", function(event) {
   }
 
   // Click to Add buttons
-  if (button === "addLabel") toggleAddLabel(); else
+  if (button === "addLabel") toggleAddLabel();
-  if (button === "addBurgTool") toggleAddBurg(); else
+  else if (button === "addBurgTool") toggleAddBurg();
-  if (button === "addRiver") toggleAddRiver(); else
+  else if (button === "addRiver") toggleAddRiver();
-  if (button === "addRoute") toggleAddRoute(); else
+  else if (button === "addRoute") toggleAddRoute();
-  if (button === "addMarker") toggleAddMarker();
+  else if (button === "addMarker") toggleAddMarker();
 });
 
 function processFeatureRegeneration(event, button) {
-  if (button === "regenerateStateLabels") {BurgsAndStates.drawStateLabels(); if (!layerIsOn("toggleLabels")) toggleLabels();} else
+  if (button === "regenerateStateLabels") {
-  if (button === "regenerateReliefIcons") {ReliefIcons(); if (!layerIsOn("toggleRelief")) toggleRelief();} else
+    BurgsAndStates.drawStateLabels();
-  if (button === "regenerateRoutes") {Routes.regenerate(); if (!layerIsOn("toggleRoutes")) toggleRoutes();} else
+    if (!layerIsOn("toggleLabels")) toggleLabels();
-  if (button === "regenerateRivers") regenerateRivers(); else
+  } else if (button === "regenerateReliefIcons") {
-  if (button === "regeneratePopulation") recalculatePopulation(); else
+    ReliefIcons();
-  if (button === "regenerateStates") regenerateStates(); else
+    if (!layerIsOn("toggleRelief")) toggleRelief();
-  if (button === "regenerateProvinces") regenerateProvinces(); else
+  } else if (button === "regenerateRoutes") {
-  if (button === "regenerateBurgs") regenerateBurgs(); else
+    Routes.regenerate();
-  if (button === "regenerateEmblems") regenerateEmblems(); else
+    if (!layerIsOn("toggleRoutes")) toggleRoutes();
-  if (button === "regenerateReligions") regenerateReligions(); else
+  } else if (button === "regenerateRivers") regenerateRivers();
-  if (button === "regenerateCultures") regenerateCultures(); else
+  else if (button === "regeneratePopulation") recalculatePopulation();
-  if (button === "regenerateMilitary") regenerateMilitary(); else
+  else if (button === "regenerateStates") regenerateStates();
-  if (button === "regenerateIce") regenerateIce(); else
+  else if (button === "regenerateProvinces") regenerateProvinces();
-  if (button === "regenerateMarkers") regenerateMarkers(event); else
+  else if (button === "regenerateBurgs") regenerateBurgs();
-  if (button === "regenerateZones") regenerateZones(event);
+  else if (button === "regenerateEmblems") regenerateEmblems();
+  else if (button === "regenerateReligions") regenerateReligions();
+  else if (button === "regenerateCultures") regenerateCultures();
+  else if (button === "regenerateMilitary") regenerateMilitary();
+  else if (button === "regenerateIce") regenerateIce();
+  else if (button === "regenerateMarkers") regenerateMarkers(event);
+  else if (button === "regenerateZones") regenerateZones(event);
 }
 
 async function openEmblemEditor() {
@@ -106,10 +125,10 @@ function recalculatePopulation() {
     if (!b.i || b.removed || b.lock) return;
     const i = b.cell;
 
-    b.population = rn(Math.max((pack.cells.s[i] + pack.cells.road[i] / 2) / 8 + b.i / 1000 + i % 100 / 1000, .1), 3);
+    b.population = rn(Math.max((pack.cells.s[i] + pack.cells.road[i] / 2) / 8 + b.i / 1000 + (i % 100) / 1000, 0.1), 3);
     if (b.capital) b.population = b.population * 1.3; // increase capital population
     if (b.port) b.population = b.population * 1.3; // increase port population
-    b.population = rn(b.population * gauss(2,3,.6,20,3), 3);
+    b.population = rn(b.population * gauss(2, 3, 0.6, 20, 3), 3);
   });
 }
 
@@ -126,14 +145,19 @@ function regenerateStates() {
   }
 
   // burg local ids sorted by a bit randomized population:
-  const sorted = burgs.map((b, i) => [i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]);
+  const sorted = burgs
+    .map((b, i) => [i, b.population * Math.random()])
+    .sort((a, b) => b[1] - a[1])
+    .map(b => b[0]);
   const capitalsTree = d3.quadtree();
 
   // turn all old capitals into towns
-  burgs.filter(b => b.capital).forEach(b => {
+  burgs
-    moveBurgToGroup(b.i, "towns");
+    .filter(b => b.capital)
-    b.capital = 0;
+    .forEach(b => {
-  });
+      moveBurgToGroup(b.i, "towns");
+      b.capital = 0;
+    });
 
   // remove emblems
   document.querySelectorAll("[id^=stateCOA]").forEach(el => el.remove());
@@ -145,7 +169,7 @@ function regenerateStates() {
   // if desired states number is 0
   if (regionsInput.value == 0) {
     tip(`Cannot generate zero states. Please check the <i>States Number</i> option`, false, "warn");
-    pack.states = pack.states.slice(0,1); // remove all except of neutrals
+    pack.states = pack.states.slice(0, 1); // remove all except of neutrals
     pack.states[0].diplomacy = []; // clear diplomacy
     pack.provinces = [0]; // remove all provinces
     pack.cells.state = new Uint16Array(pack.cells.i.length); // reset cells data
@@ -165,10 +189,12 @@ function regenerateStates() {
   pack.states = d3.range(count).map(i => {
     if (!i) return {i, name: neutral};
 
-    let capital = null, x = 0, y = 0;
+    let capital = null,
+      x = 0,
+      y = 0;
     for (const i of sorted) {
       capital = burgs[i];
-      x = capital.x, y = capital.y;
+      (x = capital.x), (y = capital.y);
       if (capitalsTree.find(x, y, spacing) === undefined) break;
       spacing = Math.max(spacing - 1, 1);
     }
@@ -178,17 +204,17 @@ function regenerateStates() {
     moveBurgToGroup(capital.i, "cities");
 
     const culture = capital.culture;
-    const basename = capital.name.length < 9 && capital.cell%5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
+    const basename = capital.name.length < 9 && capital.cell % 5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
     const name = Names.getState(basename, culture);
     const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[capital.cell]);
     const type = nomadic ? "Nomadic" : pack.cultures[culture].type === "Nomadic" ? "Generic" : pack.cultures[culture].type;
     const expansionism = rn(Math.random() * powerInput.value + 1, 1);
 
     const cultureType = pack.cultures[culture].type;
-    const coa = COA.generate(capital.coa, .3, null, cultureType);
+    const coa = COA.generate(capital.coa, 0.3, null, cultureType);
     coa.shield = capital.coa.shield;
 
-    return {i, name, type, capital:capital.i, center:capital.cell, culture, expansionism, coa};
+    return {i, name, type, capital: capital.i, center: capital.cell, culture, expansionism, coa};
   });
 
   BurgsAndStates.expandStates();
@@ -199,8 +225,10 @@ function regenerateStates() {
   BurgsAndStates.generateDiplomacy();
   BurgsAndStates.defineStateForms();
   BurgsAndStates.generateProvinces(true);
-  if (!layerIsOn("toggleStates")) toggleStates(); else drawStates();
+  if (!layerIsOn("toggleStates")) toggleStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
   BurgsAndStates.drawStateLabels();
   Military.generate();
   if (layerIsOn("toggleEmblems")) drawEmblems(); // redrawEmblems
@@ -224,43 +252,52 @@ function regenerateProvinces() {
 }
 
 function regenerateBurgs() {
-  const cells = pack.cells, states = pack.states, Lockedburgs = pack.burgs.filter(b =>b.lock);
+  const cells = pack.cells,
+    states = pack.states,
+    Lockedburgs = pack.burgs.filter(b => b.lock);
   rankCells();
   cells.burg = new Uint16Array(cells.i.length);
-  const burgs = pack.burgs = [0]; // clear burgs array
+  const burgs = (pack.burgs = [0]); // clear burgs array
-  states.filter(s => s.i).forEach(s => s.capital = 0); // clear state capitals
+  states.filter(s => s.i).forEach(s => (s.capital = 0)); // clear state capitals
-  pack.provinces.filter(p => p.i).forEach(p => p.burg = 0); // clear province capitals
+  pack.provinces.filter(p => p.i).forEach(p => (p.burg = 0)); // clear province capitals
   const burgsTree = d3.quadtree();
 
   const score = new Int16Array(cells.s.map(s => s * Math.random())); // cell score for capitals placement
   const sorted = cells.i.filter(i => score[i] > 0 && cells.culture[i]).sort((a, b) => score[b] - score[a]); // filtered and sorted array of indexes
-  const burgsCount = manorsInput.value == 1000 ? rn(sorted.length / 5 / (grid.points.length / 10000) ** .8) + states.length : +manorsInput.value + states.length;
+  const burgsCount = manorsInput.value == 1000 ? rn(sorted.length / 5 / (grid.points.length / 10000) ** 0.8) + states.length : +manorsInput.value + states.length;
-  const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** .7 / 66); // base min distance between towns
+  const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** 0.7 / 66); // base min distance between towns
 
   //clear locked list since ids will change
   //burglock.selectAll("text").remove();
-  for (let j=0; j < Lockedburgs.length; j++) {
+  for (let j = 0; j < Lockedburgs.length; j++) {
     const id = burgs.length;
     const oldBurg = Lockedburgs[j];
     oldBurg.i = id;
     burgs.push(oldBurg);
     burgsTree.add([oldBurg.x, oldBurg.y]);
     cells.burg[oldBurg.cell] = id;
-    if (oldBurg.capital) {states[oldBurg.state].capital = id; states[oldBurg.state].center = oldBurg.cell;}
+    if (oldBurg.capital) {
+      states[oldBurg.state].capital = id;
+      states[oldBurg.state].center = oldBurg.cell;
+    }
     //burglock.append("text").attr("data-id", id);
   }
 
-  for (let i=0; i < sorted.length && burgs.length < burgsCount; i++) {
+  for (let i = 0; i < sorted.length && burgs.length < burgsCount; i++) {
     const id = burgs.length;
     const cell = sorted[i];
-    const x = cells.p[cell][0], y = cells.p[cell][1];
+    const x = cells.p[cell][0],
+      y = cells.p[cell][1];
 
-    const s = spacing * gauss(1, .3, .2, 2, 2); // randomize to make the placement not uniform
+    const s = spacing * gauss(1, 0.3, 0.2, 2, 2); // randomize to make the placement not uniform
     if (burgsTree.find(x, y, s) !== undefined) continue; // to close to existing burg
 
     const state = cells.state[cell];
     const capital = state && !states[state].capital; // if state doesn't have capital, make this burg a capital, no capital for neutral lands
-    if (capital) {states[state].capital = id; states[state].center = cell;}
+    if (capital) {
+      states[state].capital = id;
+      states[state].center = cell;
+    }
 
     const culture = cells.culture[cell];
     const name = Names.getCulture(culture);
@@ -270,16 +307,20 @@ function regenerateBurgs() {
   }
 
   // add a capital at former place for states without added capitals
-  states.filter(s => s.i && !s.removed && !s.capital).forEach(s => {
+  states
-    const burg = addBurg([cells.p[s.center][0], cells.p[s.center][1]]); // add new burg
+    .filter(s => s.i && !s.removed && !s.capital)
-    s.capital = burg;
+    .forEach(s => {
-    s.center = pack.burgs[burg].cell;
+      const burg = addBurg([cells.p[s.center][0], cells.p[s.center][1]]); // add new burg
-    pack.burgs[burg].capital = 1;
+      s.capital = burg;
-    pack.burgs[burg].state = s.i;
+      s.center = pack.burgs[burg].cell;
-    moveBurgToGroup(burg, "cities");
+      pack.burgs[burg].capital = 1;
-  });
+      pack.burgs[burg].state = s.i;
+      moveBurgToGroup(burg, "cities");
+    });
 
-  pack.features.forEach(f => {if (f.port) f.port = 0}); // reset features ports counter
+  pack.features.forEach(f => {
+    if (f.port) f.port = 0;
+  }); // reset features ports counter
   BurgsAndStates.specifyBurgs();
   BurgsAndStates.defineBurgFeatures();
   BurgsAndStates.drawBurgs();
@@ -313,10 +354,10 @@ function regenerateEmblems() {
     if (!burg.i || burg.removed) return;
     const state = pack.states[burg.state];
 
-    let kinship = state ? .25 : 0;
+    let kinship = state ? 0.25 : 0;
-    if (burg.capital) kinship += .1;
+    if (burg.capital) kinship += 0.1;
-    else if (burg.port) kinship -= .1;
+    else if (burg.port) kinship -= 0.1;
-    if (state && burg.culture !== state.culture) kinship -= .25;
+    if (state && burg.culture !== state.culture) kinship -= 0.25;
     burg.coa = COA.generate(state ? state.coa : null, kinship, null, burg.type);
     burg.coa.shield = COA.getShield(burg.culture, state ? burg.state : 0);
   });
@@ -327,16 +368,16 @@ function regenerateEmblems() {
 
     let dominion = false;
     if (!province.burg) {
-      dominion = P(.2);
+      dominion = P(0.2);
-      if (province.formName === "Colony") dominion = P(.95); else
+      if (province.formName === "Colony") dominion = P(0.95);
-      if (province.formName === "Island") dominion = P(.6); else
+      else if (province.formName === "Island") dominion = P(0.6);
-      if (province.formName === "Islands") dominion = P(.5); else
+      else if (province.formName === "Islands") dominion = P(0.5);
-      if (province.formName === "Territory") dominion = P(.4); else
+      else if (province.formName === "Territory") dominion = P(0.4);
-      if (province.formName === "Land") dominion = P(.3);
+      else if (province.formName === "Land") dominion = P(0.3);
     }
 
     const nameByBurg = province.burg && province.name.slice(0, 3) === parent.name.slice(0, 3);
-    const kinship = dominion ? 0 : nameByBurg ? .8 : .4;
+    const kinship = dominion ? 0 : nameByBurg ? 0.8 : 0.4;
     const culture = pack.cells.culture[province.center];
     const type = BurgsAndStates.getType(province.center, parent.port);
     province.coa = COA.generate(parent.coa, kinship, dominion, type);
@@ -348,7 +389,8 @@ function regenerateEmblems() {
 
 function regenerateReligions() {
   Religions.generate();
-  if (!layerIsOn("toggleReligions")) toggleReligions(); else drawReligions();
+  if (!layerIsOn("toggleReligions")) toggleReligions();
+  else drawReligions();
 }
 
 function regenerateCultures() {
@@ -356,7 +398,8 @@ function regenerateCultures() {
   Cultures.expand();
   BurgsAndStates.updateCultures();
   Religions.updateCultures();
-  if (!layerIsOn("toggleCultures")) toggleCultures(); else drawCultures();
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  else drawCultures();
   refreshAllEditors();
 }
 
@@ -373,15 +416,18 @@ function regenerateIce() {
 }
 
 function regenerateMarkers(event) {
-  if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default:1, step:.01, min:0, max:100}, v => addNumberOfMarkers(v));
+  if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v));
-  else addNumberOfMarkers(gauss(1, .5, .3, 5, 2));
+  else addNumberOfMarkers(gauss(1, 0.5, 0.3, 5, 2));
 
   function addNumberOfMarkers(number) {
     // remove existing markers and assigned notes
-    markers.selectAll("use").each(function() {
+    markers
-      const index = notes.findIndex(n => n.id === this.id);
+      .selectAll("use")
-      if (index != -1) notes.splice(index, 1);
+      .each(function () {
-    }).remove();
+        const index = notes.findIndex(n => n.id === this.id);
+        if (index != -1) notes.splice(index, 1);
+      })
+      .remove();
 
     addMarkers(number);
     if (!layerIsOn("toggleMarkers")) toggleMarkers();
@@ -389,8 +435,8 @@ function regenerateMarkers(event) {
 }
 
 function regenerateZones(event) {
-  if (isCtrlClick(event)) prompt("Please provide zones number multiplier", {default:1, step:.01, min:0, max:100}, v => addNumberOfZones(v));
+  if (isCtrlClick(event)) prompt("Please provide zones number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfZones(v));
-  else addNumberOfZones(gauss(1, .5, .6, 5, 2));
+  else addNumberOfZones(gauss(1, 0.5, 0.6, 5, 2));
 
   function addNumberOfZones(number) {
     zones.selectAll("g").remove(); // remove existing zones
@@ -408,10 +454,13 @@ function unpressClickToAddButton() {
 
 function toggleAddLabel() {
   const pressed = document.getElementById("addLabel").classList.contains("pressed");
-  if (pressed) {unpressClickToAddButton(); return;}
+  if (pressed) {
+    unpressClickToAddButton();
+    return;
+  }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-  addLabel.classList.add('pressed');
+  addLabel.classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addLabelOnClick);
   tip("Click on map to place label. Hold Shift to add multiple", true);
@@ -428,10 +477,7 @@ function addLabelOnClick() {
   const id = getNextId("label");
 
   let group = labels.select("#addedLabels");
-  if (!group.size()) group = labels.append("g").attr("id", "addedLabels")
+  if (!group.size()) group = labels.append("g").attr("id", "addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
-    .attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a")
-    .attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
-    .attr("font-size", 18).attr("data-size", 18).attr("filter", null);
 
   const example = group.append("text").attr("x", 0).attr("x", 0).text(name);
   const width = example.node().getBBox().width;
@@ -439,13 +485,22 @@ function addLabelOnClick() {
   example.remove();
 
   group.classed("hidden", false);
-  group.append("text").attr("id", id)
+  group
-    .append("textPath").attr("xlink:href", "#textPath_"+id).attr("startOffset", "50%").attr("font-size", "100%")
+    .append("text")
-    .append("tspan").attr("x", x).text(name);
+    .attr("id", id)
+    .append("textPath")
+    .attr("xlink:href", "#textPath_" + id)
+    .attr("startOffset", "50%")
+    .attr("font-size", "100%")
+    .append("tspan")
+    .attr("x", x)
+    .text(name);
 
-  defs.select("#textPaths")
+  defs
-    .append("path").attr("id", "textPath_"+id)
+    .select("#textPaths")
-    .attr("d", `M${point[0]-width},${point[1]} h${width*2}`);
+    .append("path")
+    .attr("id", "textPath_" + id)
+    .attr("d", `M${point[0] - width},${point[1]} h${width * 2}`);
 
   if (d3.event.shiftKey === false) unpressClickToAddButton();
 }
@@ -466,7 +521,7 @@ function toggleAddRiver() {
   }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-  addRiver.classList.add('pressed');
+  addRiver.classList.add("pressed");
   document.getElementById("addNewRiver").classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
@@ -486,22 +541,27 @@ function addRiverOnClick() {
 
   // height with added t value to make map less depressed
   const h = Array.from(cells.h)
-    .map((h, i) => h < 20 || cells.t[i] < 1 ? h : h + cells.t[i] / 100)
+    .map((h, i) => (h < 20 || cells.t[i] < 1 ? h : h + cells.t[i] / 100))
-    .map((h, i) => h < 20 || cells.t[i] < 1 ? h : h + d3.mean(cells.c[i].map(c => cells.t[c])) / 10000);
+    .map((h, i) => (h < 20 || cells.t[i] < 1 ? h : h + d3.mean(cells.c[i].map(c => cells.t[c])) / 10000));
-  Rivers.resolveDepressions(h);
+  Rivers.resolveDepressions(h, 200);
 
   while (i) {
     cells.r[i] = river;
-    const x = cells.p[i][0], y = cells.p[i][1];
+    const x = cells.p[i][0],
-    dataRiver.push({x, y, cell:i});
+      y = cells.p[i][1];
+    dataRiver.push({x, y, cell: i});
 
     const min = cells.c[i][d3.scan(cells.c[i], (a, b) => h[a] - h[b])]; // downhill cell
-    if (h[i] <= h[min]) {tip(`Cell ${i} is depressed, river cannot flow further`, false, "error"); return;}
+    if (h[i] <= h[min]) {
-    const tx = cells.p[min][0], ty = cells.p[min][1];
+      tip(`Cell ${i} is depressed, river cannot flow further`, false, "error");
+      return;
+    }
+    const tx = cells.p[min][0],
+      ty = cells.p[min][1];
 
     if (h[min] < 20) {
       // pour to water body
-      dataRiver.push({x: tx, y: ty, cell:i});
+      dataRiver.push({x: tx, y: ty, cell: i});
       break;
     }
 
@@ -526,19 +586,22 @@ function addRiverOnClick() {
     }
 
     // extend old river
-    rivers.select("#river"+r).remove();
+    rivers.select("#river" + r).remove();
-    cells.i.filter(i => cells.r[i] === river).forEach(i => cells.r[i] = r);
+    cells.i.filter(i => cells.r[i] === river).forEach(i => (cells.r[i] = r));
-    riverCells.forEach(i => cells.r[i] = 0);
+    riverCells.forEach(i => (cells.r[i] = 0));
     river = r;
     cells.fl[min] = cells.fl[i] + grid.cells.prec[cells.g[min]];
     i = min;
   }
 
-  const points = Rivers.addMeandering(dataRiver, 1, .5);
+  const points = Rivers.addMeandering(dataRiver, 1, 0.5);
-  const widthFactor = rn(.8 + Math.random() * .4, 1); // river width modifier [.8, 1.2]
+  const widthFactor = rn(0.8 + Math.random() * 0.4, 1); // river width modifier [.8, 1.2]
-  const sourceWidth = .1;
+  const sourceWidth = 0.1;
   const [path, length, offset] = Rivers.getPath(points, widthFactor, sourceWidth);
-  rivers.append("path").attr("d", path).attr("id", "river"+river);
+  rivers
+    .append("path")
+    .attr("d", path)
+    .attr("id", "river" + river);
 
   // add new river to data or change extended river attributes
   const r = pack.rivers.find(r => r.i === river);
@@ -555,10 +618,10 @@ function addRiverOnClick() {
     const source = dataRiver[0].cell;
     const width = rn(offset ** 2, 2); // mounth width in km
     const name = Rivers.getName(mouth);
-    const smallLength = pack.rivers.map(r => r.length||0).sort((a,b) => a-b)[Math.ceil(pack.rivers.length * .15)];
+    const smallLength = pack.rivers.map(r => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)];
-    const type = length < smallLength ? rw({"Creek":9, "River":3, "Brook":3, "Stream":1}) : "River";
+    const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : "River";
 
-    pack.rivers.push({i:river, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, basin, name, type});
+    pack.rivers.push({i: river, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, basin, name, type});
   }
 
   if (d3.event.shiftKey === false) {
@@ -570,10 +633,13 @@ function addRiverOnClick() {
 
 function toggleAddRoute() {
   const pressed = document.getElementById("addRoute").classList.contains("pressed");
-  if (pressed) {unpressClickToAddButton(); return;}
+  if (pressed) {
+    unpressClickToAddButton();
+    return;
+  }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-  addRoute.classList.add('pressed');
+  addRoute.classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addRouteOnClick);
   tip("Click on map to add a first control point", true);
@@ -590,10 +656,13 @@ function addRouteOnClick() {
 
 function toggleAddMarker() {
   const pressed = document.getElementById("addMarker").classList.contains("pressed");
-  if (pressed) {unpressClickToAddButton(); return;}
+  if (pressed) {
+    unpressClickToAddButton();
+    return;
+  }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-  addMarker.classList.add('pressed');
+  addMarker.classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addMarkerOnClick);
   tip("Click on map to add a marker. Hold Shift to add multiple", true);
@@ -602,27 +671,44 @@ function toggleAddMarker() {
 
 function addMarkerOnClick() {
   const point = d3.mouse(this);
-  const x = rn(point[0], 2), y = rn(point[1], 2);
+  const x = rn(point[0], 2),
+    y = rn(point[1], 2);
   const id = getNextId("markerElement");
 
   const selected = markerSelectGroup.value;
-  const valid = selected && d3.select("#defs-markers").select("#"+selected).size();
+  const valid =
-  const symbol = valid ? "#"+selected : "#marker0";
+    selected &&
+    d3
+      .select("#defs-markers")
+      .select("#" + selected)
+      .size();
+  const symbol = valid ? "#" + selected : "#marker0";
   const added = markers.select("[data-id='" + symbol + "']").size();
   let desired = valid && added ? markers.select("[data-id='" + symbol + "']").attr("data-size") : 1;
   if (isNaN(desired)) desired = 1;
   const size = desired * 5 + 25 / scale;
 
-  markers.append("use").attr("id", id).attr("xlink:href", symbol).attr("data-id", symbol)
+  markers
-    .attr("data-x", x).attr("data-y", y).attr("x", x - size / 2).attr("y", y - size)
+    .append("use")
-    .attr("data-size", desired).attr("width", size).attr("height", size);
+    .attr("id", id)
+    .attr("xlink:href", symbol)
+    .attr("data-id", symbol)
+    .attr("data-x", x)
+    .attr("data-y", y)
+    .attr("x", x - size / 2)
+    .attr("y", y - size)
+    .attr("data-size", desired)
+    .attr("width", size)
+    .attr("height", size);
 
   if (d3.event.shiftKey === false) unpressClickToAddButton();
 }
 
 function viewCellDetails() {
   $("#cellInfo").dialog({
-    resizable: false, width: "22em", title: "Cell Details",
+    resizable: false,
+    width: "22em",
+    title: "Cell Details",
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 }