refactor: load religions editor dynamically

index.css

@@ -1619,28 +1619,6 @@ div.states > .riverType {
   color: #abaaaa;
 }
 
-div.states > .religionName {
-  width: 11em;
-}
-
-div.states > .religionType {
-  width: 5em;
-  cursor: pointer;
-  border: 0;
-  background-color: transparent;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-div.states > .religionForm {
-  width: 6em;
-}
-
-div.states > .religionDeity {
-  width: 15em;
-}
-
 .placeholder {
   opacity: 0;
   cursor: default;

index.html

@@ -4739,106 +4739,6 @@
         </div>
       </div>
 
-      <div id="religionsEditor" class="dialog stable" style="display: none">
-        <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 16em 5em 6em">
-          <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">
-            Religion&nbsp;
-          </div>
-          <div
-            data-tip="Click to sort by religion type"
-            class="sortable alphabetically icon-sort-name-down"
-            data-sortby="type"
-          >
-            Type&nbsp;
-          </div>
-          <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">
-            Form&nbsp;
-          </div>
-          <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">
-            Supreme Deity&nbsp;
-          </div>
-          <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div
-            data-tip="Click to sort by number of believers (religion area population)"
-            class="sortable hide"
-            data-sortby="population"
-          >
-            Believers&nbsp;
-          </div>
-        </div>
-        <div id="religionsBody" class="table" data-type="absolute"></div>
-
-        <div id="religionsFooter" class="totalLine">
-          <div data-tip="Total number of organized religions" style="margin-left: 12px">
-            Organized:&nbsp;<span id="religionsOrganized">0</span>
-          </div>
-          <div data-tip="Total number of heresies" style="margin-left: 12px">
-            Heresies:&nbsp;<span id="religionsHeresies">0</span>
-          </div>
-          <div data-tip="Total number of cults" style="margin-left: 12px">
-            Cults:&nbsp;<span id="religionsCults">0</span>
-          </div>
-          <div data-tip="Total number of folk religions" style="margin-left: 12px">
-            Folk:&nbsp;<span id="religionsFolk">0</span>
-          </div>
-          <div data-tip="Total land area" style="margin-left: 12px">
-            Land Area:&nbsp;<span id="religionsFooterArea">0</span>
-          </div>
-          <div data-tip="Total number of believers (population)" style="margin-left: 12px">
-            Believers:&nbsp;<span id="religionsFooterPopulation">0</span>
-          </div>
-        </div>
-
-        <div id="religionsBottom">
-          <button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-          <button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
-          <button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
-          <button
-            id="religionsPercentage"
-            data-tip="Toggle percentage / absolute values display mode"
-            class="icon-percent"
-          ></button>
-          <button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
-          <button
-            id="religionsExtinct"
-            data-tip="Show/hide extinct religions (religions without cells)"
-            class="icon-eye-off"
-          ></button>
-
-          <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
-          <div id="religionsManuallyButtons" style="display: none">
-            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-              >Brush size:
-              <input
-                id="religionsManuallyBrush"
-                oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 7em"
-              />
-              <input
-                id="religionsManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
-            <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
-            <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-          </div>
-          <button
-            id="religionsAdd"
-            data-tip="Add a new religion. Hold Shift to add multiple"
-            class="icon-plus"
-          ></button>
-          <button id="religionsExport" data-tip="Download religions-related data" class="icon-download"></button>
-        </div>
-      </div>
-
       <div id="emblemEditor" class="dialog stable" style="display: none">
         <svg viewBox="0 0 200 200"><use id="emblemImage"></use></svg>
         <div id="emblemBody">
@@ -7928,7 +7828,7 @@
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
-    <script defer src="modules/ui/editors.js?v=01062022"></script>
+    <script defer src="modules/ui/editors.js?v=06062022"></script>
     <script defer src="modules/ui/tools.js?v=01062022"></script>
     <script defer src="modules/ui/world-configurator.js?v=29052022"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=29052020"></script>
@@ -7945,7 +7845,6 @@
     <script defer src="modules/ui/rivers-editor.js"></script>
     <script defer src="modules/ui/rivers-creator.js"></script>
     <script defer src="modules/ui/relief-editor.js"></script>
-    <script defer src="modules/ui/religions-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burg-editor.js"></script>
     <script defer src="modules/ui/units-editor.js"></script>
     <script defer src="modules/ui/notes-editor.js?v=29052022"></script>

modules/dynamic/editors/cultures-editor.js

@@ -115,7 +115,9 @@ function refreshCulturesEditor() {
 
 function culturesCollectStatistics() {
   const {cells, cultures, burgs} = pack;
-  cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
+  cultures.forEach(c => {
+    c.cells = c.area = c.rural = c.urban = 0;
+  });
 
   for (const i of cells.i) {
     if (cells.h[i] < 20) continue;
@@ -143,7 +145,7 @@ function culturesEditorAddLines() {
     const rural = c.rural * populationRate;
     const urban = c.urban * populationRate * urbanization;
     const population = rn(rural + urban);
-    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
+    const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
       urban
     )}. Click to edit`;
     totalArea += area;
@@ -153,13 +155,13 @@ function culturesEditorAddLines() {
       // Uncultured (neutral) line
       lines += /* html */ `<div
           class="states"
-          data-id=${c.i}
+          data-id="${c.i}"
           data-name="${c.name}"
           data-color=""
-          data-cells=${c.cells}
-          data-area=${area}
-          data-population=${population}
-          data-base=${c.base}
+          data-cells="${c.cells}"
+          data-area="${area}"
+          data-population="${population}"
+          data-base="${c.base}"
           data-type=""
           data-expansionism=""
           data-emblems="${c.shield}"
@@ -169,9 +171,8 @@ function culturesEditorAddLines() {
             value="${c.name}" autocorrect="off" spellcheck="false" />
           <span class="icon-cw placeholder"></span>
           <select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
-          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(
-            c.base
-          )}</select>
+          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
+            class="cultureBase">${getBaseOptions(c.base)}</select>
           <span data-tip="Cells count" class="icon-check-empty hide"></span>
           <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
           <span class="icon-resize-full placeholder hide"></span>
@@ -179,9 +180,8 @@ function culturesEditorAddLines() {
           <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
           <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
           <span data-tip="${populationTip}" class="icon-male hide"></span>
-          <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(
-        population
-      )}</div>
+          <div data-tip="${populationTip}" class="culturePopulation hide pointer"
+            style="width: 5em">${si(population)}</div>
           <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
           ${getShapeOptions(selectShape, c.shield)}
         </div>`;
@@ -190,27 +190,25 @@ function culturesEditorAddLines() {
 
     lines += /* html */ `<div
         class="states cultures"
-        data-id=${c.i}
+        data-id="${c.i}"
         data-name="${c.name}"
         data-color="${c.color}"
-        data-cells=${c.cells}
-        data-area=${area}
-        data-population=${population}
-        data-base=${c.base}
-        data-type=${c.type}
-        data-expansionism=${c.expansionism}
+        data-cells="${c.cells}"
+        data-area="${area}"
+        data-population="${population}"
+        data-base="${c.base}"
+        data-type="${c.type}"
+        data-expansionism="${c.expansionism}"
         data-emblems="${c.shield}"
       >
         <fill-box fill="${c.color}"></fill-box>
         <input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
           value="${c.name}" autocorrect="off" spellcheck="false" />
         <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
-        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">${getTypeOptions(
-          c.type
-        )}</select>
-        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(
-          c.base
-        )}</select>
+        <select data-tip="Culture type. Defines growth model. Click to change"
+          class="cultureType">${getTypeOptions(c.type)}</select>
+        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
+          class="cultureBase">${getBaseOptions(c.base)}</select>
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
         <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
         <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
@@ -226,9 +224,8 @@ function culturesEditorAddLines() {
         <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
         <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(
-      population
-    )}</div>
+        <div data-tip="${populationTip}" class="culturePopulation hide pointer"
+          style="width: 5em">${si(population)}</div>
         <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
         ${getShapeOptions(selectShape, c.shield)}
         <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
@@ -257,7 +254,7 @@ function culturesEditorAddLines() {
   $body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.on("change", cultureChangeEmblemsShape));
   $body.querySelectorAll("div > div.culturePopulation").forEach(el => el.on("click", changePopulation));
   $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", cultureRegenerateBurgs));
-  $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", cultureRemove));
+  $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", cultureRemovePrompt));
 
   const $culturesHeader = byId("culturesHeader");
   $culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
@@ -350,16 +347,16 @@ function cultureHighlightOff(event) {
 function cultureChangeColor() {
   const $el = this;
   const currentFill = $el.getAttribute("fill");
-  const culture = +$el.parentNode.dataset.id;
+  const cultureId = +$el.parentNode.dataset.id;
 
   const callback = newFill => {
     $el.fill = newFill;
-    pack.cultures[culture].color = newFill;
+    pack.cultures[cultureId].color = newFill;
     cults
-      .select("#culture" + culture)
+      .select("#culture" + cultureId)
       .attr("fill", newFill)
       .attr("stroke", newFill);
-    debug.select("#cultureCenter" + culture).attr("fill", newFill);
+    debug.select("#cultureCenter" + cultureId).attr("fill", newFill);
   };
 
   openPicker(currentFill, callback);
@@ -451,16 +448,20 @@ function changePopulation() {
   const rural = rn(culture.rural * populationRate);
   const urban = rn(culture.urban * populationRate * urbanization);
   const total = rural + urban;
-  const l = n => Number(n).toLocaleString();
+  const format = n => Number(n).toLocaleString();
   const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
 
-  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" ${
-    burgs.length ? "" : "disabled"
-  } />
-      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(
-    total
-  )}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+  alertMessage.innerHTML = /* html */ `<div>
+    <i>Change population of all cells assigned to the culture</i>
+    <div style="margin: 0.5em 0">
+      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"
+        ${burgs.length ? "" : "disabled"} />
+    </div>
+    <div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
+      (<span id="totalPopPerc">100</span>%)
+    </div>
+  </div>`;
 
   const update = function () {
     const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
@@ -552,23 +553,15 @@ function removeCulture(cultureId) {
   refreshCulturesEditor();
 }
 
-function cultureRemove() {
-  if (customization === 4) return;
-  const cultureId = +this.parentNode.dataset.id;
+function cultureRemovePrompt() {
+  if (customization) return;
 
-  alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
-  $("#alert").dialog({
-    resizable: false,
+  const cultureId = +this.parentNode.dataset.id;
+  confirmationDialog({
     title: "Remove culture",
-    buttons: {
-      Remove: function () {
-        removeCulture(cultureId);
-        $(this).dialog("close");
-      },
-      Cancel: function () {
-        $(this).dialog("close");
-      }
-    }
+    message: "Are you sure you want to remove the culture? <br>This action cannot be reverted",
+    confirm: "Remove",
+    onConfirm: () => removeCulture(cultureId)
   });
 }
 
@@ -608,22 +601,21 @@ function drawCultureCenters() {
 }
 
 function cultureCenterDrag() {
-  const el = d3.select(this);
-  const c = +this.id.slice(13);
+  const $el = d3.select(this);
+  const cultureId = +this.id.slice(13);
   d3.event.on("drag", () => {
-    el.attr("cx", d3.event.x).attr("cy", d3.event.y);
-    const cell = findCell(d3.event.x, d3.event.y);
+    const {x, y} = d3.event;
+    $el.attr("cx", x).attr("cy", y);
+    const cell = findCell(x, y);
     if (pack.cells.h[cell] < 20) return; // ignore dragging on water
-    pack.cultures[c].center = cell;
+    pack.cultures[cultureId].center = cell;
     recalculateCultures();
   });
 }
 
 function toggleLegend() {
-  if (legend.selectAll("*").size()) {
-    clearLegend();
-    return;
-  } // hide legend
+  if (legend.selectAll("*").size()) return clearLegend();
+
   const data = pack.cultures
     .filter(c => c.i && !c.removed && c.cells)
     .sort((a, b) => b.area - a.area)
@@ -634,14 +626,15 @@ function toggleLegend() {
 function togglePercentageMode() {
   if ($body.dataset.type === "absolute") {
     $body.dataset.type = "percentage";
-    const totalCells = +culturesFooterCells.innerHTML;
-    const totalArea = +culturesFooterArea.dataset.area;
-    const totalPopulation = +culturesFooterPopulation.dataset.population;
+    const totalCells = +byId("culturesFooterCells").innerText;
+    const totalArea = +byId("culturesFooterArea").dataset.area;
+    const totalPopulation = +byId("culturesFooterPopulation").dataset.population;
 
     $body.querySelectorAll(":scope > div").forEach(function (el) {
-      el.querySelector(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
-      el.querySelector(".cultureArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-      el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+      const {cells, area, population} = el.dataset;
+      el.querySelector(".cultureCells").innerText = rn((+cells / totalCells) * 100) + "%";
+      el.querySelector(".cultureArea").innerText = rn((+area / totalArea) * 100) + "%";
+      el.querySelector(".culturePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
     });
   } else {
     $body.dataset.type = "absolute";

modules/dynamic/editors/religions-editor.js

@@ -0,0 +1,928 @@
+const $body = insertEditorHtml();
+addListeners();
+
+export function open() {
+  closeDialogs("#religionsEditor, .stable");
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  if (layerIsOn("toggleStates")) toggleStates();
+  if (layerIsOn("toggleBiomes")) toggleBiomes();
+  if (layerIsOn("toggleReligions")) toggleReligions();
+  if (layerIsOn("toggleProvinces")) toggleProvinces();
+
+  refreshReligionsEditor();
+  drawReligionCenters();
+
+  $("#religionsEditor").dialog({
+    title: "Religions Editor",
+    resizable: false,
+    close: closeReligionsEditor,
+    position: {my: "right top", at: "right-10 top+10", of: "svg"}
+  });
+  $body.focus();
+}
+
+function insertEditorHtml() {
+  const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable">
+    <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em">
+      <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
+      <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
+      <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
+      <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+      <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
+    </div>
+    <div id="religionsBody" class="table" data-type="absolute"></div>
+
+    <div id="religionsFooter" class="totalLine">
+      <div data-tip="Total number of organized religions" style="margin-left: 12px">
+        Organized:&nbsp;<span id="religionsOrganized">0</span>
+      </div>
+      <div data-tip="Total number of heresies" style="margin-left: 12px">
+        Heresies:&nbsp;<span id="religionsHeresies">0</span>
+      </div>
+      <div data-tip="Total number of cults" style="margin-left: 12px">
+        Cults:&nbsp;<span id="religionsCults">0</span>
+      </div>
+      <div data-tip="Total number of folk religions" style="margin-left: 12px">
+        Folk:&nbsp;<span id="religionsFolk">0</span>
+      </div>
+      <div data-tip="Total land area" style="margin-left: 12px">
+        Land Area:&nbsp;<span id="religionsFooterArea">0</span>
+      </div>
+      <div data-tip="Total number of believers (population)" style="margin-left: 12px">
+        Believers:&nbsp;<span id="religionsFooterPopulation">0</span>
+      </div>
+    </div>
+
+    <div id="religionsBottom">
+      <button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+      <button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
+      <button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+      <button id="religionsPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
+      <button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
+      <button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-eye-off"></button>
+
+      <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
+      <div id="religionsManuallyButtons" style="display: none">
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
+          <input
+            id="religionsManuallyBrush"
+            oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 7em"
+          />
+          <input
+            id="religionsManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label
+        ><br />
+        <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
+        <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
+      </div>
+      <button id="religionsAdd" data-tip="Add a new religion. Hold Shift to add multiple" class="icon-plus"></button>
+      <button id="religionsExport" data-tip="Download religions-related data" class="icon-download"></button>
+    </div>
+  </div>`;
+
+  byId("dialogs").insertAdjacentHTML("beforeend", editorHtml);
+  return byId("religionsBody");
+}
+
+function addListeners() {
+  applySortingByHeader("religionsHeader");
+
+  byId("religionsEditorRefresh").on("click", refreshReligionsEditor);
+  byId("religionsEditStyle").on("click", () => editStyle("relig"));
+  byId("religionsLegend").on("click", toggleLegend);
+  byId("religionsPercentage").on("click", togglePercentageMode);
+  byId("religionsHeirarchy").on("click", showHierarchy);
+  byId("religionsExtinct").on("click", toggleExtinct);
+  byId("religionsManually").on("click", enterReligionsManualAssignent);
+  byId("religionsManuallyApply").on("click", applyReligionsManualAssignent);
+  byId("religionsManuallyCancel").on("click", () => exitReligionsManualAssignment());
+  byId("religionsAdd").on("click", enterAddReligionMode);
+  byId("religionsExport").on("click", downloadReligionsCsv);
+}
+
+function refreshReligionsEditor() {
+  religionsCollectStatistics();
+  religionsEditorAddLines();
+}
+
+function religionsCollectStatistics() {
+  const {cells, religions, burgs} = pack;
+  religions.forEach(r => {
+    r.cells = r.area = r.rural = r.urban = 0;
+  });
+
+  for (const i of cells.i) {
+    if (cells.h[i] < 20) continue;
+    const religionId = cells.religion[i];
+    religions[religionId].cells += 1;
+    religions[religionId].area += cells.area[i];
+    religions[religionId].rural += cells.pop[i];
+    const burgId = cells.burg[i];
+    if (burgId) religions[religionId].urban += burgs[burgId].population;
+  }
+}
+
+// add line for each religion
+function religionsEditorAddLines() {
+  const unit = " " + getAreaUnit();
+  let lines = "";
+  let totalArea = 0;
+  let totalPopulation = 0;
+
+  for (const r of pack.religions) {
+    if (r.removed) continue;
+    if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
+
+    const area = getArea(r.area);
+    const rural = r.rural * populationRate;
+    const urban = r.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
+      urban
+    )}. Click to change`;
+    totalArea += area;
+    totalPopulation += population;
+
+    if (!r.i) {
+      // No religion (neutral) line
+      lines += /* html */ `<div
+        class="states"
+        data-id="${r.i}"
+        data-name="${r.name}"
+        data-color=""
+        data-area="${area}"
+        data-population="${population}"
+        data-type=""
+        data-form=""
+        data-deity=""
+        data-expansionism=""
+      >
+        <svg width="11" height="11" class="placeholder"></svg>
+        <input data-tip="Religion name. Click and type to change" class="religionName italic" style="width: 11em"
+          value="${r.name}" autocorrect="off" spellcheck="false" />
+        <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
+          ${getTypeOptions(r.type)}
+        </select>
+        <input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
+        <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
+        <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
+      </div>`;
+      continue;
+    }
+
+    lines += /* html */ `<div
+      class="states"
+      data-id=${r.i}
+      data-name="${r.name}"
+      data-color="${r.color}"
+      data-area=${area}
+      data-population=${population}
+      data-type="${r.type}"
+      data-form="${r.form}"
+      data-deity="${r.deity || ""}"
+      data-expansionism="${r.expansionism}"
+    >
+      <fill-box fill="${r.color}"></fill-box>
+      <input data-tip="Religion name. Click and type to change" class="religionName" style="width: 11em"
+        value="${r.name}" autocorrect="off" spellcheck="false" />
+      <select data-tip="Religion type" class="religionType" style="width: 5em">
+        ${getTypeOptions(r.type)}
+      </select>
+      <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
+        value="${r.form}" autocorrect="off" spellcheck="false" />
+      <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
+      <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
+        value="${r.deity || ""}" autocorrect="off" spellcheck="false" />
+      <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
+      <div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div>
+      <span data-tip="${populationTip}" class="icon-male hide"></span>
+      <div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
+      <span data-tip="Remove religion" class="icon-trash-empty hide"></span>
+    </div>`;
+  }
+  $body.innerHTML = lines;
+
+  // update footer
+  const validReligions = pack.religions.filter(r => r.i && !r.removed);
+  byId("religionsOrganized").innerHTML = validReligions.filter(r => r.type === "Organized").length;
+  byId("religionsHeresies").innerHTML = validReligions.filter(r => r.type === "Heresy").length;
+  byId("religionsCults").innerHTML = validReligions.filter(r => r.type === "Cult").length;
+  byId("religionsFolk").innerHTML = validReligions.filter(r => r.type === "Folk").length;
+  byId("religionsFooterArea").innerHTML = si(totalArea) + unit;
+  byId("religionsFooterPopulation").innerHTML = si(totalPopulation);
+  byId("religionsFooterArea").dataset.area = totalArea;
+  byId("religionsFooterPopulation").dataset.population = totalPopulation;
+
+  // add listeners
+  $body.querySelectorAll("div.religions").forEach(el => el.on("mouseenter", religionHighlightOn));
+  $body.querySelectorAll("div.religions").forEach(el => el.on("mouseleave", religionHighlightOff));
+  $body.querySelectorAll("div.states").forEach(el => el.on("click", selectReligionOnLineClick));
+  $body.querySelectorAll("fill-box").forEach(el => el.on("click", religionChangeColor));
+  $body.querySelectorAll("div > input.religionName").forEach(el => el.on("input", religionChangeName));
+  $body.querySelectorAll("div > select.religionType").forEach(el => el.on("change", religionChangeType));
+  $body.querySelectorAll("div > input.religionForm").forEach(el => el.on("input", religionChangeForm));
+  $body.querySelectorAll("div > input.religionDeity").forEach(el => el.on("input", religionChangeDeity));
+  $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
+  $body.querySelectorAll("div > div.religionPopulation").forEach(el => el.on("click", changePopulation));
+  $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt));
+
+  if ($body.dataset.type === "percentage") {
+    $body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  applySorting(religionsHeader);
+  $("#religionsEditor").dialog({width: fitContent()});
+}
+
+function getTypeOptions(type) {
+  let options = "";
+  const types = ["Folk", "Organized", "Cult", "Heresy"];
+  types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
+  return options;
+}
+
+function religionHighlightOn(event) {
+  const religionId = Number(event.id || event.target.dataset.id);
+  const $info = byId("religionInfo");
+  if ($info) {
+    d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
+    const {name, type, form, rural, urban} = pack.religions[religionId];
+
+    const getTypeText = () => {
+      if (name.includes(type)) return "";
+      if (form.includes(type)) return "";
+      if (type === "Folk" || type === "Organized") return `. ${type} religion`;
+      return `. ${type}`;
+    };
+    const formText = form === type ? "" : ". " + form;
+    const population = rural * populationRate + urban * populationRate * urbanization;
+    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+
+    $info.innerHTML = `${name}${getTypeText()}${formText}. ${populationText}`;
+    tip("Drag to other node to add parent, click to edit");
+  }
+
+  const $el = $body.querySelector(`div[data-id='${religionId}']`);
+  if ($el) $el.classList.add("active");
+
+  if (!layerIsOn("toggleReligions")) return;
+  if (customization) return;
+
+  const animate = d3.transition().duration(1500).ease(d3.easeSinIn);
+  relig
+    .select("#religion" + religionId)
+    .raise()
+    .transition(animate)
+    .attr("stroke-width", 2.5)
+    .attr("stroke", "#c13119");
+  debug
+    .select("#religionsCenter" + religionId)
+    .raise()
+    .transition(animate)
+    .attr("r", 8)
+    .attr("stroke-width", 2)
+    .attr("stroke", "#c13119");
+}
+
+function religionHighlightOff(event) {
+  const religionId = Number(event.id || event.target.dataset.id);
+  const $info = byId("religionInfo");
+  if ($info) {
+    d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 0);
+    $info.innerHTML = "&#8205;";
+    tip("");
+  }
+
+  const $el = $body.querySelector(`div[data-id='${religionId}']`);
+  if ($el) $el.classList.remove("active");
+
+  relig
+    .select("#religion" + religionId)
+    .transition()
+    .attr("stroke-width", null)
+    .attr("stroke", null);
+  debug
+    .select("#religionsCenter" + religionId)
+    .transition()
+    .attr("r", 4)
+    .attr("stroke-width", 1.2)
+    .attr("stroke", null);
+}
+
+function religionChangeColor() {
+  const $el = this;
+  const currentFill = $el.getAttribute("fill");
+  const religionId = +$el.parentNode.dataset.id;
+
+  const callback = newFill => {
+    $el.fill = newFill;
+    pack.religions[religionId].color = newFill;
+    relig.select("#religion" + religionId).attr("fill", newFill);
+    debug.select("#religionsCenter" + religionId).attr("fill", newFill);
+  };
+
+  openPicker(currentFill, callback);
+}
+
+function religionChangeName() {
+  const religionId = +this.parentNode.dataset.id;
+  this.parentNode.dataset.name = this.value;
+  pack.religions[religionId].name = this.value;
+  pack.religions[religionId].code = abbreviate(
+    this.value,
+    pack.religions.map(c => c.code)
+  );
+}
+
+function religionChangeType() {
+  const religionId = +this.parentNode.dataset.id;
+  this.parentNode.dataset.type = this.value;
+  pack.religions[religionId].type = this.value;
+}
+
+function religionChangeForm() {
+  const religionId = +this.parentNode.dataset.id;
+  this.parentNode.dataset.form = this.value;
+  pack.religions[religionId].form = this.value;
+}
+
+function religionChangeDeity() {
+  const religionId = +this.parentNode.dataset.id;
+  this.parentNode.dataset.deity = this.value;
+  pack.religions[religionId].deity = this.value;
+}
+
+function regenerateDeity() {
+  const religionId = +this.parentNode.dataset.id;
+  const cultureId = pack.religions[religionId].culture;
+  const deity = Religions.getDeityName(cultureId);
+  this.parentNode.dataset.deity = deity;
+  pack.religions[religionId].deity = deity;
+  this.nextElementSibling.value = deity;
+}
+
+function changePopulation() {
+  const religionId = +this.parentNode.dataset.id;
+  const religion = pack.religions[religionId];
+  if (!religion.cells) return tip("Religion does not have any cells, cannot change population", false, "error");
+
+  const rural = rn(religion.rural * populationRate);
+  const urban = rn(religion.urban * populationRate * urbanization);
+  const total = rural + urban;
+  const format = n => Number(n).toLocaleString();
+  const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religionId);
+
+  alertMessage.innerHTML = /* html */ `<div>
+    <i>All population of religion territory is considered believers of this religion. It means believers number change will directly affect population</i>
+    <div style="margin: 0.5em 0">
+      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"
+        ${burgs.length ? "" : "disabled"} />
+    </div>
+    <div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
+      (<span id="totalPopPerc">100</span>%)
+    </div>
+  </div>`;
+
+  const update = function () {
+    const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+    if (isNaN(totalNew)) return;
+    totalPop.innerHTML = format(totalNew);
+    totalPopPerc.innerHTML = rn((totalNew / total) * 100);
+  };
+
+  ruralPop.oninput = () => update();
+  urbanPop.oninput = () => update();
+
+  $("#alert").dialog({
+    resizable: false,
+    title: "Change believers number",
+    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.religion[i] === religionId);
+      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.religion[i] === religionId);
+      const pop = rn(points / cells.length);
+      cells.forEach(i => (pack.cells.pop[i] = pop));
+    }
+
+    const urbanChange = urbanPop.value / urban;
+    if (isFinite(urbanChange) && urbanChange !== 1) {
+      burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
+    }
+    if (!isFinite(urbanChange) && +urbanPop.value > 0) {
+      const points = urbanPop.value / populationRate / urbanization;
+      const population = rn(points / burgs.length, 4);
+      burgs.forEach(b => (b.population = population));
+    }
+
+    refreshReligionsEditor();
+  }
+}
+
+function religionRemovePrompt() {
+  if (customization) return;
+
+  const religionId = +this.parentNode.dataset.id;
+  confirmationDialog({
+    title: "Remove religion",
+    message: "Are you sure you want to remove the religion? <br>This action cannot be reverted",
+    confirm: "Remove",
+    onConfirm: () => removeReligion(religionId)
+  });
+}
+
+function removeReligion(religionId) {
+  relig.select("#religion" + religionId).remove();
+  relig.select("#religion-gap" + religionId).remove();
+  debug.select("#religionsCenter" + religionId).remove();
+
+  pack.cells.religion.forEach((r, i) => {
+    if (r === religionId) pack.cells.religion[i] = 0;
+  });
+  pack.religions[religionId].removed = true;
+
+  pack.religions
+    .filter(r => r.i && !r.removed)
+    .forEach(r => {
+      r.origins = r.origins.filter(origin => origin !== religionId);
+      if (!r.origins.length) r.origins = [0];
+    });
+
+  refreshReligionsEditor();
+}
+
+function drawReligionCenters() {
+  debug.select("#religionCenters").remove();
+  const religionCenters = debug
+    .append("g")
+    .attr("id", "religionCenters")
+    .attr("stroke-width", 1.2)
+    .attr("stroke", "#444444")
+    .style("cursor", "move");
+
+  const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
+  religionCenters
+    .selectAll("circle")
+    .data(data)
+    .enter()
+    .append("circle")
+    .attr("id", d => "religionsCenter" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("r", 4)
+    .attr("fill", d => d.color)
+    .attr("cx", d => pack.cells.p[d.center][0])
+    .attr("cy", d => pack.cells.p[d.center][1])
+    .on("mouseenter", d => {
+      tip(d.name + ". Drag to move the religion center", true);
+      religionHighlightOn(event);
+    })
+    .on("mouseleave", d => {
+      tip("", true);
+      religionHighlightOff(event);
+    })
+    .call(d3.drag().on("start", religionCenterDrag));
+}
+
+function religionCenterDrag() {
+  const $el = d3.select(this);
+  const religionId = +this.dataset.id;
+  d3.event.on("drag", () => {
+    const {x, y} = d3.event;
+    $el.attr("cx", x).attr("cy", y);
+    const cell = findCell(x, y);
+    if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+    pack.religions[religionId].center = cell;
+  });
+}
+
+function toggleLegend() {
+  if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
+  const data = pack.religions
+    .filter(r => r.i && !r.removed && r.area)
+    .sort((a, b) => b.area - a.area)
+    .map(r => [r.i, r.color, r.name]);
+  drawLegend("Religions", data);
+}
+
+function togglePercentageMode() {
+  if ($body.dataset.type === "absolute") {
+    $body.dataset.type = "percentage";
+    const totalArea = +byId("religionsFooterArea").dataset.area;
+    const totalPopulation = +byId("religionsFooterPopulation").dataset.population;
+
+    $body.querySelectorAll(":scope > div").forEach($el => {
+      const {area, population} = $el.dataset;
+      $el.querySelector(".religionArea").innerText = rn((+area / totalArea) * 100) + "%";
+      $el.querySelector(".religionPopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
+    });
+  } else {
+    $body.dataset.type = "absolute";
+    religionsEditorAddLines();
+  }
+}
+
+function showHierarchy() {
+  // build hierarchy tree
+  pack.religions[0].origins = [null];
+  const validReligions = pack.religions.filter(r => !r.removed);
+  if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
+
+  const root = d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => d.origins[0])(validReligions);
+  const treeWidth = root.leaves().length;
+  const treeHeight = root.height;
+  const width = Math.max(treeWidth * 40, 300);
+  const height = treeHeight * 60;
+
+  const margin = {top: 10, right: 10, bottom: -5, left: 10};
+  const w = width - margin.left - margin.right;
+  const h = height + 30 - margin.top - margin.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  alertMessage.innerHTML = /* html */ `<div id="religionChartDetails" class='chartInfo'>
+    <div id='religionInfo' style="display: block">&#8205;</div>
+    <div id='religionSelected' style="display: none">
+      <span><span id='religionSelectedName'></span>. </span>
+      <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
+      <button data-tip='Clear origin, religion will be linked to top level' id='religionSelectedClear'>Clear</button>
+      <button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
+    </div>
+  </div>`;
+
+  // prepare svg
+  const svg = d3
+    .select("#alertMessage")
+    .insert("svg", "#religionChartDetails")
+    .attr("id", "hierarchy")
+    .attr("width", width)
+    .attr("height", height)
+    .style("text-anchor", "middle");
+  const graph = svg.append("g").attr("transform", `translate(10, -45)`);
+  const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
+  const primaryLinks = links.append("g");
+  const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
+  const nodes = graph.append("g");
+
+  // render helper functions
+  const getLinkPath = d => {
+    const {
+      source: {x: sx, y: sy},
+      target: {x: tx, y: ty}
+    } = d;
+    return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
+  };
+
+  const getSecondaryLinks = root => {
+    const nodes = root.descendants();
+    const links = [];
+
+    for (const node of nodes) {
+      const origins = node.data.origins;
+      if (node.depth < 2) continue;
+
+      for (let i = 1; i < origins.length; i++) {
+        const source = nodes.find(n => n.data.i === origins[i]);
+        if (source) links.push({source, target: node});
+      }
+    }
+
+    return links;
+  };
+
+  const nodePathMap = {
+    undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
+    Folk: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
+    Organized: "M-11,-11h22v22h-22Z", // square
+    Cult: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
+    Heresy: "M0,-14L14,0L0,14L-14,0Z" // diamond
+  };
+
+  const getNodePath = d => nodePathMap[d.data.type];
+
+  renderTree();
+  function renderTree() {
+    treeLayout(root);
+
+    primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
+    secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
+
+    const node = nodes
+      .selectAll("g")
+      .data(root.descendants())
+      .enter()
+      .append("g")
+      .attr("data-id", d => d.data.i)
+      .attr("stroke", "#333333")
+      .attr("transform", d => `translate(${d.x}, ${d.y})`)
+      .on("mouseenter", religionHighlightOn)
+      .on("mouseleave", religionHighlightOff)
+      .on("click", religionSelect)
+      .call(d3.drag().on("start", dragToReorigin));
+
+    node
+      .append("path")
+      .attr("d", getNodePath)
+      .attr("fill", d => d.data.color || "#ffffff")
+      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
+
+    node
+      .append("text")
+      .attr("dy", ".35em")
+      .text(d => d.data.code || "");
+  }
+
+  $("#alert").dialog({
+    title: "Religions tree",
+    width: fitContent(),
+    resizable: false,
+    position: {my: "left center", at: "left+10 center", of: "svg"},
+    buttons: {},
+    close: () => {
+      alertMessage.innerHTML = "";
+    }
+  });
+
+  function religionSelect(d) {
+    d3.event.stopPropagation();
+
+    nodes.selectAll("g").style("outline", "none");
+    this.style.outline = "1px solid #c13119";
+    byId("religionSelected").style.display = "block";
+    byId("religionInfo").style.display = "none";
+
+    const religion = d.data;
+    byId("religionSelectedName").innerText = religion.name;
+    byId("religionSelectedCode").value = religion.code;
+
+    byId("religionSelectedCode").onchange = function () {
+      if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
+      if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
+      nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
+      religion.code = this.value;
+    };
+
+    byId("religionSelectedClear").onclick = () => {
+      religion.origins = [0];
+      showHierarchy();
+    };
+
+    byId("religionSelectedClose").onclick = () => {
+      this.style.outline = "none";
+      byId("religionSelected").style.display = "none";
+      byId("religionInfo").style.display = "block";
+    };
+  }
+
+  function dragToReorigin(d) {
+    const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
+
+    d3.event.on("drag", () => {
+      originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
+    });
+
+    d3.event.on("end", () => {
+      originLine.remove();
+      const selected = graph.select("g.selected");
+      if (!selected.size()) return;
+
+      const religionId = d.data.i;
+      const newOrigin = selected.datum().data.i;
+      if (religionId === newOrigin) return; // dragged to itself
+      if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
+      if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
+
+      const religion = pack.religions[religionId];
+      if (religion.origins[0] === 0) religion.origins = [];
+      religion.origins.push(newOrigin);
+
+      showHierarchy();
+    });
+  }
+}
+
+function toggleExtinct() {
+  $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
+  religionsEditorAddLines();
+}
+
+function enterReligionsManualAssignent() {
+  if (!layerIsOn("toggleReligions")) toggleReligions();
+  customization = 7;
+  relig.append("g").attr("id", "temp");
+  document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
+  byId("religionsManuallyButtons").style.display = "inline-block";
+  debug.select("#religionCenters").style("display", "none");
+
+  religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
+  religionsFooter.style.display = "none";
+  $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+  $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  tip("Click on religion to select, drag the circle to change religion", true);
+  viewbox
+    .style("cursor", "crosshair")
+    .on("click", selectReligionOnMapClick)
+    .call(d3.drag().on("start", dragReligionBrush))
+    .on("touchmove mousemove", moveReligionBrush);
+
+  $body.querySelector("div").classList.add("selected");
+}
+
+function selectReligionOnLineClick(i) {
+  if (customization !== 7) return;
+  $body.querySelector("div.selected").classList.remove("selected");
+  this.classList.add("selected");
+}
+
+function selectReligionOnMapClick() {
+  const point = d3.mouse(this);
+  const i = findCell(point[0], point[1]);
+  if (pack.cells.h[i] < 20) return;
+
+  const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
+  const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
+
+  $body.querySelector("div.selected").classList.remove("selected");
+  $body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
+}
+
+function dragReligionBrush() {
+  const r = +religionsManuallyBrushNumber.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) changeReligionForSelection(selection);
+  });
+}
+
+// change religion within selection
+function changeReligionForSelection(selection) {
+  const temp = relig.select("#temp");
+  const selected = $body.querySelector("div.selected");
+  const r = +selected.dataset.id; // religionNew
+  const color = pack.religions[r].color || "#ffffff";
+
+  selection.forEach(function (i) {
+    const exists = temp.select("polygon[data-cell='" + i + "']");
+    const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i];
+    if (r === religionOld) return;
+
+    // change of append new element
+    if (exists.size()) exists.attr("data-religion", r).attr("fill", color);
+    else
+      temp
+        .append("polygon")
+        .attr("data-cell", i)
+        .attr("data-religion", r)
+        .attr("points", getPackPolygon(i))
+        .attr("fill", color);
+  });
+}
+
+function moveReligionBrush() {
+  showMainTip();
+  const point = d3.mouse(this);
+  const radius = +religionsManuallyBrushNumber.value;
+  moveCircle(point[0], point[1], radius);
+}
+
+function applyReligionsManualAssignent() {
+  const changed = relig.select("#temp").selectAll("polygon");
+  changed.each(function () {
+    const i = +this.dataset.cell;
+    const r = +this.dataset.religion;
+    pack.cells.religion[i] = r;
+  });
+
+  if (changed.size()) {
+    drawReligions();
+    refreshReligionsEditor();
+    drawReligionCenters();
+  }
+  exitReligionsManualAssignment();
+}
+
+function exitReligionsManualAssignment(close) {
+  customization = 0;
+  relig.select("#temp").remove();
+  removeCircle();
+  document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
+  byId("religionsManuallyButtons").style.display = "none";
+
+  religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
+  religionsFooter.style.display = "block";
+  $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  debug.select("#religionCenters").style("display", null);
+  restoreDefaultEvents();
+  clearMainTip();
+  const selected = $body.querySelector("div.selected");
+  if (selected) selected.classList.remove("selected");
+}
+
+function enterAddReligionMode() {
+  if (this.classList.contains("pressed")) {
+    exitAddReligionMode();
+    return;
+  }
+  customization = 8;
+  this.classList.add("pressed");
+  tip("Click on the map to add a new religion", true);
+  viewbox.style("cursor", "crosshair").on("click", addReligion);
+  $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+}
+
+function exitAddReligionMode() {
+  customization = 0;
+  restoreDefaultEvents();
+  clearMainTip();
+  $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed");
+}
+
+function addReligion() {
+  const point = d3.mouse(this);
+  const center = findCell(point[0], point[1]);
+  if (pack.cells.h[center] < 20) {
+    tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
+    return;
+  }
+  const occupied = pack.religions.some(r => !r.removed && r.center === center);
+  if (occupied) {
+    tip("This cell is already a religion center. Please select a different cell", false, "error");
+    return;
+  }
+
+  if (d3.event.shiftKey === false) exitAddReligionMode();
+  Religions.add(center);
+
+  drawReligions();
+  refreshReligionsEditor();
+  drawReligionCenters();
+}
+
+function downloadReligionsCsv() {
+  const unit = getAreaUnit("2");
+  const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins`;
+  const lines = Array.from($body.querySelectorAll(":scope > div"));
+  const data = lines.map($line => {
+    const {id, name, color, type, form, deity, area, population} = $line.dataset;
+    const deityText = '"' + deity + '"';
+    const {origins} = pack.religions[+id];
+    const originList = (origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
+    const originText = '"' + originList.join(", ") + '"';
+    return [id, name, color, type, form, deityText, area, population, originText].join(",");
+  });
+  const csvData = [headers].concat(data).join("\n");
+
+  const name = getFileName("Religions") + ".csv";
+  downloadFile(csvData, name);
+}
+
+function closeReligionsEditor() {
+  debug.select("#religionCenters").remove();
+  exitReligionsManualAssignment("close");
+  exitAddReligionMode();
+}

modules/dynamic/editors/states-editor.js

@@ -145,14 +145,14 @@ function addListeners() {
   $body.on("click", event => {
     const $element = event.target;
     const classList = $element.classList;
-    const state = +$element.parentNode?.dataset?.id;
+    const stateId = +$element.parentNode?.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("statePopulation")) changePopulation(state);
-    else if (classList.contains("icon-pin")) toggleFog(state, classList);
-    else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
+    else if (classList.contains("name")) editStateName(stateId);
+    else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + stateId, pack.states[stateId]);
+    else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(stateId);
+    else if (classList.contains("statePopulation")) changePopulation(stateId);
+    else if (classList.contains("icon-pin")) toggleFog(stateId, classList);
+    else if (classList.contains("icon-trash-empty")) stateRemovePrompt(stateId);
   });
 
   $body.on("input", function (ev) {
@@ -194,7 +194,9 @@ function statesEditorAddLines() {
     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`;
+    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
+      urban
+    )}. Click to change`;
     totalArea += area;
     totalPopulation += population;
     totalBurgs += s.burgs;
@@ -218,7 +220,9 @@ function statesEditorAddLines() {
         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 />
+        <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>
@@ -258,18 +262,26 @@ function statesEditorAddLines() {
     >
       <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 />
+      <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>
+      <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="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
       <span data-tip="${populationTip}" class="icon-male hide"></span>
       <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>
+      <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} />
@@ -488,25 +500,30 @@ function stateChangeCapitalName(state, line, 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();
+function changePopulation(stateId) {
+  const state = pack.states[stateId];
+  if (!state.cells) return tip("State does not have any cells, cannot change population", false, "error");
 
-  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 rural = rn(state.rural * populationRate);
+  const urban = rn(state.urban * populationRate * urbanization);
+  const total = rural + urban;
+  const format = n => Number(n).toLocaleString();
+
+  alertMessage.innerHTML = /* html */ `<div>
+    <i>Change population of all cells assigned to the state</i>
+    <div style="margin: 0.5em 0">
+      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" />
+    </div>
+    <div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
+      (<span id="totalPopPerc">100</span>%)
+    </div>
+  </div>`;
 
   const update = function () {
     const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
     if (isNaN(totalNew)) return;
-    totalPop.innerHTML = l(totalNew);
+    totalPop.innerHTML = format(totalNew);
     totalPopPerc.innerHTML = rn((totalNew / total) * 100);
   };
 
@@ -532,24 +549,24 @@ function changePopulation(state) {
   function applyPopulationChange() {
     const ruralChange = ruralPop.value / rural;
     if (isFinite(ruralChange) && ruralChange !== 1) {
-      const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+      const cells = pack.cells.i.filter(i => pack.cells.state[i] === stateId);
       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 cells = pack.cells.i.filter(i => pack.cells.state[i] === stateId);
       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);
+      const burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
       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 burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
       const population = rn(points / burgs.length, 4);
       burgs.forEach(b => (b.population = population));
     }
@@ -591,19 +608,11 @@ function toggleFog(state, cl) {
 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,
+  confirmationDialog({
     title: "Remove state",
-    buttons: {
-      Remove: function () {
-        $(this).dialog("close");
-        stateRemove(state);
-      },
-      Cancel: function () {
-        $(this).dialog("close");
-      }
-    }
+    message: "Are you sure you want to remove the state? <br>This action cannot be reverted",
+    confirm: "Remove",
+    onConfirm: () => stateRemove(state)
   });
 }
 
@@ -667,10 +676,8 @@ function stateRemove(state) {
 }
 
 function toggleLegend() {
-  if (legend.selectAll("*").size()) {
-    clearLegend();
-    return;
-  } // hide legend
+  if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
   const data = pack.states
     .filter(s => s.i && !s.removed && s.cells)
     .sort((a, b) => b.area - a.area)
@@ -681,16 +688,17 @@ function toggleLegend() {
 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;
+    const totalCells = +byId("statesFooterCells").innerText;
+    const totalBurgs = +byId("statesFooterBurgs").innerText;
+    const totalArea = +byId("statesFooterArea").dataset.area;
+    const totalPopulation = +byId("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(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-      el.querySelector(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+      const {cells, burgs, area, population} = el.dataset;
+      el.querySelector(".stateCells").innerText = rn((+cells / totalCells) * 100) + "%";
+      el.querySelector(".stateBurgs").innerText = rn((+burgs / totalBurgs) * 100) + "%";
+      el.querySelector(".stateArea").innerText = rn((+area / totalArea) * 100) + "%";
+      el.querySelector(".statePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
     });
   } else {
     $body.dataset.type = "absolute";
@@ -913,7 +921,11 @@ function enterStatesManualAssignent() {
   $("#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);
+  viewbox
+    .style("cursor", "crosshair")
+    .on("click", selectStateOnMapClick)
+    .call(d3.drag().on("start", dragStateBrush))
+    .on("touchmove mousemove", moveStateBrush);
 
   $body.querySelector("div").classList.add("selected");
 }
@@ -967,7 +979,14 @@ function changeStateForSelection(selection) {
 
     // 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);
+    else
+      temp
+        .append("polygon")
+        .attr("data-cell", i)
+        .attr("data-state", stateNew)
+        .attr("points", getPackPolygon(i))
+        .attr("fill", color)
+        .attr("stroke", color);
   });
 }
 
@@ -1118,7 +1137,17 @@ function adjustProvinces(affectedProvinces) {
     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});
+    provinces.push({
+      i: newProvinceId,
+      state: stateId,
+      center,
+      burg: burgId,
+      name,
+      formName,
+      fullName: `${name} ${formName}`,
+      color,
+      coa
+    });
 
     provinceCells.forEach(i => {
       cells.province[i] = newProvinceId;
@@ -1134,7 +1163,9 @@ function adjustProvinces(affectedProvinces) {
       })
     );
 
-    const closesProvince = borderCell && cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
+    const closesProvince =
+      borderCell &&
+      cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
     return closesProvince;
   }
 }
@@ -1152,7 +1183,8 @@ function exitStatesManualAssignment(close) {
     .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"}});
+  if (!close)
+    $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
 
   restoreDefaultEvents();
   clearMainTip();
@@ -1176,10 +1208,12 @@ 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");
+  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 && 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
 
@@ -1226,7 +1260,10 @@ function addState() {
     return relations;
   });
   diplomacy.push("x");
-  states[0].diplomacy.push([`Independance declaration`, `${name} declared its independance from ${states[oldState].name}`]);
+  states[0].diplomacy.push([
+    `Independance declaration`,
+    `${name} declared its independance from ${states[oldState].name}`
+  ]);
 
   cells.state[center] = newState;
   cells.province[center] = 0;
@@ -1296,7 +1333,23 @@ function downloadStatesCsv() {
     const {fullName = "", rural, urban} = pack.states[+id];
     const ruralPopulation = Math.round(rural * populationRate);
     const urbanPopulation = Math.round(urban * populationRate * urbanization);
-    return [id, name, fullName, form, color, capital, culture, type, expansionism, cells, burgs, area, population, ruralPopulation, urbanPopulation].join(",");
+    return [
+      id,
+      name,
+      fullName,
+      form,
+      color,
+      capital,
+      culture,
+      type,
+      expansionism,
+      cells,
+      burgs,
+      area,
+      population,
+      ruralPopulation,
+      urbanPopulation
+    ].join(",");
   });
   const csvData = [headers].concat(data).join("\n");
 

modules/ui/editors.js

@@ -330,7 +330,23 @@ function getMFCGlink(burg) {
     return rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east
   }
 
-  const parameters = {name, population, size, seed, river, coast, farms, citadel, urban_castle, hub, plaza, temple, walls, shantytown, gates: -1};
+  const parameters = {
+    name,
+    population,
+    size,
+    seed,
+    river,
+    coast,
+    farms,
+    citadel,
+    urban_castle,
+    hub,
+    plaza,
+    temple,
+    walls,
+    shantytown,
+    gates: -1
+  };
   const url = new URL("https://watabou.github.io/city-generator/");
   url.search = new URLSearchParams(parameters);
   if (sea) url.searchParams.append("sea", sea);
@@ -456,7 +472,12 @@ function createPicker() {
   const cl = () => tip("Click to close the picker");
   const closePicker = () => container.style("display", "none");
 
-  const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
+  const container = d3
+    .select("body")
+    .append("svg")
+    .attr("id", "pickerContainer")
+    .attr("width", "100%")
+    .attr("height", "100%");
   container
     .append("rect")
     .attr("x", 0)
@@ -589,8 +610,21 @@ function createPicker() {
     .attr("height", 14)
     .on("mousemove", cl)
     .on("click", closePicker);
-  picker.insert("text", ":first-child").attr("x", 12).attr("y", -10).attr("id", "pickerLabel").text("Color Picker").on("mousemove", pos);
-  picker.insert("rect", ":first-child").attr("x", 0).attr("y", -30).attr("width", width).attr("height", 30).attr("id", "pickerHeader").on("mousemove", pos);
+  picker
+    .insert("text", ":first-child")
+    .attr("x", 12)
+    .attr("y", -10)
+    .attr("id", "pickerLabel")
+    .text("Color Picker")
+    .on("mousemove", pos);
+  picker
+    .insert("rect", ":first-child")
+    .attr("x", 0)
+    .attr("y", -30)
+    .attr("width", width)
+    .attr("height", 30)
+    .attr("id", "pickerHeader")
+    .on("mousemove", pos);
   picker.attr("transform", `translate(${(svgWidth - width) / 2},${(svgHeight - height) / 2})`);
 }
 
@@ -729,7 +763,12 @@ function changePickerSpace() {
 
   const space = this.dataset.space;
   const i = Array.from(this.parentNode.querySelectorAll("input")).map(input => input.value); // inputs
-  const fill = space === "hex" ? d3.rgb(this.value) : space === "rgb" ? d3.rgb(i[0], i[1], i[2]) : d3.hsl(i[0], i[1] / 100, i[2] / 100);
+  const fill =
+    space === "hex"
+      ? d3.rgb(this.value)
+      : space === "rgb"
+      ? d3.rgb(i[0], i[1], i[2])
+      : d3.hsl(i[0], i[1] / 100, i[2] / 100);
 
   const hsl = d3.hsl(fill);
   if (isNaN(hsl.l)) {
@@ -750,7 +789,14 @@ function fog(id, path) {
   if (defs.select("#fog #" + id).size()) return;
   const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut);
   if (defs.select("#fog path").size()) {
-    defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 0).transition(fadeIn).attr("opacity", 1);
+    defs
+      .select("#fog")
+      .append("path")
+      .attr("d", path)
+      .attr("id", id)
+      .attr("opacity", 0)
+      .transition(fadeIn)
+      .attr("opacity", 1);
   } else {
     defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 1);
     const opacity = fogging.attr("opacity");
@@ -813,9 +859,20 @@ function highlightElement(element, zoom) {
   const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
   const exit = d3.transition().duration(500).ease(d3.easeLinear);
 
-  const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height);
+  const highlight = debug
+    .append("rect")
+    .attr("x", box.x)
+    .attr("y", box.y)
+    .attr("width", box.width)
+    .attr("height", box.height);
   highlight.classed("highlighted", 1).attr("transform", transform);
-  highlight.transition(enter).style("outline-offset", "0px").transition(exit).style("outline-color", "transparent").delay(1000).remove();
+  highlight
+    .transition(enter)
+    .style("outline-offset", "0px")
+    .transition(exit)
+    .style("outline-color", "transparent")
+    .delay(1000)
+    .remove();
 
   if (zoom) {
     const tr = parseTransform(transform);
@@ -1119,12 +1176,18 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const StateEditor = await import("../dynamic/editors/states-editor.js?v=29052022");
-  StateEditor.open();
+  const Editor = await import("../dynamic/editors/states-editor.js?v=29052022");
+  Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=29052022");
-  CulturesEditor.open();
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=05062022");
+  Editor.open();
+}
+
+async function editReligions() {
+  if (customization) return;
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=05062022");
+  Editor.open();
 }

modules/ui/religions-editor.js

@@ -1,862 +0,0 @@
-"use strict";
-function editReligions() {
-  if (customization) return;
-  closeDialogs("#religionsEditor, .stable");
-  if (!layerIsOn("toggleReligions")) toggleReligions();
-  if (layerIsOn("toggleCultures")) toggleCultures();
-  if (layerIsOn("toggleStates")) toggleStates();
-  if (layerIsOn("toggleBiomes")) toggleBiomes();
-  if (layerIsOn("toggleProvinces")) toggleProvinces();
-
-  const $body = byId("religionsBody");
-  const animate = d3.transition().duration(1500).ease(d3.easeSinIn);
-  refreshReligionsEditor();
-  drawReligionCenters();
-
-  if (modules.editReligions) return;
-  modules.editReligions = true;
-
-  $("#religionsEditor").dialog({
-    title: "Religions Editor",
-    resizable: false,
-    width: fitContent(),
-    close: closeReligionsEditor,
-    position: {my: "right top", at: "right-10 top+10", of: "svg"}
-  });
-
-  // add listeners
-  byId("religionsEditorRefresh").on("click", refreshReligionsEditor);
-  byId("religionsEditStyle").on("click", () => editStyle("relig"));
-  byId("religionsLegend").on("click", toggleLegend);
-  byId("religionsPercentage").on("click", togglePercentageMode);
-  byId("religionsHeirarchy").on("click", showHierarchy);
-  byId("religionsExtinct").on("click", toggleExtinct);
-  byId("religionsManually").on("click", enterReligionsManualAssignent);
-  byId("religionsManuallyApply").on("click", applyReligionsManualAssignent);
-  byId("religionsManuallyCancel").on("click", () => exitReligionsManualAssignment());
-  byId("religionsAdd").on("click", enterAddReligionMode);
-  byId("religionsExport").on("click", downloadReligionsCsv);
-
-  function refreshReligionsEditor() {
-    religionsCollectStatistics();
-    religionsEditorAddLines();
-  }
-
-  function religionsCollectStatistics() {
-    const cells = pack.cells,
-      religions = pack.religions;
-    religions.forEach(r => (r.cells = r.area = r.rural = r.urban = 0));
-
-    for (const i of cells.i) {
-      if (cells.h[i] < 20) continue;
-      const r = cells.religion[i];
-      religions[r].cells += 1;
-      religions[r].area += cells.area[i];
-      religions[r].rural += cells.pop[i];
-      if (cells.burg[i]) religions[r].urban += pack.burgs[cells.burg[i]].population;
-    }
-  }
-
-  // add line for each religion
-  function religionsEditorAddLines() {
-    const unit = " " + getAreaUnit();
-    let lines = "",
-      totalArea = 0,
-      totalPopulation = 0;
-
-    for (const r of pack.religions) {
-      if (r.removed) continue;
-
-      const area = getArea(r.area);
-      const rural = r.rural * populationRate;
-      const urban = r.urban * populationRate * urbanization;
-      const population = rn(rural + urban);
-      if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
-      const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
-        urban
-      )}. Click to change`;
-      totalArea += area;
-      totalPopulation += population;
-
-      if (r.i) {
-        lines += /* html */ `<div
-          class="states religions"
-          data-id=${r.i}
-          data-name="${r.name}"
-          data-color="${r.color}"
-          data-area=${area}
-          data-population=${population}
-          data-type=${r.type}
-          data-form=${r.form}
-          data-deity="${r.deity ? r.deity : ""}"
-          data-expansionism=${r.expansionism}
-        >
-          <fill-box fill="${r.color}"></fill-box>
-          <input data-tip="Religion name. Click and type to change" class="religionName" value="${
-            r.name
-          }" autocorrect="off" spellcheck="false" />
-          <select data-tip="Religion type" class="religionType">
-            ${getTypeOptions(r.type)}
-          </select>
-          <input data-tip="Religion form" class="religionForm hide" value="${
-            r.form
-          }" autocorrect="off" spellcheck="false" />
-          <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
-          <input data-tip="Religion supreme deity" class="religionDeity hide" value="${
-            r.deity ? r.deity : ""
-          }" autocorrect="off" spellcheck="false" />
-          <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
-          <div data-tip="Religion 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>
-          <span data-tip="Remove religion" class="icon-trash-empty hide"></span>
-        </div>`;
-      } else {
-        // No religion (neutral) line
-        lines += /* html */ `<div
-          class="states"
-          data-id=${r.i}
-          data-name="${r.name}"
-          data-color=""
-          data-area=${area}
-          data-population=${population}
-          data-type=""
-          data-form=""
-          data-deity=""
-          data-expansionism=""
-        >
-          <svg width="11" height="11" class="placeholder"></svg>
-          <input data-tip="Religion name. Click and type to change" class="religionName italic" value="${
-            r.name
-          }" autocorrect="off" spellcheck="false" />
-          <select data-tip="Religion type" class="religionType placeholder">
-            ${getTypeOptions(r.type)}
-          </select>
-          <input data-tip="Religion form" class="religionForm placeholder hide" value="" autocorrect="off" spellcheck="false" />
-          <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
-          <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" value="" autocorrect="off" spellcheck="false" />
-          <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
-          <div data-tip="Religion 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>
-        </div>`;
-      }
-    }
-    $body.innerHTML = lines;
-
-    // update footer
-    const valid = pack.religions.filter(r => r.i && !r.removed);
-    religionsOrganized.innerHTML = valid.filter(r => r.type === "Organized").length;
-    religionsHeresies.innerHTML = valid.filter(r => r.type === "Heresy").length;
-    religionsCults.innerHTML = valid.filter(r => r.type === "Cult").length;
-    religionsFolk.innerHTML = valid.filter(r => r.type === "Folk").length;
-    religionsFooterArea.innerHTML = si(totalArea) + unit;
-    religionsFooterPopulation.innerHTML = si(totalPopulation);
-    religionsFooterArea.dataset.area = totalArea;
-    religionsFooterPopulation.dataset.population = totalPopulation;
-
-    // add listeners
-    $body.querySelectorAll("div.religions").forEach(el => el.on("mouseenter", religionHighlightOn));
-    $body.querySelectorAll("div.religions").forEach(el => el.on("mouseleave", religionHighlightOff));
-    $body.querySelectorAll("div.states").forEach(el => el.on("click", selectReligionOnLineClick));
-    $body.querySelectorAll("fill-box").forEach(el => el.on("click", religionChangeColor));
-    $body.querySelectorAll("div > input.religionName").forEach(el => el.on("input", religionChangeName));
-    $body.querySelectorAll("div > select.religionType").forEach(el => el.on("change", religionChangeType));
-    $body.querySelectorAll("div > input.religionForm").forEach(el => el.on("input", religionChangeForm));
-    $body.querySelectorAll("div > input.religionDeity").forEach(el => el.on("input", religionChangeDeity));
-    $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
-    $body.querySelectorAll("div > div.culturePopulation").forEach(el => el.on("click", changePopulation));
-    $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemove));
-
-    if ($body.dataset.type === "percentage") {
-      $body.dataset.type = "absolute";
-      togglePercentageMode();
-    }
-    applySorting(religionsHeader);
-    $("#religionsEditor").dialog({width: fitContent()});
-  }
-
-  function getTypeOptions(type) {
-    let options = "";
-    const types = ["Folk", "Organized", "Cult", "Heresy"];
-    types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
-    return options;
-  }
-
-  function religionHighlightOn(event) {
-    const religionId = Number(event.id || event.target.dataset.id);
-    const $info = byId("religionInfo");
-    if ($info) {
-      d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
-      const {name, type, form, rural, urban} = pack.religions[religionId];
-
-      const getTypeText = () => {
-        if (name.includes(type)) return "";
-        if (form.includes(type)) return "";
-        if (type === "Folk" || type === "Organized") return `. ${type} religion`;
-        return `. ${type}`;
-      };
-      const formText = form === type ? "" : ". " + form;
-      const population = rural * populationRate + urban * populationRate * urbanization;
-      const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
-
-      $info.innerHTML = `${name}${getTypeText()}${formText}. ${populationText}`;
-      tip("Drag to other node to add parent, click to edit");
-    }
-
-    const el = $body.querySelector(`div[data-id='${religionId}']`);
-    if (el) el.classList.add("active");
-
-    if (!layerIsOn("toggleReligions")) return;
-    if (customization) return;
-    relig
-      .select("#religion" + religionId)
-      .raise()
-      .transition(animate)
-      .attr("stroke-width", 2.5)
-      .attr("stroke", "#c13119");
-    debug
-      .select("#religionsCenter" + religionId)
-      .raise()
-      .transition(animate)
-      .attr("r", 8)
-      .attr("stroke-width", 2)
-      .attr("stroke", "#c13119");
-  }
-
-  function religionHighlightOff(event) {
-    const religionId = Number(event.id || event.target.dataset.id);
-    const $info = byId("religionInfo");
-    if ($info) {
-      d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 0);
-      $info.innerHTML = "&#8205;";
-      tip("");
-    }
-
-    const el = $body.querySelector(`div[data-id='${religionId}']`);
-    if (el) el.classList.remove("active");
-
-    relig
-      .select("#religion" + religionId)
-      .transition()
-      .attr("stroke-width", null)
-      .attr("stroke", null);
-    debug
-      .select("#religionsCenter" + religionId)
-      .transition()
-      .attr("r", 4)
-      .attr("stroke-width", 1.2)
-      .attr("stroke", null);
-  }
-
-  function religionChangeColor() {
-    const el = this;
-    const currentFill = el.getAttribute("fill");
-    const religion = +el.parentNode.dataset.id;
-
-    const callback = newFill => {
-      el.fill = newFill;
-      pack.religions[religion].color = newFill;
-      relig.select("#religion" + religion).attr("fill", newFill);
-      debug.select("#religionsCenter" + religion).attr("fill", newFill);
-    };
-
-    openPicker(currentFill, callback);
-  }
-
-  function religionChangeName() {
-    const religion = +this.parentNode.dataset.id;
-    this.parentNode.dataset.name = this.value;
-    pack.religions[religion].name = this.value;
-    pack.religions[religion].code = abbreviate(
-      this.value,
-      pack.religions.map(c => c.code)
-    );
-  }
-
-  function religionChangeType() {
-    const religion = +this.parentNode.dataset.id;
-    this.parentNode.dataset.type = this.value;
-    pack.religions[religion].type = this.value;
-  }
-
-  function religionChangeForm() {
-    const religion = +this.parentNode.dataset.id;
-    this.parentNode.dataset.form = this.value;
-    pack.religions[religion].form = this.value;
-  }
-
-  function religionChangeDeity() {
-    const religion = +this.parentNode.dataset.id;
-    this.parentNode.dataset.deity = this.value;
-    pack.religions[religion].deity = this.value;
-  }
-
-  function regenerateDeity() {
-    const religion = +this.parentNode.dataset.id;
-    const culture = pack.religions[religion].culture;
-    const deity = Religions.getDeityName(culture);
-    this.parentNode.dataset.deity = deity;
-    pack.religions[religion].deity = deity;
-    this.nextElementSibling.value = deity;
-  }
-
-  function changePopulation() {
-    const religion = +this.parentNode.dataset.id;
-    const r = pack.religions[religion];
-    if (!r.cells) {
-      tip("Religion does not have any cells, cannot change population", false, "error");
-      return;
-    }
-    const rural = rn(r.rural * populationRate);
-    const urban = rn(r.urban * populationRate * urbanization);
-    const total = rural + urban;
-    const l = n => Number(n).toLocaleString();
-    const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religion);
-
-    alertMessage.innerHTML = /* html */ `<p>
-        <i
-          >Please note all population of religion territory is considered believers of this religion. It means believers number change will directly change
-          population</i
-        >
-      </p>
-      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" ${
-      burgs.length ? "" : "disabled"
-    } />
-      <p>Total believers: ${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 believers number",
-      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.religion[i] === religion);
-        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.religion[i] === religion);
-        const pop = rn(points / cells.length);
-        cells.forEach(i => (pack.cells.pop[i] = pop));
-      }
-
-      const urbanChange = urbanPop.value / urban;
-      if (isFinite(urbanChange) && urbanChange !== 1) {
-        burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
-      }
-      if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-        const points = urbanPop.value / populationRate / urbanization;
-        const population = rn(points / burgs.length, 4);
-        burgs.forEach(b => (b.population = population));
-      }
-
-      refreshReligionsEditor();
-    }
-  }
-
-  function religionRemove() {
-    if (customization) return;
-    const religionId = +this.parentNode.dataset.id;
-
-    alertMessage.innerHTML = "Are you sure you want to remove the religion? <br>This action cannot be reverted";
-    $("#alert").dialog({
-      resizable: false,
-      title: "Remove religion",
-      buttons: {
-        Remove: function () {
-          relig.select("#religion" + religionId).remove();
-          relig.select("#religion-gap" + religionId).remove();
-          debug.select("#religionsCenter" + religionId).remove();
-
-          pack.cells.religion.forEach((r, i) => {
-            if (r === religionId) pack.cells.religion[i] = 0;
-          });
-          pack.religions[religionId].removed = true;
-
-          pack.religions
-            .filter(r => r.i && !r.removed)
-            .forEach(r => {
-              r.origins = r.origins.filter(origin => origin !== religionId);
-              if (!r.origins.length) r.origins = [0];
-            });
-
-          refreshReligionsEditor();
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  }
-
-  function drawReligionCenters() {
-    debug.select("#religionCenters").remove();
-    const religionCenters = debug
-      .append("g")
-      .attr("id", "religionCenters")
-      .attr("stroke-width", 1.2)
-      .attr("stroke", "#444444")
-      .style("cursor", "move");
-
-    const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
-    religionCenters
-      .selectAll("circle")
-      .data(data)
-      .enter()
-      .append("circle")
-      .attr("id", d => "religionsCenter" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("r", 4)
-      .attr("fill", d => d.color)
-      .attr("cx", d => pack.cells.p[d.center][0])
-      .attr("cy", d => pack.cells.p[d.center][1])
-      .on("mouseenter", d => {
-        tip(d.name + ". Drag to move the religion center", true);
-        religionHighlightOn(event);
-      })
-      .on("mouseleave", d => {
-        tip("", true);
-        religionHighlightOff(event);
-      })
-      .call(d3.drag().on("start", religionCenterDrag));
-  }
-
-  function religionCenterDrag() {
-    const el = d3.select(this);
-    const r = +this.dataset.id;
-    d3.event.on("drag", () => {
-      el.attr("cx", d3.event.x).attr("cy", d3.event.y);
-      const cell = findCell(d3.event.x, d3.event.y);
-      if (pack.cells.h[cell] < 20) return; // ignore dragging on water
-      pack.religions[r].center = cell;
-    });
-  }
-
-  function toggleLegend() {
-    if (legend.selectAll("*").size()) {
-      clearLegend();
-      return;
-    } // hide legend
-    const data = pack.religions
-      .filter(r => r.i && !r.removed && r.area)
-      .sort((a, b) => b.area - a.area)
-      .map(r => [r.i, r.color, r.name]);
-    drawLegend("Religions", data);
-  }
-
-  function togglePercentageMode() {
-    if ($body.dataset.type === "absolute") {
-      $body.dataset.type = "percentage";
-      const totalArea = +religionsFooterArea.dataset.area;
-      const totalPopulation = +religionsFooterPopulation.dataset.population;
-
-      $body.querySelectorAll(":scope > div").forEach(function (el) {
-        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";
-      religionsEditorAddLines();
-    }
-  }
-
-  function showHierarchy() {
-    // build hierarchy tree
-    pack.religions[0].origins = [null];
-    const validReligions = pack.religions.filter(r => !r.removed);
-    if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
-
-    const root = d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => d.origins[0])(validReligions);
-    const treeWidth = root.leaves().length;
-    const treeHeight = root.height;
-    const width = Math.max(treeWidth * 40, 300);
-    const height = treeHeight * 60;
-
-    const margin = {top: 10, right: 10, bottom: -5, left: 10};
-    const w = width - margin.left - margin.right;
-    const h = height + 30 - margin.top - margin.bottom;
-    const treeLayout = d3.tree().size([w, h]);
-
-    alertMessage.innerHTML = /* html */ `<div id="religionChartDetails" class='chartInfo'>
-    <div id='religionInfo' style="display: block">&#8205;</div>
-    <div id='religionSelected' style="display: none">
-      <span><span id='religionSelectedName'></span>. </span>
-      <span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
-      <button data-tip='Clear origin, religion will be linked to top level' id='religionSelectedClear'>Clear</button>
-      <button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
-    </div>
-  </div>`;
-
-    // prepare svg
-    const svg = d3
-      .select("#alertMessage")
-      .insert("svg", "#religionChartDetails")
-      .attr("id", "hierarchy")
-      .attr("width", width)
-      .attr("height", height)
-      .style("text-anchor", "middle");
-    const graph = svg.append("g").attr("transform", `translate(10, -45)`);
-    const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
-    const primaryLinks = links.append("g");
-    const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
-    const nodes = graph.append("g");
-
-    // render helper functions
-    const getLinkPath = d => {
-      const {
-        source: {x: sx, y: sy},
-        target: {x: tx, y: ty}
-      } = d;
-      return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
-    };
-
-    const getSecondaryLinks = root => {
-      const nodes = root.descendants();
-      const links = [];
-
-      for (const node of nodes) {
-        const origins = node.data.origins;
-        if (node.depth < 2) continue;
-
-        for (let i = 1; i < origins.length; i++) {
-          const source = nodes.find(n => n.data.i === origins[i]);
-          if (source) links.push({source, target: node});
-        }
-      }
-
-      return links;
-    };
-
-    const nodePathMap = {
-      undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
-      Folk: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
-      Organized: "M-11,-11h22v22h-22Z", // square
-      Cult: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
-      Heresy: "M0,-14L14,0L0,14L-14,0Z" // diamond
-    };
-
-    const getNodePath = d => nodePathMap[d.data.type];
-
-    renderTree();
-    function renderTree() {
-      treeLayout(root);
-
-      primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
-      secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
-
-      const node = nodes
-        .selectAll("g")
-        .data(root.descendants())
-        .enter()
-        .append("g")
-        .attr("data-id", d => d.data.i)
-        .attr("stroke", "#333333")
-        .attr("transform", d => `translate(${d.x}, ${d.y})`)
-        .on("mouseenter", religionHighlightOn)
-        .on("mouseleave", religionHighlightOff)
-        .on("click", religionSelect)
-        .call(d3.drag().on("start", dragToReorigin));
-
-      node
-        .append("path")
-        .attr("d", getNodePath)
-        .attr("fill", d => d.data.color || "#ffffff")
-        .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-      node
-        .append("text")
-        .attr("dy", ".35em")
-        .text(d => d.data.code || "");
-    }
-
-    $("#alert").dialog({
-      title: "Religions tree",
-      width: fitContent(),
-      resizable: false,
-      position: {my: "left center", at: "left+10 center", of: "svg"},
-      buttons: {},
-      close: () => {
-        alertMessage.innerHTML = "";
-      }
-    });
-
-    function religionSelect(d) {
-      d3.event.stopPropagation();
-
-      nodes.selectAll("g").style("outline", "none");
-      this.style.outline = "1px solid #c13119";
-      byId("religionSelected").style.display = "block";
-      byId("religionInfo").style.display = "none";
-
-      const religion = d.data;
-      byId("religionSelectedName").innerText = religion.name;
-      byId("religionSelectedCode").value = religion.code;
-
-      byId("religionSelectedCode").onchange = function () {
-        if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
-        if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
-        nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
-        religion.code = this.value;
-      };
-
-      byId("religionSelectedClear").onclick = () => {
-        religion.origins = [0];
-        showHierarchy();
-      };
-
-      byId("religionSelectedClose").onclick = () => {
-        this.style.outline = "none";
-        byId("religionSelected").style.display = "none";
-        byId("religionInfo").style.display = "block";
-      };
-    }
-
-    function dragToReorigin(d) {
-      const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
-      d3.event.on("drag", () => {
-        originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
-      });
-
-      d3.event.on("end", () => {
-        originLine.remove();
-        const selected = graph.select("g.selected");
-        if (!selected.size()) return;
-
-        const religionId = d.data.i;
-        const newOrigin = selected.datum().data.i;
-        if (religionId === newOrigin) return; // dragged to itself
-        if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
-        if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
-
-        const religion = pack.religions[religionId];
-        if (religion.origins[0] === 0) religion.origins = [];
-        religion.origins.push(newOrigin);
-
-        showHierarchy();
-      });
-    }
-  }
-
-  function toggleExtinct() {
-    $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
-    religionsEditorAddLines();
-  }
-
-  function enterReligionsManualAssignent() {
-    if (!layerIsOn("toggleReligions")) toggleReligions();
-    customization = 7;
-    relig.append("g").attr("id", "temp");
-    document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
-    byId("religionsManuallyButtons").style.display = "inline-block";
-    debug.select("#religionCenters").style("display", "none");
-
-    religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
-    religionsFooter.style.display = "none";
-    $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-    $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    tip("Click on religion to select, drag the circle to change religion", true);
-    viewbox
-      .style("cursor", "crosshair")
-      .on("click", selectReligionOnMapClick)
-      .call(d3.drag().on("start", dragReligionBrush))
-      .on("touchmove mousemove", moveReligionBrush);
-
-    $body.querySelector("div").classList.add("selected");
-  }
-
-  function selectReligionOnLineClick(i) {
-    if (customization !== 7) return;
-    $body.querySelector("div.selected").classList.remove("selected");
-    this.classList.add("selected");
-  }
-
-  function selectReligionOnMapClick() {
-    const point = d3.mouse(this);
-    const i = findCell(point[0], point[1]);
-    if (pack.cells.h[i] < 20) return;
-
-    const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
-    const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
-
-    $body.querySelector("div.selected").classList.remove("selected");
-    $body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
-  }
-
-  function dragReligionBrush() {
-    const r = +religionsManuallyBrushNumber.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) changeReligionForSelection(selection);
-    });
-  }
-
-  // change religion within selection
-  function changeReligionForSelection(selection) {
-    const temp = relig.select("#temp");
-    const selected = $body.querySelector("div.selected");
-    const r = +selected.dataset.id; // religionNew
-    const color = pack.religions[r].color || "#ffffff";
-
-    selection.forEach(function (i) {
-      const exists = temp.select("polygon[data-cell='" + i + "']");
-      const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i];
-      if (r === religionOld) return;
-
-      // change of append new element
-      if (exists.size()) exists.attr("data-religion", r).attr("fill", color);
-      else
-        temp
-          .append("polygon")
-          .attr("data-cell", i)
-          .attr("data-religion", r)
-          .attr("points", getPackPolygon(i))
-          .attr("fill", color);
-    });
-  }
-
-  function moveReligionBrush() {
-    showMainTip();
-    const point = d3.mouse(this);
-    const radius = +religionsManuallyBrushNumber.value;
-    moveCircle(point[0], point[1], radius);
-  }
-
-  function applyReligionsManualAssignent() {
-    const changed = relig.select("#temp").selectAll("polygon");
-    changed.each(function () {
-      const i = +this.dataset.cell;
-      const r = +this.dataset.religion;
-      pack.cells.religion[i] = r;
-    });
-
-    if (changed.size()) {
-      drawReligions();
-      refreshReligionsEditor();
-      drawReligionCenters();
-    }
-    exitReligionsManualAssignment();
-  }
-
-  function exitReligionsManualAssignment(close) {
-    customization = 0;
-    relig.select("#temp").remove();
-    removeCircle();
-    document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
-    byId("religionsManuallyButtons").style.display = "none";
-
-    religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
-    religionsFooter.style.display = "block";
-    $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    debug.select("#religionCenters").style("display", null);
-    restoreDefaultEvents();
-    clearMainTip();
-    const selected = $body.querySelector("div.selected");
-    if (selected) selected.classList.remove("selected");
-  }
-
-  function enterAddReligionMode() {
-    if (this.classList.contains("pressed")) {
-      exitAddReligionMode();
-      return;
-    }
-    customization = 8;
-    this.classList.add("pressed");
-    tip("Click on the map to add a new religion", true);
-    viewbox.style("cursor", "crosshair").on("click", addReligion);
-    $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-  }
-
-  function exitAddReligionMode() {
-    customization = 0;
-    restoreDefaultEvents();
-    clearMainTip();
-    $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed");
-  }
-
-  function addReligion() {
-    const point = d3.mouse(this);
-    const center = findCell(point[0], point[1]);
-    if (pack.cells.h[center] < 20) {
-      tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
-      return;
-    }
-    const occupied = pack.religions.some(r => !r.removed && r.center === center);
-    if (occupied) {
-      tip("This cell is already a religion center. Please select a different cell", false, "error");
-      return;
-    }
-
-    if (d3.event.shiftKey === false) exitAddReligionMode();
-    Religions.add(center);
-
-    drawReligions();
-    refreshReligionsEditor();
-    drawReligionCenters();
-  }
-
-  function downloadReligionsCsv() {
-    const unit = getAreaUnit("2");
-    const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins`;
-    const lines = Array.from($body.querySelectorAll(":scope > div"));
-    const data = lines.map($line => {
-      const {id, name, color, type, form, deity, area, population} = $line.dataset;
-      const deityText = '"' + deity + '"';
-      const {origins} = pack.religions[+id];
-      const originList = (origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
-      const originText = '"' + originList.join(", ") + '"';
-      return [id, name, color, type, form, deityText, area, population, originText].join(",");
-    });
-    const csvData = [headers].concat(data).join("\n");
-
-    const name = getFileName("Religions") + ".csv";
-    downloadFile(csvData, name);
-  }
-
-  function closeReligionsEditor() {
-    debug.select("#religionCenters").remove();
-    exitReligionsManualAssignment("close");
-    exitAddReligionMode();
-  }
-}

versioning.js

@@ -28,7 +28,7 @@ const version = "1.86.00"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
-        <li>Hierarchy tree: cultures and religions can have multiple parents</li>
+        <li>Сultures and religions can have multiple parents in hierarchy tree</li>
         <li>Heightmap selection screen</li>
         <li>Dialogs optimization for mobile</li>
         <li>New heightmap template: Fractious</li>