mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Reformatted project using prettier plugin
This commit is contained in:
Davide Passoni
@@ -3,23 +3,23 @@ import { MarkerOptions } from "leaflet";
|
||||
import { LatLngExpression } from "leaflet";
|
||||
|
||||
export class CustomMarker extends Marker {
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
}
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
}
|
||||
|
||||
onAdd(map: Map): this {
|
||||
this.setIcon(new DivIcon()); // Default empty icon
|
||||
super.onAdd(map);
|
||||
this.createIcon();
|
||||
return this;
|
||||
}
|
||||
onAdd(map: Map): this {
|
||||
this.setIcon(new DivIcon()); // Default empty icon
|
||||
super.onAdd(map);
|
||||
this.createIcon();
|
||||
return this;
|
||||
}
|
||||
|
||||
onRemove(map: Map): this {
|
||||
super.onRemove(map);
|
||||
return this;
|
||||
}
|
||||
onRemove(map: Map): this {
|
||||
super.onRemove(map);
|
||||
return this;
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
/* Overloaded by child classes */
|
||||
}
|
||||
}
|
||||
createIcon() {
|
||||
/* Overloaded by child classes */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,18 +2,20 @@ import { DivIcon, LatLng } from "leaflet";
|
||||
import { CustomMarker } from "../markers/custommarker";
|
||||
|
||||
export class DestinationPreviewHandle extends CustomMarker {
|
||||
constructor(latlng: LatLng) {
|
||||
super(latlng, {interactive: true, draggable: true});
|
||||
}
|
||||
constructor(latlng: LatLng) {
|
||||
super(latlng, { interactive: true, draggable: true });
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
this.setIcon(new DivIcon({
|
||||
iconSize: [18, 18],
|
||||
iconAnchor: [9, 9],
|
||||
className: "leaflet-destination-preview-handle-marker",
|
||||
}));
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-destination-preview-handle-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
createIcon() {
|
||||
this.setIcon(
|
||||
new DivIcon({
|
||||
iconSize: [18, 18],
|
||||
iconAnchor: [9, 9],
|
||||
className: "leaflet-destination-preview-handle-marker",
|
||||
})
|
||||
);
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-destination-preview-handle-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,19 +2,21 @@ import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
|
||||
import { CustomMarker } from "./custommarker";
|
||||
|
||||
export class DestinationPreviewMarker extends CustomMarker {
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
}
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
this.setIcon(new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 26],
|
||||
className: "leaflet-destination-preview",
|
||||
}));
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-destination-preview-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
createIcon() {
|
||||
this.setIcon(
|
||||
new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 26],
|
||||
className: "leaflet-destination-preview",
|
||||
})
|
||||
);
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-destination-preview-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,28 +4,36 @@ import { SVGInjector } from "@tanem/svg-injector";
|
||||
import { getApp } from "../../olympusapp";
|
||||
|
||||
export class SmokeMarker extends CustomMarker {
|
||||
#color: string;
|
||||
#color: string;
|
||||
|
||||
constructor(latlng: LatLngExpression, color: string, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
this.#color = color;
|
||||
window.setTimeout(() => { this.removeFrom(getApp().getMap()); }, 300000) /* Remove the smoke after 5 minutes */
|
||||
}
|
||||
constructor(
|
||||
latlng: LatLngExpression,
|
||||
color: string,
|
||||
options?: MarkerOptions
|
||||
) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
this.#color = color;
|
||||
window.setTimeout(() => {
|
||||
this.removeFrom(getApp().getMap());
|
||||
}, 300000); /* Remove the smoke after 5 minutes */
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
this.setIcon(new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 52],
|
||||
className: "leaflet-smoke-marker",
|
||||
}));
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-smoke-icon");
|
||||
el.setAttribute("data-color", this.#color);
|
||||
var img = document.createElement("img");
|
||||
img.src = "/resources/theme/images/markers/smoke.svg";
|
||||
img.onload = () => SVGInjector(img);
|
||||
el.appendChild(img);
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
createIcon() {
|
||||
this.setIcon(
|
||||
new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 52],
|
||||
className: "leaflet-smoke-marker",
|
||||
})
|
||||
);
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-smoke-icon");
|
||||
el.setAttribute("data-color", this.#color);
|
||||
var img = document.createElement("img");
|
||||
img.src = "/resources/theme/images/markers/smoke.svg";
|
||||
img.onload = () => SVGInjector(img);
|
||||
el.appendChild(img);
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,26 @@
|
||||
.airbase-icon {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.airbase-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.airbase-icon[data-coalition="red"] svg * {
|
||||
stroke: var(--unit-background-red);
|
||||
stroke: var(--unit-background-red);
|
||||
}
|
||||
|
||||
.airbase-icon[data-coalition="blue"] svg * {
|
||||
stroke: var(--unit-background-blue);
|
||||
stroke: var(--unit-background-blue);
|
||||
}
|
||||
|
||||
.airbase-icon[data-coalition="neutral"] svg * {
|
||||
stroke: var(--unit-background-neutral);
|
||||
stroke: var(--unit-background-neutral);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
.bullseye-icon {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bullseye-icon[data-coalition="red"] svg * {
|
||||
stroke: var(--unit-background-red);
|
||||
fill: var(--unit-background-red);
|
||||
stroke: var(--unit-background-red);
|
||||
fill: var(--unit-background-red);
|
||||
}
|
||||
|
||||
.bullseye-icon[data-coalition="blue"] svg * {
|
||||
stroke: var(--unit-background-blue);
|
||||
fill: var(--unit-background-blue);
|
||||
stroke: var(--unit-background-blue);
|
||||
fill: var(--unit-background-blue);
|
||||
}
|
||||
|
||||
.bullseye-icon[data-coalition="neutral"] svg * {
|
||||
stroke: var(--unit-background-neutral);
|
||||
fill: var(--unit-background-neutral);
|
||||
stroke: var(--unit-background-neutral);
|
||||
fill: var(--unit-background-neutral);
|
||||
}
|
||||
|
||||
@@ -1,212 +1,213 @@
|
||||
/*** Unit marker elements ***/
|
||||
[data-object|="unit"] {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.unit-vvi {
|
||||
align-self: center;
|
||||
background: var(--secondary-gunmetal-grey);
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-bottom: calc((var(--unit-width) / 2) + var(--unit-stroke-width));
|
||||
position: absolute;
|
||||
transform-origin: bottom;
|
||||
translate: 0 -50%;
|
||||
width: var(--unit-vvi-width);
|
||||
align-self: center;
|
||||
background: var(--secondary-gunmetal-grey);
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-bottom: calc((var(--unit-width) / 2) + var(--unit-stroke-width));
|
||||
position: absolute;
|
||||
transform-origin: bottom;
|
||||
translate: 0 -50%;
|
||||
width: var(--unit-vvi-width);
|
||||
}
|
||||
|
||||
.unit-hotgroup {
|
||||
align-content: center;
|
||||
background-color: var(--background-steel);
|
||||
border-radius: var(--border-radius-xs);
|
||||
display: none;
|
||||
height: 15px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
translate: 0 -200%;
|
||||
width: 15px;
|
||||
align-content: center;
|
||||
background-color: var(--background-steel);
|
||||
border-radius: var(--border-radius-xs);
|
||||
display: none;
|
||||
height: 15px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
translate: 0 -200%;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.unit-hotgroup-id {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
font-size: 9px;
|
||||
font-weight: bolder;
|
||||
transform: rotate(45deg);
|
||||
translate: -1px 1px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
font-size: 9px;
|
||||
font-weight: bolder;
|
||||
transform: rotate(45deg);
|
||||
translate: -1px 1px;
|
||||
}
|
||||
|
||||
.unit-icon {
|
||||
height: var(--unit-height);
|
||||
position: absolute;
|
||||
transform-origin: center;
|
||||
width: var(--unit-width);
|
||||
height: var(--unit-height);
|
||||
position: absolute;
|
||||
transform-origin: center;
|
||||
width: var(--unit-width);
|
||||
}
|
||||
|
||||
.unit-icon svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[data-is-selected] .unit-icon::before {
|
||||
background-color: var(--unit-spotlight-fill);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
background-color: var(--unit-spotlight-fill);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/*** Basic colours ***/
|
||||
[data-coalition="blue"] .unit-icon svg>*:first-child {
|
||||
fill: var(--unit-background-blue);
|
||||
[data-coalition="blue"] .unit-icon svg > *:first-child {
|
||||
fill: var(--unit-background-blue);
|
||||
}
|
||||
|
||||
[data-coalition="red"] .unit-icon svg>*:first-child {
|
||||
fill: var(--unit-background-red);
|
||||
[data-coalition="red"] .unit-icon svg > *:first-child {
|
||||
fill: var(--unit-background-red);
|
||||
}
|
||||
|
||||
[data-coalition="neutral"] .unit-icon svg>*:first-child {
|
||||
fill: var(--unit-background-neutral);
|
||||
[data-coalition="neutral"] .unit-icon svg > *:first-child {
|
||||
fill: var(--unit-background-neutral);
|
||||
}
|
||||
|
||||
[data-is-selected] .unit-icon svg>*:first-child {
|
||||
fill: white;
|
||||
[data-is-selected] .unit-icon svg > *:first-child {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
[data-is-highlighted] .unit-icon svg>*:first-child {
|
||||
stroke: white;
|
||||
[data-is-highlighted] .unit-icon svg > *:first-child {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
/*** Cursors ***/
|
||||
[data-is-dead],
|
||||
[data-object|="unit-missile"],
|
||||
[data-object|="unit-bomb"] {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*** Labels ***/
|
||||
[data-object|="unit"] .unit-short-label {
|
||||
color: var(--secondary-gunmetal-grey);
|
||||
font-size: var(--unit-font-size);
|
||||
font-weight: var(--unit-font-weight);
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
color: var(--secondary-gunmetal-grey);
|
||||
font-size: var(--unit-font-size);
|
||||
font-weight: var(--unit-font-weight);
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
[data-object|="unit-groundunit"] .unit-short-label {
|
||||
transform: translateY(7px);
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
/*** Health indicator ***/
|
||||
[data-object|="unit"] .unit-health {
|
||||
background: white;
|
||||
border: var(--unit-health-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: none;
|
||||
height: var(--unit-health-height);
|
||||
position: absolute;
|
||||
translate: var(--unit-health-x) var(--unit-health-y);
|
||||
width: var(--unit-health-width);
|
||||
background: white;
|
||||
border: var(--unit-health-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: none;
|
||||
height: var(--unit-health-height);
|
||||
position: absolute;
|
||||
translate: var(--unit-health-x) var(--unit-health-y);
|
||||
width: var(--unit-health-width);
|
||||
}
|
||||
|
||||
/*** Fuel indicator ***/
|
||||
[data-object|="unit"] .unit-fuel {
|
||||
background: white;
|
||||
border: var(--unit-fuel-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: none;
|
||||
height: var(--unit-fuel-height);
|
||||
position: absolute;
|
||||
translate: var(--unit-fuel-x) var(--unit-fuel-y);
|
||||
width: var(--unit-fuel-width);
|
||||
background: white;
|
||||
border: var(--unit-fuel-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: none;
|
||||
height: var(--unit-fuel-height);
|
||||
position: absolute;
|
||||
translate: var(--unit-fuel-x) var(--unit-fuel-y);
|
||||
width: var(--unit-fuel-width);
|
||||
}
|
||||
|
||||
[data-object|="unit"] .unit-fuel-level,
|
||||
[data-object|="unit"] .unit-health-level {
|
||||
background-color: var(--secondary-light-grey);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--secondary-light-grey);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*** Ammo indicator ***/
|
||||
[data-object|="unit"] .unit-ammo {
|
||||
column-gap: var(--unit-ammo-spacing);
|
||||
display: none;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
translate: var(--unit-ammo-x) var(--unit-ammo-y);
|
||||
width: fit-content;
|
||||
column-gap: var(--unit-ammo-spacing);
|
||||
display: none;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
translate: var(--unit-ammo-x) var(--unit-ammo-y);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
[data-object|="unit"] .unit-ammo>* {
|
||||
background-color: white;
|
||||
border: var(--unit-ammo-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: 50%;
|
||||
padding: var(--unit-ammo-radius);
|
||||
[data-object|="unit"] .unit-ammo > * {
|
||||
background-color: white;
|
||||
border: var(--unit-ammo-border-width) solid var(--secondary-dark-steel);
|
||||
border-radius: 50%;
|
||||
padding: var(--unit-ammo-radius);
|
||||
}
|
||||
|
||||
/*** Unit summary ***/
|
||||
[data-object|="unit"] .unit-summary {
|
||||
color: white;
|
||||
column-gap: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
justify-content: right;
|
||||
line-height: 12px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
row-gap: 1px;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
right: 100%;
|
||||
width: fit-content;
|
||||
color: white;
|
||||
column-gap: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
justify-content: right;
|
||||
line-height: 12px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
row-gap: 1px;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
right: 100%;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
[data-hide-labels] [data-object|="unit"] .unit-summary {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-object|="unit"] .unit-summary>* {
|
||||
padding: 1px;
|
||||
[data-object|="unit"] .unit-summary > * {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
[data-object|="unit"] .unit-summary .unit-callsign {
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
transform-origin: right;
|
||||
white-space: nowrap;
|
||||
width: 80px;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
transform-origin: right;
|
||||
white-space: nowrap;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
[data-object|="unit"]:hover .unit-summary .unit-callsign{
|
||||
direction: rtl;
|
||||
overflow: visible;
|
||||
[data-object|="unit"]:hover .unit-summary .unit-callsign {
|
||||
direction: rtl;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*** Common ***/
|
||||
[data-object|="unit"]:hover .unit-ammo,
|
||||
[data-object|="unit"]:hover .unit-health ,
|
||||
[data-object|="unit"]:hover .unit-health,
|
||||
[data-object|="unit"]:hover .unit-fuel {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-has-low-fuel] .unit-fuel, [data-object|="unit"][data-has-low-health] .unit-health {
|
||||
animation: pulse 1.5s linear infinite;
|
||||
[data-object|="unit"][data-has-low-fuel] .unit-fuel,
|
||||
[data-object|="unit"][data-has-low-health] .unit-health {
|
||||
animation: pulse 1.5s linear infinite;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
|
||||
@@ -214,147 +215,163 @@
|
||||
[data-object|="unit"][data-is-selected] .unit-fuel,
|
||||
[data-object|="unit"][data-is-selected] .unit-health,
|
||||
[data-object|="unit"][data-is-selected] .unit-selected-spotlight {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-has-fox-1] .unit-ammo>div:nth-child(1),
|
||||
[data-object|="unit"][data-has-fox-2] .unit-ammo>div:nth-child(2),
|
||||
[data-object|="unit"][data-has-fox-3] .unit-ammo>div:nth-child(3),
|
||||
[data-object|="unit"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
|
||||
background-color: var(--secondary-gunmetal-grey);
|
||||
[data-object|="unit"][data-has-fox-1] .unit-ammo > div:nth-child(1),
|
||||
[data-object|="unit"][data-has-fox-2] .unit-ammo > div:nth-child(2),
|
||||
[data-object|="unit"][data-has-fox-3] .unit-ammo > div:nth-child(3),
|
||||
[data-object|="unit"][data-has-other-ammo] .unit-ammo > div:nth-child(4) {
|
||||
background-color: var(--secondary-gunmetal-grey);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
|
||||
color: var(--secondary-blue-text);
|
||||
[data-object|="unit"][data-coalition="blue"][data-is-selected]
|
||||
.unit-short-label {
|
||||
color: var(--secondary-blue-text);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
|
||||
[data-object|="unit"][data-coalition="blue"] .unit-health-level,
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo>div:nth-child(1),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo>div:nth-child(2),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo>div:nth-child(3),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
|
||||
background-color: var(--primary-blue);
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-1]
|
||||
.unit-ammo
|
||||
> div:nth-child(1),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-2]
|
||||
.unit-ammo
|
||||
> div:nth-child(2),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-fox-3]
|
||||
.unit-ammo
|
||||
> div:nth-child(3),
|
||||
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo]
|
||||
.unit-ammo
|
||||
> div:nth-child(4) {
|
||||
background-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
|
||||
background-color: var(--secondary-blue-outline);
|
||||
background-color: var(--secondary-blue-outline);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
|
||||
color: var(--secondary-red-text);
|
||||
[data-object|="unit"][data-coalition="red"][data-is-selected]
|
||||
.unit-short-label {
|
||||
color: var(--secondary-red-text);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="red"] .unit-fuel-level,
|
||||
[data-object|="unit"][data-coalition="red"] .unit-health-level,
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo>div:nth-child(1),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo>div:nth-child(2),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo>div:nth-child(3),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
|
||||
background-color: var(--primary-red);
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-1]
|
||||
.unit-ammo
|
||||
> div:nth-child(1),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-2]
|
||||
.unit-ammo
|
||||
> div:nth-child(2),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-fox-3]
|
||||
.unit-ammo
|
||||
> div:nth-child(3),
|
||||
[data-object|="unit"][data-coalition="red"][data-has-other-ammo]
|
||||
.unit-ammo
|
||||
> div:nth-child(4) {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
|
||||
background-color: var(--secondary-red-outline);
|
||||
background-color: var(--secondary-red-outline);
|
||||
}
|
||||
|
||||
/*** Unit state ***/
|
||||
[data-object|="unit"] .unit-state {
|
||||
background-repeat: no-repeat;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-repeat: no-repeat;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="rtb"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/rtb.svg");
|
||||
background-image: url("/resources/theme/images/states/rtb.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="land"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/rtb.svg");
|
||||
background-image: url("/resources/theme/images/states/rtb.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="idle"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/idle.svg");
|
||||
background-image: url("/resources/theme/images/states/idle.svg");
|
||||
}
|
||||
|
||||
[data-object*="groundunit"][data-state="idle"] .unit-state,
|
||||
[data-object*="navyunit"][data-state="idle"] .unit-state {
|
||||
background-image: url(""); /* To avoid clutter, dont show the idle state for non flying units */
|
||||
background-image: url(""); /* To avoid clutter, dont show the idle state for non flying units */
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="attack"] .unit-state,
|
||||
[data-object|="unit"][data-state="bomb-point"] .unit-state,
|
||||
[data-object|="unit"][data-state="carpet-bombing"] .unit-state,
|
||||
[data-object|="unit"][data-state="fire-at-area"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/attack.svg");
|
||||
background-image: url("/resources/theme/images/states/attack.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="follow"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/follow.svg");
|
||||
background-image: url("/resources/theme/images/states/follow.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="refuel"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/refuel.svg");
|
||||
background-image: url("/resources/theme/images/states/refuel.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="human"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/human.svg");
|
||||
background-image: url("/resources/theme/images/states/human.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="dcs"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/dcs.svg");
|
||||
background-image: url("/resources/theme/images/states/dcs.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="land-at-point"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/land-at-point.svg");
|
||||
background-image: url("/resources/theme/images/states/land-at-point.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="no-task"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/no-task.svg");
|
||||
background-image: url("/resources/theme/images/states/no-task.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="off"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/off.svg");
|
||||
background-image: url("/resources/theme/images/states/off.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="tanker"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/tanker.svg");
|
||||
background-image: url("/resources/theme/images/states/tanker.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="AWACS"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/awacs.svg");
|
||||
background-image: url("/resources/theme/images/states/awacs.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="miss-on-purpose"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/miss-on-purpose.svg");
|
||||
background-image: url("/resources/theme/images/states/miss-on-purpose.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="scenic-aaa"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/scenic-aaa.svg");
|
||||
background-image: url("/resources/theme/images/states/scenic-aaa.svg");
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-state="simulate-fire-fight"] .unit-state {
|
||||
background-image: url("/resources/theme/images/states/simulate-fire-fight.svg");
|
||||
background-image: url("/resources/theme/images/states/simulate-fire-fight.svg");
|
||||
}
|
||||
|
||||
|
||||
[data-object|="unit"] .unit-health::before {
|
||||
background-image: url("/resources/theme/images/icons/health.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: " ";
|
||||
height: 6px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
translate: -10px -2px;
|
||||
width: 6px;
|
||||
background-image: url("/resources/theme/images/icons/health.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: " ";
|
||||
height: 6px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
translate: -10px -2px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
|
||||
/*** Dead unit ***/
|
||||
[data-object|="unit"][data-is-dead] .unit-selected-spotlight,
|
||||
[data-object|="unit"][data-is-dead] .unit-short-label,
|
||||
@@ -367,17 +384,17 @@
|
||||
[data-object|="unit"][data-is-dead] .unit-ammo,
|
||||
[data-object|="unit"][data-is-dead]:hover .unit-fuel,
|
||||
[data-object|="unit"][data-is-dead]:hover .unit-ammo {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-is-dead] .unit-summary>* {
|
||||
display: none;
|
||||
[data-object|="unit"][data-is-dead] .unit-summary > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-object|="unit"][data-is-dead] .unit-summary .unit-callsign {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ol-temporary-marker {
|
||||
opacity: 0.5;
|
||||
}
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -2,19 +2,21 @@ import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
|
||||
import { CustomMarker } from "./custommarker";
|
||||
|
||||
export class TargetMarker extends CustomMarker {
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
}
|
||||
constructor(latlng: LatLngExpression, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
this.setIcon(new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 26],
|
||||
className: "leaflet-target-marker",
|
||||
}));
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-target-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
createIcon() {
|
||||
this.setIcon(
|
||||
new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 26],
|
||||
className: "leaflet-target-marker",
|
||||
})
|
||||
);
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-target-icon");
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,76 +1,87 @@
|
||||
import { CustomMarker } from "./custommarker";
|
||||
import { DivIcon, LatLng } from "leaflet";
|
||||
import { SVGInjector } from "@tanem/svg-injector";
|
||||
import { getMarkerCategoryByName, getUnitDatabaseByCategory } from "../../other/utils";
|
||||
import {
|
||||
getMarkerCategoryByName,
|
||||
getUnitDatabaseByCategory,
|
||||
} from "../../other/utils";
|
||||
import { getApp } from "../../olympusapp";
|
||||
|
||||
export class TemporaryUnitMarker extends CustomMarker {
|
||||
#name: string;
|
||||
#coalition: string;
|
||||
#commandHash: string|undefined = undefined;
|
||||
#timer: number = 0;
|
||||
#name: string;
|
||||
#coalition: string;
|
||||
#commandHash: string | undefined = undefined;
|
||||
#timer: number = 0;
|
||||
|
||||
constructor(latlng: LatLng, name: string, coalition: string, commandHash?: string) {
|
||||
super(latlng, {interactive: false});
|
||||
this.#name = name;
|
||||
this.#coalition = coalition;
|
||||
this.#commandHash = commandHash;
|
||||
constructor(
|
||||
latlng: LatLng,
|
||||
name: string,
|
||||
coalition: string,
|
||||
commandHash?: string
|
||||
) {
|
||||
super(latlng, { interactive: false });
|
||||
this.#name = name;
|
||||
this.#coalition = coalition;
|
||||
this.#commandHash = commandHash;
|
||||
|
||||
if (commandHash !== undefined)
|
||||
this.setCommandHash(commandHash)
|
||||
}
|
||||
if (commandHash !== undefined) this.setCommandHash(commandHash);
|
||||
}
|
||||
|
||||
setCommandHash(commandHash: string) {
|
||||
this.#commandHash = commandHash;
|
||||
this.#timer = window.setInterval(() => {
|
||||
if (this.#commandHash !== undefined) {
|
||||
getApp().getServerManager().isCommandExecuted((res: any) => {
|
||||
if (res.commandExecuted) {
|
||||
this.removeFrom(getApp().getMap());
|
||||
window.clearInterval(this.#timer);
|
||||
}
|
||||
}, this.#commandHash)
|
||||
setCommandHash(commandHash: string) {
|
||||
this.#commandHash = commandHash;
|
||||
this.#timer = window.setInterval(() => {
|
||||
if (this.#commandHash !== undefined) {
|
||||
getApp()
|
||||
.getServerManager()
|
||||
.isCommandExecuted((res: any) => {
|
||||
if (res.commandExecuted) {
|
||||
this.removeFrom(getApp().getMap());
|
||||
window.clearInterval(this.#timer);
|
||||
}
|
||||
}, 1000);
|
||||
}, this.#commandHash);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
const category = getMarkerCategoryByName(this.#name);
|
||||
const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(
|
||||
this.#name
|
||||
);
|
||||
|
||||
/* 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.classList.add("unit");
|
||||
el.setAttribute("data-object", `unit-${category}`);
|
||||
el.setAttribute("data-coalition", this.#coalition);
|
||||
|
||||
// Main icon
|
||||
var unitIcon = document.createElement("div");
|
||||
unitIcon.classList.add("unit-icon");
|
||||
var img = document.createElement("img");
|
||||
|
||||
img.src = `/resources/theme/images/units/${databaseEntry?.markerFile ?? category}.svg`;
|
||||
img.onload = () => SVGInjector(img);
|
||||
unitIcon.appendChild(img);
|
||||
unitIcon.toggleAttribute("data-rotate-to-heading", false);
|
||||
el.append(unitIcon);
|
||||
|
||||
// Short label
|
||||
if (category == "aircraft" || category == "helicopter") {
|
||||
var shortLabel = document.createElement("div");
|
||||
shortLabel.classList.add("unit-short-label");
|
||||
shortLabel.innerText = databaseEntry?.shortLabel || "";
|
||||
el.append(shortLabel);
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
const category = getMarkerCategoryByName(this.#name);
|
||||
const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(this.#name);
|
||||
|
||||
/* 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.classList.add("unit");
|
||||
el.setAttribute("data-object", `unit-${category}`);
|
||||
el.setAttribute("data-coalition", this.#coalition);
|
||||
|
||||
// Main icon
|
||||
var unitIcon = document.createElement("div");
|
||||
unitIcon.classList.add("unit-icon");
|
||||
var img = document.createElement("img");
|
||||
|
||||
img.src = `/resources/theme/images/units/${databaseEntry?.markerFile ?? category}.svg`;
|
||||
img.onload = () => SVGInjector(img);
|
||||
unitIcon.appendChild(img);
|
||||
unitIcon.toggleAttribute("data-rotate-to-heading", false);
|
||||
el.append(unitIcon);
|
||||
|
||||
// Short label
|
||||
if (category == "aircraft" || category == "helicopter") {
|
||||
var shortLabel = document.createElement("div");
|
||||
shortLabel.classList.add("unit-short-label");
|
||||
shortLabel.innerText = databaseEntry?.shortLabel || "";
|
||||
el.append(shortLabel);
|
||||
}
|
||||
|
||||
this.getElement()?.appendChild(el);
|
||||
this.getElement()?.classList.add("ol-temporary-marker");
|
||||
}
|
||||
}
|
||||
this.getElement()?.appendChild(el);
|
||||
this.getElement()?.classList.add("ol-temporary-marker");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user