feat: enhance search functionality

index.html

@@ -5374,7 +5374,9 @@
           data-tip="Apply a filter"
           style="padding-block: 0.1em; display: flex; gap: 0.5em; width: 100%"
         >
-          <label for="burgsSearch">Search: <input id="burgsSearch" type="search" /></label>
+          <label for="burgsSearch" data-tip="Filter by name, province, state, culture, or group"
+            >Search: <input id="burgsSearch" type="search"
+          /></label>
 
           <label for="burgsFilterState"
             >State:
@@ -5389,7 +5391,7 @@
 
         <div id="burgsFooter" class="totalLine">
           <div data-tip="Burgs displayed" style="margin-left: 4px">
-            Burgs:&nbsp;<span id="burgsFooterBurgs">0</span>
+            Burgs:&nbsp;<span id="burgsFooterBurgs">0 of 0</span>
           </div>
 
           <div data-tip="Average population" style="margin-left: 14px">
@@ -5466,15 +5468,11 @@
           </div>
         </div>
 
-        <div style="padding: 0.3em 0.5em">
-          <input id="routesSearch" type="text" placeholder="Search by name or group..." style="width: 100%" />
-        </div>
-
         <div id="routesBody" class="table"></div>
 
         <div id="routesFooter" class="totalLine">
           <div data-tip="Routes number" style="margin-left: 4px">
-            Total routes:&nbsp;<span id="routesFooterNumber">0</span>
+            Routes:&nbsp;<span id="routesFooterNumber">0</span>
           </div>
           <div data-tip="Average length" style="margin-left: 12px">
             Average length:&nbsp;<span id="routesFooterLength">0</span>
@@ -5495,11 +5493,14 @@
           ></button>
           <button id="routesLockAll" data-tip="Lock or unlock all routes" class="icon-lock"></button>
           <button id="routesRemoveAll" data-tip="Remove all routes" class="icon-trash"></button>
+          <label for="routesSearch" data-tip="Filter by name or group" style="margin-left: 0.2em"
+            >Search: <input id="routesSearch" type="search"
+          /></label>
         </div>
       </div>
 
       <div id="riversOverview" class="dialog stable" style="display: none">
-        <div id="riversHeader" class="header" style="grid-template-columns: 9em 4em 6em 6em 5em 9em">
+        <div id="riversHeader" class="header" style="grid-template-columns: 9em 4em 7em 5em 5em 9em">
           <div data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">
             River&nbsp;
           </div>
@@ -5520,10 +5521,6 @@
           </div>
         </div>
 
-        <div style="padding: 0.3em 0.5em">
-          <input id="riversSearch" type="text" placeholder="Search by name, type, or basin..." style="width: 100%" />
-        </div>
-
         <div id="riversBody" class="table"></div>
 
         <div id="riversFooter" class="totalLine">
@@ -5556,6 +5553,9 @@
             class="icon-download"
           ></button>
           <button id="riversRemoveAll" data-tip="Remove all rivers" class="icon-trash"></button>
+          <label for="riversSearch" data-tip="Filter by name, type or basin" style="margin-left: 0.2em"
+            >Search: <input id="riversSearch" type="search"
+          /></label>
         </div>
       </div>
 
@@ -5723,15 +5723,17 @@
           ></div>
         </div>
 
-        <div style="padding: 0.3em 0.5em">
-          <input id="markersSearch" type="text" placeholder="Search by type..." style="width: 100%" />
-        </div>
-
         <div id="markersBody" class="table"></div>
 
+        <div>
+          <label for="markersSearch" data-tip="Filter by type"
+            >Search: <input id="markersSearch" type="search"
+          /></label>
+        </div>
+
         <div id="markersFooter" class="totalLine">
-          <div data-tip="Markers number" style="margin-left: 4px">
+          <div data-tip="Markers number">
-            Total:&nbsp;<span id="markersFooterNumber">0</span>&nbsp;markers
+            Markers: <span id="markersFooterNumber">0</span> of <span id="markersFooterTotal">0</span>
           </div>
         </div>
 
@@ -8567,12 +8569,12 @@
     <script defer src="modules/ui/ai-generator.js?v=1.108.8"></script>
     <script defer src="modules/ui/diplomacy-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/zones-editor.js?v=1.105.20"></script>
-    <script defer src="modules/ui/burgs-overview.js?v=1.105.15"></script>
+    <script defer src="modules/ui/burgs-overview.js?v=1.110.0"></script>
-    <script defer src="modules/ui/routes-overview.js?v=1.104.3"></script>
+    <script defer src="modules/ui/routes-overview.js?v=1.110.0"></script>
-    <script defer src="modules/ui/rivers-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/rivers-overview.js?v=1.110.0"></script>
     <script defer src="modules/ui/military-overview.js?v=1.108.5"></script>
     <script defer src="modules/ui/regiments-overview.js?v=1.108.5"></script>
-    <script defer src="modules/ui/markers-overview.js?v=1.108.10"></script>
+    <script defer src="modules/ui/markers-overview.js?v=1.110.0"></script>
     <script defer src="modules/ui/regiment-editor.js?v=1.108.5"></script>
     <script defer src="modules/ui/battle-screen.js?v=1.108.5"></script>
     <script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>

modules/ui/burgs-overview.js

@@ -64,24 +64,32 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
 
   // add line for each burg
   function burgsOverviewAddLines() {
+    const searchText = byId("burgsSearch").value.toLowerCase().trim();
     const selectedStateId = +byId("burgsFilterState").value;
     const selectedCultureId = +byId("burgsFilterCulture").value;
-    const searchText = (byId("burgsSearch").value || "").toLowerCase().trim();
+
-    let filtered = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
+    const validBurgs = pack.burgs.filter(b => b.i && !b.removed);
-    if (selectedStateId !== -1) filtered = filtered.filter(b => b.state === selectedStateId); // filtered by state
+    let filtered = validBurgs;
-    if (selectedCultureId !== -1) filtered = filtered.filter(b => b.culture === selectedCultureId); // filtered by culture
+
-    
-    // filter by search text
     if (searchText) {
+      // filter by search text
       filtered = filtered.filter(b => {
-        const name = (b.name || "").toLowerCase();
+        const name = b.name.toLowerCase();
-        const state = (pack.states[b.state]?.name || "").toLowerCase();
+        const state = (pack.states[b.state].name || "").toLowerCase();
         const prov = pack.cells.province[b.cell];
-        const province = prov ? (pack.provinces[prov]?.name || "").toLowerCase() : "";
+        const province = prov ? pack.provinces[prov]?.name.toLowerCase() : "";
-        const culture = (pack.cultures[b.culture]?.name || "").toLowerCase();
+        const culture = (pack.cultures[b.culture].name || "").toLowerCase();
-        return name.includes(searchText) || state.includes(searchText) || province.includes(searchText) || culture.includes(searchText);
+        return (
+          name.includes(searchText) ||
+          state.includes(searchText) ||
+          province.includes(searchText) ||
+          culture.includes(searchText) ||
+          b.group.toLowerCase().includes(searchText)
+        );
       });
     }
+    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 = "";
@@ -133,7 +141,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     body.insertAdjacentHTML("beforeend", lines);
 
     // update footer
-    burgsFooterBurgs.innerHTML = filtered.length;
+    burgsFooterBurgs.innerHTML = `${filtered.length} of ${validBurgs.length}`;
     burgsFooterPopulation.innerHTML = filtered.length ? si(totalPopulation / filtered.length) : 0;
 
     // add listeners

modules/ui/markers-overview.js

@@ -4,18 +4,19 @@ function overviewMarkers() {
   closeDialogs("#markersOverview, .stable");
   if (!layerIsOn("toggleMarkers")) toggleMarkers();
 
-  const markerGroup = document.getElementById("markers");
+  const markerGroup = byId("markers");
-  const body = document.getElementById("markersBody");
+  const body = byId("markersBody");
-  const markersInverPin = document.getElementById("markersInverPin");
+  const markersInverPin = byId("markersInverPin");
-  const markersInverLock = document.getElementById("markersInverLock");
+  const markersInverLock = byId("markersInverLock");
-  const markersFooterNumber = document.getElementById("markersFooterNumber");
+  const markersFooterNumber = byId("markersFooterNumber");
-  const markersOverviewRefresh = document.getElementById("markersOverviewRefresh");
+  const markersOverviewRefresh = byId("markersOverviewRefresh");
-  const markersAddFromOverview = document.getElementById("markersAddFromOverview");
+  const markersAddFromOverview = byId("markersAddFromOverview");
-  const markersGenerationConfig = document.getElementById("markersGenerationConfig");
+  const markersGenerationConfig = byId("markersGenerationConfig");
-  const markersRemoveAll = document.getElementById("markersRemoveAll");
+  const markersRemoveAll = byId("markersRemoveAll");
-  const markersExport = document.getElementById("markersExport");
+  const markersExport = byId("markersExport");
-  const markerTypeInput = document.getElementById("addedMarkerType");
+  const markerTypeInput = byId("addedMarkerType");
-  const markerTypeSelector = document.getElementById("markerTypeSelector");
+  const markerTypeSelector = byId("markerTypeSelector");
+  const markersSearch = byId("markersSearch");
 
   addLines();
 
@@ -27,8 +28,6 @@ function overviewMarkers() {
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 
-  const markersSearch = document.getElementById("markersSearch");
-  
   const listeners = [
     listen(body, "click", handleLineClick),
     listen(markersInverPin, "click", invertPin),
@@ -70,18 +69,16 @@ function overviewMarkers() {
   }
 
   function addLines() {
-    const searchInput = document.getElementById("markersSearch");
-    const searchText = (searchInput?.value || "").toLowerCase().trim();
     let markers = pack.markers;
-    
+
-    // filter by search text
+    const searchText = byId("markersSearch").value.toLowerCase().trim();
     if (searchText) {
       markers = markers.filter(marker => {
         const type = (marker.type || "").toLowerCase();
         return type.includes(searchText);
       });
     }
-    
+
     const lines = markers
       .map(({i, type, icon, pinned, lock}) => {
         return /* html */ `
@@ -107,6 +104,7 @@ function overviewMarkers() {
 
     body.innerHTML = lines;
     markersFooterNumber.innerText = markers.length;
+    markersFooterTotal.innerText = pack.markers.length;
 
     applySorting(markersHeader);
   }
@@ -142,7 +140,7 @@ function overviewMarkers() {
   }
 
   function focusOnMarker(i) {
-    highlightElement(document.getElementById(`marker${i}`), 2);
+    highlightElement(byId(`marker${i}`), 2);
   }
 
   function pinMarker(el, i) {
@@ -180,7 +178,7 @@ function overviewMarkers() {
   }
 
   function toggleMarkerTypeMenu() {
-    document.getElementById("markerTypeSelectMenu").classList.toggle("visible");
+    byId("markerTypeSelectMenu").classList.toggle("visible");
   }
 
   function toggleAddMarker() {
@@ -197,7 +195,7 @@ function overviewMarkers() {
   function removeMarker(i) {
     notes = notes.filter(note => note.id !== `marker${i}`);
     pack.markers = pack.markers.filter(marker => marker.i !== i);
-    document.getElementById(`marker${i}`)?.remove();
+    byId(`marker${i}`)?.remove();
     addLines();
   }
 
@@ -215,7 +213,7 @@ function overviewMarkers() {
       if (lock) return true;
 
       const id = `marker${i}`;
-      document.getElementById(id)?.remove();
+      byId(id)?.remove();
       notes = notes.filter(note => note.id !== id);
       return false;
     });

modules/ui/rivers-overview.js

@@ -5,7 +5,7 @@ function overviewRivers() {
   closeDialogs("#riversOverview, .stable");
   if (!layerIsOn("toggleRivers")) toggleRivers();
 
-  const body = document.getElementById("riversBody");
+  const body = byId("riversBody");
   riversOverviewAddLines();
   $("#riversOverview").dialog();
 
@@ -20,23 +20,22 @@ function overviewRivers() {
   });
 
   // add listeners
-  document.getElementById("riversOverviewRefresh").addEventListener("click", riversOverviewAddLines);
+  byId("riversOverviewRefresh").on("click", riversOverviewAddLines);
-  document.getElementById("addNewRiver").addEventListener("click", toggleAddRiver);
+  byId("addNewRiver").on("click", toggleAddRiver);
-  document.getElementById("riverCreateNew").addEventListener("click", createRiver);
+  byId("riverCreateNew").on("click", createRiver);
-  document.getElementById("riversBasinHighlight").addEventListener("click", toggleBasinsHightlight);
+  byId("riversBasinHighlight").on("click", toggleBasinsHightlight);
-  document.getElementById("riversExport").addEventListener("click", downloadRiversData);
+  byId("riversExport").on("click", downloadRiversData);
-  document.getElementById("riversRemoveAll").addEventListener("click", triggerAllRiversRemove);
+  byId("riversRemoveAll").on("click", triggerAllRiversRemove);
-  document.getElementById("riversSearch").addEventListener("input", riversOverviewAddLines);
+  byId("riversSearch").on("input", riversOverviewAddLines);
 
   // add line for each river
   function riversOverviewAddLines() {
     body.innerHTML = "";
     let lines = "";
     const unit = distanceUnitInput.value;
-    const searchText = (document.getElementById("riversSearch").value || "").toLowerCase().trim();
-    let filteredRivers = pack.rivers;
 
-    // filter by search text
+    let filteredRivers = pack.rivers;
+    const searchText = byId("riversSearch").value.toLowerCase().trim();
     if (searchText) {
       filteredRivers = filteredRivers.filter(r => {
         const name = (r.name || "").toLowerCase();
@@ -77,22 +76,20 @@ function overviewRivers() {
     body.insertAdjacentHTML("beforeend", lines);
 
     // update footer
-    riversFooterNumber.innerHTML = filteredRivers.length;
+    riversFooterNumber.innerHTML = `${filteredRivers.length} of ${pack.rivers.length}`;
-    const averageDischarge = rn(d3.mean(filteredRivers.map(r => r.discharge)));
+    const averageDischarge = rn(d3.mean(filteredRivers.map(r => r.discharge))) || 0;
     riversFooterDischarge.innerHTML = averageDischarge + " m³/s";
-    const averageLength = rn(d3.mean(filteredRivers.map(r => r.length)));
+    const averageLength = rn(d3.mean(filteredRivers.map(r => r.length))) || 0;
     riversFooterLength.innerHTML = averageLength * distanceScale + " " + unit;
-    const averageWidth = rn(d3.mean(filteredRivers.map(r => r.width)), 3);
+    const averageWidth = rn(d3.mean(filteredRivers.map(r => r.width)), 3) || 0;
     riversFooterWidth.innerHTML = rn(averageWidth * distanceScale, 3) + " " + unit;
 
     // add listeners
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev)));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", ev => riverHighlightOn(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev)));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", ev => riverHighlightOff(ev)));
-    body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver));
+    body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.on("click", zoomToRiver));
-    body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor));
+    body.querySelectorAll("div > span.icon-pencil").forEach(el => el.on("click", openRiverEditor));
-    body
+    body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", triggerRiverRemove));
-      .querySelectorAll("div > span.icon-trash-empty")
-      .forEach(el => el.addEventListener("click", triggerRiverRemove));
 
     applySorting(riversHeader);
   }

modules/ui/routes-overview.js

@@ -25,16 +25,16 @@ function overviewRoutes() {
   byId("routesExport").on("click", downloadRoutesData);
   byId("routesLockAll").on("click", toggleLockAll);
   byId("routesRemoveAll").on("click", triggerAllRoutesRemove);
-  byId("routesSearch").addEventListener("input", routesOverviewAddLines);
+  byId("routesSearch").on("input", routesOverviewAddLines);
 
   // add line for each route
   function routesOverviewAddLines() {
     body.innerHTML = "";
     let lines = "";
-    const searchText = (byId("routesSearch").value || "").toLowerCase().trim();
+
     let filteredRoutes = pack.routes;
 
-    // filter by search text
+    const searchText = byId("routesSearch").value.toLowerCase().trim();
     if (searchText) {
       filteredRoutes = filteredRoutes.filter(route => {
         const name = (route.name || "").toLowerCase();
@@ -70,8 +70,8 @@ function overviewRoutes() {
     body.insertAdjacentHTML("beforeend", lines);
 
     // update footer
-    routesFooterNumber.innerHTML = filteredRoutes.length;
+    routesFooterNumber.innerHTML = `${filteredRoutes.length} of ${pack.routes.length}`;
-    const averageLength = rn(d3.mean(filteredRoutes.map(r => r.length)) || 0);
+    const averageLength = rn(d3.mean(filteredRoutes.map(r => r.length)) || 0) || 0;
     routesFooterLength.innerHTML = averageLength * distanceScale + " " + distanceUnitInput.value;
 
     // add listeners
@@ -79,7 +79,7 @@ function overviewRoutes() {
     body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", routeHighlightOff));
     body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.on("click", zoomToRoute));
     body.querySelectorAll("div > span.icon-pencil").forEach(el => el.on("click", openRouteEditor));
-    body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleLockStatus));
+    body.querySelectorAll("div > span.locks").forEach(el => el.on("click", toggleLockStatus));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", triggerRouteRemove));
 
     applySorting(routesHeader);

versioning.js

@@ -13,7 +13,7 @@
  * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
  */
 
-const VERSION = "1.109.2";
+const VERSION = "1.110.0";
 if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
 
 {