backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-02-04 17:41:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: enhance search functionality

Browse source
This commit is contained in:
Azgaar 2026-01-11 03:53:58 +01:00
parent 3e339b78d4
commit 51f9db39b6
6 changed files with 91 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

46
index.html
View file

@ -5374,7 +5374,9 @@
data-tip="Apply a filter" data-tip="Apply a filter"
style="padding-block: 0.1em; display: flex; gap: 0.5em; width: 100%" 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" <label for="burgsFilterState"
>State: >State:
@ -5389,7 +5391,7 @@
<div id="burgsFooter" class="totalLine"> <div id="burgsFooter" class="totalLine">
<div data-tip="Burgs displayed" style="margin-left: 4px"> <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>
<div data-tip="Average population" style="margin-left: 14px"> <div data-tip="Average population" style="margin-left: 14px">
@ -5466,15 +5468,11 @@
</div> </div>
</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="routesBody" class="table"></div>
<div id="routesFooter" class="totalLine"> <div id="routesFooter" class="totalLine">
<div data-tip="Routes number" style="margin-left: 4px"> <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>
<div data-tip="Average length" style="margin-left: 12px"> <div data-tip="Average length" style="margin-left: 12px">
Average length:&nbsp;<span id="routesFooterLength">0</span> Average length:&nbsp;<span id="routesFooterLength">0</span>
@ -5495,11 +5493,14 @@
></button> ></button>
<button id="routesLockAll" data-tip="Lock or unlock all routes" class="icon-lock"></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> <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> </div>
<div id="riversOverview" class="dialog stable" style="display: none"> <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"> <div data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">
River&nbsp; River&nbsp;
</div> </div>
@ -5520,10 +5521,6 @@
</div> </div>
</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="riversBody" class="table"></div>
<div id="riversFooter" class="totalLine"> <div id="riversFooter" class="totalLine">
@ -5556,6 +5553,9 @@
class="icon-download" class="icon-download"
></button> ></button>
<button id="riversRemoveAll" data-tip="Remove all rivers" class="icon-trash"></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>
</div> </div>
@ -5723,15 +5723,17 @@
></div> ></div>
</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 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 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>
</div> </div>
@ -8567,12 +8569,12 @@
<script defer src="modules/ui/ai-generator.js?v=1.108.8"></script> <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/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/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/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/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/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/battle-screen.js?v=1.108.5"></script>
<script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script> <script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>

30
modules/ui/burgs-overview.js
View file

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

40
modules/ui/markers-overview.js
View file

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

41
modules/ui/rivers-overview.js
View file

@ -5,7 +5,7 @@ function overviewRivers() {
closeDialogs("#riversOverview, .stable"); closeDialogs("#riversOverview, .stable");
if (!layerIsOn("toggleRivers")) toggleRivers(); if (!layerIsOn("toggleRivers")) toggleRivers();
const body = document.getElementById("riversBody"); const body = byId("riversBody");
riversOverviewAddLines(); riversOverviewAddLines();
$("#riversOverview").dialog(); $("#riversOverview").dialog();
@ -20,23 +20,22 @@ function overviewRivers() {
}); });
// add listeners // 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 // add line for each river
function riversOverviewAddLines() { function riversOverviewAddLines() {
body.innerHTML = ""; body.innerHTML = "";
let lines = ""; let lines = "";
const unit = distanceUnitInput.value; 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) { if (searchText) {
filteredRivers = filteredRivers.filter(r => { filteredRivers = filteredRivers.filter(r => {
const name = (r.name || "").toLowerCase(); const name = (r.name || "").toLowerCase();
@ -77,22 +76,20 @@ function overviewRivers() {
body.insertAdjacentHTML("beforeend", lines); body.insertAdjacentHTML("beforeend", lines);
// update footer // 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"; 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; 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; riversFooterWidth.innerHTML = rn(averageWidth * distanceScale, 3) + " " + unit;
// add listeners // 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); applySorting(riversHeader);
} }

12
modules/ui/routes-overview.js
View file

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

2
versioning.js
View file

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