refactor: dynamically load modules

index.html

@@ -1425,9 +1425,9 @@
               <td></td>
               <td>Canvas size</td>
               <td>
-                <input id="mapWidthInput" class="paired" type="number" min="240" value="960" />
+                <input id="mapWidthInput" class="paired" type="number" min="240" />
                 <span>x</span>
-                <input id="mapHeightInput" class="paired" type="number" min="135" value="540" />
+                <input id="mapHeightInput" class="paired" type="number" min="135" />
                 <span>px</span>
               </td>
               <td>
@@ -7688,34 +7688,6 @@
     <script type="module" src="/src/modules/ui/style.js"></script>
     <script type="module" src="/src/modules/ui/editors.js"></script>
     <script type="module" src="/src/modules/ui/tools.js"></script>
-    <script type="module" src="/src/modules/ui/world-configurator.js"></script>
-    <script type="module" src="/src/modules/ui/heightmap-editor.js"></script>
-    <script type="module" src="/src/modules/ui/provinces-editor.js"></script>
-    <script type="module" src="/src/modules/ui/biomes-editor.js"></script>
-    <script type="module" src="/src/modules/ui/namesbase-editor.js"></script>
-    <script type="module" src="/src/modules/ui/elevation-profile.js"></script>
-    <script type="module" src="/src/modules/ui/temperature-graph.js"></script>
-    <script type="module" src="/src/modules/ui/routes-editor.js"></script>
-    <script type="module" src="/src/modules/ui/ice-editor.js"></script>
-    <script type="module" src="/src/modules/ui/lakes-editor.js"></script>
-    <script type="module" src="/src/modules/ui/coastline-editor.js"></script>
-    <script type="module" src="/src/modules/ui/labels-editor.js"></script>
-    <script type="module" src="/src/modules/ui/rivers-editor.js"></script>
-    <script type="module" src="/src/modules/ui/rivers-creator.js"></script>
-    <script type="module" src="/src/modules/ui/relief-editor.js"></script>
-    <script type="module" src="/src/modules/ui/burg-editor.js"></script>
-    <script type="module" src="/src/modules/ui/notes-editor.js"></script>
-    <script type="module" src="/src/modules/ui/diplomacy-editor.js"></script>
-    <script type="module" src="/src/modules/ui/zones-editor.js"></script>
-    <script type="module" src="/src/modules/ui/burgs-overview.js"></script>
-    <script type="module" src="/src/modules/ui/rivers-overview.js"></script>
-    <script type="module" src="/src/modules/ui/military-overview.js"></script>
-    <script type="module" src="/src/modules/ui/regiments-overview.js"></script>
-    <script type="module" src="/src/modules/ui/markers-overview.js"></script>
-    <script type="module" src="/src/modules/ui/regiment-editor.js"></script>
-    <script type="module" src="/src/modules/ui/battle-screen.js"></script>
-    <script type="module" src="/src/modules/ui/emblems-editor.js"></script>
-    <script type="module" src="/src/modules/ui/markers-editor.js"></script>
     <script type="module" src="/src/modules/ui/threeD.js"></script>
     <script type="module" src="/src/modules/ui/submap.js"></script>
     <script type="module" src="/src/modules/ui/hotkeys.js"></script>

src/dialogs/dialogs/biomes-editor.js

@@ -7,9 +7,9 @@ import {getRandomColor} from "utils/colorUtils";
 import {openURL} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
 import {si} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
-export function editBiomes() {
+export function open() {
-  if (customization) return;
   closeDialogs("#biomesEditor, .stable");
   if (!layerIsOn("toggleBiomes")) toggleBiomes();
   if (layerIsOn("toggleStates")) toggleStates();

src/dialogs/dialogs/burg-editor.js

@@ -1,14 +1,19 @@
 import * as d3 from "d3";
 
-import {findCell} from "utils/graphUtils";
+import {closeDialogs} from "dialogs/utils";
-import {tip, clearMainTip} from "scripts/tooltips";
+import {layerIsOn} from "layers";
-import {rn} from "utils/numberUtils";
 import {prompt} from "scripts/prompt";
+import {clearMainTip, tip} from "scripts/tooltips";
+import {findCell} from "utils/graphUtils";
+import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
-import {getHeight} from "utils/unitUtils";
+import {convertTemperature, getHeight} from "utils/unitUtils";
+import {getMFCGlink, getBurgSeed} from "modules/ui/editors";
 
-export function editBurg(id) {
+let isLoaded = false;
+
+export function open({id} = {}) {
   if (customization) return;
   closeDialogs(".stable");
   if (!layerIsOn("toggleIcons")) toggleIcons();
@@ -26,8 +31,8 @@ export function editBurg(id) {
     position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"}
   });
 
-  if (fmg.modules.editBurg) return;
+  if (isLoaded) return;
-  fmg.modules.editBurg = true;
+  isLoaded = true;
 
   // add listeners
   document.getElementById("burgGroupShow").addEventListener("click", showGroupSection);

src/dialogs/dialogs/charts-overview.js

@@ -7,6 +7,7 @@ import {rn} from "utils/numberUtils";
 import {capitalize} from "utils/stringUtils";
 import {si, convertTemperature, getFriendlyPrecipitation} from "utils/unitUtils";
 import {rollups} from "utils/functionUtils";
+import {closeDialogs} from "dialogs/utils";
 
 const entitiesMap = {
   states: {

src/dialogs/dialogs/cultures-editor.js

@@ -9,6 +9,8 @@ import {capitalize} from "utils/stringUtils";
 import {si} from "utils/unitUtils";
 import {abbreviate} from "utils/languageUtils";
 import {debounce} from "utils/functionUtils";
+import {closeDialogs} from "dialogs/utils";
+import {openDialog} from "dialogs";
 
 const $body = insertEditorHtml();
 addListeners();
@@ -639,9 +641,6 @@ function togglePercentageMode() {
 }
 
 async function showHierarchy() {
-  if (customization) return;
-  const HeirarchyTree = await import("../hierarchy-tree.js");
-
   const getDescription = culture => {
     const {name, type, rural, urban} = culture;
 
@@ -660,7 +659,7 @@ async function showHierarchy() {
     if (type === "Hunting") return "pentagon";
   };
 
-  HeirarchyTree.open({
+  openDialog("hierarchyTree", null, {
     type: "cultures",
     data: pack.cultures,
     onNodeEnter: cultureHighlightOn,

src/dialogs/dialogs/heightmap-selection.js

@@ -7,6 +7,7 @@ import {byId} from "utils/shorthands";
 import {generateSeed} from "utils/probabilityUtils";
 import {getColorScheme} from "utils/colorUtils";
 import {aleaPRNG} from "scripts/aleaPRNG";
+import {closeDialogs} from "dialogs/utils";
 
 const initialSeed = generateSeed();
 let graph = getGraph(grid);

src/dialogs/dialogs/hierarchy-tree.js

@@ -3,6 +3,7 @@ import * as d3 from "d3";
 import {byId} from "utils/shorthands";
 import {tip} from "scripts/tooltips";
 import {capitalize} from "utils/stringUtils";
+import {closeDialogs} from "dialogs/utils";
 
 appendStyleSheet();
 insertHtml();

src/dialogs/dialogs/religions-editor.js

@@ -8,6 +8,8 @@ import {rn} from "utils/numberUtils";
 import {si} from "utils/unitUtils";
 import {abbreviate} from "utils/languageUtils";
 import {debounce} from "utils/functionUtils";
+import {closeDialogs} from "dialogs/utils";
+import {openDialog} from "dialogs";
 
 const $body = insertEditorHtml();
 addListeners();
@@ -543,9 +545,6 @@ function togglePercentageMode() {
 }
 
 async function showHierarchy() {
-  if (customization) return;
-  const HeirarchyTree = await import("../hierarchy-tree.js");
-
   const getDescription = religion => {
     const {name, type, form, rural, urban} = religion;
 
@@ -570,7 +569,7 @@ async function showHierarchy() {
     if (type === "Heresy") return "diamond";
   };
 
-  HeirarchyTree.open({
+  openDialog("hierarchyTree", null, {
     type: "religions",
     data: pack.religions,
     onNodeEnter: religionHighlightOn,

src/dialogs/dialogs/states-editor.js

@@ -9,6 +9,7 @@ import {rn} from "utils/numberUtils";
 import {rand, P} from "utils/probabilityUtils";
 import {si} from "utils/unitUtils";
 import {getAdjective} from "utils/languageUtils";
+import {closeDialogs} from "dialogs/utils";
 
 const $body = insertEditorHtml();
 addListeners();

src/dialogs/dialogs/units-editor.js

@@ -4,6 +4,8 @@ import {restoreDefaultEvents} from "scripts/events";
 import {findCell} from "utils/graphUtils";
 import {tip} from "scripts/tooltips";
 import {prompt} from "scripts/prompt";
+import {closeDialogs} from "dialogs/utils";
+import {fitScaleBar} from "modules/measurers";
 
 export function open() {
   closeDialogs("#unitsEditor, .stable");

src/dialogs/index.ts

@@ -0,0 +1,27 @@
+const dialogsMap = {
+  biomesEditor: "biomes-editor",
+  burgEditor: "burg-editor",
+  chartsOverview: "charts-overview",
+  culturesEditor: "cultures-editor",
+  heightmapSelection: "heightmap-selection",
+  hierarchyTree: "hierarchy-tree",
+  religionsEditor: "religions-editor",
+  statesEditor: "states-editor",
+  unitsEditor: "units-editor"
+};
+
+type TDialog = keyof typeof dialogsMap;
+
+const defaultOptions = {
+  allowDuringCustomization: false
+};
+
+// dynamically load UI dialog
+// dialog is a es module with the only exported function 'open'
+export async function openDialog(dialog: TDialog, options: null | typeof defaultOptions, props?: UnknownObject) {
+  const {allowDuringCustomization} = options || defaultOptions;
+  if (customization && !allowDuringCustomization) return;
+
+  const Dialog = await import(`./dialogs/${dialogsMap[dialog]}.js`);
+  Dialog.open(props);
+}

src/dialogs/utils.ts

@@ -0,0 +1,10 @@
+// close all dialogs except stated
+export function closeDialogs(except = "#except") {
+  try {
+    $(".dialog:visible")
+      .not(except)
+      .each(function () {
+        $(this).dialog("close");
+      });
+  } catch (error) {}
+}

src/layers/toggles.ts

@@ -3,13 +3,12 @@ import * as d3 from "d3";
 import {tip} from "scripts/tooltips";
 import {getBase64} from "utils/functionUtils";
 import {isCtrlPressed} from "utils/keyboardUtils";
+import {openDialog} from "dialogs";
 // @ts-expect-error js module
-import {editStyle, calculateFriendlyGridSize, shiftCompass} from "modules/ui/style";
+import {calculateFriendlyGridSize, editStyle, shiftCompass} from "modules/ui/style";
-import {turnLayerButtonOn, turnLayerButtonOff, layerIsOn} from "./utils";
-import {renderLayer} from "./renderers";
 import {getInputNumber, getInputValue} from "utils/nodeUtils";
-// @ts-expect-error js module
+import {renderLayer} from "./renderers";
-import {editUnits} from "modules/ui/editors";
+import {layerIsOn, turnLayerButtonOff, turnLayerButtonOn} from "./utils";
 
 const layerTogglesMap = {
   toggleBiomes,
@@ -467,9 +466,9 @@ function toggleScaleBar(event?: MouseEvent) {
   if (!layerIsOn("toggleScaleBar")) {
     turnLayerButtonOn("toggleScaleBar");
     $("#scaleBar").fadeIn();
-    if (isCtrlPressed(event)) editUnits();
+    if (isCtrlPressed(event)) openDialog("unitsEditor");
   } else {
-    if (isCtrlPressed(event)) editUnits();
+    if (isCtrlPressed(event)) openDialog("unitsEditor");
     else {
       $("#scaleBar").fadeOut();
       turnLayerButtonOff("toggleScaleBar");

src/main.ts

@@ -11,14 +11,8 @@ import {Rulers} from "./modules/measurers";
 // @ts-expect-error js-module
 import {applyStoredOptions} from "./modules/ui/options";
 import {addGlobalListeners} from "./scripts/listeners";
-import {tip} from "./scripts/tooltips";
 import {checkForUpdates} from "./scripts/updater";
 import {getInputNumber} from "utils/nodeUtils";
-// @ts-expect-error js module
-import {editUnits} from "modules/ui/editors";
-
-checkForUpdates();
-addGlobalListeners();
 
 window.fmg = {
   modules: {}
@@ -32,14 +26,15 @@ options = {
   stateLabelsMode: "auto"
 };
 
+checkForUpdates();
+applyStoredOptions();
+
 populationRate = getInputNumber("populationRateInput");
 distanceScale = getInputNumber("distanceScaleInput");
 urbanization = getInputNumber("urbanizationInput");
 urbanDensity = getInputNumber("urbanDensityInput");
 statesNeutral = 1; // statesEditor growth parameter
 
-applyStoredOptions();
-
 rulers = new Rulers();
 biomesData = window.Biomes.getDefault();
 nameBases = window.Names.getNameBases(); // cultures-related data
@@ -53,8 +48,4 @@ svgWidth = graphWidth;
 svgHeight = graphHeight;
 
 defineSvg(graphWidth, graphHeight);
-
+addGlobalListeners();
-scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", editUnits);
-legend
-  .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
-  .on("click", () => clearLegend());

src/modules/dynamic/export-json.js

@@ -1,4 +1,5 @@
 import {tip} from "scripts/tooltips";
+import {closeDialogs} from "dialogs/utils";
 
 export function exportToJson(type) {
   if (customization)

src/modules/io/load.js

@@ -11,7 +11,7 @@ import {link} from "utils/linkUtils";
 import {minmax, rn} from "utils/numberUtils";
 import {regenerateMap} from "scripts/generation";
 import {reMarkFeatures} from "modules/markup";
-import {editUnits} from "modules/ui/editors";
+import {closeDialogs} from "dialogs/utils";
 
 // add drag to upload logic, pull request from @evyatron
 export function addDragToUpload() {
@@ -480,13 +480,6 @@ async function parseLoadedData(data) {
       updatePresetInput();
     })();
 
-    void (function restoreEvents() {
-      scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", editUnits);
-      legend
-        .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
-        .on("click", () => clearLegend());
-    })();
-
     {
       // dynamically import and run auto-udpdate script
       const versionNumber = parseFloat(params[0]);

src/modules/io/save.js

@@ -2,6 +2,7 @@ import {tip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {ldb} from "scripts/indexedDB";
 import {ra} from "utils/probabilityUtils";
+import {closeDialogs} from "dialogs/utils";
 
 // functions to save project as .map file
 

src/modules/ui/battle-screen.js

@@ -7,6 +7,7 @@ import {rn, minmax} from "utils/numberUtils";
 import {rand, P, Pint} from "utils/probabilityUtils";
 import {capitalize} from "utils/stringUtils";
 import {getAdjective, list} from "utils/languageUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export class Battle {
   constructor(attacker, defender) {
@@ -172,35 +173,38 @@ export class Battle {
     const state = pack.states[regiment.state];
     const distance = (Math.hypot(this.y - regiment.by, this.x - regiment.bx) * distanceScaleInput.value) | 0; // distance between regiment and its base
     const color = state.color[0] === "#" ? state.color : "#999";
-    const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em; stroke: #333">
+    const icon = /* html */ `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em; stroke: #333">
       <rect x="0" y="0" width="100%" height="100%" fill="${color}"></rect>
       <text x="0" y="1.04em" style="">${regiment.icon}</text></svg>`;
     const body = `<tbody id="battle${state.i}-${regiment.i}">`;
 
-    let initial = `<tr class="battleInitial"><td>${icon}</td><td class="regiment" data-tip="${
+    let initial = /* html */ `<tr class="battleInitial">
-      regiment.name
+      <td>${icon}</td>
-    }">${regiment.name.slice(0, 24)}</td>`;
+      <td class="regiment" data-tip="${regiment.name}">${regiment.name.slice(0, 24)}</td>
-    let casualties = `<tr class="battleCasualties"><td></td><td data-tip="${state.fullName}">${state.fullName.slice(
+    `;
-      0,
+
-      26
+    let casualties = /* html */ `<tr class="battleCasualties">
-    )}</td>`;
+      <td></td>
-    let survivors = `<tr class="battleSurvivors"><td></td><td data-tip="Supply line length, affects morale">Distance to base: ${distance} ${distanceUnitInput.value}</td>`;
+      <td data-tip="${state.fullName}">${state.fullName.slice(0, 26)}</td>
+    `;
+
+    let survivors = /* html */ `<tr class="battleSurvivors">
+      <td></td>
+      <td data-tip="Supply line length, affects morale">Distance to base: ${distance} ${distanceUnitInput.value}</td>
+    `;
 
     for (const u of options.military) {
-      initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${
+      initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">
-        regiment.u[u.name] || 0
+        ${regiment.u[u.name] || 0}</td>`;
-      }</td>`;
       casualties += `<td data-tip="Casualties" style="width: 2.5em; text-align: center; color: red">0</td>`;
-      survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${
+      survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">
-        regiment.u[u.name] || 0
+        ${regiment.u[u.name] || 0}</td>`;
-      }</td>`;
     }
 
     initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${regiment.a || 0}</td></tr>`;
     casualties += `<td data-tip="Casualties"  style="width: 2.5em; text-align: center; color: red">0</td></tr>`;
-    survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${
+    survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">
-      regiment.a || 0
+      ${regiment.a || 0}</td></tr>`;
-    }</td></tr>`;
 
     const div = side === "attackers" ? battleAttackers : battleDefenders;
     div.innerHTML += body + initial + casualties + survivors + "</tbody>";

src/modules/ui/burgs-overview.js

@@ -7,6 +7,8 @@ import {getCoordinates} from "utils/coordinateUtils";
 import {rn} from "utils/numberUtils";
 import {si, siToInteger} from "utils/unitUtils";
 import {getHeight} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
+import {openDialog} from "dialogs";
 
 export function overviewBurgs() {
   if (customization) return;
@@ -241,8 +243,7 @@ export function overviewBurgs() {
   }
 
   function openBurgEditor() {
-    const burg = +this.parentNode.dataset.id;
+    openDialog("burgEditor", null, {id: +this.parentNode.dataset.id});
-    editBurg(burg);
   }
 
   function triggerBurgRemove() {

src/modules/ui/coastline-editor.js

@@ -6,6 +6,7 @@ import {clipPoly} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {round} from "utils/stringUtils";
 import {si} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editCoastline(node = d3.event.target) {
   if (customization) return;

src/modules/ui/diplomacy-editor.js

@@ -3,6 +3,7 @@ import * as d3 from "d3";
 import {restoreDefaultEvents} from "scripts/events";
 import {findCell} from "utils/graphUtils";
 import {tip, clearMainTip} from "scripts/tooltips";
+import {closeDialogs} from "dialogs/utils";
 
 export function editDiplomacy() {
   if (customization) return;

src/modules/ui/editors.js

@@ -6,6 +6,7 @@ import {byId} from "utils/shorthands";
 import {tip} from "scripts/tooltips";
 import {rn, minmax, normalize} from "utils/numberUtils";
 import {parseTransform} from "utils/stringUtils";
+import {each} from "utils/probabilityUtils";
 
 // clear elSelected variable
 export function unselect() {
@@ -17,17 +18,6 @@ export function unselect() {
   elSelected = null;
 }
 
-// close all dialogs except stated
-export function closeDialogs(except = "#except") {
-  try {
-    $(".dialog:visible")
-      .not(except)
-      .each(function () {
-        $(this).dialog("close");
-      });
-  } catch (error) {}
-}
-
 // move brush radius circle
 export function moveCircle(x, y, r = 20) {
   let circle = byId("brushCircle");
@@ -256,11 +246,11 @@ function togglePort(burg) {
     .attr("height", size);
 }
 
-function getBurgSeed(burg) {
+export function getBurgSeed(burg) {
   return burg.MFCG || Number(`${seed}${String(burg.i).padStart(4, 0)}`);
 }
 
-function getMFCGlink(burg) {
+export function getMFCGlink(burg) {
   if (burg.link) return burg.link;
 
   const {cells} = pack;
@@ -1025,27 +1015,3 @@ function refreshAllEditors() {
   if (byId("zonesEditorRefresh")?.offsetParent) zonesEditorRefresh.click();
   TIME && console.timeEnd("refreshAllEditors");
 }
-
-// dynamically loaded editors
-export async function editStates() {
-  if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js");
-  Editor.open();
-}
-
-export async function editCultures() {
-  if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js");
-  Editor.open();
-}
-
-export async function editReligions() {
-  if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js");
-  Editor.open();
-}
-
-export async function editUnits() {
-  const {open} = await import("./units-editor.js");
-  open();
-}

src/modules/ui/heightmap-editor.js

@@ -16,6 +16,7 @@ import {prompt} from "scripts/prompt";
 import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {aleaPRNG} from "scripts/aleaPRNG";
 import {undraw} from "scripts/generation";
+import {closeDialogs} from "dialogs/utils";
 
 export function editHeightmap(options) {
   const {mode, tool} = options || {};

src/modules/ui/hotkeys.js

@@ -1,6 +1,8 @@
-import {byId} from "utils/shorthands";
+import {openDialog} from "dialogs";
 import {toggleLayer} from "layers";
 import {showAboutDialog} from "scripts/options/about";
+import {byId} from "utils/shorthands";
+import {closeDialogs} from "dialogs/utils";
 
 // Hotkeys, see github.com/Azgaar/Fantasy-Map-Generator/wiki/Hotkeys
 document.on("keydown", handleKeydown);
@@ -40,17 +42,17 @@ function handleKeyup(event) {
   else if (ctrl && code === "KeyY" && redo?.offsetParent) redo.click();
   else if (shift && code === "KeyH") editHeightmap();
   else if (shift && code === "KeyB") editBiomes();
-  else if (shift && code === "KeyS") editStates();
+  else if (shift && code === "KeyS") openDialog("statesEditor");
   else if (shift && code === "KeyP") editProvinces();
   else if (shift && code === "KeyD") editDiplomacy();
-  else if (shift && code === "KeyC") editCultures();
+  else if (shift && code === "KeyC") openDialog("culturesEditor");
   else if (shift && code === "KeyN") editNamesbase();
   else if (shift && code === "KeyZ") editZones();
-  else if (shift && code === "KeyR") editReligions();
+  else if (shift && code === "KeyR") openDialog("religionsEditor");
   else if (shift && code === "KeyY") openEmblemEditor();
-  else if (shift && code === "KeyQ") editUnits();
+  else if (shift && code === "KeyQ") openDialog("unitsEditor");
   else if (shift && code === "KeyO") editNotes();
-  else if (shift && code === "KeyA") overviewCharts();
+  else if (shift && code === "KeyA") openDialog("chartsOverview");
   else if (shift && code === "KeyT") overviewBurgs();
   else if (shift && code === "KeyV") overviewRivers();
   else if (shift && code === "KeyM") overviewMilitary();

src/modules/ui/ice-editor.js

@@ -5,6 +5,7 @@ import {tip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {ra} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editIce() {
   if (customization) return;

src/modules/ui/labels-editor.js

@@ -1,6 +1,7 @@
 import {findCell} from "utils/graphUtils";
 import {tip, showMainTip} from "scripts/tooltips";
 import {round, parseTransform} from "utils/stringUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editLabel() {
   if (customization) return;

src/modules/ui/lakes-editor.js

@@ -6,6 +6,7 @@ import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {round} from "utils/stringUtils";
 import {si, getHeight} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editLake() {
   if (customization) return;

src/modules/ui/markers-editor.js

@@ -4,6 +4,7 @@ import {restoreDefaultEvents} from "scripts/events";
 import {findCell} from "utils/graphUtils";
 import {clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editMarker(markerI) {
   if (customization) return;

src/modules/ui/markers-overview.js

@@ -1,5 +1,6 @@
 import {restoreDefaultEvents} from "scripts/events";
 import {clearMainTip} from "scripts/tooltips";
+import {closeDialogs} from "dialogs/utils";
 
 export function overviewMarkers() {
   if (customization) return;

src/modules/ui/military-overview.js

@@ -5,6 +5,7 @@ import {wiki} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
 import {capitalize} from "utils/stringUtils";
 import {si} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function overviewMilitary() {
   if (customization) return;

src/modules/ui/namesbase-editor.js

@@ -4,6 +4,7 @@ import {unique} from "utils/arrayUtils";
 import {tip} from "scripts/tooltips";
 import {openURL} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editNamesbase() {
   if (customization) return;

src/modules/ui/options.js

@@ -11,6 +11,8 @@ import {gauss, P, rand, rw} from "utils/probabilityUtils";
 import {byId, stored} from "utils/shorthands";
 import {regenerateMap} from "scripts/generation";
 import {fitScaleBar} from "modules/measurers";
+import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
 
 $("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
 $("#exitCustomization").draggable({handle: "div"});
@@ -160,7 +162,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
   else if (id === "optionsEraRegenerate") regenerateEra();
-  else if (id === "templateInputContainer") openTemplateSelectionDialog();
+  else if (id === "templateInputContainer") openDialog("heightmapSelection");
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
@@ -650,11 +652,6 @@ 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();

src/modules/ui/provinces-editor.js

@@ -11,6 +11,7 @@ import {parseTransform} from "utils/stringUtils";
 import {si} from "utils/unitUtils";
 import {turnLayerButtonOff} from "layers";
 import {byId} from "utils/shorthands";
+import {closeDialogs} from "dialogs/utils";
 
 export function editProvinces() {
   if (customization) return;
@@ -387,7 +388,7 @@ export function editProvinces() {
 
     unfog();
     closeDialogs();
-    editStates();
+    openDialog("statesEditor");
   }
 
   function changePopulation(province) {

src/modules/ui/regiment-editor.js

@@ -6,6 +6,7 @@ import {last} from "utils/arrayUtils";
 import {tip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {capitalize} from "utils/stringUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editRegiment(selector) {
   if (customization) return;

src/modules/ui/regiments-overview.js

@@ -6,6 +6,7 @@ import {tip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {capitalize} from "utils/stringUtils";
 import {si} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function overviewRegiments(state) {
   if (customization) return;

src/modules/ui/relief-editor.js

@@ -4,6 +4,7 @@ import {restoreDefaultEvents} from "scripts/events";
 import {findCell} from "utils/graphUtils";
 import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editReliefIcon() {
   if (customization) return;

src/modules/ui/rivers-creator.js

@@ -5,6 +5,7 @@ import {getPackPolygon, findCell} from "utils/graphUtils";
 import {last} from "utils/arrayUtils";
 import {tip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function createRiver() {
   if (customization) return;

src/modules/ui/rivers-editor.js

@@ -5,6 +5,7 @@ import {tip, clearMainTip} from "scripts/tooltips";
 import {getSegmentId} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editRiver(id) {
   if (customization) return;

src/modules/ui/rivers-overview.js

@@ -1,6 +1,7 @@
 import * as d3 from "d3";
 
 import {rn} from "utils/numberUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function overviewRivers() {
   if (customization) return;

src/modules/ui/routes-editor.js

@@ -5,6 +5,7 @@ import {getSegmentId} from "utils/lineUtils";
 import {rn} from "utils/numberUtils";
 import {getNextId} from "utils/nodeUtils";
 import {round} from "utils/stringUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editRoute(onClick) {
   if (customization) return;

src/modules/ui/submap.js

@@ -5,6 +5,7 @@ import {rn, minmax} from "utils/numberUtils";
 import {debounce} from "utils/functionUtils";
 import {restoreLayers} from "layers";
 import {undraw} from "scripts/generation";
+import {closeDialogs} from "dialogs/utils";
 
 window.UISubmap = (function () {
   byId("submapPointsInput").addEventListener("input", function () {

src/modules/ui/tools.js

@@ -1,7 +1,8 @@
 import * as d3 from "d3";
 
+import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
 import {turnLayerButtonOn} from "layers";
-import {editUnits} from "modules/ui/editors";
 import {aleaPRNG} from "scripts/aleaPRNG";
 import {restoreDefaultEvents} from "scripts/events";
 import {prompt} from "scripts/prompt";
@@ -21,17 +22,17 @@ toolsContent.addEventListener("click", function (event) {
   // click on open Editor buttons
   if (button === "editHeightmapButton") editHeightmap();
   else if (button === "editBiomesButton") editBiomes();
-  else if (button === "editStatesButton") editStates();
+  else if (button === "editStatesButton") openDialog("statesEditor");
   else if (button === "editProvincesButton") editProvinces();
   else if (button === "editDiplomacyButton") editDiplomacy();
-  else if (button === "editCulturesButton") editCultures();
+  else if (button === "editCulturesButton") openDialog("culturesEditor");
-  else if (button === "editReligions") editReligions();
+  else if (button === "editReligions") openDialog("religionsEditor");
   else if (button === "editEmblemButton") openEmblemEditor();
   else if (button === "editNamesBaseButton") editNamesbase();
-  else if (button === "editUnitsButton") editUnits();
+  else if (button === "editUnitsButton") openDialog("unitsEditor");
   else if (button === "editNotesButton") editNotes();
   else if (button === "editZonesButton") editZones();
-  else if (button === "overviewChartsButton") overviewCharts();
+  else if (button === "overviewChartsButton") openDialog("chartsOverview");
   else if (button === "overviewBurgsButton") overviewBurgs();
   else if (button === "overviewRiversButton") overviewRivers();
   else if (button === "overviewMilitaryButton") overviewMilitary();
@@ -867,8 +868,3 @@ function viewCellDetails() {
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 }
-
-async function overviewCharts() {
-  const Overview = await import("../dynamic/overview/charts-overview.js");
-  Overview.open();
-}

src/modules/ui/zones-editor.js

@@ -7,6 +7,7 @@ import {tip, showMainTip, clearMainTip} from "scripts/tooltips";
 import {rn} from "utils/numberUtils";
 import {getNextId} from "utils/nodeUtils";
 import {si} from "utils/unitUtils";
+import {closeDialogs} from "dialogs/utils";
 
 export function editZones() {
   closeDialogs();

src/scripts/events.js

@@ -1,18 +1,23 @@
 import * as d3 from "d3";
 
-import {dragLegendBox} from "modules/legend";
+import {openDialog} from "dialogs";
+import {layerIsOn} from "layers";
+import {clearLegend, dragLegendBox} from "modules/legend";
+import {updateCellInfo} from "modules/ui/cell-info";
 import {debounce} from "utils/functionUtils";
 import {findCell, findGridCell} from "utils/graphUtils";
 import {byId} from "utils/shorthands";
-import {convertTemperature, si, getFriendlyHeight, getCellIdPrecipitation, getPopulationTip} from "utils/unitUtils";
+import {convertTemperature, getCellIdPrecipitation, getFriendlyHeight, getPopulationTip, si} from "utils/unitUtils";
 import {showMainTip, tip} from "./tooltips";
-import {updateCellInfo} from "modules/ui/cell-info";
-import {layerIsOn} from "layers";
 
 export function restoreDefaultEvents() {
   Zoom.setZoomBehavior();
   viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
-  legend.call(d3.drag().on("start", dragLegendBox));
+  scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => openDialog("unitsEditor"));
+  legend
+    .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
+    .on("click", clearLegend)
+    .call(d3.drag().on("start", dragLegendBox));
 }
 
 // on viewbox click event - run function based on target
@@ -29,9 +34,10 @@ function clicked() {
   else if (parent.id === "rivers") editRiver(el.id);
   else if (grand.id === "routes") editRoute();
   else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
-  else if (grand.id === "burgLabels") editBurg();
+  else if (grand.id === "burgLabels" || grand.id === "burgIcons") {
-  else if (grand.id === "burgIcons") editBurg();
+    const burgId = grand.id === "burgLabels" ? +el.dataset.id : +el.parentNode.dataset.id;
-  else if (parent.id === "ice") editIce();
+    openDialog("burgEditor", null, {id: burgId});
+  } else if (parent.id === "ice") editIce();
   else if (parent.id === "terrain") editReliefIcon();
   else if (grand.id === "markers" || great.id === "markers") editMarker();
   else if (grand.id === "coastline") editCoastline();

src/scripts/generation.js

@@ -23,6 +23,7 @@ import {byId} from "utils/shorthands";
 import {showStatistics} from "./statistics";
 import {reGraph} from "./reGraph";
 import {rankCells} from "./rankCells";
+import {closeDialogs} from "dialogs/utils";
 
 export async function generate(options) {
   try {

vite.config.js

@@ -76,6 +76,7 @@ export default defineConfig(({mode}) => {
         {find: "components", replacement: path.resolve(pathName, "./src/components")},
         {find: "config", replacement: path.resolve(pathName, "./src/config")},
         {find: "constants", replacement: path.resolve(pathName, "./src/constants")},
+        {find: "dialogs", replacement: path.resolve(pathName, "./src/dialogs")},
         {find: "layers", replacement: path.resolve(pathName, "./src/layers")},
         {find: "libs", replacement: path.resolve(pathName, "./src/libs")},
         {find: "modules", replacement: path.resolve(pathName, "./src/modules")},