feat: click on burgs count to open the overview screen

index.css

@@ -1990,7 +1990,7 @@ input[type="checkbox"] {
 .checkbox + .checkbox-label:before {
   content: "";
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: bottom;
   width: 0.6em;
   height: 0.6em;
   padding: 0.2em;
@@ -1998,6 +1998,7 @@ input[type="checkbox"] {
   border: 1px solid darkgrey;
   border-radius: 15%;
   background: white;
+  font-family: var(--monospace);
 }
 
 .checkbox:checked + .checkbox-label:before {

index.html

@@ -138,7 +138,7 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.93.04" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.93.10" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
   </head>
@@ -4433,9 +4433,9 @@
           ></span>
         </div>
 
-        <div data-tip="Uncheck to not update state label on name change" style="padding: 0.2em">
+        <div data-tip="Uncheck to not update state label on name change" style="padding-block: 0.2em">
           <input id="stateNameEditorUpdateLabel" class="checkbox" type="checkbox" checked />
-          <label for="stateNameEditorUpdateLabel" class="checkbox-label"><i>Update label</i></label>
+          <label for="stateNameEditorUpdateLabel" class="checkbox-label"><i>Update label on Apply</i></label>
         </div>
       </div>
 
@@ -5268,24 +5268,20 @@
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
         <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
-          <div
+          <div data-tip="Click to sort by burg name" class="sortable alphabetically" data-sortby="name">Burg</div>
-            data-tip="Click to sort by burg name"
-            class="sortable alphabetically icon-sort-name-up"
-            data-sortby="name"
-          >
-            Burg&nbsp;
-          </div>
           <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">
-            Province&nbsp;
+            Province
-          </div>
-          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">
-            State&nbsp;
           </div>
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State</div>
           <div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">
-            Culture&nbsp;
+            Culture
           </div>
-          <div data-tip="Click to sort by burg population" class="sortable" data-sortby="population">
+          <div
-            Population&nbsp;
+            data-tip="Click to sort by burg population"
+            class="sortable icon-sort-number-down"
+            data-sortby="population"
+          >
+            Population
           </div>
           <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
           <div
@@ -5298,10 +5294,11 @@
 
         <div id="burgsBody" class="table"></div>
 
-        <div id="burgsFilters" data-tip="Apply a filter">
+        <div id="burgsFilters" data-tip="Apply a filter" style="padding-block: 0.1em">
-          <span>State: </span>
+          <label for="burgsFilterState">State:</label>
           <select id="burgsFilterState" style="width: 28%"></select>
-          <span>Culture:</span>
+
+          <label for="burgsFilterCulture">Culture:</label>
           <select id="burgsFilterCulture" style="width: 28%"></select>
         </div>
 
@@ -5309,6 +5306,7 @@
           <div data-tip="Burgs displayed" style="margin-left: 4px">
             Burgs:&nbsp;<span id="burgsFooterBurgs">0</span>
           </div>
+
           <div data-tip="Average population" style="margin-left: 14px">
             Average population:&nbsp;<span id="burgsFooterPopulation">0</span>
           </div>
@@ -7996,7 +7994,7 @@
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js?v=1.93.07"></script>
-    <script defer src="modules/ui/editors.js?v=1.92.00"></script>
+    <script defer src="modules/ui/editors.js?v=1.93.10"></script>
     <script defer src="modules/ui/tools.js?v=1.92.00"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.93.00"></script>
@@ -8018,7 +8016,7 @@
     <script defer src="modules/ui/notes-editor.js?v=1.93.09"></script>
     <script defer src="modules/ui/diplomacy-editor.js?v=1.88.04"></script>
     <script defer src="modules/ui/zones-editor.js"></script>
-    <script defer src="modules/ui/burgs-overview.js?v=1.89.20"></script>
+    <script defer src="modules/ui/burgs-overview.js?v=1.93.10"></script>
     <script defer src="modules/ui/rivers-overview.js"></script>
     <script defer src="modules/ui/military-overview.js"></script>
     <script defer src="modules/ui/regiments-overview.js?v=1.89.20"></script>

modules/dynamic/editors/states-editor.js

@@ -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>

modules/ui/burgs-overview.js

@@ -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);
+  byId("burgsOverviewRefresh").addEventListener("click", refreshBurgsEditor);
-  document.getElementById("burgsChart").addEventListener("click", showBurgsChart);
+  byId("burgsChart").addEventListener("click", showBurgsChart);
-  document.getElementById("burgsFilterState").addEventListener("change", burgsOverviewAddLines);
+  byId("burgsFilterState").addEventListener("change", burgsOverviewAddLines);
-  document.getElementById("burgsFilterCulture").addEventListener("change", burgsOverviewAddLines);
+  byId("burgsFilterCulture").addEventListener("change", burgsOverviewAddLines);
-  document.getElementById("regenerateBurgNames").addEventListener("click", regenerateNames);
+  byId("regenerateBurgNames").addEventListener("click", regenerateNames);
-  document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode);
+  byId("addNewBurg").addEventListener("click", enterAddBurgMode);
-  document.getElementById("burgsExport").addEventListener("click", downloadBurgsData);
+  byId("burgsExport").addEventListener("click", downloadBurgsData);
-  document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk);
+  byId("burgNamesImport").addEventListener("click", renameBurgsInBulk);
-  document.getElementById("burgsListToLoad").addEventListener("change", function () {
+  byId("burgsListToLoad").addEventListener("change", function () {
     uploadFile(this, importBurgNames);
   });
-  document.getElementById("burgsLockAll").addEventListener("click", toggleLockAll);
+  byId("burgsLockAll").addEventListener("click", toggleLockAll);
-  document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
+  byId("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
-  document.getElementById("burgsInvertLock").addEventListener("click", invertLock);
+  byId("burgsInvertLock").addEventListener("click", invertLock);
 
   function refreshBurgsEditor() {
     updateFilter();
@@ -44,34 +44,34 @@ function overviewBurgs() {
   }
 
   function updateFilter() {
-    const stateFilter = document.getElementById("burgsFilterState");
+    const stateFilter = byId("burgsFilterState");
-    const selectedState = stateFilter.value || 1;
+    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("all", -1, false, selectedState === -1));
-    stateFilter.options.add(new Option(pack.states[0].name, 0, false, !selectedState));
+    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 cultureFilter = byId("burgsFilterCulture");
-    const selectedCulture = cultureFilter.value || -1;
+    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(`all`, -1, false, selectedCulture === -1));
-    cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, !selectedCulture));
+    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 selectedStateId = +byId("burgsFilterState").value;
-    const selectedCulture = +document.getElementById("burgsFilterCulture").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 (selectedStateId !== -1) filtered = filtered.filter(b => b.state === selectedStateId); // filtered by state
-    if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture
+    if (selectedCultureId !== -1) filtered = filtered.filter(b => b.culture === selectedCultureId); // filtered by culture
 
     body.innerHTML = "";
-    let lines = "",
+    let lines = "";
-      totalPopulation = 0;
+    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";
   }
 }

modules/ui/editors.js

@@ -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();
 }
 

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.93.09"; // generator version, update each time
+const version = "1.93.10"; // generator version, update each time
 
 {
   document.title += " v" + version;