From c394534246c33600a85f84cf13943fd4a1a4f466 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 23 May 2022 23:52:39 +0300
Subject: [PATCH 01/18] base dialog

---
 index.css                                  |  13 ++
 index.html                                 |   4 +-
 modules/dynamic/editors/cultures-editor.js |   2 +-
 modules/dynamic/editors/states-editor.js   |   2 +-
 modules/dynamic/heightmap-selection.js     | 183 +++++++++++++++++++++
 modules/ui/options.js                      |   6 +
 versioning.js                              |   2 +-
 7 files changed, 208 insertions(+), 4 deletions(-)
 create mode 100644 modules/dynamic/heightmap-selection.js

diff --git a/index.css b/index.css
index 1b7a983b..05baf61c 100644
--- a/index.css
+++ b/index.css
@@ -1318,6 +1318,12 @@ div.slider .ui-slider-handle {
   scrollbar-width: thin;
 }
 
+.dialog::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+}
+
 #alertMessage::-webkit-scrollbar,
 .table::-webkit-scrollbar,
 .matrix-table::-webkit-scrollbar {
@@ -1326,6 +1332,7 @@ div.slider .ui-slider-handle {
   background-color: transparent;
 }
 
+.dialog::-webkit-scrollbar-thumb,
 #alertMessage::-webkit-scrollbar-thumb,
 .table::-webkit-scrollbar-thumb,
 .matrix-table::-webkit-scrollbar-thumb {
@@ -1333,6 +1340,7 @@ div.slider .ui-slider-handle {
   border-radius: 6px;
 }
 
+.dialog::-webkit-scrollbar-thumb:hover,
 #alertMessage::-webkit-scrollbar-thumb:hover,
 .table::-webkit-scrollbar-thumb:hover,
 .matrix-table::-webkit-scrollbar-thumb:hover {
@@ -2363,3 +2371,8 @@ svg.button {
     display: none;
   }
 }
+
+
+img {}
+
+div {}
\ No newline at end of file
diff --git a/index.html b/index.html
index 033b5720..873bd9e5 100644
--- a/index.html
+++ b/index.html
@@ -1331,7 +1331,9 @@
                   </optgroup>
                 </select>
               </td>
-              <td></td>
+              <td>
+                <button id="templateSelect" data-tip="Select heightmap template or pre-made heightmap">Select</button>
+              </td>
             </tr>
 
             <tr data-tip="Define how many Cultures should be generated">
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 7ef8f1e3..0e4f9768 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -24,7 +24,7 @@ export function open() {
 }
 
 function insertEditorHtml() {
-  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable" style="display: none">
+  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
     <div id="culturesHeader" class="header">
       <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
       <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index ea97aec0..a5241a33 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -21,7 +21,7 @@ export function open() {
 }
 
 function insertEditorHtml() {
-  const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable" style="display: none">
+  const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable">
     <div id="statesHeader" class="header">
       <div style="left: 1.8em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div style="left: 10.8em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
new file mode 100644
index 00000000..d1e9d000
--- /dev/null
+++ b/modules/dynamic/heightmap-selection.js
@@ -0,0 +1,183 @@
+const templates = [
+  {id: "volcano", name: "Volcano"},
+  {id: "highIsland", name: "High Island"},
+  {id: "lowIsland", name: "Low Island"},
+  {id: "continents", name: "Continents"},
+  {id: "archipelago", name: "Archipelago"},
+  {id: "atoll", name: "Atoll"},
+  {id: "mediterranean", name: "Mediterranean"},
+  {id: "peninsula", name: "Peninsula"},
+  {id: "pangea", name: "Pangea"},
+  {id: "isthmus", name: "Isthmus"},
+  {id: "shattered", name: "Shattered"},
+  {id: "taklamakan", name: "Taklamakan"},
+  {id: "oldWorld", name: "Old World"},
+  {id: "fractious", name: "Fractious"}
+];
+
+const heightmaps = [
+  {id: "africa-centric", name: "Africa Centric"},
+  {id: "arabia", name: "Arabia"},
+  {id: "atlantics", name: "Atlantics"},
+  {id: "britain", name: "Britain"},
+  {id: "caribbean", name: "Caribbean"},
+  {id: "east-asia", name: "East Asia"},
+  {id: "eurasia", name: "Eurasia"},
+  {id: "europe", name: "Europe"},
+  {id: "europe-accented", name: "Europe Accented"},
+  {id: "europe-and-central-asia", name: "Europe and Central Asia"},
+  {id: "europe-central", name: "Europe Central"},
+  {id: "europe-north", name: "Europe North"},
+  {id: "greenland", name: "Greenland"},
+  {id: "hellenica", name: "Hellenica"},
+  {id: "iceland", name: "Iceland"},
+  {id: "indian-ocean", name: "Indian Ocean"},
+  {id: "mediterranean-sea", name: "Mediterranean Sea"},
+  {id: "middle-east", name: "Middle East"},
+  {id: "north-america", name: "North America"},
+  {id: "us-centric", name: "US-centric"},
+  {id: "us-mainland", name: "US Mainland"},
+  {id: "world", name: "World"},
+  {id: "world-from-pacific", name: "World from Pacific"}
+];
+
+appendStyleSheet();
+insertEditorHtml();
+addListeners();
+
+export function open() {
+  closeDialogs(".stable");
+
+  const $templateInput = byId("templateInput");
+  setSelected($templateInput.value);
+
+  $("#heightmapSelection").dialog({
+    title: "Select Heightmap",
+    resizable: false,
+    position: {my: "center", at: "center", of: "svg"},
+    buttons: {
+      Cancel: function () {
+        $(this).dialog("close");
+      },
+      Select: function () {
+        $templateInput.value = getSelected();
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
+function appendStyleSheet() {
+  const styles = /* css */ `
+    .heightmap-selection {
+      width: 70vw;
+      height: 70vh;
+    }
+
+    .heightmap-selection_container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      grid-gap: 8px;
+    }
+
+    .heightmap-selection article {
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 0.1s ease-in-out;
+      filter: drop-shadow(1px 1px 4px #999);
+    }
+
+    .heightmap-selection article:hover {
+      background-color: #ddd;
+      filter: drop-shadow(1px 1px 8px #999);
+      cursor: pointer;
+    }
+
+    .heightmap-selection article.selected {
+      background-color: #ccc;
+      outline: 1px solid var(--dark-solid);
+      filter: drop-shadow(1px 1px 8px #999);
+    }
+
+    .heightmap-selection article > div {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 1px;
+    }
+
+    .heightmap-selection article > div > span.icon-cw:hover {
+      color: #000;
+    }
+
+    .heightmap-selection article > img {
+      width: 100%;
+      aspect-ratio: 16/9;
+      border-radius: 8px;
+      object-fit: cover;
+      filter: contrast(1.3);
+    }
+  `;
+
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(styles));
+  document.head.appendChild(style);
+}
+
+function insertEditorHtml() {
+  const templatesHtml = templates
+    .map(({id, name}) => {
+      return /* html */ `<article data-id="${id}">
+      <img src="../../heightmaps/europe.png" alt="${name}" loading="lazy" />
+      <div>
+        ${name}
+        <span data-tip="Regenerate preview" class="icon-cw"></span>
+      </div>
+    </article>`;
+    })
+    .join("");
+
+  const heightmapsHtml = heightmaps
+    .map(({id, name}) => {
+      return /* html */ `<article data-id="${id}">
+      <img src="../../heightmaps/${id}.png" alt="${name}" loading="lazy" />
+      <div>${name}</div>
+    </article>`;
+    })
+    .join("");
+
+  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
+    <div class="heightmap-selection">
+      <section>
+        <header><h1>Heightmap templates</h1></header>
+        <div class="heightmap-selection_container">
+          ${templatesHtml}
+        </div>
+      </section>
+      <section>
+        <header><h1>Pre-created heightmaps</h1></header>
+        <div class="heightmap-selection_container">
+          ${heightmapsHtml}
+        </div>
+      </section>
+    </div>
+  </div>`;
+
+  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
+}
+
+function addListeners() {
+  byId("heightmapSelection").on("click", event => {
+    const article = event.target.closest("#heightmapSelection article");
+    if (article) setSelected(article.dataset.id);
+  });
+}
+
+function getSelected() {
+  return byId("heightmapSelection").querySelector(".selected")?.dataset?.id;
+}
+
+function setSelected(id) {
+  const $heightmapSelection = byId("heightmapSelection");
+  $heightmapSelection.querySelector(".selected")?.classList?.remove("selected");
+  $heightmapSelection.querySelector(`[data-id="${id}"]`)?.classList?.add("selected");
+}
diff --git a/modules/ui/options.js b/modules/ui/options.js
index e9fdf849..c392bf14 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -142,6 +142,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
+  else if (id === "templateSelect") openTemplateSelectionDialog();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
@@ -623,6 +624,11 @@ function changeEra() {
   options.era = eraInput.value;
 }
 
+async function openTemplateSelectionDialog() {
+  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js");
+  HeightmapSelectionDialog.open();
+}
+
 // remove all saved data from LocalStorage and reload the page
 function restoreDefaultOptions() {
   localStorage.clear();
diff --git a/versioning.js b/versioning.js
index 54c53146..3a934a0a 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.83.0"; // generator version, update each time
+const version = "1.84.0"; // generator version, update each time
 
 {
   document.title += " v" + version;

From 27a045b7091c7df1cb4d04087a2e0a6e9e6c7320 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 24 May 2022 00:55:03 +0300
Subject: [PATCH 02/18] draw images from heightmap

---
 modules/dynamic/heightmap-selection.js | 55 ++++++++++++++++--
 modules/heightmap-generator.js         | 80 ++++++++++++++++----------
 modules/ui/heightmap-editor.js         |  2 +-
 3 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index d1e9d000..271ef5ac 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -41,6 +41,8 @@ const heightmaps = [
   {id: "world-from-pacific", name: "World from Pacific"}
 ];
 
+let seed = Math.floor(Math.random() * 1e9);
+
 appendStyleSheet();
 insertEditorHtml();
 addListeners();
@@ -109,11 +111,18 @@ function appendStyleSheet() {
       color: #000;
     }
 
+    .heightmap-selection article > div > span.icon-cw:active {
+      color: #666;
+    }
+
     .heightmap-selection article > img {
       width: 100%;
       aspect-ratio: 16/9;
       border-radius: 8px;
       object-fit: cover;
+    }
+
+    img.heightmap-selection_precreated {
       filter: contrast(1.3);
     }
   `;
@@ -126,8 +135,12 @@ function appendStyleSheet() {
 function insertEditorHtml() {
   const templatesHtml = templates
     .map(({id, name}) => {
-      return /* html */ `<article data-id="${id}">
-      <img src="../../heightmaps/europe.png" alt="${name}" loading="lazy" />
+      Math.random = aleaPRNG(seed);
+      const heights = HeightmapGenerator.fromTemplate(id);
+      const dataUrl = drawHeights(heights);
+
+      return /* html */ `<article data-id="${id}" data-seed="${seed}">
+      <img src="${dataUrl}" alt="${name}" />
       <div>
         ${name}
         <span data-tip="Regenerate preview" class="icon-cw"></span>
@@ -139,7 +152,7 @@ function insertEditorHtml() {
   const heightmapsHtml = heightmaps
     .map(({id, name}) => {
       return /* html */ `<article data-id="${id}">
-      <img src="../../heightmaps/${id}.png" alt="${name}" loading="lazy" />
+      <img src="../../heightmaps/${id}.png" alt="${name}" class="heightmap-selection_precreated" />
       <div>${name}</div>
     </article>`;
     })
@@ -168,7 +181,11 @@ function insertEditorHtml() {
 function addListeners() {
   byId("heightmapSelection").on("click", event => {
     const article = event.target.closest("#heightmapSelection article");
-    if (article) setSelected(article.dataset.id);
+    if (!article) return;
+
+    const id = article.dataset.id;
+    if (event.target.matches("span.icon-cw")) regeneratePreview(article, id);
+    else setSelected(id);
   });
 }
 
@@ -181,3 +198,33 @@ function setSelected(id) {
   $heightmapSelection.querySelector(".selected")?.classList?.remove("selected");
   $heightmapSelection.querySelector(`[data-id="${id}"]`)?.classList?.add("selected");
 }
+
+function drawHeights(heights) {
+  const canvas = document.createElement("canvas");
+  canvas.width = grid.cellsX;
+  canvas.height = grid.cellsY;
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
+
+  heights.forEach((height, i) => {
+    const h = height < 20 ? Math.max(height / 1.5, 0) : height;
+    const v = (h / 100) * 255;
+    imageData.data[i * 4] = v;
+    imageData.data[i * 4 + 1] = v;
+    imageData.data[i * 4 + 2] = v;
+    imageData.data[i * 4 + 3] = 255;
+  });
+
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+
+function regeneratePreview(article, id) {
+  seed = Math.floor(Math.random() * 1e9);
+  article.dataset.seed = seed;
+  Math.random = aleaPRNG(seed);
+
+  const heights = HeightmapGenerator.fromTemplate(id);
+  const dataUrl = drawHeights(heights);
+  article.querySelector("img").src = dataUrl;
+}
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 762350ce..d7ff0ff5 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -1,12 +1,12 @@
 "use strict";
 
 window.HeightmapGenerator = (function () {
-  let cells, p;
+  let cells, p, heights;
 
   const generate = async function () {
     cells = grid.cells;
     p = grid.points;
-    cells.h = new Uint8Array(grid.points.length);
+    heights = new Uint8Array(grid.points.length);
 
     const input = document.getElementById("templateInput");
     const selectedId = input.selectedIndex >= 0 ? input.selectedIndex : 0;
@@ -32,6 +32,9 @@ window.HeightmapGenerator = (function () {
           assignColorsToHeight(imageData.data);
           canvas.remove();
           img.remove();
+
+          cells.h = heights;
+          heights = null;
           TIME && console.timeEnd("defineHeightmap");
           resolve();
         };
@@ -52,9 +55,28 @@ window.HeightmapGenerator = (function () {
       addStep(...elements);
     }
 
+    cells.h = heights;
+    heights = null;
     TIME && console.timeEnd("generateHeightmap");
   };
 
+  const fromTemplate = template => {
+    const templateString = HeightmapTemplates[template];
+    const steps = templateString.split("\n");
+
+    if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
+
+    heights = new Uint8Array(grid.points.length);
+
+    for (const step of steps) {
+      const elements = step.trim().split(" ");
+      if (elements.length < 2) throw new Error(`Heightmap template: steps < 2. Template: ${template}. Step: ${elements}`);
+      addStep(...elements);
+    }
+
+    return heights;
+  };
+
   function addStep(a1, a2, a3, a4, a5) {
     if (a1 === "Hill") return addHill(a2, a3, a4, a5);
     if (a1 === "Pit") return addPit(a2, a3, a4, a5);
@@ -110,7 +132,7 @@ window.HeightmapGenerator = (function () {
     }
 
     function addOneHill() {
-      const change = new Uint8Array(cells.h.length);
+      const change = new Uint8Array(heights.length);
       let limit = 0;
       let start;
       let h = lim(getNumberInRange(height));
@@ -120,7 +142,7 @@ window.HeightmapGenerator = (function () {
         const y = getPointInRange(rangeY, graphHeight);
         start = findGridCell(x, y);
         limit++;
-      } while (cells.h[start] + h > 90 && limit < 50);
+      } while (heights[start] + h > 90 && limit < 50);
 
       change[start] = h;
       const queue = [start];
@@ -134,7 +156,7 @@ window.HeightmapGenerator = (function () {
         }
       }
 
-      cells.h = cells.h.map((h, i) => lim(h + change[i]));
+      heights = heights.map((h, i) => lim(h + change[i]));
     }
   };
 
@@ -146,7 +168,7 @@ window.HeightmapGenerator = (function () {
     }
 
     function addOnePit() {
-      const used = new Uint8Array(cells.h.length);
+      const used = new Uint8Array(heights.length);
       let limit = 0,
         start;
       let h = lim(getNumberInRange(height));
@@ -156,7 +178,7 @@ window.HeightmapGenerator = (function () {
         const y = getPointInRange(rangeY, graphHeight);
         start = findGridCell(x, y);
         limit++;
-      } while (cells.h[start] < 20 && limit < 50);
+      } while (heights[start] < 20 && limit < 50);
 
       const queue = [start];
       while (queue.length) {
@@ -166,7 +188,7 @@ window.HeightmapGenerator = (function () {
 
         cells.c[q].forEach(function (c, i) {
           if (used[c]) return;
-          cells.h[c] = lim(cells.h[c] - h * (Math.random() * 0.2 + 0.9));
+          heights[c] = lim(heights[c] - h * (Math.random() * 0.2 + 0.9));
           used[c] = 1;
           queue.push(c);
         });
@@ -183,7 +205,7 @@ window.HeightmapGenerator = (function () {
     }
 
     function addOneRange() {
-      const used = new Uint8Array(cells.h.length);
+      const used = new Uint8Array(heights.length);
       let h = lim(getNumberInRange(height));
 
       // find start and end points
@@ -234,7 +256,7 @@ window.HeightmapGenerator = (function () {
         const frontier = queue.slice();
         (queue = []), i++;
         frontier.forEach(i => {
-          cells.h[i] = lim(cells.h[i] + h * (Math.random() * 0.3 + 0.85));
+          heights[i] = lim(heights[i] + h * (Math.random() * 0.3 + 0.85));
         });
         h = h ** power - 1;
         if (h < 2) break;
@@ -252,8 +274,8 @@ window.HeightmapGenerator = (function () {
       range.forEach((cur, d) => {
         if (d % 6 !== 0) return;
         for (const l of d3.range(i)) {
-          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => cells.h[a] - cells.h[b])]; // downhill cell
-          cells.h[min] = (cells.h[cur] * 2 + cells.h[min]) / 3;
+          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
+          heights[min] = (heights[cur] * 2 + heights[min]) / 3;
           cur = min;
         }
       });
@@ -269,7 +291,7 @@ window.HeightmapGenerator = (function () {
     }
 
     function addOneTrough() {
-      const used = new Uint8Array(cells.h.length);
+      const used = new Uint8Array(heights.length);
       let h = lim(getNumberInRange(height));
 
       // find start and end points
@@ -285,7 +307,7 @@ window.HeightmapGenerator = (function () {
         startY = getPointInRange(rangeY, graphHeight);
         start = findGridCell(startX, startY);
         limit++;
-      } while (cells.h[start] < 20 && limit < 50);
+      } while (heights[start] < 20 && limit < 50);
 
       limit = 0;
       do {
@@ -328,7 +350,7 @@ window.HeightmapGenerator = (function () {
         const frontier = queue.slice();
         (queue = []), i++;
         frontier.forEach(i => {
-          cells.h[i] = lim(cells.h[i] - h * (Math.random() * 0.3 + 0.85));
+          heights[i] = lim(heights[i] - h * (Math.random() * 0.3 + 0.85));
         });
         h = h ** power - 1;
         if (h < 2) break;
@@ -346,9 +368,9 @@ window.HeightmapGenerator = (function () {
       range.forEach((cur, d) => {
         if (d % 6 !== 0) return;
         for (const l of d3.range(i)) {
-          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => cells.h[a] - cells.h[b])]; // downhill cell
+          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
           //debug.append("circle").attr("cx", p[min][0]).attr("cy", p[min][1]).attr("r", 1);
-          cells.h[min] = (cells.h[cur] * 2 + cells.h[min]) / 3;
+          heights[min] = (heights[cur] * 2 + heights[min]) / 3;
           cur = min;
         }
       });
@@ -358,7 +380,7 @@ window.HeightmapGenerator = (function () {
   const addStrait = (width, direction = "vertical") => {
     width = Math.min(getNumberInRange(width), grid.cellsX / 3);
     if (width < 1 && P(width)) return;
-    const used = new Uint8Array(cells.h.length);
+    const used = new Uint8Array(heights.length);
     const vert = direction === "vertical";
     const startX = vert ? Math.floor(Math.random() * graphWidth * 0.4 + graphWidth * 0.3) : 5;
     const startY = vert ? 5 : Math.floor(Math.random() * graphHeight * 0.4 + graphHeight * 0.3);
@@ -398,8 +420,8 @@ window.HeightmapGenerator = (function () {
           if (used[e]) return;
           used[e] = 1;
           query.push(e);
-          cells.h[e] **= exp;
-          if (cells.h[e] > 100) cells.h[e] = 5;
+          heights[e] **= exp;
+          if (heights[e] > 100) heights[e] = 5;
         });
       });
       range = query.slice();
@@ -413,7 +435,7 @@ window.HeightmapGenerator = (function () {
     const max = range === "land" || range === "all" ? 100 : +range.split("-")[1];
     const isLand = min === 20;
 
-    grid.cells.h = grid.cells.h.map(h => {
+    heights = heights.map(h => {
       if (h < min || h > max) return h;
 
       if (add) h = isLand ? Math.max(h + add, 20) : h + add;
@@ -424,9 +446,9 @@ window.HeightmapGenerator = (function () {
   };
 
   const smooth = (fr = 2, add = 0) => {
-    cells.h = cells.h.map((h, i) => {
+    heights = heights.map((h, i) => {
       const a = [h];
-      cells.c[i].forEach(c => a.push(cells.h[c]));
+      cells.c[i].forEach(c => a.push(heights[c]));
       if (fr === 1) return d3.mean(a) + add;
       return lim((h * (fr - 1) + d3.mean(a) + add) / fr);
     });
@@ -435,7 +457,7 @@ window.HeightmapGenerator = (function () {
   const mask = (power = 1) => {
     const fr = power ? Math.abs(power) : 1;
 
-    cells.h = cells.h.map((h, i) => {
+    heights = heights.map((h, i) => {
       const [x, y] = p[i];
       const nx = (2 * x) / graphWidth - 1; // [-1, 1], 0 is center
       const ny = (2 * y) / graphHeight - 1; // [-1, 1], 0 is center
@@ -453,17 +475,17 @@ window.HeightmapGenerator = (function () {
     const invertY = axes !== "x";
     const {cellsX, cellsY} = grid;
 
-    const inverted = cells.h.map((h, i) => {
+    const inverted = heights.map((h, i) => {
       const x = i % cellsX;
       const y = Math.floor(i / cellsX);
 
       const nx = invertX ? cellsX - x - 1 : x;
       const ny = invertY ? cellsY - y - 1 : y;
       const invertedI = nx + ny * cellsX;
-      return cells.h[invertedI];
+      return heights[invertedI];
     });
 
-    cells.h = inverted;
+    heights = inverted;
   };
 
   function getPointInRange(range, length) {
@@ -481,9 +503,9 @@ window.HeightmapGenerator = (function () {
     for (let i = 0; i < cells.i.length; i++) {
       const lightness = imageData[i * 4] / 255;
       const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
-      cells.h[i] = minmax(Math.floor(powered * 100), 0, 100);
+      heights[i] = minmax(Math.floor(powered * 100), 0, 100);
     }
   }
 
-  return {generate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
+  return {generate, fromTemplate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
 })();
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 12d8b283..5345d4fa 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1360,7 +1360,7 @@ function editHeightmap() {
     const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
 
     grid.cells.h.forEach((height, i) => {
-      let h = height < 20 ? Math.max(height / 1.5, 0) : height;
+      const h = height < 20 ? Math.max(height / 1.5, 0) : height;
       const v = (h / 100) * 255;
       imageData.data[i * 4] = v;
       imageData.data[i * 4 + 1] = v;

From ff31e23a27d51775c830a83b7aa3f2d98071045a Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 24 May 2022 23:27:06 +0300
Subject: [PATCH 03/18] heightmap - fix issues

---
 index.html                             |  2 +-
 modules/dynamic/heightmap-selection.js |  5 ++
 modules/heightmap-generator.js         | 76 ++++++++++++++------------
 modules/ui/heightmap-editor.js         | 19 +++++--
 modules/ui/options.js                  |  2 +-
 5 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index 873bd9e5..6898c955 100644
--- a/index.html
+++ b/index.html
@@ -1332,7 +1332,7 @@
                 </select>
               </td>
               <td>
-                <button id="templateSelect" data-tip="Select heightmap template or pre-made heightmap">Select</button>
+                <button id="templateSelectButton" data-tip="Select heightmap template or pre-made heightmap">Select</button>
               </td>
             </tr>
 
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 271ef5ac..c9e28fb8 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -136,7 +136,10 @@ function insertEditorHtml() {
   const templatesHtml = templates
     .map(({id, name}) => {
       Math.random = aleaPRNG(seed);
+
+      HeightmapGenerator.resetHeights();
       const heights = HeightmapGenerator.fromTemplate(id);
+      HeightmapGenerator.cleanup();
       const dataUrl = drawHeights(heights);
 
       return /* html */ `<article data-id="${id}" data-seed="${seed}">
@@ -224,7 +227,9 @@ function regeneratePreview(article, id) {
   article.dataset.seed = seed;
   Math.random = aleaPRNG(seed);
 
+  HeightmapGenerator.resetHeights();
   const heights = HeightmapGenerator.fromTemplate(id);
+  HeightmapGenerator.cleanup();
   const dataUrl = drawHeights(heights);
   article.querySelector("img").src = dataUrl;
 }
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index d7ff0ff5..2213deb7 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -1,12 +1,14 @@
 "use strict";
 
 window.HeightmapGenerator = (function () {
-  let cells, p, heights;
+  let heights = null;
+  const setHeights = h => (heights = h);
+  const resetHeights = () => (heights = new Uint8Array(grid.points.length));
+  const getHeights = () => heights;
+  const cleanup = () => (heights = null);
 
   const generate = async function () {
-    cells = grid.cells;
-    p = grid.points;
-    heights = new Uint8Array(grid.points.length);
+    resetHeights();
 
     const input = document.getElementById("templateInput");
     const selectedId = input.selectedIndex >= 0 ? input.selectedIndex : 0;
@@ -33,8 +35,8 @@ window.HeightmapGenerator = (function () {
           canvas.remove();
           img.remove();
 
-          cells.h = heights;
-          heights = null;
+          grid.cells.h = heights;
+          cleanup();
           TIME && console.timeEnd("defineHeightmap");
           resolve();
         };
@@ -55,8 +57,8 @@ window.HeightmapGenerator = (function () {
       addStep(...elements);
     }
 
-    cells.h = heights;
-    heights = null;
+    grid.cells.h = heights;
+    cleanup();
     TIME && console.timeEnd("generateHeightmap");
   };
 
@@ -66,8 +68,6 @@ window.HeightmapGenerator = (function () {
 
     if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
 
-    heights = new Uint8Array(grid.points.length);
-
     for (const step of steps) {
       const elements = step.trim().split(" ");
       if (elements.length < 2) throw new Error(`Heightmap template: steps < 2. Template: ${template}. Step: ${elements}`);
@@ -77,20 +77,21 @@ window.HeightmapGenerator = (function () {
     return heights;
   };
 
-  function addStep(a1, a2, a3, a4, a5) {
-    if (a1 === "Hill") return addHill(a2, a3, a4, a5);
-    if (a1 === "Pit") return addPit(a2, a3, a4, a5);
-    if (a1 === "Range") return addRange(a2, a3, a4, a5);
-    if (a1 === "Trough") return addTrough(a2, a3, a4, a5);
-    if (a1 === "Strait") return addStrait(a2, a3);
-    if (a1 === "Mask") return mask(a2);
-    if (a1 === "Add") return modify(a3, +a2, 1);
-    if (a1 === "Multiply") return modify(a3, 0, +a2);
-    if (a1 === "Smooth") return smooth(a2);
+  function addStep(tool, a2, a3, a4, a5) {
+    if (tool === "Hill") return addHill(a2, a3, a4, a5);
+    if (tool === "Pit") return addPit(a2, a3, a4, a5);
+    if (tool === "Range") return addRange(a2, a3, a4, a5);
+    if (tool === "Trough") return addTrough(a2, a3, a4, a5);
+    if (tool === "Strait") return addStrait(a2, a3);
+    if (tool === "Mask") return mask(a2);
+    if (tool === "Invert") return invert(a2, a3);
+    if (tool === "Add") return modify(a3, +a2, 1);
+    if (tool === "Multiply") return modify(a3, 0, +a2);
+    if (tool === "Smooth") return smooth(a2);
   }
 
   function getBlobPower() {
-    const cells = +pointsInput.dataset.cells;
+    const cells = +byId("pointsInput").dataset.cells;
     if (cells === 1000) return 0.93;
     if (cells === 2000) return 0.95;
     if (cells === 5000) return 0.96;
@@ -107,7 +108,7 @@ window.HeightmapGenerator = (function () {
   }
 
   function getLinePower() {
-    const cells = +pointsInput.dataset.cells;
+    const cells = +byId("pointsInput").dataset.cells;
     if (cells === 1000) return 0.74;
     if (cells === 2000) return 0.75;
     if (cells === 5000) return 0.78;
@@ -149,7 +150,7 @@ window.HeightmapGenerator = (function () {
       while (queue.length) {
         const q = queue.shift();
 
-        for (const c of cells.c[q]) {
+        for (const c of grid.cells.c[q]) {
           if (change[c]) continue;
           change[c] = change[q] ** power * (Math.random() * 0.2 + 0.9);
           if (change[c] > 1) queue.push(c);
@@ -186,7 +187,7 @@ window.HeightmapGenerator = (function () {
         h = h ** getBlobPower() * (Math.random() * 0.2 + 0.9);
         if (h < 1) return;
 
-        cells.c[q].forEach(function (c, i) {
+        grid.cells.c[q].forEach(function (c, i) {
           if (used[c]) return;
           heights[c] = lim(heights[c] - h * (Math.random() * 0.2 + 0.9));
           used[c] = 1;
@@ -228,11 +229,12 @@ window.HeightmapGenerator = (function () {
       // get main ridge
       function getRange(cur, end) {
         const range = [cur];
+        const p = grid.points;
         used[cur] = 1;
 
         while (cur !== end) {
           let min = Infinity;
-          cells.c[cur].forEach(function (e) {
+          grid.cells.c[cur].forEach(function (e) {
             if (used[e]) return;
             let diff = (p[end][0] - p[e][0]) ** 2 + (p[end][1] - p[e][1]) ** 2;
             if (Math.random() > 0.85) diff = diff / 2;
@@ -261,7 +263,7 @@ window.HeightmapGenerator = (function () {
         h = h ** power - 1;
         if (h < 2) break;
         frontier.forEach(f => {
-          cells.c[f].forEach(i => {
+          grid.cells.c[f].forEach(i => {
             if (!used[i]) {
               queue.push(i);
               used[i] = 1;
@@ -274,7 +276,7 @@ window.HeightmapGenerator = (function () {
       range.forEach((cur, d) => {
         if (d % 6 !== 0) return;
         for (const l of d3.range(i)) {
-          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
+          const min = grid.cells.c[cur][d3.scan(grid.cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
           heights[min] = (heights[cur] * 2 + heights[min]) / 3;
           cur = min;
         }
@@ -322,11 +324,12 @@ window.HeightmapGenerator = (function () {
       // get main ridge
       function getRange(cur, end) {
         const range = [cur];
+        const p = grid.points;
         used[cur] = 1;
 
         while (cur !== end) {
           let min = Infinity;
-          cells.c[cur].forEach(function (e) {
+          grid.cells.c[cur].forEach(function (e) {
             if (used[e]) return;
             let diff = (p[end][0] - p[e][0]) ** 2 + (p[end][1] - p[e][1]) ** 2;
             if (Math.random() > 0.8) diff = diff / 2;
@@ -355,7 +358,7 @@ window.HeightmapGenerator = (function () {
         h = h ** power - 1;
         if (h < 2) break;
         frontier.forEach(f => {
-          cells.c[f].forEach(i => {
+          grid.cells.c[f].forEach(i => {
             if (!used[i]) {
               queue.push(i);
               used[i] = 1;
@@ -368,7 +371,7 @@ window.HeightmapGenerator = (function () {
       range.forEach((cur, d) => {
         if (d % 6 !== 0) return;
         for (const l of d3.range(i)) {
-          const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
+          const min = grid.cells.c[cur][d3.scan(grid.cells.c[cur], (a, b) => heights[a] - heights[b])]; // downhill cell
           //debug.append("circle").attr("cx", p[min][0]).attr("cy", p[min][1]).attr("r", 1);
           heights[min] = (heights[cur] * 2 + heights[min]) / 3;
           cur = min;
@@ -394,10 +397,11 @@ window.HeightmapGenerator = (function () {
 
     function getRange(cur, end) {
       const range = [];
+      const p = grid.points;
 
       while (cur !== end) {
         let min = Infinity;
-        cells.c[cur].forEach(function (e) {
+        grid.cells.c[cur].forEach(function (e) {
           let diff = (p[end][0] - p[e][0]) ** 2 + (p[end][1] - p[e][1]) ** 2;
           if (Math.random() > 0.8) diff = diff / 2;
           if (diff < min) {
@@ -416,7 +420,7 @@ window.HeightmapGenerator = (function () {
     while (width > 0) {
       const exp = 0.9 - step * width;
       range.forEach(function (r) {
-        cells.c[r].forEach(function (e) {
+        grid.cells.c[r].forEach(function (e) {
           if (used[e]) return;
           used[e] = 1;
           query.push(e);
@@ -448,7 +452,7 @@ window.HeightmapGenerator = (function () {
   const smooth = (fr = 2, add = 0) => {
     heights = heights.map((h, i) => {
       const a = [h];
-      cells.c[i].forEach(c => a.push(heights[c]));
+      grid.cells.c[i].forEach(c => a.push(heights[c]));
       if (fr === 1) return d3.mean(a) + add;
       return lim((h * (fr - 1) + d3.mean(a) + add) / fr);
     });
@@ -458,7 +462,7 @@ window.HeightmapGenerator = (function () {
     const fr = power ? Math.abs(power) : 1;
 
     heights = heights.map((h, i) => {
-      const [x, y] = p[i];
+      const [x, y] = grid.points[i];
       const nx = (2 * x) / graphWidth - 1; // [-1, 1], 0 is center
       const ny = (2 * y) / graphHeight - 1; // [-1, 1], 0 is center
       let distance = (1 - nx ** 2) * (1 - ny ** 2); // 1 is center, 0 is edge
@@ -500,12 +504,12 @@ window.HeightmapGenerator = (function () {
   }
 
   function assignColorsToHeight(imageData) {
-    for (let i = 0; i < cells.i.length; i++) {
+    for (let i = 0; i < grid.cells.i.length; i++) {
       const lightness = imageData[i * 4] / 255;
       const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
       heights[i] = minmax(Math.floor(powered * 100), 0, 100);
     }
   }
 
-  return {generate, fromTemplate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
+  return {setHeights, resetHeights, getHeights, cleanup, generate, fromTemplate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
 })();
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 5345d4fa..0ade51b7 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -652,17 +652,24 @@ function editHeightmap() {
       if (Number.isNaN(operand)) return tip("Operand should be a number", false, "error");
       if ((operator === "add" || operator === "subtract") && !Number.isInteger(operand)) return tip("Operand should be an integer", false, "error");
 
+      HeightmapGenerator.setHeights(grid.cells.h);
+
       if (operator === "multiply") HeightmapGenerator.modify(range, 0, operand, 0);
       else if (operator === "divide") HeightmapGenerator.modify(range, 0, 1 / operand, 0);
       else if (operator === "add") HeightmapGenerator.modify(range, operand, 1, 0);
       else if (operator === "subtract") HeightmapGenerator.modify(range, -1 * operand, 1, 0);
       else if (operator === "exponent") HeightmapGenerator.modify(range, 0, 1, operand);
 
+      grid.cells.h = HeightmapGenerator.getHeights();
+      HeightmapGenerator.cleanup();
       updateHeightmap();
     }
 
     function smoothAllHeights() {
+      HeightmapGenerator.setHeights(grid.cells.h);
       HeightmapGenerator.smooth(4, 1.5);
+      grid.cells.h = HeightmapGenerator.getHeights();
+      HeightmapGenerator.cleanup();
       updateHeightmap();
     }
 
@@ -879,10 +886,7 @@ 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) return changeTemplate(template);
 
       alertMessage.innerHTML = "Are you sure you want to select a different template? All changes will be lost.";
       $("#alert").dialog({
@@ -921,10 +925,10 @@ function editHeightmap() {
       const steps = byId("templateBody").querySelectorAll("#templateBody > div");
       if (!steps.length) return;
 
-      grid.cells.h = new Uint8Array(grid.cells.i.length); // clean all heights
-
       const seed = byId("templateSeed").value;
       if (seed) Math.random = aleaPRNG(seed);
+
+      HeightmapGenerator.resetHeights();
       restartHistory();
 
       for (const step of steps) {
@@ -948,9 +952,12 @@ function editHeightmap() {
         else if (type === "Multiply") HeightmapGenerator.modify(dist, 0, +count);
         else if (type === "Smooth") HeightmapGenerator.smooth(+count);
 
+        grid.cells.h = HeightmapGenerator.getHeights();
         updateHistory("noStat"); // update history on every step
       }
 
+      grid.cells.h = HeightmapGenerator.getHeights();
+      HeightmapGenerator.cleanup();
       updateStatistics();
       mockHeightmap();
       if (byId("preview")) drawHeightmapPreview(); // update heightmap preview if opened
diff --git a/modules/ui/options.js b/modules/ui/options.js
index c392bf14..fa82ed06 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -142,7 +142,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
-  else if (id === "templateSelect") openTemplateSelectionDialog();
+  else if (id === "templateSelectButton") openTemplateSelectionDialog();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();

From 6766de46efaf50f971bfa2e3be319922f138bc36 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 26 May 2022 00:19:32 +0300
Subject: [PATCH 04/18] generation flow for heightmap select

---
 index.html                             |  2 +-
 main.js                                | 62 ++++++++++------
 modules/burgs-and-states.js            |  2 +-
 modules/dynamic/heightmap-selection.js | 45 ++++++++----
 modules/heightmap-generator.js         | 98 +++++++++++---------------
 modules/ui/hotkeys.js                  |  2 +-
 modules/ui/options.js                  | 15 ++--
 modules/ui/tools.js                    |  2 +-
 utils/probabilityUtils.js              |  4 ++
 9 files changed, 132 insertions(+), 100 deletions(-)

diff --git a/index.html b/index.html
index 6898c955..b5bae9ca 100644
--- a/index.html
+++ b/index.html
@@ -297,7 +297,7 @@
           id="regenerate"
           data-t="tipRegenerate"
           data-tip="Click to generate a new map. Shortcut: F2"
-          onclick="regeneratePrompt('drawer')"
+          onclick="regeneratePrompt()"
           class="options"
           style="display: none"
         >
diff --git a/main.js b/main.js
index afe54d88..e1d59b56 100644
--- a/main.js
+++ b/main.js
@@ -628,18 +628,24 @@ void (function addDragToUpload() {
   });
 })();
 
-async function generate() {
+async function generate(options) {
   try {
     const timeStart = performance.now();
+    const {seed: precreatedSeed} = options || {};
+
     invokeActiveZooming();
-    generateSeed();
+    setSeed(precreatedSeed);
     INFO && console.group("Generated Map " + seed);
+
     applyMapSize();
     randomizeOptions();
-    placePoints();
-    calculateVoronoi(grid, grid.points);
-    drawScaleBar(scale);
+
+    if (shouldRegenerateGrid()) {
+      placePoints();
+      calculateVoronoi(grid, grid.points);
+    }
     await HeightmapGenerator.generate();
+
     markFeatures();
     markupGridOcean();
     addLakesInDeepDepressions();
@@ -677,6 +683,8 @@ async function generate() {
     Military.generate();
     Markers.generate();
     addZones();
+
+    drawScaleBar(scale);
     Names.getMapName();
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
@@ -711,27 +719,41 @@ async function generate() {
   }
 }
 
-// generate map seed (string!) or get it from URL searchParams
-function generateSeed() {
-  const first = !mapHistory[0];
-  const url = new URL(window.location.href);
-  const params = url.searchParams;
-  const urlSeed = url.searchParams.get("seed");
-  if (first && params.get("from") === "MFCG" && urlSeed.length === 13) seed = urlSeed.slice(0, -4);
-  else if (first && urlSeed) seed = urlSeed;
-  else if (optionsSeed.value && optionsSeed.value != seed) seed = optionsSeed.value;
-  else seed = Math.floor(Math.random() * 1e9).toString();
-  optionsSeed.value = seed;
+// set map seed (string!)
+function setSeed(precreatedSeed) {
+  if (!precreatedSeed) {
+    const first = !mapHistory[0];
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+    const urlSeed = url.searchParams.get("seed");
+    if (first && params.get("from") === "MFCG" && urlSeed.length === 13) seed = urlSeed.slice(0, -4);
+    else if (first && urlSeed) seed = urlSeed;
+    else if (optionsSeed.value && optionsSeed.value != seed) seed = optionsSeed.value;
+    else seed = generateSeed();
+  } else {
+    seed = precreatedSeed;
+  }
+
+  byId("optionsSeed").value = seed;
   Math.random = aleaPRNG(seed);
 }
 
+// check if new grid graph should be generated or we can use the existing one
+function shouldRegenerateGrid() {
+  if (!grid.spacing) return true;
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const newSpacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2);
+  return grid.spacing !== newSpacing;
+}
+
 // Place points to calculate Voronoi diagram
 function placePoints() {
   TIME && console.time("placePoints");
   Math.random = aleaPRNG(seed); // reset PRNG
 
-  const cellsDesired = +pointsInput.dataset.cells;
-  const spacing = (grid.spacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2)); // spacing between points before jirrering
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const spacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2); // spacing between points before jirrering
+  grid.spacing = spacing;
   grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
   grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid
   grid.cellsX = Math.floor((graphWidth + 0.5 * spacing - 1e-10) / spacing);
@@ -1921,14 +1943,14 @@ function showStatistics() {
   INFO && console.log(stats);
 }
 
-const regenerateMap = debounce(async function () {
+const regenerateMap = debounce(async function (options) {
   WARN && console.warn("Generate new random map");
   showLoading();
   closeDialogs("#worldConfigurator, #options3d");
   customization = 0;
   resetZoom(1000);
   undraw();
-  await generate();
+  await generate(options);
   restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 104d91b2..10a71148 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -1077,7 +1077,7 @@ window.BurgsAndStates = (function () {
 
   const generateProvinces = function (regenerate) {
     TIME && console.time("generateProvinces");
-    const localSeed = regenerate ? Math.floor(Math.random() * 1e9).toString() : seed;
+    const localSeed = regenerate ? generateSeed() : seed;
     Math.random = aleaPRNG(localSeed);
 
     const {cells, states, burgs} = pack;
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index c9e28fb8..4dc631d7 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -41,8 +41,6 @@ const heightmaps = [
   {id: "world-from-pacific", name: "World from Pacific"}
 ];
 
-let seed = Math.floor(Math.random() * 1e9);
-
 appendStyleSheet();
 insertEditorHtml();
 addListeners();
@@ -62,7 +60,20 @@ export function open() {
         $(this).dialog("close");
       },
       Select: function () {
-        $templateInput.value = getSelected();
+        const id = getSelected();
+        $templateInput.value = id;
+        lock("template");
+        $(this).dialog("close");
+      },
+      "New Map": function () {
+        const id = getSelected();
+        $templateInput.value = id;
+        lock("template");
+
+        const seed = getSeed();
+        Math.random = aleaPRNG(seed);
+
+        regeneratePrompt({seed});
         $(this).dialog("close");
       }
     }
@@ -133,13 +144,12 @@ function appendStyleSheet() {
 }
 
 function insertEditorHtml() {
+  const seed = generateSeed();
+
   const templatesHtml = templates
     .map(({id, name}) => {
       Math.random = aleaPRNG(seed);
-
-      HeightmapGenerator.resetHeights();
-      const heights = HeightmapGenerator.fromTemplate(id);
-      HeightmapGenerator.cleanup();
+      const heights = generateHeightmap(id);
       const dataUrl = drawHeights(heights);
 
       return /* html */ `<article data-id="${id}" data-seed="${seed}">
@@ -154,7 +164,7 @@ function insertEditorHtml() {
 
   const heightmapsHtml = heightmaps
     .map(({id, name}) => {
-      return /* html */ `<article data-id="${id}">
+      return /* html */ `<article data-id="${id}" data-seed="${seed}">
       <img src="../../heightmaps/${id}.png" alt="${name}" class="heightmap-selection_precreated" />
       <div>${name}</div>
     </article>`;
@@ -202,6 +212,10 @@ function setSelected(id) {
   $heightmapSelection.querySelector(`[data-id="${id}"]`)?.classList?.add("selected");
 }
 
+function getSeed() {
+  return byId("heightmapSelection").querySelector(".selected")?.dataset?.seed;
+}
+
 function drawHeights(heights) {
   const canvas = document.createElement("canvas");
   canvas.width = grid.cellsX;
@@ -222,14 +236,19 @@ function drawHeights(heights) {
   return canvas.toDataURL("image/png");
 }
 
-function regeneratePreview(article, id) {
-  seed = Math.floor(Math.random() * 1e9);
-  article.dataset.seed = seed;
-  Math.random = aleaPRNG(seed);
-
+function generateHeightmap(id) {
   HeightmapGenerator.resetHeights();
   const heights = HeightmapGenerator.fromTemplate(id);
   HeightmapGenerator.cleanup();
+  return heights;
+}
+
+function regeneratePreview(article, id) {
+  const seed = generateSeed();
+  article.dataset.seed = seed;
+  Math.random = aleaPRNG(seed);
+
+  const heights = generateHeightmap(id);
   const dataUrl = drawHeights(heights);
   article.querySelector("img").src = dataUrl;
 }
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 2213deb7..d8ec192d 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -7,61 +7,6 @@ window.HeightmapGenerator = (function () {
   const getHeights = () => heights;
   const cleanup = () => (heights = null);
 
-  const generate = async function () {
-    resetHeights();
-
-    const input = document.getElementById("templateInput");
-    const selectedId = input.selectedIndex >= 0 ? input.selectedIndex : 0;
-    const type = input.options[selectedId]?.parentElement?.label;
-
-    if (type === "Specific") {
-      // pre-defined heightmap
-      TIME && console.time("defineHeightmap");
-      return new Promise(resolve => {
-        // create canvas where 1px correcponds to a cell
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        const {cellsX, cellsY} = grid;
-        canvas.width = cellsX;
-        canvas.height = cellsY;
-
-        // load heightmap into image and render to canvas
-        const img = new Image();
-        img.src = `./heightmaps/${input.value}.png`;
-        img.onload = () => {
-          ctx.drawImage(img, 0, 0, cellsX, cellsY);
-          const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
-          assignColorsToHeight(imageData.data);
-          canvas.remove();
-          img.remove();
-
-          grid.cells.h = heights;
-          cleanup();
-          TIME && console.timeEnd("defineHeightmap");
-          resolve();
-        };
-      });
-    }
-
-    // heightmap template
-    TIME && console.time("generateHeightmap");
-    const template = input.value;
-    const templateString = HeightmapTemplates[template];
-    const steps = templateString.split("\n");
-
-    if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
-
-    for (const step of steps) {
-      const elements = step.trim().split(" ");
-      if (elements.length < 2) throw new Error(`Heightmap template: steps < 2. Template: ${template}. Step: ${elements}`);
-      addStep(...elements);
-    }
-
-    grid.cells.h = heights;
-    cleanup();
-    TIME && console.timeEnd("generateHeightmap");
-  };
-
   const fromTemplate = template => {
     const templateString = HeightmapTemplates[template];
     const steps = templateString.split("\n");
@@ -77,6 +22,49 @@ window.HeightmapGenerator = (function () {
     return heights;
   };
 
+  const fromPrecreated = id => {
+    return new Promise(resolve => {
+      TIME && console.time("defineHeightmap");
+      // create canvas where 1px corresponts to a cell
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const {cellsX, cellsY} = grid;
+      canvas.width = cellsX;
+      canvas.height = cellsY;
+
+      // load heightmap into image and render to canvas
+      const img = new Image();
+      img.src = `./heightmaps/${id}.png`;
+      img.onload = () => {
+        ctx.drawImage(img, 0, 0, cellsX, cellsY);
+        const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
+        assignColorsToHeight(imageData.data);
+        canvas.remove();
+        img.remove();
+
+        grid.cells.h = heights;
+        cleanup();
+        TIME && console.timeEnd("defineHeightmap");
+        resolve();
+      };
+    });
+  };
+
+  const generate = async function () {
+    Math.random = aleaPRNG(seed);
+    resetHeights();
+    const id = byId("templateInput").value;
+
+    if (HeightmapTemplates[id]) {
+      TIME && console.time("generateHeightmap");
+      grid.cells.h = fromTemplate(id);
+      cleanup();
+      TIME && console.timeEnd("generateHeightmap");
+    } else {
+      return fromPrecreated(id);
+    }
+  };
+
   function addStep(tool, a2, a3, a4, a5) {
     if (tool === "Hill") return addHill(a2, a3, a4, a5);
     if (tool === "Pit") return addPit(a2, a3, a4, a5);
diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js
index d9f0e234..9c9a4a7f 100644
--- a/modules/ui/hotkeys.js
+++ b/modules/ui/hotkeys.js
@@ -25,7 +25,7 @@ function handleKeyup(event) {
   const alt = altKey || key === "Alt";
 
   if (code === "F1") showInfo();
-  else if (code === "F2") regeneratePrompt("hotkey");
+  else if (code === "F2") regeneratePrompt();
   else if (code === "F6") quickSave();
   else if (code === "F9") quickLoad();
   else if (code === "Tab") toggleOptions(event);
diff --git a/modules/ui/options.js b/modules/ui/options.js
index fa82ed06..260cdea5 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -249,9 +249,9 @@ function testSpeaker() {
   speechSynthesis.speak(speaker);
 }
 
-function generateMapWithSeed(source) {
+function generateMapWithSeed() {
   if (optionsSeed.value == seed) return tip("The current map already has this seed", false, "error");
-  regeneratePrompt(source);
+  regeneratePrompt();
 }
 
 function showSeedHistoryDialog() {
@@ -280,7 +280,7 @@ function restoreSeed(id) {
   mapHeightInput.value = mapHistory[id].height;
   templateInput.value = mapHistory[id].template;
   if (locked("template")) unlock("template");
-  regeneratePrompt("seed history");
+  regeneratePrompt();
 }
 
 function restoreDefaultZoomExtent() {
@@ -513,7 +513,6 @@ function applyStoredOptions() {
 
 // randomize options if randomization is allowed (not locked or options='default')
 function randomizeOptions() {
-  Math.random = aleaPRNG(seed); // reset seed to initial one
   const randomize = new URL(window.location.href).searchParams.get("options") === "default"; // ignore stored options
 
   // 'Options' settings
@@ -638,17 +637,17 @@ function restoreDefaultOptions() {
 // Sticked menu Options listeners
 document.getElementById("sticked").addEventListener("click", function (event) {
   const id = event.target.id;
-  if (id === "newMapButton") regeneratePrompt("sticky button");
+  if (id === "newMapButton") regeneratePrompt();
   else if (id === "saveButton") showSavePane();
   else if (id === "exportButton") showExportPane();
   else if (id === "loadButton") showLoadPane();
   else if (id === "zoomReset") resetZoom(1000);
 });
 
-function regeneratePrompt(source) {
+function regeneratePrompt(options) {
   if (customization) return tip("New map cannot be generated when edit mode is active, please exit the mode and retry", false, "error");
   const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
-  if (workingTime < 5) return regenerateMap(source);
+  if (workingTime < 5) return regenerateMap(options);
 
   alertMessage.innerHTML = /* html */ `Are you sure you want to generate a new map?<br />
     All unsaved changes made to the current map will be lost`;
@@ -661,7 +660,7 @@ function regeneratePrompt(source) {
       },
       Generate: function () {
         closeDialogs();
-        regenerateMap(source);
+        regenerateMap(options);
       }
     }
   });
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 66eaa9ea..20041aaf 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -137,7 +137,7 @@ function recalculatePopulation() {
 }
 
 function regenerateStates() {
-  const localSeed = Math.floor(Math.random() * 1e9); // new random seed
+  const localSeed = generateSeed();
   Math.random = aleaPRNG(localSeed);
 
   const statesCount = +regionsOutput.value;
diff --git a/utils/probabilityUtils.js b/utils/probabilityUtils.js
index 454b659c..7759e330 100644
--- a/utils/probabilityUtils.js
+++ b/utils/probabilityUtils.js
@@ -74,3 +74,7 @@ function getNumberInRange(r) {
   }
   return count;
 }
+
+function generateSeed() {
+  return String(Math.floor(Math.random() * 1e9));
+}

From f56bd0f586366500177eff1b43dbcfb920ad4be6 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 27 May 2022 02:22:25 +0300
Subject: [PATCH 05/18] heightmap select - style fixes

---
 index.css                              |  5 +-
 index.html                             | 64 +++++++++++------------
 main.js                                |  5 --
 modules/dynamic/heightmap-selection.js | 70 +++++++++++++++++---------
 modules/heightmap-generator.js         | 53 +++++++++++--------
 modules/ui/heightmap-editor.js         | 10 ++--
 modules/ui/layers.js                   |  7 +--
 7 files changed, 123 insertions(+), 91 deletions(-)

diff --git a/index.css b/index.css
index 05baf61c..c94d83ad 100644
--- a/index.css
+++ b/index.css
@@ -2309,11 +2309,8 @@ svg.button {
 
 #mapOverlay {
   position: absolute;
+  inset: 0;
   display: flex;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   align-items: center;
   justify-content: center;
   z-index: 10;
diff --git a/index.html b/index.html
index b5bae9ca..892120d5 100644
--- a/index.html
+++ b/index.html
@@ -24,29 +24,21 @@
         font-size: 10px;
         overflow: hidden;
       }
-      #map {
-        position: absolute;
+      #loading > * {
+        pointer-events: none;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
-      #initial {
+      #loading > #loading-rose > use {
         fill: none;
         stroke: black;
-        pointer-events: none;
-      }
-      #init-rose {
         opacity: 0.7;
         transform-origin: center;
-        opacity: 0.7;
-        animation: 20s infinite spin;
+        animation: 20s linear 0s infinite spin;
       }
-      @keyframes spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(359deg);
-        }
-      }
-      #loading {
+      #loading > #loading-typography {
         opacity: 1;
         font-size: 11px;
         color: #fff5da;
@@ -54,11 +46,6 @@
         text-shadow: 0px 1px 4px #4c3a35;
         width: 80%;
         max-width: 600px;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        pointer-events: none;
       }
       #loading-text {
         font-size: 1.8em;
@@ -106,6 +93,14 @@
           opacity: 0.1;
         }
       }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(359deg);
+        }
+      }
     </style>
     <link rel="stylesheet" href="index.css?v=21052022" />
     <link rel="stylesheet" href="icons.css" />
@@ -116,6 +111,7 @@
       id="map"
       width="100%"
       height="100%"
+      style="position: absolute"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -267,18 +263,24 @@
       </defs>
       <g id="viewbox"></g>
       <g id="scaleBar"></g>
-      <g id="initial" opacity="1">
-        <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab" />
-        <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" />
-        <use href="#rose" id="init-rose" x="50%" y="50%" />
-      </g>
     </svg>
 
     <div id="loading">
-      <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
-      <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
-      <div id="versionText"><t data-t="version">v. </t><span id="version"></span></div>
-      <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
+      <svg width="100%" height="100%">
+        <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab" />
+        <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" />
+      </svg>
+      <svg id="loading-rose" width="100%" height="100%" viewBox="0 0 700 700">
+        <use href="#rose" x="50%" y="50%" />
+      </svg>
+      <div id="loading-typography">
+        <div>
+          <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
+          <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
+          <div id="versionText"><t data-t="version">v. </t><span id="version"></span></div>
+          <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
+        </div>
+      </div>
     </div>
 
     <div id="optionsContainer" style="opacity: 0">
diff --git a/main.js b/main.js
index e1d59b56..cd5f0244 100644
--- a/main.js
+++ b/main.js
@@ -201,9 +201,6 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
       }
     });
-
-    d3.select("#loading-text").transition().duration(1000).style("opacity", 0);
-    d3.select("#init-rose").transition().duration(4000).style("opacity", 0);
   } else {
     hideLoading();
     await checkLoadParameters();
@@ -213,14 +210,12 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 function hideLoading() {
   d3.select("#loading").transition().duration(4000).style("opacity", 0);
-  d3.select("#initial").transition().duration(4000).attr("opacity", 0);
   d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
   d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
 }
 
 function showLoading() {
   d3.select("#loading").transition().duration(200).style("opacity", 1);
-  d3.select("#initial").transition().duration(200).attr("opacity", 1);
   d3.select("#optionsContainer").transition().duration(100).style("opacity", 0);
   d3.select("#tooltip").transition().duration(200).style("opacity", 0);
 }
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 4dc631d7..3f38cf5d 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -89,10 +89,23 @@ function appendStyleSheet() {
 
     .heightmap-selection_container {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       grid-gap: 8px;
     }
 
+    @media (max-width: 600px) {
+      .heightmap-selection_container {
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        grid-gap: 4px;
+      }
+    }
+
+    @media (min-width: 2000px) {
+      .heightmap-selection_container {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      }
+    }
+
     .heightmap-selection article {
       padding: 4px;
       border-radius: 8px;
@@ -128,13 +141,9 @@ function appendStyleSheet() {
 
     .heightmap-selection article > img {
       width: 100%;
-      aspect-ratio: 16/9;
+      aspect-ratio: ${graphWidth}/${graphHeight};
       border-radius: 8px;
-      object-fit: cover;
-    }
-
-    img.heightmap-selection_precreated {
-      filter: contrast(1.3);
+      object-fit: fill;
     }
   `;
 
@@ -153,21 +162,23 @@ function insertEditorHtml() {
       const dataUrl = drawHeights(heights);
 
       return /* html */ `<article data-id="${id}" data-seed="${seed}">
-      <img src="${dataUrl}" alt="${name}" />
-      <div>
-        ${name}
-        <span data-tip="Regenerate preview" class="icon-cw"></span>
-      </div>
-    </article>`;
+        <img src="${dataUrl}" alt="${name}" />
+        <div>
+          ${name}
+          <span data-tip="Regenerate preview" class="icon-cw"></span>
+        </div>
+      </article>`;
     })
     .join("");
 
   const heightmapsHtml = heightmaps
     .map(({id, name}) => {
+      drawPrecreatedHeightmap(id);
+
       return /* html */ `<article data-id="${id}" data-seed="${seed}">
-      <img src="../../heightmaps/${id}.png" alt="${name}" class="heightmap-selection_precreated" />
-      <div>${name}</div>
-    </article>`;
+        <img alt="${name}" />
+        <div>${name}</div>
+      </article>`;
     })
     .join("");
 
@@ -222,15 +233,19 @@ function drawHeights(heights) {
   canvas.height = grid.cellsY;
   const ctx = canvas.getContext("2d");
   const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
+  const scheme = getColorScheme();
+  const waterColor = scheme(1);
 
-  heights.forEach((height, i) => {
-    const h = height < 20 ? Math.max(height / 1.5, 0) : height;
-    const v = (h / 100) * 255;
-    imageData.data[i * 4] = v;
-    imageData.data[i * 4 + 1] = v;
-    imageData.data[i * 4 + 2] = v;
-    imageData.data[i * 4 + 3] = 255;
-  });
+  for (let i = 0; i < heights.length; i++) {
+    const color = heights[i] < 20 ? waterColor : scheme(1 - heights[i] / 100);
+    const {r, g, b} = d3.color(color);
+
+    const n = i * 4;
+    imageData.data[n] = r;
+    imageData.data[n + 1] = g;
+    imageData.data[n + 2] = b;
+    imageData.data[n + 3] = 255;
+  }
 
   ctx.putImageData(imageData, 0, 0);
   return canvas.toDataURL("image/png");
@@ -243,6 +258,13 @@ function generateHeightmap(id) {
   return heights;
 }
 
+async function drawPrecreatedHeightmap(id) {
+  const heights = await HeightmapGenerator.fromPrecreated(id);
+  const dataUrl = drawHeights(heights);
+  const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
+  article.querySelector("img").src = dataUrl;
+}
+
 function regeneratePreview(article, id) {
   const seed = generateSeed();
   article.dataset.seed = seed;
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index d8ec192d..71f2ea2d 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -24,7 +24,6 @@ window.HeightmapGenerator = (function () {
 
   const fromPrecreated = id => {
     return new Promise(resolve => {
-      TIME && console.time("defineHeightmap");
       // create canvas where 1px corresponts to a cell
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
@@ -38,31 +37,26 @@ window.HeightmapGenerator = (function () {
       img.onload = () => {
         ctx.drawImage(img, 0, 0, cellsX, cellsY);
         const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
-        assignColorsToHeight(imageData.data);
+        const heights = getHeightsFromImageData(imageData.data);
         canvas.remove();
         img.remove();
-
-        grid.cells.h = heights;
-        cleanup();
-        TIME && console.timeEnd("defineHeightmap");
-        resolve();
+        resolve(heights);
       };
     });
   };
 
   const generate = async function () {
     Math.random = aleaPRNG(seed);
-    resetHeights();
-    const id = byId("templateInput").value;
 
-    if (HeightmapTemplates[id]) {
-      TIME && console.time("generateHeightmap");
-      grid.cells.h = fromTemplate(id);
-      cleanup();
-      TIME && console.timeEnd("generateHeightmap");
-    } else {
-      return fromPrecreated(id);
-    }
+    TIME && console.time("defineHeightmap");
+    const id = byId("templateInput").value;
+    resetHeights();
+
+    const isTemplate = id in HeightmapTemplates;
+    grid.cells.h = isTemplate ? fromTemplate(id) : await fromPrecreated(id);
+
+    cleanup();
+    TIME && console.timeEnd("defineHeightmap");
   };
 
   function addStep(tool, a2, a3, a4, a5) {
@@ -491,13 +485,32 @@ window.HeightmapGenerator = (function () {
     return rand(min * length, max * length);
   }
 
-  function assignColorsToHeight(imageData) {
-    for (let i = 0; i < grid.cells.i.length; i++) {
+  function getHeightsFromImageData(imageData) {
+    const heights = new Uint8Array(grid.points.length);
+    for (let i = 0; i < heights.length; i++) {
       const lightness = imageData[i * 4] / 255;
       const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
       heights[i] = minmax(Math.floor(powered * 100), 0, 100);
     }
+    return heights;
   }
 
-  return {setHeights, resetHeights, getHeights, cleanup, generate, fromTemplate, addHill, addRange, addTrough, addStrait, addPit, smooth, modify, mask, invert};
+  return {
+    setHeights,
+    resetHeights,
+    getHeights,
+    cleanup,
+    generate,
+    fromTemplate,
+    fromPrecreated,
+    addHill,
+    addRange,
+    addTrough,
+    addStrait,
+    addPit,
+    smooth,
+    modify,
+    mask,
+    invert
+  };
 })();
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 0ade51b7..f30004c1 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1369,10 +1369,12 @@ function editHeightmap() {
     grid.cells.h.forEach((height, i) => {
       const h = height < 20 ? Math.max(height / 1.5, 0) : height;
       const v = (h / 100) * 255;
-      imageData.data[i * 4] = v;
-      imageData.data[i * 4 + 1] = v;
-      imageData.data[i * 4 + 2] = v;
-      imageData.data[i * 4 + 3] = 255;
+
+      const n = i * 4;
+      imageData.data[n] = v;
+      imageData.data[n + 1] = v;
+      imageData.data[n + 2] = v;
+      imageData.data[n + 3] = 255;
     });
 
     ctx.putImageData(imageData, 0, 0);
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 3e53c2f2..9ff93af4 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -151,9 +151,9 @@ function toggleHeight(event) {
 function drawHeightmap() {
   TIME && console.time("drawHeightmap");
   terrs.selectAll("*").remove();
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    n = cells.i.length;
+
+  const {cells, vertices} = pack;
+  const n = cells.i.length;
   const used = new Uint8Array(cells.i.length);
   const paths = new Array(101).fill("");
 
@@ -161,6 +161,7 @@ function drawHeightmap() {
   const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
   const skip = +terrs.attr("skip") + 1;
   const simplification = +terrs.attr("relax");
+
   switch (+terrs.attr("curve")) {
     case 0:
       lineGen.curve(d3.curveBasisClosed);

From 8b1778cb9399649f0063f4ccca2818dff41f1696 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 27 May 2022 19:33:04 +0300
Subject: [PATCH 06/18] reduce gap

---
 modules/dynamic/heightmap-selection.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 3f38cf5d..e7621520 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -90,7 +90,7 @@ function appendStyleSheet() {
     .heightmap-selection_container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-      grid-gap: 8px;
+      grid-gap: 6px;
     }
 
     @media (max-width: 600px) {
@@ -103,6 +103,7 @@ function appendStyleSheet() {
     @media (min-width: 2000px) {
       .heightmap-selection_container {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-gap: 8px;
       }
     }
 

From 8a9a29a9d3a4524342b84f57a5bc1696b89d76a3 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 28 May 2022 01:47:25 +0300
Subject: [PATCH 07/18] refactor dialogs to be mobile-friendly

---
 index.css                                  |  63 +--
 index.html                                 | 428 ++++++++++-----------
 libs/jquery-ui.css                         |   2 +-
 main.js                                    |   6 +-
 modules/dynamic/editors/cultures-editor.js |  19 +-
 modules/dynamic/editors/states-editor.js   |  23 +-
 modules/dynamic/heightmap-selection.js     | 117 ++++--
 modules/io/export.js                       |   2 +-
 modules/ui/elevation-profile.js            |  37 +-
 modules/ui/layers.js                       |   5 +-
 modules/ui/military-overview.js            |   3 +
 modules/ui/notes-editor.js                 |   2 +-
 modules/ui/regiments-overview.js           |   3 +
 modules/ui/submap.js                       |  61 ++-
 modules/ui/world-configurator.js           |   2 +-
 utils/graphUtils.js                        |   2 +-
 16 files changed, 402 insertions(+), 373 deletions(-)

diff --git a/index.css b/index.css
index c94d83ad..419bf650 100644
--- a/index.css
+++ b/index.css
@@ -929,7 +929,7 @@ fieldset {
   padding: 0.1em 0.5em;
   float: left;
   font-size: 1.2em;
-  font-family: Copperplate, monospace;
+  font-family: monospace;
 }
 
 #brushesButtons > button {
@@ -1318,12 +1318,13 @@ div.slider .ui-slider-handle {
   scrollbar-width: thin;
 }
 
-.dialog::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: transparent;
+@media screen and (max-width: 600px) {
+  .table {
+    max-width: unset;
+  }
 }
 
+.dialog::-webkit-scrollbar,
 #alertMessage::-webkit-scrollbar,
 .table::-webkit-scrollbar,
 .matrix-table::-webkit-scrollbar {
@@ -1347,24 +1348,23 @@ div.slider .ui-slider-handle {
   background: #666;
 }
 
-.overflow {
+.dialog {
   max-width: 93vw;
-  overflow: auto;
-  max-height: 75vh;
 }
 
-.overflow > div {
+.dialog > div {
   width: max-content;
 }
 
-div.header > div {
+div.header {
+  display: grid;
+  width: 0;
   font-weight: bold;
   font-size: 0.9em;
-  display: inline-block;
-  position: sticky;
-  white-space: nowrap;
-  overflow-x: hidden;
-  vertical-align: bottom;
+}
+
+div.header > div:first-child {
+  margin-left: 1.8em;
 }
 
 .sortable {
@@ -1663,11 +1663,6 @@ div.states > div.biomeArea {
   width: 5em;
 }
 
-#militaryHeader > div,
-#regimentsHeader > div {
-  width: 5.2em;
-}
-
 #militaryBody div.states > input {
   -moz-appearance: textfield;
 }
@@ -1986,12 +1981,9 @@ input[type="checkbox"] {
 }
 
 div.textual select,
-div.textual textarea {
-  font-family: Copperplate, monospace;
-}
-
+div.textual textarea,
 div.textual input {
-  font-family: Copperplate, monospace;
+  font-family: monospace;
 }
 
 div.textual fieldset {
@@ -2006,7 +1998,7 @@ div.textual span,
 }
 
 #namesbaseExamples {
-  font-family: Copperplate, monospace;
+  font-family: monospace;
   cursor: pointer;
 }
 
@@ -2071,7 +2063,7 @@ div.textual span,
   outline: 0;
   overflow-y: auto;
   padding: 0.6em;
-  font-family: Copperplate, monospace;
+  font-family: monospace;
   background-color: #fff;
   border: 1px solid #dedede;
   color: #000;
@@ -2100,6 +2092,7 @@ svg.button {
 #reliefIconsDiv {
   margin-top: 2px;
   padding: 2px;
+  width: 100%;
 }
 
 #reliefIconsDiv svg {
@@ -2345,17 +2338,6 @@ svg.button {
 }
 
 @media only screen and (max-width: 420px) {
-  #collapsible,
-  #options {
-    margin: 0;
-    border: 0;
-  }
-
-  #options {
-    height: 100vh;
-    width: 100vw;
-  }
-
   table {
     width: 100%;
   }
@@ -2368,8 +2350,3 @@ svg.button {
     display: none;
   }
 }
-
-
-img {}
-
-div {}
\ No newline at end of file
diff --git a/index.html b/index.html
index 892120d5..a895ac77 100644
--- a/index.html
+++ b/index.html
@@ -1896,115 +1896,117 @@
 
     <div id="dialogs">
       <div id="worldConfigurator" class="dialog stable" style="display: none">
-        <div id="worldControls">
-          <div>
-            <i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
-            <label data-tip="Set temperature at equator">
-              <i>Equator:</i>
-              <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
-              <span id="temperatureEquatorF"></span>°F
-              <input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
-            <label data-tip="Set temperature near poles">
-              <i>Poles:</i>
-              <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
-              <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
-            <label data-tip="Set map size relative to the world size">
-              <i>Map size:</i>
-              <input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
-              <input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
-            <label data-tip="Set a North-South map shift">
-              <i>Latitudes:</i>
-              <input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
-              <br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
-            </label>
+        <div>
+          <div id="worldControls">
+            <div>
+              <i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
+              <label data-tip="Set temperature at equator">
+                <i>Equator:</i>
+                <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
+                <span id="temperatureEquatorF"></span>°F
+                <input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
+              <label data-tip="Set temperature near poles">
+                <i>Poles:</i>
+                <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
+                <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
+              <label data-tip="Set map size relative to the world size">
+                <i>Map size:</i>
+                <input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
+                <input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
+              <label data-tip="Set a North-South map shift">
+                <i>Latitudes:</i>
+                <input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
+                <br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
+              </label>
+            </div>
+
+            <div>
+              <label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
+                <i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
+                <i>Precipitation:</i>
+                <input id="precInput" data-stored="prec" type="number" />%
+                <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
+              </label>
+            </div>
+            <div data-tip="Canvas size. Can be changed in general options on new map generation">
+              <i>Canvas size:</i><br />
+              <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
+            </div>
+            <div>
+              <i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
+              <span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
+              <span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
+              <span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
+            </div>
+            <div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
           </div>
 
-          <div>
-            <label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
-              <i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
-              <i>Precipitation:</i>
-              <input id="precInput" data-stored="prec" type="number" />%
-              <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
-            </label>
-          </div>
-          <div data-tip="Canvas size. Can be changed in general options on new map generation">
-            <i>Canvas size:</i><br />
-            <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
-          </div>
-          <div>
-            <i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
-            <span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
-            <span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
-            <span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
-          </div>
-          <div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
+          <svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
+            <defs>
+              <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
+                <stop class="tempGradient90" offset="0%" stop-color="blue" />
+                <stop class="tempGradient60" offset="16.6%" stop-color="green" />
+                <stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
+                <stop class="tempGradient0" offset="50%" stop-color="red" />
+                <stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
+                <stop class="tempGradient60" offset="83.3%" stop-color="green" />
+                <stop class="tempGradient90" offset="100%" stop-color="blue" />
+              </linearGradient>
+            </defs>
+            <g id="globeNoteLines">
+              <line x1="5" x2="220" y1="0" y2="0" />
+              <line x1="5" x2="220" y1="13" y2="13" />
+              <line x1="5" x2="220" y1="49.5" y2="49.5" />
+              <line x1="-5" x2="220" y1="100" y2="100" />
+              <line x1="5" x2="220" y1="150.5" y2="150.5" />
+              <line x1="5" x2="220" y1="187" y2="187" />
+              <line x1="5" x2="220" y1="200" y2="200" />
+            </g>
+            <g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
+              <circle cx="210" cy="6" r="12" />
+              <path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
+              <circle cx="210" cy="30" r="12" />
+              <path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
+              <circle cx="210" cy="75" r="12" />
+              <path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
+              <circle cx="210" cy="130" r="12" />
+              <path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
+              <circle cx="210" cy="173" r="12" />
+              <path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
+              <circle cx="210" cy="194" r="12" />
+              <path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
+            </g>
+            <g id="globaAxisLabels">
+              <text x="82%" y="-4%">wind</text>
+              <text x="-8%" y="-4%">latitude</text>
+            </g>
+            <g id="globeLatLabels">
+              <text x="-15" y="5">90°</text>
+              <text x="-15" y="18">60°</text>
+              <text x="-15" y="53">30°</text>
+              <text x="-15" y="103">0°</text>
+              <text x="-15" y="153">30°</text>
+              <text x="-15" y="190">60°</text>
+              <text x="-15" y="204">90°</text>
+            </g>
+            <circle id="globeOutline" cx="100" cy="100" r="100" />
+            <line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
+            <path id="globeGraticule" />
+            <path id="globeArea" />
+          </svg>
         </div>
-
-        <svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
-          <defs>
-            <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
-              <stop class="tempGradient90" offset="0%" stop-color="blue" />
-              <stop class="tempGradient60" offset="16.6%" stop-color="green" />
-              <stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
-              <stop class="tempGradient0" offset="50%" stop-color="red" />
-              <stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
-              <stop class="tempGradient60" offset="83.3%" stop-color="green" />
-              <stop class="tempGradient90" offset="100%" stop-color="blue" />
-            </linearGradient>
-          </defs>
-          <g id="globeNoteLines">
-            <line x1="5" x2="220" y1="0" y2="0" />
-            <line x1="5" x2="220" y1="13" y2="13" />
-            <line x1="5" x2="220" y1="49.5" y2="49.5" />
-            <line x1="-5" x2="220" y1="100" y2="100" />
-            <line x1="5" x2="220" y1="150.5" y2="150.5" />
-            <line x1="5" x2="220" y1="187" y2="187" />
-            <line x1="5" x2="220" y1="200" y2="200" />
-          </g>
-          <g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
-            <circle cx="210" cy="6" r="12" />
-            <path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
-            <circle cx="210" cy="30" r="12" />
-            <path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
-            <circle cx="210" cy="75" r="12" />
-            <path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
-            <circle cx="210" cy="130" r="12" />
-            <path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
-            <circle cx="210" cy="173" r="12" />
-            <path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
-            <circle cx="210" cy="194" r="12" />
-            <path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
-          </g>
-          <g id="globaAxisLabels">
-            <text x="82%" y="-4%">wind</text>
-            <text x="-8%" y="-4%">latitude</text>
-          </g>
-          <g id="globeLatLabels">
-            <text x="-15" y="5">90°</text>
-            <text x="-15" y="18">60°</text>
-            <text x="-15" y="53">30°</text>
-            <text x="-15" y="103">0°</text>
-            <text x="-15" y="153">30°</text>
-            <text x="-15" y="190">60°</text>
-            <text x="-15" y="204">90°</text>
-          </g>
-          <circle id="globeOutline" cx="100" cy="100" r="100" />
-          <line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
-          <path id="globeGraticule" />
-          <path id="globeArea" />
-        </svg>
       </div>
 
       <div id="labelEditor" class="dialog" style="display: none">
@@ -2651,7 +2653,7 @@
       </div>
 
       <div id="battleScreen" class="dialog stable" style="display: none">
-        <div id="battleBody" class="overflow">
+        <div id="battleBody">
           <template id="battlePhases_field">
             <button data-tip="Skirmish phase. Ranged units excel" data-phase="skirmish" class="icon-button-skirmish"></button>
             <button data-tip="Melee phase. Melee units excel" data-phase="melee" class="icon-button-melee"></button>
@@ -2806,15 +2808,13 @@
       </div>
 
       <div id="regimentSelectorScreen" class="dialog" style="display: none">
-        <div id="regimentSelectorHeader" class="header">
-          <div style="left: 1.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 9.2em" data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment&nbsp;</div>
-          <div style="left: 22.4em" data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total&nbsp;</div>
-          <div style="left: 28em" data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">
-            Distance&nbsp;
-          </div>
+        <div id="regimentSelectorHeader" class="header" style="grid-template-columns: 9em 13em 4em 6em">
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment&nbsp;</div>
+          <div data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total&nbsp;</div>
+          <div data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">Distance&nbsp;</div>
         </div>
-        <div id="regimentSelectorBody"></div>
+        <div id="regimentSelectorBody" class="table"></div>
       </div>
 
       <div id="brushesPanel" class="dialog stable" style="display: none">
@@ -3034,14 +3034,12 @@
       </div>
 
       <div id="biomesEditor" class="dialog stable" style="display: none">
-        <div id="biomesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome&nbsp;</div>
-          <div style="left: 12em" data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability&nbsp;</div>
-          <div style="left: 19em" data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">
-            Cells&nbsp;
-          </div>
-          <div style="left: 25em" data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 30em" data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+        <div id="biomesHeader" class="header" style="grid-template-columns: 13em 7em 5em 5em 7em">
+          <div data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome&nbsp;</div>
+          <div data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability&nbsp;</div>
+          <div data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">Cells&nbsp;</div>
+          <div data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
         </div>
 
         <div id="biomesBody" class="table" data-type="absolute"></div>
@@ -3200,13 +3198,13 @@
       </div>
 
       <div id="provincesEditor" class="dialog stable" style="display: none">
-        <div id="provincesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div>
-          <div style="left: 10.8em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 18.8em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-          <div style="left: 25.3em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 33.9em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 39.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+        <div id="provincesHeader" class="header" style="grid-template-columns: 11em 8em 8em 8em 5em 8em">
+          <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div>
+          <div data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+          <div data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+          <div data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
         </div>
 
         <div id="provincesBodySection" class="table" data-type="absolute"></div>
@@ -3262,11 +3260,9 @@
       </div>
 
       <div id="diplomacyEditor" class="dialog stable" style="display: none">
-        <div id="diplomacyHeader" class="header">
-          <div style="left: 0.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
-          <div style="left: 14.4em" data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">
-            Relations&nbsp;
-          </div>
+        <div id="diplomacyHeader" class="header" style="grid-template-columns: 15em 6em">
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
+          <div data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">Relations&nbsp;</div>
         </div>
 
         <div id="diplomacyBodySection" class="table"></div>
@@ -3408,12 +3404,12 @@
       </div>
 
       <div id="zonesEditor" class="dialog stable" style="display: none">
-        <div id="customHeader" class="header">
-          <div style="left: 1.8em" data-tip="Zone description">Description&nbsp;</div>
-          <div style="left: 13em" data-tip="Zone type">Type&nbsp;</div>
-          <div style="left: 20em" data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
-          <div style="left: 26.1em" data-tip="Zone area" class="hide">Area&nbsp;</div>
-          <div style="left: 31.6em" data-tip="Zone population" class="hide">Population&nbsp;</div>
+        <div id="customHeader" class="header" style="grid-template-columns: 13em 7em 6em 5em 9em">
+          <div data-tip="Zone description">Description&nbsp;</div>
+          <div data-tip="Zone type">Type&nbsp;</div>
+          <div data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
+          <div data-tip="Zone area" class="hide">Area&nbsp;</div>
+          <div data-tip="Zone population" class="hide">Population&nbsp;</div>
         </div>
 
         <div id="zonesBodySection" class="table" data-type="absolute"></div>
@@ -3487,17 +3483,13 @@
       </div>
 
       <div id="religionsEditor" class="dialog stable" style="display: none">
-        <div id="religionsHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
-          <div style="left: 12.8em" data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">
-            Type&nbsp;
-          </div>
-          <div style="left: 18.4em" data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 25.6em" data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
-          <div style="left: 42.2em" data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 47.5em" data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">
-            Believers&nbsp;
-          </div>
+        <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 16em 5em 6em">
+          <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
+          <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
+          <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+          <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
+          <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
         </div>
         <div id="religionsBody" class="table" data-type="absolute"></div>
 
@@ -3817,14 +3809,14 @@
       </div>
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
-        <div id="burgsHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg&nbsp;</div>
-          <div style="left: 8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
-          <div style="left: 14.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 20.2em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>
-          <div style="left: 27em" data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population&nbsp;</div>
-          <div style="left: 33.7em" data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div id="burgsInvertLock" style="left: 38em; color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
+        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
+          <div data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg&nbsp;</div>
+          <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>
+          <div data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population&nbsp;</div>
+          <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div id="burgsInvertLock" style="color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
         </div>
 
         <div id="burgsBody" class="table"></div>
@@ -3858,15 +3850,13 @@
       </div>
 
       <div id="riversOverview" class="dialog stable" style="display: none">
-        <div id="riversHeader" class="header">
-          <div style="left: 1.3em" data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
-          <div style="left: 8.6em" data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 13em" data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">
-            Discharge&nbsp;
-          </div>
-          <div style="left: 19.3em" data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length&nbsp;</div>
-          <div style="left: 24.4em" data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width&nbsp;</div>
-          <div style="left: 30em" data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
+        <div id="riversHeader" class="header" style="grid-template-columns: 9em 4em 6em 6em 5em 9em">
+          <div data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
+          <div data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">Discharge&nbsp;</div>
+          <div data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length&nbsp;</div>
+          <div data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width&nbsp;</div>
+          <div data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
         </div>
 
         <div id="riversBody" class="table"></div>
@@ -3889,38 +3879,27 @@
       </div>
 
       <div id="militaryOverview" class="dialog stable" style="display: none">
-        <div class="overflow">
-          <div id="militaryHeader" class="header">
-            <div data-tip="State name. Click to sort" style="margin-left: 1.8em; width: 5.6em" class="sortable alphabetically" data-sortby="state">
-              State&nbsp;
-            </div>
-            <div
-              data-tip="Total military personnel (considering crew). Click to sort"
-              id="militaryTotal"
-              class="sortable icon-sort-number-down"
-              data-sortby="total"
-            >
-              Total&nbsp;
-            </div>
-            <div data-tip="State population. Click to sort" style="width: 6.5em; margin-left: -1em" class="sortable" data-sortby="population">
-              Population&nbsp;
-            </div>
-            <div
-              data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort"
-              style="width: 3.7em"
-              class="sortable"
-              data-sortby="rate"
-            >
-              Rate&nbsp;
-            </div>
-            <div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
-              War Alert&nbsp;
-            </div>
+        <div id="militaryHeader" class="header">
+          <div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div
+            data-tip="Total military personnel (considering crew). Click to sort"
+            id="militaryTotal"
+            class="sortable icon-sort-number-down"
+            data-sortby="total"
+          >
+            Total&nbsp;
+          </div>
+          <div data-tip="State population. Click to sort" class="sortable" data-sortby="population">Population&nbsp;</div>
+          <div data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort" class="sortable" data-sortby="rate">
+            Rate&nbsp;
+          </div>
+          <div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
+            War Alert&nbsp;
           </div>
-
-          <div id="militaryBody" data-type="absolute"></div>
         </div>
 
+        <div id="militaryBody" class="table" data-type="absolute"></div>
+
         <div id="militaryFooter" class="totalLine">
           <div data-tip="States number" style="margin-left: 4px">States:&nbsp;<span id="militaryFooterStates">0</span></div>
           <div data-tip="Total military forces" style="margin-left: 14px">Total forces:&nbsp;<span id="militaryFooterForcesTotal">0</span></div>
@@ -3941,26 +3920,21 @@
       </div>
 
       <div id="regimentsOverview" class="dialog stable" style="display: none">
-        <div class="overflow">
-          <div id="regimentsHeader" class="header">
-            <div data-tip="State name. Click to sort" style="left: 1.8em; width: 9em" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-            <div data-tip="Regiment emblem and name. Click to sort by name" style="width: 12em" class="sortable alphabetically" data-sortby="name">
-              Name&nbsp;
-            </div>
-            <div
-              data-tip="Total military personnel (not considering crew). Click to sort"
-              style="margin-left: 0.8em"
-              id="regimentsTotal"
-              class="sortable icon-sort-number-down"
-              data-sortby="total"
-            >
-              Total&nbsp;
-            </div>
+        <div id="regimentsHeader" class="header">
+          <div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Regiment emblem and name. Click to sort by name" class="sortable alphabetically" data-sortby="name">Name&nbsp;</div>
+          <div
+            data-tip="Total military personnel (not considering crew). Click to sort"
+            id="regimentsTotal"
+            class="sortable icon-sort-number-down"
+            data-sortby="total"
+          >
+            Total&nbsp;
           </div>
-
-          <div id="regimentsBody" data-type="absolute"></div>
         </div>
 
+        <div id="regimentsBody" class="table" data-type="absolute"></div>
+
         <div id="regimentsBottom">
           <button id="regimentsOverviewRefresh" data-tip="Refresh the overview screen" class="icon-cw"></button>
           <button id="regimentsPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
@@ -3998,10 +3972,10 @@
       </div>
 
       <div id="markersOverview" class="dialog stable" style="display: none">
-        <div id="markersHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div id="markersInverPin" style="left: 14.9em; color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
-          <div id="markersInverLock" style="left: 16.1em; color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
+        <div id="markersHeader" class="header" style="grid-template-columns: 15em 1em 3em">
+          <div data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div id="markersInverPin" style="color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
+          <div id="markersInverLock" style="color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
         </div>
 
         <div id="markersBody" class="table"></div>
@@ -4026,7 +4000,7 @@
           <span id="styleSaverTip" data-tip="Shows whether there is already a preset with this name" class="italic"></span>
         </div>
 
-        <div id="styleSaverBody" style="padding: 2px 0">
+        <div id="styleSaverBody" style="padding: 2px 0; width: 100%">
           <span>Style JSON:</span>
           <textarea
             id="styleSaverJSON"
@@ -4076,7 +4050,9 @@
             <option value="fontURL">Font URL</option>
           </select>
           <input id="addFontNameInput" placeholder="font family" style="width: 15em" />
-          <input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
+          <div>
+            <input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
+          </div>
         </div>
       </div>
 
@@ -4301,11 +4277,12 @@
       </div>
 
       <div id="resampleDialog" style="display: none" class="dialog">
-        <p style="font-weight: bold">
+        <div style="width: 34em; max-width: 80vw; font-weight: bold; padding: 6px">
           This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
           as a .map file first!
-        </p>
-        <div style="display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: repeat(4, 1fr); align-items: center; padding-left: 0.5em">
+        </div>
+
+        <div style="width: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); align-items: center; padding: 0.5em">
           <div>Points number</div>
           <div>
             <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
@@ -4339,7 +4316,8 @@
             <label for="submapMirrorV" class="checkbox-label">vertically</label>
           </div>
         </div>
-        <div id="submapPreview" style="border: 1px solid black; margin: 1em auto; overflow: hidden"></div>
+
+        <div id="submapPreview" style="border: 1px solid #666; margin: 1em auto; overflow: hidden; position: relative"></div>
       </div>
 
       <div id="submapOptionsDialog" style="display: none" class="dialog">
diff --git a/libs/jquery-ui.css b/libs/jquery-ui.css
index a7589d45..94cc4790 100644
--- a/libs/jquery-ui.css
+++ b/libs/jquery-ui.css
@@ -359,7 +359,7 @@ body .ui-dialog {
   padding: 0.5em 1em;
   background: none;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: auto;
 }
 .ui-dialog .ui-dialog-buttonpane {
   text-align: left;
diff --git a/main.js b/main.js
index cd5f0244..b62b6cfd 100644
--- a/main.js
+++ b/main.js
@@ -209,9 +209,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 });
 
 function hideLoading() {
-  d3.select("#loading").transition().duration(4000).style("opacity", 0);
-  d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
-  d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
+  d3.select("#loading").transition().duration(3000).style("opacity", 0);
+  d3.select("#optionsContainer").transition().duration(2000).style("opacity", 1);
+  d3.select("#tooltip").transition().duration(3000).style("opacity", 1);
 }
 
 function showLoading() {
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 0e4f9768..90aa6f33 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -16,7 +16,6 @@ export function open() {
   $("#culturesEditor").dialog({
     title: "Cultures Editor",
     resizable: false,
-    width: fitContent(),
     close: closeCulturesEditor,
     position: {my: "right top", at: "right-10 top+10", of: "svg"}
   });
@@ -25,15 +24,15 @@ export function open() {
 
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
-    <div id="culturesHeader" class="header">
-      <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
-      <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-      <div style="left: 16.2em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
-      <div style="left: 24.5em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
-      <div style="left: 29.8em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
-      <div style="left: 37.2em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-      <div style="left: 42.8em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
-      <div style="left: 50.8em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
+    <div id="culturesHeader" class="header" style="grid-template-columns: 10em 7em 8em 4em 8em 5em 8em 8em">
+      <div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
+      <div data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+      <div data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
+      <div data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
+      <div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+      <div data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
+      <div data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
     </div>
     <div id="culturesBody" class="table" data-type="absolute"></div>
 
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index a5241a33..64244cb0 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -14,7 +14,6 @@ export function open() {
   $("#statesEditor").dialog({
     title: "States Editor",
     resizable: false,
-    width: fitContent(),
     close: closeStatesEditor,
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
@@ -22,17 +21,17 @@ export function open() {
 
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable">
-    <div id="statesHeader" class="header">
-      <div style="left: 1.8em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
-      <div style="left: 10.8em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div style="left: 19.1em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-      <div style="left: 26.1em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
-      <div style="left: 33.4em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
-      <div style="left: 39.6em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
-      <div style="left: 45.9em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
-      <div style="left: 52.2em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
-      <div style="left: 59em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion&nbsp;</div>
-      <div style="left: 65.5em" data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells&nbsp;</div>
+    <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
+      <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
+      <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
+      <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
+      <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
+      <div data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+      <div data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
+      <div data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells&nbsp;</div>
     </div>
 
     <div id="statesBodySection" class="table" data-type="absolute"></div>
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index e7621520..4e05c2c9 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -41,6 +41,7 @@ const heightmaps = [
   {id: "world-from-pacific", name: "World from Pacific"}
 ];
 
+const initialSeed = generateSeed();
 appendStyleSheet();
 insertEditorHtml();
 addListeners();
@@ -107,6 +108,14 @@ function appendStyleSheet() {
       }
     }
 
+    .heightmap-selection_options {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(50%, 200px));
+      grid-row-gap: 6px;
+      justify-items: start;
+      align-items: center;
+    }
+
     .heightmap-selection article {
       padding: 4px;
       border-radius: 8px;
@@ -154,15 +163,49 @@ function appendStyleSheet() {
 }
 
 function insertEditorHtml() {
-  const seed = generateSeed();
+  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
+    <div class="heightmap-selection">
+      <section>
+        <header><h1>Heightmap templates</h1></header>
+        <div class="heightmap-selection_container"></div>
+      </section>
+      <section>
+        <header><h1>Pre-created heightmaps</h1></header>
+        <div class="heightmap-selection_container"></div>
+      </section>
+      <section>
+        <header><h1>Options</h1></header>
+        <div class="heightmap-selection_options">
+          <div>
+            <input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
+            <label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
+          </div>
+          <div>
+            Color scheme
+            <select id="heightmapSelectionColorScheme">
+              <option value="bright" selected>Bright</option>
+              <option value="light">Light</option>
+              <option value="green">Green</option>
+              <option value="monochrome">Monochrome</option>
+            </select>
+          </div>
+          <button data-tip="Open Template Editor" id="heightmapSelectionEditTemplates">Edit Templates</button>
+          <button data-tip="Open Image Converter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
+        </div>
+      </section>
+    </div>
+  </div>`;
 
-  const templatesHtml = templates
+  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
+  const sections = document.getElementsByClassName("heightmap-selection_container");
+
+  sections[0].innerHTML = templates
     .map(({id, name}) => {
-      Math.random = aleaPRNG(seed);
+      Math.random = aleaPRNG(initialSeed);
       const heights = generateHeightmap(id);
       const dataUrl = drawHeights(heights);
 
-      return /* html */ `<article data-id="${id}" data-seed="${seed}">
+      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
         <img src="${dataUrl}" alt="${name}" />
         <div>
           ${name}
@@ -172,35 +215,16 @@ function insertEditorHtml() {
     })
     .join("");
 
-  const heightmapsHtml = heightmaps
+  sections[1].innerHTML = heightmaps
     .map(({id, name}) => {
       drawPrecreatedHeightmap(id);
 
-      return /* html */ `<article data-id="${id}" data-seed="${seed}">
+      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
         <img alt="${name}" />
         <div>${name}</div>
       </article>`;
     })
     .join("");
-
-  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
-    <div class="heightmap-selection">
-      <section>
-        <header><h1>Heightmap templates</h1></header>
-        <div class="heightmap-selection_container">
-          ${templatesHtml}
-        </div>
-      </section>
-      <section>
-        <header><h1>Pre-created heightmaps</h1></header>
-        <div class="heightmap-selection_container">
-          ${heightmapsHtml}
-        </div>
-      </section>
-    </div>
-  </div>`;
-
-  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
 }
 
 function addListeners() {
@@ -209,9 +233,16 @@ function addListeners() {
     if (!article) return;
 
     const id = article.dataset.id;
-    if (event.target.matches("span.icon-cw")) regeneratePreview(article, id);
-    else setSelected(id);
+    if (event.target.matches("span.icon-cw")) {
+      const seed = generateSeed();
+      article.dataset.seed = seed;
+      Math.random = aleaPRNG(seed);
+      drawTemplatePreview(id);
+    } else setSelected(id);
   });
+
+  byId("heightmapSelectionRenderOcean").on("change", redrawAll);
+  byId("heightmapSelectionColorScheme").on("change", redrawAll);
 }
 
 function getSelected() {
@@ -234,11 +265,14 @@ function drawHeights(heights) {
   canvas.height = grid.cellsY;
   const ctx = canvas.getContext("2d");
   const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
-  const scheme = getColorScheme();
-  const waterColor = scheme(1);
+
+  const schemeId = byId("heightmapSelectionColorScheme").value;
+  const scheme = getColorScheme(schemeId);
+  const renderOcean = byId("heightmapSelectionRenderOcean").checked;
+  const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
 
   for (let i = 0; i < heights.length; i++) {
-    const color = heights[i] < 20 ? waterColor : scheme(1 - heights[i] / 100);
+    const color = scheme(1 - getHeight(heights[i]) / 100);
     const {r, g, b} = d3.color(color);
 
     const n = i * 4;
@@ -259,6 +293,13 @@ function generateHeightmap(id) {
   return heights;
 }
 
+function drawTemplatePreview(id) {
+  const heights = generateHeightmap(id);
+  const dataUrl = drawHeights(heights);
+  const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
+  article.querySelector("img").src = dataUrl;
+}
+
 async function drawPrecreatedHeightmap(id) {
   const heights = await HeightmapGenerator.fromPrecreated(id);
   const dataUrl = drawHeights(heights);
@@ -266,12 +307,14 @@ async function drawPrecreatedHeightmap(id) {
   article.querySelector("img").src = dataUrl;
 }
 
-function regeneratePreview(article, id) {
-  const seed = generateSeed();
-  article.dataset.seed = seed;
-  Math.random = aleaPRNG(seed);
+function redrawAll() {
+  const articles = byId("heightmapSelection").querySelectorAll(`article`);
+  for (const article of articles) {
+    const {id, seed} = article.dataset;
+    Math.random = aleaPRNG(seed);
 
-  const heights = generateHeightmap(id);
-  const dataUrl = drawHeights(heights);
-  article.querySelector("img").src = dataUrl;
+    const isTemplate = id in HeightmapTemplates;
+    if (isTemplate) drawTemplatePreview(id);
+    else drawPrecreatedHeightmap(id);
+  }
 }
diff --git a/modules/io/export.js b/modules/io/export.js
index 2fed9553..2389b89e 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -339,7 +339,7 @@ function removeUnusedElements(clone) {
 
 function updateMeshCells(clone) {
   const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
-  const scheme = getColorScheme();
+  const scheme = getColorScheme(terrs.attr("scheme"));
   clone.select("#heights").attr("filter", "url(#blur1)");
   clone
     .select("#heights")
diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 4f148e9b..20e381a6 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -109,7 +109,8 @@ function showElevationProfile(data, routeLen, isRiver) {
   draw();
 
   function downloadCSV() {
-    let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
+    let data =
+      "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
 
     for (let k = 0; k < chartData.points.length; k++) {
       let cell = chartData.cell[k];
@@ -179,9 +180,20 @@ function showElevationProfile(data, routeLen, isRiver) {
       .attr("id", "elevationSVG")
       .attr("class", "epbackground");
     // arrow-head definition
-    chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
+    chart
+      .append("defs")
+      .append("marker")
+      .attr("id", "arrowhead")
+      .attr("orient", "auto")
+      .attr("markerWidth", "2")
+      .attr("markerHeight", "4")
+      .attr("refX", "0.1")
+      .attr("refY", "2")
+      .append("path")
+      .attr("d", "M0,0 V4 L2,2 Z")
+      .attr("fill", "darkgray");
 
-    let colors = getColorScheme();
+    let colors = getColorScheme(terrs.attr("scheme"));
     const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
 
     if (chartData.mah == chartData.mih) {
@@ -258,7 +270,24 @@ function showElevationProfile(data, routeLen, isRiver) {
       const populationDesc = rn(pop * populationRate);
 
       const provinceDesc = province ? ", " + pack.provinces[province].name : "";
-      const dataTip = biomesData.name[chartData.biome[k]] + provinceDesc + ", " + pack.states[state].name + ", " + pack.religions[religion].name + ", " + pack.cultures[culture].name + " (height: " + chartData.height[k] + " " + hu + ", population " + populationDesc + ", cell " + chartData.cell[k] + ")";
+      const dataTip =
+        biomesData.name[chartData.biome[k]] +
+        provinceDesc +
+        ", " +
+        pack.states[state].name +
+        ", " +
+        pack.religions[religion].name +
+        ", " +
+        pack.cultures[culture].name +
+        " (height: " +
+        chartData.height[k] +
+        " " +
+        hu +
+        ", population " +
+        populationDesc +
+        ", cell " +
+        chartData.cell[k] +
+        ")";
 
       g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
     }
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 9ff93af4..4f93cbab 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -157,7 +157,7 @@ function drawHeightmap() {
   const used = new Uint8Array(cells.i.length);
   const paths = new Array(101).fill("");
 
-  const scheme = getColorScheme();
+  const scheme = getColorScheme(terrs.attr("scheme"));
   const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
   const skip = +terrs.attr("skip") + 1;
   const simplification = +terrs.attr("relax");
@@ -234,8 +234,7 @@ function drawHeightmap() {
   TIME && console.timeEnd("drawHeightmap");
 }
 
-function getColorScheme() {
-  const scheme = terrs.attr("scheme");
+function getColorScheme(scheme) {
   if (scheme === "bright") return d3.scaleSequential(d3.interpolateSpectral);
   if (scheme === "light") return d3.scaleSequential(d3.interpolateRdYlGn);
   if (scheme === "green") return d3.scaleSequential(d3.interpolateGreens);
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 24cf9367..35a23ed4 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -47,6 +47,9 @@ function overviewMilitary() {
   // update military types in header and tooltips
   function updateHeaders() {
     const header = document.getElementById("militaryHeader");
+    const units = options.military.length;
+    header.style.gridTemplateColumns = `8em repeat(${units}, 5.2em) 4em 7em 5em 6em`;
+
     header.querySelectorAll(".removable").forEach(el => el.remove());
     const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html);
     for (const u of options.military) {
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 62000acf..4362fb25 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -42,7 +42,7 @@ function editNotes(id, name) {
 
   $("#notesEditor").dialog({
     title: "Notes Editor",
-    width: "70vw",
+    width: "minmax(80vw, 540px)",
     height: window.innerHeight * 0.75,
     position: {my: "center", at: "center", of: "svg"},
     close: removeEditor
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index d243b34d..49fd7b8b 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -30,6 +30,9 @@ function overviewRegiments(state) {
   // update military types in header and tooltips
   function updateHeaders() {
     const header = document.getElementById("regimentsHeader");
+    const units = options.military.length;
+    header.style.gridTemplateColumns = `9em 13em repeat(${units}, 5.2em) 7em`;
+
     header.querySelectorAll(".removable").forEach(el => el.remove());
     const insert = html => document.getElementById("regimentsTotal").insertAdjacentHTML("beforebegin", html);
     for (const u of options.military) {
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 0c505895..737560c3 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -2,7 +2,6 @@
 // UI elements for submap generation
 
 window.UISubmap = (function () {
-  const byId = document.getElementById.bind(document);
   byId("submapPointsInput").addEventListener("input", function () {
     const output = byId("submapPointsOutputFormatted");
     const cells = cellsDensityMap[+this.value] || 1000;
@@ -13,7 +12,7 @@ window.UISubmap = (function () {
 
   byId("submapScaleInput").addEventListener("input", function (event) {
     const exp = Math.pow(1.1, +event.target.value);
-    byId("submapScaleOutput").value = rn(exp,2);
+    byId("submapScaleOutput").value = rn(exp, 2);
   });
 
   byId("submapAngleInput").addEventListener("input", function (event) {
@@ -28,7 +27,6 @@ window.UISubmap = (function () {
   function openSubmapMenu() {
     $("#submapOptionsDialog").dialog({
       title: "Create a submap",
-      width: "30em",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
@@ -49,8 +47,8 @@ window.UISubmap = (function () {
     shiftY: +byId("submapShiftY").value,
     ratio: +byId("submapScaleInput").value,
     mirrorH: byId("submapMirrorH").checked,
-    mirrorV: byId("submapMirrorV").checked,
-  })
+    mirrorV: byId("submapMirrorV").checked
+  });
 
   async function openResampleMenu() {
     resetZoom(0);
@@ -64,14 +62,14 @@ window.UISubmap = (function () {
     $shiftX.value = 0;
     $shiftY.value = 0;
 
-    const previewScale = 400 / graphWidth;
-    const [w, h] = [400, graphHeight * previewScale];
-    $previewBox.style.width = w + 'px';
-    $previewBox.style.height = h + 'px';
-    $previewBox.style.position = 'relative';
+    const w = Math.min(400, window.innerWidth * 0.5);
+    const previewScale = w / graphWidth;
+    const h = graphHeight * previewScale;
+    $previewBox.style.width = w + "px";
+    $previewBox.style.height = h + "px";
 
     // handle mouse input
-    const dispatchInput = e => e.dispatchEvent(new Event('input', {bubbles:true}));
+    const dispatchInput = e => e.dispatchEvent(new Event("input", {bubbles: true}));
 
     // mouse wheel
     $previewBox.onwheel = e => {
@@ -80,14 +78,16 @@ window.UISubmap = (function () {
     };
 
     // mouse drag
-    let mouseIsDown = false, mouseX = 0, mouseY = 0;
+    let mouseIsDown = false,
+      mouseX = 0,
+      mouseY = 0;
     $previewBox.onmousedown = e => {
       mouseIsDown = true;
       mouseX = $shiftX.value - e.clientX / previewScale;
       mouseY = $shiftY.value - e.clientY / previewScale;
-    }
-    $previewBox.onmouseup = _ => mouseIsDown = false;
-    $previewBox.onmouseleave = _ => mouseIsDown = false;
+    };
+    $previewBox.onmouseup = _ => (mouseIsDown = false);
+    $previewBox.onmouseleave = _ => (mouseIsDown = false);
     $previewBox.onmousemove = e => {
       if (!mouseIsDown) return;
       e.preventDefault();
@@ -99,7 +99,6 @@ window.UISubmap = (function () {
 
     $("#resampleDialog").dialog({
       title: "Transform map",
-      width: "430px",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
@@ -114,7 +113,7 @@ window.UISubmap = (function () {
     });
 
     // use double resolution for PNG to get sharper image
-    const $preview = await loadPreview($previewBox, w*2, h*2);
+    const $preview = await loadPreview($previewBox, w * 2, h * 2);
     // could be done with SVG. Faster to load, slower to use.
     // const $preview = await loadPreviewSVG($previewBox, w, h);
     $preview.style.position = "absolute";
@@ -122,22 +121,22 @@ window.UISubmap = (function () {
     $preview.style.height = h + "px";
 
     byId("resampleDialog").oninput = event => {
-      const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput();
-      const scale = Math.pow(1.1,ratio);
+      const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
+      const scale = Math.pow(1.1, ratio);
       const transformStyle = `
-        translate(${shiftX*previewScale}px, ${shiftY*previewScale}px)
-        scale(${mirrorH?-scale:scale}, ${mirrorV?-scale:scale})
+        translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
+        scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
         rotate(${angle}rad)
       `;
 
       $preview.style.transform = transformStyle;
-      $preview.style['transform-origin'] = 'center';
+      $preview.style["transform-origin"] = "center";
       event.stopPropagation();
-    }
+    };
   }
 
   async function loadPreview($container, w, h) {
-    const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true });
+    const url = await getMapURL("png", {globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true});
 
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -148,16 +147,16 @@ window.UISubmap = (function () {
     img.onload = function () {
       ctx.drawImage(img, 0, 0, w, h);
     };
-    $container.textContent = '';
+    $container.textContent = "";
     $container.appendChild(canvas);
     return canvas;
   }
 
   // currently unused alternative to PNG version
   async function loadPreviewSVG($container, w, h) {
-    $container.innerHTML = /*html*/`
+    $container.innerHTML = /*html*/ `
       <svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
-        <rect width="100%" height="100%" fill="${byId('styleOceanFill').value}" />
+        <rect width="100%" height="100%" fill="${byId("styleOceanFill").value}" />
         <rect fill="url(#oceanic)" width="100%" height="100%" />
         <use href="#map"></use>
       </svg>
@@ -171,12 +170,12 @@ window.UISubmap = (function () {
     const cellNumId = +byId("submapPointsInput").value;
     if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
 
-    const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput()
+    const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
 
     const [cx, cy] = [graphWidth / 2, graphHeight / 2];
     const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
     const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
-    const scale = r => (x, y) => [(x-cx) * r + cx, (y-cy) * r + cy];
+    const scale = r => (x, y) => [(x - cx) * r + cx, (y - cy) * r + cy];
     const flipH = (x, y) => [-x + 2 * cx, y];
     const flipV = (x, y) => [x, -y + 2 * cy];
     const app = (f, g) => (x, y) => f(...g(x, y));
@@ -186,7 +185,7 @@ window.UISubmap = (function () {
     let inverse = id;
 
     if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
-    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
+    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1, ratio)), projection), app(inverse, scale(Math.pow(1.1, -ratio)))];
     if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
     if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
     if (shiftX || shiftY) {
@@ -230,7 +229,7 @@ window.UISubmap = (function () {
       smoothHeightMap: scale > 2,
       inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
       projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
-      scale: origScale,
+      scale: origScale
     };
 
     // converting map position on the planet
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index bfd28964..6fbc117a 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -3,7 +3,7 @@ function editWorld() {
   $("#worldConfigurator").dialog({
     title: "Configure World",
     resizable: false,
-    width: "42em",
+    width: "minmax(40em, 85vw)",
     buttons: {
       "Whole World": () => applyWorldPreset(100, 50),
       Northern: () => applyWorldPreset(33, 25),
diff --git a/utils/graphUtils.js b/utils/graphUtils.js
index 3814241f..3755f7c1 100644
--- a/utils/graphUtils.js
+++ b/utils/graphUtils.js
@@ -261,7 +261,7 @@ function drawCellsValue(data) {
 function drawPolygons(data) {
   const max = d3.max(data),
     min = d3.min(data),
-    scheme = getColorScheme();
+    scheme = getColorScheme(terrs.attr("scheme"));
   data = data.map(d => 1 - normalize(d, min, max));
 
   debug.selectAll("polygon").remove();

From f3a755976a3198fd0cfb46443349713568632ce4 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 28 May 2022 21:22:28 +0300
Subject: [PATCH 08/18] heightmap select - open edit tools

---
 modules/dynamic/heightmap-selection.js |  51 +++++++++----
 modules/ui/heightmap-editor.js         | 100 ++++++++++++++-----------
 2 files changed, 93 insertions(+), 58 deletions(-)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 4e05c2c9..7b7a0412 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -83,7 +83,7 @@ export function open() {
 
 function appendStyleSheet() {
   const styles = /* css */ `
-    .heightmap-selection {
+    div.dialog > div.heightmap-selection {
       width: 70vw;
       height: 70vh;
     }
@@ -110,9 +110,13 @@ function appendStyleSheet() {
 
     .heightmap-selection_options {
       display: grid;
-      grid-template-columns: repeat(2, minmax(50%, 200px));
-      grid-row-gap: 6px;
+      grid-template-columns: 2fr 1fr;
       justify-items: start;
+    }
+
+    .heightmap-selection_options > div:first-child {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
       align-items: center;
     }
 
@@ -177,20 +181,25 @@ function insertEditorHtml() {
         <header><h1>Options</h1></header>
         <div class="heightmap-selection_options">
           <div>
-            <input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
-            <label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
+            <div>
+              <input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
+              <label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
+            </div>
+            <div>
+              Color scheme
+              <select id="heightmapSelectionColorScheme">
+                <option value="bright" selected>Bright</option>
+                <option value="light">Light</option>
+                <option value="green">Green</option>
+                <option value="monochrome">Monochrome</option>
+              </select>
+            </div>
           </div>
           <div>
-            Color scheme
-            <select id="heightmapSelectionColorScheme">
-              <option value="bright" selected>Bright</option>
-              <option value="light">Light</option>
-              <option value="green">Green</option>
-              <option value="monochrome">Monochrome</option>
-            </select>
+            <button data-tip="Rerender all preview images" id="heightmapSelectionRedrawPreview">Redraw preview</button>
+            <button data-tip="Open Template Editor" data-tool="templateEditor" id="heightmapSelectionEditTemplates">Edit Templates</button>
+            <button data-tip="Open Image Converter" data-tool="imageConverter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
           </div>
-          <button data-tip="Open Template Editor" id="heightmapSelectionEditTemplates">Edit Templates</button>
-          <button data-tip="Open Image Converter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
         </div>
       </section>
     </div>
@@ -243,6 +252,9 @@ function addListeners() {
 
   byId("heightmapSelectionRenderOcean").on("change", redrawAll);
   byId("heightmapSelectionColorScheme").on("change", redrawAll);
+  byId("heightmapSelectionRedrawPreview").on("click", redrawAll);
+  byId("heightmapSelectionEditTemplates").on("click", confirmHeightmapEdit);
+  byId("heightmapSelectionImportHeightmap").on("click", confirmHeightmapEdit);
 }
 
 function getSelected() {
@@ -318,3 +330,14 @@ function redrawAll() {
     else drawPrecreatedHeightmap(id);
   }
 }
+
+function confirmHeightmapEdit() {
+  const tool = this.dataset.tool;
+
+  confirmationDialog({
+    title: this.dataset.tip,
+    message: "Opening the tool will erase the current map. Are you sure you want to proceed?",
+    confirm: "Continue",
+    onConfirm: () => editHeightmap({mode: "erase", tool})
+  });
+}
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index f30004c1..69d98184 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1,35 +1,13 @@
 "use strict";
 
-function editHeightmap() {
-  void (function selectEditMode() {
-    alertMessage.innerHTML = /* html */ `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>
-      <p>You can <i>keep</i> the data, but you won't be able to change the coastline.</p>
-      <p>
-        Try <i>risk</i> mode to change the coastline and keep the data. The data will be restored as much as possible, but it can cause unpredictable errors.
-      </p>
-      <p>Please <span class="pseudoLink" onclick="dowloadMap();" editHeightmap();>save the map</span> before editing the heightmap!</p>
-      <p style="margin-bottom: 0">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",
-      buttons: {
-        Erase: () => enterHeightmapEditMode("erase"),
-        Keep: () => enterHeightmapEditMode("keep"),
-        Risk: () => enterHeightmapEditMode("risk"),
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  })();
-
+function editHeightmap(options) {
+  const {mode, tool} = options || {};
   restartHistory();
   viewbox.insert("g", "#terrs").attr("id", "heights");
 
+  if (!mode) showModeDialog();
+  else enterHeightmapEditMode(mode);
+
   if (modules.editHeightmap) return;
   modules.editHeightmap = true;
 
@@ -44,35 +22,66 @@ function editHeightmap() {
   byId("templateUndo").on("click", () => restoreHistory(edits.n - 1));
   byId("templateRedo").on("click", () => restoreHistory(edits.n + 1));
 
-  function enterHeightmapEditMode(type) {
+  function showModeDialog() {
+    alertMessage.innerHTML = /* html */ `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>
+    <p>You can <i>keep</i> the data, but you won't be able to change the coastline.</p>
+    <p>Try <i>risk</i> mode to change the coastline and keep the data. The data will be restored as much as possible, but it can cause unpredictable errors.</p>
+    <p>Please <span class="pseudoLink" onclick="dowloadMap();">save the map</span> before editing the heightmap!</p>
+    <p style="margin-bottom: 0">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",
+      buttons: {
+        Erase: () => enterHeightmapEditMode("erase"),
+        Keep: () => enterHeightmapEditMode("keep"),
+        Risk: () => enterHeightmapEditMode("risk"),
+        Cancel: function () {
+          $(this).dialog("close");
+        }
+      }
+    });
+  }
+
+  function enterHeightmapEditMode(mode) {
     editHeightmap.layers = Array.from(mapLayers.querySelectorAll("li:not(.buttonoff)")).map(node => node.id); // store layers preset
     editHeightmap.layers.forEach(l => byId(l).click()); // turn off all layers
 
     customization = 1;
     closeDialogs();
     tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
-    customizationMenu.style.display = "block";
-    toolsContent.style.display = "none";
-    heightmapEditMode.innerHTML = type;
 
-    if (type === "erase") {
+    byId("options")
+      .querySelectorAll(".tabcontent")
+      .forEach(tabcontent => {
+        tabcontent.style.display = "none";
+      });
+    byId("options").querySelector(".tab > .active").classList.remove("active");
+    byId("customizationMenu").style.display = "block";
+    byId("toolsTab").classList.add("active");
+    heightmapEditMode.innerHTML = mode;
+
+    if (mode === "erase") {
       undraw();
       changeOnlyLand.checked = false;
-    } else if (type === "keep") {
+    } else if (mode === "keep") {
       viewbox.selectAll("#landmass, #lakes").style("display", "none");
       changeOnlyLand.checked = true;
-    } else if (type === "risk") {
+    } else if (mode === "risk") {
       defs.selectAll("#land, #water").selectAll("path").remove();
       viewbox.selectAll("#coastline path, #lakes path, #oceanLayers path").remove();
       changeOnlyLand.checked = false;
     }
 
     // show convert and template buttons for Erase mode only
-    applyTemplate.style.display = type === "erase" ? "inline-block" : "none";
-    convertImage.style.display = type === "erase" ? "inline-block" : "none";
+    applyTemplate.style.display = mode === "erase" ? "inline-block" : "none";
+    convertImage.style.display = mode === "erase" ? "inline-block" : "none";
 
     // hide erosion checkbox if mode is Keep
-    allowErosionBox.style.display = type === "keep" ? "none" : "inline-block";
+    allowErosionBox.style.display = mode === "keep" ? "none" : "inline-block";
 
     // show finalize button
     if (!sessionStorage.getItem("noExitButtonAnimation")) {
@@ -95,27 +104,30 @@ function editHeightmap() {
         .style("transform", "scale(1)");
     } else exitCustomization.style.display = "block";
 
-    openBrushesPanel();
     turnButtonOn("toggleHeight");
     layersPreset.value = "heightmap";
     layersPreset.disabled = true;
     mockHeightmap();
     viewbox.on("touchmove mousemove", moveCursor);
+
+    if (tool === "templateEditor") openTemplateEditor();
+    else if (tool === "imageConverter") openImageConverter();
+    else openBrushesPanel();
   }
 
   function moveCursor() {
-    const p = d3.mouse(this),
-      cell = findGridCell(p[0], p[1]);
-    heightmapInfoX.innerHTML = rn(p[0]);
-    heightmapInfoY.innerHTML = rn(p[1]);
+    const [x, y] = d3.mouse(this);
+    const cell = findGridCell(x, y);
+    heightmapInfoX.innerHTML = rn(x);
+    heightmapInfoY.innerHTML = rn(y);
     heightmapInfoCell.innerHTML = cell;
-    heightmapInfoHeight.innerHTML = /* html */ `${grid.cells.h[cell]} (${getHeight(grid.cells.h[cell])})`;
+    heightmapInfoHeight.innerHTML = `${grid.cells.h[cell]} (${getHeight(grid.cells.h[cell])})`;
     if (tooltip.dataset.main) showMainTip();
 
     // move radius circle if drag mode is active
     const pressed = byId("brushesButtons").querySelector("button.pressed");
     if (!pressed) return;
-    moveCircle(p[0], p[1], brushRadius.valueAsNumber, "#333");
+    moveCircle(x, y, brushRadius.valueAsNumber, "#333");
   }
 
   // get user-friendly (real-world) height value from map data

From c2640bcada12f596f53aa46a615d3d5c9bb2a505 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 28 May 2022 22:27:29 +0300
Subject: [PATCH 09/18] tooltip - get shortcut from its own attribute

---
 index.css                                  |  14 ++
 index.html                                 | 179 ++++++++++++---------
 main.js                                    |   3 +
 modules/dynamic/editors/cultures-editor.js |   2 +-
 modules/dynamic/editors/states-editor.js   |   2 +-
 modules/ui/general.js                      |  29 ++--
 modules/ui/world-configurator.js           |  18 ++-
 7 files changed, 155 insertions(+), 92 deletions(-)

diff --git a/index.css b/index.css
index 419bf650..4d1a1f91 100644
--- a/index.css
+++ b/index.css
@@ -347,6 +347,20 @@ text.drag {
   user-select: none;
 }
 
+#optionsTrigger {
+  padding: 0.6em 0.45em;
+}
+
+@media (max-width: 600px) {
+  #optionsTrigger {
+    font-size: 2em;
+    padding: 0;
+    width: 1.3em;
+    height: 1.6em;
+    border: solid 1px #5e4fa2;
+  }
+}
+
 #options {
   position: absolute;
   font-family: Consolas, monospace;
diff --git a/index.html b/index.html
index a895ac77..d027e45c 100644
--- a/index.html
+++ b/index.html
@@ -288,17 +288,18 @@
         <button
           id="optionsTrigger"
           data-t="tipOptionsTrigger"
-          data-tip="Click to show the Menu. Shortcut: Tab"
+          data-tip="Click to show the Menu"
+          data-shortcut="Tab"
           class="options glow"
           onclick="showOptions(event)"
-          style="padding: 0.6em 0.45em"
         >
           ►
         </button>
         <button
           id="regenerate"
           data-t="tipRegenerate"
-          data-tip="Click to generate a new map. Shortcut: F2"
+          data-tip="Click to generate a new map"
+          data-shortcut="F2"
           onclick="regeneratePrompt()"
           class="options"
           style="display: none"
@@ -311,7 +312,14 @@
         <div class="drag-trigger" data-t="optionsDragTrigger" data-tip="Drag to move the Menu"></div>
 
         <div class="tab">
-          <button id="optionsHide" data-t="optionsHide" data-tip="Click to hide the Menu. Shortcut: Tab or Esc" class="options" onclick="hideOptions(event)">
+          <button
+            id="optionsHide"
+            data-t="optionsHide"
+            data-tip="Click to hide the Menu"
+            data-shortcut="Tab or Esc"
+            class="options"
+            onclick="hideOptions(event)"
+          >
             ◄
           </button>
           <button id="layersTab" data-t="layersTab" data-tip="Click to change map layers" class="options active"><t data-t="layers">Layers</t></button>
@@ -358,7 +366,8 @@
           <ul data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style" id="mapLayers">
             <li
               id="toggleTexture"
-              data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: X"
+              data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="X"
               class="buttonoff"
               onclick="toggleTexture(event)"
             >
@@ -366,7 +375,8 @@
             </li>
             <li
               id="toggleHeight"
-              data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: H"
+              data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="H"
               class="buttonoff"
               onclick="toggleHeight(event)"
             >
@@ -374,7 +384,8 @@
             </li>
             <li
               id="toggleBiomes"
-              data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: B"
+              data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="B"
               class="buttonoff"
               onclick="toggleBiomes(event)"
             >
@@ -382,7 +393,8 @@
             </li>
             <li
               id="toggleCells"
-              data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: E"
+              data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="E"
               class="buttonoff"
               onclick="toggleCells(event)"
             >
@@ -390,7 +402,8 @@
             </li>
             <li
               id="toggleGrid"
-              data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type. Shortcut: G"
+              data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
+              data-shortcut="G"
               class="buttonoff"
               onclick="toggleGrid(event)"
             >
@@ -398,7 +411,8 @@
             </li>
             <li
               id="toggleCoordinates"
-              data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: O"
+              data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="O"
               class="buttonoff"
               onclick="toggleCoordinates(event)"
             >
@@ -406,7 +420,8 @@
             </li>
             <li
               id="toggleCompass"
-              data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: W"
+              data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="W"
               class="buttonoff"
               onclick="toggleCompass(event)"
             >
@@ -414,14 +429,16 @@
             </li>
             <li
               id="toggleRivers"
-              data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: V"
+              data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="V"
               onclick="toggleRivers(event)"
             >
               Ri<u>v</u>ers
             </li>
             <li
               id="toggleRelief"
-              data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: F"
+              data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="F"
               class="buttonoff"
               onclick="toggleRelief(event)"
             >
@@ -429,7 +446,8 @@
             </li>
             <li
               id="toggleReligions"
-              data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: R"
+              data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="R"
               class="buttonoff"
               onclick="toggleReligions(event)"
             >
@@ -437,7 +455,8 @@
             </li>
             <li
               id="toggleCultures"
-              data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: C"
+              data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="C"
               class="buttonoff"
               onclick="toggleCultures(event)"
             >
@@ -445,14 +464,16 @@
             </li>
             <li
               id="toggleStates"
-              data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: S"
+              data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="S"
               onclick="toggleStates(event)"
             >
               <u>S</u>tates
             </li>
             <li
               id="toggleProvinces"
-              data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P"
+              data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="P"
               class="buttonoff"
               onclick="toggleProvinces(event)"
             >
@@ -460,7 +481,8 @@
             </li>
             <li
               id="toggleZones"
-              data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Z"
+              data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="Z"
               class="buttonoff"
               onclick="toggleZones(event)"
             >
@@ -468,21 +490,24 @@
             </li>
             <li
               id="toggleBorders"
-              data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: D"
+              data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="D"
               onclick="toggleBorders(event)"
             >
               Bor<u>d</u>ers
             </li>
             <li
               id="toggleRoutes"
-              data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: U"
+              data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="U"
               onclick="toggleRoutes(event)"
             >
               Ro<u>u</u>tes
             </li>
             <li
               id="toggleTemp"
-              data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: T"
+              data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="T"
               class="buttonoff"
               onclick="toggleTemp(event)"
             >
@@ -490,7 +515,8 @@
             </li>
             <li
               id="togglePopulation"
-              data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N"
+              data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="N"
               class="buttonoff"
               onclick="togglePopulation(event)"
             >
@@ -498,7 +524,8 @@
             </li>
             <li
               id="toggleIce"
-              data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: J"
+              data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="J"
               class="buttonoff"
               onclick="toggleIce(event)"
             >
@@ -506,7 +533,8 @@
             </li>
             <li
               id="togglePrec"
-              data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A"
+              data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="A"
               class="buttonoff"
               onclick="togglePrec(event)"
             >
@@ -514,7 +542,8 @@
             </li>
             <li
               id="toggleEmblems"
-              data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Y"
+              data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="Y"
               class="buttonoff"
               onclick="toggleEmblems(event)"
             >
@@ -522,21 +551,24 @@
             </li>
             <li
               id="toggleLabels"
-              data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L"
+              data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="L"
               onclick="toggleLabels(event)"
             >
               <u>L</u>abels
             </li>
             <li
               id="toggleIcons"
-              data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I"
+              data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="I"
               onclick="toggleIcons(event)"
             >
               <u>I</u>cons
             </li>
             <li
               id="toggleMilitary"
-              data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M"
+              data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="M"
               class="buttonoff"
               onclick="toggleMilitary(event)"
             >
@@ -544,7 +576,8 @@
             </li>
             <li
               id="toggleMarkers"
-              data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: K"
+              data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="K"
               class="buttonoff"
               onclick="toggleMarkers(event)"
             >
@@ -552,7 +585,8 @@
             </li>
             <li
               id="toggleRulers"
-              data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style. Shortcut: = (equal)"
+              data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
+              data-shortcut="= (equal sign)"
               class="buttonoff"
               onclick="toggleRulers(event)"
             >
@@ -560,7 +594,8 @@
             </li>
             <li
               id="toggleScaleBar"
-              data-tip="Scale Bar: click to toggle. Ctrl + click to edit style. Shortcut: / (slash)"
+              data-tip="Scale Bar: click to toggle. Ctrl + click to edit style"
+              data-shortcut="/ (slash sign)"
               onclick="toggleScaleBar(event)"
               class="solid"
             >
@@ -1676,27 +1711,27 @@
         <div id="toolsContent" class="tabcontent">
           <p>Click to configure:</p>
           <div>
-            <button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu. Shortcut: Shift + H">Heightmap</button>
-            <button id="editBiomesButton" data-tip="Click to open Biomes Editor. Shortcut: Shift + B">Biomes</button>
-            <button id="editStatesButton" data-tip="Click to open States Editor. Shortcut: Shift + S">States</button>
-            <button id="editProvincesButton" data-tip="Click to open Provinces Editor. Shortcut: Shift + P">Provinces</button>
-            <button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor. Shortcut: Shift + D">Diplomacy</button>
-            <button id="editCulturesButton" data-tip="Click to open Cultures Editor. Shortcut: Shift + C">Cultures</button>
-            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor. Shortcut: Shift + N">Namesbase</button>
-            <button id="editZonesButton" data-tip="Click to open Zones Editor. Shortcut: Shift + Z">Zones</button>
-            <button id="editReligions" data-tip="Click to open Religions Editor. Shortcut: Shift + R">Religions</button>
-            <button id="editEmblemButton" data-tip="Click to open Emblem Editor. Shortcut: Shift + Y">Emblems</button>
-            <button id="editUnitsButton" data-tip="Click to open Units Editor. Shortcut: Shift + Q">Units</button>
-            <button id="editNotesButton" data-tip="Click to open Notes Editor. Shortcut: Shift + O">Notes</button>
+            <button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu" data-shortcut="Shift + H">Heightmap</button>
+            <button id="editBiomesButton" data-tip="Click to open Biomes Editor" data-shortcut="Shift + B">Biomes</button>
+            <button id="editStatesButton" data-tip="Click to open States Editor" data-shortcut="Shift + S">States</button>
+            <button id="editProvincesButton" data-tip="Click to open Provinces Editor" data-shortcut="Shift + P">Provinces</button>
+            <button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor" data-shortcut="Shift + D">Diplomacy</button>
+            <button id="editCulturesButton" data-tip="Click to open Cultures Editor" data-shortcut="Shift + C">Cultures</button>
+            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">Namesbase</button>
+            <button id="editZonesButton" data-tip="Click to open Zones Editor" data-shortcut="Shift + Z">Zones</button>
+            <button id="editReligions" data-tip="Click to open Religions Editor" data-shortcut="Shift + R">Religions</button>
+            <button id="editEmblemButton" data-tip="Click to open Emblem Editor" data-shortcut="Shift + Y">Emblems</button>
+            <button id="editUnitsButton" data-tip="Click to open Units Editor" data-shortcut="Shift + Q">Units</button>
+            <button id="editNotesButton" data-tip="Click to open Notes Editor" data-shortcut="Shift + O">Notes</button>
           </div>
 
           <p>Click to overview:</p>
           <div>
-            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
-            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button>
-            <button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview. Shortcut: Shift + M">Military</button>
-            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview. Shortcut: Shift + K">Markers</button>
-            <button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
+            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview" data-shortcut="Shift + T">Burgs</button>
+            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview" data-shortcut="Shift + V">Rivers</button>
+            <button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview" data-shortcut="Shift + M">Military</button>
+            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">Markers</button>
+            <button id="overviewCellsButton" data-tip="Click to open Cell details view" data-shortcut="Shift + E">Cells</button>
           </div>
 
           <p>Click to regenerate:</p>
@@ -1727,11 +1762,11 @@
 
           <p>Click to add:</p>
           <div id="addFeature">
-            <button id="addBurgTool" data-tip="Click on map to place a burg. Hold <kbd>Shift</kbd> to add multiple. Shortcut: Shift + 1">Burg</button>
-            <button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple. Shortcut: Shift + 2">Label</button>
-            <button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple. Shortcut: Shift + 3">River</button>
-            <button id="addRoute" data-tip="Click on map to place a route. Shortcut: Shift + 4">Route</button>
-            <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple. Shortcut: Shift + 5">Marker</button>
+            <button id="addBurgTool" data-tip="Click on map to place a burg. Hold Shift to add multiple" data-shortcut="Shift + 1">Burg</button>
+            <button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple" data-shortcut="Shift + 2">Label</button>
+            <button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple" data-shortcut="Shift + 3">River</button>
+            <button id="addRoute" data-tip="Click on map to place a route" data-shortcut="Shift + 4">Route</button>
+            <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple" data-shortcut="Shift + 5">Marker</button>
           </div>
 
           <p>Click to create a new map:</p>
@@ -1879,11 +1914,11 @@
         </div>
 
         <div id="sticked">
-          <button id="newMapButton" data-tip="Generate a new map based on options. Shortcut: F2">New Map</button>
+          <button id="newMapButton" data-tip="Generate a new map based on options" data-shortcut="F2">New Map</button>
           <button id="exportButton" data-tip="Select format to download image or export map data">Export</button>
           <button id="saveButton" data-tip="Save fully-functional map in .map format">Save</button>
           <button id="loadButton" data-tip="Load fully-functional map in .map format">Load</button>
-          <button id="zoomReset" data-tip="Reset map zoom. Shortcut: 0">Reset Zoom</button>
+          <button id="zoomReset" data-tip="Reset map zoom" data-shortcut="0 (zero)">Reset Zoom</button>
         </div>
       </div>
     </div>
@@ -2039,7 +2074,7 @@
 
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
-        <button id="labelRemoveSingle" data-tip="Remove the label. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="labelRemoveSingle" data-tip="Remove the label" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="riverEditor" class="dialog" style="display: none">
@@ -2098,7 +2133,7 @@
           <button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
           <button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
           <button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
-          <button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="riverRemove" data-tip="Remove river" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2219,7 +2254,7 @@
         <button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button>
         <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
         <button id="routeNew" data-tip="Create new route clicking on map" class="icon-map-pin"></button>
-        <button id="routeRemove" data-tip="Remove route. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="routeRemove" data-tip="Remove route" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="iceEditor" class="dialog" style="display: none">
@@ -2227,7 +2262,7 @@
         <button id="iceRandomize" data-tip="Randomize Iceberg shape" class="icon-shuffle"></button>
         <input id="iceSize" data-tip="Change Iceberg size" type="range" min=".05" max="1" step=".01" />
         <button id="iceNew" data-tip="Add an Iceberg (click on map)" class="icon-plus"></button>
-        <button id="iceRemove" data-tip="Remove the element. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="iceRemove" data-tip="Remove the element" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="coastlineEditor" class="dialog" style="display: none">
@@ -2414,7 +2449,7 @@
           <button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button>
           <button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button>
           <button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
-          <button id="reliefRemove" data-tip="Remove selected relief icon or icon type. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="reliefRemove" data-tip="Remove selected relief icon or icon type" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2560,7 +2595,7 @@
           <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
           <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
           <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
-          <button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="burgRemove" data-tip="Remove non-capital burg" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2619,7 +2654,7 @@
           <button id="markerNotes" data-tip="Edit place legend (notes)" class="icon-edit"></button>
           <button id="markerLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
           <button id="markerAdd" data-tip="Add additional marker of that type" class="icon-plus"></button>
-          <button id="markerRemove" data-tip="Remove the marker. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="markerRemove" data-tip="Remove the marker" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2648,7 +2683,7 @@
           <button id="regimentAttach" data-tip="Attach regiment to another one (include this regiment to another one)" class="icon-attach"></button>
           <button id="regimentRegenerateLegend" data-tip="Regenerate legend for this regiment" class="icon-retweet"></button>
           <button id="regimentLegend" data-tip="Edit free text notes (legend) for this regiment" class="icon-edit"></button>
-          <button id="regimentRemove" data-tip="Remove regiment. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="regimentRemove" data-tip="Remove regiment" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2863,7 +2898,7 @@
         </div>
 
         <div id="brushesSliders" style="display: none">
-          <div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px">
+          <div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
             <div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
             <input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min="1" max="99" value="25" />
             <input
@@ -3058,7 +3093,7 @@
           <button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
           <button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button>
           <div id="biomesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush radius:
               <input
                 id="biomesManuallyBrush"
@@ -3226,7 +3261,7 @@
 
           <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
           <div id="provincesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush size:
               <input
                 id="provincesManuallyBrush"
@@ -3429,7 +3464,7 @@
 
           <button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
           <div id="zonesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush:
               <input
                 id="zonesBrush"
@@ -3451,7 +3486,7 @@
             ><br />
             <button id="zonesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
             <button id="zonesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-            <button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging. Shortcut: ctrl" class="icon-eraser"></button>
+            <button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging" data-shortcut="Ctrl" class="icon-eraser"></button>
           </div>
 
           <button id="zonesAdd" data-tip="Add new zone layer" class="icon-plus"></button>
@@ -3512,7 +3547,7 @@
 
           <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
           <div id="religionsManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush size:
               <input
                 id="religionsManuallyBrush"
@@ -4212,9 +4247,9 @@
       <div id="saveMapData" style="display: none" class="dialog">
         <div style="margin-top: 0.3em">
           <strong>Save map to</strong>
-          <button onclick="dowloadMap()" data-tip="Download .map file to your local disk. Shortcut: Ctrl + S">machine</button>
-          <button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox. Shortcut: Ctrl + C">dropbox</button>
-          <button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable. Shortcut: F6">browser</button>
+          <button onclick="dowloadMap()" data-tip="Download .map file to your local disk" data-shortcut="Ctrl + S">machine</button>
+          <button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox" data-shortcut="Ctrl + C">dropbox</button>
+          <button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable" data-shortcut="F6">browser</button>
         </div>
         <p>
           Maps are saved in <i>.map</i> format, that can be loaded back via the <i>Load</i> in menu. There is no way to restore the progress if file is lost.
diff --git a/main.js b/main.js
index b62b6cfd..cbd67e94 100644
--- a/main.js
+++ b/main.js
@@ -10,6 +10,9 @@ const TIME = DEBUG || !PRODUCTION;
 const WARN = true;
 const ERROR = true;
 
+// detect device
+const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile;
+
 if (PRODUCTION && "serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker.register("./sw.js").catch(err => {
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 90aa6f33..b3003584 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -51,7 +51,7 @@ function insertEditorHtml() {
       <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
       <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
       <div id="culturesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
           <input
             id="culturesManuallyBrush"
             oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 64244cb0..44dc59fa 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -89,7 +89,7 @@ function insertEditorHtml() {
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
           >Brush size:
           <input
             id="statesManuallyBrush"
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 0d0fde7b..1b63dbac 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -21,18 +21,22 @@ document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
 document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
 document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
 
-function tip(tip = "Tip is undefined", main, type, time) {
+const tipBackgroundMap = {
+  info: "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)",
+  success: "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)",
+  warn: "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)",
+  error: "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)"
+};
+
+function tip(tip = "Tip is undefined", main = false, type = "info", time = 0) {
   tooltip.innerHTML = tip;
-  tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)";
-  if (type === "error") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)";
-  else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
-  else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
+  tooltip.style.background = tipBackgroundMap[type];
 
   if (main) {
     tooltip.dataset.main = tip;
     tooltip.dataset.color = tooltip.style.background;
   }
-  if (time) setTimeout(() => clearMainTip(), time);
+  if (time) setTimeout(clearMainTip, time);
 }
 
 function showMainTip() {
@@ -47,11 +51,16 @@ function clearMainTip() {
 }
 
 // show tip at the bottom of the screen, consider possible translation
-function showDataTip(e) {
-  if (!e.target) return;
-  let dataTip = e.target.dataset.tip;
-  if (!dataTip && e.target.parentNode.dataset.tip) dataTip = e.target.parentNode.dataset.tip;
+function showDataTip(event) {
+  if (!event.target) return;
+
+  let dataTip = event.target.dataset.tip;
+  if (!dataTip && event.target.parentNode.dataset.tip) dataTip = event.target.parentNode.dataset.tip;
   if (!dataTip) return;
+
+  const shortcut = event.target.dataset.shortcut;
+  if (shortcut && !MOBILE) dataTip += `. Shortcut: ${shortcut}`;
+
   //const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
   tip(dataTip);
 }
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 6fbc117a..73a3621e 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -73,16 +73,16 @@ function editWorld() {
     const eqD = ((graphHeight / 2) * 100) / size;
 
     calculateMapCoordinates();
-    const mc = mapCoordinates; // shortcut
-    const scale = +distanceScaleInput.value,
-      unit = distanceUnitInput.value;
+    const mc = mapCoordinates;
+    const scale = +distanceScaleInput.value;
+    const unit = distanceUnitInput.value;
     const meridian = toKilometer(eqD * 2 * scale);
-    document.getElementById("mapSize").innerHTML = /* html */ `${graphWidth}x${graphHeight}`;
-    document.getElementById("mapSizeFriendly").innerHTML = /* html */ `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
+    document.getElementById("mapSize").innerHTML = `${graphWidth}x${graphHeight}`;
+    document.getElementById("mapSizeFriendly").innerHTML = `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
     document.getElementById("meridianLength").innerHTML = rn(eqD * 2);
-    document.getElementById("meridianLengthFriendly").innerHTML = /* html */ `${rn(eqD * 2 * scale)} ${unit}`;
+    document.getElementById("meridianLengthFriendly").innerHTML = `${rn(eqD * 2 * scale)} ${unit}`;
     document.getElementById("meridianLengthEarth").innerHTML = meridian ? " = " + rn(meridian / 200) + "%🌏" : "";
-    document.getElementById("mapCoordinates").innerHTML = /* html */ `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
+    document.getElementById("mapCoordinates").innerHTML = `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
 
     function toKilometer(v) {
       if (unit === "km") return v;
@@ -92,9 +92,11 @@ function editWorld() {
       return 0; // 0 if distanceUnitInput is a custom unit
     }
 
+    // parse latitude value
     function lat(lat) {
       return lat > 0 ? Math.abs(rn(lat)) + "°N" : Math.abs(rn(lat)) + "°S";
-    } // parse latitude value
+    }
+
     const area = d3.geoGraticule().extent([
       [mc.lonW, mc.latN],
       [mc.lonE, mc.latS]

From 5a6b5b4c9524afa1b2ccaad7feb0cf0e3f88e44e Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 01:03:21 +0300
Subject: [PATCH 10/18] central store for heightmap configs

---
 {modules => config}/heightmap-templates.js |  31 +++---
 config/precreated-heightmaps.js            |  27 ++++++
 index.html                                 |  51 +---------
 main.js                                    |  17 ++--
 modules/dynamic/heightmap-selection.js     |  75 ++++-----------
 modules/heightmap-generator.js             |   4 +-
 modules/ui/general.js                      |  23 +++--
 modules/ui/heightmap-editor.js             |   2 +-
 modules/ui/options.js                      | 105 ++++++++++-----------
 9 files changed, 145 insertions(+), 190 deletions(-)
 rename {modules => config}/heightmap-templates.js (77%)
 create mode 100644 config/precreated-heightmaps.js

diff --git a/modules/heightmap-templates.js b/config/heightmap-templates.js
similarity index 77%
rename from modules/heightmap-templates.js
rename to config/heightmap-templates.js
index 7e0cd20c..29738609 100644
--- a/modules/heightmap-templates.js
+++ b/config/heightmap-templates.js
@@ -1,6 +1,6 @@
 "use strict";
 
-window.HeightmapTemplates = (function () {
+const heightmapTemplates = (function () {
   const volcano = `Hill 1 90-100 44-56 40-60
     Multiply 0.8 50-100 0 0
     Range 1.5 30-55 45-55 40-60
@@ -148,20 +148,19 @@ window.HeightmapTemplates = (function () {
     Range 6-8 40-50 5-95 10-90`;
 
   return {
-    volcano,
-    highIsland,
-    lowIsland,
-    continents,
-    archipelago,
-    atoll,
-    mediterranean,
-    peninsula,
-    peninsula,
-    pangea,
-    isthmus,
-    shattered,
-    taklamakan,
-    oldWorld,
-    fractious
+    volcano: {id: 0, name: "Volcano", template: volcano, probability: 3},
+    highIsland: {id: 1, name: "High Island", template: highIsland, probability: 19},
+    lowIsland: {id: 2, name: "Low Island", template: lowIsland, probability: 9},
+    continents: {id: 3, name: "Continents", template: continents, probability: 16},
+    archipelago: {id: 4, name: "Archipelago", template: archipelago, probability: 18},
+    atoll: {id: 5, name: "Atoll", template: atoll, probability: 1},
+    mediterranean: {id: 6, name: "Mediterranean", template: mediterranean, probability: 5},
+    peninsula: {id: 7, name: "Peninsula", template: peninsula, probability: 3},
+    pangea: {id: 8, name: "Pangea", template: pangea, probability: 5},
+    isthmus: {id: 9, name: "Isthmus", template: isthmus, probability: 2},
+    shattered: {id: 10, name: "Shattered", template: shattered, probability: 7},
+    taklamakan: {id: 11, name: "Taklamakan", template: taklamakan, probability: 1},
+    oldWorld: {id: 12, name: "Old World", template: oldWorld, probability: 8},
+    fractious: {id: 13, name: "Fractious", template: fractious, probability: 3}
   };
 })();
diff --git a/config/precreated-heightmaps.js b/config/precreated-heightmaps.js
new file mode 100644
index 00000000..22f45abd
--- /dev/null
+++ b/config/precreated-heightmaps.js
@@ -0,0 +1,27 @@
+"use strict";
+
+const precreatedHeightmaps = {
+  "africa-centric": {id: 0, name: "Africa Centric"},
+  arabia: {id: 1, name: "Arabia"},
+  atlantics: {id: 2, name: "Atlantics"},
+  britain: {id: 3, name: "Britain"},
+  caribbean: {id: 4, name: "Caribbean"},
+  "east-asia": {id: 5, name: "East Asia"},
+  eurasia: {id: 6, name: "Eurasia"},
+  europe: {id: 7, name: "Europe"},
+  "europe-accented": {id: 8, name: "Europe Accented"},
+  "europe-and-central-asia": {id: 9, name: "Europe and Central Asia"},
+  "europe-central": {id: 10, name: "Europe Central"},
+  "europe-north": {id: 11, name: "Europe North"},
+  greenland: {id: 12, name: "Greenland"},
+  hellenica: {id: 13, name: "Hellenica"},
+  iceland: {id: 14, name: "Iceland"},
+  "indian-ocean": {id: 15, name: "Indian Ocean"},
+  "mediterranean-sea": {id: 16, name: "Mediterranean Sea"},
+  "middle-east": {id: 17, name: "Middle East"},
+  "north-america": {id: 18, name: "North America"},
+  "us-centric": {id: 19, name: "US-centric"},
+  "us-mainland": {id: 20, name: "US Mainland"},
+  world: {id: 21, name: "World"},
+  "world-from-pacific": {id: 22, name: "World from Pacific"}
+};
diff --git a/index.html b/index.html
index d027e45c..c3ef5ab1 100644
--- a/index.html
+++ b/index.html
@@ -1324,53 +1324,9 @@
               </td>
               <td>Heightmap</td>
               <td>
-                <select id="templateInput" data-stored="template">
-                  <optgroup label="Template">
-                    <option value="volcano">Volcano</option>
-                    <option value="highIsland">High Island</option>
-                    <option value="lowIsland">Low Island</option>
-                    <option value="continents">Continents</option>
-                    <option value="archipelago">Archipelago</option>
-                    <option value="atoll">Atoll</option>
-                    <option value="mediterranean">Mediterranean</option>
-                    <option value="peninsula">Peninsula</option>
-                    <option value="pangea">Pangea</option>
-                    <option value="isthmus">Isthmus</option>
-                    <option value="shattered">Shattered</option>
-                    <option value="taklamakan">Taklamakan</option>
-                    <option value="oldWorld">Old World</option>
-                    <option value="fractious">Fractious</option>
-                  </optgroup>
-                  <optgroup label="Specific">
-                    <option value="africa-centric">Africa Centric</option>
-                    <option value="arabia">Arabia</option>
-                    <option value="atlantics">Atlantics</option>
-                    <option value="britain">Britain</option>
-                    <option value="caribbean">Caribbean</option>
-                    <option value="east-asia">East Asia</option>
-                    <option value="eurasia">Eurasia</option>
-                    <option value="europe">Europe</option>
-                    <option value="europe-accented">Europe Accented</option>
-                    <option value="europe-and-central-asia">Europe and Central Asia</option>
-                    <option value="europe-central">Europe Central</option>
-                    <option value="europe-north">Europe North</option>
-                    <option value="greenland">Greenland</option>
-                    <option value="hellenica">Hellenica</option>
-                    <option value="iceland">Iceland</option>
-                    <option value="indian-ocean">Indian Ocean</option>
-                    <option value="mediterranean-sea">Mediterranean Sea</option>
-                    <option value="middle-east">Middle East</option>
-                    <option value="north-america">North America</option>
-                    <option value="us-centric">US-centric</option>
-                    <option value="us-mainland">US Mainland</option>
-                    <option value="world">World</option>
-                    <option value="world-from-pacific">World from Pacific</option>
-                  </optgroup>
-                </select>
-              </td>
-              <td>
-                <button id="templateSelectButton" data-tip="Select heightmap template or pre-made heightmap">Select</button>
+                <select id="templateInput" data-stored="template" disabled style="opacity: 1; color: unset"></select>
               </td>
+              <td></td>
             </tr>
 
             <tr data-tip="Define how many Cultures should be generated">
@@ -6133,7 +6089,8 @@
     <script src="utils/unitUtils.js"></script>
 
     <script src="modules/voronoi.js"></script>
-    <script src="modules/heightmap-templates.js?v=21052020"></script>
+    <script src="config/heightmap-templates.js"></script>
+    <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=21052020"></script>
     <script src="modules/ocean-layers.js"></script>
     <script src="modules/river-generator.js"></script>
diff --git a/main.js b/main.js
index cbd67e94..7a13bd5d 100644
--- a/main.js
+++ b/main.js
@@ -899,7 +899,7 @@ function addLakesInDeepDepressions() {
 
 // near sea lakes usually get a lot of water inflow, most of them should brake threshold and flow out to sea (see Ancylus Lake)
 function openNearSeaLakes() {
-  if (templateInput.value === "Atoll") return; // no need for Atolls
+  if (byId("templateInput").value === "Atoll") return; // no need for Atolls
 
   const cells = grid.cells;
   const features = grid.features;
@@ -944,7 +944,7 @@ function defineMapSize() {
   if (randomize || !locked("latitude")) latitudeOutput.value = latitudeInput.value = rn(latitude);
 
   function getSizeAndLatitude() {
-    const template = document.getElementById("templateInput").value; // heightmap template
+    const template = byId("templateInput").value; // heightmap template
 
     if (template === "africa-centric") return [45, 53];
     if (template === "arabia") return [20, 35];
@@ -1921,11 +1921,14 @@ function addZones(number = 1) {
 
 // show map stats on generation complete
 function showStatistics() {
-  const template = templateInput.options[templateInput.selectedIndex].text;
-  const templateRandom = locked("template") ? "" : "(random)";
+  const heightmap = byId("templateInput").value;
+  const isTemplate = heightmap in heightmapTemplates;
+  const heightmapType = isTemplate ? "template" : "precreated";
+  const isRandomTemplate = isTemplate && !locked("template") ? "random " : "";
+
   const stats = `  Seed: ${seed}
-    Canvas size: ${graphWidth}x${graphHeight}
-    Template: ${template} ${templateRandom}
+    Canvas size: ${graphWidth}x${graphHeight} px
+    Heightmap: ${heightmap} (${isRandomTemplate}${heightmapType})
     Points: ${grid.points.length}
     Cells: ${pack.cells.i.length}
     Map size: ${mapSizeOutput.value}%
@@ -1937,7 +1940,7 @@ function showStatistics() {
     Cultures: ${pack.cultures.length - 1}`;
 
   mapId = Date.now(); // unique map id is it's creation date number
-  mapHistory.push({seed, width: graphWidth, height: graphHeight, template, created: mapId});
+  mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
   INFO && console.log(stats);
 }
 
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 7b7a0412..15f62ce4 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -1,46 +1,3 @@
-const templates = [
-  {id: "volcano", name: "Volcano"},
-  {id: "highIsland", name: "High Island"},
-  {id: "lowIsland", name: "Low Island"},
-  {id: "continents", name: "Continents"},
-  {id: "archipelago", name: "Archipelago"},
-  {id: "atoll", name: "Atoll"},
-  {id: "mediterranean", name: "Mediterranean"},
-  {id: "peninsula", name: "Peninsula"},
-  {id: "pangea", name: "Pangea"},
-  {id: "isthmus", name: "Isthmus"},
-  {id: "shattered", name: "Shattered"},
-  {id: "taklamakan", name: "Taklamakan"},
-  {id: "oldWorld", name: "Old World"},
-  {id: "fractious", name: "Fractious"}
-];
-
-const heightmaps = [
-  {id: "africa-centric", name: "Africa Centric"},
-  {id: "arabia", name: "Arabia"},
-  {id: "atlantics", name: "Atlantics"},
-  {id: "britain", name: "Britain"},
-  {id: "caribbean", name: "Caribbean"},
-  {id: "east-asia", name: "East Asia"},
-  {id: "eurasia", name: "Eurasia"},
-  {id: "europe", name: "Europe"},
-  {id: "europe-accented", name: "Europe Accented"},
-  {id: "europe-and-central-asia", name: "Europe and Central Asia"},
-  {id: "europe-central", name: "Europe Central"},
-  {id: "europe-north", name: "Europe North"},
-  {id: "greenland", name: "Greenland"},
-  {id: "hellenica", name: "Hellenica"},
-  {id: "iceland", name: "Iceland"},
-  {id: "indian-ocean", name: "Indian Ocean"},
-  {id: "mediterranean-sea", name: "Mediterranean Sea"},
-  {id: "middle-east", name: "Middle East"},
-  {id: "north-america", name: "North America"},
-  {id: "us-centric", name: "US-centric"},
-  {id: "us-mainland", name: "US Mainland"},
-  {id: "world", name: "World"},
-  {id: "world-from-pacific", name: "World from Pacific"}
-];
-
 const initialSeed = generateSeed();
 appendStyleSheet();
 insertEditorHtml();
@@ -62,19 +19,20 @@ export function open() {
       },
       Select: function () {
         const id = getSelected();
-        $templateInput.value = id;
+        applyOption($templateInput, id, getName(id));
         lock("template");
+
         $(this).dialog("close");
       },
       "New Map": function () {
         const id = getSelected();
-        $templateInput.value = id;
+        applyOption($templateInput, id, getName(id));
         lock("template");
 
         const seed = getSeed();
         Math.random = aleaPRNG(seed);
-
         regeneratePrompt({seed});
+
         $(this).dialog("close");
       }
     }
@@ -208,13 +166,14 @@ function insertEditorHtml() {
   byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
   const sections = document.getElementsByClassName("heightmap-selection_container");
 
-  sections[0].innerHTML = templates
-    .map(({id, name}) => {
+  sections[0].innerHTML = Object.keys(heightmapTemplates)
+    .map(key => {
+      const name = heightmapTemplates[key].name;
       Math.random = aleaPRNG(initialSeed);
-      const heights = generateHeightmap(id);
+      const heights = generateHeightmap(key);
       const dataUrl = drawHeights(heights);
 
-      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
+      return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
         <img src="${dataUrl}" alt="${name}" />
         <div>
           ${name}
@@ -224,11 +183,12 @@ function insertEditorHtml() {
     })
     .join("");
 
-  sections[1].innerHTML = heightmaps
-    .map(({id, name}) => {
-      drawPrecreatedHeightmap(id);
+  sections[1].innerHTML = Object.keys(precreatedHeightmaps)
+    .map(key => {
+      const name = precreatedHeightmaps[key].name;
+      drawPrecreatedHeightmap(key);
 
-      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
+      return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
         <img alt="${name}" />
         <div>${name}</div>
       </article>`;
@@ -271,6 +231,11 @@ function getSeed() {
   return byId("heightmapSelection").querySelector(".selected")?.dataset?.seed;
 }
 
+function getName(id) {
+  const isTemplate = id in heightmapTemplates;
+  return isTemplate ? heightmapTemplates[id].name : precreatedHeightmaps[id].name;
+}
+
 function drawHeights(heights) {
   const canvas = document.createElement("canvas");
   canvas.width = grid.cellsX;
@@ -325,7 +290,7 @@ function redrawAll() {
     const {id, seed} = article.dataset;
     Math.random = aleaPRNG(seed);
 
-    const isTemplate = id in HeightmapTemplates;
+    const isTemplate = id in heightmapTemplates;
     if (isTemplate) drawTemplatePreview(id);
     else drawPrecreatedHeightmap(id);
   }
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 71f2ea2d..bb4c0100 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -8,7 +8,7 @@ window.HeightmapGenerator = (function () {
   const cleanup = () => (heights = null);
 
   const fromTemplate = template => {
-    const templateString = HeightmapTemplates[template];
+    const templateString = heightmapTemplates[template]?.template || "";
     const steps = templateString.split("\n");
 
     if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
@@ -52,7 +52,7 @@ window.HeightmapGenerator = (function () {
     const id = byId("templateInput").value;
     resetHeights();
 
-    const isTemplate = id in HeightmapTemplates;
+    const isTemplate = id in heightmapTemplates;
     grid.cells.h = isTemplate ? fromTemplate(id) : await fromPrecreated(id);
 
     cleanup();
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 1b63dbac..7cb0f5c3 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -3,7 +3,7 @@
 
 // fit full-screen map if window is resized
 window.addEventListener("resize", function (e) {
-  if (localStorage.getItem("mapWidth") && localStorage.getItem("mapHeight")) return;
+  if (stored("mapWidth") && stored("mapHeight")) return;
   mapWidthInput.value = window.innerWidth;
   mapHeightInput.value = window.innerHeight;
   changeMapSize();
@@ -414,7 +414,7 @@ document.querySelectorAll("[data-locked]").forEach(function (e) {
 // lock option
 function lock(id) {
   const input = document.querySelector('[data-stored="' + id + '"]');
-  if (input) localStorage.setItem(id, input.value);
+  if (input) store(id, input.value);
   const el = document.getElementById("lock_" + id);
   if (!el) return;
   el.dataset.locked = 1;
@@ -436,9 +436,14 @@ function locked(id) {
   return lockEl.dataset.locked == 1;
 }
 
-// check if option is stored in localStorage
-function stored(option) {
-  return localStorage.getItem(option);
+// return key value stored in localStorage or null
+function stored(key) {
+  return localStorage.getItem(key) || null;
+}
+
+// store key value in localStorage
+function store(key, value) {
+  return localStorage.setItem(key, value);
 }
 
 // assign skeaker behaviour
@@ -458,10 +463,10 @@ function speak(text) {
 }
 
 // apply drop-down menu option. If the value is not in options, add it
-function applyOption(select, id, name = id) {
-  const custom = !Array.from(select.options).some(o => o.value == id);
-  if (custom) select.options.add(new Option(name, id));
-  select.value = id;
+function applyOption($select, value, name = value) {
+  const isExisting = Array.from($select.options).some(o => o.value === value);
+  if (!isExisting) $select.options.add(new Option(name, value));
+  $select.value = value;
 }
 
 // show info about the generator in a popup
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 69d98184..beb34ae5 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -921,7 +921,7 @@ function editHeightmap(options) {
       body.setAttribute("data-changed", 0);
       body.innerHTML = "";
 
-      const templateString = HeightmapTemplates[template];
+      const templateString = heightmapTemplates[template]?.template;
       if (!templateString) return;
 
       const steps = templateString.split("\n");
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 260cdea5..888571c7 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -6,14 +6,14 @@ $("#exitCustomization").draggable({handle: "div"});
 $("#mapLayers").disableSelection();
 
 // remove glow if tip is aknowledged
-if (localStorage.getItem("disable_click_arrow_tooltip")) {
+if (stored("disable_click_arrow_tooltip")) {
   clearMainTip();
   optionsTrigger.classList.remove("glow");
 }
 
 // Show options pane on trigger click
 function showOptions(event) {
-  if (!localStorage.getItem("disable_click_arrow_tooltip")) {
+  if (!stored("disable_click_arrow_tooltip")) {
     clearMainTip();
     localStorage.setItem("disable_click_arrow_tooltip", true);
     optionsTrigger.classList.remove("glow");
@@ -81,12 +81,12 @@ async function showSupporters() {
 }
 
 // on any option or dialog change
-document.getElementById("options").addEventListener("change", checkIfStored);
-document.getElementById("dialogs").addEventListener("change", checkIfStored);
+document.getElementById("options").addEventListener("change", storeValueIfRequired);
+document.getElementById("dialogs").addEventListener("change", storeValueIfRequired);
 document.getElementById("options").addEventListener("input", updateOutputToFollowInput);
 document.getElementById("dialogs").addEventListener("input", updateOutputToFollowInput);
 
-function checkIfStored(ev) {
+function storeValueIfRequired(ev) {
   if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
 }
 
@@ -142,7 +142,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
-  else if (id === "templateSelectButton") openTemplateSelectionDialog();
+  else if (id === "templateInput") openTemplateSelectionDialog();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
@@ -233,7 +233,7 @@ const voiceInterval = setInterval(function () {
   voices.forEach((voice, i) => {
     select.options.add(new Option(voice.name, i, false));
   });
-  if (stored("speakerVoice")) select.value = localStorage.getItem("speakerVoice");
+  if (stored("speakerVoice")) select.value = stored("speakerVoice");
   // se voice to store
   else select.value = voices.findIndex(voice => voice.lang === "en-US"); // or to first found English-US
 }, 1000);
@@ -273,13 +273,14 @@ function showSeedHistoryDialog() {
 
 // generate map with historical seed
 function restoreSeed(id) {
-  if (mapHistory[id].seed == seed) return tip("The current map is already generated with this seed", null, "error");
+  const {seed, width, height, template} = mapHistory[id];
+  byId("optionsSeed").value = seed;
+  byId("mapWidthInput").value = width;
+  byId("mapHeightInput").value = height;
+  byId("templateInput").value = template;
 
-  optionsSeed.value = mapHistory[id].seed;
-  mapWidthInput.value = mapHistory[id].width;
-  mapHeightInput.value = mapHistory[id].height;
-  templateInput.value = mapHistory[id].template;
   if (locked("template")) unlock("template");
+
   regeneratePrompt();
 }
 
@@ -457,43 +458,50 @@ function changeZoomExtent(value) {
   zoom.scaleTo(svg, scale);
 }
 
-// control stored options logic
+// restore options stored in localStorage
 function applyStoredOptions() {
-  if (!localStorage.getItem("mapWidth") || !localStorage.getItem("mapHeight")) {
+  if (!stored("mapWidth") || !stored("mapHeight")) {
     mapWidthInput.value = window.innerWidth;
     mapHeightInput.value = window.innerHeight;
   }
 
-  if (localStorage.getItem("distanceUnit")) applyOption(distanceUnitInput, localStorage.getItem("distanceUnit"));
-  if (localStorage.getItem("heightUnit")) applyOption(heightUnit, localStorage.getItem("heightUnit"));
-
-  for (let i = 0; i < localStorage.length; i++) {
-    const stored = localStorage.key(i);
-    const value = localStorage.getItem(stored);
-
-    if (stored === "speakerVoice") continue;
-    const input = document.getElementById(stored + "Input") || document.getElementById(stored);
-    const output = document.getElementById(stored + "Output");
-    if (input) input.value = value;
-    if (output) output.value = value;
-    lock(stored);
-
-    // add saved style presets to options
-    if (stored.slice(0, 5) === "style") applyOption(stylePreset, stored, stored.slice(5));
+  const heightmapId = stored("template");
+  if (heightmapId) {
+    const name = heightmapTemplates[heightmapId]?.name || precreatedHeightmaps[heightmapId]?.name || heightmapId;
+    applyOption(byId("templateInput"), heightmapId, name);
   }
 
-  if (localStorage.getItem("winds"))
+  if (stored("distanceUnit")) applyOption(distanceUnitInput, stored("distanceUnit"));
+  if (stored("heightUnit")) applyOption(heightUnit, stored("heightUnit"));
+
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+
+    if (key === "speakerVoice") continue;
+    const input = byId(key + "Input") || byId(key);
+    const output = byId(key + "Output");
+
+    const value = stored(key);
+    if (input) input.value = value;
+    if (output) output.value = value;
+    lock(key);
+
+    // add saved style presets to options
+    if (key.slice(0, 5) === "style") applyOption(stylePreset, key, key.slice(5));
+  }
+
+  if (stored("winds"))
     options.winds = localStorage
       .getItem("winds")
       .split(",")
       .map(w => +w);
-  if (localStorage.getItem("military")) options.military = JSON.parse(localStorage.getItem("military"));
+  if (stored("military")) options.military = JSON.parse(stored("military"));
 
-  if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize"));
-  if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
+  if (stored("tooltipSize")) changeTooltipSize(stored("tooltipSize"));
+  if (stored("regions")) changeStatesNumber(stored("regions"));
 
   uiSizeInput.max = uiSizeOutput.max = getUImaxSize();
-  if (localStorage.getItem("uiSize")) changeUIsize(localStorage.getItem("uiSize"));
+  if (stored("uiSize")) changeUIsize(stored("uiSize"));
   else changeUIsize(minmax(rn(mapWidthInput.value / 1280, 1), 1, 2.5));
 
   // search params overwrite stored and default options
@@ -503,8 +511,8 @@ function applyStoredOptions() {
   if (width) mapWidthInput.value = width;
   if (height) mapHeightInput.value = height;
 
-  const transparency = localStorage.getItem("transparency") || 5;
-  const themeColor = localStorage.getItem("themeColor");
+  const transparency = stored("transparency") || 5;
+  const themeColor = stored("themeColor");
   changeDialogsTheme(themeColor, transparency);
 
   setRendering(shapeRendering.value);
@@ -549,22 +557,13 @@ function randomizeOptions() {
 
 // select heightmap template pseudo-randomly
 function randomizeHeightmapTemplate() {
-  const templates = {
-    volcano: 3,
-    highIsland: 19,
-    lowIsland: 9,
-    continents: 16,
-    archipelago: 18,
-    mediterranean: 5,
-    peninsula: 3,
-    pangea: 5,
-    isthmus: 2,
-    atoll: 1,
-    shattered: 7,
-    taklamakan: 1,
-    oldWorld: 11
-  };
-  document.getElementById("templateInput").value = rw(templates);
+  const templates = {};
+  for (const key in heightmapTemplates) {
+    templates[key] = heightmapTemplates[key].probability || 0;
+  }
+  const template = rw(templates);
+  const name = heightmapTemplates[template].name;
+  applyOption(byId("templateInput"), template, name);
 }
 
 // select culture set pseudo-randomly

From c9fd598c9cf7d9080489c95d62ec5be2c5c1fe40 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 02:05:42 +0300
Subject: [PATCH 11/18] heightmapSelect - make default select element
 non-clickable

---
 index.html                             |  6 +++---
 modules/dynamic/heightmap-selection.js | 24 ++++++++++++++++--------
 modules/ui/options.js                  |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index c3ef5ab1..a435d974 100644
--- a/index.html
+++ b/index.html
@@ -1318,13 +1318,13 @@
               </td>
             </tr>
 
-            <tr data-tip="Select heightmap generation template or precreated heightmap">
+            <tr data-tip="Select template or precreated heightmap to be used on generation">
               <td>
                 <i data-locked="0" id="lock_template" class="icon-lock-open"></i>
               </td>
               <td>Heightmap</td>
-              <td>
-                <select id="templateInput" data-stored="template" disabled style="opacity: 1; color: unset"></select>
+              <td id="templateInputContainer" class="pointer">
+                <select id="templateInput" data-stored="template" style="pointer-events: none"></select>
               </td>
               <td></td>
             </tr>
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 15f62ce4..0942c12c 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -69,13 +69,18 @@ function appendStyleSheet() {
     .heightmap-selection_options {
       display: grid;
       grid-template-columns: 2fr 1fr;
-      justify-items: start;
     }
 
     .heightmap-selection_options > div:first-child {
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr;
       align-items: center;
+      justify-self: start;
+      justify-items: start;
+    }
+
+    .heightmap-selection_options > div:last-child {
+      justify-self: end;
     }
 
     .heightmap-selection article {
@@ -127,23 +132,27 @@ function appendStyleSheet() {
 function insertEditorHtml() {
   const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
     <div class="heightmap-selection">
-      <section>
+      <section data-tip="Select heightmap template – template provides unique, but similar-looking maps on generation">
         <header><h1>Heightmap templates</h1></header>
         <div class="heightmap-selection_container"></div>
       </section>
-      <section>
-        <header><h1>Pre-created heightmaps</h1></header>
+      <section data-tip="Select precreated heightmap – it will be the same for each map">
+        <header><h1>Precreated heightmaps</h1></header>
         <div class="heightmap-selection_container"></div>
       </section>
       <section>
         <header><h1>Options</h1></header>
         <div class="heightmap-selection_options">
           <div>
+            <label data-tip="Rerender all preview images" class="checkbox-label" id="heightmapSelectionRedrawPreview">
+              <i class="icon-cw"></i>
+              Redraw preview
+            </label>
             <div>
               <input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
-              <label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
+              <label data-tip="Draw heights of water cells" for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
             </div>
-            <div>
+            <div data-tip="Color scheme used for heightmap preview">
               Color scheme
               <select id="heightmapSelectionColorScheme">
                 <option value="bright" selected>Bright</option>
@@ -154,7 +163,6 @@ function insertEditorHtml() {
             </div>
           </div>
           <div>
-            <button data-tip="Rerender all preview images" id="heightmapSelectionRedrawPreview">Redraw preview</button>
             <button data-tip="Open Template Editor" data-tool="templateEditor" id="heightmapSelectionEditTemplates">Edit Templates</button>
             <button data-tip="Open Image Converter" data-tool="imageConverter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
           </div>
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 888571c7..522c50ea 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -142,7 +142,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
-  else if (id === "templateInput") openTemplateSelectionDialog();
+  else if (id === "templateInputContainer") openTemplateSelectionDialog();
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();

From ab160e609ca5f203d9bb2edcf587f8debb701e4a Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 13:36:05 +0300
Subject: [PATCH 12/18] heightmap selection - fix style on mobile

---
 modules/dynamic/heightmap-selection.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 0942c12c..924b250e 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -79,6 +79,16 @@ function appendStyleSheet() {
       justify-items: start;
     }
 
+    @media (max-width: 600px) {
+      .heightmap-selection_options {
+        grid-template-columns: 3fr 1fr;
+      }
+
+      .heightmap-selection_options > div:first-child {
+        display: block;
+      }
+    }
+
     .heightmap-selection_options > div:last-child {
       justify-self: end;
     }

From 4f372c7a469cad0a49f2c1bff397d6d3df7992d6 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 14:33:07 +0300
Subject: [PATCH 13/18] height generation - ability to pass cells number

---
 modules/dynamic/heightmap-selection.js | 10 ++-
 modules/heightmap-generator.js         | 92 +++++++++++++++-----------
 modules/ui/heightmap-editor.js         |  6 +-
 3 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 924b250e..69b89815 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -282,10 +282,14 @@ function drawHeights(heights) {
 }
 
 function generateHeightmap(id) {
-  HeightmapGenerator.resetHeights();
-  const heights = HeightmapGenerator.fromTemplate(id);
+  const heights = new Uint8Array(grid.points.length);
+  // use cells number of the current graph, no matter what UI input value is
+  const cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
+
+  HeightmapGenerator.setHeights(heights, cellsDesired);
+  const newHeights = HeightmapGenerator.fromTemplate(id);
   HeightmapGenerator.cleanup();
-  return heights;
+  return newHeights;
 }
 
 function drawTemplatePreview(id) {
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index bb4c0100..9fd95cc1 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -2,9 +2,23 @@
 
 window.HeightmapGenerator = (function () {
   let heights = null;
-  const setHeights = h => (heights = h);
-  const resetHeights = () => (heights = new Uint8Array(grid.points.length));
+  let blobPower;
+  let linePower;
+
+  const setHeights = (savedHeights, cellsNumber) => {
+    heights = savedHeights;
+    blobPower = getBlobPower(cellsNumber);
+    linePower = getLinePower(cellsNumber);
+  };
+
+  const resetHeights = () => {
+    heights = new Uint8Array(grid.points.length);
+    const cellsNumber = +byId("pointsInput").dataset.cells;
+    blobPower = getBlobPower(cellsNumber);
+    linePower = getLinePower(cellsNumber);
+  };
   const getHeights = () => heights;
+
   const cleanup = () => (heights = null);
 
   const fromTemplate = template => {
@@ -72,43 +86,47 @@ window.HeightmapGenerator = (function () {
     if (tool === "Smooth") return smooth(a2);
   }
 
-  function getBlobPower() {
-    const cells = +byId("pointsInput").dataset.cells;
-    if (cells === 1000) return 0.93;
-    if (cells === 2000) return 0.95;
-    if (cells === 5000) return 0.96;
-    if (cells === 10000) return 0.98;
-    if (cells === 20000) return 0.985;
-    if (cells === 30000) return 0.987;
-    if (cells === 40000) return 0.9892;
-    if (cells === 50000) return 0.9911;
-    if (cells === 60000) return 0.9921;
-    if (cells === 70000) return 0.9934;
-    if (cells === 80000) return 0.9942;
-    if (cells === 90000) return 0.9946;
-    if (cells === 100000) return 0.995;
+  function getBlobPower(cells) {
+    const blobPowerMap = {
+      1000: 0.93,
+      2000: 0.95,
+      5000: 0.96,
+      10000: 0.98,
+      20000: 0.985,
+      30000: 0.987,
+      40000: 0.9892,
+      50000: 0.9911,
+      60000: 0.9921,
+      70000: 0.9934,
+      80000: 0.9942,
+      90000: 0.9946,
+      100000: 0.995
+    };
+    return blobPowerMap[cells] || 0.98;
   }
 
   function getLinePower() {
-    const cells = +byId("pointsInput").dataset.cells;
-    if (cells === 1000) return 0.74;
-    if (cells === 2000) return 0.75;
-    if (cells === 5000) return 0.78;
-    if (cells === 10000) return 0.81;
-    if (cells === 20000) return 0.82;
-    if (cells === 30000) return 0.83;
-    if (cells === 40000) return 0.84;
-    if (cells === 50000) return 0.855;
-    if (cells === 60000) return 0.87;
-    if (cells === 70000) return 0.885;
-    if (cells === 80000) return 0.91;
-    if (cells === 90000) return 0.92;
-    if (cells === 100000) return 0.93;
+    const linePowerMap = {
+      1000: 0.74,
+      2000: 0.75,
+      5000: 0.78,
+      10000: 0.81,
+      20000: 0.82,
+      30000: 0.83,
+      40000: 0.84,
+      50000: 0.855,
+      60000: 0.87,
+      70000: 0.885,
+      80000: 0.91,
+      90000: 0.92,
+      100000: 0.93
+    };
+
+    return linePowerMap[cells] || 0.81;
   }
 
   const addHill = (count, height, rangeX, rangeY) => {
     count = getNumberInRange(count);
-    const power = getBlobPower();
     while (count > 0) {
       addOneHill();
       count--;
@@ -134,7 +152,7 @@ window.HeightmapGenerator = (function () {
 
         for (const c of grid.cells.c[q]) {
           if (change[c]) continue;
-          change[c] = change[q] ** power * (Math.random() * 0.2 + 0.9);
+          change[c] = change[q] ** blobPower * (Math.random() * 0.2 + 0.9);
           if (change[c] > 1) queue.push(c);
         }
       }
@@ -166,7 +184,7 @@ window.HeightmapGenerator = (function () {
       const queue = [start];
       while (queue.length) {
         const q = queue.shift();
-        h = h ** getBlobPower() * (Math.random() * 0.2 + 0.9);
+        h = h ** blobPower * (Math.random() * 0.2 + 0.9);
         if (h < 1) return;
 
         grid.cells.c[q].forEach(function (c, i) {
@@ -181,7 +199,6 @@ window.HeightmapGenerator = (function () {
 
   const addRange = (count, height, rangeX, rangeY) => {
     count = getNumberInRange(count);
-    const power = getLinePower();
     while (count > 0) {
       addOneRange();
       count--;
@@ -242,7 +259,7 @@ window.HeightmapGenerator = (function () {
         frontier.forEach(i => {
           heights[i] = lim(heights[i] + h * (Math.random() * 0.3 + 0.85));
         });
-        h = h ** power - 1;
+        h = h ** linePower - 1;
         if (h < 2) break;
         frontier.forEach(f => {
           grid.cells.c[f].forEach(i => {
@@ -268,7 +285,6 @@ window.HeightmapGenerator = (function () {
 
   const addTrough = (count, height, rangeX, rangeY) => {
     count = getNumberInRange(count);
-    const power = getLinePower();
     while (count > 0) {
       addOneTrough();
       count--;
@@ -337,7 +353,7 @@ window.HeightmapGenerator = (function () {
         frontier.forEach(i => {
           heights[i] = lim(heights[i] - h * (Math.random() * 0.3 + 0.85));
         });
-        h = h ** power - 1;
+        h = h ** linePower - 1;
         if (h < 2) break;
         frontier.forEach(f => {
           grid.cells.c[f].forEach(i => {
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index beb34ae5..23974ad4 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -940,7 +940,11 @@ function editHeightmap(options) {
       const seed = byId("templateSeed").value;
       if (seed) Math.random = aleaPRNG(seed);
 
-      HeightmapGenerator.resetHeights();
+      const heights = new Uint8Array(grid.points.length);
+      // use cells number of the current graph, no matter what UI input value is
+      const cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
+      HeightmapGenerator.setHeights(heights, cellsDesired);
+
       restartHistory();
 
       for (const step of steps) {

From 662163176bd302a96f7ba8f97f10bb8e1d9c8334 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 22:11:32 +0300
Subject: [PATCH 14/18] heightmap selection - refactor, make generation
 immutable to get predictable result

---
 main.js                                | 85 ++++++++------------------
 modules/dynamic/auto-update.js         |  5 ++
 modules/dynamic/heightmap-selection.js | 53 ++++++++--------
 modules/heightmap-generator.js         | 73 +++++++++++-----------
 modules/io/load.js                     |  7 ++-
 modules/io/save.js                     |  4 +-
 modules/submap.js                      |  3 +-
 modules/ui/general.js                  | 18 +++---
 modules/ui/heightmap-editor.js         | 20 +++---
 modules/ui/ice-editor.js               |  4 +-
 utils/arrayUtils.js                    | 19 +++++-
 utils/graphUtils.js                    | 64 +++++++++++++++++--
 12 files changed, 197 insertions(+), 158 deletions(-)

diff --git a/main.js b/main.js
index 7a13bd5d..2b4356b6 100644
--- a/main.js
+++ b/main.js
@@ -629,7 +629,7 @@ void (function addDragToUpload() {
 async function generate(options) {
   try {
     const timeStart = performance.now();
-    const {seed: precreatedSeed} = options || {};
+    const {seed: precreatedSeed, graph: precreatedGraph} = options || {};
 
     invokeActiveZooming();
     setSeed(precreatedSeed);
@@ -638,11 +638,9 @@ async function generate(options) {
     applyMapSize();
     randomizeOptions();
 
-    if (shouldRegenerateGrid()) {
-      placePoints();
-      calculateVoronoi(grid, grid.points);
-    }
-    await HeightmapGenerator.generate();
+    if (shouldRegenerateGrid(grid)) grid = precreatedGraph || generateGrid();
+    else delete grid.cells.h;
+    grid.cells.h = await HeightmapGenerator.generate(grid);
 
     markFeatures();
     markupGridOcean();
@@ -654,6 +652,7 @@ async function generate(options) {
     calculateMapCoordinates();
     calculateTemperatures();
     generatePrecipitation();
+
     reGraph();
     drawCoastline();
 
@@ -736,52 +735,13 @@ function setSeed(precreatedSeed) {
   Math.random = aleaPRNG(seed);
 }
 
-// check if new grid graph should be generated or we can use the existing one
-function shouldRegenerateGrid() {
-  if (!grid.spacing) return true;
-  const cellsDesired = +byId("pointsInput").dataset.cells;
-  const newSpacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2);
-  return grid.spacing !== newSpacing;
-}
-
-// Place points to calculate Voronoi diagram
-function placePoints() {
-  TIME && console.time("placePoints");
-  Math.random = aleaPRNG(seed); // reset PRNG
-
-  const cellsDesired = +byId("pointsInput").dataset.cells;
-  const spacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2); // spacing between points before jirrering
-  grid.spacing = spacing;
-  grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
-  grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid
-  grid.cellsX = Math.floor((graphWidth + 0.5 * spacing - 1e-10) / spacing);
-  grid.cellsY = Math.floor((graphHeight + 0.5 * spacing - 1e-10) / spacing);
-  TIME && console.timeEnd("placePoints");
-}
-
-// calculate Delaunay and then Voronoi diagram
-function calculateVoronoi(graph, points) {
-  TIME && console.time("calculateDelaunay");
-  const n = points.length;
-  const allPoints = points.concat(grid.boundary);
-  const delaunay = Delaunator.from(allPoints);
-  TIME && console.timeEnd("calculateDelaunay");
-
-  TIME && console.time("calculateVoronoi");
-  const voronoi = new Voronoi(delaunay, allPoints, n);
-  graph.cells = voronoi.cells;
-  graph.cells.i = n < 65535 ? Uint16Array.from(d3.range(n)) : Uint32Array.from(d3.range(n)); // array of indexes
-  graph.vertices = voronoi.vertices;
-  TIME && console.timeEnd("calculateVoronoi");
-}
-
 // Mark features (ocean, lakes, islands) and calculate distance field
 function markFeatures() {
   TIME && console.time("markFeatures");
   Math.random = aleaPRNG(seed); // get the same result on heightmap edit in Erase mode
 
-  const cells = grid.cells,
-    heights = grid.cells.h;
+  const cells = grid.cells;
+  const heights = grid.cells.h;
   cells.f = new Uint16Array(cells.i.length); // cell feature number
   cells.t = new Int8Array(cells.i.length); // cell type: 1 = land coast; -1 = water near coast
   grid.features = [0];
@@ -1201,8 +1161,8 @@ function generatePrecipitation() {
 // recalculate Voronoi Graph to pack cells
 function reGraph() {
   TIME && console.time("reGraph");
-  let {cells, points, features} = grid;
-  const newCells = {p: [], g: [], h: []}; // to store new data
+  const {cells, points, features} = grid;
+  const newCells = {p: [], g: [], h: []}; // store new data
   const spacing2 = grid.spacing ** 2;
 
   for (const i of cells.i) {
@@ -1236,14 +1196,17 @@ function reGraph() {
     newCells.h.push(height);
   }
 
-  calculateVoronoi(pack, newCells.p);
-  cells = pack.cells;
-  cells.p = newCells.p; // points coordinates [x, y]
-  cells.g = grid.cells.i.length < 65535 ? Uint16Array.from(newCells.g) : Uint32Array.from(newCells.g); // reference to initial grid cell
-  cells.q = d3.quadtree(cells.p.map((p, d) => [p[0], p[1], d])); // points quadtree for fast search
-  cells.h = new Uint8Array(newCells.h); // heights
-  cells.area = new Uint16Array(cells.i.length); // cell area
-  cells.i.forEach(i => (cells.area[i] = Math.abs(d3.polygonArea(getPackPolygon(i)))));
+  function getCellArea(i) {
+    const area = Math.abs(d3.polygonArea(getPackPolygon(i)));
+    return Math.min(area, 65535);
+  }
+
+  pack = calculateVoronoi(newCells.p, grid.boundary);
+  pack.cells.p = newCells.p;
+  pack.cells.g = getTypedArray(grid.points.length).from(newCells.g);
+  pack.cells.q = d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i]));
+  pack.cells.h = getTypedArray(100).from(newCells.h);
+  pack.cells.area = getTypedArray(65535).from(pack.cells.i).map(getCellArea);
 
   TIME && console.timeEnd("reGraph");
 }
@@ -1946,7 +1909,11 @@ function showStatistics() {
 
 const regenerateMap = debounce(async function (options) {
   WARN && console.warn("Generate new random map");
-  showLoading();
+
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const shouldShowLoading = cellsDesired > 10000;
+
+  shouldShowLoading && showLoading();
   closeDialogs("#worldConfigurator, #options3d");
   customization = 0;
   resetZoom(1000);
@@ -1955,7 +1922,7 @@ const regenerateMap = debounce(async function (options) {
   restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
-  hideLoading();
+  shouldShowLoading && hideLoading();
 }, 1000);
 
 // clear the map
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index 08b9c056..abeee814 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -520,4 +520,9 @@ export function resolveVersionConflicts(version) {
       if (!zone.dataset.type) zone.dataset.type = "Unknown";
     });
   }
+
+  if (version < 1.84) {
+    // v1.84.0 added grid.cellsDesired to stored data
+    if (!grid.cellsDesired) grid.cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
+  }
 }
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 69b89815..90bfdec8 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -1,4 +1,6 @@
 const initialSeed = generateSeed();
+let graph = getGraph(grid);
+
 appendStyleSheet();
 insertEditorHtml();
 addListeners();
@@ -8,6 +10,7 @@ export function open() {
 
   const $templateInput = byId("templateInput");
   setSelected($templateInput.value);
+  graph = getGraph(graph);
 
   $("#heightmapSelection").dialog({
     title: "Select Heightmap",
@@ -30,8 +33,7 @@ export function open() {
         lock("template");
 
         const seed = getSeed();
-        Math.random = aleaPRNG(seed);
-        regeneratePrompt({seed});
+        regeneratePrompt({seed, graph});
 
         $(this).dialog("close");
       }
@@ -182,13 +184,14 @@ function insertEditorHtml() {
   </div>`;
 
   byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
+
   const sections = document.getElementsByClassName("heightmap-selection_container");
 
   sections[0].innerHTML = Object.keys(heightmapTemplates)
     .map(key => {
       const name = heightmapTemplates[key].name;
       Math.random = aleaPRNG(initialSeed);
-      const heights = generateHeightmap(key);
+      const heights = HeightmapGenerator.fromTemplate(graph, key);
       const dataUrl = drawHeights(heights);
 
       return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
@@ -220,12 +223,8 @@ function addListeners() {
     if (!article) return;
 
     const id = article.dataset.id;
-    if (event.target.matches("span.icon-cw")) {
-      const seed = generateSeed();
-      article.dataset.seed = seed;
-      Math.random = aleaPRNG(seed);
-      drawTemplatePreview(id);
-    } else setSelected(id);
+    if (event.target.matches("span.icon-cw")) regeneratePreview(article, id);
+    setSelected(id);
   });
 
   byId("heightmapSelectionRenderOcean").on("change", redrawAll);
@@ -254,12 +253,18 @@ function getName(id) {
   return isTemplate ? heightmapTemplates[id].name : precreatedHeightmaps[id].name;
 }
 
+function getGraph(currentGraph) {
+  const newGraph = shouldRegenerateGrid(currentGraph) ? generateGrid() : deepCopy(currentGraph);
+  delete newGraph.cells.h;
+  return newGraph;
+}
+
 function drawHeights(heights) {
   const canvas = document.createElement("canvas");
-  canvas.width = grid.cellsX;
-  canvas.height = grid.cellsY;
+  canvas.width = graph.cellsX;
+  canvas.height = graph.cellsY;
   const ctx = canvas.getContext("2d");
-  const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
+  const imageData = ctx.createImageData(graph.cellsX, graph.cellsY);
 
   const schemeId = byId("heightmapSelectionColorScheme").value;
   const scheme = getColorScheme(schemeId);
@@ -281,32 +286,30 @@ function drawHeights(heights) {
   return canvas.toDataURL("image/png");
 }
 
-function generateHeightmap(id) {
-  const heights = new Uint8Array(grid.points.length);
-  // use cells number of the current graph, no matter what UI input value is
-  const cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
-
-  HeightmapGenerator.setHeights(heights, cellsDesired);
-  const newHeights = HeightmapGenerator.fromTemplate(id);
-  HeightmapGenerator.cleanup();
-  return newHeights;
-}
-
 function drawTemplatePreview(id) {
-  const heights = generateHeightmap(id);
+  const heights = HeightmapGenerator.fromTemplate(graph, id);
   const dataUrl = drawHeights(heights);
   const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
   article.querySelector("img").src = dataUrl;
 }
 
 async function drawPrecreatedHeightmap(id) {
-  const heights = await HeightmapGenerator.fromPrecreated(id);
+  const heights = await HeightmapGenerator.fromPrecreated(graph, id);
   const dataUrl = drawHeights(heights);
   const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
   article.querySelector("img").src = dataUrl;
 }
 
+function regeneratePreview(article, id) {
+  graph = getGraph(graph);
+  const seed = generateSeed();
+  article.dataset.seed = seed;
+  Math.random = aleaPRNG(seed);
+  drawTemplatePreview(id);
+}
+
 function redrawAll() {
+  graph = getGraph(graph);
   const articles = byId("heightmapSelection").querySelectorAll(`article`);
   for (const article of articles) {
     const {id, seed} = article.dataset;
diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index 9fd95cc1..feae9c1e 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -1,47 +1,48 @@
 "use strict";
 
 window.HeightmapGenerator = (function () {
+  let grid = null;
   let heights = null;
   let blobPower;
   let linePower;
 
-  const setHeights = (savedHeights, cellsNumber) => {
-    heights = savedHeights;
-    blobPower = getBlobPower(cellsNumber);
-    linePower = getLinePower(cellsNumber);
+  const setGraph = graph => {
+    const {cellsDesired, cells, points} = graph;
+    heights = cells.h || createTypedArray({maxValue: 100, length: points.length});
+    blobPower = getBlobPower(cellsDesired);
+    linePower = getLinePower(cellsDesired);
+    grid = graph;
   };
 
-  const resetHeights = () => {
-    heights = new Uint8Array(grid.points.length);
-    const cellsNumber = +byId("pointsInput").dataset.cells;
-    blobPower = getBlobPower(cellsNumber);
-    linePower = getLinePower(cellsNumber);
-  };
   const getHeights = () => heights;
 
-  const cleanup = () => (heights = null);
+  const clearData = () => {
+    heights = null;
+    grid = null;
+  };
 
-  const fromTemplate = template => {
-    const templateString = heightmapTemplates[template]?.template || "";
+  const fromTemplate = (graph, id) => {
+    const templateString = heightmapTemplates[id]?.template || "";
     const steps = templateString.split("\n");
 
-    if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${template}. Steps: ${steps}`);
+    if (!steps.length) throw new Error(`Heightmap template: no steps. Template: ${id}. Steps: ${steps}`);
+    setGraph(graph);
 
     for (const step of steps) {
       const elements = step.trim().split(" ");
-      if (elements.length < 2) throw new Error(`Heightmap template: steps < 2. Template: ${template}. Step: ${elements}`);
+      if (elements.length < 2) throw new Error(`Heightmap template: steps < 2. Template: ${id}. Step: ${elements}`);
       addStep(...elements);
     }
 
     return heights;
   };
 
-  const fromPrecreated = id => {
+  const fromPrecreated = (graph, id) => {
     return new Promise(resolve => {
       // create canvas where 1px corresponts to a cell
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
-      const {cellsX, cellsY} = grid;
+      const {cellsX, cellsY} = graph;
       canvas.width = cellsX;
       canvas.height = cellsY;
 
@@ -51,7 +52,8 @@ window.HeightmapGenerator = (function () {
       img.onload = () => {
         ctx.drawImage(img, 0, 0, cellsX, cellsY);
         const imageData = ctx.getImageData(0, 0, cellsX, cellsY);
-        const heights = getHeightsFromImageData(imageData.data);
+        setGraph(graph);
+        getHeightsFromImageData(imageData.data);
         canvas.remove();
         img.remove();
         resolve(heights);
@@ -59,18 +61,17 @@ window.HeightmapGenerator = (function () {
     });
   };
 
-  const generate = async function () {
-    Math.random = aleaPRNG(seed);
-
+  const generate = async function (graph) {
     TIME && console.time("defineHeightmap");
     const id = byId("templateInput").value;
-    resetHeights();
 
+    Math.random = aleaPRNG(seed);
     const isTemplate = id in heightmapTemplates;
-    grid.cells.h = isTemplate ? fromTemplate(id) : await fromPrecreated(id);
-
-    cleanup();
+    const heights = isTemplate ? fromTemplate(graph, id) : await fromPrecreated(graph, id);
     TIME && console.timeEnd("defineHeightmap");
+
+    clearData();
+    return heights;
   };
 
   function addStep(tool, a2, a3, a4, a5) {
@@ -141,7 +142,7 @@ window.HeightmapGenerator = (function () {
       do {
         const x = getPointInRange(rangeX, graphWidth);
         const y = getPointInRange(rangeY, graphHeight);
-        start = findGridCell(x, y);
+        start = findGridCell(x, y, grid);
         limit++;
       } while (heights[start] + h > 90 && limit < 50);
 
@@ -177,7 +178,7 @@ window.HeightmapGenerator = (function () {
       do {
         const x = getPointInRange(rangeX, graphWidth);
         const y = getPointInRange(rangeY, graphHeight);
-        start = findGridCell(x, y);
+        start = findGridCell(x, y, grid);
         limit++;
       } while (heights[start] < 20 && limit < 50);
 
@@ -223,7 +224,9 @@ window.HeightmapGenerator = (function () {
         limit++;
       } while ((dist < graphWidth / 8 || dist > graphWidth / 3) && limit < 50);
 
-      let range = getRange(findGridCell(startX, startY), findGridCell(endX, endY));
+      const startCell = findGridCell(startX, startY, grid);
+      const endCell = findGridCell(endX, endY, grid);
+      let range = getRange(startCell, endCell);
 
       // get main ridge
       function getRange(cur, end) {
@@ -305,7 +308,7 @@ window.HeightmapGenerator = (function () {
       do {
         startX = getPointInRange(rangeX, graphWidth);
         startY = getPointInRange(rangeY, graphHeight);
-        start = findGridCell(startX, startY);
+        start = findGridCell(startX, startY, grid);
         limit++;
       } while (heights[start] < 20 && limit < 50);
 
@@ -317,7 +320,7 @@ window.HeightmapGenerator = (function () {
         limit++;
       } while ((dist < graphWidth / 8 || dist > graphWidth / 2) && limit < 50);
 
-      let range = getRange(start, findGridCell(endX, endY));
+      let range = getRange(start, findGridCell(endX, endY, grid));
 
       // get main ridge
       function getRange(cur, end) {
@@ -388,8 +391,8 @@ window.HeightmapGenerator = (function () {
     const endX = vert ? Math.floor(graphWidth - startX - graphWidth * 0.1 + Math.random() * graphWidth * 0.2) : graphWidth - 5;
     const endY = vert ? graphHeight - 5 : Math.floor(graphHeight - startY - graphHeight * 0.1 + Math.random() * graphHeight * 0.2);
 
-    const start = findGridCell(startX, startY);
-    const end = findGridCell(endX, endY);
+    const start = findGridCell(startX, startY, grid);
+    const end = findGridCell(endX, endY, grid);
     let range = getRange(start, end);
     const query = [];
 
@@ -502,20 +505,16 @@ window.HeightmapGenerator = (function () {
   }
 
   function getHeightsFromImageData(imageData) {
-    const heights = new Uint8Array(grid.points.length);
     for (let i = 0; i < heights.length; i++) {
       const lightness = imageData[i * 4] / 255;
       const powered = lightness < 0.2 ? lightness : 0.2 + (lightness - 0.2) ** 0.8;
       heights[i] = minmax(Math.floor(powered * 100), 0, 100);
     }
-    return heights;
   }
 
   return {
-    setHeights,
-    resetHeights,
+    setGraph,
     getHeights,
-    cleanup,
     generate,
     fromTemplate,
     fromPrecreated,
diff --git a/modules/io/load.js b/modules/io/load.js
index 30736043..5bd8c69d 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -324,7 +324,11 @@ async function parseLoadedData(data) {
 
     void (function parseGridData() {
       grid = JSON.parse(data[6]);
-      calculateVoronoi(grid, grid.points);
+
+      const {cells, vertices} = calculateVoronoi(grid.points, grid.boundary);
+      grid.cells = cells;
+      grid.vertices = vertices;
+
       grid.cells.h = Uint8Array.from(data[7].split(","));
       grid.cells.prec = Uint8Array.from(data[8].split(","));
       grid.cells.f = Uint16Array.from(data[9].split(","));
@@ -333,7 +337,6 @@ async function parseLoadedData(data) {
     })();
 
     void (function parsePackData() {
-      pack = {};
       reGraph();
       reMarkFeatures();
       pack.features = JSON.parse(data[12]);
diff --git a/modules/io/save.js b/modules/io/save.js
index 8e0a74e8..db303eff 100644
--- a/modules/io/save.js
+++ b/modules/io/save.js
@@ -54,8 +54,8 @@ function getMapData() {
 
   const serializedSVG = new XMLSerializer().serializeToString(cloneEl);
 
-  const {spacing, cellsX, cellsY, boundary, points, features} = grid;
-  const gridGeneral = JSON.stringify({spacing, cellsX, cellsY, boundary, points, features});
+  const {spacing, cellsX, cellsY, boundary, points, features, cellsDesired} = grid;
+  const gridGeneral = JSON.stringify({spacing, cellsX, cellsY, boundary, points, features, cellsDesired});
   const packFeatures = JSON.stringify(pack.features);
   const cultures = JSON.stringify(pack.cultures);
   const states = JSON.stringify(pack.states);
diff --git a/modules/submap.js b/modules/submap.js
index dde13a19..ad35e38b 100644
--- a/modules/submap.js
+++ b/modules/submap.js
@@ -41,8 +41,7 @@ window.Submap = (function () {
 
     // create new grid
     applyMapSize();
-    placePoints();
-    calculateVoronoi(grid, grid.points);
+    grid = generateGrid();
     drawScaleBar(scale);
 
     const resampler = (points, qtree, f) => {
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 7cb0f5c3..533b3f47 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -81,10 +81,10 @@ function handleMouseMove() {
   if (i === undefined) return;
 
   showNotes(d3.event);
-  const g = findGridCell(point[0], point[1]); // grid cell id
+  const gridCell = findGridCell(point[0], point[1], grid);
   if (tooltip.dataset.main) showMainTip();
-  else showMapTooltip(point, d3.event, i, g);
-  if (cellInfo?.offsetParent) updateCellInfo(point, i, g);
+  else showMapTooltip(point, d3.event, i, gridCell);
+  if (cellInfo?.offsetParent) updateCellInfo(point, i, gridCell);
 }
 
 // show note box on hover (if any)
@@ -244,7 +244,7 @@ function updateCellInfo(point, i, g) {
   infoCell.innerHTML = i;
   infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
   infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
-  infoDepth.innerHTML = getDepth(pack.features[f], pack.cells.h[i], point);
+  infoDepth.innerHTML = getDepth(pack.features[f], point);
   infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
   infoPrec.innerHTML = cells.h[i] >= 20 ? getFriendlyPrecipitation(i) : "n/a";
   infoRiver.innerHTML = cells.h[i] >= 20 && cells.r[i] ? getRiverInfo(cells.r[i]) : "no";
@@ -276,11 +276,11 @@ function getElevation(f, h) {
 }
 
 // get water depth
-function getDepth(f, h, p) {
+function getDepth(f, p) {
   if (f.land) return "0 " + heightUnit.value; // land: 0
 
   // lake: difference between surface and bottom
-  const gridH = grid.cells.h[findGridCell(p[0], p[1])];
+  const gridH = grid.cells.h[findGridCell(p[0], p[1], grid)];
   if (f.type === "lake") {
     const depth = gridH === 19 ? f.height / 2 : gridH;
     return getHeight(depth, "abs");
@@ -290,9 +290,9 @@ function getDepth(f, h, p) {
 }
 
 // get user-friendly (real-world) height value from map data
-function getFriendlyHeight(p) {
-  const packH = pack.cells.h[findCell(p[0], p[1])];
-  const gridH = grid.cells.h[findGridCell(p[0], p[1])];
+function getFriendlyHeight([x, y]) {
+  const packH = pack.cells.h[findCell(x, y, grid)];
+  const gridH = grid.cells.h[findGridCell(x, y, grid)];
   const h = packH < 20 ? gridH : packH;
   return getHeight(h);
 }
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 23974ad4..aab80c48 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -117,7 +117,7 @@ function editHeightmap(options) {
 
   function moveCursor() {
     const [x, y] = d3.mouse(this);
-    const cell = findGridCell(x, y);
+    const cell = findGridCell(x, y, grid);
     heightmapInfoX.innerHTML = rn(x);
     heightmapInfoY.innerHTML = rn(y);
     heightmapInfoCell.innerHTML = cell;
@@ -605,8 +605,8 @@ function editHeightmap(options) {
 
     function dragBrush() {
       const r = brushRadius.valueAsNumber;
-      const point = d3.mouse(this);
-      const start = findGridCell(point[0], point[1]);
+      const [x, y] = d3.mouse(this);
+      const start = findGridCell(x, y, grid);
 
       d3.event.on("drag", () => {
         const p = d3.mouse(this);
@@ -664,7 +664,7 @@ function editHeightmap(options) {
       if (Number.isNaN(operand)) return tip("Operand should be a number", false, "error");
       if ((operator === "add" || operator === "subtract") && !Number.isInteger(operand)) return tip("Operand should be an integer", false, "error");
 
-      HeightmapGenerator.setHeights(grid.cells.h);
+      HeightmapGenerator.setGraph(grid);
 
       if (operator === "multiply") HeightmapGenerator.modify(range, 0, operand, 0);
       else if (operator === "divide") HeightmapGenerator.modify(range, 0, 1 / operand, 0);
@@ -673,15 +673,13 @@ function editHeightmap(options) {
       else if (operator === "exponent") HeightmapGenerator.modify(range, 0, 1, operand);
 
       grid.cells.h = HeightmapGenerator.getHeights();
-      HeightmapGenerator.cleanup();
       updateHeightmap();
     }
 
     function smoothAllHeights() {
-      HeightmapGenerator.setHeights(grid.cells.h);
+      HeightmapGenerator.setGraph(grid);
       HeightmapGenerator.smooth(4, 1.5);
       grid.cells.h = HeightmapGenerator.getHeights();
-      HeightmapGenerator.cleanup();
       updateHeightmap();
     }
 
@@ -940,11 +938,8 @@ function editHeightmap(options) {
       const seed = byId("templateSeed").value;
       if (seed) Math.random = aleaPRNG(seed);
 
-      const heights = new Uint8Array(grid.points.length);
-      // use cells number of the current graph, no matter what UI input value is
-      const cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
-      HeightmapGenerator.setHeights(heights, cellsDesired);
-
+      grid.cells.h = createTypedArray({maxValue: 100, length: grid.points.length});
+      HeightmapGenerator.setGraph(grid);
       restartHistory();
 
       for (const step of steps) {
@@ -973,7 +968,6 @@ function editHeightmap(options) {
       }
 
       grid.cells.h = HeightmapGenerator.getHeights();
-      HeightmapGenerator.cleanup();
       updateStatistics();
       mockHeightmap();
       if (byId("preview")) drawHeightmapPreview(); // update heightmap preview if opened
diff --git a/modules/ui/ice-editor.js b/modules/ui/ice-editor.js
index 5951e7aa..f07cb6f9 100644
--- a/modules/ui/ice-editor.js
+++ b/modules/ui/ice-editor.js
@@ -65,8 +65,8 @@ function editIce() {
   }
 
   function addIcebergOnClick() {
-    const point = d3.mouse(this);
-    const i = findGridCell(point[0], point[1]);
+    const [x, y] = d3.mouse(this);
+    const i = findGridCell(x, y, grid);
     const c = grid.points[i];
     const s = +document.getElementById("iceSize").value;
 
diff --git a/utils/arrayUtils.js b/utils/arrayUtils.js
index a7f0c35f..5fa9c81d 100644
--- a/utils/arrayUtils.js
+++ b/utils/arrayUtils.js
@@ -1,7 +1,5 @@
 "use strict";
-// FMG utils related to arrays
 
-// return the last element of array
 function last(array) {
   return array[array.length - 1];
 }
@@ -37,9 +35,24 @@ function deepCopy(obj) {
     [Set, s => [...s.values()].map(dcAny)],
     [Date, d => new Date(d.getTime())],
     [Object, dcObject]
-    // other types will be referenced
     // ... extend here to implement their custom deep copy
   ]);
 
   return dcAny(obj);
 }
+
+function getTypedArray(maxValue) {
+  console.assert(
+    Number.isInteger(maxValue) && maxValue >= 0 && maxValue <= 4294967295,
+    `Array maxValue must be an integer between 0 and 4294967295, got ${maxValue}`
+  );
+
+  if (maxValue <= 255) return Uint8Array;
+  if (maxValue <= 65535) return Uint16Array;
+  if (maxValue <= 4294967295) return Uint32Array;
+  return Uint32Array;
+}
+
+function createTypedArray({maxValue, length}) {
+  return new (getTypedArray(maxValue))(length);
+}
diff --git a/utils/graphUtils.js b/utils/graphUtils.js
index 3755f7c1..b345e286 100644
--- a/utils/graphUtils.js
+++ b/utils/graphUtils.js
@@ -1,7 +1,60 @@
 "use strict";
 // FMG utils related to graph
 
-// add boundary points to pseudo-clip voronoi cells
+// check if new grid graph should be generated or we can use the existing one
+function shouldRegenerateGrid(grid) {
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  if (cellsDesired !== grid.cellsDesired) return true;
+
+  const newSpacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2);
+  const newCellsX = Math.floor((graphWidth + 0.5 * newSpacing - 1e-10) / newSpacing);
+  const newCellsY = Math.floor((graphHeight + 0.5 * newSpacing - 1e-10) / newSpacing);
+
+  return grid.spacing !== newSpacing || grid.cellsX !== newCellsX || grid.cellsY !== newCellsY;
+}
+
+function generateGrid() {
+  Math.random = aleaPRNG(seed); // reset PRNG
+  const {spacing, cellsDesired, boundary, points, cellsX, cellsY} = placePoints();
+  const {cells, vertices} = calculateVoronoi(points, boundary);
+  return {spacing, cellsDesired, boundary, points, cellsX, cellsY, cells, vertices};
+}
+
+// place random points to calculate Voronoi diagram
+function placePoints() {
+  TIME && console.time("placePoints");
+  const cellsDesired = +byId("pointsInput").dataset.cells;
+  const spacing = rn(Math.sqrt((graphWidth * graphHeight) / cellsDesired), 2); // spacing between points before jirrering
+
+  const boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
+  const points = getJitteredGrid(graphWidth, graphHeight, spacing); // points of jittered square grid
+  const cellsX = Math.floor((graphWidth + 0.5 * spacing - 1e-10) / spacing);
+  const cellsY = Math.floor((graphHeight + 0.5 * spacing - 1e-10) / spacing);
+  TIME && console.timeEnd("placePoints");
+
+  return {spacing, cellsDesired, boundary, points, cellsX, cellsY};
+}
+
+// calculate Delaunay and then Voronoi diagram
+function calculateVoronoi(points, boundary) {
+  TIME && console.time("calculateDelaunay");
+  const allPoints = points.concat(boundary);
+  const delaunay = Delaunator.from(allPoints);
+  TIME && console.timeEnd("calculateDelaunay");
+
+  TIME && console.time("calculateVoronoi");
+  const n = points.length;
+  const voronoi = new Voronoi(delaunay, allPoints, n);
+
+  const cells = voronoi.cells;
+  cells.i = getTypedArray(n).from(d3.range(n)); // array of indexes
+  const vertices = voronoi.vertices;
+  TIME && console.timeEnd("calculateVoronoi");
+
+  return {cells, vertices};
+}
+
+// add points along map edge to pseudo-clip voronoi cells
 function getBoundaryPoints(width, height, spacing) {
   const offset = rn(-1 * spacing);
   const bSpacing = spacing * 2;
@@ -9,15 +62,18 @@ function getBoundaryPoints(width, height, spacing) {
   const h = height - offset * 2;
   const numberX = Math.ceil(w / bSpacing) - 1;
   const numberY = Math.ceil(h / bSpacing) - 1;
-  let points = [];
+  const points = [];
+
   for (let i = 0.5; i < numberX; i++) {
     let x = Math.ceil((w * i) / numberX + offset);
     points.push([x, offset], [x, h + offset]);
   }
+
   for (let i = 0.5; i < numberY; i++) {
     let y = Math.ceil((h * i) / numberY + offset);
     points.push([offset, y], [w + offset, y]);
   }
+
   return points;
 }
 
@@ -40,7 +96,7 @@ function getJitteredGrid(width, height, spacing) {
 }
 
 // return cell index on a regular square grid
-function findGridCell(x, y) {
+function findGridCell(x, y, grid) {
   return Math.floor(Math.min(y / grid.spacing, grid.cellsY - 1)) * grid.cellsX + Math.floor(Math.min(x / grid.spacing, grid.cellsX - 1));
 }
 
@@ -48,7 +104,7 @@ function findGridCell(x, y) {
 function findGridAll(x, y, radius) {
   const c = grid.cells.c;
   let r = Math.floor(radius / grid.spacing);
-  let found = [findGridCell(x, y)];
+  let found = [findGridCell(x, y, grid)];
   if (!r || radius === 1) return found;
   if (r > 0) found = found.concat(c[found[0]]);
   if (r > 1) {

From 10b54a71b19d8bdafd54c980248549eff7d53cb8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 29 May 2022 23:16:08 +0300
Subject: [PATCH 15/18] heightmap-generation: redefine cells effect, more land
 on higher values

---
 modules/heightmap-generator.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js
index feae9c1e..66696953 100644
--- a/modules/heightmap-generator.js
+++ b/modules/heightmap-generator.js
@@ -91,33 +91,33 @@ window.HeightmapGenerator = (function () {
     const blobPowerMap = {
       1000: 0.93,
       2000: 0.95,
-      5000: 0.96,
+      5000: 0.97,
       10000: 0.98,
-      20000: 0.985,
-      30000: 0.987,
-      40000: 0.9892,
-      50000: 0.9911,
-      60000: 0.9921,
-      70000: 0.9934,
-      80000: 0.9942,
-      90000: 0.9946,
-      100000: 0.995
+      20000: 0.99,
+      30000: 0.991,
+      40000: 0.993,
+      50000: 0.994,
+      60000: 0.995,
+      70000: 0.9955,
+      80000: 0.996,
+      90000: 0.9964,
+      100000: 0.9973
     };
     return blobPowerMap[cells] || 0.98;
   }
 
   function getLinePower() {
     const linePowerMap = {
-      1000: 0.74,
-      2000: 0.75,
-      5000: 0.78,
+      1000: 0.75,
+      2000: 0.77,
+      5000: 0.79,
       10000: 0.81,
       20000: 0.82,
       30000: 0.83,
       40000: 0.84,
-      50000: 0.855,
+      50000: 0.86,
       60000: 0.87,
-      70000: 0.885,
+      70000: 0.88,
       80000: 0.91,
       90000: 0.92,
       100000: 0.93

From a392223ef6a0b18f0957c2cc3468df3192ca6902 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 30 May 2022 00:36:43 +0300
Subject: [PATCH 16/18] version info and hash update

---
 modules/dynamic/heightmap-selection.js | 27 +++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 90bfdec8..9318987d 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -120,20 +120,29 @@ function appendStyleSheet() {
       padding: 2px 1px;
     }
 
-    .heightmap-selection article > div > span.icon-cw:hover {
-      color: #000;
-    }
-
-    .heightmap-selection article > div > span.icon-cw:active {
-      color: #666;
-    }
-
     .heightmap-selection article > img {
       width: 100%;
       aspect-ratio: ${graphWidth}/${graphHeight};
       border-radius: 8px;
       object-fit: fill;
     }
+
+    .heightmap-selection article .regeneratePreview {
+      outline: 1px solid #bbb;
+      padding: 1px 3px;
+      border-radius: 4px;
+      transition: all 0.1s ease-in-out;
+    }
+
+    .heightmap-selection article .regeneratePreview:hover {
+      outline: 1px solid #666;
+    }
+
+    .heightmap-selection article .regeneratePreview:active {
+      outline: 1px solid #333;
+      color: #000;
+      transform: rotate(45deg);
+    }
   `;
 
   const style = document.createElement("style");
@@ -198,7 +207,7 @@ function insertEditorHtml() {
         <img src="${dataUrl}" alt="${name}" />
         <div>
           ${name}
-          <span data-tip="Regenerate preview" class="icon-cw"></span>
+          <span data-tip="Regenerate preview" class="icon-cw regeneratePreview"></span>
         </div>
       </article>`;
     })

From d5f202ba4729a3900afb30de5f8f19fb1e18aa02 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 30 May 2022 00:37:03 +0300
Subject: [PATCH 17/18] version info and hash update

---
 index.html            | 62 +++++++++++++++++++++----------------------
 main.js               |  4 ++-
 modules/io/load.js    |  2 +-
 modules/ui/editors.js |  4 +--
 modules/ui/options.js |  2 +-
 versioning.js         |  3 ++-
 6 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index a435d974..5bfc01b4 100644
--- a/index.html
+++ b/index.html
@@ -102,9 +102,9 @@
         }
       }
     </style>
-    <link rel="stylesheet" href="index.css?v=21052022" />
+    <link rel="stylesheet" href="index.css?v=29052022" />
     <link rel="stylesheet" href="icons.css" />
-    <link rel="stylesheet" href="libs/jquery-ui.css" />
+    <link rel="stylesheet" href="libs/jquery-ui.css?v=29052022" />
   </head>
   <body>
     <svg
@@ -6078,32 +6078,32 @@
 
     <script src="utils/shorthands.js"></script>
     <script src="utils/commonUtils.js"></script>
-    <script src="utils/arrayUtils.js?v=14052022"></script>
+    <script src="utils/arrayUtils.js?v=29052022"></script>
     <script src="utils/colorUtils.js"></script>
-    <script src="utils/graphUtils.js"></script>
+    <script src="utils/graphUtils.js?v=29052022"></script>
     <script src="utils/nodeUtils.js"></script>
     <script src="utils/numberUtils.js"></script>
     <script src="utils/polyfills.js"></script>
-    <script src="utils/probabilityUtils.js"></script>
+    <script src="utils/probabilityUtils.js?v=29052022"></script>
     <script src="utils/stringUtils.js"></script>
     <script src="utils/unitUtils.js"></script>
 
     <script src="modules/voronoi.js"></script>
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
-    <script src="modules/heightmap-generator.js?v=21052020"></script>
-    <script src="modules/ocean-layers.js"></script>
+    <script src="modules/heightmap-generator.js?v=29052020"></script>
+    <script src="modules/ocean-layers.js?v=29052022"></script>
     <script src="modules/river-generator.js"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/names-generator.js"></script>
     <script src="modules/cultures-generator.js"></script>
-    <script src="modules/burgs-and-states.js?v=15052022"></script>
+    <script src="modules/burgs-and-states.js?v=29052022"></script>
     <script src="modules/routes-generator.js"></script>
     <script src="modules/religions-generator.js"></script>
     <script src="modules/military-generator.js"></script>
     <script src="modules/markers-generator.js"></script>
     <script src="modules/coa-generator.js"></script>
-    <script src="modules/submap.js"></script>
+    <script src="modules/submap.js?v=29052022"></script>
     <script src="libs/polylabel.min.js"></script>
     <script src="libs/lineclip.min.js"></script>
     <script src="libs/alea.min.js"></script>
@@ -6112,23 +6112,23 @@
     <script src="modules/ui/measurers.js?v=18052022"></script>
     <script src="modules/ui/stylePresets.js"></script>
 
-    <script src="modules/ui/general.js?v=18052022"></script>
-    <script src="modules/ui/options.js?v=23052022"></script>
-    <script src="main.js?v=15052022"></script>
+    <script src="modules/ui/general.js?v=29052022"></script>
+    <script src="modules/ui/options.js?v=29052022"></script>
+    <script src="main.js?v=29052022"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
-    <script defer src="modules/ui/editors.js?v=18052022"></script>
-    <script defer src="modules/ui/tools.js"></script>
-    <script defer src="modules/ui/world-configurator.js"></script>
-    <script defer src="modules/ui/heightmap-editor.js?v=21052020"></script>
-    <script defer src="modules/ui/provinces-editor.js?v=19052022"></script>
-    <script defer src="modules/ui/biomes-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/editors.js?v=29052022"></script>
+    <script defer src="modules/ui/tools.js?v=29052022"></script>
+    <script defer src="modules/ui/world-configurator.js?v=29052022"></script>
+    <script defer src="modules/ui/heightmap-editor.js?v=29052020"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=29052022"></script>
+    <script defer src="modules/ui/biomes-editor.js?v=29052022"></script>
     <script defer src="modules/ui/namesbase-editor.js"></script>
-    <script defer src="modules/ui/elevation-profile.js"></script>
+    <script defer src="modules/ui/elevation-profile.js?v=29052022"></script>
     <script defer src="modules/ui/temperature-graph.js"></script>
     <script defer src="modules/ui/routes-editor.js"></script>
-    <script defer src="modules/ui/ice-editor.js"></script>
+    <script defer src="modules/ui/ice-editor.js?v=29052022"></script>
     <script defer src="modules/ui/lakes-editor.js?v=18052022"></script>
     <script defer src="modules/ui/coastline-editor.js?v=18052022"></script>
     <script defer src="modules/ui/labels-editor.js"></script>
@@ -6138,30 +6138,30 @@
     <script defer src="modules/ui/religions-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burg-editor.js"></script>
     <script defer src="modules/ui/units-editor.js"></script>
-    <script defer src="modules/ui/notes-editor.js"></script>
+    <script defer src="modules/ui/notes-editor.js?v=29052022"></script>
     <script defer src="modules/ui/diplomacy-editor.js"></script>
     <script defer src="modules/ui/zones-editor.js?v=18052022"></script>
-    <script defer src="modules/ui/burgs-overview.js"></script>
-    <script defer src="modules/ui/rivers-overview.js"></script>
-    <script defer src="modules/ui/military-overview.js"></script>
-    <script defer src="modules/ui/regiments-overview.js"></script>
-    <script defer src="modules/ui/markers-overview.js"></script>
+    <script defer src="modules/ui/burgs-overview.js?v=29052022"></script>
+    <script defer src="modules/ui/rivers-overview.js?v=29052022"></script>
+    <script defer src="modules/ui/military-overview.js?v=29052022"></script>
+    <script defer src="modules/ui/regiments-overview.js?v=29052022"></script>
+    <script defer src="modules/ui/markers-overview.js?v=29052022"></script>
     <script defer src="modules/ui/regiment-editor.js"></script>
     <script defer src="modules/ui/battle-screen.js"></script>
     <script defer src="modules/ui/emblems-editor.js"></script>
     <script defer src="modules/ui/markers-editor.js"></script>
     <script defer src="modules/ui/3d.js"></script>
-    <script defer src="modules/ui/submap.js"></script>
-    <script defer src="modules/ui/hotkeys.js?v=17052022"></script>
+    <script defer src="modules/ui/submap.js?v=29052022"></script>
+    <script defer src="modules/ui/hotkeys.js?v=29052022"></script>
     <script defer src="modules/coa-renderer.js"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
     <script defer src="libs/jszip.min.js"></script>
 
-    <script defer src="modules/io/save.js"></script>
-    <script defer src="modules/io/load.js?v=15052022-5"></script>
+    <script defer src="modules/io/save.js?v=29052022"></script>
+    <script defer src="modules/io/load.js?v=29052022"></script>
     <script defer src="modules/io/cloud.js?v=24052022"></script>
-    <script defer src="modules/io/export.js"></script>
+    <script defer src="modules/io/export.js?v=29052022"></script>
     <script defer src="modules/io/export-json.js"></script>
     <script defer src="modules/io/formats.js"></script>
 
diff --git a/main.js b/main.js
index 2b4356b6..2d402d64 100644
--- a/main.js
+++ b/main.js
@@ -1912,8 +1912,8 @@ const regenerateMap = debounce(async function (options) {
 
   const cellsDesired = +byId("pointsInput").dataset.cells;
   const shouldShowLoading = cellsDesired > 10000;
-
   shouldShowLoading && showLoading();
+
   closeDialogs("#worldConfigurator, #options3d");
   customization = 0;
   resetZoom(1000);
@@ -1922,7 +1922,9 @@ const regenerateMap = debounce(async function (options) {
   restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
+
   shouldShowLoading && hideLoading();
+  clearMainTip();
 }, 1000);
 
 // clear the map
diff --git a/modules/io/load.js b/modules/io/load.js
index 5bd8c69d..acf05abe 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -427,7 +427,7 @@ async function parseLoadedData(data) {
     {
       // dynamically import and run auto-udpdate script
       const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=29052022");
       resolveVersionConflicts(versionNumber);
     }
 
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 494a6270..97f28a27 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -1119,12 +1119,12 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const StateEditor = await import("../dynamic/editors/states-editor.js?v=20052022");
+  const StateEditor = await import("../dynamic/editors/states-editor.js?v=29052022");
   StateEditor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=20052022");
+  const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=29052022");
   CulturesEditor.open();
 }
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 522c50ea..c874e0ac 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -623,7 +623,7 @@ function changeEra() {
 }
 
 async function openTemplateSelectionDialog() {
-  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js");
+  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=290520222");
   HeightmapSelectionDialog.open();
 }
 
diff --git a/versioning.js b/versioning.js
index 3a934a0a..b6f62996 100644
--- a/versioning.js
+++ b/versioning.js
@@ -28,6 +28,8 @@ const version = "1.84.0"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
+        <li>Heightmap selection screen</li>
+        <li>Dialogs optimization for mobile</li>
         <li>New heightmap template: Fractious</li>
         <li>Template Editor: mask and invert tools</li>
         <li>Ability to install the App</li>
@@ -36,7 +38,6 @@ const version = "1.84.0"; // generator version, update each time
         <li>Submap tool by Goteguru</li>
         <li>Resample tool by Goteguru</li>
         <li>Pre-defined heightmaps</li>
-        <li>Advanced notes editor</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>

From 90b80424fe5704057cc56a118d1a80e1c21bc195 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 1 Jun 2022 01:04:35 +0300
Subject: [PATCH 18/18] loading screen size update

---
 index.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 5bfc01b4..d46757e8 100644
--- a/index.html
+++ b/index.html
@@ -44,26 +44,28 @@
         color: #fff5da;
         text-align: center;
         text-shadow: 0px 1px 4px #4c3a35;
-        width: 80%;
-        max-width: 600px;
+        width: 80vw;
+        max-width: 540px;
       }
-      #loading-text {
-        font-size: 1.8em;
-        margin: 0.2em 0 0 1em;
+      @media screen and (max-width: 600px) {
+        #loading > #loading-typography {
+          font-size: 8px;
+        }
       }
       #titleName {
         text-align: left;
         font-size: 3em;
-        margin-left: 5%;
       }
       #title {
         font-size: 7em;
-        margin: -12px 0 -6px 0;
       }
       #versionText {
         text-align: right;
         font-size: 2em;
-        margin-right: 3%;
+      }
+      #loading-text {
+        font-size: 2em;
+        margin: 0.2em;
       }
       #loading-text > span {
         font-size: 1.3em;
@@ -274,12 +276,10 @@
         <use href="#rose" x="50%" y="50%" />
       </svg>
       <div id="loading-typography">
-        <div>
-          <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
-          <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
-          <div id="versionText"><t data-t="version">v. </t><span id="version"></span></div>
-          <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
-        </div>
+        <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
+        <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
+        <div id="versionText"><t data-t="version">v</t><span id="version"></span></div>
+        <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
       </div>
     </div>