Skip to content

Commit 4149374

Browse files
CopilotAzgaar
Copilot
and
Azgaar
authored
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>
1 parent 439cace commit 4149374

File tree

5 files changed

+54
-9
lines changed

5 files changed

+54
-9
lines changed

‎public/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1437,6 +1437,10 @@ div.states.hovered {
14371437
background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
14381438
}
14391439

1440+
#mergeStatesForm div[data-id].hovered {
1441+
background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
1442+
}
1443+
14401444
div.states > *,
14411445
div.states sup,
14421446
div.totalLine > div {

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

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1290,27 +1290,67 @@ function openStateMergeDialog() {
12901290
const statesSelector = validStates
12911291
.map(
12921292
s => /* html */ `
1293-
<div data-tip="${s.fullName}">
1293+
<div data-id="${s.i}" data-tip="${s.fullName}" style="cursor:default">
12941294
<input type="radio" name="rulingState" value="${s.i}" />
1295-
<input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}"} />
1296-
<label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label>
1295+
<input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}" />
1296+
<label for="selectState${s.i}" class="checkbox-label"><fill-box fill="${s.color}" disabled></fill-box>${emblem(s.i)}${s.fullName}</label>
12971297
</div>
12981298
`
12991299
)
13001300
.join("");
13011301

13021302
alertMessage.innerHTML = /* html */ `
13031303
<form id='mergeStatesForm' style="overflow: hidden; display: flex; flex-direction: column; gap: 1em;">
1304-
<header style='font-weight:bold;'>Select multiple states to merge and the ruling state to merge into</header>
1304+
<p style="margin:0">
1305+
Check the <b>checkbox</b> next to each state you want to merge.
1306+
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).
1307+
Hover over a row to highlight the state on the map.
1308+
</p>
13051309
<main style='display: grid; grid-template-columns: 1fr 1fr; gap: .3em;'>
13061310
${statesSelector}
13071311
</main>
13081312
</form>
13091313
`;
13101314

1315+
byId("mergeStatesForm")
1316+
.querySelectorAll("div[data-id]")
1317+
.forEach(el => {
1318+
el.addEventListener("mouseenter", highlightStateOnMergeHover);
1319+
el.addEventListener("mouseleave", stateHighlightOff);
1320+
});
1321+
1322+
function highlightStateOnMergeHover(event) {
1323+
if (!layerIsOn("toggleStates")) return;
1324+
const state = +event.currentTarget.dataset.id;
1325+
if (!state) return;
1326+
const d = regions.select("#state" + state).attr("d");
1327+
if (!d) return;
1328+
1329+
stateHighlightOff();
1330+
1331+
const path = debug
1332+
.append("path")
1333+
.attr("class", "highlight")
1334+
.attr("d", d)
1335+
.attr("fill", "none")
1336+
.attr("stroke", "red")
1337+
.attr("stroke-width", 1)
1338+
.attr("opacity", 1)
1339+
.attr("filter", "url(#blur1)");
1340+
1341+
const totalLength = path.node().getTotalLength();
1342+
const duration = (totalLength + 5000) / 2;
1343+
const interpolate = d3.interpolateString(`0, ${totalLength}`, `${totalLength}, ${totalLength}`);
1344+
path
1345+
.transition()
1346+
.duration(duration)
1347+
.attrTween("stroke-dasharray", () => interpolate);
1348+
}
1349+
13111350
$("#alert").dialog({
1312-
width: fitContent(),
1351+
width: 600,
13131352
title: `Merge states`,
1353+
close: stateHighlightOff,
13141354
buttons: {
13151355
Merge: function () {
13161356
const formData = new FormData(byId("mergeStatesForm"));

‎public/modules/ui/general.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ function showMapTooltip(point, e, i, g) {
238238
if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
239239
if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
240240
if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
241+
if (document.getElementById("mergeStatesForm")?.offsetParent) highlightEditorLine(byId("mergeStatesForm"), state);
241242
} else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
242243
const culture = pack.cells.culture[i];
243244
tip("Culture: " + pack.cultures[culture].name);
@@ -246,7 +247,7 @@ function showMapTooltip(point, e, i, g) {
246247
}
247248

248249
function highlightEditorLine(editor, id, timeout = 10000) {
249-
Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
250+
Array.from(editor.getElementsByClassName("hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
250251
const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
251252
if (hovered) hovered.classList.add("hovered"); // add hovered class
252253
if (timeout)

‎public/versioning.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
* Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
1414
*/
1515

16-
const VERSION = "1.113.0";
16+
const VERSION = "1.113.1";
1717
if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
1818

1919
{

‎src/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140

141141
<link
142142
rel="preload"
143-
href="index.css?v=1.109.1"
143+
href="index.css?v=1.113.1"
144144
as="style"
145145
onload="
146146
this.onload = null;
@@ -8528,7 +8528,7 @@
85288528
<script defer src="modules/ui/layers.js?v=1.111.0"></script>
85298529
<script defer src="modules/ui/measurers.js?v=1.99.00"></script>
85308530
<script defer src="modules/ui/style-presets.js?v=1.100.00"></script>
8531-
<script defer src="modules/ui/general.js?v=1.100.00"></script>
8531+
<script defer src="modules/ui/general.js?v=1.113.1"></script>
85328532
<script defer src="modules/ui/options.js?v=1.106.2"></script>
85338533
<script defer src="main.js?v=1.111.0"></script>
85348534

0 commit comments

Comments
 (0)