mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2026-03-22 07:07:24 +01:00
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>
This commit is contained in:
Copilot
GitHub
parent
439caced87
commit
4149374d31
5 changed files with 54 additions and 9 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}"} />
|
||||
<label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label>
|
||||
<input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}" />
|
||||
<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"));
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue