diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index a00d8307..9f3d9abf 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -13,30 +13,30 @@ } -div.unit { +.unit { align-items: center; display:flex; justify-content: center; position:relative; } -div.unit:not( .no-function ) { +.unit:not( .no-function ) { cursor:pointer; } -[data-hide-aircraft] #map-container div.unit-air, -[data-hide-ground] #map-container div.unit-ground, -[data-hide-sam] #map-container div.unit-sam, -[data-hide-threat] #map-container div.unit-threat, -[data-hide-naval] #map-container div.unit-naval, -[data-hide-blue] #map-container div.unit[data-coalition="blue"], -[data-hide-red] #map-container div.unit[data-coalition="red"], -[data-hide-neutral] #map-container div.unit[data-coalition="neutral"] { +[data-hide-aircraft] #map-container .unit-air, +[data-hide-ground] #map-container .unit-ground, +[data-hide-sam] #map-container .unit-sam, +[data-hide-threat] #map-container .unit-threat, +[data-hide-naval] #map-container .unit-naval, +[data-hide-blue] #map-container .unit[data-coalition="blue"], +[data-hide-red] #map-container .unit[data-coalition="red"], +[data-hide-neutral] #map-container .unit[data-coalition="neutral"] { display:none; } -div.unit .unit-selected-spotlight { +.unit .unit-selected-spotlight { background-color: var( --unit-spotlight-fill ); border-radius: 50%; display:none; @@ -46,7 +46,7 @@ div.unit .unit-selected-spotlight { } -div.unit .unit-vvi { +.unit .unit-vvi { align-self: center; background:var( --secondary-gunmetal-grey ); display:flex; @@ -59,7 +59,7 @@ div.unit .unit-vvi { } -div.unit .unit-hotgroup { +.unit .unit-hotgroup { align-content: center; background-color: black; border-radius: var( --border-radius-xs ); @@ -73,7 +73,7 @@ div.unit .unit-hotgroup { z-index: 5; } -div.unit .unit-hotgroup-id { +.unit .unit-hotgroup-id { background-color: transparent; color:white; font-size: 9px; @@ -81,7 +81,7 @@ div.unit .unit-hotgroup-id { transform:rotate( 45deg ); } -div.unit .unit-marker-border { +.unit .unit-marker-border { background-color: white; border-radius: var( --border-radius-sm ); display:none; @@ -91,8 +91,8 @@ div.unit .unit-marker-border { z-index:2; } -div.unit:hover .unit-marker-border, -div.unit[data-is-selected="true"] .unit-marker-border { +.unit:hover .unit-marker-border, +.unit[data-is-selected] .unit-marker-border { display:block; } @@ -101,7 +101,7 @@ div.unit[data-is-selected="true"] .unit-marker-border { Marker ******************************/ -div.unit .unit-marker { +.unit .unit-marker { background-color: transparent; background-repeat: no-repeat; background-size: cover; @@ -114,113 +114,115 @@ div.unit .unit-marker { /* Air */ -div.unit-air .unit-marker { +.unit-air .unit-marker { background-image: var( --unit-air-marker-neutral-url ); height: var( --unit-air-marker-height ); width: var( --unit-air-marker-width ); } -div.unit-air:not( .no-function ):hover .unit-marker, div.unit-air[data-is-selected="true"] .unit-marker { +.unit-air:hover .unit-marker, .unit-air[data-is-selected] .unit-marker { background-image: var( --unit-air-marker-neutral-hover-url ); } -div.unit-air[data-coalition="blue"] .unit-marker { +.unit-air[data-coalition="blue"] .unit-marker { background-image: var( --unit-air-marker-blue-url ); } -div.unit-air[data-coalition="blue"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="blue"][data-is-selected="true"] .unit-marker { +.unit-air[data-coalition="blue"]:hover .unit-marker, .unit-air[data-coalition="blue"][data-is-selected] .unit-marker { background-image: var( --unit-air-marker-blue-hover-url ); } -div.unit-air[data-coalition="red"] .unit-marker { +.unit-air[data-coalition="red"] .unit-marker { background-image: var( --unit-air-marker-red-url ); } -div.unit-air[data-coalition="red"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="red"][data-is-selected="true"] .unit-marker { +.unit-air[data-coalition="red"]:hover .unit-marker, .unit-air[data-coalition="red"][data-is-selected] .unit-marker { background-image: var( --unit-air-marker-red-hover-url ); } + + /* Ground vehicles (not SAMs) */ -div.unit-ground .unit-marker { +.unit-ground .unit-marker { background-image: var( --unit-ground-marker-neutral-url ); height: var( --unit-ground-marker-height ); width: var( --unit-ground-marker-width ); } -div.unit-ground[data-coalition="blue"] .unit-marker { +.unit-ground[data-coalition="blue"] .unit-marker { background-image: var( --unit-ground-marker-blue-url ); } -div.unit-ground[data-coalition="red"] .unit-marker { +.unit-ground[data-coalition="red"] .unit-marker { background-image: var( --unit-ground-marker-red-url ); } /* SAMs */ -div.unit-sam .unit-marker { +.unit-sam .unit-marker { background-image: var( --unit-sam-marker-neutral-url ); height: var( --unit-sam-marker-height ); width: var( --unit-sam-marker-width ); } -div.unit-sam[data-coalition="blue"] .unit-marker { +.unit-sam[data-coalition="blue"] .unit-marker { background-image: var( --unit-sam-marker-blue-url ); } -div.unit-sam[data-coalition="red"] .unit-marker { +.unit-sam[data-coalition="red"] .unit-marker { background-image: var( --unit-sam-marker-red-url ); } /* Naval */ -div.unit-naval .unit-marker { +.unit-naval .unit-marker { background-image: var( --unit-naval-marker-neutral-url ); height: var( --unit-naval-marker-height ); width: var( --unit-naval-marker-width ); } -div.unit-naval[data-coalition="blue"] .unit-marker { +.unit-naval[data-coalition="blue"] .unit-marker { background-image: var( --unit-naval-marker-blue-url ); } -div.unit-naval[data-coalition="red"] .unit-marker { +.unit-naval[data-coalition="red"] .unit-marker { background-image: var( --unit-naval-marker-red-url ); } /* Building */ -div.unit-building .unit-marker { +.unit-building .unit-marker { background-image: var( --unit-building-marker-neutral-url ); height: var( --unit-building-marker-height ); width: var( --unit-building-marker-width ); } -div.unit-building[data-coalition="blue"] .unit-marker { +.unit-building[data-coalition="blue"] .unit-marker { background-image: var( --unit-building-marker-blue-url ); } -div.unit-building[data-coalition="red"] .unit-marker { +.unit-building[data-coalition="red"] .unit-marker { background-image: var( --unit-building-marker-red-url ); } -div.unit .unit-short-label { +.unit .unit-short-label { color: var( --secondary-gunmetal-grey ); font-size: var(--unit-font-size); font-weight: var(--unit-font-weight); @@ -228,16 +230,16 @@ div.unit .unit-short-label { z-index:10; } -div.unit-sam .unit-short-label { +.unit-sam .unit-short-label { translate:0 50%; } -div.unit-naval .unit-short-label { +.unit-naval .unit-short-label { translate:0 -50%; } -div.unit .unit-fuel { +.unit .unit-fuel { background:white; border: var( --unit-air-fuel-border-width ) solid var( --secondary-dark-steel ); border-radius: var( --border-radius-sm ); @@ -249,14 +251,14 @@ div.unit .unit-fuel { z-index: 5; } -div.unit .unit-fuel-level { +.unit .unit-fuel-level { background-color: var( --secondary-light-grey ); height:100%; width:100%; } -div.unit .unit-ammo { +.unit .unit-ammo { column-gap: var( --unit-air-ammo-spacing ); display:none; height:fit-content; @@ -265,7 +267,7 @@ div.unit .unit-ammo { width:fit-content; } -div.unit .unit-ammo > * { +.unit .unit-ammo > * { background-color: white; border: var( --unit-air-ammo-border-width ) solid var( --secondary-dark-steel ); border-radius: 50%; @@ -273,7 +275,7 @@ div.unit .unit-ammo > * { } -div.unit .unit-summary { +.unit .unit-summary { column-gap: 6px; color:white; display:flex; @@ -294,15 +296,15 @@ div.unit .unit-summary { z-index:20; } -[data-hide-labels] div.unit .unit-summary { +[data-hide-labels] .unit .unit-summary { display:none; } -div.unit .unit-summary > * { +.unit .unit-summary > * { padding:1px; } -div.unit .unit-summary .unit-callsign { +.unit .unit-summary .unit-callsign { color:white; overflow: hidden; text-align: right; @@ -311,65 +313,65 @@ div.unit .unit-summary .unit-callsign { width: 80px; } -div.unit .unit-summary .unit-callsign:hover { +.unit .unit-summary .unit-callsign:hover { direction: rtl; overflow:visible; } -div.unit[data-pilot="ai"]:hover .unit-ammo, -div.unit[data-pilot="ai"]:hover .unit-fuel { +.unit[data-pilot="ai"]:hover .unit-ammo, +.unit[data-pilot="ai"]:hover .unit-fuel { display:flex; } -div.unit[data-is-in-hotgroup="true"] .unit-hotgroup, -div.unit[data-pilot="ai"][data-is-selected="true"] .unit-ammo, -div.unit[data-pilot="ai"][data-is-selected="true"] .unit-fuel, -div.unit[data-is-selected="true"] .unit-selected-spotlight { +.unit[data-is-in-hotgroup] .unit-hotgroup, +.unit[data-pilot="ai"][data-is-selected] .unit-ammo, +.unit[data-pilot="ai"][data-is-selected] .unit-fuel, +.unit[data-is-selected] .unit-selected-spotlight { display:flex; } -div.unit[data-has-fox-1="true"] .unit-ammo-fox-1, -div.unit[data-has-fox-2="true"] .unit-ammo-fox-2, -div.unit[data-has-fox-3="true"] .unit-ammo-fox-3, -div.unit[data-has-other-ammo="true"] .unit-ammo-other { +.unit[data-has-fox-1] .unit-ammo-fox-1, +.unit[data-has-fox-2] .unit-ammo-fox-2, +.unit[data-has-fox-3] .unit-ammo-fox-3, +.unit[data-has-other-ammo] .unit-ammo-other { background-color: var( --secondary-gunmetal-grey ); } -div.unit[data-coalition="blue"][data-is-selected="true"] .unit-short-label { +.unit[data-coalition="blue"][data-is-selected] .unit-short-label { color: var( --secondary-blue-text ); } -div.unit[data-coalition="blue"] .unit-fuel-level, -div.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo-fox-1, -div.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo-fox-2, -div.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo-fox-3, -div.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo-other { +.unit[data-coalition="blue"] .unit-fuel-level, +.unit[data-coalition="blue"][data-has-fox-1] .unit-ammo-fox-1, +.unit[data-coalition="blue"][data-has-fox-2] .unit-ammo-fox-2, +.unit[data-coalition="blue"][data-has-fox-3] .unit-ammo-fox-3, +.unit[data-coalition="blue"][data-has-other-ammo] .unit-ammo-other { background-color: var( --primary-blue ); } -div.unit[data-coalition="blue"] .unit-vvi { +.unit[data-coalition="blue"] .unit-vvi { background-color: var( --secondary-blue-outline ); } -div.unit[data-coalition="red"][data-is-selected="true"] .unit-short-label { +.unit[data-coalition="red"][data-is-selected] .unit-short-label { color: var( --secondary-red-text ); } -div.unit[data-coalition="red"] .unit-fuel-level, -div.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo-fox-1, -div.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo-fox-2, -div.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo-fox-3, -div.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo-other { +.unit[data-coalition="red"] .unit-fuel-level, +.unit[data-coalition="red"][data-has-fox-1] .unit-ammo-fox-1, +.unit[data-coalition="red"][data-has-fox-2] .unit-ammo-fox-2, +.unit[data-coalition="red"][data-has-fox-3] .unit-ammo-fox-3, +.unit[data-coalition="red"][data-has-other-ammo] .unit-ammo-other { background-color: var( --primary-red ); } -div.unit[data-coalition="blue"] .unit-vvi { +.unit[data-coalition="blue"] .unit-vvi { background-color: var( --secondary-red-outline ); } @@ -381,17 +383,17 @@ div.unit[data-coalition="blue"] .unit-vvi { } } -div.unit[data-pilot="ai"][data-has-low-fuel="true"] .unit-fuel { +.unit[data-pilot="ai"][data-has-low-fuel] .unit-fuel { animation: pulse 1.5s linear infinite; } -div.unit[data-is-selected="true"] rect.unit-marker { +.unit[data-is-selected] rect.unit-marker { fill:white; } -div.unit .unit-status { +.unit .unit-status { background-repeat: no-repeat; position:absolute; height:var( --unit-air-status-rtb-height ); @@ -401,33 +403,73 @@ div.unit .unit-status { z-index: 10; } -div.unit[data-status="rtb"] .unit-status { +.unit[data-status="rtb"] .unit-status { background-image: var( --unit-air-status-rtb-neutral-url ); height:var( --unit-air-status-rtb-height ); width:var( --unit-air-status-rtb-width ); } -div.unit[data-status="rtb"][data-coalition="blue"] .unit-status { +.unit[data-status="rtb"][data-coalition="blue"] .unit-status { background-image: var( --unit-air-status-rtb-blue-url ); } -div.unit[data-status="rtb"][data-coalition="red"] .unit-status { +.unit[data-status="rtb"][data-coalition="red"] .unit-status { background-image: var( --unit-air-status-rtb-red-url ); } -div.unit[data-status="hold"] .unit-status { +.unit[data-status="hold"] .unit-status { background-image: var( --unit-air-status-hold-neutral-url ); height:var( --unit-air-status-hold-height ); width:var( --unit-air-status-hold-width ); } -div.unit[data-status="hold"][data-coalition="blue"] .unit-status { +.unit[data-status="hold"][data-coalition="blue"] .unit-status { background-image: var( --unit-air-status-hold-blue-url ); } -div.unit[data-status="hold"][data-coalition="red"] .unit-status { +.unit[data-status="hold"][data-coalition="red"] .unit-status { background-image: var( --unit-air-status-hold-red-url ); +} + + +/*** DEAD ***/ +.unit-air[ data-is-dead ] .unit-marker { + background-image: var( --unit-air-marker-neutral-dead-url ); + background-position: 50% 50%; + background-size: auto 32px; +} + +.unit-air[ data-is-dead ][data-coalition="blue"] .unit-marker { + background-image: var( --unit-air-marker-blue-dead-url ); +} + +.unit-air[ data-is-dead ][data-coalition="red"] .unit-marker { + background-image: var( --unit-air-marker-red-dead-url ); +} + + +.unit-air[ data-is-dead ] .unit-selected-spotlight, +.unit-air[ data-is-dead ] .unit-short-label, +.unit-air[ data-is-dead ] .unit-vvi, +.unit-air[ data-is-dead ] .unit-hotgroup, +.unit-air[ data-is-dead ] .unit-hotgroup-id, +.unit-air[ data-is-dead ] .unit-status, +.unit-air[ data-is-dead ] .unit-fuel, +.unit-air[ data-is-dead ] .unit-ammo, +.unit-air[ data-is-dead ]:hover .unit-fuel, +.unit-air[ data-is-dead ]:hover .unit-ammo +{ + display:none; +} + + +.unit-air[ data-is-dead ] .unit-summary > * { + display:none; +} + +.unit-air[ data-is-dead ] .unit-summary .unit-callsign { + display:block; } \ No newline at end of file diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index cc033bc7..80983cb1 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -101,12 +101,15 @@ --unit-air-marker-blue-url: url( "/themes/olympus/images/icon_aircraft_blue.svg" ); --unit-air-marker-blue-hover-url: url( "/themes/olympus/images/icon_aircraft_blue_hover.svg" ); + --unit-air-marker-blue-dead-url: url( "/themes/olympus/images/icon_death_blue.svg" ); --unit-air-marker-neutral-url: url( "/themes/olympus/images/icon_aircraft_neutral.svg" ); --unit-air-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aircraft_neutral_hover.svg" ); + --unit-air-marker-neutral-dead-url: url( "/themes/olympus/images/icon_death_neutral.svg" ); --unit-air-marker-red-url: url( "/themes/olympus/images/icon_aircraft_red.svg" ); --unit-air-marker-red-hover-url: url( "/themes/olympus/images/icon_aircraft_red_hover.svg" ); + --unit-air-marker-red-dead-url: url( "/themes/olympus/images/icon_death_red.svg" ); /*** Air units' statuses ***/ diff --git a/client/src/units/unit.ts b/client/src/units/unit.ts index ff02116c..bc9367fc 100644 --- a/client/src/units/unit.ts +++ b/client/src/units/unit.ts @@ -290,7 +290,7 @@ export class Unit extends Marker { if (element != null) { element.querySelector(".unit-vvi")?.setAttribute("style", `height: ${this.getFlightData().speed / 5}px; transform:rotate(${rad2deg(this.getFlightData().heading)}deg);`); element.querySelector(".unit")?.setAttribute("data-fuel-level", "20"); - element.querySelector(".unit")?.setAttribute("data-has-fox-1", "true"); + element.querySelector(".unit")?.toggleAttribute("data-has-fox-1", true ); var unitHeadingDiv = element.querySelector(".unit-heading"); if (unitHeadingDiv != null) @@ -384,7 +384,7 @@ export class AirUnit extends Unit { export class Aircraft extends AirUnit { constructor(ID: number, data: UnitData) { super(ID, data, - `
+ `
diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs index af4478e7..0d46f8e3 100644 --- a/client/views/uikit.ejs +++ b/client/views/uikit.ejs @@ -354,7 +354,7 @@
0% (empty)
-
+
4
@@ -378,7 +378,7 @@
10%
-
+
4
@@ -401,7 +401,7 @@
20%
-
+
4
@@ -424,7 +424,7 @@
50%
-
+
4
@@ -447,7 +447,7 @@
75%
-
+
4
@@ -470,7 +470,7 @@
100%
-
+
4
@@ -501,7 +501,7 @@
-
+
@@ -531,7 +531,7 @@
-
+
@@ -560,7 +560,7 @@
-
+
@@ -590,7 +590,7 @@
-
+
@@ -620,7 +620,7 @@
-
+
@@ -649,7 +649,104 @@
-
+
+
+
+
+
+
4
+
+
+
18
+
+
+
+
+
+
+
+
+
+
+
Springfield 3-1 | Longname
+
260
+
31
+
+
+ +
+ + +
+
+ +
+ +
Dead
+
+ +
+ +
+
+
+
+
+
4
+
+
+
18
+
+
+
+
+
+
+
+
+
+
+
Springfield 3-1 | Longname
+
260
+
31
+
+
+ +
+ + +
+ +
+
+
+
+
+
4
+
+
+
18
+
+
+
+
+
+
+
+
+
+
+
Springfield 3-1 | Longname
+
260
+
31
+
+
+ +
+ +
+ +