Finished styling; menu closes on click

This commit is contained in:
PeekabooSteam 2023-12-20 17:08:04 +00:00
parent dbe2442bb7
commit 6c315d89e1
2 changed files with 19 additions and 8 deletions

View File

@ -266,7 +266,7 @@
[data-coalition="blue"].deploy-unit-button,
[data-coalition="blue"]#spawn-airbase-aircraft-button,
[data-coalition="blue"].create-iads-button,
[data-coalition="blue"] + .upper-bar .spawn-mode-tabs button.active {
[data-coalition="blue"] + #spawn-mode-tabs button.selected {
background-color: var(--primary-blue)
}
@ -274,7 +274,7 @@
[data-coalition="red"].deploy-unit-button,
[data-coalition="red"]#spawn-airbase-aircraft-button,
[data-coalition="red"].create-iads-button,
[data-coalition="red"] + .upper-bar .spawn-mode-tabs button.active {
[data-coalition="red"] + #spawn-mode-tabs button.selected {
background-color: var(--primary-red)
}
@ -282,7 +282,7 @@
[data-coalition="neutral"].deploy-unit-button,
[data-coalition="neutral"]#spawn-airbase-aircraft-button,
[data-coalition="neutral"].create-iads-button,
[data-coalition="neutral"] + .upper-bar .spawn-mode-tabs button.active {
[data-coalition="neutral"] + #spawn-mode-tabs button.selected {
background-color: var(--primary-neutral)
}

View File

@ -262,33 +262,43 @@ export class MapContextMenu extends ContextMenu {
this.#navyUnitSpawnMenu.setCountries();
}
/** Handles all of the logic for historal logging.
*
*/
#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) => {
const tabs = this.getContainer()?.querySelectorAll(".spawn-mode-tab");
// Default selected tab to the "spawn now" option
if (tabs) tabs[tabs.length-1].classList.add("selected");
tabs?.forEach((btn:Element) => {
btn.addEventListener("click", (ev:MouseEventInit) => {
// Highlight tab
tabs.forEach(tab => tab.classList.remove("selected"));
btn.classList.add("selected");
// Hide/reset
spawnModes?.forEach(div => div.classList.add("hide"));
const prevSiblings = [];
let prev = btn.previousElementSibling;
/* Count previous */
/* Tabs and content windows are assumed to be in the same order */
// Count previous
while ( prev ) {
prevSiblings.push(prev);
prev = prev.previousElementSibling;
}
/* Tabs and content windows are assumed to be in the same order */
// Show content
if (spawnModes && spawnModes[prevSiblings.length]) {
spawnModes[prevSiblings.length].classList.remove("hide");
}
// We don't want to see the "Spawn [coalition] unit" label
if (activeCoalitionLabel) activeCoalitionLabel.classList.toggle("hide", !btn.hasAttribute("data-show-label"));
});
});
@ -324,6 +334,7 @@ export class MapContextMenu extends ContextMenu {
table.location.lat += 0.00015 * i;
});
getApp().getUnitsManager().spawnUnits(detail.category, detail.unitSpawnTable, detail.coalition, detail.immediate, detail.airbase, detail.country);
this.hide();
});
/* Insert into DOM */