From 4149374d31b59faec9b8c7078df35d0a6a6f5aa2 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 19:35:09 +0100 Subject: [PATCH] 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 | 4 ++ .../modules/dynamic/editors/states-editor.js | 50 +++++++++++++++++-- public/modules/ui/general.js | 3 +- public/versioning.js | 2 +- src/index.html | 4 +- 5 files changed, 54 insertions(+), 9 deletions(-) diff --git a/public/index.css b/public/index.css index ea78f087..c46fded9 100644 --- a/public/index.css +++ b/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 { diff --git a/public/modules/dynamic/editors/states-editor.js b/public/modules/dynamic/editors/states-editor.js index e8351218..6d93a919 100644 --- a/public/modules/dynamic/editors/states-editor.js +++ b/public/modules/dynamic/editors/states-editor.js @@ -1290,10 +1290,10 @@ function openStateMergeDialog() { const statesSelector = validStates .map( s => /* html */ ` -
+
- - + +
` ) @@ -1301,16 +1301,56 @@ function openStateMergeDialog() { alertMessage.innerHTML = /* html */ `
-
Select multiple states to merge and the ruling state to merge into
+

+ Check the checkbox next to each state you want to merge. + Use the radio button to pick the ruling state that will absorb all others (its name, color, and capital will be kept). + Hover over a row to highlight the state on the map. +

${statesSelector}
`; + 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")); diff --git a/public/modules/ui/general.js b/public/modules/ui/general.js index ce285287..1849f8a7 100644 --- a/public/modules/ui/general.js +++ b/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) diff --git a/public/versioning.js b/public/versioning.js index d7620449..892d2ea5 100644 --- a/public/versioning.js +++ b/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"); { diff --git a/src/index.html b/src/index.html index d401744f..25d1b3e9 100644 --- a/src/index.html +++ b/src/index.html @@ -140,7 +140,7 @@ - +