feat: click on burgs count to open the overview screen

This commit is contained in:
Azgaar 2023-11-11 21:05:59 +04:00
parent 9332eb7b38
commit 2fd58e9d35
6 changed files with 60 additions and 59 deletions

View file

@ -152,6 +152,7 @@ function addListeners() {
else if (classList.contains("name")) editStateName(stateId);
else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + stateId, pack.states[stateId]);
else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(stateId);
else if (classList.contains("icon-dot-circled")) overviewBurgs({stateId});
else if (classList.contains("statePopulation")) changePopulation(stateId);
else if (classList.contains("icon-pin")) toggleFog(stateId, classList);
else if (classList.contains("icon-trash-empty")) stateRemovePrompt(stateId);
@ -232,7 +233,7 @@ function statesEditorAddLines() {
<span class="icon-star-empty placeholder hide"></span>
<input class="stateCapital placeholder hide" />
<select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
<span data-tip="Burgs count" class="icon-dot-circled hide" style="padding-right: 1px"></span>
<span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
<span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
<div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
@ -277,7 +278,7 @@ function statesEditorAddLines() {
<select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
s.culture
)}</select>
<span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
<span data-tip="Click to overview state burgs" style="padding-right: 1px" class="icon-dot-circled pointer hide"></span>
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
<span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
<div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>

View file

@ -1,11 +1,11 @@
"use strict";
function overviewBurgs() {
function overviewBurgs(options = {stateId: null, cultureId: null}) {
if (customization) return;
closeDialogs("#burgsOverview, .stable");
if (!layerIsOn("toggleIcons")) toggleIcons();
if (!layerIsOn("toggleLabels")) toggleLabels();
const body = document.getElementById("burgsBody");
const body = byId("burgsBody");
updateFilter();
updateLockAllIcon();
burgsOverviewAddLines();
@ -23,20 +23,20 @@ function overviewBurgs() {
});
// add listeners
document.getElementById("burgsOverviewRefresh").addEventListener("click", refreshBurgsEditor);
document.getElementById("burgsChart").addEventListener("click", showBurgsChart);
document.getElementById("burgsFilterState").addEventListener("change", burgsOverviewAddLines);
document.getElementById("burgsFilterCulture").addEventListener("change", burgsOverviewAddLines);
document.getElementById("regenerateBurgNames").addEventListener("click", regenerateNames);
document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode);
document.getElementById("burgsExport").addEventListener("click", downloadBurgsData);
document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk);
document.getElementById("burgsListToLoad").addEventListener("change", function () {
byId("burgsOverviewRefresh").addEventListener("click", refreshBurgsEditor);
byId("burgsChart").addEventListener("click", showBurgsChart);
byId("burgsFilterState").addEventListener("change", burgsOverviewAddLines);
byId("burgsFilterCulture").addEventListener("change", burgsOverviewAddLines);
byId("regenerateBurgNames").addEventListener("click", regenerateNames);
byId("addNewBurg").addEventListener("click", enterAddBurgMode);
byId("burgsExport").addEventListener("click", downloadBurgsData);
byId("burgNamesImport").addEventListener("click", renameBurgsInBulk);
byId("burgsListToLoad").addEventListener("change", function () {
uploadFile(this, importBurgNames);
});
document.getElementById("burgsLockAll").addEventListener("click", toggleLockAll);
document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
document.getElementById("burgsInvertLock").addEventListener("click", invertLock);
byId("burgsLockAll").addEventListener("click", toggleLockAll);
byId("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
byId("burgsInvertLock").addEventListener("click", invertLock);
function refreshBurgsEditor() {
updateFilter();
@ -44,34 +44,34 @@ function overviewBurgs() {
}
function updateFilter() {
const stateFilter = document.getElementById("burgsFilterState");
const selectedState = stateFilter.value || 1;
const stateFilter = byId("burgsFilterState");
const selectedState = options.stateId !== null ? options.stateId : stateFilter.value || -1;
stateFilter.options.length = 0; // remove all options
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
stateFilter.options.add(new Option(pack.states[0].name, 0, false, !selectedState));
stateFilter.options.add(new Option("all", -1, false, selectedState === -1));
stateFilter.options.add(new Option(pack.states[0].name, 0, false, selectedState === 0));
const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
const cultureFilter = document.getElementById("burgsFilterCulture");
const selectedCulture = cultureFilter.value || -1;
const cultureFilter = byId("burgsFilterCulture");
const selectedCulture = options.cultureId !== null ? options.cultureId : cultureFilter.value || -1;
cultureFilter.options.length = 0; // remove all options
cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1));
cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, !selectedCulture));
cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture === -1));
cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, selectedCulture === 0));
const culturesSorted = pack.cultures.filter(c => c.i && !c.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
culturesSorted.forEach(c => cultureFilter.options.add(new Option(c.name, c.i, false, c.i == selectedCulture)));
}
// add line for each burg
function burgsOverviewAddLines() {
const selectedState = +document.getElementById("burgsFilterState").value;
const selectedCulture = +document.getElementById("burgsFilterCulture").value;
const selectedStateId = +byId("burgsFilterState").value;
const selectedCultureId = +byId("burgsFilterCulture").value;
let filtered = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
if (selectedState != -1) filtered = filtered.filter(b => b.state === selectedState); // filtered by state
if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture
if (selectedStateId !== -1) filtered = filtered.filter(b => b.state === selectedStateId); // filtered by state
if (selectedCultureId !== -1) filtered = filtered.filter(b => b.culture === selectedCultureId); // filtered by culture
body.innerHTML = "";
let lines = "",
totalPopulation = 0;
let lines = "";
let totalPopulation = 0;
for (const b of filtered) {
const population = b.population * populationRate * urbanization;
@ -119,6 +119,7 @@ function overviewBurgs() {
<span data-tip="Remove burg" class="icon-trash-empty"></span>
</div>`;
}
if (!filtered.length) body.innerHTML = /* html */ `<div style="padding-block: 0.3em;">No burgs found</div>`;
body.insertAdjacentHTML("beforeend", lines);
// update footer
@ -362,7 +363,7 @@ function overviewBurgs() {
.attr("height", height - 10)
.attr("stroke-width", 2);
const graph = svg.append("g").attr("transform", `translate(-50, -10)`);
document.getElementById("burgsTreeType").addEventListener("change", updateChart);
byId("burgsTreeType").addEventListener("change", updateChart);
treeLayout(root);
@ -392,7 +393,7 @@ function overviewBurgs() {
function hideInfo(ev) {
burgHighlightOff(ev);
if (!document.getElementById("burgsInfo")) return;
if (!byId("burgsInfo")) return;
burgsInfo.innerHTML = "&#8205;";
d3.select(ev.target).transition().attr("stroke", null);
tip("");
@ -614,11 +615,11 @@ function overviewBurgs() {
});
burgsOverviewAddLines();
document.getElementById("burgsLockAll").className = allLocked ? "icon-lock" : "icon-lock-open";
byId("burgsLockAll").className = allLocked ? "icon-lock" : "icon-lock-open";
}
function updateLockAllIcon() {
const allLocked = pack.burgs.every(({lock, i, removed}) => lock || !i || removed);
document.getElementById("burgsLockAll").className = allLocked ? "icon-lock-open" : "icon-lock";
byId("burgsLockAll").className = allLocked ? "icon-lock-open" : "icon-lock";
}
}

View file

@ -1176,7 +1176,7 @@ function refreshAllEditors() {
// dynamically loaded editors
async function editStates() {
if (customization) return;
const Editor = await import("../dynamic/editors/states-editor.js?v=1.92.00");
const Editor = await import("../dynamic/editors/states-editor.js?v=1.93.10");
Editor.open();
}