mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added delete unit function
This commit is contained in:
Pax1601
parent
8dee4db238
commit
236523ee2b
@ -1,52 +1,54 @@
|
||||
@import url("unitmarker.css");
|
||||
|
||||
/* Variables definitions */
|
||||
:root {
|
||||
--accent-green : #8bff63;
|
||||
--accent-light-blue : #5ca7ff;
|
||||
--background-grey : #3d4651;
|
||||
--background-offwhite : #f2f2f3;
|
||||
--background-steel : #202831;
|
||||
--primary-blue : #247be2;
|
||||
--primary-grey : #CFD9E8;
|
||||
--primary-red : #ff5858;
|
||||
--secondary-blue-outline : #082e44;
|
||||
--secondary-dark-steel : #181e25;
|
||||
--secondary-gunmetal-grey : #2f2f2f;
|
||||
--secondary-light-grey : #797e83;
|
||||
--secondary-red-outline : #262222;
|
||||
--secondary-yellow : #ffd46893;
|
||||
--accent-green: #8bff63;
|
||||
--accent-light-blue: #5ca7ff;
|
||||
--background-grey: #3d4651;
|
||||
--background-offwhite: #f2f2f3;
|
||||
--background-steel: #202831;
|
||||
--primary-blue: #247be2;
|
||||
--primary-grey: #CFD9E8;
|
||||
--primary-red: #ff5858;
|
||||
--secondary-blue-outline: #082e44;
|
||||
--secondary-dark-steel: #181e25;
|
||||
--secondary-gunmetal-grey: #2f2f2f;
|
||||
--secondary-light-grey: #797e83;
|
||||
--secondary-red-outline: #262222;
|
||||
--secondary-yellow: #ffd46893;
|
||||
|
||||
|
||||
--border-radius-xs : 2px;
|
||||
--border-radius-sm : 5px;
|
||||
--border-radius-md : 10px;
|
||||
--border-radius-lg : 15px;
|
||||
|
||||
--font-weight-bolder : 600;
|
||||
|
||||
--border-radius-xs: 2px;
|
||||
--border-radius-sm: 5px;
|
||||
--border-radius-md: 10px;
|
||||
--border-radius-lg: 15px;
|
||||
|
||||
--font-weight-bolder: 600;
|
||||
|
||||
}
|
||||
|
||||
:rootOLD {
|
||||
--active-coalition-color: var(--blue-coalition-color);
|
||||
--background-color-dark: #202831;
|
||||
--background-color-light: #AAA;
|
||||
--border-radius-sm:5px;
|
||||
--border-radius-md:10px;
|
||||
--border-radius-lg:15px;
|
||||
--blue-coalition-color: #247be2;
|
||||
--font-weight-bolder:600;
|
||||
--highlight-color: #FFF5;
|
||||
--neutral-coalition-color: whitesmoke;
|
||||
--neutral-coalition-text: #202831;
|
||||
--red-coalition-color: #f32121;
|
||||
--text-color: white;
|
||||
--title-color: #d3e9ff;
|
||||
--active-coalition-color: var(--blue-coalition-color);
|
||||
--background-color-dark: #202831;
|
||||
--background-color-light: #AAA;
|
||||
--border-radius-sm: 5px;
|
||||
--border-radius-md: 10px;
|
||||
--border-radius-lg: 15px;
|
||||
--blue-coalition-color: #247be2;
|
||||
--font-weight-bolder: 600;
|
||||
--highlight-color: #FFF5;
|
||||
--neutral-coalition-color: whitesmoke;
|
||||
--neutral-coalition-text: #202831;
|
||||
--red-coalition-color: #f32121;
|
||||
--text-color: white;
|
||||
--title-color: #d3e9ff;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -56,439 +58,112 @@ html {
|
||||
|
||||
|
||||
button {
|
||||
background-color:var(--background-steel);
|
||||
border:1px solid var( --background-steel );
|
||||
border-radius: var( --border-radius-sm );
|
||||
color:whitesmoke;
|
||||
cursor:pointer;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
padding:8px;
|
||||
background-color: var(--background-steel);
|
||||
border: 1px solid var(--background-steel);
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: whitesmoke;
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-weight-bolder);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
button[disabled="disabled"] {
|
||||
color: var( --highlight-color );
|
||||
cursor:not-allowed;
|
||||
color: var(--highlight-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.pill {
|
||||
border-radius: var( --border-radius-sm );
|
||||
display:inline-block;
|
||||
padding:6px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ol-panel {
|
||||
background-color: var(--background-steel);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 2px 5px #000A;
|
||||
color:white;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
height:fit-content;
|
||||
padding:10px;
|
||||
width:fit-content;
|
||||
height: fit-content;
|
||||
padding: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
|
||||
.ol-panel-list {
|
||||
border-radius: var( --border-radius-sm );
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
height: fit-content;
|
||||
row-gap: 5px;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.ol-panel-list .list-item {
|
||||
border-radius: var( --border-radius-md );
|
||||
display:flex;
|
||||
border-radius: var(--border-radius-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.ol-panel-list.sortable > .sortable-item {
|
||||
.ol-panel-list.sortable>.sortable-item {
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ol-panel-list.sortable > .sortable-item > .handle {
|
||||
cursor:grab;
|
||||
filter:invert(100);
|
||||
.ol-panel-list.sortable>.sortable-item>.handle {
|
||||
cursor: grab;
|
||||
filter: invert(100);
|
||||
}
|
||||
|
||||
.ol-panel-list.sortable > .sortable-item > .handle img {
|
||||
.ol-panel-list.sortable>.sortable-item>.handle img {
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
|
||||
.ol-panel-board {
|
||||
display:flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.ol-panel-board > .panel-section {
|
||||
.ol-panel-board>.panel-section {
|
||||
border-right: 1px solid #555;
|
||||
padding:10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ol-panel-board > .panel-section:last-of-type {
|
||||
.ol-panel-board>.panel-section:last-of-type {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.ol-panel-board h1, .ol-panel-board h2 {
|
||||
font-size:18px;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
.ol-panel-board h1,
|
||||
.ol-panel-board h2 {
|
||||
font-size: 18px;
|
||||
font-weight: var(--font-weight-bolder);
|
||||
margin: 0;
|
||||
padding:0 0 5px 0;
|
||||
padding: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.ol-panel-board h2 {
|
||||
font-size:14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight-primary {
|
||||
background-color: var(--secondary-light-grey);
|
||||
background-color: var(--secondary-light-grey);
|
||||
}
|
||||
|
||||
.highlight-bluefor {
|
||||
background-color: var(--primary-blue);
|
||||
color: var(--background-steel )
|
||||
background-color: var(--primary-blue);
|
||||
color: var(--background-steel)
|
||||
}
|
||||
|
||||
.highlight-redfor {
|
||||
background-color: var(--primary-red);
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
.highlight-neutral {
|
||||
background-color: var(--primary-grey);
|
||||
background-color: var(--primary-grey);
|
||||
color: var(--secondary-gunmetal-grey)
|
||||
}
|
||||
|
||||
|
||||
.unit {
|
||||
border-radius: var( --border-radius-xs );
|
||||
display:grid;
|
||||
height: fit-content;
|
||||
position:relative;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.unit .unit-id {
|
||||
align-items: center;
|
||||
background: var( --primary-grey );
|
||||
border:3px solid var(--background-steel );
|
||||
border-radius: var( --border-radius-xs );
|
||||
color: var(--background-steel);
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
padding:4px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width:32px;
|
||||
z-index:100;
|
||||
}
|
||||
|
||||
|
||||
.unit .unit-spotlight {
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
display:flex;
|
||||
height: fit-content;
|
||||
justify-items: center;
|
||||
padding:9px;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.unit .unit-hotgroup {
|
||||
align-self: flex-start;
|
||||
background: black;
|
||||
color:white;
|
||||
display:none;
|
||||
height:fit-content;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top:-8px;
|
||||
transform:rotate(45deg);
|
||||
width:14px;
|
||||
}
|
||||
|
||||
.unit .unit-hotgroup-id {
|
||||
font-size:11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.unit .unit-vvi {
|
||||
display:flex;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
transform:rotate(-90deg);
|
||||
transform-origin:0 50%;
|
||||
top:50%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.unit .unit-vvi-heading {
|
||||
border:1px solid var( --secondary-dark-steel );
|
||||
padding-left:14px;
|
||||
transform: rotate(90deg);
|
||||
transform-origin:0 50%;
|
||||
width:30px;
|
||||
}
|
||||
|
||||
|
||||
.unit .unit-selected-border {
|
||||
border: 2px solid transparent;
|
||||
border-radius: var( --border-radius-xs );
|
||||
position: relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
|
||||
.unit .unit-fuel {
|
||||
background:white;
|
||||
border:2px solid var( --secondary-dark-steel );
|
||||
border-radius: var( --border-radius-xs );
|
||||
display:none;
|
||||
margin:0 auto;
|
||||
position: relative;
|
||||
top:-6px;
|
||||
width: calc( 100% - 16px );
|
||||
}
|
||||
|
||||
.unit .unit-fuel-empty {
|
||||
align-self: center;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
color:red;
|
||||
display:none;
|
||||
font-weight: bold;
|
||||
justify-self: center;
|
||||
padding:1px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="0"] .unit-fuel-empty {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="10"] .unit-fuel,
|
||||
.unit[data-fuel-level="20"] .unit-fuel,
|
||||
.unit[data-fuel-level="30"] .unit-fuel {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.unit .unit-fuel-level {
|
||||
background-color: var( --secondary-light-grey );
|
||||
display:flex;
|
||||
height: 4px;
|
||||
visibility: hidden;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="10"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="20"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="30"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="40"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="50"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="60"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="70"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="80"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="90"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="100"] .unit-fuel-level {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.unit[data-fuel-level="10"] .unit-fuel-level {
|
||||
width:10%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="20"] .unit-fuel-level {
|
||||
width:20%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="30"] .unit-fuel-level {
|
||||
width:30%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="40"] .unit-fuel-level {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="50"] .unit-fuel-level {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="60"] .unit-fuel-level {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="70"] .unit-fuel-level {
|
||||
width:70%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="80"] .unit-fuel-level {
|
||||
width:80%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="90"] .unit-fuel-level {
|
||||
width:90%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="100"] .unit-fuel-level {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
.unit-ammo {
|
||||
column-gap: 2px;
|
||||
display:none;
|
||||
flex-direction: row;
|
||||
flex-wrap:nowrap;
|
||||
height:fit-content;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top:-2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.unit-ammo > [data-ammo-type] {
|
||||
background:white;
|
||||
border:2px solid var( --secondary-dark-steel );
|
||||
border-radius: 50%;
|
||||
padding:3px;
|
||||
}
|
||||
|
||||
.unit[data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
||||
.unit[data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
||||
.unit[data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
||||
.unit[data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"] {
|
||||
background-color: var( --secondary-light-grey );
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*** BLUEFOR ***/
|
||||
|
||||
.unit[data-coalition="blue"] .unit-hotgroup {
|
||||
background-color: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"] .unit-id,
|
||||
.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
||||
.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
||||
.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
||||
.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
|
||||
.unit[data-coalition="blue"] .unit-fuel-level,
|
||||
.unit[data-coalition="blue"] .unit-vvi-heading {
|
||||
background: var( --primary-blue );
|
||||
border-color: var( --secondary-blue-outline );
|
||||
color: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"][data-is-selected="true"] .unit-id {
|
||||
border-color: var( --secondary-blue-outline );
|
||||
color: var( --primary-blue );
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"] .unit-ammo {
|
||||
border-color: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
/*** REDFOR ***/
|
||||
|
||||
.unit[data-coalition="red"] .unit-hotgroup {
|
||||
background-color: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
.unit[data-coalition="red"] .unit-id,
|
||||
.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
||||
.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
||||
.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
||||
.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
|
||||
.unit[data-coalition="red"] .unit-fuel-level,
|
||||
.unit[data-coalition="red"] .unit-vvi-heading {
|
||||
background: var( --primary-red );
|
||||
border-color: var( --secondary-red-outline );
|
||||
color: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
|
||||
.unit[data-coalition="red"][data-is-selected="true"] .unit-id {
|
||||
color: var( --primary-red );
|
||||
}
|
||||
|
||||
.unit[data-coalition="red"] .unit-ammo {
|
||||
border-color: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
/**************/
|
||||
|
||||
|
||||
.unit[data-is-selected="true"] .unit-spotlight {
|
||||
background: var(--secondary-yellow);
|
||||
}
|
||||
|
||||
.unit[data-is-in-hotgroup="true"] .unit-hotgroup {
|
||||
display:flex
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-id {
|
||||
background:white;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-selected-border {
|
||||
border-color:white;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-fuel {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-ammo {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
|
||||
.unit[data-pilot="human"] .unit-hotgroup,
|
||||
.unit[data-pilot="human"] .unit-fuel,
|
||||
.unit[data-pilot="human"] .unit-ammo {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.unit .unit-summary {
|
||||
align-self: center;
|
||||
column-gap: 8px;
|
||||
color:white;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
font-size: 12px;
|
||||
justify-content: flex-end;
|
||||
justify-self: flex-end;
|
||||
left: -62px;
|
||||
position: absolute;
|
||||
row-gap:2px;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
white-space: nowrap;
|
||||
width: min-content;
|
||||
}
|
||||
@ -24,6 +24,30 @@
|
||||
|
||||
/* Variables definitions */
|
||||
:root {
|
||||
--accent-green: #8bff63;
|
||||
--accent-light-blue: #5ca7ff;
|
||||
--background-grey: #3d4651;
|
||||
--background-offwhite: #f2f2f3;
|
||||
--background-steel: #202831;
|
||||
--primary-blue: #247be2;
|
||||
--primary-grey: #CFD9E8;
|
||||
--primary-red: #ff5858;
|
||||
--secondary-blue-outline: #082e44;
|
||||
--secondary-dark-steel: #181e25;
|
||||
--secondary-gunmetal-grey: #2f2f2f;
|
||||
--secondary-light-grey: #797e83;
|
||||
--secondary-red-outline: #262222;
|
||||
--secondary-yellow: #ffd46893;
|
||||
|
||||
|
||||
--border-radius-xs: 2px;
|
||||
--border-radius-sm: 5px;
|
||||
--border-radius-md: 10px;
|
||||
--border-radius-lg: 15px;
|
||||
|
||||
--font-weight-bolder: 600;
|
||||
|
||||
|
||||
--background-color-dark: #202831;
|
||||
--background-color-light: #AAA;
|
||||
--title-color: #d3e9ff;
|
||||
|
||||
@ -1,124 +1,314 @@
|
||||
.ol-unit-marker-container {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
border: 0px black solid;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
.unit {
|
||||
border-radius: var(--border-radius-xs);
|
||||
display: grid;
|
||||
height: fit-content;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.ol-unit-marker-icon {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
.unit .unit-id {
|
||||
align-items: center;
|
||||
background: var(--primary-grey);
|
||||
border: 3px solid var(--background-steel);
|
||||
border-radius: var(--border-radius-xs);
|
||||
color: var(--background-steel);
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.unit .unit-spotlight {
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
justify-items: center;
|
||||
padding: 9px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.unit .unit-hotgroup {
|
||||
align-self: flex-start;
|
||||
background: black;
|
||||
color: white;
|
||||
display: none;
|
||||
height: fit-content;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -8px;
|
||||
transform: rotate(45deg);
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.unit .unit-hotgroup-id {
|
||||
font-size: 11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.unit .unit-vvi {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 0 50%;
|
||||
top: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ol-unit-marker-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
.unit .unit-vvi-heading {
|
||||
border: 1px solid var(--secondary-dark-steel);
|
||||
padding-left: 14px;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 0 50%;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.blue.ol-unit-marker-image {
|
||||
filter: invert(40%) sepia(94%) saturate(2477%) hue-rotate(197deg) brightness(92%) contrast(91%) drop-shadow(1px 1px #0005) drop-shadow(1px -1px #0005) drop-shadow(-1px 1px 0px #0005) drop-shadow(-1px -1px #0005);
|
||||
|
||||
.unit .unit-selected-border {
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius-xs);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.red.ol-unit-marker-image {
|
||||
filter:invert(32%) sepia(91%) saturate(5128%) hue-rotate(349deg) brightness(97%) contrast(97%) drop-shadow(1px 1px #0005) drop-shadow(1px -1px #0005) drop-shadow(-1px 1px 0px #0005) drop-shadow(-1px -1px #0005);
|
||||
|
||||
.unit .unit-fuel {
|
||||
background: white;
|
||||
border: 2px solid var(--secondary-dark-steel);
|
||||
border-radius: var(--border-radius-xs);
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.neutral.ol-unit-marker-image {
|
||||
filter: invert(71%) sepia(12%) saturate(9%) hue-rotate(319deg) brightness(92%) contrast(96%) drop-shadow(1px 1px #0005) drop-shadow(1px -1px #0005) drop-shadow(-1px 1px 0px #0005) drop-shadow(-1px -1px #0005);
|
||||
}
|
||||
|
||||
.ol-unit-marker-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.unit .unit-fuel-empty {
|
||||
align-self: center;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#ring {
|
||||
top: 0px;
|
||||
color: red;
|
||||
display: none;
|
||||
font-weight: bold;
|
||||
justify-self: center;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
-webkit-mask: radial-gradient(transparent 60%, #000 61%);
|
||||
mask: radial-gradient(transparent 60%, #000 61%);
|
||||
}
|
||||
|
||||
#background {
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0.2;
|
||||
.unit[data-fuel-level="0"] .unit-fuel-empty {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.blue.ol-unit-marker-selected {
|
||||
background-color: var(--blue-coalition-color);
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.red.ol-unit-marker-selected {
|
||||
background-color: var(--red-coalition-color);
|
||||
.unit[data-fuel-level="10"] .unit-fuel,
|
||||
.unit[data-fuel-level="20"] .unit-fuel,
|
||||
.unit[data-fuel-level="30"] .unit-fuel {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.ol-unit-marker-hovered {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
.ol-unit-marker-dead {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
|
||||
.ol-unit-marker-unitName {
|
||||
top: -20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font: 800 14px Arial;
|
||||
white-space: nowrap;
|
||||
-webkit-text-fill-color: white;
|
||||
-webkit-text-stroke: 1px;
|
||||
}
|
||||
|
||||
.ol-unit-marker-name {
|
||||
bottom: -12px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font: 800 12px Arial;
|
||||
white-space: nowrap;
|
||||
-webkit-text-fill-color: white;
|
||||
-webkit-text-stroke: 1px;
|
||||
}
|
||||
|
||||
.ol-unit-marker-altitude {
|
||||
.unit .unit-fuel-level {
|
||||
background-color: var(--secondary-light-grey);
|
||||
display: flex;
|
||||
height: 4px;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
font: 800 12px Arial;
|
||||
white-space: nowrap;
|
||||
-webkit-text-fill-color: white;
|
||||
-webkit-text-stroke: 1px;
|
||||
}
|
||||
|
||||
.ol-unit-marker-speed {
|
||||
.unit[data-fuel-level="10"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="20"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="30"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="40"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="50"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="60"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="70"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="80"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="90"] .unit-fuel-level,
|
||||
.unit[data-fuel-level="100"] .unit-fuel-level {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="10"] .unit-fuel-level {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="20"] .unit-fuel-level {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="30"] .unit-fuel-level {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="40"] .unit-fuel-level {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="50"] .unit-fuel-level {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="60"] .unit-fuel-level {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="70"] .unit-fuel-level {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="80"] .unit-fuel-level {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="90"] .unit-fuel-level {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.unit[data-fuel-level="100"] .unit-fuel-level {
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
font: 800 12px Arial;
|
||||
white-space: nowrap;
|
||||
-webkit-text-fill-color: white;
|
||||
-webkit-text-stroke: 1px;
|
||||
}
|
||||
|
||||
.ol-unit-marker-container-table-dead .ol-unit-marker-name {
|
||||
opacity: 0;
|
||||
.unit-ammo {
|
||||
column-gap: 2px;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
height: fit-content;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.unit-ammo>[data-ammo-type] {
|
||||
background: white;
|
||||
border: 2px solid var(--secondary-dark-steel);
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.unit[data-has-fox-1="true"] .unit-ammo>[data-ammo-type="fox-1"],
|
||||
.unit[data-has-fox-2="true"] .unit-ammo>[data-ammo-type="fox-2"],
|
||||
.unit[data-has-fox-3="true"] .unit-ammo>[data-ammo-type="fox-3"],
|
||||
.unit[data-has-other-ammo="true"] .unit-ammo>[data-ammo-type="other"] {
|
||||
background-color: var(--secondary-light-grey);
|
||||
}
|
||||
|
||||
|
||||
/*** BLUEFOR ***/
|
||||
|
||||
.unit[data-coalition="blue"] .unit-hotgroup {
|
||||
background-color: var(--secondary-blue-outline);
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"] .unit-id,
|
||||
.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo>[data-ammo-type="fox-1"],
|
||||
.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo>[data-ammo-type="fox-2"],
|
||||
.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo>[data-ammo-type="fox-3"],
|
||||
.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo>[data-ammo-type="other"],
|
||||
.unit[data-coalition="blue"] .unit-fuel-level,
|
||||
.unit[data-coalition="blue"] .unit-vvi-heading {
|
||||
background: var(--primary-blue);
|
||||
border-color: var(--secondary-blue-outline);
|
||||
color: var(--secondary-blue-outline);
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"][data-is-selected="true"] .unit-id {
|
||||
border-color: var(--secondary-blue-outline);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.unit[data-coalition="blue"] .unit-ammo {
|
||||
border-color: var(--secondary-blue-outline);
|
||||
}
|
||||
|
||||
/*** REDFOR ***/
|
||||
|
||||
.unit[data-coalition="red"] .unit-hotgroup {
|
||||
background-color: var(--secondary-red-outline);
|
||||
}
|
||||
|
||||
.unit[data-coalition="red"] .unit-id,
|
||||
.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo>[data-ammo-type="fox-1"],
|
||||
.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo>[data-ammo-type="fox-2"],
|
||||
.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo>[data-ammo-type="fox-3"],
|
||||
.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo>[data-ammo-type="other"],
|
||||
.unit[data-coalition="red"] .unit-fuel-level,
|
||||
.unit[data-coalition="red"] .unit-vvi-heading {
|
||||
background: var(--primary-red);
|
||||
border-color: var(--secondary-red-outline);
|
||||
color: var(--secondary-red-outline);
|
||||
}
|
||||
|
||||
.unit[data-coalition="red"][data-is-selected="true"] .unit-id {
|
||||
color: var(--primary-red);
|
||||
}
|
||||
|
||||
.unit[data-coalition="red"] .unit-ammo {
|
||||
border-color: var(--secondary-red-outline);
|
||||
}
|
||||
|
||||
/**************/
|
||||
|
||||
.unit[data-is-selected="true"] .unit-spotlight {
|
||||
background: var(--secondary-yellow);
|
||||
}
|
||||
|
||||
.unit[data-is-in-hotgroup="true"] .unit-hotgroup {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-id {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-selected-border {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-fuel {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.unit[data-is-selected="true"] .unit-ammo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.unit[data-pilot="human"] .unit-hotgroup,
|
||||
.unit[data-pilot="human"] .unit-fuel,
|
||||
.unit[data-pilot="human"] .unit-ammo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unit .unit-summary {
|
||||
align-self: center;
|
||||
column-gap: 8px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
font-size: 12px;
|
||||
justify-content: flex-end;
|
||||
justify-self: flex-end;
|
||||
left: -62px;
|
||||
position: absolute;
|
||||
row-gap: 2px;
|
||||
text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
|
||||
white-space: nowrap;
|
||||
width: min-content;
|
||||
}
|
||||
@ -7,9 +7,9 @@ import { Dropdown } from "./controls/dropdown";
|
||||
import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
|
||||
import { MissionData } from "./missiondata/missiondata";
|
||||
import { UnitControlPanel } from "./panels/unitcontrolpanel";
|
||||
import { MouseInfoPanel } from "./panels/mouseInfoPanel";
|
||||
import { MouseInfoPanel } from "./panels/mouseinfopanel";
|
||||
import { Slider } from "./controls/slider";
|
||||
import { AIC } from "./aic/AIC";
|
||||
import { AIC } from "./aic/aic";
|
||||
|
||||
import { VisibilityControlPanel } from "./panels/visibilitycontrolpanel";
|
||||
import { ATC } from "./atc/ATC";
|
||||
@ -17,7 +17,6 @@ import { FeatureSwitches } from "./FeatureSwitches";
|
||||
import { LogPanel } from "./panels/logpanel";
|
||||
import { Button } from "./controls/button";
|
||||
|
||||
/* TODO: should this be a class? */
|
||||
var map: Map;
|
||||
var contextMenu: ContextMenu;
|
||||
|
||||
@ -33,16 +32,10 @@ var logPanel: LogPanel;
|
||||
|
||||
var mapSourceDropdown: Dropdown;
|
||||
|
||||
var slowButton: Button;
|
||||
var fastButton: Button;
|
||||
var climbButton: Button;
|
||||
var descendButton: Button;
|
||||
|
||||
var aic: AIC;
|
||||
var aicToggleButton: Button;
|
||||
var aicHelpButton: Button;
|
||||
|
||||
|
||||
var atc: ATC;
|
||||
var atcToggleButton: Button;
|
||||
|
||||
@ -67,7 +60,6 @@ function setup() {
|
||||
|
||||
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
|
||||
unitControlPanel = new UnitControlPanel("unit-control-panel");
|
||||
//scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Marianas", "Nevada", "South Atlantic", "Syria", "The Channel"], () => { });
|
||||
mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
|
||||
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
|
||||
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
|
||||
@ -76,16 +68,6 @@ function setup() {
|
||||
|
||||
missionData = new MissionData();
|
||||
|
||||
/* Unit control buttons */
|
||||
slowButton = new Button("slow-button", ["images/buttons/slow.svg"], () => { getUnitsManager().selectedUnitsChangeSpeed("slow"); });
|
||||
fastButton = new Button("fast-button", ["images/buttons/fast.svg"], () => { getUnitsManager().selectedUnitsChangeSpeed("fast"); });
|
||||
climbButton = new Button("climb-button", ["images/buttons/climb.svg"], () => { getUnitsManager().selectedUnitsChangeAltitude("climb"); });
|
||||
descendButton = new Button("descend-button", ["images/buttons/descend.svg"], () => { getUnitsManager().selectedUnitsChangeAltitude("descend"); });
|
||||
|
||||
/* Unit control sliders */
|
||||
altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => getUnitsManager().selectedUnitsSetAltitude(value * 0.3048));
|
||||
airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
|
||||
|
||||
/* AIC */
|
||||
|
||||
let aicFeatureSwitch = featureSwitches.getSwitch( "aic" );
|
||||
@ -151,7 +133,6 @@ function requestUpdate() {
|
||||
}
|
||||
|
||||
export function update(data: JSON) {
|
||||
console.log( data );
|
||||
unitsManager.update(data);
|
||||
missionData.update(data);
|
||||
logPanel.update(data);
|
||||
|
||||
@ -2,7 +2,7 @@ import * as L from "leaflet"
|
||||
import { getContextMenu, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
|
||||
import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../dcs/dcs";
|
||||
import { bearing, distance, zeroAppend } from "../other/utils";
|
||||
import { getAircraftLabelsByRole, getLoadoutsByName, getLoadoutNamesByRole, getAircraftNameByLabel } from "../units/aircraftDatabase";
|
||||
import { getAircraftLabelsByRole, getLoadoutsByName, getLoadoutNamesByRole, getAircraftNameByLabel } from "../units/aircraftdatabase";
|
||||
import { unitTypes } from "../units/unitTypes";
|
||||
import { BoxSelect } from "./boxselect";
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@ export class UnitControlPanel extends Panel {
|
||||
update(units: Unit[]) {
|
||||
if (this.getElement() != null)
|
||||
{
|
||||
//this.#addUnitsButtons(units);
|
||||
this.#addUnitsButtons(units);
|
||||
//this.#showFormationButtons(units);
|
||||
|
||||
this.#showFlightControlSliders(units);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as L from 'leaflet'
|
||||
import { getMap } from '..'
|
||||
import { getAircrafImage, getAircraftLabelByName } from './aircraftDatabase'
|
||||
import { rad2deg } from '../other/utils'
|
||||
import { getAircrafImage, getAircraftLabelByName } from './aircraftdatabase'
|
||||
import { AirUnit, GroundUnit, NavyUnit, Weapon } from './unit'
|
||||
|
||||
export interface MarkerOptions {
|
||||
@ -34,8 +35,6 @@ export class UnitMarker extends L.Marker {
|
||||
this.#human = options.human;
|
||||
this.#AI = options.AI;
|
||||
|
||||
var img = this.getUnitImage();
|
||||
|
||||
var coalition = "";
|
||||
if (options.coalitionID == 1)
|
||||
coalition = "red"
|
||||
@ -45,19 +44,35 @@ export class UnitMarker extends L.Marker {
|
||||
coalition = "neutral"
|
||||
|
||||
var icon = new L.DivIcon({
|
||||
html: `<table class="ol-unit-marker-container" id="container">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="${coalition}" id="background"></div>
|
||||
<div class="${coalition}" id="ring"></div>
|
||||
<div class="ol-unit-marker-icon" id="icon"><img class="${coalition} ol-unit-marker-image" src="${img}"></div>
|
||||
<div class="ol-unit-marker-unitName" id="unitName">${this.#unitName}</div>
|
||||
<div class="ol-unit-marker-altitude" id="altitude"></div>
|
||||
<div class="ol-unit-marker-speed" id="speed"></div>
|
||||
<div class="ol-unit-marker-name" id="name">${this.#name}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>`,
|
||||
html: `<div class="unit"
|
||||
data-coalition=${coalition}
|
||||
data-pilot=${this.#human? "human": "ai"}>
|
||||
<div class="unit-spotlight">
|
||||
<div class="unit-selected-border">
|
||||
<div class="unit-vvi">
|
||||
<div class="unit-vvi-heading"></div>
|
||||
</div>
|
||||
<div class="unit-id">${this.#name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id"></div>
|
||||
</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div data-ammo-type="fox-1"></div>
|
||||
<div data-ammo-type="fox-2"></div>
|
||||
<div data-ammo-type="fox-3"></div>
|
||||
<div data-ammo-type="other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">${this.#unitName}</div>
|
||||
<div class="unit-heading"></div>
|
||||
<div class="unit-altitude"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
className: 'ol-unit-marker',
|
||||
iconAnchor: [30, 30]
|
||||
});
|
||||
@ -73,46 +88,24 @@ export class UnitMarker extends L.Marker {
|
||||
|
||||
draw(data: MarkerData) {
|
||||
this.#alive = data.alive;
|
||||
|
||||
var element = this.getElement();
|
||||
if (element != null) {
|
||||
var nameDiv = <HTMLElement>element.querySelector("#name");
|
||||
var unitNameDiv = <HTMLElement>element.querySelector("#unitName");
|
||||
var container = <HTMLElement>element.querySelector("#container");
|
||||
var icon = <HTMLElement>element.querySelector("#icon");
|
||||
var altitudeDiv = <HTMLElement>element.querySelector("#altitude");
|
||||
var speedDiv = <HTMLElement>element.querySelector("#speed");
|
||||
|
||||
/* If visibility is full show all labels */
|
||||
nameDiv.style.display = '';
|
||||
unitNameDiv.style.display = '';
|
||||
altitudeDiv.style.display = '';
|
||||
speedDiv.style.display = '';
|
||||
if (element != null)
|
||||
{
|
||||
element.querySelector(".unit")?.setAttribute("data-is-selected", String(this.getSelected()));
|
||||
element.querySelector(".unit-vvi-heading")?.setAttribute("style",`transform: rotate(${rad2deg(data.heading)}deg); width: ${data.speed / 5}px`);
|
||||
|
||||
/* If visibility is partial shown only icon and unit name. If none, shown only icon. */
|
||||
if (this.getVisibility() === "partial" || this.getVisibility() === "minimal")
|
||||
{
|
||||
unitNameDiv.style.display = 'none';
|
||||
altitudeDiv.style.display = 'none';
|
||||
speedDiv.style.display = 'none';
|
||||
}
|
||||
if (this.getVisibility() === "minimal" && nameDiv.style.display != 'none')
|
||||
nameDiv.style.display = 'none';
|
||||
var unitHeadingDiv = element.querySelector(".unit-heading");
|
||||
if (unitHeadingDiv != null)
|
||||
unitHeadingDiv.innerHTML = String(Math.floor(rad2deg(data.heading)));
|
||||
|
||||
nameDiv.style.left = (-(nameDiv.offsetWidth - container.offsetWidth) / 2) + "px";
|
||||
unitNameDiv.style.left = (-(unitNameDiv.offsetWidth - container.offsetWidth) / 2) + "px";
|
||||
|
||||
icon.style.transform = "rotate(" + data.heading + "rad)";
|
||||
altitudeDiv.innerHTML = String(Math.round(data.altitude / 0.3048 / 100) / 10);
|
||||
speedDiv.innerHTML = String(Math.round(data.speed * 1.94384));
|
||||
|
||||
var pos = getMap().latLngToLayerPoint(this.getLatLng()).round();
|
||||
this.setZIndexOffset(Math.floor(data.altitude) - pos.y);
|
||||
|
||||
if (!this.#alive)
|
||||
{
|
||||
this.getElement()?.querySelector("#icon")?.classList.add("ol-unit-marker-dead");
|
||||
}
|
||||
var unitAltitudeDiv = element.querySelector(".unit-altitude");
|
||||
if (unitAltitudeDiv != null)
|
||||
unitAltitudeDiv.innerHTML = String(Math.floor(data.altitude / 1000));
|
||||
}
|
||||
var pos = getMap().latLngToLayerPoint(this.getLatLng()).round();
|
||||
this.setZIndexOffset(Math.floor(data.altitude) - pos.y);
|
||||
}
|
||||
|
||||
setSelected(selected: boolean) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user