mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added basic ability to draw poligons
This commit is contained in:
Pax1601
parent
ca7c52ff67
commit
ad3b1cb167
@ -1,2 +1,3 @@
|
||||
copy .\\node_modules\\leaflet\\dist\\leaflet.css .\\public\\stylesheets\\leaflet\\leaflet.css
|
||||
copy .\\node_modules\\leaflet.nauticscale\\dist\\leaflet.nauticscale.js .\\public\\javascripts\\leaflet.nauticscale.js
|
||||
copy .\\node_modules\\leaflet-path-drag\\dist\\L.Path.Drag.js .\\public\\javascripts\\L.Path.Drag.js
|
||||
11
client/package-lock.json
generated
11
client/package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"formatcoords": "^1.1.3",
|
||||
"leaflet": "^1.9.3",
|
||||
"leaflet-control-mini-map": "^0.4.0",
|
||||
"leaflet-path-drag": "*",
|
||||
"leaflet.nauticscale": "^1.1.0",
|
||||
"morgan": "~1.9.1",
|
||||
"save": "^2.9.0"
|
||||
@ -4060,6 +4061,11 @@
|
||||
"leaflet": ">=1.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet-path-drag": {
|
||||
"version": "1.8.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/leaflet-path-drag/-/leaflet-path-drag-1.8.0-beta.3.tgz",
|
||||
"integrity": "sha512-kpZ6sPOKlR+m+VChIzZZ7XFH4C+VGTrAxgnM4UN5iYl7lJ00iDOxS+r717bDf/xFFHB6n2jpUp9vvzjjteMpeQ=="
|
||||
},
|
||||
"node_modules/leaflet.nauticscale": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet.nauticscale/-/leaflet.nauticscale-1.1.0.tgz",
|
||||
@ -8764,6 +8770,11 @@
|
||||
"integrity": "sha512-qnetYIYFqlrAbX7MaGsAkBsuA2fg3Z4xDRlEXJN1wSrnhNsIhQUzXt7Z3vapdEzx4r7VUqWTaqHYd7eY5C6Gfw==",
|
||||
"requires": {}
|
||||
},
|
||||
"leaflet-path-drag": {
|
||||
"version": "1.8.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/leaflet-path-drag/-/leaflet-path-drag-1.8.0-beta.3.tgz",
|
||||
"integrity": "sha512-kpZ6sPOKlR+m+VChIzZZ7XFH4C+VGTrAxgnM4UN5iYl7lJ00iDOxS+r717bDf/xFFHB6n2jpUp9vvzjjteMpeQ=="
|
||||
},
|
||||
"leaflet.nauticscale": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet.nauticscale/-/leaflet.nauticscale-1.1.0.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"formatcoords": "^1.1.3",
|
||||
"leaflet": "^1.9.3",
|
||||
"leaflet-control-mini-map": "^0.4.0",
|
||||
"leaflet-path-drag": "*",
|
||||
"leaflet.nauticscale": "^1.1.0",
|
||||
"morgan": "~1.9.1",
|
||||
"save": "^2.9.0"
|
||||
|
||||
6
client/public/javascripts/L.Path.Drag.js
Normal file
6
client/public/javascripts/L.Path.Drag.js
Normal file
File diff suppressed because one or more lines are too long
@ -408,7 +408,6 @@ nav.ol-panel> :last-child {
|
||||
|
||||
.ol-panel .ol-group-button-toggle {
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
@ -421,7 +420,7 @@ nav.ol-panel> :last-child {
|
||||
border: 0;
|
||||
display: flex;
|
||||
justify-items: left;
|
||||
text-indent: 5px;
|
||||
text-indent: 2px;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group-button-toggle button::before {
|
||||
@ -1134,4 +1133,87 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.ol-switch[data-value="undefined"]>.ol-switch-fill::after {
|
||||
transform: translateX(calc((var(--width) - var(--height)) * 0.5));
|
||||
}
|
||||
|
||||
.ol-contexmenu-panel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ol-coalition-switch[data-value="false"]>.ol-switch-fill {
|
||||
background-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.ol-coalition-switch[data-value="true"]>.ol-switch-fill {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
.ol-coalition-switch[data-value="undefined"]>.ol-switch-fill {
|
||||
background-color: var(--primary-neutral);
|
||||
}
|
||||
|
||||
.ol-context-menu>div:nth-child(2) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.ol-context-menu>ul {
|
||||
max-height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ol-context-menu .ol-panel {
|
||||
border-radius: var(--border-radius-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ol-context-menu ul {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.ol-context-menu>div:nth-child(n+3) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.ol-context-menu .ol-select-container {
|
||||
align-self: stretch;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.ol-contexmenu-button {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
height: 48px;
|
||||
margin-bottom: -10px;
|
||||
margin-top: -10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.ol-contexmenu-button:last-of-type {
|
||||
border-bottom-right-radius: var(--border-radius-sm);
|
||||
border-top-right-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
[data-active-coalition="blue"].ol-contexmenu-button:hover,
|
||||
[data-active-coalition="blue"].ol-contexmenu-button.is-open {
|
||||
background-color: var(--primary-blue)
|
||||
}
|
||||
|
||||
[data-active-coalition="red"].ol-contexmenu-button:hover,
|
||||
[data-active-coalition="red"].ol-contexmenu-button.is-open {
|
||||
background-color: var(--primary-red)
|
||||
}
|
||||
|
||||
[data-active-coalition="neutral"].ol-contexmenu-button:hover,
|
||||
[data-active-coalition="neutral"].ol-contexmenu-button.is-open {
|
||||
background-color: var(--primary-neutral)
|
||||
}
|
||||
@ -35,61 +35,13 @@
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#coalition-switch[data-value="false"]>.ol-switch-fill {
|
||||
background-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
#coalition-switch[data-value="true"]>.ol-switch-fill {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
#coalition-switch[data-value="undefined"]>.ol-switch-fill {
|
||||
background-color: var(--primary-neutral);
|
||||
}
|
||||
|
||||
#map-contextmenu>div:nth-child(2) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
#map-contextmenu>ul {
|
||||
max-height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#map-contextmenu .ol-panel {
|
||||
border-radius: var(--border-radius-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#map-contextmenu ul {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#map-contextmenu>div:nth-child(n+3) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
#map-contextmenu .ol-select-container {
|
||||
align-self: stretch;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#aircraft-spawn-menu .ol-select.is-open .ol-select-options {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#aircraft-spawn-menu>button,
|
||||
#ground-unit-spawn-menu>button {
|
||||
#ground-unit-spawn-menu>button,
|
||||
#iads-menu>button {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@ -99,7 +51,7 @@
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#ground-unit-spawn-button {
|
||||
#ground-ol-contexmenu-button {
|
||||
background-image: url("/resources/theme/images/buttons/spawn/ground.svg");
|
||||
background-size: 48px;
|
||||
}
|
||||
@ -114,41 +66,24 @@
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
.unit-spawn-button {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
height: 48px;
|
||||
margin-bottom: -10px;
|
||||
margin-top: -10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.unit-spawn-button:last-of-type {
|
||||
border-bottom-right-radius: var(--border-radius-sm);
|
||||
border-top-right-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
[data-active-coalition="blue"].unit-spawn-button:hover,
|
||||
[data-active-coalition="blue"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="blue"]#active-coalition-label,
|
||||
[data-active-coalition="blue"].deploy-unit-button,
|
||||
[data-active-coalition="blue"]#spawn-airbase-aircraft-button {
|
||||
[data-active-coalition="blue"]#spawn-airbase-aircraft-button,
|
||||
[data-active-coalition="blue"].create-iads-button {
|
||||
background-color: var(--primary-blue)
|
||||
}
|
||||
|
||||
[data-active-coalition="red"].unit-spawn-button:hover,
|
||||
[data-active-coalition="red"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="red"]#active-coalition-label,
|
||||
[data-active-coalition="red"].deploy-unit-button,
|
||||
[data-active-coalition="red"]#spawn-airbase-aircraft-button {
|
||||
[data-active-coalition="red"]#spawn-airbase-aircraft-button,
|
||||
[data-active-coalition="red"].create-iads-button {
|
||||
background-color: var(--primary-red)
|
||||
}
|
||||
|
||||
[data-active-coalition="neutral"].unit-spawn-button:hover,
|
||||
[data-active-coalition="neutral"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="neutral"]#active-coalition-label,
|
||||
[data-active-coalition="neutral"].deploy-unit-button,
|
||||
[data-active-coalition="neutral"]#spawn-airbase-aircraft-button {
|
||||
[data-active-coalition="neutral"]#spawn-airbase-aircraft-button,
|
||||
[data-active-coalition="neutral"].create-iads-button {
|
||||
background-color: var(--primary-neutral)
|
||||
}
|
||||
|
||||
@ -407,3 +342,50 @@
|
||||
width: 180px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Coalition area context menu */
|
||||
#coalition-area-contextmenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
row-gap: 5px;
|
||||
width: 225px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#coalition-area-switch {
|
||||
margin-right: 10px;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#iads-button {
|
||||
background-image: url("/resources/theme/images/buttons/spawn/aircraft.svg");
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#coalition-area-contextmenu .ol-checkbox {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#iads-menu .ol-select-options>* {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#iads-menu .ol-select-options>*:first-child {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
#iads-menu .ol-select-options>*:last-child {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#iads-menu .ol-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#iads-menu {
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
71
client/src/controls/coalitionareacontextmenu.ts
Normal file
71
client/src/controls/coalitionareacontextmenu.ts
Normal 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");
|
||||
}
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -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");
|
||||
|
||||
20
client/src/map/coalitionarea.ts
Normal file
20
client/src/map/coalitionarea.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { LatLngExpression, Polygon, PolylineOptions } from "leaflet";
|
||||
import { getMap } from "..";
|
||||
|
||||
export class CoalitionArea extends Polygon {
|
||||
constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
|
||||
if (options === undefined)
|
||||
options = {};
|
||||
|
||||
options.bubblingMouseEvents = false;
|
||||
super(latlngs, options);
|
||||
|
||||
this.on("contextmenu", (e: any) => {
|
||||
getMap().showCoalitionAreaContextMenu(e, this);
|
||||
})
|
||||
}
|
||||
|
||||
setCoalition(coalition: string) {
|
||||
this.setStyle({color: coalition, fillColor: coalition});
|
||||
}
|
||||
}
|
||||
@ -14,11 +14,14 @@ import { ClickableMiniMap } from "./clickableminimap";
|
||||
import { SVGInjector } from '@tanem/svg-injector'
|
||||
import { layers as mapLayers, mapBounds, minimapBoundaries } from "../constants/constants";
|
||||
import { TargetMarker } from "./targetmarker";
|
||||
import { CoalitionArea } from "./coalitionarea";
|
||||
import { CoalitionAreaContextMenu } from "../controls/coalitionareacontextmenu";
|
||||
|
||||
L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);
|
||||
|
||||
// TODO would be nice to convert to ts
|
||||
require("../../public/javascripts/leaflet.nauticscale.js")
|
||||
require("../../public/javascripts/L.Path.Drag.js")
|
||||
|
||||
/* Map constants */
|
||||
export const IDLE = "Idle";
|
||||
@ -26,6 +29,7 @@ export const MOVE_UNIT = "Move unit";
|
||||
export const BOMBING = "Bombing";
|
||||
export const CARPET_BOMBING = "Carpet bombing";
|
||||
export const FIRE_AT_AREA = "Fire at area";
|
||||
export const DRAW_POLYGON = "Draw polygon";
|
||||
export const visibilityControls: string[] = ["human", "dcs", "aircraft", "groundunit-sam", "groundunit-other", "navyunit", "airbase"];
|
||||
export const visibilityControlsTootlips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"];
|
||||
|
||||
@ -51,10 +55,12 @@ export class Map extends L.Map {
|
||||
#destinationGroupRotation: number = 0;
|
||||
#computeDestinationRotation: boolean = false;
|
||||
#destinationRotationCenter: L.LatLng | null = null;
|
||||
|
||||
#polygons: CoalitionArea[] = [];
|
||||
|
||||
#mapContextMenu: MapContextMenu = new MapContextMenu("map-contextmenu");
|
||||
#unitContextMenu: UnitContextMenu = new UnitContextMenu("unit-contextmenu");
|
||||
#airbaseContextMenu: AirbaseContextMenu = new AirbaseContextMenu("airbase-contextmenu");
|
||||
#coalitionAreaContextMenu: CoalitionAreaContextMenu = new CoalitionAreaContextMenu("coalition-area-contextmenu");
|
||||
|
||||
#mapSourceDropdown: Dropdown;
|
||||
#optionButtons: { [key: string]: HTMLButtonElement[] } = {}
|
||||
@ -114,6 +120,12 @@ export class Map extends L.Map {
|
||||
Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
|
||||
});
|
||||
|
||||
document.addEventListener("toggleMapDraw", (ev: CustomEventInit) => {
|
||||
if (ev.detail?.type == "polygon") {
|
||||
this.setState(DRAW_POLYGON);
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("unitUpdated", (ev: CustomEvent) => {
|
||||
if (this.#centerUnit != null && ev.detail == this.#centerUnit)
|
||||
this.#panToUnit(this.#centerUnit);
|
||||
@ -176,6 +188,14 @@ export class Map extends L.Map {
|
||||
this.#createTargetMarker();
|
||||
this.#hideCursor();
|
||||
}
|
||||
else if (this.#state === DRAW_POLYGON) {
|
||||
this.#resetDestinationMarkers();
|
||||
this.#resetTargetMarker();
|
||||
this.#showCursor();
|
||||
//@ts-ignore draggable option added by plugin
|
||||
this.#polygons.push(new CoalitionArea([]));
|
||||
this.#polygons[this.#polygons.length - 1].addTo(this);
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent("mapStateChanged"));
|
||||
}
|
||||
|
||||
@ -188,6 +208,7 @@ export class Map extends L.Map {
|
||||
this.hideMapContextMenu();
|
||||
this.hideUnitContextMenu();
|
||||
this.hideAirbaseContextMenu();
|
||||
this.hideCoalitionAreaContextMenu();
|
||||
}
|
||||
|
||||
showMapContextMenu(e: any) {
|
||||
@ -238,6 +259,22 @@ export class Map extends L.Map {
|
||||
this.#airbaseContextMenu.hide();
|
||||
}
|
||||
|
||||
showCoalitionAreaContextMenu(e: any, coalitionArea: CoalitionArea) {
|
||||
this.hideAllContextMenus();
|
||||
var x = e.originalEvent.x;
|
||||
var y = e.originalEvent.y;
|
||||
this.#coalitionAreaContextMenu.show(x, y, e.latlng);
|
||||
this.#coalitionAreaContextMenu.setCoalitionArea(coalitionArea);
|
||||
}
|
||||
|
||||
getCoalitionAreaContextMenu() {
|
||||
return this.#coalitionAreaContextMenu;
|
||||
}
|
||||
|
||||
hideCoalitionAreaContextMenu() {
|
||||
this.#coalitionAreaContextMenu.hide();
|
||||
}
|
||||
|
||||
/* Mouse coordinates */
|
||||
getMousePosition() {
|
||||
return this.#lastMousePosition;
|
||||
@ -363,6 +400,9 @@ export class Map extends L.Map {
|
||||
this.hideAllContextMenus();
|
||||
if (this.#state === IDLE) {
|
||||
|
||||
}
|
||||
else if (this.#state === DRAW_POLYGON) {
|
||||
this.#polygons[this.#polygons.length - 1].addLatLng(e.latlng);
|
||||
}
|
||||
else {
|
||||
this.setState(IDLE);
|
||||
@ -403,6 +443,9 @@ export class Map extends L.Map {
|
||||
getUnitsManager().getSelectedUnits().length > 0? this.setState(MOVE_UNIT): this.setState(IDLE);
|
||||
getUnitsManager().selectedUnitsFireAtArea(this.getMouseCoordinates());
|
||||
}
|
||||
else {
|
||||
this.setState(IDLE);
|
||||
}
|
||||
}
|
||||
|
||||
#executeAction(e: any, action: string) {
|
||||
|
||||
@ -14,7 +14,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"items": [
|
||||
],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -31,7 +31,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -48,7 +48,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -65,7 +65,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -82,7 +82,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -99,7 +99,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
@ -116,7 +116,7 @@ export class GroundUnitsDatabase extends UnitDatabase {
|
||||
"fuel": 1,
|
||||
"items": [],
|
||||
"roles": [
|
||||
"Template"
|
||||
"SAM Site"
|
||||
],
|
||||
"code": "",
|
||||
"name": "Default"
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<div id="map-contextmenu" oncontextmenu="return false;">
|
||||
<div id="map-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
|
||||
<div id="active-coalition-label" data-active-coalition="blue"></div>
|
||||
<div id="upper-bar" class="ol-panel">
|
||||
<div id="coalition-switch" class="ol-switch"></div>
|
||||
<button data-active-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="ground-unit-spawn-button" title="Spawn ground unit" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "ground-unit" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "smoke" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="explosion-spawn-button" title="Explosion" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "explosion" }' class="unit-spawn-button"></button>
|
||||
<div id="coalition-switch" class="ol-switch ol-coalition-switch"></div>
|
||||
<button data-active-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="ol-contexmenu-button"></button>
|
||||
<button data-active-coalition="blue" id="ground-ol-contexmenu-button" title="Spawn ground unit" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "ground-unit" }' class="ol-contexmenu-button"></button>
|
||||
<button data-active-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "smoke" }' class="ol-contexmenu-button"></button>
|
||||
<button data-active-coalition="blue" id="explosion-spawn-button" title="Explosion" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "explosion" }' class="ol-contexmenu-button"></button>
|
||||
</div>
|
||||
<div id="aircraft-spawn-menu" class="ol-panel hide">
|
||||
<div id="aircraft-spawn-menu" class="ol-contexmenu-panel ol-panel hide">
|
||||
<div class="ol-select-container">
|
||||
<div id="aircraft-role-options" class="ol-select">
|
||||
<div class="ol-select-value">Aircraft role</div>
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployAircraft" disabled>Deploy unit</button>
|
||||
</div>
|
||||
<div id="ground-unit-spawn-menu" class="ol-panel hide">
|
||||
<div id="ground-unit-spawn-menu" class="ol-panel ol-contexmenu-panel hide">
|
||||
<div class="ol-select-container">
|
||||
<div id="ground-unit-role-options" class="ol-select">
|
||||
<div class="ol-select-value">Ground unit role</div>
|
||||
@ -76,14 +76,14 @@
|
||||
</div>
|
||||
<button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployGroundUnit" disabled>Deploy unit</button>
|
||||
</div>
|
||||
<div id="smoke-spawn-menu" class="ol-panel hide">
|
||||
<div id="smoke-spawn-menu" class="ol-panel ol-contexmenu-panel hide">
|
||||
<button class="smoke-button" title="" data-smoke-color="white" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "white" }'>White smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="blue" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "blue" }'>Blue smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="red" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "red" }'>Red smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="green" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "green" }'>Green smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="orange" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "orange" }'>Orange smoke</button>
|
||||
</div>
|
||||
<div id="explosion-menu" class="ol-panel hide">
|
||||
<div id="explosion-menu" class="ol-panel ol-contexmenu-panel hide">
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 50 }'>Small explosion</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 100 }'>Medium explosion</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 200 }'>Big explosion</button>
|
||||
@ -96,11 +96,9 @@
|
||||
</div>
|
||||
|
||||
<div id="airbase-contextmenu" class="ol-panel" oncontextmenu="return false;">
|
||||
|
||||
<h3 id="airbase-name"></h3>
|
||||
|
||||
<div id="airbase-properties"></div>
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<h4>Parking available:</h4>
|
||||
@ -108,5 +106,45 @@
|
||||
|
||||
<button id="spawn-airbase-aircraft-button" data-active-coalition="red" title="Spawn aircraft" data-on-click="contextMenuSpawnAirbase" class="deploy-unit-button">Spawn</button>
|
||||
<button id="land-here-button" title="Land here" data-on-click="contextMenuLandAirbase" class="hide">Land here</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="coalition-area-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
|
||||
<div id="area-coalition-label" data-active-coalition="blue"></div>
|
||||
<div id="upper-bar" class="ol-panel">
|
||||
<div id="coalition-area-switch" class="ol-switch ol-coalition-switch"></div>
|
||||
<button data-active-coalition="blue" id="iads-button" title="Create Integrated Air Defens System" data-on-click="coalitionAreaContextMenuShow"
|
||||
data-on-click-params='{ "type": "iads" }' class="ol-contexmenu-button"></button>
|
||||
</div>
|
||||
<div id="iads-menu" class="ol-panel ol-contexmenu-panel hide">
|
||||
<div id="iads-units-role-options" class="ol-select">
|
||||
<div class="ol-select-value">Unit types</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the iads unit roles checkboxes will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-select-container">
|
||||
<div id="iads-period-options" class="ol-select">
|
||||
<div class="ol-select-value">Units period</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the iads unit period buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="coalition-units-checkbox" class="ol-checkbox">
|
||||
<label title="Use coalition specific units only (e.g. Patriot sites for blue coalition, SA-2s for red coalition)">
|
||||
<input type="checkbox"/>
|
||||
Coalition specific units
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="iads-density-slider" class="ol-slider-container">
|
||||
<dl class="ol-data-grid">
|
||||
<dt> IADS density </dt> <dd> <div class="ol-slider-value"></div> </dd>
|
||||
</dl>
|
||||
<input type="range" min="0" max="100" value="0" class="ol-slider">
|
||||
</div>
|
||||
<button class="create-iads-button" title="" data-active-coalition="blue" data-on-click="contextMenuCreateIads" disabled>Add units to IADS</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,32 +30,28 @@
|
||||
</div>
|
||||
|
||||
<div id="unit-visibility-control" class="ol-group">
|
||||
<!-- Here the available visibility controls will be listed -->
|
||||
<!-- Here the available visibility controls will be listed -->
|
||||
</div>
|
||||
|
||||
<div id="coalition-visibility-control" class="ol-group ol-group-button-toggle">
|
||||
|
||||
<div>
|
||||
<button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "blue" }'>View <span class="accent-bluefor">BLUEFOR</span></button>
|
||||
data-on-click-params='{ "coalition": "blue" }'><span class="accent-bluefor">BLUEFOR</span></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "red" }'>View <span class="accent-redfor">REDFOR</span></button>
|
||||
data-on-click-params='{ "coalition": "red" }'><span class="accent-redfor">REDFOR</span></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "neutral" }'>View <span
|
||||
class="accent-neutral">NEUTRAL</span></button>
|
||||
data-on-click-params='{ "coalition": "neutral" }'><span class="accent-neutral">NEUTRAL</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="atc-navbar-control" class="ol-group-container" data-feature-switch="atc">
|
||||
<div class="ol-group-header">ATC</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<button data-on-click="toggleElements"
|
||||
data-on-click-params='{"selector": "#strip-board-ground"}'>GND</button>
|
||||
@ -63,4 +59,10 @@
|
||||
data-on-click-params='{"selector": "#strip-board-tower"}'>TWR</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-drawer" class="ol-group-container">
|
||||
<div class="ol-group">
|
||||
<button data-on-click="toggleMapDraw" data-on-click-params='{"type": "polygon"}'>Polygon</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
x
Reference in New Issue
Block a user