Add the ability to lock states, provinces, cultures, and religions: refactoring (#910)

* Add the ability to lock states, provinces, cultures, and religions (#902)

* Add the basis for locking everything, code and test the culture locking

* Got the religion generator working, but not the tree. There are cycles being generated

* Religions work now, including the tree view

* Got the states and provinces working as well, all good and ready

* Refresh the province editor when regenerating

* Implement the versioning steps

* Fix the state naming and color changing even when locked

* The fix did not work with loaded maps, fix that too

* Fix a few more bugs and address the PR feedback

* Fix the state expanding event when they're locked bug

* Implement some logic to ignore state being locked when regenerating provinces directly.

* refactor(#902): start with states regenertion

* refactor(#902): locked states cells to be assigned on start

* refactor(#902): lock state - keep label

* refactor(#902): lock provinces

* refactor(#902): regenerate states - update provinces

* refactor(#902): regenerate cultures

* refactor(#902): regenerate religions

Co-authored-by: Guillaume St-Pierre <gstpierre01@gmail.com>
Co-authored-by: Azgaar <maxganiev@yandex.com>

modules/dynamic/editors/cultures-editor.js

@@ -228,6 +228,7 @@ function culturesEditorAddLines() {
           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="Lock culture" class="icon-lock${c.lock ? '' : '-open'} hide"></span>
         <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
       </div>`;
   }
@@ -257,6 +258,8 @@ function culturesEditorAddLines() {
   $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));
+  $body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
+  $body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
 
   const $culturesHeader = byId("culturesHeader");
   $culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
@@ -928,3 +931,15 @@ async function uploadCulturesData() {
   drawCultures();
   refreshCulturesEditor();
 }
+
+function updateLockStatus() {
+  if (customization) return;
+
+  const cultureId = +this.parentNode.dataset.id;
+  const classList = this.classList;
+  const c = pack.cultures[cultureId];
+  c.lock = !c.lock;
+
+  classList.toggle("icon-lock-open");
+  classList.toggle("icon-lock");
+}

modules/dynamic/editors/religions-editor.js

@@ -212,6 +212,10 @@ function religionsEditorAddLines() {
       <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="Lock religion, will regenerate the origin folk and organized religion if they are not also locked"
+        class="icon-lock${r.lock ? '' : '-open'} hide"
+      ></span>
       <span data-tip="Remove religion" class="icon-trash-empty hide"></span>
     </div>`;
   }
@@ -242,6 +246,8 @@ function religionsEditorAddLines() {
   $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));
+  $body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
+  $body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
 
   if ($body.dataset.type === "percentage") {
     $body.dataset.type = "absolute";
@@ -755,3 +761,15 @@ function closeReligionsEditor() {
   exitReligionsManualAssignment("close");
   exitAddReligionMode();
 }
+
+function updateLockStatus() {
+  if (customization) return;
+
+  const religionId = +this.parentNode.dataset.id;
+  const classList = this.classList;
+  const r = pack.religions[religionId];
+  r.lock = !r.lock;
+
+  classList.toggle("icon-lock-open");
+  classList.toggle("icon-lock");
+}

modules/dynamic/editors/states-editor.js

@@ -153,6 +153,8 @@ function addListeners() {
     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);
+    else if (classList.contains("icon-lock") || classList.contains("icon-lock-open"))
+      updateLockStatus(stateId, classList);
   });
 
   $body.on("input", function (ev) {
@@ -288,6 +290,9 @@ function statesEditorAddLines() {
       <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
       <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
       <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
+      <span data-tip="Lock the state to protect it from re-generation" class="icon-lock${
+        s.lock ? "" : "-open"
+      } hide"></span>
       <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
     </div>`;
   }
@@ -1362,3 +1367,11 @@ function closeStatesEditor() {
   debug.selectAll(".highlight").remove();
   $body.innerHTML = "";
 }
+
+function updateLockStatus(stateId, classList) {
+  const s = pack.states[stateId];
+  s.lock = !s.lock;
+
+  classList.toggle("icon-lock-open");
+  classList.toggle("icon-lock");
+}