Added code to show spawn menu from airbase spawn

This commit is contained in:
dpassoni 2023-03-14 17:30:16 +01:00
parent 4e46819839
commit 16b5e89a3e
4 changed files with 51 additions and 15 deletions

View File

@ -1,4 +1,4 @@
import { getUnitsManager } from "..";
import { getMap, getUnitsManager, setActiveCoalition } from "..";
import { Airbase } from "../missionhandler/airbase";
import { ContextMenu } from "./contextmenu";
@ -8,6 +8,9 @@ export class AirbaseContextMenu extends ContextMenu {
constructor(id: string)
{
super(id);
document.addEventListener("contextMenuSpawnAirbase", (e: any) => {
this.showSpawnMenu();
})
}
setAirbase(airbase: Airbase)
@ -53,6 +56,16 @@ export class AirbaseContextMenu extends ContextMenu {
enableLandButton(enableLandButton: boolean)
{
this.getContainer()?.querySelector("#land-here-button")?.classList.toggle("hide", !enableLandButton);
}
showSpawnMenu()
{
if (this.#airbase != null)
{
setActiveCoalition(this.#airbase.getCoalition());
getMap().showMapContextMenu({originalEvent: {x: this.getX(), y: this.getY(), latlng: this.getLatLng()}});
getMap().getMapContextMenu().hideUpperBar();
getMap().getMapContextMenu().showSubMenu("aircraft");
}
}
}

View File

@ -33,6 +33,16 @@ export class ContextMenu {
return this.#latlng;
}
getX()
{
return this.#x;
}
getY()
{
return this.#y;
}
clip()
{
if (this.#container != null) {

View File

@ -34,18 +34,7 @@ export class MapContextMenu extends ContextMenu {
this.#groundUnitTypeDropdown = new Dropdown("ground-unit-type-options", (type: string) => this.#setGroundUnitType(type));
document.addEventListener("contextMenuShow", (e: any) => {
this.getContainer()?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
this.getContainer()?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", e.detail.type === "aircraft");
this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", e.detail.type !== "ground-unit");
this.getContainer()?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", e.detail.type === "ground-unit");
this.getContainer()?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", e.detail.type !== "smoke");
this.getContainer()?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", e.detail.type === "smoke");
this.#resetAircraftRole();
this.#resetAircraftType();
this.#resetGroundUnitRole();
this.#resetGroundUnitType();
this.clip();
this.showSubMenu(e.detail.type);
})
document.addEventListener("contextMenuDeployAircraft", () => {
@ -68,6 +57,30 @@ export class MapContextMenu extends ContextMenu {
show(x: number, y: number, latlng: LatLng) {
super.show(x, y, latlng);
this.#spawnOptions.latlng = latlng;
this.showUpperBar();
}
showSubMenu(type: string){
this.getContainer()?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", type !== "aircraft");
this.getContainer()?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", type === "aircraft");
this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", type !== "ground-unit");
this.getContainer()?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", type === "ground-unit");
this.getContainer()?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", type !== "smoke");
this.getContainer()?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", type === "smoke");
this.#resetAircraftRole();
this.#resetAircraftType();
this.#resetGroundUnitRole();
this.#resetGroundUnitType();
this.clip();
}
showUpperBar() {
this.getContainer()?.querySelector("#upper-bar")?.classList.toggle("hide", false);
}
hideUpperBar() {
this.getContainer()?.querySelector("#upper-bar")?.classList.toggle("hide", true);
}
#onSwitch(e: any) {

View File

@ -1,6 +1,6 @@
<div id="map-contextmenu">
<div id="active-coalition-label" data-active-coalition="blue"></div>
<div class="ol-panel">
<div id="upper-bar" class="ol-panel">
<label id="context-menu-switch" class="toggle" for="context-menu-toggle">
<input class="toggle-input" name="" type="checkbox" id="context-menu-toggle">
<div data-active-coalition="blue" class="toggle-fill"></div>