Improve Merge States dialog: hover highlight + color boxes + clearer instructions (#1336)

* Initial plan

* Improve Merge States dialog: add hover highlight and clearer instructions

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Address review feedback: remove duplicate header, set width 600px, add reverse map-hover highlight

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Fix reverse highlight clearing; add state color fill-box to merge dialog rows

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Fix highlightEditorLine to clear all .hovered elements, not just .states.hovered

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Bump version to 1.113.1

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Update file hashes for index.css and general.js to 1.113.1

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

public/index.css

@@ -1437,6 +1437,10 @@ div.states.hovered {
   background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
 }
 
+#mergeStatesForm div[data-id].hovered {
+  background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
+}
+
 div.states > *,
 div.states sup,
 div.totalLine > div {

public/modules/dynamic/editors/states-editor.js

@@ -1290,10 +1290,10 @@ function openStateMergeDialog() {
   const statesSelector = validStates
     .map(
       s => /* html */ `
-      <div data-tip="${s.fullName}">
+      <div data-id="${s.i}" data-tip="${s.fullName}" style="cursor:default">
         <input type="radio" name="rulingState" value="${s.i}" />
-        <input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}"} />
+        <input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}" />
-        <label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label>
+        <label for="selectState${s.i}" class="checkbox-label"><fill-box fill="${s.color}" disabled></fill-box>${emblem(s.i)}${s.fullName}</label>
       </div>
     `
     )
@@ -1301,16 +1301,56 @@ function openStateMergeDialog() {
 
   alertMessage.innerHTML = /* html */ `
     <form id='mergeStatesForm' style="overflow: hidden; display: flex; flex-direction: column; gap: 1em;">
-      <header style='font-weight:bold;'>Select multiple states to merge and the ruling state to merge into</header>
+      <p style="margin:0">
+        Check the <b>checkbox</b> next to each state you want to merge.
+        Use the <b>radio button</b> to pick the <em>ruling state</em> that will absorb all others (its name, color, and capital will be kept).
+        Hover over a row to highlight the state on the map.
+      </p>
       <main style='display: grid; grid-template-columns: 1fr 1fr; gap: .3em;'>
         ${statesSelector}
       </main>
     </form>
   `;
 
+  byId("mergeStatesForm")
+    .querySelectorAll("div[data-id]")
+    .forEach(el => {
+      el.addEventListener("mouseenter", highlightStateOnMergeHover);
+      el.addEventListener("mouseleave", stateHighlightOff);
+    });
+
+  function highlightStateOnMergeHover(event) {
+    if (!layerIsOn("toggleStates")) return;
+    const state = +event.currentTarget.dataset.id;
+    if (!state) return;
+    const d = regions.select("#state" + state).attr("d");
+    if (!d) return;
+
+    stateHighlightOff();
+
+    const path = debug
+      .append("path")
+      .attr("class", "highlight")
+      .attr("d", d)
+      .attr("fill", "none")
+      .attr("stroke", "red")
+      .attr("stroke-width", 1)
+      .attr("opacity", 1)
+      .attr("filter", "url(#blur1)");
+
+    const totalLength = path.node().getTotalLength();
+    const duration = (totalLength + 5000) / 2;
+    const interpolate = d3.interpolateString(`0, ${totalLength}`, `${totalLength}, ${totalLength}`);
+    path
+      .transition()
+      .duration(duration)
+      .attrTween("stroke-dasharray", () => interpolate);
+  }
+
   $("#alert").dialog({
-    width: fitContent(),
+    width: 600,
     title: `Merge states`,
+    close: stateHighlightOff,
     buttons: {
       Merge: function () {
         const formData = new FormData(byId("mergeStatesForm"));

public/modules/ui/general.js

@@ -238,6 +238,7 @@ function showMapTooltip(point, e, i, g) {
     if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
     if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
     if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
+    if (document.getElementById("mergeStatesForm")?.offsetParent) highlightEditorLine(byId("mergeStatesForm"), state);
   } else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
     const culture = pack.cells.culture[i];
     tip("Culture: " + pack.cultures[culture].name);
@@ -246,7 +247,7 @@ function showMapTooltip(point, e, i, g) {
 }
 
 function highlightEditorLine(editor, id, timeout = 10000) {
-  Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
+  Array.from(editor.getElementsByClassName("hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
   const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
   if (hovered) hovered.classList.add("hovered"); // add hovered class
   if (timeout)

public/versioning.js

@@ -13,7 +13,7 @@
  * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
  */
 
-const VERSION = "1.113.0";
+const VERSION = "1.113.1";
 if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
 
 {

src/index.html

@@ -140,7 +140,7 @@
 
     <link
       rel="preload"
-      href="index.css?v=1.109.1"
+      href="index.css?v=1.113.1"
       as="style"
       onload="
         this.onload = null;
@@ -8528,7 +8528,7 @@
     <script defer src="modules/ui/layers.js?v=1.111.0"></script>
     <script defer src="modules/ui/measurers.js?v=1.99.00"></script>
     <script defer src="modules/ui/style-presets.js?v=1.100.00"></script>
-    <script defer src="modules/ui/general.js?v=1.100.00"></script>
+    <script defer src="modules/ui/general.js?v=1.113.1"></script>
     <script defer src="modules/ui/options.js?v=1.106.2"></script>
     <script defer src="main.js?v=1.111.0"></script>