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 aircraft spawn contextmenu

Browse Source
This commit is contained in:
dpassoni
2023-03-10 13:07:19 +01:00
parent 60d7b364b6
commit 3dadff6d42
104 changed files with 1443 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,7 @@ export class ContextMenu {
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), aircraftDatabase.getRoles());
this.#aircraftRoleDropdown = new Dropdown("role-options", (role: string) => this.#setAircraftRole(role));
this.#aircraftTypeDropdown = new Dropdown("aircraft-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, [""]);
@@ -36,6 +36,9 @@ export class ContextMenu {
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.#resetAircraftRole();
this.#resetAircraftType();
})
document.addEventListener("contextMenuDeployAircraft", () => {
@@ -77,24 +80,50 @@ export class ContextMenu {
}
}
/********* Aircraft spawn menu *********/
#setAircraftRole(role: string)
{
if (this.#spawnOptions != null)
{
this.#spawnOptions.role = role;
this.#resetAircraftRole();
this.#aircraftTypeDropdown.setOptions(aircraftDatabase.getLabelsByRole(role));
this.#aircraftTypeDropdown.selectValue(0);
}
}
#setAircraftType(type: string)
#resetAircraftRole() {
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
this.#aircraftTypeDropdown.reset();
this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
}
#setAircraftType(label: string)
{
if (this.#spawnOptions != null)
{
this.#spawnOptions.type = type;
this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(type, this.#spawnOptions.role));
this.#resetAircraftType();
var type = aircraftDatabase.getNameByLabel(label);
if (type != null)
{
this.#spawnOptions.type = type;
this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(type, this.#spawnOptions.role));
this.#aircraftLoadoutDropdown.selectValue(0);
var image = (<HTMLImageElement>this.#container?.querySelector("#unit-image"));
image.src = `images/units/${aircraftDatabase.getByLabel(label)?.filename}`;
image.classList.toggle("hide", false);
}
}
}
#resetAircraftType() {
(<HTMLButtonElement>this.#container?.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);
}
#setAircraftLoadout(loadoutName: string)
{
if (this.#spawnOptions != null)
@@ -104,12 +133,16 @@ export class ContextMenu {
{
this.#spawnOptions.loadout = loadout.code;
(<HTMLButtonElement>this.#container?.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(
...items.map((item: any) => {
var div = document.createElement('div');
div.innerText = item;
return div;
})
)
}
}
}
#setUnitsNumber(unitsNumber: string)
{
}
}

24
client/src/controls/dropdown.ts
View File

@@ -3,21 +3,24 @@ export class Dropdown {
#options: HTMLElement;
#value: HTMLElement;
#callback: CallableFunction;
#defaultValue: string;
#optionsList: string[] = [];
constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
{
this.#element = <HTMLElement>document.getElementById(ID);
var element = this.#element;
this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
this.#defaultValue = this.#value.innerText;
this.#callback = callback;
if (options != null)
this.setOptions(options);
}
setOptions(options: string[])
setOptions(optionsList: string[])
{
this.#options.replaceChildren(...options.map((option: string) => {
this.#optionsList = optionsList;
this.#options.replaceChildren(...optionsList.map((option: string) => {
var div = document.createElement("div");
var button = document.createElement("button");
button.textContent = option;
@@ -29,4 +32,19 @@ export class Dropdown {
return div;
}));
}
selectValue(idx: number)
{
if (idx < this.#optionsList.length)
{
var option = this.#optionsList[idx];
this.#value.innerText = option;
this.#callback(option);
}
}
reset() {
this.#options.replaceChildren();
this.#value.innerText = this.#defaultValue;
}
}