Added data, set list size limit

This commit is contained in:
PeekabooSteam 2023-12-18 20:52:15 +00:00
parent 48f962ca4b
commit dbe2442bb7
2 changed files with 20 additions and 2 deletions

View File

@ -246,6 +246,7 @@
#spawn-history-menu button {
border-radius: 0;
height:32px;
text-align: left;
width:100%;
}

View File

@ -8,6 +8,7 @@ import { AirDefenceUnitSpawnMenu, AircraftSpawnMenu, GroundUnitSpawnMenu, Helico
import { Airbase } from "../mission/airbase";
import { SmokeMarker } from "../map/markers/smokemarker";
import { UnitSpawnTable } from "../interfaces";
import { getUnitDatabaseByCategory } from "../other/utils";
/** The MapContextMenu is the main contextmenu shown to the user whenever it rightclicks on the map. It is the primary interaction method for the user.
* It allows to spawn units, create explosions and smoke, and edit CoalitionAreas.
@ -266,6 +267,8 @@ export class MapContextMenu extends ContextMenu {
*
*/
#setupHistory() {
/* Set up the tab clicks */
const spawnModes = this.getContainer()?.querySelectorAll(".spawn-mode");
const activeCoalitionLabel = document.getElementById("active-coalition-label");
this.getContainer()?.querySelectorAll(".spawn-mode-tab").forEach((btn:Element) => {
@ -275,11 +278,13 @@ export class MapContextMenu extends ContextMenu {
const prevSiblings = [];
let prev = btn.previousElementSibling;
/* Count previous */
while ( prev ) {
prevSiblings.push(prev);
prev = prev.previousElementSibling;
}
/* Tabs and content windows are assumed to be in the same order */
if (spawnModes && spawnModes[prevSiblings.length]) {
spawnModes[prevSiblings.length].classList.remove("hide");
}
@ -288,7 +293,10 @@ export class MapContextMenu extends ContextMenu {
});
});
const history = <HTMLDivElement>document.getElementById("spawn-history-menu");
const history = <HTMLDivElement>document.getElementById("spawn-history-menu");
const maxEntries = 20;
/** Listen for unit spawned **/
document.addEventListener( "unitSpawned", (ev:CustomEventInit) => {
const buttons = history.querySelectorAll("button");
const detail:any = ev.detail;
@ -297,7 +305,9 @@ export class MapContextMenu extends ContextMenu {
button.setAttribute("data-spawned-coalition", detail.coalition);
button.setAttribute("data-unit-type", detail.unitSpawnTable[0].unitType);
button.setAttribute("data-unit-qty", detail.unitSpawnTable.length);
button.innerHTML = `${detail.unitSpawnTable[0].unitType} (${detail.unitSpawnTable.length})`;
const db = getUnitDatabaseByCategory(detail.category);
button.innerHTML = `${db?.getByName(detail.unitSpawnTable[0].unitType)?.label} (${detail.unitSpawnTable.length})`;
// Remove a previous instance to save clogging up the list
const previous:any = [].slice.call(buttons).find( (button:Element) => (
@ -307,6 +317,7 @@ export class MapContextMenu extends ContextMenu {
if (previous instanceof HTMLElement) previous.remove();
/* Click to do the spawn */
button.addEventListener("click", (ev:MouseEventInit) => {
detail.unitSpawnTable.forEach((table:UnitSpawnTable, i:number) => {
table.location = this.getLatLng(); // Set to new menu location
@ -315,7 +326,13 @@ export class MapContextMenu extends ContextMenu {
getApp().getUnitsManager().spawnUnits(detail.category, detail.unitSpawnTable, detail.coalition, detail.immediate, detail.airbase, detail.country);
});
/* Insert into DOM */
history.prepend(button);
/* Trim down to max number of entries */
while (history.querySelectorAll("button").length > maxEntries) {
history.childNodes[maxEntries].remove();
}
});
}
}