weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completed contextmenu, only missing is callback for smoke spawning

Browse Source
This commit is contained in:
dpassoni
2023-03-10 17:43:54 +01:00
parent 3a9e321e67
commit a896916204
11 changed files with 3221 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
client/src/controls/contextmenu.ts
View File

@@ -2,8 +2,9 @@ import { LatLng } from "leaflet";
import { getActiveCoalition, setActiveCoalition } from "..";
import { ContextMenuOption } from "../@types/dom";
import { ClickEvent } from "../map/map";
import { spawnAircraft } from "../server/server";
import { spawnAircraft, spawnGroundUnit } from "../server/server";
import { aircraftDatabase } from "../units/aircraftdatabase";
import { groundUnitsDatabase } from "../units/groundunitsdatabase";
import { Dropdown } from "./dropdown";
export interface SpawnOptions {
@@ -21,24 +22,32 @@ export class ContextMenu {
#aircraftRoleDropdown: Dropdown;
#aircraftTypeDropdown: Dropdown;
#aircraftLoadoutDropdown: Dropdown;
//#unitsNumberDropdown: Dropdown;
#groundUnitRoleDropdown: Dropdown;
#groundUnitTypeDropdown: Dropdown;
#spawnOptions: SpawnOptions = {role: "", type: "", latlng: this.#latlng, loadout: null, coalition: "blue", airbaseName: null};
constructor(id: string,) {
this.#container = document.getElementById(id);
this.#container?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
this.#aircraftRoleDropdown = new Dropdown("role-options", (role: string) => this.#setAircraftRole(role));
this.#aircraftTypeDropdown = new Dropdown("aircraft-options", (type: string) => this.#setAircraftType(type));
this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
this.#aircraftTypeDropdown = new Dropdown("aircraft-type-options", (type: string) => this.#setAircraftType(type));
this.#aircraftLoadoutDropdown = new Dropdown("loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
//this.#unitsNumberDropdown = new Dropdown("#units-options", this.#setAircraftType, [""]);
this.#groundUnitRoleDropdown = new Dropdown("ground-unit-role-options", (role: string) => this.#setGroundUnitRole(role));
this.#groundUnitTypeDropdown = new Dropdown("ground-unit-type-options", (type: string) => this.#setGroundUnitType(type));
document.addEventListener("contextMenuShow", (e: any) => {
this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
this.#container?.querySelector("#unit-spawn-aircraft")?.classList.toggle("is-open", e.detail.type === "aircraft");
this.#container?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", e.detail.type === "aircraft");
this.#container?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", e.detail.type !== "ground-unit");
this.#container?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", e.detail.type === "ground-unit");
this.#container?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", e.detail.type !== "smoke");
this.#container?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", e.detail.type === "smoke");
this.#resetAircraftRole();
this.#resetAircraftType();
this.#resetGroundUnitRole();
this.#resetGroundUnitType();
})
document.addEventListener("contextMenuDeployAircraft", () => {
@@ -48,6 +57,13 @@ export class ContextMenu {
spawnAircraft(this.#spawnOptions);
})
document.addEventListener("contextMenuDeployGroundUnit", () => {
this.hide();
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions)
spawnGroundUnit(this.#spawnOptions);
})
this.hide();
}
@@ -93,8 +109,9 @@ export class ContextMenu {
}
#resetAircraftRole() {
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
this.#aircraftRoleDropdown.reset();
this.#aircraftTypeDropdown.reset();
this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
}
@@ -118,7 +135,7 @@ export class ContextMenu {
}
#resetAircraftType() {
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
this.#aircraftLoadoutDropdown.reset();
(<HTMLImageElement>this.#container?.querySelector("#unit-image")).classList.toggle("hide", true);
@@ -132,7 +149,7 @@ export class ContextMenu {
if (loadout)
{
this.#spawnOptions.loadout = loadout.code;
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = false;
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
var items = loadout.items.map((item: any) => {return `${item.quantity}x ${item.name}`;});
items.length == 0? items.push("Empty loadout"): "";
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren(
@@ -145,4 +162,42 @@ export class ContextMenu {
}
}
}
/********* Ground unit spawn menu *********/
#setGroundUnitRole(role: string)
{
if (this.#spawnOptions != null)
{
this.#spawnOptions.role = role;
this.#resetGroundUnitRole();
this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
this.#groundUnitTypeDropdown.selectValue(0);
}
}
#resetGroundUnitRole() {
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
this.#groundUnitRoleDropdown.reset();
this.#groundUnitTypeDropdown.reset();
this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
}
#setGroundUnitType(label: string)
{
if (this.#spawnOptions != null)
{
this.#resetGroundUnitType();
var type = groundUnitsDatabase.getNameByLabel(label);
if (type != null)
{
this.#spawnOptions.type = type;
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
}
}
}
#resetGroundUnitType() {
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
}
}