weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dead state for air units; other minor CSS improvments.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-12 14:06:06 +00:00
parent df6210bec9
commit 4f90078b9f
4 changed files with 237 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
client/public/stylesheets/units.css
View File

@ -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;
}

3
client/public/themes/olympus/olympus.css
View File

@ -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 ***/

4
client/src/units/unit.ts
View File

@ -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,
`<div class="unit unit-air" data-status="hold" data-coalition="${data.missionData.coalition}" data-is-in-hotgroup="false" data-is-selected="false">
`<div class="unit unit-air" data-status="hold" data-coalition="${data.missionData.coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker-border"></div>
<div class="unit-status"></div>

121
client/views/uikit.ejs
View File

@ -354,7 +354,7 @@
<div class="example">
<div class="caption">0% (empty)</div>
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red" data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -378,7 +378,7 @@
<div class="caption">10%</div>
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red" data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -401,7 +401,7 @@
<div class="example">
<div class="caption">20%</div>
<div class="unit unit-air" data-pilot="ai" data-has-low-fuel="true" data-coalition="red">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -424,7 +424,7 @@
<div class="example">
<div class="caption">50%</div>
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-coalition="red" data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -447,7 +447,7 @@
<div class="example">
<div class="caption">75%</div>
<div class="unit unit-air" data-pilot="ai" data-coalition="red">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -470,7 +470,7 @@
<div class="example">
<div class="caption">100%</div>
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-coalition="red" data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
@ -501,7 +501,7 @@
<div class="example">
<div class="unit unit-air" data-status="rtb" data-pilot="ai">
<div class="unit unit-air unit-aircraft" data-status="rtb" data-pilot="ai">
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
@ -531,7 +531,7 @@
<div class="example">
<div class="unit unit-air" data-status="rtb" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-status="rtb" data-coalition="blue" data-is-in-hotgroup data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(315deg);"></div>
@ -560,7 +560,7 @@
<div class="example">
<div class="unit unit-air" data-status="rtb" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
<div class="unit unit-air unit-aircraft" data-status="rtb" data-pilot="ai" data-coalition="red" data-is-in-hotgroup>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(270deg);"></div>
@ -590,7 +590,7 @@
<div class="example">
<div class="unit unit-air" data-status="hold" data-pilot="ai">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai">
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
@ -620,7 +620,7 @@
<div class="example">
<div class="unit unit-air" data-status="hold" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true">
<div class="unit unit-air unit-aircraft" data-status="hold" data-coalition="blue" data-is-in-hotgroup data-is-selected>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(315deg);"></div>
@ -649,7 +649,104 @@
<div class="example">
<div class="unit unit-air" data-status="hold" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-coalition="red" data-is-in-hotgroup>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(280deg);"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
</div>
<div class="unit-ammo">
<div class="unit-ammo-fox-1"></div>
<div class="unit-ammo-fox-2"></div>
<div class="unit-ammo-fox-3"></div>
<div class="unit-ammo-other"></div>
</div>
<div class="unit-summary">
<div class="unit-callsign">Springfield 3-1 | Longname</div>
<div class="unit-heading">260</div>
<div class="unit-altitude">31</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-header">Dead</div>
<div class="content-body">
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-is-dead>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
</div>
<div class="unit-ammo">
<div class="unit-ammo-fox-1"></div>
<div class="unit-ammo-fox-2"></div>
<div class="unit-ammo-fox-3"></div>
<div class="unit-ammo-other"></div>
</div>
<div class="unit-summary">
<div class="unit-callsign">Springfield 3-1 | Longname</div>
<div class="unit-heading">260</div>
<div class="unit-altitude">31</div>
</div>
</div>
</div>
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-coalition="blue" data-is-in-hotgroup data-is-selected data-is-dead>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(315deg);"></div>
<div class="unit-hotgroup">
<div class="unit-hotgroup-id">4</div>
</div>
<div class="unit-marker"></div>
<div class="unit-short-label">18</div>
<div class="unit-fuel">
<div class="unit-fuel-level" style="width:100%;"></div>
</div>
<div class="unit-ammo">
<div class="unit-ammo-fox-1"></div>
<div class="unit-ammo-fox-2"></div>
<div class="unit-ammo-fox-3"></div>
<div class="unit-ammo-other"></div>
</div>
<div class="unit-summary">
<div class="unit-callsign">Springfield 3-1 | Longname</div>
<div class="unit-heading">260</div>
<div class="unit-altitude">31</div>
</div>
</div>
</div>
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-coalition="red" data-is-dead>
<div class="unit-selected-spotlight"></div>
<div class="unit-status"></div>
<div class="unit-vvi" style="height: 50px; transform:rotate(280deg);"></div>