From ce07c20fff7239155e73fafe592c47650a90f298 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.com>
Date: Sun, 11 Dec 2022 01:37:30 +0300
Subject: [PATCH] feat(#891): edit diplomatic relations in bulk

---
 index.html                     |  2 +-
 modules/ui/diplomacy-editor.js | 65 ++++++++++++++++++++++++++--------
 versioning.js                  |  2 +-
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 18ea0f0f..c6c9915b 100644
--- a/index.html
+++ b/index.html
@@ -7884,7 +7884,7 @@
     <script defer src="modules/ui/burg-editor.js"></script>
     <script defer src="modules/ui/units-editor.js"></script>
     <script defer src="modules/ui/notes-editor.js"></script>
-    <script defer src="modules/ui/diplomacy-editor.js"></script>
+    <script defer src="modules/ui/diplomacy-editor.js?v=1.88.04"></script>
     <script defer src="modules/ui/zones-editor.js"></script>
     <script defer src="modules/ui/burgs-overview.js"></script>
     <script defer src="modules/ui/rivers-overview.js"></script>
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index 9ae32eb7..d5b7b183 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -213,33 +213,70 @@ function editDiplomacy() {
 
   function selectRelation(subjectId, objectId, currentRelation) {
     const states = pack.states;
-
     const subject = states[subjectId];
-    const header = `<div style="margin-bottom: 0.3em"><svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${subject.i}"></use></svg> <b>${subject.fullName}</b></div>`;
+    const object = states[objectId];
 
-    const options = Object.entries(relations)
+    const relationsSelector = Object.entries(relations)
       .map(
-        ([relation, {color, inText, tip}]) =>
-          `<div style="margin-block: 0.2em" data-tip="${tip}"><label class="pointer">
-          <input type="radio" name="relationSelect" value="${relation}" ${currentRelation === relation && "checked"} >
-          <fill-box fill="${color}" size=".8em"></fill-box>
-          ${inText}
-        </label></div>`
+        ([relation, {color, inText, tip}]) => /* html */ `
+          <div data-tip="${tip}">
+            <label class="pointer">
+              <input type="radio" name="relationSelect" value="${relation}"
+              ${currentRelation === relation && "checked"} >
+              <fill-box fill="${color}" size=".8em"></fill-box>
+              ${inText}
+          </label>
+          </div>
+        `
       )
       .join("");
 
-    const object = states[objectId];
-    const footer = `<div style="margin-top: 0.7em"><svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${object.i}"></use></svg> <b>${object.fullName}</b></div>`;
+    const objectsSelector = states
+      .filter(s => s.i && !s.removed && s.i !== subjectId)
+      .map(
+        s => /* html */ `
+          <div data-tip="${s.fullName}">
+            <input id="selectState${s.i}" class="checkbox" type="checkbox" name="objectSelect" value="${s.i}"
+            ${s.i === objectId && "checked"} />
+            <label for="selectState${s.i}" class="checkbox-label">
+              <svg class="coaIcon" viewBox="0 0 200 200">
+                <use href="#stateCOA${s.i}"></use>
+              </svg>
+              ${s.fullName}
+            </label>
+          </div>
+        `
+      )
+      .join("");
 
-    alertMessage.innerHTML = /* html */ `<div style="overflow: hidden">${header} ${options} ${footer}</div>`;
+    alertMessage.innerHTML = /* html */ `
+      <form id='relationsForm' style="overflow: hidden; display: flex; flex-direction: column; gap: .3em; padding: 0.1em 0;">
+        <header>
+          <svg class="coaIcon" viewBox="0 0 200 200">
+            <use href="#stateCOA${subject.i}"></use>
+          </svg>
+          <b>${subject.fullName}</b>
+        </header>
+
+        <main style='display: flex; gap: 1em;'>
+          <section style="display: flex; flex-direction: column; gap: .3em;">${relationsSelector}</section>
+          <section style="display: flex; flex-direction: column; gap: .3em;">${objectsSelector}</section>
+        </main>
+      </form>
+    `;
 
     $("#alert").dialog({
       width: fitContent(),
       title: `Change relations`,
       buttons: {
         Apply: function () {
-          const newRelation = document.querySelector('input[name="relationSelect"]:checked')?.value;
-          changeRelation(subjectId, objectId, currentRelation, newRelation);
+          const formData = new FormData(byId("relationsForm"));
+          const newRelation = formData.get("relationSelect");
+          const objectIds = [...formData.getAll("objectSelect")].map(Number);
+
+          for (const objectId of objectIds) {
+            changeRelation(subjectId, objectId, currentRelation, newRelation);
+          }
           $(this).dialog("close");
         },
         Cancel: function () {
diff --git a/versioning.js b/versioning.js
index 70a3027b..6dbf5bbf 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.88.03"; // generator version, update each time
+const version = "1.88.04"; // generator version, update each time
 
 {
   document.title += " v" + version;