From 711653e115f12c30fb3152d42d103febd3fcdc3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9sz=C3=A1ros=20Gergely?= <goteguru@gmail.com>
Date: Fri, 8 Apr 2022 11:41:29 +0200
Subject: [PATCH] submap: projection moved to options, fix double burg error

---
 index.html            |  6 +--
 modules/submap.js     | 49 ++++++++++++++---------
 modules/ui/options.js |  2 +-
 modules/ui/submap.js  | 91 ++++++++++++++++++++++++++++---------------
 4 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/index.html b/index.html
index 796b3a64..4bf6fb7d 100644
--- a/index.html
+++ b/index.html
@@ -3670,13 +3670,12 @@
       <table>
       <td>Points number</td>
       <td>
-        <input id="submapPointsInput" type="range" min=1 max=13 value=4 data-cells=10000 oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()">
+        <input id="submapPointsInput" autocomplete="off" type="range" min=1 max=13 value=8 data-cells=50000 oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()">
       </td>
       <td>
-        <output id="submapPointsOutput" style="color: #053305">10K</output>
+        <output id="submapPointsOutput" style="color: #053305">50K</output>
       </td>
       </table>
-      <button id="start" data-tip="Start resampling" class="options" onclick="resampleCurrentMap()">Resample</button>
     </div>
     <div id="submapOptionsDialog" style="display: none; max-width:300px;" class="dialog">
       <p style="font-style: italic; color: red; font-weight:bold;">Warning! This operation is destructive and irreversible. Don't forget to save your original map!</p>
@@ -3716,7 +3715,6 @@
         <label for="submapAddLakeInDepression" class="checkbox-label">Add lakes in depressions (slow)</label>
       </div>
       <hr/>
-      <button id="start" data-tip="Start submap resampling" class="options" onclick="generateSubmap()">Generate</button>
     </div>
 
     <div id="alert" style="display: none" class="dialog">
diff --git a/modules/submap.js b/modules/submap.js
index d786afeb..2d1c8c8b 100644
--- a/modules/submap.js
+++ b/modules/submap.js
@@ -7,13 +7,15 @@ window.Submap = (function () {
   const isWater = (map, id) => map.grid.cells.h[map.pack.cells.g[id]] < 20? true: false;
   const inMap = (x,y) => x>0 && x<graphWidth && y>0 && y<graphHeight;
 
-  function resample(parentMap, projection, options) {
+  function resample(parentMap, options) {
     // generate new map based on an existing one (resampling parentMap)
     // parentMap: {seed, grid, pack} from original map
     // projection: map function from old to new coordinates or backwards
     //  prj(x,y,direction:bool) -> [x',y']
 
-    const stage = s => INFO && console.log('SUBMAP:', s)
+    const projection = options.projection;
+    const inverse = options.inverse;
+    const stage = s => INFO && console.log('SUBMAP:', s);
     const timeStart = performance.now();
     const childMap = { grid, pack }
     invokeActiveZooming();
@@ -32,7 +34,7 @@ window.Submap = (function () {
 
     const resampler = (points, qtree, f) => {
       for(const [i,[x, y]] of points.entries()) {
-        const [tx, ty] = projection(x, y, true);
+        const [tx, ty] = inverse(x, y);
         const oldid = qtree.find(tx,ty,Infinity)[2];
         f(i, oldid);
       }
@@ -156,7 +158,7 @@ window.Submap = (function () {
         }
         // find replacement: closest water cell
         const [ox, oy] = cells.p[id];
-        const [tx, ty] = projection(x, y, true);
+        const [tx, ty] = inverse(x, y);
         oldid = oldCells.q.find(tx,ty,Infinity)[2];
         if (!oldid) {
           console.warn("Warning, no id found in quad", id, "parent", gridCellId);
@@ -167,17 +169,13 @@ window.Submap = (function () {
         const distance = x => (x[0]-cells.p[id][0])**2 + (x[1]-cells.p[id][1])**2;
         let d = Infinity;
         oldChildren.forEach(oid => {
-          // must be the same type (this should be always true!)
+          // this should be always true, unless some algo modded the height!
           if (isWater(parentMap, oid) !== isWater(childMap, id)) {
-            console.error(
-              "should be the same", oid, id, oldCells.t[oid], cells.t[id],
-              "oldparent", oldCells.g[oid], "newparent", cells.g[id],
-              "oldheight:", oldGrid.cells.h[oldCells.g[oid]],
-              "newheight", grid.cells.h[cells.g[id]])
-            throw new Error("should be the same type.")
+            console.warn(`cell sank because of addLakesInDepressions: ${oid}`);
+            return;
           }
           const [oldpx, oldpy] = oldCells.p[oid];
-          const nd = distance(projection(oldpx, oldpy, false));
+          const nd = distance(projection(oldpx, oldpy));
           if (isNaN(nd)) {
             console.error("Distance is not a number!", "Old point:", oldpx, oldpy);
           }
@@ -283,8 +281,8 @@ window.Submap = (function () {
     for (const s of pack.states) {
       if (!s.military) continue;
       for (const m of s.military) {
-        [m.x, m.y] = projection(m.x, m.y, false);
-        [m.bx, m.by] = projection(m.bx, m.by, false);
+        [m.x, m.y] = projection(m.x, m.y);
+        [m.bx, m.by] = projection(m.bx, m.by);
         const cc = forwardMap[m.cell];
         m.cell = (cc && cc.length)? cc[0]: null;
       }
@@ -294,7 +292,7 @@ window.Submap = (function () {
 
     stage("Copying markers.");
     for (const m of pack.markers) {
-      const [x, y] = projection(m.x, m.y, false);
+      const [x, y] = projection(m.x, m.y);
       if (!inMap(x, y)) {
         Markers.deleteMarker(m.i);
       } else {
@@ -339,14 +337,14 @@ window.Submap = (function () {
   function copyBurgs(parentMap, projection, options) {
     const cells = pack.cells;
     const childMap = { grid, pack }
-    const isCoast = c => cells.t[c] === 1
+    const isCoastFree = c => cells.t[c] === 1 && !cells.burg[c]
     const isNearCoast = c => cells.t[c] === -1
     pack.burgs = parentMap.pack.burgs;
 
     // remap burgs to the best new cell
     pack.burgs.forEach( (b, id) => {
       if (id == 0) return; // skip empty city of neturals
-      [b.x, b.y] = projection(b.x, b.y, false);
+      [b.x, b.y] = projection(b.x, b.y);
 
       // disable out-of-map (removed) burgs
       if (!inMap(b.x,b.y)) {
@@ -357,7 +355,9 @@ window.Submap = (function () {
 
       let cityCell = findCell(b.x, b.y);
 
-      const searchCoastCell = findNearest(isCoast, isNearCoast, 6);
+      const searchCoastCell = findNearest(isCoastFree, isNearCoast, 6);
+      const searchFreeCell = findNearest(c => !cells.burg[c],  _=>true, 3);
+
       // pull sunken burgs out of water
       if (isWater(childMap, cityCell)) {
         const res = searchCoastCell(cityCell)
@@ -371,7 +371,7 @@ window.Submap = (function () {
         [b.x, b.y] = b.port? getMiddlePoint(coast, water): cells.p[coast];
         if (b.port) b.port = cells.f[water];
         b.cell = coast;
-      } if (b.port) {
+      } else if (b.port) {
         // find coast for ports on land
         const res = searchCoastCell(cityCell);
         if (res) {
@@ -385,6 +385,17 @@ window.Submap = (function () {
           [b.x, b.y] = cells.p[cityCell];
           b.port = 0;
         }
+      } else if (cells.burg[b.cell]) { // already occupied
+        const res = searchFreeCell(cityCell);
+        if (!res) {
+          WARN && console.warn(`No space left for ${b.name}. Removed.`);
+          b.cell = null;
+          b.removed = true;
+          return;
+        }
+        const [newCell, _] = res;
+        b.cell = newCell;
+        [b.x, b.y] = cells.p[newCell];
       } else {
         b.cell = cityCell;
         [b.x, b.y] = cells.p[cityCell];
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 9d75ddc5..89642f5d 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -353,7 +353,7 @@ const cellsDensityConstants =  {
 
 function changeCellsDensity(value) {
   const cells = value in cellsDensityConstants? cellsDensityConstants[value]: 1000;
-  pointsInput.setAttribute("data-cells", cells);
+  pointsInput.dataset.cells = cells;
   pointsOutput_formatted.value = cells / 1000 + "K";
   pointsOutput_formatted.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 1d140479..6710b02b 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -9,30 +9,71 @@ function openSubmapOptions() {
     title: "Submap options",
     resizable: false,
     width: fitContent(),
-    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+    buttons: {
+      Submap: function () {
+        $(this).dialog("close");
+        generateSubmap();
+      },
+      Cancel: function () { $(this).dialog("close"); },
+    }
   });
 }
 
 function openRemapOptions() {
+  resetZoom(0);
   $("#remapOptionsDialog").dialog({
     title: "Resampler options",
     resizable: false,
     width: fitContent(),
-    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+    buttons: {
+      Resample: function () {
+        const cellNumId = Number(document.getElementById('submapPointsInput').value);
+        const cells = cellsDensityConstants[cellNumId];
+        $(this).dialog("close");
+        if (!cells) {
+          console.error('Unknown cell number!');
+          return;
+        }
+        changeCellsDensity(cellNumId);
+        resampleCurrentMap();
+      },
+      Cancel: function () { $(this).dialog("close"); },
+    },
   });
 }
 
-const resampleCurrentMap = debounce(async function () {
-  WARN && console.warn("Resampling current map");
-});
+/* callbacks */
 
-const generateSubmap = debounce(async function () {
+const resampleCurrentMap = debounce(function () {
+  // Resample the whole map to different cell resolution or shape
+  WARN && console.warn("Resampling current map");
+  const options = {
+    lockMarkers: false,
+    lockBurgs: false,
+    depressRivers: false,
+    addLakesInDepressions: false,
+    promoteTowns: false,
+    smoothHeightMap: false,
+    projection: (x,y) => [x, y],
+    inverse: (x,y) => [x, y],
+  }
+
+  startResample(options);
+}, 1000);
+
+
+const generateSubmap = debounce(function () {
   // Create submap from the current map
   // submap limits defined by the current window size (canvas viewport)
 
   WARN && console.warn("Resampling current map");
   closeDialogs("#worldConfigurator, #options3d");
   const checked = id => Boolean(document.getElementById(id).checked)
+  // Create projection func from current zoom extents
+  const [[x0, y0], [x1, y1]] = getViewBoxExtent();
+
   const options = {
     lockMarkers: checked("submapLockMarkers"),
     lockBurgs: checked("submapLockBurgs"),
@@ -41,14 +82,8 @@ const generateSubmap = debounce(async function () {
     addLakesInDepressions: checked("submapAddLakeInDepression"),
     promoteTowns: checked("submapPromoteTowns"),
     smoothHeightMap: scale > 2,
-  }
-
-  // Create projection func from current zoom extents
-  const [[x0, y0], [x1, y1]] = getViewBoxExtent();
-  const projection = (x, y, inverse=false) => {
-    return inverse
-      ? [x * (x1-x0) / graphWidth + x0, y * (y1-y0) / graphHeight + y0]
-      : [(x-x0) * graphWidth / (x1-x0),  (y-y0) * graphHeight / (y1-y0)];
+    inverse: (x,y) => [x * (x1-x0) / graphWidth + x0, y * (y1-y0) / graphHeight + y0],
+    projection: (x, y) => [(x-x0) * graphWidth / (x1-x0),  (y-y0) * graphHeight / (y1-y0)],
   }
 
   // converting map position on the planet
@@ -65,7 +100,11 @@ const generateSubmap = debounce(async function () {
   distanceScaleInput.value = distanceScaleOutput.value = rn(distanceScale = distanceScaleOutput.value / scale, 2);
   populationRateInput.value = populationRateOutput.value = rn(populationRate = populationRateOutput.value / scale, 2);
   customization = 0;
+  startResample(options);
+}, 1000);
 
+
+async function startResample(options) {
   undraw();
   resetZoom(0);
   let oldstate = {
@@ -78,7 +117,7 @@ const generateSubmap = debounce(async function () {
 
   try {
     const oldScale = scale;
-    await Submap.resample(oldstate, projection, options);
+    await Submap.resample(oldstate, options);
     if (options.promoteTowns) {
       const groupName = 'largetowns';
       moveAllBurgsToGroup('towns', groupName);
@@ -87,7 +126,7 @@ const generateSubmap = debounce(async function () {
       invokeActiveZooming();
     }
   } catch (error) {
-    generateSubmapErrorHandler(error, oldstate, projection, options);
+    showSubmapErrorHandler(error);
   }
 
   oldstate = null; // destroy old state to free memory
@@ -96,31 +135,21 @@ const generateSubmap = debounce(async function () {
   turnButtonOn('toggleMarkers');
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
-}, 1000);
+}
 
-function generateSubmapErrorHandler(error, oldstate, projection, options) {
+function showSubmapErrorHandler(error) {
   ERROR && console.error(error);
   clearMainTip();
 
-  alertMessage.innerHTML = `An error is occured on map resampling. Please retry.
-    <br>If error is critical, clear the stored data and try again.
+  alertMessage.innerHTML = `Map resampling failed :_(.
+    <br>You may retry after clearing stored data or contact us at discord.
     <p id="errorBox">${parseError(error)}</p>`;
   $("#alert").dialog({
     resizable: false,
     title: "Generation error",
     width: "32em",
     buttons: {
-      Regenerate: async function () {
-        try {
-          await Submap.resample(oldstate, projection, options);
-        } catch (error) {
-          generateSubmapErrorHandler(error, oldstate, projection, options);
-        }
-        $(this).dialog("close");
-      },
-      Ignore: function () {
-        $(this).dialog("close");
-      }
+      Ok: function () { $(this).dialog("close"); }
     },
     position: {my: "center", at: "center", of: "svg"}
   });