diff --git a/client/public/stylesheets/other/contextmenus.css b/client/public/stylesheets/other/contextmenus.css index 9aa269a8..d1739e1d 100644 --- a/client/public/stylesheets/other/contextmenus.css +++ b/client/public/stylesheets/other/contextmenus.css @@ -246,6 +246,7 @@ #spawn-history-menu button { border-radius: 0; height:32px; + text-align: left; width:100%; } diff --git a/client/src/contextmenus/mapcontextmenu.ts b/client/src/contextmenus/mapcontextmenu.ts index 38ece85c..8615a986 100644 --- a/client/src/contextmenus/mapcontextmenu.ts +++ b/client/src/contextmenus/mapcontextmenu.ts @@ -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 = document.getElementById("spawn-history-menu"); + const history = 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(); + } }); } } \ No newline at end of file