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 airbase element (first panel, spawn panel still to add)

Browse Source
This commit is contained in:
dpassoni 2023-03-14 17:04:02 +01:00
parent 96a4070b39
commit 2a60edcaec
6 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/controls/airbasecontextmenu.ts
View File

@ -1,16 +1,26 @@
import { getUnitsManager } from "..";
import { Airbase } from "../missionhandler/airbase";
import { ContextMenu } from "./contextmenu";
export class AirbaseContextMenu extends ContextMenu {
#airbaseName: string | null = null;
#airbase: Airbase | null = null;
constructor(id: string)
{
super(id);
}
setAirbase(airbase: Airbase)
{
this.#airbase = airbase;
this.setAirbaseName(airbase.getName());
this.setAirbaseProperties(airbase.getProperties());
this.setAirbaseParkings(airbase.getParkings());
this.enableLandButton(getUnitsManager().getSelectedUnitsType() === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === airbase.getCoalition() || airbase.getCoalition() === "neutral"))
}
setAirbaseName(airbaseName: string)
{
this.#airbaseName = airbaseName;
var nameDiv = <HTMLElement>this.getContainer()?.querySelector("#airbase-name");
if (nameDiv != null)
nameDiv.innerText = airbaseName;

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

@ -3,6 +3,8 @@ import { LatLng } from "leaflet";
export class ContextMenu {
#container: HTMLElement | null;
#latlng: LatLng = new LatLng(0, 0);
#x: number = 0;
#y: number = 0;
constructor(id: string) {
this.#container = document.getElementById(id);
@ -12,17 +14,9 @@ export class ContextMenu {
show(x: number, y: number, latlng: LatLng) {
this.#latlng = latlng;
this.#container?.classList.toggle("hide", false);
if (this.#container != null) {
if (x + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = x + "px";
else
this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
if (y + this.#container.offsetHeight < window.innerHeight)
this.#container.style.top = y + "px";
else
this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
}
this.#x = x;
this.#y = y;
this.clip();
}
hide() {
@ -38,4 +32,19 @@ export class ContextMenu {
{
return this.#latlng;
}
clip()
{
if (this.#container != null) {
if (this.#x + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = this.#x + "px";
else
this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
if (this.#y + this.#container.offsetHeight < window.innerHeight)
this.#container.style.top = this.#y + "px";
else
this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
}
}
}

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

@ -45,6 +45,7 @@ export class MapContextMenu extends ContextMenu {
this.#resetAircraftType();
this.#resetGroundUnitRole();
this.#resetGroundUnitType();
this.clip();
})
document.addEventListener("contextMenuDeployAircraft", () => {
@ -88,6 +89,7 @@ export class MapContextMenu extends ContextMenu {
this.#aircraftTypeDropdown.setOptions(aircraftDatabase.getLabelsByRole(role));
this.#aircraftTypeDropdown.selectValue(0);
}
this.clip();
}
#resetAircraftRole() {
@ -96,6 +98,7 @@ export class MapContextMenu extends ContextMenu {
this.#aircraftRoleDropdown.reset();
this.#aircraftTypeDropdown.reset();
this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
this.clip();
}
#setAircraftType(label: string)
@ -114,6 +117,7 @@ export class MapContextMenu extends ContextMenu {
image.classList.toggle("hide", false);
}
}
this.clip();
}
#resetAircraftType() {
@ -121,6 +125,7 @@ export class MapContextMenu extends ContextMenu {
(<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
this.#aircraftLoadoutDropdown.reset();
(<HTMLImageElement>this.getContainer()?.querySelector("#unit-image")).classList.toggle("hide", true);
this.clip();
}
#setAircraftLoadout(loadoutName: string)
@ -143,6 +148,7 @@ export class MapContextMenu extends ContextMenu {
)
}
}
this.clip();
}
/********* Ground unit spawn menu *********/
@ -155,6 +161,7 @@ export class MapContextMenu extends ContextMenu {
this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
this.#groundUnitTypeDropdown.selectValue(0);
}
this.clip();
}
#resetGroundUnitRole() {
@ -163,6 +170,7 @@ export class MapContextMenu extends ContextMenu {
this.#groundUnitRoleDropdown.reset();
this.#groundUnitTypeDropdown.reset();
this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
this.clip();
}
#setGroundUnitType(label: string)
@ -177,9 +185,11 @@ export class MapContextMenu extends ContextMenu {
(<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
}
}
this.clip();
}
#resetGroundUnitType() {
(<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
this.clip();
}
}

11
client/src/map/map.ts
View File

@ -1,10 +1,11 @@
import * as L from "leaflet"
import { getUnitsManager } from "..";
import { BoxSelect } from "./boxselect";
import { MapContextMenu, SpawnOptions } from "../controls/mapcontextmenu";
import { MapContextMenu } from "../controls/mapcontextmenu";
import { UnitContextMenu } from "../controls/unitcontextmenu";
import { AirbaseContextMenu } from "../controls/airbasecontextmenu";
import { Dropdown } from "../controls/dropdown";
import { Airbase } from "../missionhandler/airbase";
export const IDLE = "IDLE";
export const MOVE_UNIT = "MOVE_UNIT";
@ -151,16 +152,12 @@ export class Map extends L.Map {
this.#unitContextMenu.hide();
}
showAirbaseContextMenu(e: any, airbaseName: string, airbaseProperties: string[], airbaseParkings: string[], enableLandButton: boolean, airbaseCoalition: string) {
showAirbaseContextMenu(e: any, airbase: Airbase) {
this.hideAllContextMenus();
var x = e.originalEvent.x;
var y = e.originalEvent.y;
this.#airbaseContextMenu.show(x, y, e.latlng);
this.#airbaseContextMenu.setAirbaseName(airbaseName);
this.#airbaseContextMenu.setAirbaseProperties(airbaseProperties);
this.#airbaseContextMenu.setAirbaseParkings(airbaseParkings);
this.#airbaseContextMenu.enableLandButton(enableLandButton);
this.#airbaseContextMenu.setCoalition(airbaseCoalition);
this.#airbaseContextMenu.setAirbase(airbase);
}
getAirbaseContextMenu(){

30
client/src/missionhandler/airbase.ts
View File

@ -11,6 +11,8 @@ export class Airbase extends L.Marker
{
#name: string = "";
#coalition: string = "";
#properties: string[] = [];
#parkings: string[] = [];
constructor(options: AirbaseOptions)
{
@ -24,8 +26,7 @@ export class Airbase extends L.Marker
className: 'leaflet-airbase-marker',
iconSize: [63, 63]
}); // Set the marker, className must be set to avoid white square
this.setIcon(icon);
this.setIcon(icon);
}
setCoalition(coalition: string)
@ -39,8 +40,33 @@ export class Airbase extends L.Marker
return this.#coalition;
}
setName(name: string)
{
this.#name = name;
}
getName()
{
return this.#name;
}
setProperties(properties: string[])
{
this.#properties = properties;
}
getProperties()
{
return this.#properties;
}
setParkings(parkings: string[])
{
this.#parkings = parkings;
}
getParkings()
{
return this.#parkings;
}
}

5
client/src/missionhandler/missionhandler.ts
View File

@ -72,13 +72,14 @@ export class MissionHandler
{
this.#airbasesMarkers[idx].setLatLng(new LatLng(airbase.lat, airbase.lng));
this.#airbasesMarkers[idx].setCoalition(airbase.coalition);
this.#airbasesMarkers[idx].setProperties(["test1", "test2"]);
this.#airbasesMarkers[idx].setParkings(["2x big", "5x small"]);
}
}
}
#onAirbaseClick(e: any)
{
var enableLandHere = getUnitsManager().getSelectedUnitsType() === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === e.sourceTarget.getCoalition() || e.sourceTarget.getActiveCoalition === "neutral");
getMap().showAirbaseContextMenu(e, e.sourceTarget.getName(), ["test1", "tes2"], ["2x small", "3x large"], enableLandHere, e.sourceTarget.getActiveCoalition);
getMap().showAirbaseContextMenu(e, e.sourceTarget);
}
}