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

Added basic ability to draw poligons

Browse Source
This commit is contained in:
Pax1601
2023-06-16 17:32:09 +02:00
parent ca7c52ff67
commit ad3b1cb167
14 changed files with 375 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
client/src/controls/coalitionareacontextmenu.ts Normal file
View File

@@ -0,0 +1,71 @@
import { CoalitionArea } from "../map/coalitionarea";
import { groundUnitsDatabase } from "../units/groundunitsdatabase";
import { ContextMenu } from "./contextmenu";
import { Dropdown } from "./dropdown";
import { Slider } from "./slider";
import { Switch } from "./switch";
const unitRole = ["AAA", "MANPADS", "Short range SAM", "Long range SAM", "Radar"];
export class CoalitionAreaContextMenu extends ContextMenu {
#coalitionSwitch: Switch;
#coalitionArea: CoalitionArea|null = null;
#iadsDensitySlider: Slider;
#iadsRoleDropdown: Dropdown;
//#iadsPeriodDropdown: Dropdown;
constructor(id: string) {
super(id);
this.#coalitionSwitch = new Switch("coalition-area-switch", (value: boolean) => this.#onSwitchClick(value));
this.#coalitionSwitch.setValue(false);
this.#iadsRoleDropdown = new Dropdown("iads-units-role-options", () => {});
//this.#iadsPeriodDropdown = new Dropdown("iads-period-options", () => {});
this.#iadsDensitySlider = new Slider("iads-density-slider", 5, 100, "%", (value: number) => {});
this.#iadsDensitySlider.setIncrement(5);
this.#iadsDensitySlider.setValue(50);
this.#iadsDensitySlider.setActive(true);
document.addEventListener("coalitionAreaContextMenuShow", (e: any) => {
this.showSubMenu(e.detail.type);
});
/* Create the checkboxes to select the unit roles */
this.#iadsRoleDropdown.setOptionsElements(unitRole.map((unitRole: string) => {
var div = document.createElement("div");
div.classList.add("ol-checkbox");
var label = document.createElement("label");
label.title = `Add ${unitRole}s to the IADS`;
var input = document.createElement("input");
input.type = "checkbox";
var span = document.createElement("span");
span.innerText = unitRole;
label.appendChild(input);
label.appendChild(span);
div.appendChild(label);
return div as HTMLElement;
}));
this.hide();
}
showSubMenu(type: string) {
this.getContainer()?.querySelector("#iads-menu")?.classList.toggle("hide", type !== "iads");
this.getContainer()?.querySelector("#iads-button")?.classList.toggle("is-open", type === "iads");
this.clip();
}
getCoalitionArea() {
return this.#coalitionArea;
}
setCoalitionArea(coalitionArea: CoalitionArea) {
this.#coalitionArea = coalitionArea;
}
#onSwitchClick(value: boolean) {
this.getCoalitionArea()?.setCoalition(value? "red": "blue");
}
}

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

@@ -50,6 +50,11 @@ export class Dropdown {
}));
}
setOptionsElements(optionsElements: HTMLElement[]) {
this.#optionsList = [];
this.#options.replaceChildren(...optionsElements);
}
selectText(text: string) {
const index = [].slice.call(this.#options.children).findIndex((opt: Element) => opt.querySelector("button")?.innerText === text);
if (index > -1) {

4
client/src/controls/mapcontextmenu.ts
View File

@@ -45,7 +45,7 @@ export class MapContextMenu extends ContextMenu {
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) => {
document.addEventListener("mapContextMenuShow", (e: any) => {
this.showSubMenu(e.detail.type);
});
@@ -92,7 +92,7 @@ export class MapContextMenu extends ContextMenu {
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("#ground-ol-contexmenu-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.getContainer()?.querySelector("#explosion-menu")?.classList.toggle("hide", type !== "explosion");