${option}
`;
+ this.#value = document.createElement("div");
+ this.#value.classList.add("ol-ellipsed");
+ this.#value.innerText = option;
this.#close();
this.#callback(option, e);
this.#index = idx;
@@ -57,19 +57,15 @@ export class Dropdown {
}));
}
- selectText( text:string ) {
-
- const index = [].slice.call( this.#options.children ).findIndex( ( opt:Element ) => opt.querySelector( "button" )?.innerText === text );
- if ( index > -1 ) {
- this.selectValue( index );
+ selectText(text: string) {
+ const index = [].slice.call(this.#options.children).findIndex((opt: Element) => opt.querySelector("button")?.innerText === text);
+ if (index > -1) {
+ this.selectValue(index);
}
-
}
- selectValue(idx: number)
- {
- if (idx < this.#optionsList.length)
- {
+ selectValue(idx: number) {
+ if (idx < this.#optionsList.length) {
var option = this.#optionsList[idx];
this.#value.innerHTML = ` ${option}
`;
this.#index = idx;
@@ -91,8 +87,8 @@ export class Dropdown {
}
setValue(value: string) {
- var index = this.#optionsList.findIndex((option) => {return option === value});
- if (index > -1)
+ var index = this.#optionsList.findIndex((option) => { return option === value });
+ if (index > -1)
this.selectValue(index);
}
@@ -102,21 +98,21 @@ export class Dropdown {
#clip() {
const options = this.#options;
- const bounds = options.getBoundingClientRect();
- this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
+ const bounds = options.getBoundingClientRect();
+ this.#element.dataset.position = (bounds.bottom > window.innerHeight) ? "top" : "";
}
#close() {
- this.#element.classList.remove( "is-open" );
+ this.#element.classList.remove("is-open");
this.#element.dataset.position = "";
}
#open() {
- this.#element.classList.add( "is-open" );
+ this.#element.classList.add("is-open");
}
#toggle() {
- if ( this.#element.classList.contains( "is-open" ) ) {
+ if (this.#element.classList.contains("is-open")) {
this.#close();
} else {
this.#open();
diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts
index 929dad05..c8c98b40 100644
--- a/client/src/controls/mapcontextmenu.ts
+++ b/client/src/controls/mapcontextmenu.ts
@@ -41,8 +41,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployAircraft", () => {
this.hide();
this.#spawnOptions.coalition = getActiveCoalition();
- if (this.#spawnOptions)
- {
+ if (this.#spawnOptions) {
getMap().addTemporaryMarker(this.#spawnOptions.latlng);
spawnAircraft(this.#spawnOptions);
}
@@ -51,8 +50,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployGroundUnit", () => {
this.hide();
this.#spawnOptions.coalition = getActiveCoalition();
- if (this.#spawnOptions)
- {
+ if (this.#spawnOptions) {
getMap().addTemporaryMarker(this.#spawnOptions.latlng);
spawnGroundUnit(this.#spawnOptions);
}
@@ -189,10 +187,10 @@ export class MapContextMenu extends ContextMenu {
this.#spawnOptions.role = role;
this.#resetGroundUnitType();
- const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label } );
+ const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label });
types.sort();
- this.#groundUnitTypeDropdown.setOptions( types );
+ this.#groundUnitTypeDropdown.setOptions(types);
this.#groundUnitTypeDropdown.selectValue(0);
this.clip();
}
@@ -205,8 +203,8 @@ export class MapContextMenu extends ContextMenu {
const roles = groundUnitsDatabase.getRoles();
roles.sort();
-
- this.#groundUnitRoleDropdown.setOptions( roles );
+
+ this.#groundUnitRoleDropdown.setOptions(roles);
this.clip();
}
diff --git a/client/src/controls/slider.ts b/client/src/controls/slider.ts
index 7cf185cc..7fab7782 100644
--- a/client/src/controls/slider.ts
+++ b/client/src/controls/slider.ts
@@ -23,8 +23,7 @@ export class Slider {
if (this.#container != null) {
this.#display = this.#container.style.display;
this.#slider = 
`
- button.addEventListener("click", callback);
+ button.appendChild(img);
+ button.setAttribute("data-on-click", callback);
+ button.setAttribute("data-on-click-params", argument);
return button;
}
}
+
diff --git a/client/src/map/temporaryunitmarker.ts b/client/src/map/temporaryunitmarker.ts
new file mode 100644
index 00000000..904ee83d
--- /dev/null
+++ b/client/src/map/temporaryunitmarker.ts
@@ -0,0 +1,13 @@
+import { Icon } from "leaflet";
+import { CustomMarker } from "./custommarker";
+
+export class TemporaryUnitMarker extends CustomMarker {
+ createIcon() {
+ var icon = new Icon({
+ iconUrl: '/resources/theme/images/markers/temporary-icon.png',
+ iconSize: [52, 52],
+ iconAnchor: [26, 26]
+ });
+ this.setIcon(icon);
+ }
+}
\ No newline at end of file
diff --git a/client/src/missionhandler/airbase.ts b/client/src/missionhandler/airbase.ts
index a3ca42dc..4128001b 100644
--- a/client/src/missionhandler/airbase.ts
+++ b/client/src/missionhandler/airbase.ts
@@ -1,13 +1,14 @@
-import * as L from 'leaflet'
+import { DivIcon } from 'leaflet';
+import { CustomMarker } from '../map/custommarker';
+import { SVGInjector } from '@tanem/svg-injector';
export interface AirbaseOptions
{
name: string,
- position: L.LatLng,
- src: string
+ position: L.LatLng
}
-export class Airbase extends L.Marker
+export class Airbase extends CustomMarker
{
#name: string = "";
#coalition: string = "";
@@ -19,21 +20,30 @@ export class Airbase extends L.Marker
super(options.position, { riseOnHover: true });
this.#name = options.name;
- var icon = new L.DivIcon({
- html: `
-
-
`,
+ }
+
+ createIcon() {
+ var icon = new DivIcon({
className: 'leaflet-airbase-marker',
iconSize: [40, 40],
iconAnchor: [20, 20]
}); // Set the marker, className must be set to avoid white square
this.setIcon(icon);
+
+ var el = document.createElement("div");
+ el.classList.add("airbase-icon");
+ el.setAttribute("data-object", "airbase");
+ var img = document.createElement("img");
+ img.src = "/resources/theme/images/markers/airbase.svg";
+ img.onload = () => SVGInjector(img);
+ el.appendChild(img);
+ this.getElement()?.appendChild(el);
}
setCoalition(coalition: string)
{
this.#coalition = coalition;
- (`
+ button.innerHTML = ``
button.addEventListener("click", callback);
return button;
}
diff --git a/client/src/units/unit.ts b/client/src/units/unit.ts
index a7a7ec09..3338c095 100644
--- a/client/src/units/unit.ts
+++ b/client/src/units/unit.ts
@@ -4,14 +4,16 @@ import { rad2deg } from '../other/utils';
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, getUnits, landAt, setAltitude, setReactionToThreat, setROE, setSpeed, refuel, setAdvacedOptions, followUnit, setEmissionsCountermeasures } from '../server/server';
import { aircraftDatabase } from './aircraftdatabase';
import { groundUnitsDatabase } from './groundunitsdatabase';
+import { CustomMarker } from '../map/custommarker';
+import { SVGInjector } from '@tanem/svg-injector';
var pathIcon = new Icon({
- iconUrl: 'images/marker-icon.png',
- shadowUrl: 'images/marker-shadow.png',
+ iconUrl: '/resources/theme/images/markers/marker-icon.png',
+ shadowUrl: '/resources/theme/images/markers/marker-shadow.png',
iconAnchor: [13, 41]
});
-export class Unit extends Marker {
+export class Unit extends CustomMarker {
ID: number;
#data: UnitData = {
@@ -114,22 +116,7 @@ export class Unit extends Marker {
/* Set the unit data */
this.setData(data);
- /* Set the icon */
- var icon = new DivIcon({
- html: this.getMarkerHTML(),
- className: 'leaflet-unit-marker',
- iconAnchor: [25, 25],
- iconSize: [50, 50],
- });
- this.setIcon(icon);
- }
-
- getMarkerHTML() {
- return `
-
- }.svg)
-
-
`
+
}
getMarkerCategory() {
@@ -137,6 +124,20 @@ export class Unit extends Marker {
return "";
}
+ getActiveMarkerElements() {
+ // Default values
+ return {
+ state: false,
+ vvi: false,
+ hotgroup: false,
+ unitIcon: true,
+ shortLabel: false,
+ fuel: false,
+ ammo: false,
+ summary: false
+ }
+ }
+
setSelected(selected: boolean) {
/* Only alive units can be selected. Some units are not selectable (weapons) */
if ((this.getBaseData().alive || !selected) && this.getSelectable() && this.getSelected() != selected) {
@@ -285,6 +286,104 @@ export class Unit extends Marker {
return this.getData().optionsData;
}
+ /********************** Icon *************************/
+ createIcon(): void {
+ /* Set the icon */
+ var icon = new DivIcon({
+ className: 'leaflet-unit-icon',
+ iconAnchor: [25, 25],
+ iconSize: [50, 50],
+ });
+ this.setIcon(icon);
+
+ var el = document.createElement("div");
+ el.setAttribute("data-object", `unit-${this.getMarkerCategory()}`);
+ el.setAttribute("data-coalition", this.getMissionData().coalition);
+
+ // Generate and append elements depending on active options
+ // State icon
+ if (this.getActiveMarkerElements().state){
+ var state = document.createElement("div");
+ state.classList.add("unit-state");
+ el.appendChild(state);
+ }
+
+ // Velocity vector
+ if (this.getActiveMarkerElements().vvi) {
+ var vvi = document.createElement("div");
+ vvi.classList.add("unit-vvi");
+ vvi.toggleAttribute("data-rotate-to-heading");
+ el.append(vvi);
+ }
+
+ // Hotgroup indicator
+ if (this.getActiveMarkerElements().hotgroup) {
+ var hotgroup = document.createElement("div");
+ hotgroup.classList.add("unit-hotgroup");
+ var hotgroupId = document.createElement("div");
+ hotgroupId.classList.add("unit-hotgroup-id");
+ hotgroup.appendChild(hotgroupId);
+ el.append(hotgroup);
+ }
+
+ // Main icon
+ if (this.getActiveMarkerElements().unitIcon) {
+ var unitIcon = document.createElement("div");
+ unitIcon.classList.add("unit-icon");
+ var img = document.createElement("img");
+ img.src = `/resources/theme/images/units/${this.getMarkerCategory()}.svg`;
+ img.onload = () => SVGInjector(img);
+ unitIcon.appendChild(img);
+ el.append(unitIcon);
+ }
+
+ // Short label
+ if (this.getActiveMarkerElements().shortLabel) {
+ var shortLabel = document.createElement("div");
+ shortLabel.classList.add("unit-short-label");
+ shortLabel.innerText = aircraftDatabase.getByName(this.getBaseData().name)?.shortLabel || ""; //TODO: fix, use correct database
+ el.append(shortLabel);
+ }
+
+ // Fuel indicator
+ if (this.getActiveMarkerElements().fuel) {
+ var fuelIndicator = document.createElement("div");
+ fuelIndicator.classList.add("unit-fuel");
+ var fuelLevel = document.createElement("div");
+ fuelLevel.classList.add("unit-fuel-level");
+ fuelIndicator.appendChild(fuelLevel);
+ el.append(fuelIndicator);
+ }
+
+ // Ammo indicator
+ if (this.getActiveMarkerElements().ammo){
+ var ammoIndicator = document.createElement("div");
+ ammoIndicator.classList.add("unit-ammo");
+ for (let i = 0; i <= 3; i++)
+ ammoIndicator.appendChild(document.createElement("div"));
+ el.append(ammoIndicator);
+ }
+
+ // Unit summary
+ if (this.getActiveMarkerElements().summary) {
+ var summary = document.createElement("div");
+ summary.classList.add("unit-summary");
+ var callsign = document.createElement("div");
+ callsign.classList.add("unit-callsign");
+ callsign.innerText = this.getBaseData().unitName;
+ var altitude = document.createElement("div");
+ altitude.classList.add("unit-altitude");
+ var speed = document.createElement("div");
+ speed.classList.add("unit-speed");
+ summary.appendChild(callsign);
+ summary.appendChild(altitude);
+ summary.appendChild(speed);
+ el.appendChild(summary);
+ }
+
+ this.getElement()?.appendChild(el);
+ }
+
/********************** Visibility *************************/
updateVisibility() {
var hidden = false;
@@ -295,7 +394,9 @@ export class Unit extends Marker {
hidden = true;
else if (hiddenUnits.includes(this.getMarkerCategory()))
hidden = true;
- this.setHidden(document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null || hidden || !this.getBaseData().alive);
+ else if (hiddenUnits.includes(this.getMissionData().coalition))
+ hidden = true;
+ this.setHidden(hidden || !this.getBaseData().alive);
}
setHidden(hidden: boolean) {
@@ -576,7 +677,7 @@ export class Unit extends Marker {
el.setAttribute("style", currentStyle + `transform:rotate(${headingDeg}deg);`);
});
- /* Turn on ordnance indicators */
+ /* Turn on ammo indicators */
var hasFox1 = element.querySelector(".unit")?.hasAttribute("data-has-fox-1");
var hasFox2 = element.querySelector(".unit")?.hasAttribute("data-has-fox-2");
var hasFox3 = element.querySelector(".unit")?.hasAttribute("data-has-fox-3");
@@ -690,7 +791,18 @@ export class Unit extends Marker {
}
export class AirUnit extends Unit {
-
+ getActiveMarkerElements() {
+ return {
+ state: true,
+ vvi: true,
+ hotgroup: true,
+ unitIcon: true,
+ shortLabel: true,
+ fuel: true,
+ ammo: true,
+ summary: true
+ };
+ }
}
export class Aircraft extends AirUnit {
@@ -698,30 +810,6 @@ export class Aircraft extends AirUnit {
super(ID, data);
}
- getMarkerHTML() {
- return `
-
-
- 
-
`
- }
-
getMarkerCategory() {
return "aircraft";
}
@@ -732,7 +820,7 @@ export class Helicopter extends AirUnit {
super(ID, data);
}
- getVisibilityCategory() {
+ getMarkerCategory() {
return "helicopter";
}
}
@@ -742,15 +830,17 @@ export class GroundUnit extends Unit {
super(ID, data);
}
- getMarkerHTML() {
- var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
- return `
-
${aircraftDatabase.getByName(this.getBaseData().name)?.shortLabel || ""}
-
-
-
-
-
-
-
-
-
-
-
- ${this.getBaseData().unitName}
-
-
-
-
-
`
+ getActiveMarkerElements() {
+ return {
+ state: true,
+ vvi: false,
+ hotgroup: true,
+ unitIcon: true,
+ shortLabel: true,
+ fuel: false,
+ ammo: false,
+ summary: false
+ };
}
getMarkerCategory() {
@@ -766,6 +856,19 @@ export class NavyUnit extends Unit {
super(ID, data);
}
+ getActiveMarkerElements() {
+ return {
+ state: true,
+ vvi: false,
+ hotgroup: true,
+ unitIcon: true,
+ shortLabel: true,
+ fuel: false,
+ ammo: false,
+ summary: false
+ };
+ }
+
getMarkerCategory() {
return "navyunit";
}
@@ -776,14 +879,6 @@ export class Weapon extends Unit {
super(ID, data);
this.setSelectable(false);
}
-
- getMarkerHTML(): string {
- return `${role?.substring(0, 1)?.toUpperCase() || ""}
-
-
-
-
-
-
-
`
- }
-
}
export class Missile extends Weapon {
diff --git a/client/views/index.ejs b/client/views/index.ejs
index 863572aa..558d6b67 100644
--- a/client/views/index.ejs
+++ b/client/views/index.ejs
@@ -9,9 +9,7 @@
-
-
-
+
diff --git a/client/views/panels/navbar.ejs b/client/views/panels/navbar.ejs
index 06aeeeb9..3ae2453a 100644
--- a/client/views/panels/navbar.ejs
+++ b/client/views/panels/navbar.ejs
@@ -4,7 +4,7 @@
-
+
diff --git a/client/views/panels/unitcontrol.ejs b/client/views/panels/unitcontrol.ejs
index d27223f5..fe67082c 100644
--- a/client/views/panels/unitcontrol.ejs
+++ b/client/views/panels/unitcontrol.ejs
@@ -40,21 +40,21 @@
Olympus UI Kit
-
+
@@ -172,7 +172,7 @@
-
+
DCS Olympus
version v0.2.1
Rules of engagement
-Reaction to threat
-Radar & ECM
- diff --git a/client/views/uikit/uikit.ejs b/client/views/uikit/uikit.ejs index 9bcc7e2c..e4c0a2f4 100644 --- a/client/views/uikit/uikit.ejs +++ b/client/views/uikit/uikit.ejs @@ -2,7 +2,7 @@
-
+
@@ -184,7 +184,7 @@
Z
-
+
@@ -196,7 +196,7 @@
Y
-
+
@@ -218,7 +218,7 @@
X
-
+
@@ -230,7 +230,7 @@
Z
-
+
@@ -242,7 +242,7 @@
Y
-
+
@@ -263,7 +263,7 @@
X
-
+
@@ -275,7 +275,7 @@
Z
-
+
@@ -287,7 +287,7 @@
Y
-
+
@@ -308,7 +308,7 @@
X
-
+
@@ -320,7 +320,7 @@
J
-
+
@@ -332,7 +332,7 @@
K
-
+
@@ -360,7 +360,7 @@
L
4
18
@@ -384,7 +384,7 @@
-
+
4
18
@@ -407,7 +407,7 @@
-
+
4
18
@@ -430,7 +430,7 @@
-
+
4
18
@@ -453,7 +453,7 @@
-
+
4
18
@@ -476,7 +476,7 @@
-
+
4
18
@@ -509,7 +509,7 @@
-
+
4
18
@@ -539,7 +539,7 @@
-
+
4
18
@@ -568,7 +568,7 @@
-
+
4
18
@@ -598,7 +598,7 @@
-
+
4
18
@@ -628,7 +628,7 @@
-
+
4
18
@@ -657,7 +657,7 @@
-
+
4
18
@@ -695,7 +695,7 @@
-
+
4
18
@@ -725,7 +725,7 @@
-
+
4
18
@@ -754,7 +754,7 @@
-
+
4
18
@@ -791,7 +791,7 @@
@@ -800,7 +800,7 @@
@@ -808,7 +808,7 @@
@@ -1183,19 +1183,19 @@
@@ -1205,19 +1205,19 @@
@@ -1227,11 +1227,11 @@
-
+
-
+
-
+
Actions
- 
+ 
icons_actions_gas
+
icons_actions_gas
- 
+ 
icons_actions_nothing
+
icons_actions_nothing
- 
+ 
icons_actions_rtb
+
icons_actions_rtb
- 
+ 
icons_actions_search
+
icons_actions_search
RoE
- 
+ 
icons_roe_free
+
icons_roe_free
- 
+ 
icons_roe_return
+
icons_roe_return
- 
+ 
icons_roe_stop
+
icons_roe_stop
- 
+ 
icons_roe_target
+
icons_roe_target
Threat
- 
+ 
icons_threat_protect
+
icons_threat_protect
- 
+ 
icons_threat_retreat
+
icons_threat_retreat