From 2a60edcaecd952db5e19020484ce06b55c797854 Mon Sep 17 00:00:00 2001 From: dpassoni Date: Tue, 14 Mar 2023 17:04:02 +0100 Subject: [PATCH] Completed airbase element (first panel, spawn panel still to add) --- client/src/controls/airbasecontextmenu.ts | 14 ++++++++-- client/src/controls/contextmenu.ts | 31 +++++++++++++-------- client/src/controls/mapcontextmenu.ts | 10 +++++++ client/src/map/map.ts | 11 +++----- client/src/missionhandler/airbase.ts | 30 ++++++++++++++++++-- client/src/missionhandler/missionhandler.ts | 5 ++-- 6 files changed, 77 insertions(+), 24 deletions(-) diff --git a/client/src/controls/airbasecontextmenu.ts b/client/src/controls/airbasecontextmenu.ts index 36d14c17..2371dfe6 100644 --- a/client/src/controls/airbasecontextmenu.ts +++ b/client/src/controls/airbasecontextmenu.ts @@ -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 = this.getContainer()?.querySelector("#airbase-name"); if (nameDiv != null) nameDiv.innerText = airbaseName; diff --git a/client/src/controls/contextmenu.ts b/client/src/controls/contextmenu.ts index e0cbf644..b0a5e913 100644 --- a/client/src/controls/contextmenu.ts +++ b/client/src/controls/contextmenu.ts @@ -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"; + } + } } \ No newline at end of file diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts index fea0bc64..1879b576 100644 --- a/client/src/controls/mapcontextmenu.ts +++ b/client/src/controls/mapcontextmenu.ts @@ -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 { (this.getContainer()?.querySelector("#loadout-list")).replaceChildren(); this.#aircraftLoadoutDropdown.reset(); (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 { (this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false; } } + this.clip(); } #resetGroundUnitType() { (this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true; + this.clip(); } } \ No newline at end of file diff --git a/client/src/map/map.ts b/client/src/map/map.ts index 3fbcf385..5fd71279 100644 --- a/client/src/map/map.ts +++ b/client/src/map/map.ts @@ -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(){ diff --git a/client/src/missionhandler/airbase.ts b/client/src/missionhandler/airbase.ts index d0124357..6fbfd411 100644 --- a/client/src/missionhandler/airbase.ts +++ b/client/src/missionhandler/airbase.ts @@ -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; + } } diff --git a/client/src/missionhandler/missionhandler.ts b/client/src/missionhandler/missionhandler.ts index ee885298..ef939ffb 100644 --- a/client/src/missionhandler/missionhandler.ts +++ b/client/src/missionhandler/missionhandler.ts @@ -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); } } \ No newline at end of file