Merge branch 'upstream' into dev-grid-generators

index.css

@@ -254,13 +254,6 @@ i.icon-lock {
   font-size: 12px;
 }
 
-#hierarchy .selected {
-  stroke: #c13119;
-  stroke-width: 1;
-  cursor: move;
-}
-
-#hierarchy text,
 #statesTree text,
 #provincesTree text {
   pointer-events: none;
@@ -281,7 +274,7 @@ i.icon-lock {
   stroke-width: 2;
 }
 
-.dragLine {
+.regimentDragLine {
   marker-end: url(#end-arrow);
   stroke: #333333;
   stroke-dasharray: 5;
@@ -1619,28 +1612,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;

modules/cultures-generator.js

@@ -60,7 +60,7 @@ window.Cultures = (function () {
       c.color = colors[i];
       c.type = defineCultureType(cell);
       c.expansionism = defineCultureExpansionism(c.type);
-      c.origin = 0;
+      c.origins = [0];
       c.code = abbreviate(c.name, codes);
       codes.push(c.code);
       cells.culture[cell] = i + 1;
@@ -80,7 +80,7 @@ window.Cultures = (function () {
     }
 
     // the first culture with id 0 is for wildlands
-    cultures.unshift({name: "Wildlands", i: 0, base: 1, origin: null, shield: "round"});
+    cultures.unshift({name: "Wildlands", i: 0, base: 1, origins: [null], shield: "round"});
 
     // make sure all bases exist in nameBases
     if (!nameBases.length) {
@@ -115,7 +115,11 @@ window.Cultures = (function () {
       if (cells.h[i] > 50) return "Highland"; // no penalty for hills and moutains, high for other elevations
       const f = pack.features[cells.f[cells.haven[i]]]; // opposite feature
       if (f.type === "lake" && f.cells > 5) return "Lake"; // low water cross penalty and high for growth not along coastline
-      if ((cells.harbor[i] && f.type !== "lake" && P(0.1)) || (cells.harbor[i] === 1 && P(0.6)) || (pack.features[cells.f[i]].group === "isle" && P(0.4)))
+      if (
+        (cells.harbor[i] && f.type !== "lake" && P(0.1)) ||
+        (cells.harbor[i] === 1 && P(0.6)) ||
+        (pack.features[cells.f[i]].group === "isle" && P(0.4))
+      )
         return "Naval"; // low water cross penalty and high for non-along-coastline growth
       if (cells.r[i] && cells.fl[i] > 100) return "River"; // no River cross penalty, penalty for non-River growth
       if (cells.t[i] > 2 && [3, 7, 8, 9, 10, 12].includes(cells.biome[i])) return "Hunting"; // high penalty in non-native biomes
@@ -163,7 +167,22 @@ window.Cultures = (function () {
     const emblemShape = document.getElementById("emblemShape").value;
     if (emblemShape === "random") shield = getRandomShield();
 
-    pack.cultures.push({name, color, base, center, i, expansionism: 1, type: "Generic", cells: 0, area: 0, rural: 0, urban: 0, origin: 0, code, shield});
+    pack.cultures.push({
+      name,
+      color,
+      base,
+      center,
+      i,
+      expansionism: 1,
+      type: "Generic",
+      cells: 0,
+      area: 0,
+      rural: 0,
+      urban: 0,
+      origins: [0],
+      code,
+      shield
+    });
   };
 
   const getDefault = function (count) {
@@ -180,7 +199,8 @@ window.Cultures = (function () {
       return d ? d + 1 : 1;
     }; // temperature difference fee
     const bd = (cell, biomes, fee = 4) => (biomes.includes(cells.biome[cell]) ? 1 : fee); // biome difference fee
-    const sf = (cell, fee = 4) => (cells.haven[cell] && pack.features[cells.f[cells.haven[cell]]].type !== "lake" ? 1 : fee); // not on sea coast fee
+    const sf = (cell, fee = 4) =>
+      cells.haven[cell] && pack.features[cells.f[cells.haven[cell]]].type !== "lake" ? 1 : fee; // not on sea coast fee
 
     if (culturesSet.value === "european") {
       return [
@@ -208,7 +228,13 @@ window.Cultures = (function () {
         {name: "Hantzu", base: 11, odd: 1, sort: i => n(i) / td(i, 13), shield: "banner"},
         {name: "Yamoto", base: 12, odd: 1, sort: i => n(i) / td(i, 15) / t[i], shield: "round"},
         {name: "Turchian", base: 16, odd: 1, sort: i => n(i) / td(i, 12), shield: "round"},
-        {name: "Berberan", base: 17, odd: 0.2, sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i], shield: "oval"},
+        {
+          name: "Berberan",
+          base: 17,
+          odd: 0.2,
+          sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i],
+          shield: "oval"
+        },
         {name: "Eurabic", base: 18, odd: 1, sort: i => (n(i) / td(i, 26) / bd(i, [1, 2], 7)) * t[i], shield: "oval"},
         {name: "Efratic", base: 23, odd: 0.1, sort: i => (n(i) / td(i, 22)) * t[i], shield: "round"},
         {name: "Tehrani", base: 24, odd: 1, sort: i => (n(i) / td(i, 18)) * h[i], shield: "round"},
@@ -259,15 +285,45 @@ window.Cultures = (function () {
     if (culturesSet.value === "highFantasy") {
       return [
         // fantasy races
-        {name: "Quenian (Elfish)", base: 33, odd: 1, sort: i => (n(i) / bd(i, [6, 7, 8, 9], 10)) * t[i], shield: "gondor"}, // Elves
-        {name: "Eldar (Elfish)", base: 33, odd: 1, sort: i => (n(i) / bd(i, [6, 7, 8, 9], 10)) * t[i], shield: "noldor"}, // Elves
-        {name: "Trow (Dark Elfish)", base: 34, odd: 0.9, sort: i => (n(i) / bd(i, [7, 8, 9, 12], 10)) * t[i], shield: "hessen"}, // Dark Elves
-        {name: "Lothian (Dark Elfish)", base: 34, odd: 0.3, sort: i => (n(i) / bd(i, [7, 8, 9, 12], 10)) * t[i], shield: "wedged"}, // Dark Elves
+        {
+          name: "Quenian (Elfish)",
+          base: 33,
+          odd: 1,
+          sort: i => (n(i) / bd(i, [6, 7, 8, 9], 10)) * t[i],
+          shield: "gondor"
+        }, // Elves
+        {
+          name: "Eldar (Elfish)",
+          base: 33,
+          odd: 1,
+          sort: i => (n(i) / bd(i, [6, 7, 8, 9], 10)) * t[i],
+          shield: "noldor"
+        }, // Elves
+        {
+          name: "Trow (Dark Elfish)",
+          base: 34,
+          odd: 0.9,
+          sort: i => (n(i) / bd(i, [7, 8, 9, 12], 10)) * t[i],
+          shield: "hessen"
+        }, // Dark Elves
+        {
+          name: "Lothian (Dark Elfish)",
+          base: 34,
+          odd: 0.3,
+          sort: i => (n(i) / bd(i, [7, 8, 9, 12], 10)) * t[i],
+          shield: "wedged"
+        }, // Dark Elves
         {name: "Dunirr (Dwarven)", base: 35, odd: 1, sort: i => n(i) + h[i], shield: "ironHills"}, // Dwarfs
         {name: "Khazadur (Dwarven)", base: 35, odd: 1, sort: i => n(i) + h[i], shield: "erebor"}, // Dwarfs
         {name: "Kobold (Goblin)", base: 36, odd: 1, sort: i => t[i] - s[i], shield: "moriaOrc"}, // Goblin
         {name: "Uruk (Orkish)", base: 37, odd: 1, sort: i => h[i] * t[i], shield: "urukHai"}, // Orc
-        {name: "Ugluk (Orkish)", base: 37, odd: 0.5, sort: i => (h[i] * t[i]) / bd(i, [1, 2, 10, 11]), shield: "moriaOrc"}, // Orc
+        {
+          name: "Ugluk (Orkish)",
+          base: 37,
+          odd: 0.5,
+          sort: i => (h[i] * t[i]) / bd(i, [1, 2, 10, 11]),
+          shield: "moriaOrc"
+        }, // Orc
         {name: "Yotunn (Giants)", base: 38, odd: 0.7, sort: i => td(i, -10), shield: "pavise"}, // Giant
         {name: "Rake (Drakonic)", base: 39, odd: 0.7, sort: i => -s[i], shield: "fantasy2"}, // Draconic
         {name: "Arago (Arachnid)", base: 40, odd: 0.7, sort: i => t[i] - s[i], shield: "horsehead2"}, // Arachnid
@@ -276,7 +332,13 @@ window.Cultures = (function () {
         {name: "Anor (Human)", base: 32, odd: 1, sort: i => n(i) / td(i, 10), shield: "fantasy5"},
         {name: "Dail (Human)", base: 32, odd: 1, sort: i => n(i) / td(i, 13), shield: "roman"},
         {name: "Rohand (Human)", base: 16, odd: 1, sort: i => n(i) / td(i, 16), shield: "round"},
-        {name: "Dulandir (Human)", base: 31, odd: 1, sort: i => (n(i) / td(i, 5) / bd(i, [2, 4, 10], 7)) * t[i], shield: "easterling"}
+        {
+          name: "Dulandir (Human)",
+          base: 31,
+          odd: 1,
+          sort: i => (n(i) / td(i, 5) / bd(i, [2, 4, 10], 7)) * t[i],
+          shield: "easterling"
+        }
       ];
     }
 
@@ -296,18 +358,48 @@ window.Cultures = (function () {
         {name: "Hetallian", base: 3, odd: 0.3, sort: i => n(i) / td(i, 15), shield: "oval"},
         {name: "Astellian", base: 4, odd: 0.3, sort: i => n(i) / td(i, 16), shield: "spanish"},
         // rare real-world exotic
-        {name: "Kiswaili", base: 28, odd: 0.05, sort: i => n(i) / td(i, 29) / bd(i, [1, 3, 5, 7]), shield: "vesicaPiscis"},
+        {
+          name: "Kiswaili",
+          base: 28,
+          odd: 0.05,
+          sort: i => n(i) / td(i, 29) / bd(i, [1, 3, 5, 7]),
+          shield: "vesicaPiscis"
+        },
         {name: "Yoruba", base: 21, odd: 0.05, sort: i => n(i) / td(i, 15) / bd(i, [5, 7]), shield: "vesicaPiscis"},
         {name: "Koryo", base: 10, odd: 0.05, sort: i => n(i) / td(i, 12) / t[i], shield: "round"},
         {name: "Hantzu", base: 11, odd: 0.05, sort: i => n(i) / td(i, 13), shield: "banner"},
         {name: "Yamoto", base: 12, odd: 0.05, sort: i => n(i) / td(i, 15) / t[i], shield: "round"},
         {name: "Guantzu", base: 30, odd: 0.05, sort: i => n(i) / td(i, 17), shield: "banner"},
-        {name: "Ulus", base: 31, odd: 0.05, sort: i => (n(i) / td(i, 5) / bd(i, [2, 4, 10], 7)) * t[i], shield: "banner"},
+        {
+          name: "Ulus",
+          base: 31,
+          odd: 0.05,
+          sort: i => (n(i) / td(i, 5) / bd(i, [2, 4, 10], 7)) * t[i],
+          shield: "banner"
+        },
         {name: "Turan", base: 16, odd: 0.05, sort: i => n(i) / td(i, 12), shield: "round"},
-        {name: "Berberan", base: 17, odd: 0.05, sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i], shield: "round"},
-        {name: "Eurabic", base: 18, odd: 0.05, sort: i => (n(i) / td(i, 26) / bd(i, [1, 2], 7)) * t[i], shield: "round"},
+        {
+          name: "Berberan",
+          base: 17,
+          odd: 0.05,
+          sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i],
+          shield: "round"
+        },
+        {
+          name: "Eurabic",
+          base: 18,
+          odd: 0.05,
+          sort: i => (n(i) / td(i, 26) / bd(i, [1, 2], 7)) * t[i],
+          shield: "round"
+        },
         {name: "Slovan", base: 5, odd: 0.05, sort: i => (n(i) / td(i, 6)) * t[i], shield: "round"},
-        {name: "Keltan", base: 22, odd: 0.1, sort: i => n(i) / td(i, 11) ** 0.5 / bd(i, [6, 8]), shield: "vesicaPiscis"},
+        {
+          name: "Keltan",
+          base: 22,
+          odd: 0.1,
+          sort: i => n(i) / td(i, 11) ** 0.5 / bd(i, [6, 8]),
+          shield: "vesicaPiscis"
+        },
         {name: "Elladan", base: 7, odd: 0.2, sort: i => (n(i) / td(i, 18) / sf(i)) * h[i], shield: "boeotian"},
         {name: "Romian", base: 8, odd: 0.2, sort: i => n(i) / td(i, 14) / t[i], shield: "roman"},
         // fantasy races
@@ -350,12 +442,24 @@ window.Cultures = (function () {
       {name: "Nawatli", base: 14, odd: 0.1, sort: i => h[i] / td(i, 18) / bd(i, [7]), shield: "square"},
       {name: "Vengrian", base: 15, odd: 0.2, sort: i => (n(i) / td(i, 11) / bd(i, [4])) * t[i], shield: "wedged"},
       {name: "Turchian", base: 16, odd: 0.2, sort: i => n(i) / td(i, 13), shield: "round"},
-      {name: "Berberan", base: 17, odd: 0.1, sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i], shield: "round"},
+      {
+        name: "Berberan",
+        base: 17,
+        odd: 0.1,
+        sort: i => (n(i) / td(i, 19) / bd(i, [1, 2, 3], 7)) * t[i],
+        shield: "round"
+      },
       {name: "Eurabic", base: 18, odd: 0.2, sort: i => (n(i) / td(i, 26) / bd(i, [1, 2], 7)) * t[i], shield: "round"},
       {name: "Inuk", base: 19, odd: 0.05, sort: i => td(i, -1) / bd(i, [10, 11]) / sf(i), shield: "square"},
       {name: "Euskati", base: 20, odd: 0.05, sort: i => (n(i) / td(i, 15)) * h[i], shield: "spanish"},
       {name: "Yoruba", base: 21, odd: 0.05, sort: i => n(i) / td(i, 15) / bd(i, [5, 7]), shield: "vesicaPiscis"},
-      {name: "Keltan", base: 22, odd: 0.05, sort: i => (n(i) / td(i, 11) / bd(i, [6, 8])) * t[i], shield: "vesicaPiscis"},
+      {
+        name: "Keltan",
+        base: 22,
+        odd: 0.05,
+        sort: i => (n(i) / td(i, 11) / bd(i, [6, 8])) * t[i],
+        shield: "vesicaPiscis"
+      },
       {name: "Efratic", base: 23, odd: 0.05, sort: i => (n(i) / td(i, 22)) * t[i], shield: "diamond"},
       {name: "Tehrani", base: 24, odd: 0.1, sort: i => (n(i) / td(i, 18)) * h[i], shield: "round"},
       {name: "Maui", base: 25, odd: 0.05, sort: i => n(i) / td(i, 24) / sf(i) / t[i], shield: "round"},
@@ -394,7 +498,8 @@ window.Cultures = (function () {
         const heightCost = getHeightCost(e, cells.h[e], type);
         const riverCost = getRiverCost(cells.r[e], e, type);
         const typeCost = getTypeCost(cells.t[e], type);
-        const totalCost = p + (biomeCost + biomeChangeCost + heightCost + riverCost + typeCost) / pack.cultures[c].expansionism;
+        const totalCost =
+          p + (biomeCost + biomeChangeCost + heightCost + riverCost + typeCost) / pack.cultures[c].expansionism;
 
         if (totalCost > neutral) return;
 

modules/dynamic/auto-update.js

@@ -30,8 +30,18 @@ export function resolveVersionConflicts(version) {
       .attr("stroke-dasharray", null)
       .attr("stroke-linecap", null)
       .attr("filter", null);
-    stateBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 1).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt");
-    provinceBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 0.5).attr("stroke-dasharray", "1").attr("stroke-linecap", "butt");
+    stateBorders
+      .attr("opacity", 0.8)
+      .attr("stroke", "#56566d")
+      .attr("stroke-width", 1)
+      .attr("stroke-dasharray", "2")
+      .attr("stroke-linecap", "butt");
+    provinceBorders
+      .attr("opacity", 0.8)
+      .attr("stroke", "#56566d")
+      .attr("stroke-width", 0.5)
+      .attr("stroke-dasharray", "1")
+      .attr("stroke-linecap", "butt");
 
     // v1.0 added state relations, provinces, forms and full names
     provs = viewbox.insert("g", "#borders").attr("id", "provs").attr("opacity", 0.6);
@@ -47,7 +57,12 @@ export function resolveVersionConflicts(version) {
 
     // v1.0 added zones layer
     zones = viewbox.insert("g", "#borders").attr("id", "zones").attr("display", "none");
-    zones.attr("opacity", 0.6).attr("stroke", null).attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt");
+    zones
+      .attr("opacity", 0.6)
+      .attr("stroke", null)
+      .attr("stroke-width", 0)
+      .attr("stroke-dasharray", null)
+      .attr("stroke-linecap", "butt");
     addZones();
     if (!markers.selectAll("*").size()) {
       Markers.generate();
@@ -55,9 +70,23 @@ export function resolveVersionConflicts(version) {
     }
 
     // v1.0 add fogging layer (state focus)
-    fogging = viewbox.insert("g", "#ruler").attr("id", "fogging-cont").attr("mask", "url(#fog)").append("g").attr("id", "fogging").style("display", "none");
+    fogging = viewbox
+      .insert("g", "#ruler")
+      .attr("id", "fogging-cont")
+      .attr("mask", "url(#fog)")
+      .append("g")
+      .attr("id", "fogging")
+      .style("display", "none");
     fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
-    defs.append("mask").attr("id", "fog").append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", "white");
+    defs
+      .append("mask")
+      .attr("id", "fog")
+      .append("rect")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("width", "100%")
+      .attr("height", "100%")
+      .attr("fill", "white");
 
     // v1.0 changes states opacity bask to regions level
     if (statesBody.attr("opacity")) {
@@ -103,12 +132,24 @@ export function resolveVersionConflicts(version) {
 
     if (!document.getElementById("freshwater")) {
       lakes.append("g").attr("id", "freshwater");
-      lakes.select("#freshwater").attr("opacity", 0.5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", 0.7).attr("filter", null);
+      lakes
+        .select("#freshwater")
+        .attr("opacity", 0.5)
+        .attr("fill", "#a6c1fd")
+        .attr("stroke", "#5f799d")
+        .attr("stroke-width", 0.7)
+        .attr("filter", null);
     }
 
     if (!document.getElementById("salt")) {
       lakes.append("g").attr("id", "salt");
-      lakes.select("#salt").attr("opacity", 0.5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", 0.7).attr("filter", null);
+      lakes
+        .select("#salt")
+        .attr("opacity", 0.5)
+        .attr("fill", "#409b8a")
+        .attr("stroke", "#388985")
+        .attr("stroke-width", 0.7)
+        .attr("filter", null);
     }
 
     // v1.1 added new lake and coast groups
@@ -116,14 +157,42 @@ export function resolveVersionConflicts(version) {
       lakes.append("g").attr("id", "sinkhole");
       lakes.append("g").attr("id", "frozen");
       lakes.append("g").attr("id", "lava");
-      lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", 0.7).attr("filter", null);
-      lakes.select("#frozen").attr("opacity", 0.95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null);
-      lakes.select("#lava").attr("opacity", 0.7).attr("fill", "#90270d").attr("stroke", "#f93e0c").attr("stroke-width", 2).attr("filter", "url(#crumpled)");
+      lakes
+        .select("#sinkhole")
+        .attr("opacity", 1)
+        .attr("fill", "#5bc9fd")
+        .attr("stroke", "#53a3b0")
+        .attr("stroke-width", 0.7)
+        .attr("filter", null);
+      lakes
+        .select("#frozen")
+        .attr("opacity", 0.95)
+        .attr("fill", "#cdd4e7")
+        .attr("stroke", "#cfe0eb")
+        .attr("stroke-width", 0)
+        .attr("filter", null);
+      lakes
+        .select("#lava")
+        .attr("opacity", 0.7)
+        .attr("fill", "#90270d")
+        .attr("stroke", "#f93e0c")
+        .attr("stroke-width", 2)
+        .attr("filter", "url(#crumpled)");
 
       coastline.append("g").attr("id", "sea_island");
       coastline.append("g").attr("id", "lake_island");
-      coastline.select("#sea_island").attr("opacity", 0.5).attr("stroke", "#1f3846").attr("stroke-width", 0.7).attr("filter", "url(#dropShadow)");
-      coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", 0.35).attr("filter", null);
+      coastline
+        .select("#sea_island")
+        .attr("opacity", 0.5)
+        .attr("stroke", "#1f3846")
+        .attr("stroke-width", 0.7)
+        .attr("filter", "url(#dropShadow)");
+      coastline
+        .select("#lake_island")
+        .attr("opacity", 1)
+        .attr("stroke", "#7c8eaf")
+        .attr("stroke-width", 0.35)
+        .attr("filter", null);
     }
 
     // v1.1 features stores more data
@@ -203,7 +272,13 @@ export function resolveVersionConflicts(version) {
 
     // v1.3 added militry layer
     armies = viewbox.insert("g", "#icons").attr("id", "armies");
-    armies.attr("opacity", 1).attr("fill-opacity", 1).attr("font-size", 6).attr("box-size", 3).attr("stroke", "#000").attr("stroke-width", 0.3);
+    armies
+      .attr("opacity", 1)
+      .attr("fill-opacity", 1)
+      .attr("font-size", 6)
+      .attr("box-size", 3)
+      .attr("stroke", "#000")
+      .attr("stroke-width", 0.3);
     turnButtonOn("toggleMilitary");
     Military.generate();
   }
@@ -212,12 +287,23 @@ export function resolveVersionConflicts(version) {
     // v1.35 added dry lakes
     if (!lakes.select("#dry").size()) {
       lakes.append("g").attr("id", "dry");
-      lakes.select("#dry").attr("opacity", 1).attr("fill", "#c9bfa7").attr("stroke", "#8e816f").attr("stroke-width", 0.7).attr("filter", null);
+      lakes
+        .select("#dry")
+        .attr("opacity", 1)
+        .attr("fill", "#c9bfa7")
+        .attr("stroke", "#8e816f")
+        .attr("stroke-width", 0.7)
+        .attr("filter", null);
     }
 
     // v1.4 added ice layer
     ice = viewbox.insert("g", "#coastline").attr("id", "ice").style("display", "none");
-    ice.attr("opacity", null).attr("fill", "#e8f0f6").attr("stroke", "#e8f0f6").attr("stroke-width", 1).attr("filter", "url(#dropShadow05)");
+    ice
+      .attr("opacity", null)
+      .attr("fill", "#e8f0f6")
+      .attr("stroke", "#e8f0f6")
+      .attr("stroke-width", 1)
+      .attr("filter", "url(#dropShadow05)");
     drawIce();
 
     // v1.4 added icon and power attributes for units
@@ -530,4 +616,17 @@ export function resolveVersionConflicts(version) {
     // v1.84.0 moved intial screen out of maon svg
     svg.select("#initial").remove();
   }
+
+  if (version < 1.86) {
+    // v1.86.0 added multi-origin culture and religion hierarchy trees
+    for (const culture of pack.cultures) {
+      culture.origins = [culture.origin];
+      delete culture.origin;
+    }
+
+    for (const religion of pack.religions) {
+      religion.origins = [religion.origin];
+      delete religion.origin;
+    }
+  }
 }

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,9 @@ 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(urban)}. Click to edit`;
+    const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
+      urban
+    )}. Click to edit`;
     totalArea += area;
     totalPopulation += population;
 
@@ -151,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}"
@@ -167,7 +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>
@@ -175,7 +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>`;
@@ -183,24 +189,26 @@ function culturesEditorAddLines() {
     }
 
     lines += /* html */ `<div
-        class="states cultures"
-        data-id=${c.i}
+        class="states"
+        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>
@@ -216,7 +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>
@@ -233,19 +242,21 @@ function culturesEditorAddLines() {
   byId("culturesFooterPopulation").dataset.population = totalPopulation;
 
   // add listeners
-  $body.querySelectorAll("div.cultures").forEach(el => el.on("mouseenter", cultureHighlightOn));
-  $body.querySelectorAll("div.cultures").forEach(el => el.on("mouseleave", cultureHighlightOff));
-  $body.querySelectorAll("div.states").forEach(el => el.on("click", selectCultureOnLineClick));
-  $body.querySelectorAll("fill-box").forEach(el => el.on("click", cultureChangeColor));
-  $body.querySelectorAll("div > input.cultureName").forEach(el => el.on("input", cultureChangeName));
-  $body.querySelectorAll("div > span.icon-cw").forEach(el => el.on("click", cultureRegenerateName));
-  $body.querySelectorAll("div > input.cultureExpan").forEach(el => el.on("input", cultureChangeExpansionism));
-  $body.querySelectorAll("div > select.cultureType").forEach(el => el.on("change", cultureChangeType));
-  $body.querySelectorAll("div > select.cultureBase").forEach(el => el.on("change", cultureChangeBase));
-  $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(":scope > div").forEach($line => {
+    $line.on("mouseenter", cultureHighlightOn);
+    $line.on("mouseleave", cultureHighlightOff);
+    $line.on("click", selectCultureOnLineClick);
+  });
+  $body.querySelectorAll("fill-box").forEach($el => $el.on("click", cultureChangeColor));
+  $body.querySelectorAll("div > input.cultureName").forEach($el => $el.on("input", cultureChangeName));
+  $body.querySelectorAll("div > span.icon-cw").forEach($el => $el.on("click", cultureRegenerateName));
+  $body.querySelectorAll("div > input.cultureExpan").forEach($el => $el.on("input", cultureChangeExpansionism));
+  $body.querySelectorAll("div > select.cultureType").forEach($el => $el.on("change", cultureChangeType));
+  $body.querySelectorAll("div > select.cultureBase").forEach($el => $el.on("change", cultureChangeBase));
+  $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", cultureRemovePrompt));
 
   const $culturesHeader = byId("culturesHeader");
   $culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
@@ -276,62 +287,44 @@ function getShapeOptions(selectShape, selected) {
   const shapes = Object.keys(COA.shields.types)
     .map(type => Object.keys(COA.shields[type]))
     .flat();
-  const options = shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
+  const options = shapes.map(
+    shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`
+  );
   return `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureEmblems hide">${options}</select>`;
 }
 
-function cultureHighlightOn(event) {
-  const culture = +event.target.dataset.id;
-  const $info = byId("cultureInfo");
-  if ($info) {
-    d3.select("#hierarchy")
-      .select("g[data-id='" + culture + "'] > path")
-      .classed("selected", 1);
-    const c = pack.cultures[culture];
-    const rural = c.rural * populationRate;
-    const urban = c.urban * populationRate * urbanization;
-    const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
-    $info.innerHTML = `${c.name} culture. ${c.type}. ${population}`;
-    tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
-  }
+const cultureHighlightOn = debounce(event => {
+  const cultureId = Number(event.id || event.target.dataset.id);
 
   if (!layerIsOn("toggleCultures")) return;
   if (customization) return;
 
   const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
   cults
-    .select("#culture" + culture)
+    .select("#culture" + cultureId)
     .raise()
     .transition(animate)
     .attr("stroke-width", 2.5)
     .attr("stroke", "#d0240f");
   debug
-    .select("#cultureCenter" + culture)
+    .select("#cultureCenter" + cultureId)
     .raise()
     .transition(animate)
     .attr("r", 8)
     .attr("stroke", "#d0240f");
-}
+}, 200);
 
 function cultureHighlightOff(event) {
-  const culture = +event.target.dataset.id;
-  const $info = byId("cultureInfo");
-  if ($info) {
-    d3.select("#hierarchy")
-      .select("g[data-id='" + culture + "'] > path")
-      .classed("selected", 0);
-    $info.innerHTML = "&#8205;";
-    tip("");
-  }
+  const cultureId = Number(event.id || event.target.dataset.id);
 
   if (!layerIsOn("toggleCultures")) return;
   cults
-    .select("#culture" + culture)
+    .select("#culture" + cultureId)
     .transition()
     .attr("stroke-width", null)
     .attr("stroke", null);
   debug
-    .select("#cultureCenter" + culture)
+    .select("#cultureCenter" + cultureId)
     .transition()
     .attr("r", 6)
     .attr("stroke", null);
@@ -340,16 +333,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);
@@ -412,7 +405,14 @@ function cultureChangeEmblemsShape() {
   });
 
   pack.provinces.forEach(province => {
-    if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
+    if (
+      pack.cells.culture[province.center] !== culture ||
+      !province.i ||
+      province.removed ||
+      !province.coa ||
+      province.coa === "custom"
+    )
+      return;
     if (shape === province.coa.shield) return;
     province.coa.shield = shape;
     rerenderCOA("provinceCOA" + province.i, province.coa);
@@ -434,12 +434,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;
@@ -522,37 +530,36 @@ function removeCulture(cultureId) {
   });
   cultures[cultureId].removed = true;
 
-  const origin = cultures[cultureId].origin;
-  cultures.forEach(c => {
-    if (c.origin === cultureId) c.origin = origin;
-  });
+  cultures
+    .filter(c => c.i && !c.removed)
+    .forEach(c => {
+      c.origins = c.origins.filter(origin => origin !== cultureId);
+      if (!c.origins.length) c.origins = [0];
+    });
   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)
   });
 }
 
 function drawCultureCenters() {
   const tooltip = "Drag to move the culture center (ancestral home)";
   debug.select("#cultureCenters").remove();
-  const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
+  const cultureCenters = debug
+    .append("g")
+    .attr("id", "cultureCenters")
+    .attr("stroke-width", 2)
+    .attr("stroke", "#444444")
+    .style("cursor", "move");
 
   const data = pack.cultures.filter(c => c.i && !c.removed);
   cultureCenters
@@ -580,22 +587,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)
@@ -606,14 +612,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";
@@ -621,150 +628,36 @@ function togglePercentageMode() {
   }
 }
 
-function showHierarchy() {
-  // build hierarchy tree
-  pack.cultures[0].origin = null;
-  const validCultures = pack.cultures.filter(c => !c.removed);
-  if (validCultures.length < 3) return tip("Not enough cultures to show hierarchy", false, "error");
+async function showHierarchy() {
+  if (customization) return;
+  const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022");
 
-  const root = d3
-    .stratify()
-    .id(d => d.i)
-    .parentId(d => d.origin)(validCultures);
-  const treeWidth = root.leaves().length;
-  const treeHeight = root.height;
-  const width = treeWidth * 40;
-  const height = treeHeight * 60;
+  const getDescription = culture => {
+    const {name, type, rural, urban} = culture;
 
-  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]);
+    const population = rural * populationRate + urban * populationRate * urbanization;
+    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+    return `${name} culture. ${type}. ${populationText}`;
+  };
 
-  // prepare svg
-  alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
-  const svg = d3
-    .select("#alertMessage")
-    .insert("svg", "#cultureInfo")
-    .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 nodes = graph.append("g");
+  const getShape = ({type}) => {
+    if (type === "Generic") return "circle";
+    if (type === "River") return "diamond";
+    if (type === "Lake") return "hexagon";
+    if (type === "Naval") return "square";
+    if (type === "Highland") return "concave";
+    if (type === "Nomadic") return "octagon";
+    if (type === "Hunting") return "pentagon";
+  };
 
-  renderTree();
-  function renderTree() {
-    treeLayout(root);
-    links
-      .selectAll("path")
-      .data(root.links())
-      .enter()
-      .append("path")
-      .attr("d", d => {
-        return (
-          "M" +
-          d.source.x +
-          "," +
-          d.source.y +
-          "C" +
-          d.source.x +
-          "," +
-          (d.source.y * 3 + d.target.y) / 4 +
-          " " +
-          d.target.x +
-          "," +
-          (d.source.y * 2 + d.target.y) / 3 +
-          " " +
-          d.target.x +
-          "," +
-          d.target.y
-        );
-      });
-
-    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", () => cultureHighlightOn(event))
-      .on("mouseleave", () => cultureHighlightOff(event))
-      .call(d3.drag().on("start", d => dragToReorigin(d)));
-
-    node
-      .append("path")
-      .attr("d", d => {
-        if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
-        // small circle
-        else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
-        // circle
-        else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
-        // diamond
-        else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
-        // hexagon
-        else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
-        if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
-        if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
-        if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
-        return "M-11,-11h22v22h-22Z"; // square
-      })
-      .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
-      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-    node
-      .append("text")
-      .attr("dy", ".35em")
-      .text(d => (d.data.i ? d.data.code : ""));
-  }
-
-  $("#alert").dialog({
-    title: "Cultures tree",
-    width: fitContent(),
-    resizable: false,
-    position: {my: "left center", at: "left+10 center", of: "svg"},
-    buttons: {},
-    close: () => {
-      alertMessage.innerHTML = "";
-    }
+  HeirarchyTree.open({
+    type: "cultures",
+    data: pack.cultures,
+    onNodeEnter: cultureHighlightOn,
+    onNodeLeave: cultureHighlightOff,
+    getDescription,
+    getShape
   });
-
-  function dragToReorigin(d) {
-    if (isCtrlClick(d3.event.sourceEvent)) return changeCode(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("path.selected");
-      if (!selected.size()) return;
-      const culture = d.data.i;
-      const oldOrigin = d.data.origin;
-      let newOrigin = selected.datum().data.i;
-      if (newOrigin == oldOrigin) return; // already a child of the selected node
-      if (newOrigin == culture) newOrigin = 0; // move to top
-      if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
-      pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
-      showHierarchy(); // update hierarchy
-    });
-  }
-
-  function changeCode(d) {
-    prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
-      pack.cultures[d.data.i].code = v;
-      nodes
-        .select("g[data-id='" + d.data.i + "']")
-        .select("text")
-        .text(v);
-    });
-  }
 }
 
 function recalculateCultures(must) {
@@ -853,7 +746,13 @@ function changeCultureForSelection(selection) {
     // change of append new element
     if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
     else
-      temp.append("polygon").attr("data-cell", i).attr("data-culture", cultureNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
+      temp
+        .append("polygon")
+        .attr("data-cell", i)
+        .attr("data-culture", cultureNew)
+        .attr("points", getPackPolygon(i))
+        .attr("fill", color)
+        .attr("stroke", color);
   });
 }
 
@@ -921,7 +820,8 @@ function addCulture() {
   const point = d3.mouse(this);
   const center = findCell(point[0], point[1]);
 
-  if (pack.cells.h[center] < 20) return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
+  if (pack.cells.h[center] < 20)
+    return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
   const occupied = pack.cultures.some(c => !c.removed && c.center === center);
   if (occupied) return tip("This cell is already a culture center. Please select a different cell", false, "error");
 
@@ -934,13 +834,15 @@ function addCulture() {
 
 function downloadCulturesCsv() {
   const unit = getAreaUnit("2");
-  const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origin`;
+  const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origins`;
   const lines = Array.from($body.querySelectorAll(":scope > div"));
   const data = lines.map($line => {
     const {id, name, color, cells, expansionism, type, area, population, emblems, base} = $line.dataset;
     const namesbase = nameBases[+base].name;
-    const {origin} = pack.cultures[+id];
-    return [id, name, color, cells, expansionism, type, area, population, namesbase, emblems, origin].join(",");
+    const {origins} = pack.cultures[+id];
+    const originList = origins.filter(origin => origin).map(origin => pack.cultures[origin].name);
+    const originText = '"' + originList.join(", ") + '"';
+    return [id, name, color, cells, expansionism, type, area, population, namesbase, emblems, originText].join(",");
   });
   const csvData = [headers].concat(data).join("\n");
 
@@ -989,7 +891,7 @@ async function uploadCulturesData() {
 
     current.color = c.color;
     current.expansionism = +c.expansionism;
-    current.origin = +c.origin;
+    current.origins = JSON.parse(c.origins);
 
     if (cultureTypes.includes(c.type)) current.type = c.type;
     else current.type = "Generic";

modules/dynamic/editors/religions-editor.js

@@ -0,0 +1,757 @@
+const $body = insertEditorHtml();
+addListeners();
+
+export function open() {
+  closeDialogs("#religionsEditor, .stable");
+  if (!layerIsOn("toggleReligions")) toggleCultures();
+  if (layerIsOn("toggleStates")) toggleStates();
+  if (layerIsOn("toggleBiomes")) toggleBiomes();
+  if (layerIsOn("toggleCultures")) 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(":scope > div").forEach($line => {
+    $line.on("mouseenter", religionHighlightOn);
+    $line.on("mouseleave", religionHighlightOff);
+    $line.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;
+}
+
+const religionHighlightOn = debounce(event => {
+  const religionId = Number(event.id || event.target.dataset.id);
+  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");
+}, 200);
+
+function religionHighlightOff(event) {
+  const religionId = Number(event.id || event.target.dataset.id);
+  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();
+  }
+}
+
+async function showHierarchy() {
+  if (customization) return;
+  const HeirarchyTree = await import("../hierarchy-tree.js?v=15062022");
+
+  const getDescription = religion => {
+    const {name, type, form, rural, urban} = religion;
+
+    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";
+
+    return `${name}${getTypeText()}${formText}. ${populationText}`;
+  };
+
+  const getShape = ({type}) => {
+    if (type === "Folk") return "circle";
+    if (type === "Organized") return "square";
+    if (type === "Cult") return "hexagon";
+    if (type === "Heresy") return "diamond";
+  };
+
+  HeirarchyTree.open({
+    type: "religions",
+    data: pack.religions,
+    onNodeEnter: religionHighlightOn,
+    onNodeLeave: religionHighlightOff,
+    getDescription,
+    getShape
+  });
+}
+
+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 radius = +byId("religionsManuallyBrushNumber").value;
+
+  d3.event.on("drag", () => {
+    if (!d3.event.dx && !d3.event.dy) return;
+    const [x, y] = d3.mouse(this);
+    moveCircle(x, y, radius);
+
+    const found = radius > 5 ? findAll(x, y, radius) : [findCell(x, y, radius)];
+    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 religionNew = +selected.dataset.id;
+  const color = pack.religions[religionNew].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 (religionNew === religionOld) return;
+
+    // change of append new element
+    if (exists.size()) exists.attr("data-religion", religionNew).attr("fill", color);
+    else
+      temp
+        .append("polygon")
+        .attr("data-cell", i)
+        .attr("data-religion", religionNew)
+        .attr("points", getPackPolygon(i))
+        .attr("fill", color);
+  });
+}
+
+function moveReligionBrush() {
+  showMainTip();
+  const [x, y] = d3.mouse(this);
+  const radius = +byId("religionsManuallyBrushNumber").value;
+  moveCircle(x, y, 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";
+
+  byId("religionsEditor")
+    .querySelectorAll(".hide")
+    .forEach(el => el.classList.remove("hidden"));
+  byId("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")) return exitAddReligionMode();
+
+  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 [x, y] = d3.mouse(this);
+  const center = findCell(x, y);
+  if (pack.cells.h[center] < 20)
+    return tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
+
+  const occupied = pack.religions.some(r => !r.removed && r.center === center);
+  if (occupied) return tip("This cell is already a religion center. Please select a different cell", false, "error");
+
+  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} />
@@ -291,10 +303,10 @@ function statesEditorAddLines() {
   byId("statesFooterPopulation").dataset.population = totalPopulation;
 
   // add listeners
-  $body.querySelectorAll("div.states").forEach(el => {
-    el.on("click", selectStateOnLineClick);
-    el.on("mouseenter", stateHighlightOn);
-    el.on("mouseleave", stateHighlightOff);
+  $body.querySelectorAll(":scope > div").forEach($line => {
+    $line.on("mouseenter", stateHighlightOn);
+    $line.on("mouseleave", stateHighlightOff);
+    $line.on("click", selectStateOnLineClick);
   });
 
   if ($body.dataset.type === "percentage") {
@@ -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";
@@ -699,7 +707,6 @@ function togglePercentageMode() {
 }
 
 function showStatesChart() {
-  // build hierarchy tree
   const statesData = pack.states.filter(s => !s.removed);
   if (statesData.length < 2) return tip("There are no states to show", false, "error");
 
@@ -913,7 +920,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 +978,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 +1136,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 +1162,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 +1182,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 +1207,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 +1259,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 +1332,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/dynamic/export-json.js

@@ -1,12 +1,13 @@
-function exportToJson(type) {
-  if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
+export function exportToJson(type) {
+  if (customization)
+    return tip("Data cannot be exported when edit mode is active, please exit the mode and retry", false, "error");
   closeDialogs("#alert");
 
   const typeMap = {
     Full: getFullDataJson,
     Minimal: getMinimalDataJson,
     PackCells: getPackCellsDataJson,
-    GridCells: getGridCellsDataJson,
+    GridCells: getGridCellsDataJson
   };
 
   const mapData = typeMap[type]();
@@ -20,6 +21,62 @@ function exportToJson(type) {
   window.URL.revokeObjectURL(URL);
 }
 
+function getFullDataJson() {
+  TIME && console.time("getFullDataJson");
+
+  const info = getMapInfo();
+  const settings = getSettings();
+  const cells = getPackCellsData();
+  const vertices = getPackVerticesData();
+  const exportData = {info, settings, coords: mapCoordinates, cells, vertices, biomes: biomesData, notes, nameBases};
+
+  TIME && console.timeEnd("getFullDataJson");
+  return JSON.stringify(exportData);
+}
+
+function getMinimalDataJson() {
+  TIME && console.time("getMinimalDataJson");
+
+  const info = getMapInfo();
+  const settings = getSettings();
+  const packData = {
+    features: pack.features,
+    cultures: pack.cultures,
+    burgs: pack.burgs,
+    states: pack.states,
+    provinces: pack.provinces,
+    religions: pack.religions,
+    rivers: pack.rivers,
+    markers: pack.markers
+  };
+  const exportData = {info, settings, coords: mapCoordinates, pack: packData, biomes: biomesData, notes, nameBases};
+
+  TIME && console.timeEnd("getMinimalDataJson");
+  return JSON.stringify(exportData);
+}
+
+function getPackCellsDataJson() {
+  TIME && console.time("getCellsDataJson");
+
+  const info = getMapInfo();
+  const cells = getPackCellsData();
+  const exportData = {info, cells};
+
+  TIME && console.timeEnd("getCellsDataJson");
+  return JSON.stringify(exportData);
+}
+
+function getGridCellsDataJson() {
+  TIME && console.time("getGridCellsDataJson");
+
+  const info = getMapInfo();
+  const gridCells = getGridCellsData();
+  const exportData = {info, gridCells};
+
+  TIME && console.log("getGridCellsDataJson");
+  return JSON.stringify(exportData);
+}
+
 function getMapInfo() {
   const info = {
     version,
@@ -92,6 +149,7 @@ function getPackCellsData() {
     religion: Array.from(pack.cells.religion),
     province: Array.from(pack.cells.province)
   };
+
   const cellObjArr = [];
   {
     cellConverted.i.forEach(value => {
@@ -140,70 +198,28 @@ function getPackCellsData() {
   return cellsData;
 }
 
-//data only containing graphical appearance
-function getGridCellsData(){
+function getGridCellsData() {
   const gridData = {
+    cellsDesired: grid.cellsDesired,
     spacing: grid.spacing,
     cellsY: grid.cellsY,
     cellsX: grid.cellsX,
     points: grid.points,
     boundary: grid.boundary
-  }
-  return gridData
-}
-
-function getFullDataJson() {
-  TIME && console.time("getFullDataJson");
-
-  const info = getMapInfo();
-  const settings = getSettings();
-  const cells = getPackCellsData();
-  const exportData = {info, settings, coords: mapCoordinates, cells, biomes: biomesData, notes, nameBases};
-
-  TIME && console.timeEnd("getFullDataJson");
-  return JSON.stringify(exportData);
-}
-
-// data excluding cells
-function getMinimalDataJson() {
-  TIME && console.time("getMinimalDataJson");
-
-  const info = getMapInfo();
-  const settings = getSettings();
-  const packData = {
-    features: pack.features,
-    cultures: pack.cultures,
-    burgs: pack.burgs,
-    states: pack.states,
-    provinces: pack.provinces,
-    religions: pack.religions,
-    rivers: pack.rivers,
-    markers: pack.markers
   };
-  const exportData = {info, settings, coords: mapCoordinates, pack: packData, biomes: biomesData, notes, nameBases};
-
-  TIME && console.timeEnd("getMinimalDataJson");
-  return JSON.stringify(exportData);
+  return gridData;
 }
 
-function getPackCellsDataJson() {
-  TIME && console.time("getCellsDataJson");
-
-  const info = getMapInfo();
-  const cells = getPackCellsData();
-  const exportData = {info, cells};
-
-  TIME && console.timeEnd("getCellsDataJson");
-  return JSON.stringify(exportData);
+function getPackVerticesData() {
+  const {vertices} = pack;
+  const verticesNumber = vertices.p.length;
+  const verticesArray = new Array(verticesNumber);
+  for (let i = 0; i < verticesNumber; i++) {
+    verticesArray[i] = {
+      p: vertices.p[i],
+      v: vertices.v[i],
+      c: vertices.c[i]
+    };
+  }
+  return verticesArray;
 }
-
-function getGridCellsDataJson() {
-  TIME && console.time("getGridCellsDataJson");
-
-  const info = getMapInfo();
-  const gridCells = getGridCellsData()
-  const exportData = {info,gridCells};
-
-  TIME && console.log("getGridCellsDataJson");
-  return JSON.stringify(exportData);
-}

modules/dynamic/heightmap-selection.js

@@ -2,7 +2,7 @@ const initialSeed = generateSeed();
 let graph = getGraph(grid);
 
 appendStyleSheet();
-insertEditorHtml();
+insertHtml();
 addListeners();
 
 export function open() {
@@ -150,7 +150,7 @@ function appendStyleSheet() {
   document.head.appendChild(style);
 }
 
-function insertEditorHtml() {
+function insertHtml() {
   const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
     <div class="heightmap-selection">
       <section data-tip="Select heightmap template – template provides unique, but similar-looking maps on generation">

modules/dynamic/hierarchy-tree.js

@@ -0,0 +1,508 @@
+appendStyleSheet();
+insertHtml();
+addListeners();
+
+const MARGINS = {top: 10, right: 10, bottom: -5, left: 10};
+
+const handleZoom = () => viewbox.attr("transform", d3.event.transform);
+const zoom = d3.zoom().scaleExtent([0.2, 1.5]).on("zoom", handleZoom);
+
+// store old root for transitions
+let oldRoot;
+
+// define svg elements
+const svg = d3.select("#hierarchyTree > svg").call(zoom);
+const viewbox = svg.select("g#hierarchyTree_viewbox");
+const primaryLinks = viewbox.select("g#hierarchyTree_linksPrimary");
+const secondaryLinks = viewbox.select("g#hierarchyTree_linksSecondary");
+const nodes = viewbox.select("g#hierarchyTree_nodes");
+const dragLine = viewbox.select("path#hierarchyTree_dragLine");
+
+// properties
+let dataElements; // {i, name, type, origins}[], e.g. path.religions
+let validElements; // not-removed dataElements
+let onNodeEnter; // d3Data => void
+let onNodeLeave; // d3Data => void
+let getDescription; // dataElement => string
+let getShape; // dataElement => string;
+
+export function open(props) {
+  closeDialogs(".stable");
+
+  dataElements = props.data;
+  dataElements[0].origins = [null];
+  validElements = dataElements.filter(r => !r.removed);
+  if (validElements.length < 3) return tip(`Not enough ${props.type} to show hierarchy`, false, "error");
+
+  onNodeEnter = props.onNodeEnter;
+  onNodeLeave = props.onNodeLeave;
+  getDescription = props.getDescription;
+  getShape = props.getShape;
+
+  const root = getRoot();
+  const treeWidth = root.leaves().length * 50;
+  const treeHeight = root.height * 50;
+
+  const w = treeWidth - MARGINS.left - MARGINS.right;
+  const h = treeHeight + 30 - MARGINS.top - MARGINS.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  const width = minmax(treeWidth, 300, innerWidth * 0.75);
+  const height = minmax(treeHeight, 200, innerHeight * 0.75);
+
+  zoom.extent([Array(2).fill(0), [width, height]]);
+  svg.attr("viewBox", `0, 0, ${width}, ${height}`);
+
+  $("#hierarchyTree").dialog({
+    title: `${capitalize(props.type)} tree`,
+    position: {my: "left center", at: "left+10 center", of: "svg"},
+    width
+  });
+
+  renderTree(root, treeLayout);
+}
+
+function appendStyleSheet() {
+  const styles = /* css */ `
+
+    #hierarchyTree {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    #hierarchyTree > svg {
+      height: 100%;
+    }
+
+    #hierarchyTree_selectedOrigins > button {
+      margin: 0 2px;
+    }
+
+    .hierarchyTree_selectedOrigins {
+      margin-right: 15px;
+    }
+
+    .hierarchyTree_selectedOrigin {
+      border: 1px solid #aaa;
+      background: none;
+      padding: 1px 4px;
+    }
+
+    .hierarchyTree_selectedOrigin:hover {
+      border: 1px solid #333;
+    }
+
+    .hierarchyTree_selectedOrigin::after {
+      content: "✕";
+      margin-left: 8px;
+      color: #999;
+    }
+
+    .hierarchyTree_selectedOrigin:hover:after {
+      color: #333;
+    }
+
+    #hierarchyTree_originSelector {
+      display: none;
+    }
+
+    #hierarchyTree_originSelector > form > div {
+      padding: 0.3em;
+      margin: 1px 0;
+      border-radius: 1em;
+    }
+
+    #hierarchyTree_originSelector > form > div:hover {
+      background-color: #ddd;
+    }
+
+    #hierarchyTree_originSelector > form > div[checked] {
+      background-color: #c6d6d6;
+    }
+
+    #hierarchyTree_nodes > g > text {
+      pointer-events: none;
+      stroke: none;
+      font-size: 11px;
+    }
+
+    #hierarchyTree_nodes > g.selected {
+      stroke: #c13119;
+      stroke-width: 1;
+      cursor: move;
+    }
+
+    #hierarchyTree_dragLine {
+      marker-end: url(#end-arrow);
+      stroke: #333333;
+      stroke-dasharray: 5;
+      stroke-dashoffset: 1000;
+      animation: dash 80s linear backwards;
+    }
+  `;
+
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(styles));
+  document.head.appendChild(style);
+}
+
+function insertHtml() {
+  const html = /* html */ `<div id="hierarchyTree" style="overflow: hidden;">
+    <svg>
+      <g id="hierarchyTree_viewbox" style="text-anchor: middle; dominant-baseline: central">
+        <g transform="translate(10, -45)">
+          <g id="hierarchyTree_links" fill="none" stroke="#aaa">
+            <g id="hierarchyTree_linksPrimary"></g>
+            <g id="hierarchyTree_linksSecondary" stroke-dasharray="1"></g>
+          </g>
+          <g id="hierarchyTree_nodes"></g>
+          <path id="hierarchyTree_dragLine" path='' />
+        </g>
+      </g>
+    </svg>
+
+    <div id="hierarchyTree_details" class='chartInfo'>
+      <div id='hierarchyTree_infoLine' style="display: block">&#8205;</div>
+      <div id='hierarchyTree_selected' style="display: none">
+        <span><span id='hierarchyTree_selectedName'></span>. </span>
+        <span data-name="Type short name (abbreviation)">Abbreviation: <input id='hierarchyTree_selectedCode' type='text' maxlength='3' size='3' /></span>
+        <span>Origins: <span id='hierarchyTree_selectedOrigins'></span></span>
+        <button data-tip='Edit this node's origins' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedSelectButton'>Edit</button>
+        <button data-tip='Unselect this node' class="hierarchyTree_selectedButton" id='hierarchyTree_selectedCloseButton'>Unselect</button>
+      </div>
+    </div>
+    <div id="hierarchyTree_originSelector"></div>
+  </div>`;
+
+  byId("dialogs").insertAdjacentHTML("beforeend", html);
+}
+
+function addListeners() {}
+
+function getRoot() {
+  const root = d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => d.origins[0])(validElements);
+
+  oldRoot = root;
+  return root;
+}
+
+function getLinkKey(d) {
+  return `${d.source.id}-${d.target.id}`;
+}
+
+function getNodeKey(d) {
+  return d.id;
+}
+
+function 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}`;
+}
+
+function getSecondaryLinks(root) {
+  const nodes = root.descendants();
+  const links = [];
+
+  for (const node of nodes) {
+    const origins = node.data.origins;
+
+    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 shapesMap = {
+  undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
+  circle: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0",
+  square: "M-11,-11h22v22h-22Z",
+  hexagon: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z",
+  diamond: "M0,-14L14,0L0,14L-14,0Z",
+  concave: "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z",
+  octagon: "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z",
+  pentagon: "M0,-14l14,11l-6,14h-16l-6,-14Z"
+};
+
+const getSortIndex = node => {
+  const descendants = node.descendants();
+  const secondaryOrigins = descendants.map(({data}) => data.origins.slice(1)).flat();
+
+  if (secondaryOrigins.length === 0) return node.data.i;
+  return d3.mean(secondaryOrigins);
+};
+
+function renderTree(root, treeLayout) {
+  treeLayout(root.sort((a, b) => getSortIndex(a) - getSortIndex(b)));
+
+  primaryLinks.selectAll("path").data(root.links(), getLinkKey).join("path").attr("d", getLinkPath);
+  secondaryLinks.selectAll("path").data(getSecondaryLinks(root), getLinkKey).join("path").attr("d", getLinkPath);
+
+  const node = nodes
+    .selectAll("g")
+    .data(root.descendants(), getNodeKey)
+    .join("g")
+    .attr("data-id", d => d.data.i)
+    .attr("stroke", "#333")
+    .attr("transform", d => `translate(${d.x}, ${d.y})`)
+    .on("mouseenter", handleNoteEnter)
+    .on("mouseleave", handleNodeExit)
+    .on("click", selectElement)
+    .call(d3.drag().on("start", dragToReorigin));
+
+  node
+    .append("path")
+    .attr("d", ({data}) => shapesMap[getShape(data)])
+    .attr("fill", d => d.data.color || "#ffffff")
+    .attr("stroke-dasharray", d => (d.data.cells ? "none" : "1"));
+
+  node.append("text").text(d => d.data.code || "");
+}
+
+function mapCoords(newRoot, prevRoot) {
+  newRoot.x = prevRoot.x;
+  newRoot.y = prevRoot.y;
+
+  for (const node of newRoot.descendants()) {
+    const prevNode = prevRoot.descendants().find(n => n.data.i === node.data.i);
+    if (prevNode) {
+      node.x = prevNode.x;
+      node.y = prevNode.y;
+    }
+  }
+}
+
+function updateTree() {
+  const prevRoot = oldRoot;
+  const root = getRoot();
+  mapCoords(root, prevRoot);
+
+  const linksUpdateDuration = 50;
+  const moveDuration = 1000;
+
+  // old layout: update links at old nodes positions
+  const linkEnter = enter =>
+    enter
+      .append("path")
+      .attr("d", getLinkPath)
+      .attr("opacity", 0)
+      .call(enter => enter.transition().duration(linksUpdateDuration).attr("opacity", 1));
+
+  const linkUpdate = update =>
+    update.call(update => update.transition().duration(linksUpdateDuration).attr("d", getLinkPath));
+
+  const linkExit = exit =>
+    exit.call(exit => exit.transition().duration(linksUpdateDuration).attr("opacity", 0).remove());
+
+  primaryLinks.selectAll("path").data(root.links(), getLinkKey).join(linkEnter, linkUpdate, linkExit);
+  secondaryLinks.selectAll("path").data(getSecondaryLinks(root), getLinkKey).join(linkEnter, linkUpdate, linkExit);
+
+  // new layout: move nodes with links to new positions
+  const treeWidth = root.leaves().length * 50;
+  const treeHeight = root.height * 50;
+
+  const w = treeWidth - MARGINS.left - MARGINS.right;
+  const h = treeHeight + 30 - MARGINS.top - MARGINS.bottom;
+
+  const treeLayout = d3.tree().size([w, h]);
+  treeLayout(root.sort((a, b) => getSortIndex(a) - getSortIndex(b)));
+
+  primaryLinks
+    .selectAll("path")
+    .data(root.links(), getLinkKey)
+    .transition()
+    .duration(moveDuration)
+    .delay(linksUpdateDuration)
+    .attr("d", getLinkPath);
+
+  secondaryLinks
+    .selectAll("path")
+    .data(getSecondaryLinks(root), getLinkKey)
+    .transition()
+    .duration(moveDuration)
+    .delay(linksUpdateDuration)
+    .attr("d", getLinkPath);
+
+  nodes
+    .selectAll("g")
+    .data(root.descendants(), getNodeKey)
+    .transition()
+    .delay(linksUpdateDuration)
+    .duration(moveDuration)
+    .attr("transform", d => `translate(${d.x},${d.y})`);
+}
+
+function selectElement(d) {
+  const dataElement = d.data;
+  if (d.id == 0) return;
+
+  const node = nodes.select(`g[data-id="${d.id}"]`);
+  nodes.selectAll("g").style("outline", "none");
+  node.style("outline", "1px solid #c13119");
+
+  byId("hierarchyTree_selected").style.display = "block";
+  byId("hierarchyTree_infoLine").style.display = "none";
+
+  byId("hierarchyTree_selectedName").innerText = dataElement.name;
+  byId("hierarchyTree_selectedCode").value = dataElement.code;
+
+  byId("hierarchyTree_selectedCode").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);
+
+    node.select("text").text(this.value);
+    dataElement.code = this.value;
+  };
+
+  const createOriginButtons = () => {
+    byId("hierarchyTree_selectedOrigins").innerHTML = dataElement.origins
+      .filter(origin => origin)
+      .map((origin, index) => {
+        const {name, code} = validElements.find(r => r.i === origin) || {};
+        const type = index ? "Secondary" : "Primary";
+        const tip = `${type} origin: ${name}. Click to remove link to that origin`;
+        return `<button data-id="${origin}" class="hierarchyTree_selectedButton hierarchyTree_selectedOrigin" data-tip="${tip}">${code}</button>`;
+      })
+      .join("");
+
+    byId("hierarchyTree_selectedOrigins").onclick = event => {
+      const target = event.target;
+      if (target.tagName !== "BUTTON") return;
+      const origin = Number(target.dataset.id);
+      const filtered = dataElement.origins.filter(elementOrigin => elementOrigin !== origin);
+      dataElement.origins = filtered.length ? filtered : [0];
+      target.remove();
+      updateTree();
+    };
+  };
+
+  createOriginButtons();
+
+  byId("hierarchyTree_selectedSelectButton").onclick = () => {
+    const origins = dataElement.origins;
+
+    const descendants = d.descendants().map(d => d.data.i);
+    const selectableElements = validElements.filter(({i}) => !descendants.includes(i));
+
+    const selectableElementsHtml = selectableElements.map(({i, name, code, color}) => {
+      const isPrimary = origins[0] === i ? "checked" : "";
+      const isChecked = origins.includes(i) ? "checked" : "";
+
+      if (i === 0) {
+        return /*html*/ `
+        <div ${isChecked}>
+          <input data-tip="Set as primary origin" type="radio" name="primary" value="${i}" ${isPrimary} />
+          Top level
+        </div>
+      `;
+      }
+
+      return /*html*/ `
+        <div ${isChecked}>
+          <input data-tip="Set as primary origin" type="radio" name="primary" value="${i}" ${isPrimary} />
+          <input data-id="${i}" id="selectElementOrigin${i}" class="checkbox" type="checkbox" ${isChecked} />
+          <label data-tip="Check to set as a secondary origin" for="selectElementOrigin${i}" class="checkbox-label">
+            <fill-box fill="${color}" size=".8em" disabled></fill-box>
+            ${code}: ${name}
+          </label>
+        </div>
+      `;
+    });
+
+    byId("hierarchyTree_originSelector").innerHTML = /*html*/ `
+      <form style="max-height: 35vh">
+        ${selectableElementsHtml.join("")}
+      </form>
+    `;
+
+    $("#hierarchyTree_originSelector").dialog({
+      title: "Select origins",
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {
+        Select: () => {
+          $("#hierarchyTree_originSelector").dialog("close");
+          const $selector = byId("hierarchyTree_originSelector");
+          const selectedRadio = $selector.querySelector("input[type='radio']:checked");
+          const selectedCheckboxes = $selector.querySelectorAll("input[type='checkbox']:checked");
+
+          const primary = selectedRadio ? Number(selectedRadio.value) : 0;
+          const secondary = Array.from(selectedCheckboxes)
+            .map(input => Number(input.dataset.id))
+            .filter(origin => origin !== primary);
+
+          dataElement.origins = [primary, ...secondary];
+
+          updateTree();
+          createOriginButtons();
+        },
+        Cancel: () => {
+          $("#hierarchyTree_originSelector").dialog("close");
+        }
+      }
+    });
+  };
+
+  byId("hierarchyTree_selectedCloseButton").onclick = () => {
+    node.style("outline", "none");
+    byId("hierarchyTree_selected").style.display = "none";
+    byId("hierarchyTree_infoLine").style.display = "block";
+  };
+}
+
+function handleNoteEnter(d) {
+  if (d.depth === 0) return;
+
+  this.classList.add("selected");
+  onNodeEnter(d);
+
+  byId("hierarchyTree_infoLine").innerText = getDescription(d.data);
+  tip("Drag to other node to add parent, click to edit");
+}
+
+function handleNodeExit(d) {
+  this.classList.remove("selected");
+  onNodeLeave(d);
+
+  byId("hierarchyTree_infoLine").innerHTML = "&#8205;";
+  tip("");
+}
+
+function dragToReorigin(from) {
+  if (from.id == 0) return;
+
+  dragLine.attr("d", `M${from.x},${from.y}L${from.x},${from.y}`);
+
+  d3.event.on("drag", () => {
+    dragLine.attr("d", `M${from.x},${from.y}L${d3.event.x},${d3.event.y}`);
+  });
+
+  d3.event.on("end", function () {
+    dragLine.attr("d", "");
+    const selected = nodes.select("g.selected");
+    if (!selected.size()) return;
+
+    const elementId = from.data.i;
+    const newOrigin = selected.datum().data.i;
+    if (elementId === newOrigin) return; // dragged to itself
+    if (from.data.origins.includes(newOrigin)) return; // already a child of the selected node
+    if (from.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
+
+    const element = dataElements.find(({i}) => i === elementId);
+    if (!element) return;
+
+    if (element.origins[0] === 0) element.origins = [];
+    element.origins.push(newOrigin);
+
+    selectElement(from);
+    updateTree();
+  });
+}

modules/io/cloud.js

@@ -73,7 +73,13 @@ window.Cloud = (function () {
 
     async list() {
       const resp = await this.call("filesListFolder", {path: ""});
-      return resp.result.entries.map(e => ({name: e.name, path: e.path_lower}));
+      const filesData = resp.result.entries.map(({name, client_modified, size, path_lower}) => ({
+        name: name,
+        updated: client_modified,
+        size,
+        path: path_lower
+      }));
+      return filesData.filter(({size}) => size).reverse();
     },
 
     auth() {
@@ -117,7 +123,13 @@ window.Cloud = (function () {
       if (sharedLinks.result.links.length) return resp.result.links[0].url;
 
       // create new shared link
-      const settings = {require_password: false, audience: "public", access: "viewer", requested_visibility: "public", allow_download: true};
+      const settings = {
+        require_password: false,
+        audience: "public",
+        access: "viewer",
+        requested_visibility: "public",
+        allow_download: true
+      };
       const resp = await this.call("sharingCreateSharedLinkWithSettings", {path, settings});
       DEBUG && console.log("Dropbox link object:", resp.result);
       return resp.result.url;

modules/io/export.js

@@ -75,7 +75,8 @@ async function saveTiles() {
   return new Promise(async (resolve, reject) => {
     // download schema
     const urlSchema = await getMapURL("tiles", {debug: true, fullMap: true});
-    const zip = new JSZip();
+    await import("../../libs/jszip.min.js");
+    const zip = new window.JSZip();
 
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");

modules/io/load.js

@@ -28,8 +28,7 @@ async function createSharableDropboxLink() {
   try {
     url = await Cloud.providers.dropbox.getLink(mapFile);
   } catch {
-    tip("Dropbox API error. Can not create link.", true, "error", 2000);
-    return;
+    return tip("Dropbox API error. Can not create link.", true, "error", 2000);
   }
 
   const fmg = window.location.href.split("?")[0];
@@ -244,7 +243,10 @@ async function parseLoadedData(data) {
         const usedFonts = JSON.parse(data[34]);
         usedFonts.forEach(usedFont => {
           const {family: usedFamily, unicodeRange: usedRange, variant: usedVariant} = usedFont;
-          const defaultFont = fonts.find(({family, unicodeRange, variant}) => family === usedFamily && unicodeRange === usedRange && variant === usedVariant);
+          const defaultFont = fonts.find(
+            ({family, unicodeRange, variant}) =>
+              family === usedFamily && unicodeRange === usedRange && variant === usedVariant
+          );
           if (!defaultFont) fonts.push(usedFont);
           declareFont(usedFont);
         });
@@ -421,13 +423,15 @@ async function parseLoadedData(data) {
 
     void (function restoreEvents() {
       scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
-      legend.on("mousemove", () => tip("Drag to change the position. Click to hide the legend")).on("click", () => clearLegend());
+      legend
+        .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
+        .on("click", () => clearLegend());
     })();
 
     {
       // dynamically import and run auto-udpdate script
       const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=01062022");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=06062022");
       resolveVersionConflicts(versionNumber);
     }
 
@@ -435,7 +439,10 @@ async function parseLoadedData(data) {
       const cells = pack.cells;
 
       if (pack.cells.i.length !== pack.cells.state.length) {
-        ERROR && console.error("Striping issue. Map data is corrupted. The only solution is to edit the heightmap in erase mode");
+        ERROR &&
+          console.error(
+            "Striping issue. Map data is corrupted. The only solution is to edit the heightmap in erase mode"
+          );
       }
 
       const invalidStates = [...new Set(cells.state)].filter(s => !pack.states[s] || pack.states[s].removed);
@@ -445,7 +452,9 @@ async function parseLoadedData(data) {
         ERROR && console.error("Data Integrity Check. Invalid state", s, "is assigned to cells", invalidCells);
       });
 
-      const invalidProvinces = [...new Set(cells.province)].filter(p => p && (!pack.provinces[p] || pack.provinces[p].removed));
+      const invalidProvinces = [...new Set(cells.province)].filter(
+        p => p && (!pack.provinces[p] || pack.provinces[p].removed)
+      );
       invalidProvinces.forEach(p => {
         const invalidCells = cells.i.filter(i => cells.province[i] === p);
         invalidCells.forEach(i => (cells.province[i] = 0));
@@ -459,7 +468,9 @@ async function parseLoadedData(data) {
         ERROR && console.error("Data Integrity Check. Invalid culture", c, "is assigned to cells", invalidCells);
       });
 
-      const invalidReligions = [...new Set(cells.religion)].filter(r => !pack.religions[r] || pack.religions[r].removed);
+      const invalidReligions = [...new Set(cells.religion)].filter(
+        r => !pack.religions[r] || pack.religions[r].removed
+      );
       invalidReligions.forEach(r => {
         const invalidCells = cells.i.filter(i => cells.religion[i] === r);
         invalidCells.forEach(i => (cells.religion[i] = 0));
@@ -488,23 +499,28 @@ async function parseLoadedData(data) {
         ERROR && console.error("Data Integrity Check. Invalid river", r, "is assigned to cells", invalidCells);
       });
 
-      pack.burgs.forEach(b => {
-        if (!b.i || b.removed) return;
-        if (b.port < 0) {
-          ERROR && console.error("Data Integrity Check. Burg", b.i, "has invalid port value", b.port);
-          b.port = 0;
+      pack.burgs.forEach(burg => {
+        if (!burg.i || burg.removed) return;
+        if (burg.port < 0) {
+          ERROR && console.error("Data Integrity Check. Burg", burg.i, "has invalid port value", burg.port);
+          burg.port = 0;
         }
 
-        if (b.cell >= cells.i.length) {
-          ERROR && console.error("Data Integrity Check. Burg", b.i, "is linked to invalid cell", b.cell);
-          b.cell = findCell(b.x, b.y);
-          cells.i.filter(i => cells.burg[i] === b.i).forEach(i => (cells.burg[i] = 0));
-          cells.burg[b.cell] = b.i;
+        if (burg.cell >= cells.i.length) {
+          ERROR && console.error("Data Integrity Check. Burg", burg.i, "is linked to invalid cell", burg.cell);
+          burg.cell = findCell(burg.x, burg.y);
+          cells.i.filter(i => cells.burg[i] === burg.i).forEach(i => (cells.burg[i] = 0));
+          cells.burg[burg.cell] = burg.i;
         }
 
-        if (b.state && !pack.states[b.state]) {
-          ERROR && console.error("Data Integrity Check. Burg", b.i, "is linked to invalid state", b.state);
-          b.state = 0;
+        if (burg.state && !pack.states[burg.state]) {
+          ERROR && console.error("Data Integrity Check. Burg", burg.i, "is linked to invalid state", burg.state);
+          burg.state = 0;
+        }
+
+        if (burg.state === undefined) {
+          ERROR && console.error("Data Integrity Check. Burg", burg.i, "has no state data");
+          burg.state = 0;
         }
       });
 

modules/religions-generator.js

@@ -277,7 +277,24 @@ window.Religions = (function () {
       "Word",
       "World"
     ],
-    color: ["Amber", "Black", "Blue", "Bright", "Brown", "Dark", "Golden", "Green", "Grey", "Light", "Orange", "Pink", "Purple", "Red", "White", "Yellow"]
+    color: [
+      "Amber",
+      "Black",
+      "Blue",
+      "Bright",
+      "Brown",
+      "Dark",
+      "Golden",
+      "Green",
+      "Grey",
+      "Light",
+      "Orange",
+      "Pink",
+      "Purple",
+      "Red",
+      "White",
+      "Yellow"
+    ]
   };
 
   const forms = {
@@ -311,7 +328,18 @@ window.Religions = (function () {
     Cult: {Cult: 4, Sect: 4, Arcanum: 1, Coterie: 1, Order: 1, Worship: 1},
     "Dark Cult": {Cult: 2, Sect: 2, Blasphemy: 1, Circle: 1, Coven: 1, Idols: 1, Occultism: 1},
 
-    Heresy: {Heresy: 3, Sect: 2, Apostates: 1, Brotherhood: 1, Circle: 1, Dissent: 1, Dissenters: 1, Iconoclasm: 1, Schism: 1, Society: 1}
+    Heresy: {
+      Heresy: 3,
+      Sect: 2,
+      Apostates: 1,
+      Brotherhood: 1,
+      Circle: 1,
+      Dissent: 1,
+      Dissenters: 1,
+      Iconoclasm: 1,
+      Schism: 1,
+      Society: 1
+    }
   };
 
   const generate = function () {
@@ -324,25 +352,27 @@ window.Religions = (function () {
 
     // add folk religions
     pack.cultures.forEach(c => {
-      if (!c.i) {
-        religions.push({i: 0, name: "No religion"});
-        return;
-      }
+      if (!c.i) return religions.push({i: 0, name: "No religion"});
+
       if (c.removed) {
-        religions.push({i: c.i, name: "Extinct religion for " + c.name, color: getMixedColor(c.color, 0.1, 0), removed: true});
+        religions.push({
+          i: c.i,
+          name: "Extinct religion for " + c.name,
+          color: getMixedColor(c.color, 0.1, 0),
+          removed: true
+        });
         return;
       }
+
       const form = rw(forms.Folk);
       const name = c.name + " " + rw(types[form]);
       const deity = form === "Animism" ? null : getDeityName(c.i);
       const color = getMixedColor(c.color, 0.1, 0); // `url(#hatch${rand(8,13)})`;
-      religions.push({i: c.i, name, color, culture: c.i, type: "Folk", form, deity, center: c.center, origin: 0});
+      religions.push({i: c.i, name, color, culture: c.i, type: "Folk", form, deity, center: c.center, origins: [0]});
     });
 
-    if (religionsInput.value == 0 || pack.cultures.length < 2) {
-      religions.filter(r => r.i).forEach(r => (r.code = abbreviate(r.name)));
-      return;
-    }
+    if (religionsInput.value == 0 || pack.cultures.length < 2)
+      return religions.filter(r => r.i).forEach(r => (r.code = abbreviate(r.name)));
 
     const burgs = pack.burgs.filter(b => b.i && !b.removed);
     const sorted =
@@ -354,6 +384,13 @@ window.Religions = (function () {
     const cultsCount = Math.floor((rand(10, 40) / 100) * religionsInput.value);
     const count = +religionsInput.value - cultsCount + religions.length;
 
+    function getReligionsInRadius({x, y, r, max}) {
+      if (max === 0) return [0];
+      const cellsInRadius = findAll(x, y, r);
+      const religions = unique(cellsInRadius.map(i => cells.religion[i]).filter(r => r));
+      return religions.length ? religions.slice(0, max) : [0];
+    }
+
     // generate organized religions
     for (let i = 0; religions.length < count && i < 1000; i++) {
       let center = sorted[biased(0, sorted.length - 1, 5)]; // religion center
@@ -369,21 +406,36 @@ window.Religions = (function () {
       if (expansion === "state" && Math.random() > 0.5) center = states[state].center;
       if (expansion === "culture" && Math.random() > 0.5) center = cultures[culture].center;
 
-      if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c])) center = cells.c[center].find(c => cells.burg[c]);
-      const x = cells.p[center][0],
-        y = cells.p[center][1];
+      if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c]))
+        center = cells.c[center].find(c => cells.burg[c]);
+      const [x, y] = cells.p[center];
 
       const s = spacing * gauss(1, 0.3, 0.2, 2, 2); // randomize to make the placement not uniform
       if (religionsTree.find(x, y, s) !== undefined) continue; // to close to existing religion
 
       // add "Old" to name of the folk religion on this culture
-      const folk = religions.find(r => r.culture === culture && r.type === "Folk");
+      const isFolkBased = expansion === "culture" || P(0.5);
+      const folk = isFolkBased && religions.find(r => r.culture === culture && r.type === "Folk");
       if (folk && expansion === "culture" && folk.name.slice(0, 3) !== "Old") folk.name = "Old " + folk.name;
-      const origin = folk ? folk.i : 0;
 
+      const origins = folk ? [folk.i] : getReligionsInRadius({x, y, r: 150 / count, max: 2});
       const expansionism = rand(3, 8);
-      const color = getMixedColor(religions[origin].color, 0.3, 0); // `url(#hatch${rand(0,5)})`;
-      religions.push({i: religions.length, name, color, culture, type: "Organized", form, deity, expansion, expansionism, center, origin});
+      const baseColor = religions[culture]?.color || states[state]?.color || getRandomColor();
+      const color = getMixedColor(baseColor, 0.3, 0);
+
+      religions.push({
+        i: religions.length,
+        name,
+        color,
+        culture,
+        type: "Organized",
+        form,
+        deity,
+        expansion,
+        expansionism,
+        center,
+        origins
+      });
       religionsTree.add([x, y]);
     }
 
@@ -391,23 +443,34 @@ window.Religions = (function () {
     for (let i = 0; religions.length < count + cultsCount && i < 1000; i++) {
       const form = rw(forms.Cult);
       let center = sorted[biased(0, sorted.length - 1, 1)]; // religion center
-      if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c])) center = cells.c[center].find(c => cells.burg[c]);
-      const x = cells.p[center][0],
-        y = cells.p[center][1];
+      if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c]))
+        center = cells.c[center].find(c => cells.burg[c]);
+      const [x, y] = cells.p[center];
 
       const s = spacing * gauss(2, 0.3, 1, 3, 2); // randomize to make the placement not uniform
       if (religionsTree.find(x, y, s) !== undefined) continue; // to close to existing religion
 
       const culture = cells.culture[center];
-      const folk = religions.find(r => r.culture === culture && r.type === "Folk");
-      const origin = folk ? folk.i : 0;
+      const origins = getReligionsInRadius({x, y, r: 300 / count, max: rand(0, 4)});
+
       const deity = getDeityName(culture);
       const name = getCultName(form, center);
       const expansionism = gauss(1.1, 0.5, 0, 5);
       const color = getMixedColor(cultures[culture].color, 0.5, 0); // "url(#hatch7)";
-      religions.push({i: religions.length, name, color, culture, type: "Cult", form, deity, expansion: "global", expansionism, center, origin});
+      religions.push({
+        i: religions.length,
+        name,
+        color,
+        culture,
+        type: "Cult",
+        form,
+        deity,
+        expansion: "global",
+        expansionism,
+        center,
+        origins
+      });
       religionsTree.add([x, y]);
-      //debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 2).attr("fill", "red");
     }
 
     expandReligions();
@@ -419,11 +482,13 @@ window.Religions = (function () {
         if (r.expansionism < 3) return;
         const count = gauss(0, 1, 0, 3);
         for (let i = 0; i < count; i++) {
-          let center = ra(cells.i.filter(i => cells.religion[i] === r.i && cells.c[i].some(c => cells.religion[c] !== r.i)));
+          let center = ra(
+            cells.i.filter(i => cells.religion[i] === r.i && cells.c[i].some(c => cells.religion[c] !== r.i))
+          );
           if (!center) continue;
-          if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c])) center = cells.c[center].find(c => cells.burg[c]);
-          const x = cells.p[center][0],
-            y = cells.p[center][1];
+          if (!cells.burg[center] && cells.c[center].some(c => cells.burg[c]))
+            center = cells.c[center].find(c => cells.burg[c]);
+          const [x, y] = cells.p[center];
           if (religionsTree.find(x, y, spacing / 10) !== undefined) continue; // to close to other
 
           const culture = cells.culture[center];
@@ -441,7 +506,7 @@ window.Religions = (function () {
             expansion: "global",
             expansionism,
             center,
-            origin: r.i
+            origins: [r.i]
           });
           religionsTree.add([x, y]);
         }
@@ -454,16 +519,17 @@ window.Religions = (function () {
   };
 
   const add = function (center) {
-    const cells = pack.cells,
-      religions = pack.religions;
-    const r = cells.religion[center];
-    const i = religions.length;
-    const culture = cells.culture[center];
-    const color = getMixedColor(religions[r].color, 0.3, 0);
+    const {cells, religions} = pack;
+    const religionId = cells.religion[center];
 
-    const type = religions[r].type === "Organized" ? rw({Organized: 4, Cult: 1, Heresy: 2}) : rw({Organized: 5, Cult: 2});
+    const culture = cells.culture[center];
+    const color = getMixedColor(religions[religionId].color, 0.3, 0);
+
+    const type =
+      religions[religionId].type === "Organized" ? rw({Organized: 4, Cult: 1, Heresy: 2}) : rw({Organized: 5, Cult: 2});
     const form = rw(forms[type]);
-    const deity = type === "Heresy" ? religions[r].deity : form === "Non-theism" ? null : getDeityName(culture);
+    const deity =
+      type === "Heresy" ? religions[religionId].deity : form === "Non-theism" ? null : getDeityName(culture);
 
     let name, expansion;
     if (type === "Organized") [name, expansion] = getReligionName(form, deity, center);
@@ -471,11 +537,14 @@ window.Religions = (function () {
       name = getCultName(form, center);
       expansion = "global";
     }
-    const formName = type === "Heresy" ? religions[r].form : form;
+
+    const formName = type === "Heresy" ? religions[religionId].form : form;
     const code = abbreviate(
       name,
       religions.map(r => r.code)
     );
+
+    const i = religions.length;
     religions.push({
       i,
       name,
@@ -491,7 +560,7 @@ window.Religions = (function () {
       area: 0,
       rural: 0,
       urban: 0,
-      origin: r,
+      origins: [religionId],
       code
     });
     cells.religion[center] = i;
@@ -534,7 +603,9 @@ window.Religions = (function () {
         const populationCost = Math.max(rn(popCost - cells.pop[e]), 0);
         const heightCost = Math.max(cells.h[e], 20) - 20;
         const waterCost = cells.h[e] < 20 ? (cells.road[e] ? 50 : 1000) : 0;
-        const totalCost = p + (cultureCost + stateCost + biomeCost + populationCost + heightCost + waterCost) / religions[r].expansionism;
+        const totalCost =
+          p +
+          (cultureCost + stateCost + biomeCost + populationCost + heightCost + waterCost) / religions[r].expansionism;
         if (totalCost > neutral) return;
 
         if (!cost[e] || totalCost < cost[e]) {
@@ -576,7 +647,8 @@ window.Religions = (function () {
         const biomeCost = cells.road[e] ? 0 : biomesData.cost[cells.biome[e]];
         const heightCost = Math.max(cells.h[e], 20) - 20;
         const waterCost = cells.h[e] < 20 ? (cells.road[e] ? 50 : 1000) : 0;
-        const totalCost = p + (religionCost + biomeCost + heightCost + waterCost) / Math.max(religions[r].expansionism, 0.1);
+        const totalCost =
+          p + (religionCost + biomeCost + heightCost + waterCost) / Math.max(religions[r].expansionism, 0.1);
 
         if (totalCost > neutral) return;
 
@@ -641,35 +713,34 @@ window.Religions = (function () {
     if (a === "Being + of + Genitive") return ra(base.being) + " of " + ra(base.genitive);
     if (a === "Being + of the + Genitive") return ra(base.being) + " of the " + ra(base.theGenitive);
     if (a === "Animal + of + Genitive") return ra(base.animal) + " of " + ra(base.genitive);
-    if (a === "Adjective + Being + of + Genitive") return ra(base.adjective) + " " + ra(base.being) + " of " + ra(base.genitive);
-    if (a === "Adjective + Animal + of + Genitive") return ra(base.adjective) + " " + ra(base.animal) + " of " + ra(base.genitive);
+    if (a === "Adjective + Being + of + Genitive")
+      return ra(base.adjective) + " " + ra(base.being) + " of " + ra(base.genitive);
+    if (a === "Adjective + Animal + of + Genitive")
+      return ra(base.adjective) + " " + ra(base.animal) + " of " + ra(base.genitive);
   }
 
   function getReligionName(form, deity, center) {
-    const cells = pack.cells;
-    const random = function () {
-      return Names.getCulture(cells.culture[center], null, null, "", 0);
-    };
-    const type = function () {
-      return rw(types[form]);
-    };
-    const supreme = function () {
-      return deity.split(/[ ,]+/)[0];
-    };
-    const place = function (adj) {
-      const base = cells.burg[center] ? pack.burgs[cells.burg[center]].name : pack.states[cells.state[center]].name;
+    const {cells, cultures, burgs, states} = pack;
+
+    const random = () => Names.getCulture(cells.culture[center], null, null, "", 0);
+    const type = () => rw(types[form]);
+    const supreme = () => deity.split(/[ ,]+/)[0];
+    const culture = () => cultures[cells.culture[center]].name;
+    const place = adj => {
+      const burgId = cells.burg[center];
+      const stateId = cells.state[center];
+
+      const base = burgId ? burgs[burgId].name : states[stateId].name;
       let name = trimVowels(base.split(/[ ,]+/)[0]);
       return adj ? getAdjective(name) : name;
     };
-    const culture = function () {
-      return pack.cultures[cells.culture[center]].name;
-    };
 
     const m = rw(methods);
     if (m === "Random + type") return [random() + " " + type(), "global"];
     if (m === "Random + ism") return [trimVowels(random()) + "ism", "global"];
     if (m === "Supreme + ism" && deity) return [trimVowels(supreme()) + "ism", "global"];
-    if (m === "Faith of + Supreme" && deity) return [ra(["Faith", "Way", "Path", "Word", "Witnesses"]) + " of " + supreme(), "global"];
+    if (m === "Faith of + Supreme" && deity)
+      return [ra(["Faith", "Way", "Path", "Word", "Witnesses"]) + " of " + supreme(), "global"];
     if (m === "Place + ism") return [place() + "ism", "state"];
     if (m === "Culture + ism") return [trimVowels(culture()) + "ism", "culture"];
     if (m === "Place + ian + type") return [place("adj") + " " + type(), "state"];

modules/submap.js

@@ -5,7 +5,7 @@ main function: resample(options);
 */
 
 window.Submap = (function () {
-  const isWater = (map, id) => (map.grid.cells.h[map.pack.cells.g[id]] < 20 ? true : false);
+  const isWater = (pack, id) => pack.cells.h[id] < 20;
   const inMap = (x, y) => x > 0 && x < graphWidth && y > 0 && y < graphHeight;
 
   function resample(parentMap, options) {
@@ -126,7 +126,6 @@ window.Submap = (function () {
     // generatePrecipitation();
     stage("Cell cleanup.");
     reGraph();
-    const childMap = {grid, pack};
 
     // remove misclassified cells
     stage("Define coastline.");
@@ -180,9 +179,8 @@ window.Submap = (function () {
         let d = Infinity;
         oldChildren.forEach(oid => {
           // this should be always true, unless some algo modded the height!
-          if (isWater(parentMap, oid) !== isWater(childMap, id)) {
+          if (isWater(parentMap.pack, oid) !== isWater(pack, id)) {
             console.warn(`cell sank because of addLakesInDepressions: ${oid}`);
-            return;
           }
           const [oldpx, oldpy] = oldCells.p[oid];
           const nd = distance(projection(oldpx, oldpy));
@@ -197,7 +195,7 @@ window.Submap = (function () {
         }
       }
 
-      if (isWater(childMap, id) !== isWater(parentMap, oldid)) {
+      if (isWater(pack, id) !== isWater(parentMap.pack, oldid)) {
         WARN && console.warn("Type discrepancy detected:", id, oldid, `${pack.cells.t[id]} != ${oldCells.t[oldid]}`);
       }
 
@@ -360,7 +358,6 @@ window.Submap = (function () {
 
   function copyBurgs(parentMap, projection, options) {
     const cells = pack.cells;
-    const childMap = {grid, pack};
     pack.burgs = parentMap.pack.burgs;
 
     // remap burgs to the best new cell
@@ -386,7 +383,7 @@ window.Submap = (function () {
         // already occupied
         searchFunc = findNearest(isFreeLand, _ => true, 3);
 
-      if (isWater(childMap, cityCell) || b.port)
+      if (isWater(pack, cityCell) || b.port)
         // burg is in water or port
         searchFunc = findNearest(isFreeLand, nearCoast, 6);
 
@@ -402,7 +399,7 @@ window.Submap = (function () {
         [b.x, b.y] = b.port ? getMiddlePoint(newCell, neighbor) : cells.p[newCell];
         if (b.port) b.port = cells.f[neighbor]; // copy feature number
         b.cell = newCell;
-        if (b.port && !isWater(childMap, neighbor)) console.error("betrayal! negihbor must be water!", b);
+        if (b.port && !isWater(pack, neighbor)) console.error("betrayal! negihbor must be water!", b);
       } else {
         b.cell = cityCell;
       }

modules/ui/diplomacy-editor.js

@@ -1,7 +1,8 @@
 "use strict";
 function editDiplomacy() {
   if (customization) return;
-  if (pack.states.filter(s => s.i && !s.removed).length < 2) return tip("There should be at least 2 states to edit the diplomacy", false, "error");
+  if (pack.states.filter(s => s.i && !s.removed).length < 2)
+    return tip("There should be at least 2 states to edit the diplomacy", false, "error");
 
   const body = document.getElementById("diplomacyBodySection");
 
@@ -14,15 +15,43 @@ function editDiplomacy() {
   if (layerIsOn("toggleReligions")) toggleReligions();
 
   const relations = {
-    Ally: {inText: "is an ally of", color: "#00b300", tip: "Allies formed a defensive pact and protect each other in case of third party aggression"},
-    Friendly: {inText: "is friendly to", color: "#d4f8aa", tip: "State is friendly to anouther state when they share some common interests"},
-    Neutral: {inText: "is neutral to", color: "#edeee8", tip: "Neutral means states relations are neither positive nor negative"},
-    Suspicion: {inText: "is suspicious of", color: "#eeafaa", tip: "Suspicion means state has a cautious distrust of another state"},
+    Ally: {
+      inText: "is an ally of",
+      color: "#00b300",
+      tip: "Allies formed a defensive pact and protect each other in case of third party aggression"
+    },
+    Friendly: {
+      inText: "is friendly to",
+      color: "#d4f8aa",
+      tip: "State is friendly to anouther state when they share some common interests"
+    },
+    Neutral: {
+      inText: "is neutral to",
+      color: "#edeee8",
+      tip: "Neutral means states relations are neither positive nor negative"
+    },
+    Suspicion: {
+      inText: "is suspicious of",
+      color: "#eeafaa",
+      tip: "Suspicion means state has a cautious distrust of another state"
+    },
     Enemy: {inText: "is at war with", color: "#e64b40", tip: "Enemies are states at war with each other"},
-    Unknown: {inText: "does not know about", color: "#a9a9a9", tip: "Relations are unknown if states do not have enough information about each other"},
-    Rival: {inText: "is a rival of", color: "#ad5a1f", tip: "Rivalry is a state of competing for dominance in the region"},
+    Unknown: {
+      inText: "does not know about",
+      color: "#a9a9a9",
+      tip: "Relations are unknown if states do not have enough information about each other"
+    },
+    Rival: {
+      inText: "is a rival of",
+      color: "#ad5a1f",
+      tip: "Rivalry is a state of competing for dominance in the region"
+    },
     Vassal: {inText: "is a vassal of", color: "#87CEFA", tip: "Vassal is a state having obligation to its suzerain"},
-    Suzerain: {inText: "is suzerain to", color: "#00008B", tip: "Suzerain is a state having some control over its vassals"}
+    Suzerain: {
+      inText: "is suzerain to",
+      color: "#00008B",
+      tip: "Suzerain is a state having some control over its vassals"
+    }
   };
 
   refreshDiplomacyEditor();
@@ -229,15 +258,22 @@ function editDiplomacy() {
     const objectName = states[objectId].name;
 
     states[subjectId].diplomacy[objectId] = newRelation;
-    states[objectId].diplomacy[subjectId] = newRelation === "Vassal" ? "Suzerain" : newRelation === "Suzerain" ? "Vassal" : newRelation;
+    states[objectId].diplomacy[subjectId] =
+      newRelation === "Vassal" ? "Suzerain" : newRelation === "Suzerain" ? "Vassal" : newRelation;
 
     // update relation history
-    const change = () => [`Relations change`, `${subjectName}-${getAdjective(objectName)} relations changed to ${newRelation.toLowerCase()}`];
+    const change = () => [
+      `Relations change`,
+      `${subjectName}-${getAdjective(objectName)} relations changed to ${newRelation.toLowerCase()}`
+    ];
     const ally = () => [`Defence pact`, `${subjectName} entered into defensive pact with ${objectName}`];
     const vassal = () => [`Vassalization`, `${subjectName} became a vassal of ${objectName}`];
     const suzerain = () => [`Vassalization`, `${subjectName} vassalized ${objectName}`];
     const rival = () => [`Rivalization`, `${subjectName} and ${objectName} became rivals`];
-    const unknown = () => [`Relations severance`, `${subjectName} recalled their ambassadors and wiped all the records about ${objectName}`];
+    const unknown = () => [
+      `Relations severance`,
+      `${subjectName} recalled their ambassadors and wiped all the records about ${objectName}`
+    ];
     const war = () => [`War declaration`, `${subjectName} declared a war on its enemy ${objectName}`];
     const peace = () => {
       const treaty = `${subjectName} and ${objectName} agreed to cease fire and signed a peace treaty`;
@@ -292,18 +328,28 @@ function editDiplomacy() {
 
   function showRelationsHistory() {
     const chronicle = pack.states[0].diplomacy;
-    if (!chronicle.length) return tip("Relations history is blank", false, "error");
 
-    let message = `<div autocorrect="off" spellcheck="false">`;
-    chronicle.forEach((entry, d) => {
+    let message = /* html */ `<div autocorrect="off" spellcheck="false">`;
+    chronicle.forEach((entry, index) => {
       message += `<div>`;
-      entry.forEach((l, i) => {
-        message += `<div contenteditable="true" data-id="${d}-${i}"${i ? "" : " style='font-weight:bold'"}>${l}</div>`;
+      entry.forEach((l, entryIndex) => {
+        message += /* html */ `<div contenteditable="true" data-id="${index}-${entryIndex}"
+          ${entryIndex ? "" : "style='font-weight:bold'"}>${l}</div>`;
       });
       message += `&#8205;</div>`;
     });
-    alertMessage.innerHTML = message + `</div><div class="info-line">Type to edit. Press Enter to add a new line, empty the element to remove it</div>`;
-    alertMessage.querySelectorAll("div[contenteditable='true']").forEach(el => el.addEventListener("input", changeReliationsHistory));
+
+    if (!chronicle.length) {
+      pack.states[0].diplomacy = [[]];
+      message += /* html */ `<div><div contenteditable="true" data-id="0-0">No historical records</div>&#8205;</div>`;
+    }
+
+    alertMessage.innerHTML =
+      message +
+      `</div><div class="info-line">Type to edit. Press Enter to add a new line, empty the element to remove it</div>`;
+    alertMessage
+      .querySelectorAll("div[contenteditable='true']")
+      .forEach(el => el.addEventListener("input", changeReliationsHistory));
 
     $("#alert").dialog({
       title: "Relations history",
@@ -377,7 +423,11 @@ function editDiplomacy() {
       selectRelation(subjectId, objectId, currentRelation);
     });
 
-    $("#diplomacyMatrix").dialog({title: "Relations matrix", position: {my: "center", at: "center", of: "svg"}, buttons: {}});
+    $("#diplomacyMatrix").dialog({
+      title: "Relations matrix",
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {}
+    });
   }
 
   function downloadDiplomacyData() {

modules/ui/editors.js

@@ -32,7 +32,7 @@ function clicked() {
   else if (grand.id === "coastline") editCoastline();
   else if (great.id === "armies") editRegiment();
   else if (pack.cells.t[i] === 1) {
-    const node = document.getElementById("island_" + pack.cells.f[i]);
+    const node = byId("island_" + pack.cells.f[i]);
     editCoastline(node);
   } else if (grand.id === "lakes") editLake();
 }
@@ -58,10 +58,10 @@ function closeDialogs(except = "#except") {
 
 // move brush radius circle
 function moveCircle(x, y, r = 20) {
-  let circle = document.getElementById("brushCircle");
+  let circle = byId("brushCircle");
   if (!circle) {
     const html = /* html */ `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
-    document.getElementById("debug").insertAdjacentHTML("afterBegin", html);
+    byId("debug").insertAdjacentHTML("afterBegin", html);
   } else {
     circle.setAttribute("cx", x);
     circle.setAttribute("cy", y);
@@ -70,7 +70,7 @@ function moveCircle(x, y, r = 20) {
 }
 
 function removeCircle() {
-  if (document.getElementById("brushCircle")) document.getElementById("brushCircle").remove();
+  if (byId("brushCircle")) byId("brushCircle").remove();
 }
 
 // get browser-defined fit-content
@@ -79,8 +79,8 @@ function fitContent() {
 }
 
 // apply sorting behaviour for lines on Editor header click
-document.querySelectorAll(".sortable").forEach(function (e) {
-  e.addEventListener("click", function () {
+document.querySelectorAll(".sortable").forEach(function (event) {
+  event.on("click", function () {
     sortLines(this);
   });
 });
@@ -90,7 +90,7 @@ function applySortingByHeader(headerContainer) {
     .getElementById(headerContainer)
     .querySelectorAll(".sortable")
     .forEach(function (element) {
-      element.addEventListener("click", function () {
+      element.on("click", function () {
         sortLines(this);
       });
     });
@@ -235,7 +235,7 @@ function removeBurg(id) {
 
   if (burg.coa) {
     const coaId = "burgCOA" + id;
-    if (document.getElementById(coaId)) document.getElementById(coaId).remove();
+    if (byId(coaId)) byId(coaId).remove();
     emblems.select(`#burgEmblems > use[data-i='${id}']`).remove();
     delete burg.coa; // remove to save data
   }
@@ -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,13 +610,26 @@ 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})`);
 }
 
 function updateSelectedRect(fill) {
-  document.getElementById("picker").querySelector("rect.selected").classList.remove("selected");
+  byId("picker").querySelector("rect.selected").classList.remove("selected");
   document
     .getElementById("picker")
     .querySelector("rect[fill='" + fill.toLowerCase() + "']")
@@ -653,7 +687,7 @@ function openPicker(fill, callback) {
   updateSelectedRect(fill);
 
   openPicker.updateFill = function () {
-    const selected = document.getElementById("picker").querySelector("rect.selected");
+    const selected = byId("picker").querySelector("rect.selected");
     if (!selected) return;
     callback(selected.getAttribute("fill"));
   };
@@ -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);
@@ -831,8 +888,8 @@ function selectIcon(initial, callback) {
   if (!callback) return;
   $("#iconSelector").dialog();
 
-  const table = document.getElementById("iconTable");
-  const input = document.getElementById("iconInput");
+  const table = byId("iconTable");
+  const input = byId("iconInput");
   input.value = initial;
 
   if (!table.innerHTML) {
@@ -1062,13 +1119,11 @@ function selectIcon(initial, callback) {
 }
 
 function getAreaUnit(squareMark = "²") {
-  return document.getElementById("areaUnit").value === "square"
-    ? document.getElementById("distanceUnitInput").value + squareMark
-    : document.getElementById("areaUnit").value;
+  return byId("areaUnit").value === "square" ? byId("distanceUnitInput").value + squareMark : byId("areaUnit").value;
 }
 
 function getArea(rawArea) {
-  const distanceScale = document.getElementById("distanceScaleInput")?.value;
+  const distanceScale = byId("distanceScaleInput")?.value;
   return rawArea * distanceScale ** 2;
 }
 
@@ -1093,38 +1148,44 @@ function confirmationDialog(options) {
     }
   };
 
-  document.getElementById("alertMessage").innerHTML = message;
+  byId("alertMessage").innerHTML = message;
   $("#alert").dialog({resizable: false, title, buttons});
 }
 
 // add and register event listeners to clean up on editor closure
 function listen(element, event, handler) {
-  element.addEventListener(event, handler);
+  element.on(event, handler);
   return () => element.removeEventListener(event, handler);
 }
 
 // Calls the refresh functionality on all editors currently open.
 function refreshAllEditors() {
   TIME && console.time("refreshAllEditors");
-  if (document.getElementById("culturesEditorRefresh")?.offsetParent) culturesEditorRefresh.click();
-  if (document.getElementById("biomesEditorRefresh")?.offsetParent) biomesEditorRefresh.click();
-  if (document.getElementById("diplomacyEditorRefresh")?.offsetParent) diplomacyEditorRefresh.click();
-  if (document.getElementById("provincesEditorRefresh")?.offsetParent) provincesEditorRefresh.click();
-  if (document.getElementById("religionsEditorRefresh")?.offsetParent) religionsEditorRefresh.click();
-  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
-  if (document.getElementById("zonesEditorRefresh")?.offsetParent) zonesEditorRefresh.click();
+  if (byId("culturesEditorRefresh")?.offsetParent) culturesEditorRefresh.click();
+  if (byId("biomesEditorRefresh")?.offsetParent) biomesEditorRefresh.click();
+  if (byId("diplomacyEditorRefresh")?.offsetParent) diplomacyEditorRefresh.click();
+  if (byId("provincesEditorRefresh")?.offsetParent) provincesEditorRefresh.click();
+  if (byId("religionsEditorRefresh")?.offsetParent) religionsEditorRefresh.click();
+  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (byId("zonesEditorRefresh")?.offsetParent) zonesEditorRefresh.click();
   TIME && console.timeEnd("refreshAllEditors");
 }
 
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const StateEditor = await import("../dynamic/editors/states-editor.js?v=29052022");
-  StateEditor.open();
+  const Editor = await import("../dynamic/editors/states-editor.js?v=12062022");
+  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=12062022");
+  Editor.open();
+}
+
+async function editReligions() {
+  if (customization) return;
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=12062022");
+  Editor.open();
 }

modules/ui/hotkeys.js

@@ -4,6 +4,8 @@ document.addEventListener("keydown", handleKeydown);
 document.addEventListener("keyup", handleKeyup);
 
 function handleKeydown(event) {
+  if (!allowHotkeys()) return; // in some cases (e.g. in a textarea) hotkeys are not allowed
+
   const {code, ctrlKey, altKey} = event;
   if (altKey && !ctrlKey) event.preventDefault(); // disallow alt key combinations
   if (ctrlKey && ["KeyS", "KeyC"].includes(code)) event.preventDefault(); // disallow CTRL + S and CTRL + C
@@ -12,11 +14,8 @@ function handleKeydown(event) {
 
 function handleKeyup(event) {
   if (!modules.editors) return; // if editors are not loaded, do nothing
+  if (!allowHotkeys()) return; // in some cases (e.g. in a textarea) hotkeys are not allowed
 
-  const {tagName, contentEditable} = document.activeElement;
-  if (["INPUT", "SELECT", "TEXTAREA"].includes(tagName)) return; // don't trigger if user inputs text
-  if (tagName === "DIV" && contentEditable === "true") return; // don't trigger if user inputs a text
-  if (document.getSelection().toString()) return; // don't trigger if user selects text
   event.stopPropagation();
 
   const {code, key, ctrlKey, metaKey, shiftKey, altKey} = event;
@@ -109,17 +108,30 @@ function handleKeyup(event) {
   else if (ctrl) toggleMode();
 }
 
+function allowHotkeys() {
+  const {tagName, contentEditable} = document.activeElement;
+  if (["INPUT", "SELECT", "TEXTAREA"].includes(tagName)) return false;
+  if (tagName === "DIV" && contentEditable === "true") return false;
+  if (document.getSelection().toString()) return false;
+  return true;
+}
+
 function pressNumpadSign(key) {
   const change = key === "+" ? 1 : -1;
   let brush = null;
 
   if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius");
-  else if (document.getElementById("biomesManuallyBrush")?.offsetParent) brush = document.getElementById("biomesManuallyBrush");
-  else if (document.getElementById("statesManuallyBrush")?.offsetParent) brush = document.getElementById("statesManuallyBrush");
-  else if (document.getElementById("provincesManuallyBrush")?.offsetParent) brush = document.getElementById("provincesManuallyBrush");
-  else if (document.getElementById("culturesManuallyBrush")?.offsetParent) brush = document.getElementById("culturesManuallyBrush");
+  else if (document.getElementById("biomesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("biomesManuallyBrush");
+  else if (document.getElementById("statesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("statesManuallyBrush");
+  else if (document.getElementById("provincesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("provincesManuallyBrush");
+  else if (document.getElementById("culturesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("culturesManuallyBrush");
   else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush");
-  else if (document.getElementById("religionsManuallyBrush")?.offsetParent) brush = document.getElementById("religionsManuallyBrush");
+  else if (document.getElementById("religionsManuallyBrush")?.offsetParent)
+    brush = document.getElementById("religionsManuallyBrush");
 
   if (brush) {
     const value = minmax(+brush.value + change, +brush.min, +brush.max);
@@ -133,18 +145,26 @@ function pressNumpadSign(key) {
 
 function toggleMode() {
   if (zonesRemove?.offsetParent) {
-    zonesRemove.classList.contains("pressed") ? zonesRemove.classList.remove("pressed") : zonesRemove.classList.add("pressed");
+    zonesRemove.classList.contains("pressed")
+      ? zonesRemove.classList.remove("pressed")
+      : zonesRemove.classList.add("pressed");
   }
 }
 
 function removeElementOnKey() {
-  const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find(dialog => dialog.style.display !== "none");
+  const fastDelete = Array.from(document.querySelectorAll("[role='dialog'] .fastDelete")).find(
+    dialog => dialog.style.display !== "none"
+  );
   if (fastDelete) fastDelete.click();
 
-  const visibleDialogs = Array.from(document.querySelectorAll("[role='dialog']")).filter(dialog => dialog.style.display !== "none");
+  const visibleDialogs = Array.from(document.querySelectorAll("[role='dialog']")).filter(
+    dialog => dialog.style.display !== "none"
+  );
   if (!visibleDialogs.length) return;
 
-  visibleDialogs.forEach(dialog => dialog.querySelectorAll("button").forEach(button => button.textContent === "Remove" && button.click()));
+  visibleDialogs.forEach(dialog =>
+    dialog.querySelectorAll("button").forEach(button => button.textContent === "Remove" && button.click())
+  );
 }
 
 function closeAllDialogs() {

modules/ui/layers.js

@@ -6,16 +6,68 @@ restoreCustomPresets(); // run on-load
 
 function getDefaultPresets() {
   return {
-    political: ["toggleBorders", "toggleIcons", "toggleIce", "toggleLabels", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
-    cultural: ["toggleBorders", "toggleCultures", "toggleIcons", "toggleLabels", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
-    religions: ["toggleBorders", "toggleIcons", "toggleLabels", "toggleReligions", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
+    political: [
+      "toggleBorders",
+      "toggleIcons",
+      "toggleIce",
+      "toggleLabels",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar",
+      "toggleStates"
+    ],
+    cultural: [
+      "toggleBorders",
+      "toggleCultures",
+      "toggleIcons",
+      "toggleLabels",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar"
+    ],
+    religions: [
+      "toggleBorders",
+      "toggleIcons",
+      "toggleLabels",
+      "toggleReligions",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar"
+    ],
     provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar"],
     biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar"],
     heightmap: ["toggleHeight", "toggleRivers"],
     physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"],
-    poi: ["toggleBorders", "toggleHeight", "toggleIce", "toggleIcons", "toggleMarkers", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
-    military: ["toggleBorders", "toggleIcons", "toggleLabels", "toggleMilitary", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
-    emblems: ["toggleBorders", "toggleIcons", "toggleIce", "toggleEmblems", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
+    poi: [
+      "toggleBorders",
+      "toggleHeight",
+      "toggleIce",
+      "toggleIcons",
+      "toggleMarkers",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar"
+    ],
+    military: [
+      "toggleBorders",
+      "toggleIcons",
+      "toggleLabels",
+      "toggleMilitary",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar",
+      "toggleStates"
+    ],
+    emblems: [
+      "toggleBorders",
+      "toggleIcons",
+      "toggleIce",
+      "toggleEmblems",
+      "toggleRivers",
+      "toggleRoutes",
+      "toggleScaleBar",
+      "toggleStates"
+    ],
     landmass: ["toggleScaleBar"]
   };
 }
@@ -193,12 +245,23 @@ function drawHeightmap() {
     paths[h] += round(lineGen(points));
   }
 
-  terrs.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight).attr("fill", scheme(0.8)); // draw base layer
+  terrs
+    .append("rect")
+    .attr("x", 0)
+    .attr("y", 0)
+    .attr("width", graphWidth)
+    .attr("height", graphHeight)
+    .attr("fill", scheme(0.8)); // draw base layer
   for (const i of d3.range(20, 101)) {
     if (paths[i].length < 10) continue;
     const color = getColor(i, scheme);
     if (terracing)
-      terrs.append("path").attr("d", paths[i]).attr("transform", "translate(.7,1.4)").attr("fill", d3.color(color).darker(terracing)).attr("data-height", i);
+      terrs
+        .append("path")
+        .attr("d", paths[i])
+        .attr("transform", "translate(.7,1.4)")
+        .attr("fill", d3.color(color).darker(terracing))
+        .attr("data-height", i);
     terrs.append("path").attr("d", paths[i]).attr("fill", color).attr("data-height", i);
   }
 
@@ -701,10 +764,8 @@ function drawCultures() {
   TIME && console.time("drawCultures");
 
   cults.selectAll("path").remove();
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    cultures = pack.cultures,
-    n = cells.i.length;
+  const {cells, vertices, cultures} = pack;
+  const n = cells.i.length;
   const used = new Uint8Array(cells.i.length);
   const paths = new Array(cultures.length).fill("");
 
@@ -777,11 +838,9 @@ function drawReligions() {
   TIME && console.time("drawReligions");
 
   relig.selectAll("path").remove();
-  const cells = pack.cells,
-    vertices = pack.vertices,
-    religions = pack.religions,
-    features = pack.features,
-    n = cells.i.length;
+  const {cells, vertices, religions} = pack;
+  const n = cells.i.length;
+
   const used = new Uint8Array(cells.i.length);
   const vArray = new Array(religions.length); // store vertices array
   const body = new Array(religions.length).fill(""); // store path around each religion
@@ -801,11 +860,15 @@ function drawReligions() {
     const points = chain.map(v => vertices.p[v[0]]);
     if (!vArray[r]) vArray[r] = [];
     vArray[r].push(points);
-    body[r] += "M" + points.join("L");
+    body[r] += "M" + points.join("L") + "Z";
     gap[r] +=
       "M" +
       vertices.p[chain[0][0]] +
-      chain.reduce((r2, v, i, d) => (!i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2), "");
+      chain.reduce(
+        (r2, v, i, d) =>
+          !i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2,
+        ""
+      );
   }
 
   const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]);
@@ -971,7 +1034,9 @@ function drawStates() {
 
   const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join("");
   const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join("");
-  const clipString = bodyData.map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`).join("");
+  const clipString = bodyData
+    .map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`)
+    .join("");
   const haloString = haloData
     .map(
       d =>
@@ -1064,7 +1129,9 @@ function drawBorders() {
     const s = cells.state[i];
 
     // if cell is on province border
-    const provToCell = cells.c[i].find(n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n]);
+    const provToCell = cells.c[i].find(
+      n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n]
+    );
     if (provToCell) {
       const provTo = cells.province[provToCell];
       pUsed[p][provToCell] = provTo;
@@ -1101,7 +1168,8 @@ function drawBorders() {
   function connectVertices(current, f, array, t, used) {
     let chain = [];
     const checkCell = c => c >= n || array[c] !== f;
-    const checkVertex = v => vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20);
+    const checkVertex = v =>
+      vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20);
 
     // find starting vertex
     for (let i = 0; i < 1000; i++) {
@@ -1234,7 +1302,11 @@ function getProvincesVertices() {
     gap[p] +=
       "M" +
       vertices.p[chain[0][0]] +
-      chain.reduce((r, v, i, d) => (!i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r), "");
+      chain.reduce(
+        (r, v, i, d) =>
+          !i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r,
+        ""
+      );
   }
 
   // find province visual center
@@ -1373,7 +1445,17 @@ function drawCoordinates() {
       pos = projection(c); // map coordinates
     const [x, y] = lat ? [rn(p.x, 2), rn(pos[1], 2)] : [rn(pos[0], 2), rn(p.y, 2)]; // labels position
     const v = lat ? c[1] : c[0]; // label
-    const text = !v ? v : Number.isInteger(v) ? (lat ? (c[1] < 0 ? -c[1] + "°S" : c[1] + "°N") : c[0] < 0 ? -c[0] + "°W" : c[0] + "°E") : "";
+    const text = !v
+      ? v
+      : Number.isInteger(v)
+      ? lat
+        ? c[1] < 0
+          ? -c[1] + "°S"
+          : c[1] + "°N"
+        : c[0] < 0
+        ? -c[0] + "°W"
+        : c[0] + "°E"
+      : "";
     return {lat, x, y, text};
   });
 
@@ -1483,7 +1565,9 @@ function drawRivers() {
     if (!cells || cells.length < 2) return;
 
     if (points && points.length !== cells.length) {
-      console.error(`River ${i} has ${cells.length} cells, but only ${points.length} points defined. Resetting points data`);
+      console.error(
+        `River ${i} has ${cells.length} cells, but only ${points.length} points defined. Resetting points data`
+      );
       points = undefined;
     }
 
@@ -1552,15 +1636,20 @@ const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
     return `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`;
   if (shape === "pin")
     return `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`;
-  if (shape === "square") return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`;
-  if (shape === "squarish") return `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "square")
+    return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`;
+  if (shape === "squarish")
+    return `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "diamond") return `<path d="M 2,15 15,1 28,15 15,29 Z" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "hex") return `<path d="M 15,29 4.61,21 V 9 L 15,3 25.4,9 v 12 z" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "hexy") return `<path d="M 15,29 6,21 5,8 15,4 25,8 24,21 Z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "shieldy") return `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "shield") return `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "shieldy")
+    return `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "shield")
+    return `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "pentagon") return `<path d="M 4,16 9,4 h 12 l 5,12 -11,13 z" fill="${fill}" stroke="${stroke}" />`;
-  if (shape === "heptagon") return `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "heptagon")
+    return `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "circle") return `<circle cx="15" cy="15" r="11" fill="${fill}" stroke="${stroke}" />`;
   if (shape === "no") return "";
 };
@@ -1744,19 +1833,34 @@ function drawEmblems() {
 
     const burgNodes = nodes.filter(node => node.type === "burg");
     const burgString = burgNodes
-      .map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`)
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
       .join("");
     emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
 
     const provinceNodes = nodes.filter(node => node.type === "province");
     const provinceString = provinceNodes
-      .map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`)
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
       .join("");
     emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
 
     const stateNodes = nodes.filter(node => node.type === "state");
     const stateString = stateNodes
-      .map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`)
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
       .join("");
     emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
 

modules/ui/options.js

@@ -69,15 +69,22 @@ document
     if (id === "layersTab") layersContent.style.display = "block";
     else if (id === "styleTab") styleContent.style.display = "block";
     else if (id === "optionsTab") optionsContent.style.display = "block";
-    else if (id === "toolsTab") customization === 1 ? (customizationMenu.style.display = "block") : (toolsContent.style.display = "block");
+    else if (id === "toolsTab")
+      customization === 1 ? (customizationMenu.style.display = "block") : (toolsContent.style.display = "block");
     else if (id === "aboutTab") aboutContent.style.display = "block";
   });
 
 // show popup with a list of Patreon supportes (updated manually)
 async function showSupporters() {
   const {supporters} = await import("../dynamic/supporters.js?v=01062022");
-  alertMessage.innerHTML = "<ul style='column-count: 5; column-gap: 2em'>" + supporters.map(n => `<li>${n}</li>`).join("") + "</ul>";
-  $("#alert").dialog({resizable: false, title: "Patreon Supporters", width: "54vw", position: {my: "center", at: "center", of: "svg"}});
+  alertMessage.innerHTML =
+    "<ul style='column-count: 5; column-gap: 2em'>" + supporters.map(n => `<li>${n}</li>`).join("") + "</ul>";
+  $("#alert").dialog({
+    resizable: false,
+    title: "Patreon Supporters",
+    width: "54vw",
+    position: {my: "center", at: "center", of: "svg"}
+  });
 }
 
 // on any option or dialog change
@@ -292,7 +299,9 @@ function restoreDefaultZoomExtent() {
 
 function copyMapURL() {
   const locked = document.querySelectorAll("i.icon-lock").length; // check if some options are locked
-  const search = `?seed=${optionsSeed.value}&width=${graphWidth}&height=${graphHeight}${locked ? "" : "&options=default"}`;
+  const search = `?seed=${optionsSeed.value}&width=${graphWidth}&height=${graphHeight}${
+    locked ? "" : "&options=default"
+  }`;
   navigator.clipboard
     .writeText(location.host + location.pathname + search)
     .then(() => {
@@ -345,7 +354,8 @@ function changeEmblemShape(emblemShape) {
   shapePath ? image.setAttribute("d", shapePath) : image.removeAttribute("d");
 
   const specificShape = ["culture", "state", "random"].includes(emblemShape) ? null : emblemShape;
-  if (emblemShape === "random") pack.cultures.filter(c => !c.removed).forEach(c => (c.shield = Cultures.getRandomShield()));
+  if (emblemShape === "random")
+    pack.cultures.filter(c => !c.removed).forEach(c => (c.shield = Cultures.getRandomShield()));
 
   const rerenderCOA = (id, coa) => {
     const coaEl = document.getElementById(id);
@@ -541,8 +551,10 @@ function randomizeOptions() {
   if (randomize || !locked("prec")) precInput.value = precOutput.value = gauss(100, 40, 5, 500);
   const tMax = 30,
     tMin = -30; // temperature extremes
-  if (randomize || !locked("temperatureEquator")) temperatureEquatorOutput.value = temperatureEquatorInput.value = rand(tMax - 10, tMax);
-  if (randomize || !locked("temperaturePole")) temperaturePoleOutput.value = temperaturePoleInput.value = rand(tMin, tMin + 30);
+  if (randomize || !locked("temperatureEquator"))
+    temperatureEquatorOutput.value = temperatureEquatorInput.value = rand(tMax - 10, tMax);
+  if (randomize || !locked("temperaturePole"))
+    temperaturePoleOutput.value = temperaturePoleInput.value = rand(tMin, tMin + 30);
 
   // 'Units Editor' settings
   const US = navigator.language === "en-US";
@@ -644,7 +656,8 @@ document.getElementById("sticked").addEventListener("click", function (event) {
 });
 
 function regeneratePrompt(options) {
-  if (customization) return tip("New map cannot be generated when edit mode is active, please exit the mode and retry", false, "error");
+  if (customization)
+    return tip("New map cannot be generated when edit mode is active, please exit the mode and retry", false, "error");
   const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
   if (workingTime < 5) return regenerateMap(options);
 
@@ -704,6 +717,11 @@ function showExportPane() {
   });
 }
 
+async function exportToJson(type) {
+  const {exportToJson} = await import("../dynamic/export-json.js");
+  exportToJson(type);
+}
+
 async function showLoadPane() {
   $("#loadMapData").dialog({
     title: "Load map",
@@ -735,11 +753,12 @@ async function showLoadPane() {
 
     loadFromDropboxButtons.style.display = "block";
     fileSelect.innerHTML = "";
-    files.forEach(file => {
-      const opt = document.createElement("option");
-      opt.innerText = file.name;
-      opt.value = file.path;
-      fileSelect.appendChild(opt);
+    files.forEach(({name, updated, size, path}) => {
+      const sizeMB = rn(size / 1024 / 1024, 2) + " MB";
+      const updatedOn = new Date(updated).toLocaleDateString();
+      const nameFormatted = `${updatedOn}: ${name} [${sizeMB}]`;
+      const option = new Option(nameFormatted, path);
+      fileSelect.options.add(option);
     });
 
     return;
@@ -860,7 +879,10 @@ function updateTilesOptions() {
     }
   }
   const rectsG = "<g fill='none' stroke='#000'>" + rects.join("") + "</g>";
-  const labelsG = "<g fill='#000' stroke='none' text-anchor='middle' dominant-baseline='central' font-size='24px'>" + labels.join("") + "</g>";
+  const labelsG =
+    "<g fill='#000' stroke='none' text-anchor='middle' dominant-baseline='central' font-size='24px'>" +
+    labels.join("") +
+    "</g>";
   debug.html(rectsG + labelsG);
 }
 
@@ -912,7 +934,8 @@ async function enter3dView(type) {
 
   canvas.style.display = "block";
   canvas.onmouseenter = () => {
-    const help = "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
+    const help =
+      "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
     +canvas.dataset.hovered > 2 ? tip("") : tip(help);
     canvas.dataset.hovered = (+canvas.dataset.hovered | 0) + 1;
   };

modules/ui/regiment-editor.js

@@ -13,7 +13,9 @@ function editRegiment(selector) {
   drawBase();
 
   $("#regimentEditor").dialog({
-    title: "Edit Regiment", resizable: false, close: closeEditor,
+    title: "Edit Regiment",
+    resizable: false,
+    close: closeEditor,
     position: {my: "left top", at: "left+10 top+10", of: "#map"}
   });
 
@@ -40,17 +42,19 @@ function editRegiment(selector) {
   }
 
   function updateRegimentData(regiment) {
-    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" :"icon-users";
+    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
     document.getElementById("regimentName").value = regiment.name;
     document.getElementById("regimentEmblem").value = regiment.icon;
     const composition = document.getElementById("regimentComposition");
 
-    composition.innerHTML = options.military.map(u => {
-      return `<div data-tip="${capitalize(u.name)} number. Input to change">
+    composition.innerHTML = options.military
+      .map(u => {
+        return `<div data-tip="${capitalize(u.name)} number. Input to change">
         <div class="label">${capitalize(u.name)}:</div>
-        <input data-u="${u.name}" type="number" min=0 step=1 value="${(regiment.u[u.name]||0)}">
-        <i>${u.type}</i></div>`
-    }).join("");
+        <input data-u="${u.name}" type="number" min=0 step=1 value="${regiment.u[u.name] || 0}">
+        <i>${u.type}</i></div>`;
+      })
+      .join("");
 
     composition.querySelectorAll("input").forEach(el => el.addEventListener("change", changeUnit));
   }
@@ -58,26 +62,49 @@ function editRegiment(selector) {
   function drawBase() {
     const reg = regiment();
     const clr = pack.states[elSelected.dataset.state].color;
-    const base = viewbox.insert("g", "g#armies").attr("id", "regimentBase").attr("stroke-width", .3).attr("stroke", "#000").attr("cursor", "move");
-    base.on("mouseenter", () => {tip("Regiment base. Drag to re-base the regiment", true);}).on("mouseleave", () => {tip('', true);});
+    const base = viewbox
+      .insert("g", "g#armies")
+      .attr("id", "regimentBase")
+      .attr("stroke-width", 0.3)
+      .attr("stroke", "#000")
+      .attr("cursor", "move");
+    base
+      .on("mouseenter", () => {
+        tip("Regiment base. Drag to re-base the regiment", true);
+      })
+      .on("mouseleave", () => {
+        tip("", true);
+      });
 
-    base.append("line").attr("x1", reg.bx).attr("y1", reg.by).attr("x2", reg.x).attr("y2", reg.y).attr("class", "dragLine");
-    base.append("circle").attr("cx", reg.bx).attr("cy", reg.by).attr("r", 2).attr("fill", clr).call(d3.drag().on("drag", dragBase));
+    base
+      .append("line")
+      .attr("x1", reg.bx)
+      .attr("y1", reg.by)
+      .attr("x2", reg.x)
+      .attr("y2", reg.y)
+      .attr("class", "regimentDragLine");
+    base
+      .append("circle")
+      .attr("cx", reg.bx)
+      .attr("cy", reg.by)
+      .attr("r", 2)
+      .attr("fill", clr)
+      .call(d3.drag().on("drag", dragBase));
   }
 
   function changeType() {
     const reg = regiment();
     reg.n = +!reg.n;
-    document.getElementById("regimentType").className = reg.n ? "icon-anchor" :"icon-users";
+    document.getElementById("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
 
     const size = +armies.attr("box-size");
     const baseRect = elSelected.querySelectorAll("rect")[0];
     const iconRect = elSelected.querySelectorAll("rect")[1];
     const icon = elSelected.querySelector(".regimentIcon");
-    const x = reg.n ? reg.x-size*2 : reg.x-size*3;
+    const x = reg.n ? reg.x - size * 2 : reg.x - size * 3;
     baseRect.setAttribute("x", x);
-    baseRect.setAttribute("width", reg.n ? size*4 : size*6);
-    iconRect.setAttribute("x", x - size*2);
+    baseRect.setAttribute("width", reg.n ? size * 4 : size * 6);
+    iconRect.setAttribute("x", x - size * 2);
     icon.setAttribute("x", x - size);
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
   }
@@ -87,13 +114,17 @@ function editRegiment(selector) {
   }
 
   function restoreName() {
-    const reg = regiment(), regs = pack.states[elSelected.dataset.state].military;
+    const reg = regiment(),
+      regs = pack.states[elSelected.dataset.state].military;
     const name = Military.getName(reg, regs);
     elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
   }
 
   function selectEmblem() {
-    selectIcon(regimentEmblem.value, v => {regimentEmblem.value = v; changeEmblem()});
+    selectIcon(regimentEmblem.value, v => {
+      regimentEmblem.value = v;
+      changeEmblem();
+    });
   }
 
   function changeEmblem() {
@@ -104,7 +135,7 @@ function editRegiment(selector) {
   function changeUnit() {
     const u = this.dataset.u;
     const reg = regiment();
-    reg.u[u] = (+this.value)||0;
+    reg.u[u] = +this.value || 0;
     reg.a = d3.sum(Object.values(reg.u));
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
     if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click();
@@ -112,24 +143,47 @@ function editRegiment(selector) {
   }
 
   function splitRegiment() {
-    const reg = regiment(), u1 = reg.u;
-    const state = +elSelected.dataset.state, military = pack.states[state].military;
-    const i = last(military).i + 1, u2 = Object.assign({}, u1); // u clone
+    const reg = regiment(),
+      u1 = reg.u;
+    const state = +elSelected.dataset.state,
+      military = pack.states[state].military;
+    const i = last(military).i + 1,
+      u2 = Object.assign({}, u1); // u clone
 
-    Object.keys(u2).forEach(u => u2[u] = Math.floor(u2[u]/2)); // halved new reg
+    Object.keys(u2).forEach(u => (u2[u] = Math.floor(u2[u] / 2))); // halved new reg
     const a = d3.sum(Object.values(u2)); // new reg total
-    if (!a) {tip("Not enough forces to split", false, "error"); return}; // nothing to add
+    if (!a) {
+      tip("Not enough forces to split", false, "error");
+      return;
+    } // nothing to add
 
     // update old regiment
-    Object.keys(u1).forEach(u => u1[u] = Math.ceil(u1[u]/2)); // halved old reg
+    Object.keys(u1).forEach(u => (u1[u] = Math.ceil(u1[u] / 2))); // halved old reg
     reg.a = d3.sum(Object.values(u1)); // old reg total
-    regimentComposition.querySelectorAll("input").forEach(el => el.value = reg.u[el.dataset.u]||0);
+    regimentComposition.querySelectorAll("input").forEach(el => (el.value = reg.u[el.dataset.u] || 0));
     elSelected.querySelector("text").innerHTML = Military.getTotal(reg);
 
     // create new regiment
     const shift = +armies.attr("box-size") * 2;
-    const y = function(x, y) {do {y+=shift} while (military.find(r => r.x === x && r.y === y)); return y;}
-    const newReg = {a, cell:reg.cell, i, n:reg.n, u:u2, x:reg.x, y:y(reg.x, reg.y), bx:reg.bx, by:reg.by, state, icon: reg.icon};
+    const y = function (x, y) {
+      do {
+        y += shift;
+      } while (military.find(r => r.x === x && r.y === y));
+      return y;
+    };
+    const newReg = {
+      a,
+      cell: reg.cell,
+      i,
+      n: reg.n,
+      u: u2,
+      x: reg.x,
+      y: y(reg.x, reg.y),
+      bx: reg.bx,
+      by: reg.by,
+      state,
+      icon: reg.icon
+    };
     newReg.name = Military.getName(newReg, military);
     military.push(newReg);
     Military.generateNote(newReg, pack.states[state]); // add legend
@@ -152,11 +206,13 @@ function editRegiment(selector) {
   function addRegimentOnClick() {
     const point = d3.mouse(this);
     const cell = findCell(point[0], point[1]);
-    const x = pack.cells.p[cell][0], y = pack.cells.p[cell][1];
-    const state = +elSelected.dataset.state, military = pack.states[state].military;
+    const x = pack.cells.p[cell][0],
+      y = pack.cells.p[cell][1];
+    const state = +elSelected.dataset.state,
+      military = pack.states[state].military;
     const i = military.length ? last(military).i + 1 : 0;
     const n = +(pack.cells.h[cell] < 20); // naval or land
-    const reg = {a:0, cell, i, n, u:{}, x, y, bx:x, by:y, state, icon:"🛡️"};
+    const reg = {a: 0, cell, i, n, u: {}, x, y, bx: x, by: y, state, icon: "🛡️"};
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
@@ -179,30 +235,59 @@ function editRegiment(selector) {
   }
 
   function attackRegimentOnClick() {
-    const target = d3.event.target, regSelected = target.parentElement, army = regSelected.parentElement;
-    const oldState = +elSelected.dataset.state, newState = +regSelected.dataset.state;
+    const target = d3.event.target,
+      regSelected = target.parentElement,
+      army = regSelected.parentElement;
+    const oldState = +elSelected.dataset.state,
+      newState = +regSelected.dataset.state;
 
-    if (army.parentElement.id !== "armies") {tip("Please click on a regiment to attack", false, "error"); return;}
-    if (regSelected === elSelected) {tip("Regiment cannot attack itself", false, "error"); return;}
-    if (oldState === newState) {tip("Cannot attack fraternal regiment", false, "error"); return;}
+    if (army.parentElement.id !== "armies") {
+      tip("Please click on a regiment to attack", false, "error");
+      return;
+    }
+    if (regSelected === elSelected) {
+      tip("Regiment cannot attack itself", false, "error");
+      return;
+    }
+    if (oldState === newState) {
+      tip("Cannot attack fraternal regiment", false, "error");
+      return;
+    }
 
     const attacker = regiment();
     const defender = pack.states[regSelected.dataset.state].military.find(r => r.i == regSelected.dataset.id);
-    if (!attacker.a || !defender.a) {tip("Regiment has no troops to battle", false, "error"); return;}
+    if (!attacker.a || !defender.a) {
+      tip("Regiment has no troops to battle", false, "error");
+      return;
+    }
 
     // save initial position to temp attribute
-    attacker.px = attacker.x, attacker.py = attacker.y;
-    defender.px = defender.x, defender.py = defender.y;
+    (attacker.px = attacker.x), (attacker.py = attacker.y);
+    (defender.px = defender.x), (defender.py = defender.y);
 
     // move attacker to defender
-    Military.moveRegiment(attacker, defender.x, defender.y-8);
+    Military.moveRegiment(attacker, defender.x, defender.y - 8);
 
     // draw battle icon
-    const attack = d3.transition().delay(300).duration(700).ease(d3.easeSinInOut).on("end", () => new Battle(attacker, defender));
-    svg.append("text").attr("x", window.innerWidth/2).attr("y", window.innerHeight/2)
-      .text("⚔️").attr("font-size", 0).attr("opacity", 1)
-      .style("dominant-baseline", "central").style("text-anchor", "middle")
-      .transition(attack).attr("font-size", 1000).attr("opacity", .2).remove();
+    const attack = d3
+      .transition()
+      .delay(300)
+      .duration(700)
+      .ease(d3.easeSinInOut)
+      .on("end", () => new Battle(attacker, defender));
+    svg
+      .append("text")
+      .attr("x", window.innerWidth / 2)
+      .attr("y", window.innerHeight / 2)
+      .text("⚔️")
+      .attr("font-size", 0)
+      .attr("opacity", 1)
+      .style("dominant-baseline", "central")
+      .style("text-anchor", "middle")
+      .transition(attack)
+      .attr("font-size", 1000)
+      .attr("opacity", 0.2)
+      .remove();
 
     clearMainTip();
     $("#regimentEditor").dialog("close");
@@ -222,18 +307,27 @@ function editRegiment(selector) {
   }
 
   function attachRegimentOnClick() {
-    const target = d3.event.target, regSelected = target.parentElement, army = regSelected.parentElement;
-    const oldState = +elSelected.dataset.state, newState = +regSelected.dataset.state;
+    const target = d3.event.target,
+      regSelected = target.parentElement,
+      army = regSelected.parentElement;
+    const oldState = +elSelected.dataset.state,
+      newState = +regSelected.dataset.state;
 
-    if (army.parentElement.id !== "armies") {tip("Please click on a regiment", false, "error"); return;}
-    if (regSelected === elSelected) {tip("Cannot attach regiment to itself. Please click on another regiment", false, "error"); return;}
+    if (army.parentElement.id !== "armies") {
+      tip("Please click on a regiment", false, "error");
+      return;
+    }
+    if (regSelected === elSelected) {
+      tip("Cannot attach regiment to itself. Please click on another regiment", false, "error");
+      return;
+    }
 
     const reg = regiment(); // reg to be attached
     const sel = pack.states[newState].military.find(r => r.i == regSelected.dataset.id); // reg to attach to
 
     for (const unit of options.military) {
       const u = unit.name;
-      if (reg.u[u]) sel.u[u] ? sel.u[u] += reg.u[u] : sel.u[u] = reg.u[u];
+      if (reg.u[u]) sel.u[u] ? (sel.u[u] += reg.u[u]) : (sel.u[u] = reg.u[u]);
     }
     sel.a = d3.sum(Object.values(sel.u)); // reg total
     regSelected.querySelector("text").innerHTML = Military.getTotal(sel); // update selected reg total text
@@ -247,7 +341,7 @@ function editRegiment(selector) {
 
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
     $("#regimentEditor").dialog("close");
-    editRegiment("#"+regSelected.id);
+    editRegiment("#" + regSelected.id);
   }
 
   function regenerateLegend() {
@@ -264,9 +358,11 @@ function editRegiment(selector) {
 
   function removeRegiment() {
     alertMessage.innerHTML = "Are you sure you want to remove the regiment?";
-    $("#alert").dialog({resizable: false, title: "Remove regiment",
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove regiment",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           const military = pack.states[elSelected.dataset.state].military;
           const regIndex = military.indexOf(regiment());
@@ -281,7 +377,9 @@ function editRegiment(selector) {
           if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
           $("#regimentEditor").dialog("close");
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -305,16 +403,17 @@ function editRegiment(selector) {
     const self = elSelected === this;
     const baseLine = viewbox.select("g#regimentBase > line");
 
-    d3.event.on("drag", function() {
-      const x = reg.x = d3.event.x, y = reg.y = d3.event.y;
+    d3.event.on("drag", function () {
+      const x = (reg.x = d3.event.x),
+        y = (reg.y = d3.event.y);
 
       baseRect.setAttribute("x", x1(x));
       baseRect.setAttribute("y", y1(y));
       text.setAttribute("x", x);
       text.setAttribute("y", y);
-      iconRect.setAttribute("x", x1(x)-h);
+      iconRect.setAttribute("x", x1(x) - h);
       iconRect.setAttribute("y", y1(y));
-      icon.setAttribute("x", x1(x)-size);
+      icon.setAttribute("x", x1(x) - size);
       icon.setAttribute("y", y);
       if (self) baseLine.attr("x2", x).attr("y2", y);
     });
@@ -324,13 +423,16 @@ function editRegiment(selector) {
     const baseLine = viewbox.select("g#regimentBase > line");
     const reg = regiment();
 
-    d3.event.on("drag", function() {
+    d3.event.on("drag", function () {
       this.setAttribute("cx", d3.event.x);
       this.setAttribute("cy", d3.event.y);
       baseLine.attr("x1", d3.event.x).attr("y1", d3.event.y);
     });
 
-    d3.event.on("end", function() {reg.bx = d3.event.x; reg.by = d3.event.y;});
+    d3.event.on("end", function () {
+      reg.bx = d3.event.x;
+      reg.by = d3.event.y;
+    });
   }
 
   function closeEditor() {
@@ -343,5 +445,4 @@ function editRegiment(selector) {
     restoreDefaultEvents();
     elSelected = null;
   }
-
-}
+}

modules/ui/religions-editor.js

@@ -1,799 +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 = document.getElementById("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
-  document.getElementById("religionsEditorRefresh").addEventListener("click", refreshReligionsEditor);
-  document.getElementById("religionsEditStyle").addEventListener("click", () => editStyle("relig"));
-  document.getElementById("religionsLegend").addEventListener("click", toggleLegend);
-  document.getElementById("religionsPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("religionsHeirarchy").addEventListener("click", showHierarchy);
-  document.getElementById("religionsExtinct").addEventListener("click", toggleExtinct);
-  document.getElementById("religionsManually").addEventListener("click", enterReligionsManualAssignent);
-  document.getElementById("religionsManuallyApply").addEventListener("click", applyReligionsManualAssignent);
-  document.getElementById("religionsManuallyCancel").addEventListener("click", () => exitReligionsManualAssignment());
-  document.getElementById("religionsAdd").addEventListener("click", enterAddReligionMode);
-  document.getElementById("religionsExport").addEventListener("click", downloadReligionsData);
-
-  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.addEventListener("mouseenter", ev => religionHighlightOn(ev)));
-    body.querySelectorAll("div.religions").forEach(el => el.addEventListener("mouseleave", ev => religionHighlightOff(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectReligionOnLineClick));
-    body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", religionChangeColor));
-    body.querySelectorAll("div > input.religionName").forEach(el => el.addEventListener("input", religionChangeName));
-    body.querySelectorAll("div > select.religionType").forEach(el => el.addEventListener("change", religionChangeType));
-    body.querySelectorAll("div > input.religionForm").forEach(el => el.addEventListener("input", religionChangeForm));
-    body.querySelectorAll("div > input.religionDeity").forEach(el => el.addEventListener("input", religionChangeDeity));
-    body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", regenerateDeity));
-    body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
-    body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("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 religion = +event.target.dataset.id;
-    const info = document.getElementById("religionInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + religion + "'] > path")
-        .classed("selected", 1);
-      const r = pack.religions[religion];
-      const type = r.name.includes(r.type) ? "" : r.type === "Folk" || r.type === "Organized" ? ". " + r.type + " religion" : ". " + r.type;
-      const form = r.form === r.type || r.name.includes(r.form) ? "" : ". " + r.form;
-      const rural = r.rural * populationRate;
-      const urban = r.urban * populationRate * urbanization;
-      const population = rural + urban > 0 ? ". " + si(rn(rural + urban)) + " believers" : ". Extinct";
-      info.innerHTML = /* html */ `${r.name}${type}${form}${population}`;
-      tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
-    }
-
-    const el = body.querySelector(`div[data-id='${religion}']`);
-    if (el) el.classList.add("active");
-
-    if (!layerIsOn("toggleReligions")) return;
-    if (customization) return;
-    relig
-      .select("#religion" + religion)
-      .raise()
-      .transition(animate)
-      .attr("stroke-width", 2.5)
-      .attr("stroke", "#c13119");
-    debug
-      .select("#religionsCenter" + religion)
-      .raise()
-      .transition(animate)
-      .attr("r", 8)
-      .attr("stroke-width", 2)
-      .attr("stroke", "#c13119");
-  }
-
-  function religionHighlightOff(event) {
-    const religion = +event.target.dataset.id;
-    const info = document.getElementById("religionInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + religion + "'] > path")
-        .classed("selected", 0);
-      info.innerHTML = "&#8205;";
-      tip("");
-    }
-
-    const el = body.querySelector(`div[data-id='${religion}']`);
-    if (el) el.classList.remove("active");
-
-    relig
-      .select("#religion" + religion)
-      .transition()
-      .attr("stroke-width", null)
-      .attr("stroke", null);
-    debug
-      .select("#religionsCenter" + religion)
-      .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 religion = +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" + religion).remove();
-          relig.select("#religion-gap" + religion).remove();
-          debug.select("#religionsCenter" + religion).remove();
-
-          pack.cells.religion.forEach((r, i) => {
-            if (r === religion) pack.cells.religion[i] = 0;
-          });
-          pack.religions[religion].removed = true;
-          const origin = pack.religions[religion].origin;
-          pack.religions.forEach(r => {
-            if (r.origin === religion) r.origin = origin;
-          });
-
-          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].origin = null;
-    const religions = pack.religions.filter(r => !r.removed);
-    if (religions.length < 3) {
-      tip("Not enough religions to show hierarchy", false, "error");
-      return;
-    }
-    const root = d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => d.origin)(religions);
-    const treeWidth = root.leaves().length;
-    const treeHeight = root.height;
-    const width = treeWidth * 40,
-      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]);
-
-    // prepare svg
-    alertMessage.innerHTML = "<div id='religionInfo' class='chartInfo'>&#8205;</div>";
-    const svg = d3
-      .select("#alertMessage")
-      .insert("svg", "#religionInfo")
-      .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 nodes = graph.append("g");
-
-    renderTree();
-    function renderTree() {
-      treeLayout(root);
-      links
-        .selectAll("path")
-        .data(root.links())
-        .enter()
-        .append("path")
-        .attr("d", d => {
-          return (
-            "M" +
-            d.source.x +
-            "," +
-            d.source.y +
-            "C" +
-            d.source.x +
-            "," +
-            (d.source.y * 3 + d.target.y) / 4 +
-            " " +
-            d.target.x +
-            "," +
-            (d.source.y * 2 + d.target.y) / 3 +
-            " " +
-            d.target.x +
-            "," +
-            d.target.y
-          );
-        });
-
-      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(event))
-        .on("mouseleave", () => religionHighlightOff(event))
-        .call(d3.drag().on("start", d => dragToReorigin(d)));
-
-      node
-        .append("path")
-        .attr("d", d => {
-          if (d.data.type === "Folk") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
-          // circle
-          else if (d.data.type === "Heresy") return "M0,-14L14,0L0,14L-14,0Z";
-          // diamond
-          else if (d.data.type === "Cult") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
-          // hex
-          else if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
-          // small circle
-          else return "M-11,-11h22v22h-22Z"; // square
-        })
-        .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
-        .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-      node
-        .append("text")
-        .attr("dy", ".35em")
-        .text(d => (d.data.i ? 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 dragToReorigin(d) {
-      if (isCtrlClick(d3.event.sourceEvent)) {
-        changeCode(d);
-        return;
-      }
-
-      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("path.selected");
-        if (!selected.size()) return;
-        const religion = d.data.i;
-        const oldOrigin = d.data.origin;
-        let newOrigin = selected.datum().data.i;
-        if (newOrigin == oldOrigin) return; // already a child of the selected node
-        if (newOrigin == religion) newOrigin = 0; // move to top
-        if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
-        pack.religions[religion].origin = d.data.origin = newOrigin; // change data
-        showHierarchy(); // update hierarchy
-      });
-    }
-
-    function changeCode(d) {
-      prompt(`Please provide an abbreviation for ${d.data.name}`, {default: d.data.code}, v => {
-        pack.religions[d.data.i].code = v;
-        nodes
-          .select("g[data-id='" + d.data.i + "']")
-          .select("text")
-          .text(v);
-      });
-    }
-  }
-
-  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"));
-    document.getElementById("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"));
-    document.getElementById("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 downloadReligionsData() {
-    const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Religion,Color,Type,Form,Deity,Area " + unit + ",Believers\n"; // headers
-
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      data += el.dataset.id + ",";
-      data += el.dataset.name + ",";
-      data += el.dataset.color + ",";
-      data += el.dataset.type + ",";
-      data += el.dataset.form + ",";
-      data += el.dataset.deity.replace(",", " -") + ",";
-      data += el.dataset.area + ",";
-      data += el.dataset.population + "\n";
-    });
-
-    const name = getFileName("Religions") + ".csv";
-    downloadFile(data, name);
-  }
-
-  function closeReligionsEditor() {
-    debug.select("#religionCenters").remove();
-    exitReligionsManualAssignment("close");
-    exitAddReligionMode();
-  }
-}

modules/ui/tools.js

@@ -143,7 +143,8 @@ function regenerateStates() {
   const statesCount = +regionsOutput.value;
   const burgs = pack.burgs.filter(b => b.i && !b.removed);
   if (!burgs.length) return tip("There are no any burgs to generate states. Please create burgs first", false, "error");
-  if (burgs.length < statesCount) tip(`Not enough burgs to generate ${statesCount} states. Will generate only ${burgs.length} states`, false, "warn");
+  if (burgs.length < statesCount)
+    tip(`Not enough burgs to generate ${statesCount} states. Will generate only ${burgs.length} states`, false, "warn");
 
   // turn all old capitals into towns
   burgs
@@ -205,10 +206,15 @@ function regenerateStates() {
     }
 
     const culture = capital.culture;
-    const basename = capital.name.length < 9 && capital.cell % 5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
+    const basename =
+      capital.name.length < 9 && capital.cell % 5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
     const name = Names.getState(basename, culture);
     const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[capital.cell]);
-    const type = nomadic ? "Nomadic" : pack.cultures[culture].type === "Nomadic" ? "Generic" : pack.cultures[culture].type;
+    const type = nomadic
+      ? "Nomadic"
+      : pack.cultures[culture].type === "Nomadic"
+      ? "Generic"
+      : pack.cultures[culture].type;
     const expansionism = rn(Math.random() * powerInput.value + 1, 1);
 
     const cultureType = pack.cultures[culture].type;
@@ -253,57 +259,59 @@ function regenerateProvinces() {
 }
 
 function regenerateBurgs() {
-  const cells = pack.cells,
-    states = pack.states,
-    Lockedburgs = pack.burgs.filter(b => b.lock);
+  const {cells, states} = pack;
+  const lockedburgs = pack.burgs.filter(b => b.lock);
   rankCells();
+
   cells.burg = new Uint16Array(cells.i.length);
   const burgs = (pack.burgs = [0]); // clear burgs array
   states.filter(s => s.i).forEach(s => (s.capital = 0)); // clear state capitals
   pack.provinces.filter(p => p.i).forEach(p => (p.burg = 0)); // clear province capitals
   const burgsTree = d3.quadtree();
 
+  // add locked burgs
+  for (let j = 0; j < lockedburgs.length; j++) {
+    const id = burgs.length;
+    const lockedBurg = lockedburgs[j];
+    lockedBurg.i = id;
+    burgs.push(lockedBurg);
+
+    burgsTree.add([lockedBurg.x, lockedBurg.y]);
+    cells.burg[lockedBurg.cell] = id;
+
+    if (lockedBurg.capital) {
+      const stateId = lockedBurg.state;
+      states[stateId].capital = id;
+      states[stateId].center = lockedBurg.cell;
+    }
+  }
+
   const score = new Int16Array(cells.s.map(s => s * Math.random())); // cell score for capitals placement
   const sorted = cells.i.filter(i => score[i] > 0 && cells.culture[i]).sort((a, b) => score[b] - score[a]); // filtered and sorted array of indexes
   const burgsCount =
-    manorsInput.value == 1000 ? rn(sorted.length / 5 / (grid.points.length / 10000) ** 0.8) + states.length : +manorsInput.value + states.length;
+    manorsInput.value === "1000"
+      ? rn(sorted.length / 5 / (grid.points.length / 10000) ** 0.8) + states.length
+      : +manorsInput.value + states.length;
   const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** 0.7 / 66); // base min distance between towns
 
-  //clear locked list since ids will change
-  //burglock.selectAll("text").remove();
-  for (let j = 0; j < Lockedburgs.length; j++) {
-    const id = burgs.length;
-    const oldBurg = Lockedburgs[j];
-    oldBurg.i = id;
-    burgs.push(oldBurg);
-    burgsTree.add([oldBurg.x, oldBurg.y]);
-    cells.burg[oldBurg.cell] = id;
-    if (oldBurg.capital) {
-      states[oldBurg.state].capital = id;
-      states[oldBurg.state].center = oldBurg.cell;
-    }
-    //burglock.append("text").attr("data-id", id);
-  }
-
   for (let i = 0; i < sorted.length && burgs.length < burgsCount; i++) {
     const id = burgs.length;
     const cell = sorted[i];
-    const x = cells.p[cell][0],
-      y = cells.p[cell][1];
+    const [x, y] = cells.p[cell];
 
     const s = spacing * gauss(1, 0.3, 0.2, 2, 2); // randomize to make the placement not uniform
     if (burgsTree.find(x, y, s) !== undefined) continue; // to close to existing burg
 
-    const state = cells.state[cell];
-    const capital = state && !states[state].capital; // if state doesn't have capital, make this burg a capital, no capital for neutral lands
+    const stateId = cells.state[cell];
+    const capital = stateId && !states[stateId].capital; // if state doesn't have capital, make this burg a capital, no capital for neutral lands
     if (capital) {
-      states[state].capital = id;
-      states[state].center = cell;
+      states[stateId].capital = id;
+      states[stateId].center = cell;
     }
 
     const culture = cells.culture[cell];
     const name = Names.getCulture(culture);
-    burgs.push({cell, x, y, state, i: id, culture, name, capital, feature: cells.f[cell]});
+    burgs.push({cell, x, y, state: stateId, i: id, culture, name, capital, feature: cells.f[cell]});
     burgsTree.add([x, y]);
     cells.burg[cell] = id;
   }
@@ -321,8 +329,9 @@ function regenerateBurgs() {
     });
 
   pack.features.forEach(f => {
-    if (f.port) f.port = 0;
-  }); // reset features ports counter
+    if (f.port) f.port = 0; // reset features ports counter
+  });
+
   BurgsAndStates.specifyBurgs();
   BurgsAndStates.defineBurgFeatures();
   BurgsAndStates.drawBurgs();
@@ -425,7 +434,10 @@ function regenerateMarkers() {
 }
 
 function regenerateZones(event) {
-  if (isCtrlClick(event)) prompt("Please provide zones number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfZones(v));
+  if (isCtrlClick(event))
+    prompt("Please provide zones number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v =>
+      addNumberOfZones(v)
+    );
   else addNumberOfZones(gauss(1, 0.5, 0.6, 5, 2));
 
   function addNumberOfZones(number) {
@@ -542,7 +554,18 @@ function addRiverOnClick() {
   if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error");
   if (cells.b[i]) return;
 
-  const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType, getWidth, getOffset, getApproximateLength} = Rivers;
+  const {
+    alterHeights,
+    resolveDepressions,
+    addMeandering,
+    getRiverPath,
+    getBasin,
+    getName,
+    getType,
+    getWidth,
+    getOffset,
+    getApproximateLength
+  } = Rivers;
   const riverCells = [];
   let riverId = rivers.length ? last(rivers).i + 1 : 1;
   let parent = riverId;
@@ -623,7 +646,8 @@ function addRiverOnClick() {
   const mouth = riverCells[riverCells.length - 2];
 
   const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2);
-  const widthFactor = river?.widthFactor || (!parent || parent === riverId ? defaultWidthFactor * 1.2 : defaultWidthFactor);
+  const widthFactor =
+    river?.widthFactor || (!parent || parent === riverId ? defaultWidthFactor * 1.2 : defaultWidthFactor);
   const meanderedPoints = addMeandering(riverCells);
 
   const discharge = cells.fl[mouth]; // m3 in second
@@ -641,7 +665,21 @@ function addRiverOnClick() {
     const name = getName(mouth);
     const type = getType({i: riverId, length, parent});
 
-    rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells, basin, name, type});
+    rivers.push({
+      i: riverId,
+      source,
+      mouth,
+      discharge,
+      length,
+      width,
+      widthFactor,
+      sourceWidth: 0,
+      parent,
+      cells: riverCells,
+      basin,
+      name,
+      type
+    });
   }
 
   // render river
@@ -678,7 +716,12 @@ function addRouteOnClick() {
   unpressClickToAddButton();
   const point = d3.mouse(this);
   const id = getNextId("route");
-  elSelected = routes.select("g").append("path").attr("id", id).attr("data-new", 1).attr("d", `M${point[0]},${point[1]}`);
+  elSelected = routes
+    .select("g")
+    .append("path")
+    .attr("id", id)
+    .attr("data-new", 1)
+    .attr("d", `M${point[0]},${point[1]}`);
   editRoute(true);
 }
 

utils/languageUtils.js

@@ -0,0 +1,174 @@
+"use strict";
+
+// chars that serve as vowels
+const VOWELS = `aeiouyɑ'əøɛœæɶɒɨɪɔɐʊɤɯаоиеёэыуюяàèìòùỳẁȁȅȉȍȕáéíóúýẃőűâêîôûŷŵäëïöüÿẅãẽĩõũỹąęįǫųāēīōūȳăĕĭŏŭǎěǐǒǔȧėȯẏẇạẹịọụỵẉḛḭṵṳ`;
+function vowel(c) {
+  return VOWELS.includes(c);
+}
+
+// remove vowels from the end of the string
+function trimVowels(string, minLength = 3) {
+  while (string.length > minLength && vowel(last(string))) {
+    string = string.slice(0, -1);
+  }
+  return string;
+}
+
+const adjectivizationRules = [
+  {name: "guo", probability: 1, condition: new RegExp(" Guo$"), action: noun => noun.slice(0, -4)},
+  {
+    name: "orszag",
+    probability: 1,
+    condition: new RegExp("orszag$"),
+    action: noun => (noun.length < 9 ? noun + "ian" : noun.slice(0, -6))
+  },
+  {
+    name: "stan",
+    probability: 1,
+    condition: new RegExp("stan$"),
+    action: noun => (noun.length < 9 ? noun + "i" : trimVowels(noun.slice(0, -4)))
+  },
+  {
+    name: "land",
+    probability: 1,
+    condition: new RegExp("land$"),
+    action: noun => {
+      if (noun.length > 9) return noun.slice(0, -4);
+      const root = trimVowels(noun.slice(0, -4), 0);
+      if (root.length < 3) return noun + "ic";
+      if (root.length < 4) return root + "lish";
+      return root + "ish";
+    }
+  },
+  {
+    name: "que",
+    probability: 1,
+    condition: new RegExp("que$"),
+    action: noun => noun.replace(/que$/, "can")
+  },
+  {
+    name: "a",
+    probability: 1,
+    condition: new RegExp("a$"),
+    action: noun => noun + "n"
+  },
+  {
+    name: "o",
+    probability: 1,
+    condition: new RegExp("o$"),
+    action: noun => noun.replace(/o$/, "an")
+  },
+  {
+    name: "u",
+    probability: 1,
+    condition: new RegExp("u$"),
+    action: noun => noun + "an"
+  },
+  {
+    name: "i",
+    probability: 1,
+    condition: new RegExp("i$"),
+    action: noun => noun + "an"
+  },
+  {
+    name: "e",
+    probability: 1,
+    condition: new RegExp("e$"),
+    action: noun => noun + "an"
+  },
+  {
+    name: "ay",
+    probability: 1,
+    condition: new RegExp("ay$"),
+    action: noun => noun + "an"
+  },
+  {
+    name: "os",
+    probability: 1,
+    condition: new RegExp("os$"),
+    action: noun => {
+      const root = trimVowels(noun.slice(0, -2), 0);
+      if (root.length < 4) return noun.slice(0, -1);
+      return root + "ian";
+    }
+  },
+  {
+    name: "es",
+    probability: 1,
+    condition: new RegExp("es$"),
+    action: noun => {
+      const root = trimVowels(noun.slice(0, -2), 0);
+      if (root.length > 7) return noun.slice(0, -1);
+      return root + "ian";
+    }
+  },
+  {
+    name: "l",
+    probability: 0.8,
+    condition: new RegExp("l$"),
+    action: noun => noun + "ese"
+  },
+  {
+    name: "n",
+    probability: 0.8,
+    condition: new RegExp("n$"),
+    action: noun => noun + "ese"
+  },
+  {
+    name: "ad",
+    probability: 0.8,
+    condition: new RegExp("ad$"),
+    action: noun => noun + "ian"
+  },
+  {
+    name: "an",
+    probability: 0.8,
+    condition: new RegExp("an$"),
+    action: noun => noun + "ian"
+  },
+  {
+    name: "ish",
+    probability: 0.25,
+    condition: new RegExp("^[a-zA-Z]{6}$"),
+    action: noun => trimVowels(noun.slice(0, -1)) + "ish"
+  },
+  {
+    name: "an",
+    probability: 0.5,
+    condition: new RegExp("^[a-zA-Z]{0-7}$"),
+    action: noun => trimVowels(noun) + "an"
+  }
+];
+
+// get adjective form from noun
+function getAdjective(noun) {
+  for (const rule of adjectivizationRules) {
+    if (P(rule.probability) && rule.condition.test(noun)) {
+      return rule.action(noun);
+    }
+  }
+  return noun; // no rule applied, return noun as is
+}
+
+// get ordinal from integer: 1 => 1st
+const nth = n => n + (["st", "nd", "rd"][((((n + 90) % 100) - 10) % 10) - 1] || "th");
+
+// get two-letters code (abbreviation) from string
+function abbreviate(name, restricted = []) {
+  const parsed = name.replace("Old ", "O ").replace(/[()]/g, ""); // remove Old prefix and parentheses
+  const words = parsed.split(" ");
+  const letters = words.join("");
+
+  let code = words.length === 2 ? words[0][0] + words[1][0] : letters.slice(0, 2);
+  for (let i = 1; i < letters.length - 1 && restricted.includes(code); i++) {
+    code = letters[0] + letters[i].toUpperCase();
+  }
+  return code;
+}
+
+// conjunct array: [A,B,C] => "A, B and C"
+function list(array) {
+  if (!Intl.ListFormat) return array.join(", ");
+  const conjunction = new Intl.ListFormat(window.lang || "en", {style: "long", type: "conjunction"});
+  return conjunction.format(array);
+}

utils/stringUtils.js

@@ -13,64 +13,6 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-// check if char is vowel or can serve as vowel
-function vowel(c) {
-  return `aeiouyɑ'əøɛœæɶɒɨɪɔɐʊɤɯаоиеёэыуюяàèìòùỳẁȁȅȉȍȕáéíóúýẃőűâêîôûŷŵäëïöüÿẅãẽĩõũỹąęįǫųāēīōūȳăĕĭŏŭǎěǐǒǔȧėȯẏẇạẹịọụỵẉḛḭṵṳ`.includes(c);
-}
-
-// remove vowels from the end of the string
-function trimVowels(string) {
-  while (string.length > 3 && vowel(last(string))) {
-    string = string.slice(0, -1);
-  }
-  return string;
-}
-
-// get adjective form from noun
-function getAdjective(string) {
-  // special cases for some suffixes
-  if (string.length > 8 && string.slice(-6) === "orszag") return string.slice(0, -6);
-  if (string.length > 6 && string.slice(-4) === "stan") return string.slice(0, -4);
-  if (P(0.5) && string.slice(-4) === "land") return string + "ic";
-  if (string.slice(-4) === " Guo") string = string.slice(0, -4);
-
-  // don't change is name ends on suffix
-  if (string.slice(-2) === "an") return string;
-  if (string.slice(-3) === "ese") return string;
-  if (string.slice(-1) === "i") return string;
-
-  const end = string.slice(-1); // last letter of string
-  if (end === "a") return (string += "n");
-  if (end === "o") return (string = trimVowels(string) + "an");
-  if (vowel(end) || end === "c") return (string += "an"); // ceiuy
-  if (end === "m" || end === "n") return (string += "ese");
-  if (end === "q") return (string += "i");
-  return trimVowels(string) + "ian";
-}
-
-// get ordinal out of integer: 1 => 1st
-const nth = n => n + (["st", "nd", "rd"][((((n + 90) % 100) - 10) % 10) - 1] || "th");
-
-// get two-letters code (abbreviation) from string
-function abbreviate(name, restricted = []) {
-  const parsed = name.replace("Old ", "O ").replace(/[()]/g, ""); // remove Old prefix and parentheses
-  const words = parsed.split(" ");
-  const letters = words.join("");
-
-  let code = words.length === 2 ? words[0][0] + words[1][0] : letters.slice(0, 2);
-  for (let i = 1; i < letters.length - 1 && restricted.includes(code); i++) {
-    code = letters[0] + letters[i].toUpperCase();
-  }
-  return code;
-}
-
-// conjunct array: [A,B,C] => "A, B and C"
-function list(array) {
-  if (!Intl.ListFormat) return array.join(", ");
-  const conjunction = new Intl.ListFormat(window.lang || "en", {style: "long", type: "conjunction"});
-  return conjunction.format(array);
-}
-
 // split string into 2 almost equal parts not breaking words
 function splitInTwo(str) {
   const half = str.length / 2;

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.84.10"; // generator version, update each time
+const version = "1.86.08"; // generator version, update each time
 
 {
   document.title += " v" + version;
@@ -28,6 +28,7 @@ const version = "1.84.10"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
+        <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>