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

Switched to element selectors, because sexy.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-12 16:25:57 +00:00
parent 4f90078b9f
commit 04cdf68738
3 changed files with 162 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,30 +13,27 @@
}
.unit {
[data-object|="unit"] {
align-items: center;
cursor:pointer;
display:flex;
justify-content: center;
position:relative;
}
.unit:not( .no-function ) {
cursor:pointer;
}
[data-hide-aircraft] #map-container .unit-air,
[data-hide-ground] #map-container .unit-ground,
[data-hide-sam] #map-container .unit-sam,
[data-hide-aircraft] #map-container [data-object|="unit-air"],
[data-hide-ground] #map-container [data-object|="unit-ground-mi"],
[data-hide-sam] #map-container [data-object|="unit-ground-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"] {
[data-hide-naval] #map-container [data-object|="unit-ground-naval"],
[data-hide-blue] #map-container [data-object|="unit"][data-coalition="blue"],
[data-hide-red] #map-container [data-object|="unit"][data-coalition="red"],
[data-hide-neutral] #map-container [data-object|="unit"][data-coalition="neutral"] {
display:none;
}
.unit .unit-selected-spotlight {
[data-object|="unit"] .unit-selected-spotlight {
background-color: var( --unit-spotlight-fill );
border-radius: 50%;
display:none;
@ -46,7 +43,7 @@
}
.unit .unit-vvi {
[data-object|="unit"] .unit-vvi {
align-self: center;
background:var( --secondary-gunmetal-grey );
display:flex;
@ -59,7 +56,7 @@
}
.unit .unit-hotgroup {
[data-object|="unit"] .unit-hotgroup {
align-content: center;
background-color: black;
border-radius: var( --border-radius-xs );
@ -73,7 +70,7 @@
z-index: 5;
}
.unit .unit-hotgroup-id {
[data-object|="unit"] .unit-hotgroup-id {
background-color: transparent;
color:white;
font-size: 9px;
@ -81,7 +78,7 @@
transform:rotate( 45deg );
}
.unit .unit-marker-border {
[data-object|="unit"] .unit-marker-border {
background-color: white;
border-radius: var( --border-radius-sm );
display:none;
@ -92,7 +89,7 @@
}
.unit:hover .unit-marker-border,
.unit[data-is-selected] .unit-marker-border {
[data-object|="unit"][data-is-selected] .unit-marker-border {
display:block;
}
@ -101,7 +98,7 @@
Marker
******************************/
.unit .unit-marker {
[data-object|="unit"] .unit-marker {
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
@ -114,31 +111,31 @@
/* Air */
.unit-air .unit-marker {
[data-object|="unit-air"] .unit-marker {
background-image: var( --unit-air-marker-neutral-url );
height: var( --unit-air-marker-height );
width: var( --unit-air-marker-width );
}
.unit-air:hover .unit-marker, .unit-air[data-is-selected] .unit-marker {
[data-object|="unit-air"]:hover .unit-marker, [data-object|="unit-air"][data-is-selected] .unit-marker {
background-image: var( --unit-air-marker-neutral-hover-url );
}
.unit-air[data-coalition="blue"] .unit-marker {
[data-object|="unit-air"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-air-marker-blue-url );
}
.unit-air[data-coalition="blue"]:hover .unit-marker, .unit-air[data-coalition="blue"][data-is-selected] .unit-marker {
[data-object|="unit-air"][data-coalition="blue"]:hover .unit-marker, [data-object|="unit-air"][data-coalition="blue"][data-is-selected] .unit-marker {
background-image: var( --unit-air-marker-blue-hover-url );
}
.unit-air[data-coalition="red"] .unit-marker {
[data-object|="unit-air"][data-coalition="red"] .unit-marker {
background-image: var( --unit-air-marker-red-url );
}
.unit-air[data-coalition="red"]:hover .unit-marker, .unit-air[data-coalition="red"][data-is-selected] .unit-marker {
[data-object|="unit-air"][data-coalition="red"]:hover .unit-marker, [data-object|="unit-air"][data-coalition="red"][data-is-selected] .unit-marker {
background-image: var( --unit-air-marker-red-hover-url );
}
@ -147,99 +144,104 @@
/* Ground vehicles (not SAMs) */
.unit-ground .unit-marker {
[data-object|="unit-ground-mi"] .unit-marker {
background-image: var( --unit-ground-marker-neutral-url );
height: var( --unit-ground-marker-height );
width: var( --unit-ground-marker-width );
}
.unit-ground[data-coalition="blue"] .unit-marker {
[data-object|="unit-ground-mi"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-ground-marker-blue-url );
}
.unit-ground[data-coalition="red"] .unit-marker {
[data-object|="unit-ground-mi"][data-coalition="red"] .unit-marker {
background-image: var( --unit-ground-marker-red-url );
}
/* SAMs */
.unit-sam .unit-marker {
[data-object|="unit-ground-sam"] .unit-marker {
background-image: var( --unit-sam-marker-neutral-url );
height: var( --unit-sam-marker-height );
width: var( --unit-sam-marker-width );
}
.unit-sam[data-coalition="blue"] .unit-marker {
[data-object|="unit-ground-sam"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-sam-marker-blue-url );
}
.unit-sam[data-coalition="red"] .unit-marker {
[data-object|="unit-ground-sam"][data-coalition="red"] .unit-marker {
background-image: var( --unit-sam-marker-red-url );
}
/* Naval */
.unit-naval .unit-marker {
[data-object|="unit-naval"] .unit-marker {
background-image: var( --unit-naval-marker-neutral-url );
height: var( --unit-naval-marker-height );
width: var( --unit-naval-marker-width );
}
.unit-naval[data-coalition="blue"] .unit-marker {
[data-object|="unit-naval"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-naval-marker-blue-url );
}
.unit-naval[data-coalition="red"] .unit-marker {
[data-object|="unit-naval"][data-coalition="red"] .unit-marker {
background-image: var( --unit-naval-marker-red-url );
}
/* Building */
.unit-building .unit-marker {
[data-object|="unit-building"] .unit-marker {
background-image: var( --unit-building-marker-neutral-url );
height: var( --unit-building-marker-height );
width: var( --unit-building-marker-width );
}
.unit-building[data-coalition="blue"] .unit-marker {
[data-object|="unit-building"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-building-marker-blue-url );
}
.unit-building[data-coalition="red"] .unit-marker {
[data-object|="unit-building"][data-coalition="red"] .unit-marker {
background-image: var( --unit-building-marker-red-url );
}
.unit .unit-short-label {
[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;
z-index:10;
}
.unit-sam .unit-short-label {
[data-object|="unit-ground-mi"] .unit-short-label {
translate: -1px 0;
}
[data-object|="unit-ground-sam"] .unit-short-label {
translate:0 50%;
}
.unit-naval .unit-short-label {
[data-object|="unit-naval"] .unit-short-label {
translate:0 -50%;
}
.unit .unit-fuel {
[data-object|="unit"] .unit-fuel {
background:white;
border: var( --unit-air-fuel-border-width ) solid var( --secondary-dark-steel );
border-radius: var( --border-radius-sm );
@ -251,14 +253,14 @@
z-index: 5;
}
.unit .unit-fuel-level {
[data-object|="unit"] .unit-fuel-level {
background-color: var( --secondary-light-grey );
height:100%;
width:100%;
}
.unit .unit-ammo {
[data-object|="unit"] .unit-ammo {
column-gap: var( --unit-air-ammo-spacing );
display:none;
height:fit-content;
@ -267,7 +269,7 @@
width:fit-content;
}
.unit .unit-ammo > * {
[data-object|="unit"] .unit-ammo > * {
background-color: white;
border: var( --unit-air-ammo-border-width ) solid var( --secondary-dark-steel );
border-radius: 50%;
@ -275,7 +277,7 @@
}
.unit .unit-summary {
[data-object|="unit"] .unit-summary {
column-gap: 6px;
color:white;
display:flex;
@ -296,15 +298,15 @@
z-index:20;
}
[data-hide-labels] .unit .unit-summary {
[data-hide-labels] [data-object|="unit"] .unit-summary {
display:none;
}
.unit .unit-summary > * {
[data-object|="unit"] .unit-summary > * {
padding:1px;
}
.unit .unit-summary .unit-callsign {
[data-object|="unit"] .unit-summary .unit-callsign {
color:white;
overflow: hidden;
text-align: right;
@ -313,65 +315,65 @@
width: 80px;
}
.unit .unit-summary .unit-callsign:hover {
[data-object|="unit"] .unit-summary .unit-callsign:hover {
direction: rtl;
overflow:visible;
}
.unit[data-pilot="ai"]:hover .unit-ammo,
.unit[data-pilot="ai"]:hover .unit-fuel {
[data-object|="unit"][data-pilot="ai"]:hover .unit-ammo,
[data-object|="unit"][data-pilot="ai"]:hover .unit-fuel {
display:flex;
}
.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 {
[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
[data-object|="unit"][data-pilot="ai"][data-is-selected] .unit-ammo,
[data-object|="unit"][data-pilot="ai"][data-is-selected] .unit-fuel,
[data-object|="unit"][data-is-selected] .unit-selected-spotlight {
display:flex;
}
.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 {
[data-object|="unit"][data-has-fox-1] .unit-ammo-fox-1,
[data-object|="unit"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --secondary-gunmetal-grey );
}
.unit[data-coalition="blue"][data-is-selected] .unit-short-label {
[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
color: var( --secondary-blue-text );
}
.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 {
[data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo-fox-1,
[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --primary-blue );
}
.unit[data-coalition="blue"] .unit-vvi {
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
background-color: var( --secondary-blue-outline );
}
.unit[data-coalition="red"][data-is-selected] .unit-short-label {
[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
color: var( --secondary-red-text );
}
.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 {
[data-object|="unit"][data-coalition="red"] .unit-fuel-level,
[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo-fox-1,
[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --primary-red );
}
.unit[data-coalition="blue"] .unit-vvi {
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
background-color: var( --secondary-red-outline );
}
@ -383,17 +385,17 @@
}
}
.unit[data-pilot="ai"][data-has-low-fuel] .unit-fuel {
[data-object|="unit"][data-pilot="ai"][data-has-low-fuel] .unit-fuel {
animation: pulse 1.5s linear infinite;
}
.unit[data-is-selected] rect.unit-marker {
[data-object|="unit"][data-is-selected] rect.unit-marker {
fill:white;
}
.unit .unit-status {
[data-object|="unit"] .unit-status {
background-repeat: no-repeat;
position:absolute;
height:var( --unit-air-status-rtb-height );
@ -403,73 +405,79 @@
z-index: 10;
}
.unit[data-status="rtb"] .unit-status {
[data-object|="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 );
}
.unit[data-status="rtb"][data-coalition="blue"] .unit-status {
[data-object|="unit"][data-status="rtb"][data-coalition="blue"] .unit-status {
background-image: var( --unit-air-status-rtb-blue-url );
}
.unit[data-status="rtb"][data-coalition="red"] .unit-status {
[data-object|="unit"][data-status="rtb"][data-coalition="red"] .unit-status {
background-image: var( --unit-air-status-rtb-red-url );
}
.unit[data-status="hold"] .unit-status {
[data-object|="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 );
}
.unit[data-status="hold"][data-coalition="blue"] .unit-status {
[data-object|="unit"][data-status="hold"][data-coalition="blue"] .unit-status {
background-image: var( --unit-air-status-hold-blue-url );
}
.unit[data-status="hold"][data-coalition="red"] .unit-status {
[data-object|="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 {
[data-object|="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 {
[data-object|="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 {
[data-object|="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
{
[data-object|="unit-air"][ data-is-dead ] .unit-selected-spotlight,
[data-object|="unit-air"][ data-is-dead ] .unit-short-label,
[data-object|="unit-air"][ data-is-dead ] .unit-vvi,
[data-object|="unit-air"][ data-is-dead ] .unit-hotgroup,
[data-object|="unit-air"][ data-is-dead ] .unit-hotgroup-id,
[data-object|="unit-air"][ data-is-dead ] .unit-status,
[data-object|="unit-air"][ data-is-dead ] .unit-fuel,
[data-object|="unit-air"][ data-is-dead ] .unit-ammo,
[data-object|="unit-air"][ data-is-dead ]:hover .unit-fuel,
[data-object|="unit-air"][ data-is-dead ]:hover .unit-ammo {
display:none;
}
.unit-air[ data-is-dead ] .unit-summary > * {
[data-object|="unit-air"][ data-is-dead ] .unit-summary > * {
display:none;
}
.unit-air[ data-is-dead ] .unit-summary .unit-callsign {
[data-object|="unit-air"][ data-is-dead ] .unit-summary .unit-callsign {
display:block;
}
}
/******************************
Weapons
******************************/

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

@ -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}">
`<div data-object="unit-air-aircraft" 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>
@ -422,11 +422,10 @@ export class Helicopter extends AirUnit {
export class GroundUnit extends Unit {
constructor(ID: number, data: UnitData) {
var role = groundUnitsDatabase.getByName(data.name)?.loadouts[0].roles[0];
var roleType = "ground";
if (role === "SAM")
roleType = "sam"
var roleType = (role === "SAM") ? "sam" : "mi";
super(ID, data, `
<div class="unit unit-${roleType}" data-coalition="${data.missionData.coalition}">
<div data-object="unit-ground-${roleType}" data-coalition="${data.missionData.coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">${role?.substring(0, 1).toUpperCase()}</div>

79
client/views/uikit.ejs
View File

@ -169,7 +169,7 @@
<div class="caption">Neutral</div>
<div class="unit unit-ground" data-coalition="">
<div data-object="unit-ground-mi" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Z</div>
@ -181,7 +181,7 @@
<div class="caption">Blue</div>
<div class="unit unit-ground" data-coalition="blue">
<div data-object="unit-ground-mi" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Y</div>
@ -193,7 +193,7 @@
<div class="caption">Red</div>
<div class="unit unit-ground" data-coalition="red">
<div data-object="unit-ground-mi" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">X</div>
@ -215,7 +215,7 @@
<div class="caption">Neutral</div>
<div class="unit unit-sam" data-coalition="">
<div data-object="unit-ground-sam" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Z</div>
@ -227,7 +227,7 @@
<div class="caption">Blue</div>
<div class="unit unit-sam" data-coalition="blue">
<div data-object="unit-ground-sam" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Y</div>
@ -239,7 +239,7 @@
<div class="caption">Red</div>
<div class="unit unit-sam" data-coalition="red">
<div data-object="unit-ground-sam" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">X</div>
@ -260,7 +260,7 @@
<div class="caption">Neutral</div>
<div class="unit unit-naval" data-coalition="">
<div data-object="unit-naval" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Z</div>
@ -272,7 +272,7 @@
<div class="caption">Blue</div>
<div class="unit unit-naval" data-coalition="blue">
<div data-object="unit-naval" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">Y</div>
@ -284,7 +284,7 @@
<div class="caption">Red</div>
<div class="unit unit-naval" data-coalition="red">
<div data-object="unit-naval" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">X</div>
@ -305,7 +305,7 @@
<div class="caption">Neutral</div>
<div class="unit unit-building" data-coalition="">
<div data-object="unit-building" data-coalition="">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">J</div>
@ -317,7 +317,7 @@
<div class="caption">Blue</div>
<div class="unit unit-building" data-coalition="blue">
<div data-object="unit-building" data-coalition="blue">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">K</div>
@ -329,7 +329,7 @@
<div class="caption">Red</div>
<div class="unit unit-building" data-coalition="red">
<div data-object="unit-building" data-coalition="red">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">L</div>
@ -354,7 +354,7 @@
<div class="example">
<div class="caption">0% (empty)</div>
<div class="unit unit-air unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red" data-is-selected>
<div data-object="unit-air-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 unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red" data-is-selected>
<div data-object="unit-air-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 unit-aircraft" data-pilot="ai" data-has-low-fuel data-coalition="red">
<div data-object="unit-air-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 unit-aircraft" data-pilot="ai" data-coalition="red" data-is-selected>
<div data-object="unit-air-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 unit-aircraft" data-pilot="ai" data-coalition="red">
<div data-object="unit-air-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 unit-aircraft" data-pilot="ai" data-coalition="red" data-is-selected>
<div data-object="unit-air-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 unit-aircraft" data-status="rtb" data-pilot="ai">
<div data-object="unit-air-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 unit-aircraft" data-status="rtb" data-coalition="blue" data-is-in-hotgroup data-is-selected>
<div data-object="unit-air-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 unit-aircraft" data-status="rtb" data-pilot="ai" data-coalition="red" data-is-in-hotgroup>
<div data-object="unit-air-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 unit-aircraft" data-status="hold" data-pilot="ai">
<div data-object="unit-air-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 unit-aircraft" data-status="hold" data-coalition="blue" data-is-in-hotgroup data-is-selected>
<div data-object="unit-air-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,7 @@
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-coalition="red" data-is-in-hotgroup>
<div data-object="unit-air-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>
@ -687,7 +687,7 @@
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-is-dead>
<div data-object="unit-air-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>
@ -717,7 +717,7 @@
<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 data-object="unit-air-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>
@ -746,7 +746,7 @@
<div class="example">
<div class="unit unit-air unit-aircraft" data-status="hold" data-pilot="ai" data-coalition="red" data-is-dead>
<div data-object="unit-air-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>
@ -777,10 +777,33 @@
</div>
</div>
<div class="content">
<div class="content-header">Dead</div>
<div class="content-body">
<div class="example">
<div data-object="unit-weapon-missile"></div>
<div data-object="unit-weapon-bomb"></div>
<div data-role="">
<div class="unit-marker"></div>
<div class="unit-short-label"></div>
<div class="unit-summary">
<div class="unit-callsign">Springfield 3-1 | Longname</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="content">