From 4fcd62bb9952d6910a9d6ed739eb73798bb525b3 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 15 May 2022 16:03:47 +0300
Subject: [PATCH 1/5] states-editor - dynamic module

---
 index.html                               |  113 +-
 main.js                                  |    1 +
 modules/burgs-and-states.js              |    2 +-
 modules/dynamic/editors/states-editor.js | 1334 ++++++++++++++++++++++
 modules/ui/editors.js                    |    7 +
 modules/ui/general.js                    |   26 +-
 modules/ui/states-editor.js              | 1222 --------------------
 7 files changed, 1360 insertions(+), 1345 deletions(-)
 create mode 100644 modules/dynamic/editors/states-editor.js
 delete mode 100644 modules/ui/states-editor.js

diff --git a/index.html b/index.html
index 6f1aed90..c61a9fb9 100644
--- a/index.html
+++ b/index.html
@@ -3083,110 +3083,6 @@
         </div>
       </div>
 
-      <div id="statesEditor" class="dialog stable" style="display: none">
-        <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: 9.7em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 16.3em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-          <div style="left: 23em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">
-            Culture&nbsp;
-          </div>
-          <div style="left: 27.8em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
-          <div style="left: 32.5em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 37em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
-          <div style="left: 43.5em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 47em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">
-            Expansion&nbsp;
-          </div>
-          <div style="left: 53.5em" 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>
-
-        <div id="statesFooter" class="totalLine">
-          <div data-tip="States number" style="margin-left: 5px">States:&nbsp;<span id="statesFooterStates">0</span></div>
-          <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="statesFooterCells">0</span></div>
-          <div data-tip="Total burgs number" style="margin-left: 12px">Burgs:&nbsp;<span id="statesFooterBurgs">0</span></div>
-          <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="statesFooterArea">0</span></div>
-          <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="statesFooterPopulation">0</span></div>
-        </div>
-
-        <div id="statesBottom">
-          <button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-          <button id="statesEditStyle" data-tip="Edit states style in Style Editor" class="icon-adjust"></button>
-          <button id="statesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
-          <button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
-          <button id="statesChart" data-tip="Show states bubble chart" class="icon-chart-area"></button>
-
-          <button id="statesRegenerate" data-tip="Show the regeneration menu and more data" class="icon-cog-alt"></button>
-          <div id="statesRegenerateButtons" style="display: none">
-            <button id="statesRegenerateBack" data-tip="Hide the regeneration menu" class="icon-cog-alt"></button>
-            <button id="statesRandomize" data-tip="Randomize states Expansion value and re-calculate states and provinces" class="icon-shuffle"></button>
-            <span data-tip="Additional growth rate. Defines how many lands will stay neutral">
-              <label class="italic">Growth rate:</label>
-              <input
-                id="statesNeutral"
-                oninput="tip('Growth rate: '+this.value); statesNeutralNumber.value = this.value"
-                type="range"
-                min=".1"
-                max="3"
-                step=".05"
-                value="1"
-                style="width: 90px"
-              />
-              <input
-                id="statesNeutralNumber"
-                oninput="tip('Growth rate: '+this.value); statesNeutral.value = this.value"
-                type="number"
-                min=".1"
-                max="3"
-                step=".05"
-                value="1"
-                style="width: 42px"
-              />
-            </span>
-            <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
-            <span data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect">
-              <input id="statesAutoChange" class="checkbox" type="checkbox" />
-              <label for="statesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-            </span>
-            <span data-tip="Allow system to change state labels when states data is change">
-              <input id="adjustLabels" class="checkbox" type="checkbox" />
-              <label for="adjustLabels" class="checkbox-label"><i>auto-change labels</i></label>
-            </span>
-          </div>
-
-          <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"
-              >Brush size:
-              <input
-                id="statesManuallyBrush"
-                oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 5em"
-              />
-              <input
-                id="statesManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
-            <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
-            <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-          </div>
-
-          <button id="statesAdd" data-tip="Add a new state. Hold Shift to add multiple" class="icon-plus"></button>
-          <button id="statesExport" data-tip="Save state-related data as a text file (.csv)" class="icon-download"></button>
-        </div>
-      </div>
-
       <div id="stateNameEditor" class="dialog" data-state="0" style="display: none">
         <div>
           <div data-tip="State short name" class="label">Short name:</div>
@@ -6278,7 +6174,7 @@
     <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=14052022"></script>
+    <script src="modules/burgs-and-states.js?v=15052022"></script>
     <script src="modules/routes-generator.js"></script>
     <script src="modules/religions-generator.js"></script>
     <script src="modules/military-generator.js"></script>
@@ -6293,17 +6189,16 @@
     <script src="modules/ui/measurers.js"></script>
     <script src="modules/ui/stylePresets.js"></script>
 
-    <script src="modules/ui/general.js"></script>
+    <script src="modules/ui/general.js?v=15052022"></script>
     <script src="modules/ui/options.js?v=14052022"></script>
-    <script src="main.js?v=14052022"></script>
+    <script src="main.js?v=15052022"></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=15052022"></script>
     <script defer src="modules/ui/tools.js"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
-    <script defer src="modules/ui/editors.js"></script>
     <script defer src="modules/ui/heightmap-editor.js"></script>
-    <script defer src="modules/ui/states-editor.js"></script>
     <script defer src="modules/ui/provinces-editor.js"></script>
     <script defer src="modules/ui/biomes-editor.js"></script>
     <script defer src="modules/ui/cultures-editor.js"></script>
diff --git a/main.js b/main.js
index 8548efed..afe54d88 100644
--- a/main.js
+++ b/main.js
@@ -168,6 +168,7 @@ let populationRate = +document.getElementById("populationRateInput").value;
 let distanceScale = +document.getElementById("distanceScaleInput").value;
 let urbanization = +document.getElementById("urbanizationInput").value;
 let urbanDensity = +document.getElementById("urbanDensityInput").value;
+let statesNeutral = 1; // statesEditor growth parameter
 
 applyStoredOptions();
 
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 449e48a0..104d91b2 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -352,7 +352,7 @@ window.BurgsAndStates = (function () {
     cells.state = new Uint16Array(cells.i.length);
     const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
     const cost = [];
-    const neutral = (cells.i.length / 5000) * 2500 * neutralInput.value * statesNeutral.value; // limit cost for state growth
+    const neutral = (cells.i.length / 5000) * 2500 * neutralInput.value * statesNeutral; // limit cost for state growth
 
     states
       .filter(s => s.i && !s.removed)
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
new file mode 100644
index 00000000..b3de8d29
--- /dev/null
+++ b/modules/dynamic/editors/states-editor.js
@@ -0,0 +1,1334 @@
+const body = insertEditorHtml();
+addListeners();
+
+export function open() {
+  closeDialogs("#statesEditor, .stable");
+  if (!layerIsOn("toggleStates")) toggleStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  if (layerIsOn("toggleCultures")) toggleCultures();
+  if (layerIsOn("toggleBiomes")) toggleBiomes();
+  if (layerIsOn("toggleReligions")) toggleReligions();
+
+  refreshStatesEditor();
+
+  $("#statesEditor").dialog({
+    title: "States Editor",
+    resizable: false,
+    width: fitContent(),
+    close: closeStatesEditor,
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
+  });
+}
+
+function insertEditorHtml() {
+  const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable" style="display: none">
+    <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: 9.7em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
+      <div style="left: 16.3em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div style="left: 23em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">
+        Culture&nbsp;
+      </div>
+      <div style="left: 27.8em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
+      <div style="left: 32.5em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
+      <div style="left: 37em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+      <div style="left: 43.5em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
+      <div style="left: 47em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">
+        Expansion&nbsp;
+      </div>
+      <div style="left: 53.5em" 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>
+
+    <div id="statesFooter" class="totalLine">
+      <div data-tip="States number" style="margin-left: 5px">States:&nbsp;<span id="statesFooterStates">0</span></div>
+      <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="statesFooterCells">0</span></div>
+      <div data-tip="Total burgs number" style="margin-left: 12px">Burgs:&nbsp;<span id="statesFooterBurgs">0</span></div>
+      <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="statesFooterArea">0</span></div>
+      <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="statesFooterPopulation">0</span></div>
+    </div>
+
+    <div id="statesBottom">
+      <button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+      <button id="statesEditStyle" data-tip="Edit states style in Style Editor" class="icon-adjust"></button>
+      <button id="statesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+      <button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
+      <button id="statesChart" data-tip="Show states bubble chart" class="icon-chart-area"></button>
+
+      <button id="statesRegenerate" data-tip="Show the regeneration menu and more data" class="icon-cog-alt"></button>
+      <div id="statesRegenerateButtons" style="display: none">
+        <button id="statesRegenerateBack" data-tip="Hide the regeneration menu" class="icon-cog-alt"></button>
+        <button id="statesRandomize" data-tip="Randomize states Expansion value and re-calculate states and provinces" class="icon-shuffle"></button>
+        <span data-tip="Additional growth rate. Defines how many lands will stay neutral">
+          <label class="italic">Growth rate:</label>
+          <input
+            id="statesNeutral"
+            type="range"
+            min=".1"
+            max="3"
+            step=".05"
+            value="1"
+            style="width: 90px"
+          />
+          <input
+            id="statesNeutralNumber"
+            type="number"
+            min=".1"
+            max="3"
+            step=".05"
+            value="1"
+            style="width: 42px"
+          />
+        </span>
+        <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
+        <span data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect">
+          <input id="statesAutoChange" class="checkbox" type="checkbox" />
+          <label for="statesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
+        </span>
+        <span data-tip="Allow system to change state labels when states data is change">
+          <input id="adjustLabels" class="checkbox" type="checkbox" />
+          <label for="adjustLabels" class="checkbox-label"><i>auto-change labels</i></label>
+        </span>
+      </div>
+
+      <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"
+          >Brush size:
+          <input
+            id="statesManuallyBrush"
+            oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 5em"
+          />
+          <input
+            id="statesManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label
+        ><br />
+        <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
+        <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
+      </div>
+
+      <button id="statesAdd" data-tip="Add a new state. Hold Shift to add multiple" class="icon-plus"></button>
+      <button id="statesExport" data-tip="Save state-related data as a text file (.csv)" class="icon-download"></button>
+    </div>
+  </div>`;
+
+  const dialogs = document.getElementById("dialogs");
+  dialogs.insertAdjacentHTML("beforeend", editorHtml);
+
+  return document.getElementById("statesBodySection");
+}
+
+function addListeners() {
+  document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
+  document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
+  document.getElementById("statesLegend").addEventListener("click", toggleLegend);
+  document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode);
+  document.getElementById("statesChart").addEventListener("click", showStatesChart);
+  document.getElementById("statesRegenerate").addEventListener("click", openRegenerationMenu);
+  document.getElementById("statesRegenerateBack").addEventListener("click", exitRegenerationMenu);
+  document.getElementById("statesRecalculate").addEventListener("click", () => recalculateStates(true));
+  document.getElementById("statesRandomize").addEventListener("click", randomizeStatesExpansion);
+  document.getElementById("statesNeutral").addEventListener("input", changeStatesGrowthRate);
+  document.getElementById("statesNeutralNumber").addEventListener("change", changeStatesGrowthRate);
+  document.getElementById("statesManually").addEventListener("click", enterStatesManualAssignent);
+  document.getElementById("statesManuallyApply").addEventListener("click", applyStatesManualAssignent);
+  document.getElementById("statesManuallyCancel").addEventListener("click", () => exitStatesManualAssignment());
+  document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
+  document.getElementById("statesExport").addEventListener("click", downloadStatesData);
+
+  body.addEventListener("click", function (event) {
+    const element = event.target;
+    const classList = element.classList;
+    const line = element.parentNode;
+    const state = +line.dataset.id;
+    if (element.tagName === "FILL-BOX") stateChangeFill(element);
+    else if (classList.contains("name")) editStateName(state);
+    else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
+    else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(state);
+    else if (classList.contains("culturePopulation")) changePopulation(state);
+    else if (classList.contains("icon-pin")) toggleFog(state, classList);
+    else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
+  });
+
+  body.addEventListener("input", function (ev) {
+    const element = ev.target;
+    const classList = element.classList;
+    const line = element.parentNode;
+    const state = +line.dataset.id;
+    if (classList.contains("stateCapital")) stateChangeCapitalName(state, line, element.value);
+    else if (classList.contains("cultureType")) stateChangeType(state, line, element.value);
+    else if (classList.contains("statePower")) stateChangeExpansionism(state, line, element.value);
+  });
+
+  body.addEventListener("change", function (ev) {
+    const element = ev.target;
+    const classList = element.classList;
+    const line = element.parentNode;
+    const state = +line.dataset.id;
+    if (classList.contains("stateCulture")) stateChangeCulture(state, line, element.value);
+  });
+}
+
+function refreshStatesEditor() {
+  BurgsAndStates.collectStatistics();
+  statesEditorAddLines();
+}
+
+// add line for each state
+function statesEditorAddLines() {
+  const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+  const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
+  let lines = "",
+    totalArea = 0,
+    totalPopulation = 0,
+    totalBurgs = 0;
+
+  for (const s of pack.states) {
+    if (s.removed) continue;
+    const area = s.area * distanceScaleInput.value ** 2;
+    const rural = s.rural * populationRate;
+    const urban = s.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
+    totalArea += area;
+    totalPopulation += population;
+    totalBurgs += s.burgs;
+    const focused = defs.select("#fog #focusState" + s.i).size();
+
+    if (!s.i) {
+      // Neutral line
+      lines += /* html */ `<div
+        class="states"
+        data-id=${s.i}
+        data-name="${s.name}"
+        data-cells=${s.cells}
+        data-area=${area}
+        data-population=${population}
+        data-burgs=${s.burgs}
+        data-color=""
+        data-form=""
+        data-capital=""
+        data-culture=""
+        data-type=""
+        data-expansionism=""
+      >
+        <svg width="1em" height="1em" class="placeholder"></svg>
+        <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly />
+        <svg class="coaIcon placeholder hide"></svg>
+        <input class="stateForm placeholder" value="none" />
+        <span class="icon-star-empty placeholder hide"></span>
+        <input class="stateCapital placeholder hide" />
+        <select class="stateCulture placeholder hide">
+          ${getCultureOptions(0)}
+        </select>
+        <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
+        <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
+        <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Neutral lands area" class="biomeArea hide">${si(area) + unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
+        <select class="cultureType ${hidden} placeholder show hide">
+          ${getTypeOptions(0)}
+        </select>
+        <span class="icon-resize-full ${hidden} placeholder show hide"></span>
+        <input class="statePower ${hidden} placeholder show hide" type="number" value="0" />
+        <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
+        <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
+      </div>`;
+      continue;
+    }
+
+    const capital = pack.burgs[s.capital].name;
+    COArenderer.trigger("stateCOA" + s.i, s.coa);
+    lines += /* html */ `<div
+      class="states"
+      data-id=${s.i}
+      data-name="${s.name}"
+      data-form="${s.formName}"
+      data-capital="${capital}"
+      data-color="${s.color}"
+      data-cells=${s.cells}
+      data-area=${area}
+      data-population=${population}
+      data-burgs=${s.burgs}
+      data-culture=${pack.cultures[s.culture].name}
+      data-type=${s.type}
+      data-expansionism=${s.expansionism}
+    >
+      <fill-box fill="${s.color}"></fill-box>
+      <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
+      <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
+      <select data-tip="Dominant culture. Click to change" class="stateCulture hide">
+        ${getCultureOptions(s.culture)}
+      </select>
+      <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
+      <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
+      <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
+      <div data-tip="State area" class="biomeArea hide">${si(area) + unit}</div>
+      <span data-tip="${populationTip}" class="icon-male hide"></span>
+      <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
+      <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">
+        ${getTypeOptions(s.type)}
+      </select>
+      <span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
+      <input
+        data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
+        class="statePower ${hidden} show hide"
+        type="number"
+        min="0"
+        max="99"
+        step=".1"
+        value=${s.expansionism}
+      />
+      <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
+      <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
+      <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
+      <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
+    </div>`;
+  }
+  body.innerHTML = lines;
+
+  // update footer
+  statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length;
+  statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  statesFooterBurgs.innerHTML = totalBurgs;
+  statesFooterArea.innerHTML = si(totalArea) + unit;
+  statesFooterPopulation.innerHTML = si(totalPopulation);
+  statesFooterArea.dataset.area = totalArea;
+  statesFooterPopulation.dataset.population = totalPopulation;
+
+  body.querySelectorAll("div.states").forEach(el => {
+    el.addEventListener("click", selectStateOnLineClick);
+    el.addEventListener("mouseenter", ev => stateHighlightOn(ev));
+    el.addEventListener("mouseleave", ev => stateHighlightOff(ev));
+  });
+
+  if (body.dataset.type === "percentage") {
+    body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  applySorting(statesHeader);
+  $("#statesEditor").dialog({width: fitContent()});
+}
+
+function getCultureOptions(culture) {
+  let options = "";
+  pack.cultures.forEach(c => {
+    if (!c.removed) {
+      options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>`;
+    }
+  });
+  return options;
+}
+
+function getTypeOptions(type) {
+  let options = "";
+  const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
+  types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
+  return options;
+}
+
+function stateHighlightOn(event) {
+  if (!layerIsOn("toggleStates")) return;
+  if (defs.select("#fog path").size()) return;
+
+  const state = +event.target.dataset.id;
+  if (customization || !state) return;
+  const d = regions.select("#state" + state).attr("d");
+
+  const path = debug
+    .append("path")
+    .attr("class", "highlight")
+    .attr("d", d)
+    .attr("fill", "none")
+    .attr("stroke", "red")
+    .attr("stroke-width", 1)
+    .attr("opacity", 1)
+    .attr("filter", "url(#blur1)");
+
+  const l = path.node().getTotalLength(),
+    dur = (l + 5000) / 2;
+  const i = d3.interpolateString("0," + l, l + "," + l);
+  path
+    .transition()
+    .duration(dur)
+    .attrTween("stroke-dasharray", function () {
+      return t => i(t);
+    });
+}
+
+function stateHighlightOff() {
+  debug.selectAll(".highlight").each(function () {
+    d3.select(this).transition().duration(1000).attr("opacity", 0).remove();
+  });
+}
+
+function stateChangeFill(el) {
+  const currentFill = el.getAttribute("fill");
+  const state = +el.parentNode.dataset.id;
+
+  const callback = function (newFill) {
+    el.fill = newFill;
+    pack.states[state].color = newFill;
+    statesBody.select("#state" + state).attr("fill", newFill);
+    statesBody.select("#state-gap" + state).attr("stroke", newFill);
+    const halo = d3.color(newFill) ? d3.color(newFill).darker().hex() : "#666666";
+    statesHalo.select("#state-border" + state).attr("stroke", halo);
+
+    // recolor regiments
+    const solidColor = newFill[0] === "#" ? newFill : "#999";
+    const darkerColor = d3.color(solidColor).darker().hex();
+    armies.select("#army" + state).attr("fill", solidColor);
+    armies
+      .select("#army" + state)
+      .selectAll("g > rect:nth-of-type(2)")
+      .attr("fill", darkerColor);
+  };
+
+  openPicker(currentFill, callback);
+}
+
+function editStateName(state) {
+  // reset input value and close add mode
+  stateNameEditorCustomForm.value = "";
+  const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
+  if (addModeActive) {
+    stateNameEditorCustomForm.style.display = "none";
+    stateNameEditorSelectForm.style.display = "inline-block";
+  }
+
+  const s = pack.states[state];
+  document.getElementById("stateNameEditor").dataset.state = state;
+  document.getElementById("stateNameEditorShort").value = s.name || "";
+  applyOption(stateNameEditorSelectForm, s.formName);
+  document.getElementById("stateNameEditorFull").value = s.fullName || "";
+
+  $("#stateNameEditor").dialog({
+    resizable: false,
+    title: "Change state name",
+    buttons: {
+      Apply: function () {
+        applyNameChange(s);
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+
+  if (modules.editStateName) return;
+  modules.editStateName = true;
+
+  // add listeners
+  document.getElementById("stateNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
+  document.getElementById("stateNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
+  document.getElementById("stateNameEditorAddForm").addEventListener("click", addCustomForm);
+  document.getElementById("stateNameEditorCustomForm").addEventListener("change", addCustomForm);
+  document.getElementById("stateNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
+
+  function regenerateShortNameCuture() {
+    const state = +stateNameEditor.dataset.state;
+    const culture = pack.states[state].culture;
+    const name = Names.getState(Names.getCultureShort(culture), culture);
+    document.getElementById("stateNameEditorShort").value = name;
+  }
+
+  function regenerateShortNameRandom() {
+    const base = rand(nameBases.length - 1);
+    const name = Names.getState(Names.getBase(base), undefined, base);
+    document.getElementById("stateNameEditorShort").value = name;
+  }
+
+  function addCustomForm() {
+    const value = stateNameEditorCustomForm.value;
+    const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
+    stateNameEditorCustomForm.style.display = addModeActive ? "none" : "inline-block";
+    stateNameEditorSelectForm.style.display = addModeActive ? "inline-block" : "none";
+    if (value && addModeActive) applyOption(stateNameEditorSelectForm, value);
+    stateNameEditorCustomForm.value = "";
+  }
+
+  function regenerateFullName() {
+    const short = document.getElementById("stateNameEditorShort").value;
+    const form = document.getElementById("stateNameEditorSelectForm").value;
+    document.getElementById("stateNameEditorFull").value = getFullName();
+
+    function getFullName() {
+      if (!form) return short;
+      if (!short && form) return "The " + form;
+      const tick = +stateNameEditorFullRegenerate.dataset.tick;
+      stateNameEditorFullRegenerate.dataset.tick = tick + 1;
+      return tick % 2 ? getAdjective(short) + " " + form : form + " of " + short;
+    }
+  }
+
+  function applyNameChange(s) {
+    const nameInput = document.getElementById("stateNameEditorShort");
+    const formSelect = document.getElementById("stateNameEditorSelectForm");
+    const fullNameInput = document.getElementById("stateNameEditorFull");
+
+    const nameChanged = nameInput.value !== s.name;
+    const formChanged = formSelect.value !== s.formName;
+    const fullNameChanged = fullNameInput.value !== s.fullName;
+    const changed = nameChanged || formChanged || fullNameChanged;
+
+    if (formChanged) {
+      const selected = formSelect.selectedOptions[0];
+      const form = selected.parentElement.label || null;
+      if (form) s.form = form;
+    }
+
+    s.name = nameInput.value;
+    s.formName = formSelect.value;
+    s.fullName = fullNameInput.value;
+    if (changed && stateNameEditorUpdateLabel.checked) BurgsAndStates.drawStateLabels([s.i]);
+    refreshStatesEditor();
+  }
+}
+
+function stateChangeCapitalName(state, line, value) {
+  line.dataset.capital = value;
+  const capital = pack.states[state].capital;
+  if (!capital) return;
+  pack.burgs[capital].name = value;
+  document.querySelector("#burgLabel" + capital).textContent = value;
+}
+
+function changePopulation(state) {
+  const s = pack.states[state];
+  if (!s.cells) {
+    tip("State does not have any cells, cannot change population", false, "error");
+    return;
+  }
+  const rural = rn(s.rural * populationRate);
+  const urban = rn(s.urban * populationRate * urbanization);
+  const total = rural + urban;
+  const l = n => Number(n).toLocaleString();
+
+  alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+    <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"} />
+    <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+
+  const update = function () {
+    const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+    if (isNaN(totalNew)) return;
+    totalPop.innerHTML = l(totalNew);
+    totalPopPerc.innerHTML = rn((totalNew / total) * 100);
+  };
+
+  ruralPop.oninput = () => update();
+  urbanPop.oninput = () => update();
+
+  $("#alert").dialog({
+    resizable: false,
+    title: "Change state population",
+    width: "24em",
+    buttons: {
+      Apply: function () {
+        applyPopulationChange();
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+
+  function applyPopulationChange() {
+    const ruralChange = ruralPop.value / rural;
+    if (isFinite(ruralChange) && ruralChange !== 1) {
+      const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+      cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+    }
+    if (!isFinite(ruralChange) && +ruralPop.value > 0) {
+      const points = ruralPop.value / populationRate;
+      const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+      const pop = points / cells.length;
+      cells.forEach(i => (pack.cells.pop[i] = pop));
+    }
+
+    const urbanChange = urbanPop.value / urban;
+    if (isFinite(urbanChange) && urbanChange !== 1) {
+      const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+      burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
+    }
+    if (!isFinite(urbanChange) && +urbanPop.value > 0) {
+      const points = urbanPop.value / populationRate / urbanization;
+      const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+      const population = rn(points / burgs.length, 4);
+      burgs.forEach(b => (b.population = population));
+    }
+
+    refreshStatesEditor();
+  }
+}
+
+function stateCapitalZoomIn(state) {
+  const capital = pack.states[state].capital;
+  const l = burgLabels.select("[data-id='" + capital + "']");
+  const x = +l.attr("x"),
+    y = +l.attr("y");
+  zoomTo(x, y, 8, 2000);
+}
+
+function stateChangeCulture(state, line, value) {
+  line.dataset.base = pack.states[state].culture = +value;
+}
+
+function stateChangeType(state, line, value) {
+  line.dataset.type = pack.states[state].type = value;
+  recalculateStates();
+}
+
+function stateChangeExpansionism(state, line, value) {
+  line.dataset.expansionism = pack.states[state].expansionism = value;
+  recalculateStates();
+}
+
+function toggleFog(state, cl) {
+  if (customization) return;
+  const path = statesBody.select("#state" + state).attr("d"),
+    id = "focusState" + state;
+  cl.contains("inactive") ? fog(id, path) : unfog(id);
+  cl.toggle("inactive");
+}
+
+function stateRemovePrompt(state) {
+  if (customization) return;
+
+  alertMessage.innerHTML = "Are you sure you want to remove the state? <br>This action cannot be reverted";
+  $("#alert").dialog({
+    resizable: false,
+    title: "Remove state",
+    buttons: {
+      Remove: function () {
+        $(this).dialog("close");
+        stateRemove(state);
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
+function stateRemove(state) {
+  statesBody.select("#state" + state).remove();
+  statesBody.select("#state-gap" + state).remove();
+  statesHalo.select("#state-border" + state).remove();
+  labels.select("#stateLabel" + state).remove();
+  defs.select("#textPath_stateLabel" + state).remove();
+
+  unfog("focusState" + state);
+  pack.burgs.forEach(b => {
+    if (b.state === state) b.state = 0;
+  });
+  pack.cells.state.forEach((s, i) => {
+    if (s === state) pack.cells.state[i] = 0;
+  });
+
+  // remove emblem
+  const coaId = "stateCOA" + state;
+  document.getElementById(coaId).remove();
+  emblems.select(`#stateEmblems > use[data-i='${state}']`).remove();
+
+  // remove provinces
+  pack.states[state].provinces.forEach(p => {
+    pack.provinces[p] = {i: p, removed: true};
+    pack.cells.province.forEach((pr, i) => {
+      if (pr === p) pack.cells.province[i] = 0;
+    });
+
+    const coaId = "provinceCOA" + p;
+    if (document.getElementById(coaId)) document.getElementById(coaId).remove();
+    emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
+    const g = provs.select("#provincesBody");
+    g.select("#province" + p).remove();
+    g.select("#province-gap" + p).remove();
+  });
+
+  // remove military
+  pack.states[state].military.forEach(m => {
+    const id = `regiment${state}-${m.i}`;
+    const index = notes.findIndex(n => n.id === id);
+    if (index != -1) notes.splice(index, 1);
+  });
+  armies.select("g#army" + state).remove();
+
+  const capital = pack.states[state].capital;
+  pack.burgs[capital].capital = 0;
+  pack.burgs[capital].state = 0;
+  moveBurgToGroup(capital, "towns");
+
+  pack.states[state] = {i: state, removed: true};
+
+  debug.selectAll(".highlight").remove();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
+  refreshStatesEditor();
+}
+
+function toggleLegend() {
+  if (legend.selectAll("*").size()) {
+    clearLegend();
+    return;
+  } // hide legend
+  const data = pack.states
+    .filter(s => s.i && !s.removed && s.cells)
+    .sort((a, b) => b.area - a.area)
+    .map(s => [s.i, s.color, s.name]);
+  drawLegend("States", data);
+}
+
+function togglePercentageMode() {
+  if (body.dataset.type === "absolute") {
+    body.dataset.type = "percentage";
+    const totalCells = +statesFooterCells.innerHTML;
+    const totalBurgs = +statesFooterBurgs.innerHTML;
+    const totalArea = +statesFooterArea.dataset.area;
+    const totalPopulation = +statesFooterPopulation.dataset.population;
+
+    body.querySelectorAll(":scope > div").forEach(function (el) {
+      el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
+      el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
+      el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
+      el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+    });
+  } else {
+    body.dataset.type = "absolute";
+    statesEditorAddLines();
+  }
+}
+
+function showStatesChart() {
+  // build hierarchy tree
+  const statesData = pack.states.filter(s => !s.removed);
+  if (statesData.length < 2) return tip("There are no states to show", false, "error");
+
+  const root = d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => (d.i ? 0 : null))(statesData)
+    .sum(d => d.area)
+    .sort((a, b) => b.value - a.value);
+
+  const size = 150 + 200 * uiSizeOutput.value;
+  const margin = {top: 0, right: -50, bottom: 0, left: -50};
+  const w = size - margin.left - margin.right;
+  const h = size - margin.top - margin.bottom;
+  const treeLayout = d3.pack().size([w, h]).padding(3);
+
+  // prepare svg
+  alertMessage.innerHTML = /* html */ `<select id="statesTreeType" style="display:block; margin-left:13px; font-size:11px">
+    <option value="area" selected>Area</option>
+    <option value="population">Total population</option>
+    <option value="rural">Rural population</option>
+    <option value="urban">Urban population</option>
+    <option value="burgs">Burgs number</option>
+  </select>`;
+  alertMessage.innerHTML += `<div id='statesInfo' class='chartInfo'>&#8205;</div>`;
+
+  const svg = d3
+    .select("#alertMessage")
+    .insert("svg", "#statesInfo")
+    .attr("id", "statesTree")
+    .attr("width", size)
+    .attr("height", size)
+    .style("font-family", "Almendra SC")
+    .attr("text-anchor", "middle")
+    .attr("dominant-baseline", "central");
+  const graph = svg.append("g").attr("transform", `translate(-50, 0)`);
+  document.getElementById("statesTreeType").addEventListener("change", updateChart);
+
+  treeLayout(root);
+
+  const node = graph
+    .selectAll("g")
+    .data(root.leaves())
+    .enter()
+    .append("g")
+    .attr("transform", d => `translate(${d.x},${d.y})`)
+    .attr("data-id", d => d.data.i)
+    .on("mouseenter", d => showInfo(event, d))
+    .on("mouseleave", d => hideInfo(event, d));
+
+  node
+    .append("circle")
+    .attr("fill", d => d.data.color)
+    .attr("r", d => d.r);
+
+  const exp = /(?=[A-Z][^A-Z])/g;
+  const lp = n => d3.max(n.split(exp).map(p => p.length)) + 1; // longest name part + 1
+
+  node
+    .append("text")
+    .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px")
+    .selectAll("tspan")
+    .data(d => d.data.name.split(exp))
+    .join("tspan")
+    .attr("x", 0)
+    .text(d => d)
+    .attr("dy", (d, i, n) => `${i ? 1 : (n.length - 1) / -2}em`);
+
+  function showInfo(ev, d) {
+    d3.select(ev.target).select("circle").classed("selected", 1);
+    const state = d.data.fullName;
+
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const area = d.data.area * distanceScaleInput.value ** 2 + unit;
+    const rural = rn(d.data.rural * populationRate);
+    const urban = rn(d.data.urban * populationRate * urbanization);
+
+    const option = statesTreeType.value;
+    const value =
+      option === "area"
+        ? "Area: " + area
+        : option === "rural"
+        ? "Rural population: " + si(rural)
+        : option === "urban"
+        ? "Urban population: " + si(urban)
+        : option === "burgs"
+        ? "Burgs number: " + d.data.burgs
+        : "Population: " + si(rural + urban);
+
+    statesInfo.innerHTML = /* html */ `${state}. ${value}`;
+    stateHighlightOn(ev);
+  }
+
+  function hideInfo(ev) {
+    stateHighlightOff(ev);
+    if (!document.getElementById("statesInfo")) return;
+    statesInfo.innerHTML = "&#8205;";
+    d3.select(ev.target).select("circle").classed("selected", 0);
+  }
+
+  function updateChart() {
+    const value =
+      this.value === "area"
+        ? d => d.area
+        : this.value === "rural"
+        ? d => d.rural
+        : this.value === "urban"
+        ? d => d.urban
+        : this.value === "burgs"
+        ? d => d.burgs
+        : d => d.rural + d.urban;
+
+    root.sum(value);
+    node.data(treeLayout(root).leaves());
+
+    node
+      .transition()
+      .duration(1500)
+      .attr("transform", d => `translate(${d.x},${d.y})`);
+    node
+      .select("circle")
+      .transition()
+      .duration(1500)
+      .attr("r", d => d.r);
+    node
+      .select("text")
+      .transition()
+      .duration(1500)
+      .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px");
+  }
+
+  $("#alert").dialog({
+    title: "States bubble chart",
+    width: fitContent(),
+    position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
+    buttons: {},
+    close: () => {
+      alertMessage.innerHTML = "";
+    }
+  });
+}
+
+function openRegenerationMenu() {
+  statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "none"));
+  statesRegenerateButtons.style.display = "block";
+
+  statesEditor.querySelectorAll(".show").forEach(el => el.classList.remove("hidden"));
+  $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
+}
+
+function recalculateStates(must) {
+  if (!must && !statesAutoChange.checked) return;
+
+  BurgsAndStates.expandStates();
+  BurgsAndStates.generateProvinces();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
+  if (adjustLabels.checked) BurgsAndStates.drawStateLabels();
+  refreshStatesEditor();
+}
+
+function changeStatesGrowthRate() {
+  const growthRate = +this.value;
+  document.getElementById("statesNeutral").value = growthRate;
+  document.getElementById("statesNeutralNumber").value = growthRate;
+  statesNeutral = growthRate;
+  tip("Growth rate: " + growthRate);
+  recalculateStates(false);
+}
+
+function randomizeStatesExpansion() {
+  pack.states.forEach(s => {
+    if (!s.i || s.removed) return;
+    const expansionism = rn(Math.random() * 4 + 1, 1);
+    s.expansionism = expansionism;
+    body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
+  });
+  recalculateStates(true, true);
+}
+
+function exitRegenerationMenu() {
+  statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "inline-block"));
+  statesRegenerateButtons.style.display = "none";
+  statesEditor.querySelectorAll(".show").forEach(el => el.classList.add("hidden"));
+  $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
+}
+
+function enterStatesManualAssignent() {
+  if (!layerIsOn("toggleStates")) toggleStates();
+  customization = 2;
+  statesBody.append("g").attr("id", "temp");
+  document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "none"));
+  document.getElementById("statesManuallyButtons").style.display = "inline-block";
+  document.getElementById("statesHalo").style.display = "none";
+
+  statesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
+  statesFooter.style.display = "none";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+  $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
+
+  tip("Click on state to select, drag the circle to change state", true);
+  viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush);
+
+  body.querySelector("div").classList.add("selected");
+}
+
+function selectStateOnLineClick() {
+  if (customization !== 2) return;
+  if (this.parentNode.id !== "statesBodySection") return;
+  body.querySelector("div.selected").classList.remove("selected");
+  this.classList.add("selected");
+}
+
+function selectStateOnMapClick() {
+  const point = d3.mouse(this);
+  const i = findCell(point[0], point[1]);
+  if (pack.cells.h[i] < 20) return;
+
+  const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']");
+  const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i];
+
+  body.querySelector("div.selected").classList.remove("selected");
+  body.querySelector("div[data-id='" + state + "']").classList.add("selected");
+}
+
+function dragStateBrush() {
+  const r = +statesManuallyBrush.value;
+
+  d3.event.on("drag", () => {
+    if (!d3.event.dx && !d3.event.dy) return;
+    const p = d3.mouse(this);
+    moveCircle(p[0], p[1], r);
+
+    const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+    const selection = found.filter(isLand);
+    if (selection) changeStateForSelection(selection);
+  });
+}
+
+// change state within selection
+function changeStateForSelection(selection) {
+  const temp = statesBody.select("#temp");
+  const selected = body.querySelector("div.selected");
+
+  const stateNew = +selected.dataset.id;
+  const color = pack.states[stateNew].color || "#ffffff";
+
+  selection.forEach(function (i) {
+    const exists = temp.select("polygon[data-cell='" + i + "']");
+    const stateOld = exists.size() ? +exists.attr("data-state") : pack.cells.state[i];
+    if (stateNew === stateOld) return;
+    if (i === pack.states[stateOld].center) return;
+
+    // change of append new element
+    if (exists.size()) exists.attr("data-state", stateNew).attr("fill", color).attr("stroke", color);
+    else temp.append("polygon").attr("data-cell", i).attr("data-state", stateNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
+  });
+}
+
+function moveStateBrush() {
+  showMainTip();
+  const point = d3.mouse(this);
+  const radius = +statesManuallyBrush.value;
+  moveCircle(point[0], point[1], radius);
+}
+
+function applyStatesManualAssignent() {
+  const {cells} = pack;
+  const affectedStates = [];
+  const affectedProvinces = [];
+
+  statesBody
+    .select("#temp")
+    .selectAll("polygon")
+    .each(function () {
+      const i = +this.dataset.cell;
+      const c = +this.dataset.state;
+      affectedStates.push(cells.state[i], c);
+      affectedProvinces.push(cells.province[i]);
+      cells.state[i] = c;
+      if (cells.burg[i]) pack.burgs[cells.burg[i]].state = c;
+    });
+
+  if (affectedStates.length) {
+    refreshStatesEditor();
+    layerIsOn("toggleStates") ? drawStates() : toggleStates();
+    if (adjustLabels.checked) BurgsAndStates.drawStateLabels([...new Set(affectedStates)]);
+    adjustProvinces([...new Set(affectedProvinces)]);
+    layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
+    if (layerIsOn("toggleProvinces")) drawProvinces();
+  }
+
+  exitStatesManualAssignment();
+}
+
+function adjustProvinces(affectedProvinces) {
+  const {cells, provinces, states, burgs} = pack;
+
+  affectedProvinces.forEach(provinceId => {
+    if (!provinces[provinceId]) return; // lands without province captured => do nothing
+
+    // find states owning at least 1 province cell
+    const provCells = cells.i.filter(i => cells.province[i] === provinceId);
+    const provStates = [...new Set(provCells.map(i => cells.state[i]))];
+
+    // province is captured completely => change owner or remove
+    if (provinceId && provStates.length === 1) return changeProvinceOwner(provinceId, provStates[0], provCells);
+
+    // province is captured partially => split province
+    splitProvince(provinceId, provStates, provCells);
+  });
+
+  function changeProvinceOwner(provinceId, newOwnerId, provinceCells) {
+    const province = provinces[provinceId];
+    const prevOwner = states[province.state];
+
+    // remove province from old owner list
+    prevOwner.provinces = prevOwner.provinces.filter(province => province !== provinceId);
+
+    if (newOwnerId) {
+      // new owner is a state => change owner
+      province.state = newOwnerId;
+      states[newOwnerId].provinces.push(provinceId);
+    } else {
+      // new owner is neutral => remove province
+      provinces[provinceId] = {i: provinceId, removed: true};
+      provinceCells.forEach(i => {
+        cells.province[i] = 0;
+      });
+    }
+  }
+
+  function splitProvince(provinceId, provinceStates, provinceCells) {
+    const province = provinces[provinceId];
+    const prevOwner = states[province.state];
+    const provinceCenterOwner = cells.state[province.center];
+
+    provinceStates.forEach(stateId => {
+      const stateProvinceCells = provinceCells.filter(i => cells.state[i] === stateId);
+
+      if (stateId === provinceCenterOwner) {
+        // province center is owned by the same state => do nothing for this state
+        if (stateId === prevOwner.i) return;
+
+        // province center is captured by neutrals => remove province
+        if (!stateId) {
+          provinces[provinceId] = {i: provinceId, removed: true};
+          stateProvinceCells.forEach(i => {
+            cells.province[i] = 0;
+          });
+          return;
+        }
+
+        // reassign province ownership to province center owner
+        prevOwner.provinces = prevOwner.provinces.filter(province => province !== provinceId);
+        province.state = stateId;
+        province.color = getMixedColor(states[stateId].color);
+        states[stateId].provinces.push(provinceId);
+        return;
+      }
+
+      // province cells captured by neutrals => remove captured cells from province
+      if (!stateId) {
+        stateProvinceCells.forEach(i => {
+          cells.province[i] = 0;
+        });
+        return;
+      }
+
+      // a few province cells owned by state => add to closes province
+      if (stateProvinceCells.length < 20) {
+        const closestProvince = findClosestProvince(provinceId, stateId, stateProvinceCells);
+        if (closestProvince) {
+          stateProvinceCells.forEach(i => {
+            cells.province[i] = closestProvince;
+          });
+          return;
+        }
+      }
+
+      // some province cells owned by state => create new province
+      createProvince(province, stateId, stateProvinceCells);
+    });
+  }
+
+  function createProvince(oldProvince, stateId, provinceCells) {
+    const newProvinceId = provinces.length;
+    const burgCell = provinceCells.find(i => cells.burg[i]);
+    const center = burgCell ? burgCell : provinceCells[0];
+    const burgId = burgCell ? cells.burg[burgCell] : 0;
+    const burg = burgId ? burgs[burgId] : null;
+    const culture = cells.culture[center];
+
+    const nameByBurg = burgCell && P(0.5);
+    const name = nameByBurg ? burg.name : oldProvince.name || Names.getState(Names.getCultureShort(culture), culture);
+
+    const formOptions = ["Zone", "Area", "Territory", "Province"];
+    const formName = burgCell && oldProvince.formName ? oldProvince.formName : ra(formOptions);
+
+    const color = getMixedColor(states[stateId].color);
+
+    const kinship = nameByBurg ? 0.8 : 0.4;
+    const type = BurgsAndStates.getType(center, burg?.port);
+    const coa = COA.generate(burg?.coa || states[stateId].coa, kinship, burg ? null : 0.9, type);
+    coa.shield = COA.getShield(culture, stateId);
+
+    provinces.push({i: newProvinceId, state: stateId, center, burg: burgId, name, formName, fullName: `${name} ${formName}`, color, coa});
+
+    provinceCells.forEach(i => {
+      cells.province[i] = newProvinceId;
+    });
+
+    states[stateId].provinces.push(newProvinceId);
+  }
+
+  function findClosestProvince(provinceId, stateId, sourceCells) {
+    const borderCell = sourceCells.find(i =>
+      cells.c[i].some(c => {
+        return cells.state[c] === stateId && cells.province[c] && cells.province[c] !== provinceId;
+      })
+    );
+
+    const closesProvince = borderCell && cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
+    return closesProvince;
+  }
+}
+
+function exitStatesManualAssignment(close) {
+  customization = 0;
+  statesBody.select("#temp").remove();
+  removeCircle();
+  document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "inline-block"));
+  document.getElementById("statesManuallyButtons").style.display = "none";
+  document.getElementById("statesHalo").style.display = "block";
+
+  statesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
+  statesFooter.style.display = "block";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
+
+  restoreDefaultEvents();
+  clearMainTip();
+  const selected = body.querySelector("div.selected");
+  if (selected) selected.classList.remove("selected");
+}
+
+function enterAddStateMode() {
+  if (this.classList.contains("pressed")) {
+    exitAddStateMode();
+    return;
+  }
+  customization = 3;
+  this.classList.add("pressed");
+  tip("Click on the map to create a new capital or promote an existing burg", true);
+  viewbox.style("cursor", "crosshair").on("click", addState);
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+}
+
+function addState() {
+  const {cells, states, burgs} = pack;
+  const point = d3.mouse(this);
+  const center = findCell(point[0], point[1]);
+  if (cells.h[center] < 20) return tip("You cannot place state into the water. Please click on a land cell", false, "error");
+
+  let burg = cells.burg[center];
+  if (burg && burgs[burg].capital) return tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error");
+
+  if (!burg) burg = addBurg(point); // add new burg
+
+  const oldState = cells.state[center];
+  const newState = states.length;
+
+  // turn burg into a capital
+  burgs[burg].capital = 1;
+  burgs[burg].state = newState;
+  moveBurgToGroup(burg, "cities");
+
+  if (d3.event.shiftKey === false) exitAddStateMode();
+
+  const culture = cells.culture[center];
+  const basename = center % 5 === 0 ? burgs[burg].name : Names.getCulture(culture);
+  const name = Names.getState(basename, culture);
+  const color = getRandomColor();
+  const pole = cells.p[center];
+
+  // generate emblem
+  const cultureType = pack.cultures[culture].type;
+  const coa = COA.generate(burgs[burg].coa, 0.4, null, cultureType);
+  coa.shield = COA.getShield(culture, null);
+
+  // update diplomacy and reverse relations
+  const diplomacy = states.map(s => {
+    if (!s.i || s.removed) return "x";
+    if (!oldState) {
+      s.diplomacy.push("Neutral");
+      return "Neutral";
+    }
+
+    let relations = states[oldState].diplomacy[s.i]; // relations between Nth state and old overlord
+    if (s.i === oldState) relations = "Enemy";
+    // new state is Enemy to its old overlord
+    else if (relations === "Ally") relations = "Suspicion";
+    else if (relations === "Friendly") relations = "Suspicion";
+    else if (relations === "Suspicion") relations = "Neutral";
+    else if (relations === "Enemy") relations = "Friendly";
+    else if (relations === "Rival") relations = "Friendly";
+    else if (relations === "Vassal") relations = "Suspicion";
+    else if (relations === "Suzerain") relations = "Enemy";
+    s.diplomacy.push(relations);
+    return relations;
+  });
+  diplomacy.push("x");
+  states[0].diplomacy.push([`Independance declaration`, `${name} declared its independance from ${states[oldState].name}`]);
+
+  cells.state[center] = newState;
+  cells.province[center] = 0;
+
+  states.push({
+    i: newState,
+    name,
+    diplomacy,
+    provinces: [],
+    color,
+    expansionism: 0.5,
+    capital: burg,
+    type: "Generic",
+    center,
+    culture,
+    military: [],
+    alert: 1,
+    coa,
+    pole
+  });
+  BurgsAndStates.collectStatistics();
+  BurgsAndStates.defineStateForms([newState]);
+  adjustProvinces([cells.province[center]]);
+
+  if (layerIsOn("toggleProvinces")) toggleProvinces();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
+
+  // add label
+  defs
+    .select("#textPaths")
+    .append("path")
+    .attr("d", `M${pole[0] - 50},${pole[1] + 6}h${100}`)
+    .attr("id", "textPath_stateLabel" + newState);
+  labels
+    .select("#states")
+    .append("text")
+    .attr("id", "stateLabel" + newState)
+    .append("textPath")
+    .attr("xlink:href", "#textPath_stateLabel" + newState)
+    .attr("startOffset", "50%")
+    .attr("font-size", "50%")
+    .append("tspan")
+    .attr("x", name.length * -3)
+    .text(name);
+
+  COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]);
+  statesEditorAddLines();
+}
+
+function exitAddStateMode() {
+  customization = 0;
+  restoreDefaultEvents();
+  clearMainTip();
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed");
+}
+
+function downloadStatesData() {
+  const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
+  let data =
+    "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
+  body.querySelectorAll(":scope > div").forEach(function (el) {
+    const key = parseInt(el.dataset.id);
+    const statePack = pack.states[key];
+    data += el.dataset.id + ",";
+    data += el.dataset.name + ",";
+    data += (statePack.fullName ? statePack.fullName : "") + ",";
+    data += el.dataset.form + ",";
+    data += el.dataset.color + ",";
+    data += el.dataset.capital + ",";
+    data += el.dataset.culture + ",";
+    data += el.dataset.type + ",";
+    data += el.dataset.expansionism + ",";
+    data += el.dataset.cells + ",";
+    data += el.dataset.burgs + ",";
+    data += el.dataset.area + ",";
+    data += el.dataset.population + ",";
+    data += `${Math.round(statePack.rural * populationRate)},`;
+    data += `${Math.round(statePack.urban * populationRate * urbanization)}\n`;
+  });
+
+  const name = getFileName("States") + ".csv";
+  downloadFile(data, name);
+}
+
+function closeStatesEditor() {
+  if (customization === 2) exitStatesManualAssignment("close");
+  if (customization === 3) exitAddStateMode();
+  debug.selectAll(".highlight").remove();
+  body.innerHTML = "";
+}
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index f30077b3..deba9f58 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -1093,3 +1093,10 @@ function refreshAllEditors() {
   if (document.getElementById("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
   TIME && console.timeEnd("refreshAllEditors");
 }
+
+// dynamically loaded editors
+async function editStates() {
+  if (customization) return;
+  const StateEditor = await import("../dynamic/editors/states-editor.js");
+  StateEditor.open();
+}
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 520aae43..357d9a57 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -75,12 +75,12 @@ function handleMouseMove() {
   const g = findGridCell(point[0], point[1]); // grid cell id
   if (tooltip.dataset.main) showMainTip();
   else showMapTooltip(point, d3.event, i, g);
-  if (cellInfo.offsetParent) updateCellInfo(point, i, g);
+  if (cellInfo?.offsetParent) updateCellInfo(point, i, g);
 }
 
 // show note box on hover (if any)
 function showNotes(e) {
-  if (notesEditor.offsetParent) return;
+  if (notesEditor?.offsetParent) return;
   let id = e.target.id || e.target.parentNode.id || e.target.parentNode.parentNode.id;
   if (e.target.parentNode.parentNode.id === "burgLabels") id = "burg" + e.target.dataset.id;
   else if (e.target.parentNode.parentNode.id === "burgIcons") id = "burg" + e.target.dataset.id;
@@ -90,7 +90,7 @@ function showNotes(e) {
     document.getElementById("notes").style.display = "block";
     document.getElementById("notesHeader").innerHTML = note.name;
     document.getElementById("notesBody").innerHTML = note.legend;
-  } else if (!options.pinNotes && !markerEditor.offsetParent) {
+  } else if (!options.pinNotes && !markerEditor?.offsetParent) {
     document.getElementById("notes").style.display = "none";
     document.getElementById("notesHeader").innerHTML = "";
     document.getElementById("notesBody").innerHTML = "";
@@ -129,7 +129,7 @@ function showMapTooltip(point, e, i, g) {
     const r = pack.rivers.find(r => r.i === river);
     const name = r ? r.name + " " + r.type : "";
     tip(name + ". Click to edit");
-    if (riversOverview.offsetParent) highlightEditorLine(riversOverview, river, 5000);
+    if (riversOverview?.offsetParent) highlightEditorLine(riversOverview, river, 5000);
     return;
   }
 
@@ -142,7 +142,7 @@ function showMapTooltip(point, e, i, g) {
     const b = pack.burgs[burg];
     const population = si(b.population * populationRate * urbanization);
     tip(`${b.name}. Population: ${population}. Click to edit`);
-    if (burgsOverview.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
+    if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
     return;
   }
   if (group === "labels") return tip("Click to edit the Label");
@@ -176,7 +176,7 @@ function showMapTooltip(point, e, i, g) {
   if (group === "zones") {
     const zone = path[path.length - 8];
     tip(zone.dataset.description);
-    if (zonesEditor.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
+    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
     return;
   }
 
@@ -189,27 +189,27 @@ function showMapTooltip(point, e, i, g) {
   else if (layerIsOn("toggleBiomes") && pack.cells.biome[i]) {
     const biome = pack.cells.biome[i];
     tip("Biome: " + biomesData.name[biome]);
-    if (biomesEditor.offsetParent) highlightEditorLine(biomesEditor, biome);
+    if (biomesEditor?.offsetParent) highlightEditorLine(biomesEditor, biome);
   } else if (layerIsOn("toggleReligions") && pack.cells.religion[i]) {
     const religion = pack.cells.religion[i];
     const r = pack.religions[religion];
     const type = r.type === "Cult" || r.type == "Heresy" ? r.type : r.type + " religion";
     tip(type + ": " + r.name);
-    if (religionsEditor.offsetParent) highlightEditorLine(religionsEditor, religion);
+    if (religionsEditor?.offsetParent) highlightEditorLine(religionsEditor, religion);
   } else if (pack.cells.state[i] && (layerIsOn("toggleProvinces") || layerIsOn("toggleStates"))) {
     const state = pack.cells.state[i];
     const stateName = pack.states[state].fullName;
     const province = pack.cells.province[i];
     const prov = province ? pack.provinces[province].fullName + ", " : "";
     tip(prov + stateName);
-    if (statesEditor.offsetParent) highlightEditorLine(statesEditor, state);
-    if (diplomacyEditor.offsetParent) highlightEditorLine(diplomacyEditor, state);
-    if (militaryOverview.offsetParent) highlightEditorLine(militaryOverview, state);
-    if (provincesEditor.offsetParent) highlightEditorLine(provincesEditor, province);
+    if (statesEditor?.offsetParent) highlightEditorLine(statesEditor, state);
+    if (diplomacyEditor?.offsetParent) highlightEditorLine(diplomacyEditor, state);
+    if (militaryOverview?.offsetParent) highlightEditorLine(militaryOverview, state);
+    if (provincesEditor?.offsetParent) highlightEditorLine(provincesEditor, province);
   } else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
     const culture = pack.cells.culture[i];
     tip("Culture: " + pack.cultures[culture].name);
-    if (culturesEditor.offsetParent) highlightEditorLine(culturesEditor, culture);
+    if (culturesEditor?.offsetParent) highlightEditorLine(culturesEditor, culture);
   } else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
 }
 
diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js
deleted file mode 100644
index 8fd12945..00000000
--- a/modules/ui/states-editor.js
+++ /dev/null
@@ -1,1222 +0,0 @@
-"use strict";
-function editStates() {
-  if (customization) return;
-  closeDialogs("#statesEditor, .stable");
-  if (!layerIsOn("toggleStates")) toggleStates();
-  if (!layerIsOn("toggleBorders")) toggleBorders();
-  if (layerIsOn("toggleCultures")) toggleCultures();
-  if (layerIsOn("toggleBiomes")) toggleBiomes();
-  if (layerIsOn("toggleReligions")) toggleReligions();
-
-  const body = document.getElementById("statesBodySection");
-  refreshStatesEditor();
-
-  if (modules.editStates) return;
-  modules.editStates = true;
-
-  $("#statesEditor").dialog({
-    title: "States Editor",
-    resizable: false,
-    width: fitContent(),
-    close: closeStatesEditor,
-    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
-  });
-
-  // add listeners
-  document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
-  document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
-  document.getElementById("statesLegend").addEventListener("click", toggleLegend);
-  document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("statesChart").addEventListener("click", showStatesChart);
-  document.getElementById("statesRegenerate").addEventListener("click", openRegenerationMenu);
-  document.getElementById("statesRegenerateBack").addEventListener("click", exitRegenerationMenu);
-  document.getElementById("statesRecalculate").addEventListener("click", () => recalculateStates(true));
-  document.getElementById("statesRandomize").addEventListener("click", randomizeStatesExpansion);
-  document.getElementById("statesNeutral").addEventListener("input", () => recalculateStates(false));
-  document.getElementById("statesNeutralNumber").addEventListener("change", () => recalculateStates(false));
-  document.getElementById("statesManually").addEventListener("click", enterStatesManualAssignent);
-  document.getElementById("statesManuallyApply").addEventListener("click", applyStatesManualAssignent);
-  document.getElementById("statesManuallyCancel").addEventListener("click", () => exitStatesManualAssignment());
-  document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
-  document.getElementById("statesExport").addEventListener("click", downloadStatesData);
-
-  body.addEventListener("click", function (ev) {
-    const el = ev.target,
-      cl = el.classList,
-      line = el.parentNode,
-      state = +line.dataset.id;
-    if (el.tagName === "FILL-BOX") stateChangeFill(el);
-    else if (cl.contains("name")) editStateName(state);
-    else if (cl.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
-    else if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state);
-    else if (cl.contains("culturePopulation")) changePopulation(state);
-    else if (cl.contains("icon-pin")) toggleFog(state, cl);
-    else if (cl.contains("icon-trash-empty")) stateRemovePrompt(state);
-  });
-
-  body.addEventListener("input", function (ev) {
-    const el = ev.target,
-      cl = el.classList,
-      line = el.parentNode,
-      state = +line.dataset.id;
-    if (cl.contains("stateCapital")) stateChangeCapitalName(state, line, el.value);
-    else if (cl.contains("cultureType")) stateChangeType(state, line, el.value);
-    else if (cl.contains("statePower")) stateChangeExpansionism(state, line, el.value);
-  });
-
-  body.addEventListener("change", function (ev) {
-    const el = ev.target,
-      cl = el.classList,
-      line = el.parentNode,
-      state = +line.dataset.id;
-    if (cl.contains("stateCulture")) stateChangeCulture(state, line, el.value);
-  });
-
-  function refreshStatesEditor() {
-    BurgsAndStates.collectStatistics();
-    statesEditorAddLines();
-  }
-
-  // add line for each state
-  function statesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
-    let lines = "",
-      totalArea = 0,
-      totalPopulation = 0,
-      totalBurgs = 0;
-
-    for (const s of pack.states) {
-      if (s.removed) continue;
-      const area = s.area * distanceScaleInput.value ** 2;
-      const rural = s.rural * populationRate;
-      const urban = s.urban * populationRate * urbanization;
-      const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
-      totalArea += area;
-      totalPopulation += population;
-      totalBurgs += s.burgs;
-      const focused = defs.select("#fog #focusState" + s.i).size();
-
-      if (!s.i) {
-        // Neutral line
-        lines += /* html */ `<div
-          class="states"
-          data-id=${s.i}
-          data-name="${s.name}"
-          data-cells=${s.cells}
-          data-area=${area}
-          data-population=${population}
-          data-burgs=${s.burgs}
-          data-color=""
-          data-form=""
-          data-capital=""
-          data-culture=""
-          data-type=""
-          data-expansionism=""
-        >
-          <svg width="1em" height="1em" class="placeholder"></svg>
-          <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly />
-          <svg class="coaIcon placeholder hide"></svg>
-          <input class="stateForm placeholder" value="none" />
-          <span class="icon-star-empty placeholder hide"></span>
-          <input class="stateCapital placeholder hide" />
-          <select class="stateCulture placeholder hide">
-            ${getCultureOptions(0)}
-          </select>
-          <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
-          <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
-          <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
-          <div data-tip="Neutral lands area" class="biomeArea hide">${si(area) + unit}</div>
-          <span data-tip="${populationTip}" class="icon-male hide"></span>
-          <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-          <select class="cultureType ${hidden} placeholder show hide">
-            ${getTypeOptions(0)}
-          </select>
-          <span class="icon-resize-full ${hidden} placeholder show hide"></span>
-          <input class="statePower ${hidden} placeholder show hide" type="number" value="0" />
-          <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
-          <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
-        </div>`;
-        continue;
-      }
-
-      const capital = pack.burgs[s.capital].name;
-      COArenderer.trigger("stateCOA" + s.i, s.coa);
-      lines += /* html */ `<div
-        class="states"
-        data-id=${s.i}
-        data-name="${s.name}"
-        data-form="${s.formName}"
-        data-capital="${capital}"
-        data-color="${s.color}"
-        data-cells=${s.cells}
-        data-area=${area}
-        data-population=${population}
-        data-burgs=${s.burgs}
-        data-culture=${pack.cultures[s.culture].name}
-        data-type=${s.type}
-        data-expansionism=${s.expansionism}
-      >
-        <fill-box fill="${s.color}"></fill-box>
-        <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
-        <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
-        <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly />
-        <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
-        <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
-        <select data-tip="Dominant culture. Click to change" class="stateCulture hide">
-          ${getCultureOptions(s.culture)}
-        </select>
-        <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
-        <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
-        <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="State area" class="biomeArea hide">${si(area) + unit}</div>
-        <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">
-          ${getTypeOptions(s.type)}
-        </select>
-        <span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
-        <input
-          data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
-          class="statePower ${hidden} show hide"
-          type="number"
-          min="0"
-          max="99"
-          step=".1"
-          value=${s.expansionism}
-        />
-        <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
-        <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
-        <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
-        <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
-      </div>`;
-    }
-    body.innerHTML = lines;
-
-    // update footer
-    statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length;
-    statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
-    statesFooterBurgs.innerHTML = totalBurgs;
-    statesFooterArea.innerHTML = si(totalArea) + unit;
-    statesFooterPopulation.innerHTML = si(totalPopulation);
-    statesFooterArea.dataset.area = totalArea;
-    statesFooterPopulation.dataset.population = totalPopulation;
-
-    body.querySelectorAll("div.states").forEach(el => {
-      el.addEventListener("click", selectStateOnLineClick);
-      el.addEventListener("mouseenter", ev => stateHighlightOn(ev));
-      el.addEventListener("mouseleave", ev => stateHighlightOff(ev));
-    });
-
-    if (body.dataset.type === "percentage") {
-      body.dataset.type = "absolute";
-      togglePercentageMode();
-    }
-    applySorting(statesHeader);
-    $("#statesEditor").dialog({width: fitContent()});
-  }
-
-  function getCultureOptions(culture) {
-    let options = "";
-    pack.cultures.forEach(c => {
-      if (!c.removed) {
-        options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>`;
-      }
-    });
-    return options;
-  }
-
-  function getTypeOptions(type) {
-    let options = "";
-    const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
-    types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
-    return options;
-  }
-
-  function stateHighlightOn(event) {
-    if (!layerIsOn("toggleStates")) return;
-    if (defs.select("#fog path").size()) return;
-
-    const state = +event.target.dataset.id;
-    if (customization || !state) return;
-    const d = regions.select("#state" + state).attr("d");
-
-    const path = debug
-      .append("path")
-      .attr("class", "highlight")
-      .attr("d", d)
-      .attr("fill", "none")
-      .attr("stroke", "red")
-      .attr("stroke-width", 1)
-      .attr("opacity", 1)
-      .attr("filter", "url(#blur1)");
-
-    const l = path.node().getTotalLength(),
-      dur = (l + 5000) / 2;
-    const i = d3.interpolateString("0," + l, l + "," + l);
-    path
-      .transition()
-      .duration(dur)
-      .attrTween("stroke-dasharray", function () {
-        return t => i(t);
-      });
-  }
-
-  function stateHighlightOff() {
-    debug.selectAll(".highlight").each(function () {
-      d3.select(this).transition().duration(1000).attr("opacity", 0).remove();
-    });
-  }
-
-  function stateChangeFill(el) {
-    const currentFill = el.getAttribute("fill");
-    const state = +el.parentNode.dataset.id;
-
-    const callback = function (newFill) {
-      el.fill = newFill;
-      pack.states[state].color = newFill;
-      statesBody.select("#state" + state).attr("fill", newFill);
-      statesBody.select("#state-gap" + state).attr("stroke", newFill);
-      const halo = d3.color(newFill) ? d3.color(newFill).darker().hex() : "#666666";
-      statesHalo.select("#state-border" + state).attr("stroke", halo);
-
-      // recolor regiments
-      const solidColor = newFill[0] === "#" ? newFill : "#999";
-      const darkerColor = d3.color(solidColor).darker().hex();
-      armies.select("#army" + state).attr("fill", solidColor);
-      armies
-        .select("#army" + state)
-        .selectAll("g > rect:nth-of-type(2)")
-        .attr("fill", darkerColor);
-    };
-
-    openPicker(currentFill, callback);
-  }
-
-  function editStateName(state) {
-    // reset input value and close add mode
-    stateNameEditorCustomForm.value = "";
-    const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
-    if (addModeActive) {
-      stateNameEditorCustomForm.style.display = "none";
-      stateNameEditorSelectForm.style.display = "inline-block";
-    }
-
-    const s = pack.states[state];
-    document.getElementById("stateNameEditor").dataset.state = state;
-    document.getElementById("stateNameEditorShort").value = s.name || "";
-    applyOption(stateNameEditorSelectForm, s.formName);
-    document.getElementById("stateNameEditorFull").value = s.fullName || "";
-
-    $("#stateNameEditor").dialog({
-      resizable: false,
-      title: "Change state name",
-      buttons: {
-        Apply: function () {
-          applyNameChange(s);
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      },
-      position: {my: "center", at: "center", of: "svg"}
-    });
-
-    if (modules.editStateName) return;
-    modules.editStateName = true;
-
-    // add listeners
-    document.getElementById("stateNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
-    document.getElementById("stateNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
-    document.getElementById("stateNameEditorAddForm").addEventListener("click", addCustomForm);
-    document.getElementById("stateNameEditorCustomForm").addEventListener("change", addCustomForm);
-    document.getElementById("stateNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
-
-    function regenerateShortNameCuture() {
-      const state = +stateNameEditor.dataset.state;
-      const culture = pack.states[state].culture;
-      const name = Names.getState(Names.getCultureShort(culture), culture);
-      document.getElementById("stateNameEditorShort").value = name;
-    }
-
-    function regenerateShortNameRandom() {
-      const base = rand(nameBases.length - 1);
-      const name = Names.getState(Names.getBase(base), undefined, base);
-      document.getElementById("stateNameEditorShort").value = name;
-    }
-
-    function addCustomForm() {
-      const value = stateNameEditorCustomForm.value;
-      const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
-      stateNameEditorCustomForm.style.display = addModeActive ? "none" : "inline-block";
-      stateNameEditorSelectForm.style.display = addModeActive ? "inline-block" : "none";
-      if (value && addModeActive) applyOption(stateNameEditorSelectForm, value);
-      stateNameEditorCustomForm.value = "";
-    }
-
-    function regenerateFullName() {
-      const short = document.getElementById("stateNameEditorShort").value;
-      const form = document.getElementById("stateNameEditorSelectForm").value;
-      document.getElementById("stateNameEditorFull").value = getFullName();
-
-      function getFullName() {
-        if (!form) return short;
-        if (!short && form) return "The " + form;
-        const tick = +stateNameEditorFullRegenerate.dataset.tick;
-        stateNameEditorFullRegenerate.dataset.tick = tick + 1;
-        return tick % 2 ? getAdjective(short) + " " + form : form + " of " + short;
-      }
-    }
-
-    function applyNameChange(s) {
-      const nameInput = document.getElementById("stateNameEditorShort");
-      const formSelect = document.getElementById("stateNameEditorSelectForm");
-      const fullNameInput = document.getElementById("stateNameEditorFull");
-
-      const nameChanged = nameInput.value !== s.name;
-      const formChanged = formSelect.value !== s.formName;
-      const fullNameChanged = fullNameInput.value !== s.fullName;
-      const changed = nameChanged || formChanged || fullNameChanged;
-
-      if (formChanged) {
-        const selected = formSelect.selectedOptions[0];
-        const form = selected.parentElement.label || null;
-        if (form) s.form = form;
-      }
-
-      s.name = nameInput.value;
-      s.formName = formSelect.value;
-      s.fullName = fullNameInput.value;
-      if (changed && stateNameEditorUpdateLabel.checked) BurgsAndStates.drawStateLabels([s.i]);
-      refreshStatesEditor();
-    }
-  }
-
-  function stateChangeCapitalName(state, line, value) {
-    line.dataset.capital = value;
-    const capital = pack.states[state].capital;
-    if (!capital) return;
-    pack.burgs[capital].name = value;
-    document.querySelector("#burgLabel" + capital).textContent = value;
-  }
-
-  function changePopulation(state) {
-    const s = pack.states[state];
-    if (!s.cells) {
-      tip("State does not have any cells, cannot change population", false, "error");
-      return;
-    }
-    const rural = rn(s.rural * populationRate);
-    const urban = rn(s.urban * populationRate * urbanization);
-    const total = rural + urban;
-    const l = n => Number(n).toLocaleString();
-
-    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
-      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"} />
-      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
-
-    const update = function () {
-      const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
-      if (isNaN(totalNew)) return;
-      totalPop.innerHTML = l(totalNew);
-      totalPopPerc.innerHTML = rn((totalNew / total) * 100);
-    };
-
-    ruralPop.oninput = () => update();
-    urbanPop.oninput = () => update();
-
-    $("#alert").dialog({
-      resizable: false,
-      title: "Change state population",
-      width: "24em",
-      buttons: {
-        Apply: function () {
-          applyPopulationChange();
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      },
-      position: {my: "center", at: "center", of: "svg"}
-    });
-
-    function applyPopulationChange() {
-      const ruralChange = ruralPop.value / rural;
-      if (isFinite(ruralChange) && ruralChange !== 1) {
-        const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
-        cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
-      }
-      if (!isFinite(ruralChange) && +ruralPop.value > 0) {
-        const points = ruralPop.value / populationRate;
-        const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
-        const pop = points / cells.length;
-        cells.forEach(i => (pack.cells.pop[i] = pop));
-      }
-
-      const urbanChange = urbanPop.value / urban;
-      if (isFinite(urbanChange) && urbanChange !== 1) {
-        const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
-        burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
-      }
-      if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-        const points = urbanPop.value / populationRate / urbanization;
-        const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
-        const population = rn(points / burgs.length, 4);
-        burgs.forEach(b => (b.population = population));
-      }
-
-      refreshStatesEditor();
-    }
-  }
-
-  function stateCapitalZoomIn(state) {
-    const capital = pack.states[state].capital;
-    const l = burgLabels.select("[data-id='" + capital + "']");
-    const x = +l.attr("x"),
-      y = +l.attr("y");
-    zoomTo(x, y, 8, 2000);
-  }
-
-  function stateChangeCulture(state, line, value) {
-    line.dataset.base = pack.states[state].culture = +value;
-  }
-
-  function stateChangeType(state, line, value) {
-    line.dataset.type = pack.states[state].type = value;
-    recalculateStates();
-  }
-
-  function stateChangeExpansionism(state, line, value) {
-    line.dataset.expansionism = pack.states[state].expansionism = value;
-    recalculateStates();
-  }
-
-  function toggleFog(state, cl) {
-    if (customization) return;
-    const path = statesBody.select("#state" + state).attr("d"),
-      id = "focusState" + state;
-    cl.contains("inactive") ? fog(id, path) : unfog(id);
-    cl.toggle("inactive");
-  }
-
-  function stateRemovePrompt(state) {
-    if (customization) return;
-
-    alertMessage.innerHTML = "Are you sure you want to remove the state? <br>This action cannot be reverted";
-    $("#alert").dialog({
-      resizable: false,
-      title: "Remove state",
-      buttons: {
-        Remove: function () {
-          $(this).dialog("close");
-          stateRemove(state);
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  }
-
-  function stateRemove(state) {
-    statesBody.select("#state" + state).remove();
-    statesBody.select("#state-gap" + state).remove();
-    statesHalo.select("#state-border" + state).remove();
-    labels.select("#stateLabel" + state).remove();
-    defs.select("#textPath_stateLabel" + state).remove();
-
-    unfog("focusState" + state);
-    pack.burgs.forEach(b => {
-      if (b.state === state) b.state = 0;
-    });
-    pack.cells.state.forEach((s, i) => {
-      if (s === state) pack.cells.state[i] = 0;
-    });
-
-    // remove emblem
-    const coaId = "stateCOA" + state;
-    document.getElementById(coaId).remove();
-    emblems.select(`#stateEmblems > use[data-i='${state}']`).remove();
-
-    // remove provinces
-    pack.states[state].provinces.forEach(p => {
-      pack.provinces[p] = {i: p, removed: true};
-      pack.cells.province.forEach((pr, i) => {
-        if (pr === p) pack.cells.province[i] = 0;
-      });
-
-      const coaId = "provinceCOA" + p;
-      if (document.getElementById(coaId)) document.getElementById(coaId).remove();
-      emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
-      const g = provs.select("#provincesBody");
-      g.select("#province" + p).remove();
-      g.select("#province-gap" + p).remove();
-    });
-
-    // remove military
-    pack.states[state].military.forEach(m => {
-      const id = `regiment${state}-${m.i}`;
-      const index = notes.findIndex(n => n.id === id);
-      if (index != -1) notes.splice(index, 1);
-    });
-    armies.select("g#army" + state).remove();
-
-    const capital = pack.states[state].capital;
-    pack.burgs[capital].capital = 0;
-    pack.burgs[capital].state = 0;
-    moveBurgToGroup(capital, "towns");
-
-    pack.states[state] = {i: state, removed: true};
-
-    debug.selectAll(".highlight").remove();
-    if (!layerIsOn("toggleStates")) toggleStates();
-    else drawStates();
-    if (!layerIsOn("toggleBorders")) toggleBorders();
-    else drawBorders();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-    refreshStatesEditor();
-  }
-
-  function toggleLegend() {
-    if (legend.selectAll("*").size()) {
-      clearLegend();
-      return;
-    } // hide legend
-    const data = pack.states
-      .filter(s => s.i && !s.removed && s.cells)
-      .sort((a, b) => b.area - a.area)
-      .map(s => [s.i, s.color, s.name]);
-    drawLegend("States", data);
-  }
-
-  function togglePercentageMode() {
-    if (body.dataset.type === "absolute") {
-      body.dataset.type = "percentage";
-      const totalCells = +statesFooterCells.innerHTML;
-      const totalBurgs = +statesFooterBurgs.innerHTML;
-      const totalArea = +statesFooterArea.dataset.area;
-      const totalPopulation = +statesFooterPopulation.dataset.population;
-
-      body.querySelectorAll(":scope > div").forEach(function (el) {
-        el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
-        el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
-        el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-        el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
-      });
-    } else {
-      body.dataset.type = "absolute";
-      statesEditorAddLines();
-    }
-  }
-
-  function showStatesChart() {
-    // build hierarchy tree
-    const statesData = pack.states.filter(s => !s.removed);
-    if (statesData.length < 2) return tip("There are no states to show", false, "error");
-
-    const root = d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => (d.i ? 0 : null))(statesData)
-      .sum(d => d.area)
-      .sort((a, b) => b.value - a.value);
-
-    const size = 150 + 200 * uiSizeOutput.value;
-    const margin = {top: 0, right: -50, bottom: 0, left: -50};
-    const w = size - margin.left - margin.right;
-    const h = size - margin.top - margin.bottom;
-    const treeLayout = d3.pack().size([w, h]).padding(3);
-
-    // prepare svg
-    alertMessage.innerHTML = /* html */ `<select id="statesTreeType" style="display:block; margin-left:13px; font-size:11px">
-      <option value="area" selected>Area</option>
-      <option value="population">Total population</option>
-      <option value="rural">Rural population</option>
-      <option value="urban">Urban population</option>
-      <option value="burgs">Burgs number</option>
-    </select>`;
-    alertMessage.innerHTML += `<div id='statesInfo' class='chartInfo'>&#8205;</div>`;
-
-    const svg = d3
-      .select("#alertMessage")
-      .insert("svg", "#statesInfo")
-      .attr("id", "statesTree")
-      .attr("width", size)
-      .attr("height", size)
-      .style("font-family", "Almendra SC")
-      .attr("text-anchor", "middle")
-      .attr("dominant-baseline", "central");
-    const graph = svg.append("g").attr("transform", `translate(-50, 0)`);
-    document.getElementById("statesTreeType").addEventListener("change", updateChart);
-
-    treeLayout(root);
-
-    const node = graph
-      .selectAll("g")
-      .data(root.leaves())
-      .enter()
-      .append("g")
-      .attr("transform", d => `translate(${d.x},${d.y})`)
-      .attr("data-id", d => d.data.i)
-      .on("mouseenter", d => showInfo(event, d))
-      .on("mouseleave", d => hideInfo(event, d));
-
-    node
-      .append("circle")
-      .attr("fill", d => d.data.color)
-      .attr("r", d => d.r);
-
-    const exp = /(?=[A-Z][^A-Z])/g;
-    const lp = n => d3.max(n.split(exp).map(p => p.length)) + 1; // longest name part + 1
-
-    node
-      .append("text")
-      .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px")
-      .selectAll("tspan")
-      .data(d => d.data.name.split(exp))
-      .join("tspan")
-      .attr("x", 0)
-      .text(d => d)
-      .attr("dy", (d, i, n) => `${i ? 1 : (n.length - 1) / -2}em`);
-
-    function showInfo(ev, d) {
-      d3.select(ev.target).select("circle").classed("selected", 1);
-      const state = d.data.fullName;
-
-      const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-      const area = d.data.area * distanceScaleInput.value ** 2 + unit;
-      const rural = rn(d.data.rural * populationRate);
-      const urban = rn(d.data.urban * populationRate * urbanization);
-
-      const option = statesTreeType.value;
-      const value =
-        option === "area"
-          ? "Area: " + area
-          : option === "rural"
-          ? "Rural population: " + si(rural)
-          : option === "urban"
-          ? "Urban population: " + si(urban)
-          : option === "burgs"
-          ? "Burgs number: " + d.data.burgs
-          : "Population: " + si(rural + urban);
-
-      statesInfo.innerHTML = /* html */ `${state}. ${value}`;
-      stateHighlightOn(ev);
-    }
-
-    function hideInfo(ev) {
-      stateHighlightOff(ev);
-      if (!document.getElementById("statesInfo")) return;
-      statesInfo.innerHTML = "&#8205;";
-      d3.select(ev.target).select("circle").classed("selected", 0);
-    }
-
-    function updateChart() {
-      const value =
-        this.value === "area"
-          ? d => d.area
-          : this.value === "rural"
-          ? d => d.rural
-          : this.value === "urban"
-          ? d => d.urban
-          : this.value === "burgs"
-          ? d => d.burgs
-          : d => d.rural + d.urban;
-
-      root.sum(value);
-      node.data(treeLayout(root).leaves());
-
-      node
-        .transition()
-        .duration(1500)
-        .attr("transform", d => `translate(${d.x},${d.y})`);
-      node
-        .select("circle")
-        .transition()
-        .duration(1500)
-        .attr("r", d => d.r);
-      node
-        .select("text")
-        .transition()
-        .duration(1500)
-        .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px");
-    }
-
-    $("#alert").dialog({
-      title: "States bubble chart",
-      width: fitContent(),
-      position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
-      buttons: {},
-      close: () => {
-        alertMessage.innerHTML = "";
-      }
-    });
-  }
-
-  function openRegenerationMenu() {
-    statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "none"));
-    statesRegenerateButtons.style.display = "block";
-
-    statesEditor.querySelectorAll(".show").forEach(el => el.classList.remove("hidden"));
-    $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
-  }
-
-  function recalculateStates(must) {
-    if (!must && !statesAutoChange.checked) return;
-
-    BurgsAndStates.expandStates();
-    BurgsAndStates.generateProvinces();
-    if (!layerIsOn("toggleStates")) toggleStates();
-    else drawStates();
-    if (!layerIsOn("toggleBorders")) toggleBorders();
-    else drawBorders();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-    if (adjustLabels.checked) BurgsAndStates.drawStateLabels();
-    refreshStatesEditor();
-  }
-
-  function randomizeStatesExpansion() {
-    pack.states.forEach(s => {
-      if (!s.i || s.removed) return;
-      const expansionism = rn(Math.random() * 4 + 1, 1);
-      s.expansionism = expansionism;
-      body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
-    });
-    recalculateStates(true, true);
-  }
-
-  function exitRegenerationMenu() {
-    statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "inline-block"));
-    statesRegenerateButtons.style.display = "none";
-    statesEditor.querySelectorAll(".show").forEach(el => el.classList.add("hidden"));
-    $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
-  }
-
-  function enterStatesManualAssignent() {
-    if (!layerIsOn("toggleStates")) toggleStates();
-    customization = 2;
-    statesBody.append("g").attr("id", "temp");
-    document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("statesManuallyButtons").style.display = "inline-block";
-    document.getElementById("statesHalo").style.display = "none";
-
-    statesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
-    statesFooter.style.display = "none";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-    $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
-
-    tip("Click on state to select, drag the circle to change state", true);
-    viewbox
-      .style("cursor", "crosshair")
-      .on("click", selectStateOnMapClick)
-      .call(d3.drag().on("start", dragStateBrush))
-      .on("touchmove mousemove", moveStateBrush);
-
-    body.querySelector("div").classList.add("selected");
-  }
-
-  function selectStateOnLineClick() {
-    if (customization !== 2) return;
-    if (this.parentNode.id !== "statesBodySection") return;
-    body.querySelector("div.selected").classList.remove("selected");
-    this.classList.add("selected");
-  }
-
-  function selectStateOnMapClick() {
-    const point = d3.mouse(this);
-    const i = findCell(point[0], point[1]);
-    if (pack.cells.h[i] < 20) return;
-
-    const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']");
-    const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i];
-
-    body.querySelector("div.selected").classList.remove("selected");
-    body.querySelector("div[data-id='" + state + "']").classList.add("selected");
-  }
-
-  function dragStateBrush() {
-    const r = +statesManuallyBrush.value;
-
-    d3.event.on("drag", () => {
-      if (!d3.event.dx && !d3.event.dy) return;
-      const p = d3.mouse(this);
-      moveCircle(p[0], p[1], r);
-
-      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
-      const selection = found.filter(isLand);
-      if (selection) changeStateForSelection(selection);
-    });
-  }
-
-  // change state within selection
-  function changeStateForSelection(selection) {
-    const temp = statesBody.select("#temp");
-    const selected = body.querySelector("div.selected");
-
-    const stateNew = +selected.dataset.id;
-    const color = pack.states[stateNew].color || "#ffffff";
-
-    selection.forEach(function (i) {
-      const exists = temp.select("polygon[data-cell='" + i + "']");
-      const stateOld = exists.size() ? +exists.attr("data-state") : pack.cells.state[i];
-      if (stateNew === stateOld) return;
-      if (i === pack.states[stateOld].center) return;
-
-      // change of append new element
-      if (exists.size()) exists.attr("data-state", stateNew).attr("fill", color).attr("stroke", color);
-      else temp.append("polygon").attr("data-cell", i).attr("data-state", stateNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
-    });
-  }
-
-  function moveStateBrush() {
-    showMainTip();
-    const point = d3.mouse(this);
-    const radius = +statesManuallyBrush.value;
-    moveCircle(point[0], point[1], radius);
-  }
-
-  function applyStatesManualAssignent() {
-    const {cells} = pack;
-    const affectedStates = [];
-    const affectedProvinces = [];
-
-    statesBody
-      .select("#temp")
-      .selectAll("polygon")
-      .each(function () {
-        const i = +this.dataset.cell;
-        const c = +this.dataset.state;
-        affectedStates.push(cells.state[i], c);
-        affectedProvinces.push(cells.province[i]);
-        cells.state[i] = c;
-        if (cells.burg[i]) pack.burgs[cells.burg[i]].state = c;
-      });
-
-    if (affectedStates.length) {
-      refreshStatesEditor();
-      layerIsOn("toggleStates") ? drawStates() : toggleStates();
-      if (adjustLabels.checked) BurgsAndStates.drawStateLabels([...new Set(affectedStates)]);
-      adjustProvinces([...new Set(affectedProvinces)]);
-      layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
-      if (layerIsOn("toggleProvinces")) drawProvinces();
-    }
-
-    exitStatesManualAssignment();
-  }
-
-  function adjustProvinces(affectedProvinces) {
-    const {cells, provinces, states, burgs} = pack;
-
-    affectedProvinces.forEach(provinceId => {
-      if (!provinces[provinceId]) return; // lands without province captured => do nothing
-
-      // find states owning at least 1 province cell
-      const provCells = cells.i.filter(i => cells.province[i] === provinceId);
-      const provStates = [...new Set(provCells.map(i => cells.state[i]))];
-
-      // province is captured completely => change owner or remove
-      if (provinceId && provStates.length === 1) return changeProvinceOwner(provinceId, provStates[0], provCells);
-
-      // province is captured partially => split province
-      splitProvince(provinceId, provStates, provCells);
-    });
-
-    function changeProvinceOwner(provinceId, newOwnerId, provinceCells) {
-      const province = provinces[provinceId];
-      const prevOwner = states[province.state];
-
-      // remove province from old owner list
-      prevOwner.provinces = prevOwner.provinces.filter(province => province !== provinceId);
-
-      if (newOwnerId) {
-        // new owner is a state => change owner
-        province.state = newOwnerId;
-        states[newOwnerId].provinces.push(provinceId);
-      } else {
-        // new owner is neutral => remove province
-        provinces[provinceId] = {i: provinceId, removed: true};
-        provinceCells.forEach(i => {
-          cells.province[i] = 0;
-        });
-      }
-    }
-
-    function splitProvince(provinceId, provinceStates, provinceCells) {
-      const province = provinces[provinceId];
-      const prevOwner = states[province.state];
-      const provinceCenterOwner = cells.state[province.center];
-
-      provinceStates.forEach(stateId => {
-        const stateProvinceCells = provinceCells.filter(i => cells.state[i] === stateId);
-
-        if (stateId === provinceCenterOwner) {
-          // province center is owned by the same state => do nothing for this state
-          if (stateId === prevOwner.i) return;
-
-          // province center is captured by neutrals => remove province
-          if (!stateId) {
-            provinces[provinceId] = {i: provinceId, removed: true};
-            stateProvinceCells.forEach(i => {
-              cells.province[i] = 0;
-            });
-            return;
-          }
-
-          // reassign province ownership to province center owner
-          prevOwner.provinces = prevOwner.provinces.filter(province => province !== provinceId);
-          province.state = stateId;
-          province.color = getMixedColor(states[stateId].color);
-          states[stateId].provinces.push(provinceId);
-          return;
-        }
-
-        // province cells captured by neutrals => remove captured cells from province
-        if (!stateId) {
-          stateProvinceCells.forEach(i => {
-            cells.province[i] = 0;
-          });
-          return;
-        }
-
-        // a few province cells owned by state => add to closes province
-        if (stateProvinceCells.length < 20) {
-          const closestProvince = findClosestProvince(provinceId, stateId, stateProvinceCells);
-          if (closestProvince) {
-            stateProvinceCells.forEach(i => {
-              cells.province[i] = closestProvince;
-            });
-            return;
-          }
-        }
-
-        // some province cells owned by state => create new province
-        createProvince(province, stateId, stateProvinceCells);
-      });
-    }
-
-    function createProvince(oldProvince, stateId, provinceCells) {
-      const newProvinceId = provinces.length;
-      const burgCell = provinceCells.find(i => cells.burg[i]);
-      const center = burgCell ? burgCell : provinceCells[0];
-      const burgId = burgCell ? cells.burg[burgCell] : 0;
-      const burg = burgId ? burgs[burgId] : null;
-      const culture = cells.culture[center];
-
-      const nameByBurg = burgCell && P(0.5);
-      const name = nameByBurg ? burg.name : oldProvince.name || Names.getState(Names.getCultureShort(culture), culture);
-
-      const formOptions = ["Zone", "Area", "Territory", "Province"];
-      const formName = burgCell && oldProvince.formName ? oldProvince.formName : ra(formOptions);
-
-      const color = getMixedColor(states[stateId].color);
-
-      const kinship = nameByBurg ? 0.8 : 0.4;
-      const type = BurgsAndStates.getType(center, burg?.port);
-      const coa = COA.generate(burg?.coa || states[stateId].coa, kinship, burg ? null : 0.9, type);
-      coa.shield = COA.getShield(culture, stateId);
-
-      provinces.push({i: newProvinceId, state: stateId, center, burg: burgId, name, formName, fullName: `${name} ${formName}`, color, coa});
-
-      provinceCells.forEach(i => {
-        cells.province[i] = newProvinceId;
-      });
-
-      states[stateId].provinces.push(newProvinceId);
-    }
-
-    function findClosestProvince(provinceId, stateId, sourceCells) {
-      const borderCell = sourceCells.find(i =>
-        cells.c[i].some(c => {
-          return cells.state[c] === stateId && cells.province[c] && cells.province[c] !== provinceId;
-        })
-      );
-
-      const closesProvince = borderCell && cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
-      return closesProvince;
-    }
-  }
-
-  function exitStatesManualAssignment(close) {
-    customization = 0;
-    statesBody.select("#temp").remove();
-    removeCircle();
-    document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("statesManuallyButtons").style.display = "none";
-    document.getElementById("statesHalo").style.display = "block";
-
-    statesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
-    statesFooter.style.display = "block";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
-
-    restoreDefaultEvents();
-    clearMainTip();
-    const selected = body.querySelector("div.selected");
-    if (selected) selected.classList.remove("selected");
-  }
-
-  function enterAddStateMode() {
-    if (this.classList.contains("pressed")) {
-      exitAddStateMode();
-      return;
-    }
-    customization = 3;
-    this.classList.add("pressed");
-    tip("Click on the map to create a new capital or promote an existing burg", true);
-    viewbox.style("cursor", "crosshair").on("click", addState);
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-  }
-
-  function addState() {
-    const {cells, states, burgs} = pack;
-    const point = d3.mouse(this);
-    const center = findCell(point[0], point[1]);
-    if (cells.h[center] < 20) return tip("You cannot place state into the water. Please click on a land cell", false, "error");
-
-    let burg = cells.burg[center];
-    if (burg && burgs[burg].capital) return tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error");
-
-    if (!burg) burg = addBurg(point); // add new burg
-
-    const oldState = cells.state[center];
-    const newState = states.length;
-
-    // turn burg into a capital
-    burgs[burg].capital = 1;
-    burgs[burg].state = newState;
-    moveBurgToGroup(burg, "cities");
-
-    if (d3.event.shiftKey === false) exitAddStateMode();
-
-    const culture = cells.culture[center];
-    const basename = center % 5 === 0 ? burgs[burg].name : Names.getCulture(culture);
-    const name = Names.getState(basename, culture);
-    const color = getRandomColor();
-    const pole = cells.p[center];
-
-    // generate emblem
-    const cultureType = pack.cultures[culture].type;
-    const coa = COA.generate(burgs[burg].coa, 0.4, null, cultureType);
-    coa.shield = COA.getShield(culture, null);
-
-    // update diplomacy and reverse relations
-    const diplomacy = states.map(s => {
-      if (!s.i || s.removed) return "x";
-      if (!oldState) {
-        s.diplomacy.push("Neutral");
-        return "Neutral";
-      }
-
-      let relations = states[oldState].diplomacy[s.i]; // relations between Nth state and old overlord
-      if (s.i === oldState) relations = "Enemy";
-      // new state is Enemy to its old overlord
-      else if (relations === "Ally") relations = "Suspicion";
-      else if (relations === "Friendly") relations = "Suspicion";
-      else if (relations === "Suspicion") relations = "Neutral";
-      else if (relations === "Enemy") relations = "Friendly";
-      else if (relations === "Rival") relations = "Friendly";
-      else if (relations === "Vassal") relations = "Suspicion";
-      else if (relations === "Suzerain") relations = "Enemy";
-      s.diplomacy.push(relations);
-      return relations;
-    });
-    diplomacy.push("x");
-    states[0].diplomacy.push([`Independance declaration`, `${name} declared its independance from ${states[oldState].name}`]);
-
-    cells.state[center] = newState;
-    cells.province[center] = 0;
-
-    states.push({
-      i: newState,
-      name,
-      diplomacy,
-      provinces: [],
-      color,
-      expansionism: 0.5,
-      capital: burg,
-      type: "Generic",
-      center,
-      culture,
-      military: [],
-      alert: 1,
-      coa,
-      pole
-    });
-    BurgsAndStates.collectStatistics();
-    BurgsAndStates.defineStateForms([newState]);
-    adjustProvinces([cells.province[center]]);
-
-    if (layerIsOn("toggleProvinces")) toggleProvinces();
-    if (!layerIsOn("toggleStates")) toggleStates();
-    else drawStates();
-    if (!layerIsOn("toggleBorders")) toggleBorders();
-    else drawBorders();
-
-    // add label
-    defs
-      .select("#textPaths")
-      .append("path")
-      .attr("d", `M${pole[0] - 50},${pole[1] + 6}h${100}`)
-      .attr("id", "textPath_stateLabel" + newState);
-    labels
-      .select("#states")
-      .append("text")
-      .attr("id", "stateLabel" + newState)
-      .append("textPath")
-      .attr("xlink:href", "#textPath_stateLabel" + newState)
-      .attr("startOffset", "50%")
-      .attr("font-size", "50%")
-      .append("tspan")
-      .attr("x", name.length * -3)
-      .text(name);
-
-    COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]);
-    statesEditorAddLines();
-  }
-
-  function exitAddStateMode() {
-    customization = 0;
-    restoreDefaultEvents();
-    clearMainTip();
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed");
-  }
-
-  function downloadStatesData() {
-    const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data =
-      "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      const key = parseInt(el.dataset.id);
-      const statePack = pack.states[key];
-      data += el.dataset.id + ",";
-      data += el.dataset.name + ",";
-      data += (statePack.fullName ? statePack.fullName : "") + ",";
-      data += el.dataset.form + ",";
-      data += el.dataset.color + ",";
-      data += el.dataset.capital + ",";
-      data += el.dataset.culture + ",";
-      data += el.dataset.type + ",";
-      data += el.dataset.expansionism + ",";
-      data += el.dataset.cells + ",";
-      data += el.dataset.burgs + ",";
-      data += el.dataset.area + ",";
-      data += el.dataset.population + ",";
-      data += `${Math.round(statePack.rural * populationRate)},`;
-      data += `${Math.round(statePack.urban * populationRate * urbanization)}\n`;
-    });
-
-    const name = getFileName("States") + ".csv";
-    downloadFile(data, name);
-  }
-
-  function closeStatesEditor() {
-    if (customization === 2) exitStatesManualAssignment("close");
-    if (customization === 3) exitAddStateMode();
-    debug.selectAll(".highlight").remove();
-    body.innerHTML = "";
-  }
-}

From d488b682268eb3062cf6df73c15e60ccfed0d70e Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 15 May 2022 16:08:25 +0300
Subject: [PATCH 2/5] add listeners to sort by headers

---
 modules/dynamic/editors/states-editor.js |  9 +++++++++
 modules/ui/editors.js                    | 14 +++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index b3de8d29..46ad265d 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -147,6 +147,15 @@ function addListeners() {
   document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
   document.getElementById("statesExport").addEventListener("click", downloadStatesData);
 
+  document
+    .getElementById("statesHeader")
+    .querySelectorAll(".sortable")
+    .forEach(function (element) {
+      element.addEventListener("click", function () {
+        sortLines(this);
+      });
+    });
+
   body.addEventListener("click", function (event) {
     const element = event.target;
     const classList = element.classList;
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index deba9f58..8200607e 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -80,23 +80,23 @@ function fitContent() {
 
 // apply sorting behaviour for lines on Editor header click
 document.querySelectorAll(".sortable").forEach(function (e) {
-  e.addEventListener("click", function (e) {
+  e.addEventListener("click", function () {
     sortLines(this);
   });
 });
 
-function sortLines(header) {
-  const type = header.classList.contains("alphabetically") ? "name" : "number";
-  let order = header.className.includes("-down") ? "-up" : "-down";
-  if (!header.className.includes("icon-sort") && type === "name") order = "-up";
+function sortLines(headerElement) {
+  const type = headerElement.classList.contains("alphabetically") ? "name" : "number";
+  let order = headerElement.className.includes("-down") ? "-up" : "-down";
+  if (!headerElement.className.includes("icon-sort") && type === "name") order = "-up";
 
-  const headers = header.parentNode;
+  const headers = headerElement.parentNode;
   headers.querySelectorAll("div.sortable").forEach(e => {
     e.classList.forEach(c => {
       if (c.includes("icon-sort")) e.classList.remove(c);
     });
   });
-  header.classList.add("icon-sort-" + type + order);
+  headerElement.classList.add("icon-sort-" + type + order);
   applySorting(headers);
 }
 

From c405d0ee6f7c5adec4db6f49f3b1b94300445549 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 15 May 2022 17:21:30 +0300
Subject: [PATCH 3/5] add more space to states editor

---
 index.css                                | 13 +----
 modules/dynamic/editors/states-editor.js | 69 +++++++++---------------
 2 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/index.css b/index.css
index 6d121555..848d8420 100644
--- a/index.css
+++ b/index.css
@@ -1396,7 +1396,7 @@ div.totalLine > div {
 }
 
 div.states > input {
-  width: 6em;
+  width: 7em;
   background: none;
   border: 0;
 }
@@ -1405,20 +1405,11 @@ div.states div {
   width: 3.2em;
 }
 
-div.states .statePower,
 div.states .biomeHabitability {
   width: 4em;
   -moz-appearance: textfield;
 }
 
-div.states .stateBurgs {
-  width: 2.4em;
-}
-
-div.states > .stateArea {
-  width: 5em;
-}
-
 div.states > .statePopulation {
   width: 3em;
 }
@@ -1471,7 +1462,7 @@ div.states > .culturePopulation {
 }
 
 div.states > select {
-  width: 4.6em;
+  width: 7em;
   cursor: pointer;
   border: 0;
   background-color: transparent;
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 46ad265d..a02076ea 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -24,19 +24,15 @@ function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable" style="display: none">
     <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: 9.7em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div style="left: 16.3em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-      <div style="left: 23em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">
-        Culture&nbsp;
-      </div>
-      <div style="left: 27.8em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
-      <div style="left: 32.5em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
-      <div style="left: 37em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
-      <div style="left: 43.5em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
-      <div style="left: 47em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">
-        Expansion&nbsp;
-      </div>
-      <div style="left: 53.5em" data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells&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>
 
     <div id="statesBodySection" class="table" data-type="absolute"></div>
@@ -69,7 +65,7 @@ function insertEditorHtml() {
             max="3"
             step=".05"
             value="1"
-            style="width: 90px"
+            style="width: 12em"
           />
           <input
             id="statesNeutralNumber"
@@ -78,7 +74,7 @@ function insertEditorHtml() {
             max="3"
             step=".05"
             value="1"
-            style="width: 42px"
+            style="width: 4em"
           />
         </span>
         <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
@@ -165,7 +161,7 @@ function addListeners() {
     else if (classList.contains("name")) editStateName(state);
     else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
     else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(state);
-    else if (classList.contains("culturePopulation")) changePopulation(state);
+    else if (classList.contains("statePopulation")) changePopulation(state);
     else if (classList.contains("icon-pin")) toggleFog(state, classList);
     else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
   });
@@ -238,18 +234,14 @@ function statesEditorAddLines() {
         <input class="stateForm placeholder" value="none" />
         <span class="icon-star-empty placeholder hide"></span>
         <input class="stateCapital placeholder hide" />
-        <select class="stateCulture placeholder hide">
-          ${getCultureOptions(0)}
-        </select>
-        <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
+        <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
+        <span data-tip="Burgs count" class="icon-dot-circled hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
         <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Neutral lands area" class="biomeArea hide">${si(area) + unit}</div>
+        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <select class="cultureType ${hidden} placeholder show hide">
-          ${getTypeOptions(0)}
-        </select>
+        <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
+        <select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
         <span class="icon-resize-full ${hidden} placeholder show hide"></span>
         <input class="statePower ${hidden} placeholder show hide" type="number" value="0" />
         <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
@@ -281,28 +273,17 @@ function statesEditorAddLines() {
       <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly />
       <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
       <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
-      <select data-tip="Dominant culture. Click to change" class="stateCulture hide">
-        ${getCultureOptions(s.culture)}
-      </select>
+      <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(s.culture)}</select>
       <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
       <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
       <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
-      <div data-tip="State area" class="biomeArea hide">${si(area) + unit}</div>
+      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
       <span data-tip="${populationTip}" class="icon-male hide"></span>
-      <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-      <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">
-        ${getTypeOptions(s.type)}
-      </select>
+      <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
+      <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
       <span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
-      <input
-        data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
-        class="statePower ${hidden} show hide"
-        type="number"
-        min="0"
-        max="99"
-        step=".1"
-        value=${s.expansionism}
-      />
+      <input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
+        class="statePower ${hidden} show hide" type="number" min="0" max="99" step=".1" value=${s.expansionism} />
       <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
       <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
       <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
@@ -720,8 +701,8 @@ function togglePercentageMode() {
     body.querySelectorAll(":scope > div").forEach(function (el) {
       el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
       el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
-      el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-      el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+      el.querySelector(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
+      el.querySelector(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
     });
   } else {
     body.dataset.type = "absolute";

From 3e2de84a62eaf62e414a35cf6410e0360c22f4eb Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 15 May 2022 18:31:23 +0300
Subject: [PATCH 4/5] align editors headers

---
 index.html | 54 +++++++++++++++++++++++++++---------------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index c61a9fb9..1ee3db7a 100644
--- a/index.html
+++ b/index.html
@@ -3191,11 +3191,11 @@
       <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: 9.7em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 15.9em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-          <div style="left: 23.2em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 30em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 35.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&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>
 
         <div id="provincesBodySection" class="table" data-type="absolute"></div>
@@ -3346,15 +3346,15 @@
       <div id="culturesEditor" class="dialog stable" style="display: none">
         <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.8em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
-          <div style="left: 14.3em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expan.&nbsp;</div>
-          <div style="left: 19.7em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 26em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 29.9em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">
+          <div style="left: 9.9em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
+          <div style="left: 14.5em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expan.&nbsp;</div>
+          <div style="left: 20.3em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div style="left: 29.1em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div style="left: 33em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">
             Population&nbsp;
           </div>
-          <div style="left: 36.9em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
-          <div style="left: 44em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">
+          <div style="left: 39.5em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
+          <div style="left: 47em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">
             Emblems&nbsp;
           </div>
         </div>
@@ -3466,9 +3466,9 @@
         <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: 19em" data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
-          <div style="left: 23.6em" data-tip="Zone area" class="hide">Area&nbsp;</div>
-          <div style="left: 30.6em" data-tip="Zone population" class="hide">Population&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>
 
         <div id="zonesBodySection" class="table" data-type="absolute"></div>
@@ -3544,13 +3544,13 @@
       <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.6em" data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">
+          <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: 18em" data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 25.1em" data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
-          <div style="left: 42.1em" data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 47em" data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">
+          <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>
@@ -3874,12 +3874,12 @@
       <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: 7.6em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
-          <div style="left: 14em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 20.1em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>
-          <div style="left: 24.7em" data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population&nbsp;</div>
-          <div style="left: 31.2em" data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div id="burgsInvertLock" style="left: 35.5em; color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></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>
 
         <div id="burgsBody" class="table"></div>
@@ -4054,7 +4054,7 @@
 
       <div id="markersOverview" class="dialog stable" style="display: none">
         <div id="markersHeader" class="header">
-          <div style="left: 1em" data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <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>

From 068cf7957eff31aabb392a9cb26957c8de8d8c32 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 15 May 2022 18:36:11 +0300
Subject: [PATCH 5/5] pump version to 1.82.0

---
 index.html         | 4 ++--
 modules/io/load.js | 5 ++---
 versioning.js      | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 1ee3db7a..b1238018 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
         }
       }
     </style>
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="index.css?v=15052022" />
     <link rel="stylesheet" href="icons.css" />
     <link rel="stylesheet" href="libs/jquery-ui.css" />
   </head>
@@ -6237,7 +6237,7 @@
     <script defer src="libs/jszip.min.js"></script>
 
     <script defer src="modules/io/save.js"></script>
-    <script defer src="modules/io/load.js?v=14052022-5"></script>
+    <script defer src="modules/io/load.js?v=15052022-5"></script>
     <script defer src="modules/io/cloud.js"></script>
     <script defer src="modules/io/export.js"></script>
     <script defer src="modules/io/export-json.js"></script>
diff --git a/modules/io/load.js b/modules/io/load.js
index c650b3b2..30736043 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -124,9 +124,8 @@ function uploadMap(file, callback) {
     const isInvalid = !mapData || isNaN(mapVersion) || mapData.length < 26 || !mapData[5];
     const isUpdated = mapVersion === currentVersion;
     const isAncient = mapVersion < OLDEST_SUPPORTED_VERSION;
-    // TODO: temp condition for 1.811, remove when 1.82 is released
-    const isNewer = mapVersion > currentVersion && mapVersion !== 1.811;
-    const isOutdated = mapVersion < currentVersion || mapVersion === 1.811;
+    const isNewer = mapVersion > currentVersion;
+    const isOutdated = mapVersion < currentVersion;
 
     if (isInvalid) return showUploadMessage("invalid", mapData, mapVersion);
     if (isUpdated) return parseLoadedData(mapData);
diff --git a/versioning.js b/versioning.js
index ed988f51..7b0a06dc 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.81.11"; // generator version, update each time
+const version = "1.82.0"; // generator version, update each time
 
 {
   document.title += " v" + version;