mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Merge pull request #126 from Pax1601/86-unit-control-panel-unit-button-style-to-be-revised-and-fixed
86 unit control panel unit button style to be revised and fixed
This commit is contained in:
Pax1601
GitHub
commit
c30c88ad61
@ -13,7 +13,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container {
|
||||
align-items: center;
|
||||
align-items: left;
|
||||
border-radius: var( --border-radius-md );
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
@ -21,23 +21,66 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button {
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
border-radius: var( --border-radius-lg );
|
||||
display:flex;
|
||||
font-size: 11px;
|
||||
height:30px;
|
||||
padding:8px 0;
|
||||
position: relative;
|
||||
width:90%;
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button::before {
|
||||
background-color: var( --accent-light-blue );
|
||||
border-radius: var( --border-radius-sm );
|
||||
background-color: var( --primary-grey );
|
||||
border-radius: var( --border-radius-md );
|
||||
content: attr( data-short-label );
|
||||
padding:4px;
|
||||
position: absolute;
|
||||
translate:-40px -4px;
|
||||
margin:0 5px;
|
||||
padding:4px 6px;
|
||||
white-space: nowrap;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="blue"]::before {
|
||||
background-color: var( --accent-light-blue );
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="red"]::before {
|
||||
background-color: var( --accent-light-red );
|
||||
color:var(--secondary-red-outline)
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button::after {
|
||||
border-radius: var( --border-radius-sm );
|
||||
content: attr( data-callsign );
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding:4px;
|
||||
padding-left:0;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
|
||||
#unit-control-panel #selected-units-container button:hover::after {
|
||||
overflow: visible;
|
||||
text-overflow:initial;
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button:hover::after {
|
||||
background-color: var( --background-grey );
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="blue"]:hover::after {
|
||||
background-color: var( --primary-blue );
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="red"]:hover::after {
|
||||
background-color: var( --primary-red );
|
||||
}
|
||||
|
||||
#unit-control-panel h4 {
|
||||
|
||||
@ -10,13 +10,14 @@
|
||||
|
||||
|
||||
#unit-info-panel #unit-name {
|
||||
line-height: 18px;
|
||||
margin-bottom:10px;
|
||||
padding:0px 0;
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
#unit-info-panel #current-task {
|
||||
border-radius: var( --border-radius-lg );
|
||||
margin-top:15px;
|
||||
margin-top:8px;
|
||||
padding:6px 16px;
|
||||
}
|
||||
|
||||
#unit-info-panel #current-task::after {
|
||||
@ -25,36 +26,97 @@
|
||||
}
|
||||
|
||||
|
||||
#unit-info-panel #loadout-data {
|
||||
max-width: 250px;
|
||||
#loadout-container {
|
||||
width:250px;
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-data .ol-data-grid {
|
||||
margin: 6px 0;
|
||||
#loadout {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-data .ol-data-grid dt:first-child {
|
||||
text-indent: 5px;
|
||||
#loadout-silhouette {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
width:55%;
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-data .ol-data-grid dt:first-child::before {
|
||||
#loadout-silhouette::before {
|
||||
background-image: var( --loadout-background-image );
|
||||
background-repeat: no-repeat;
|
||||
background-size:75px 75px;
|
||||
content:"";
|
||||
display:block;
|
||||
filter: invert( 100% );
|
||||
height:75px;
|
||||
translate:-10px 0;
|
||||
width:75px;
|
||||
}
|
||||
|
||||
#loadout-items {
|
||||
align-self: center;
|
||||
display:flex;
|
||||
flex-flow: column nowrap;
|
||||
row-gap: 8px;
|
||||
text-align: center;
|
||||
width:45%;
|
||||
}
|
||||
|
||||
|
||||
#loadout-items > * {
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
display:flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#loadout-items > *::before {
|
||||
align-items: center;
|
||||
background-color: var( --secondary-light-grey );
|
||||
border-radius: 50%;
|
||||
content: attr( data-quantity );
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
height:20px;
|
||||
width:20px;
|
||||
}
|
||||
|
||||
#loadout-items > *::after {
|
||||
content: attr( data-item );
|
||||
}
|
||||
|
||||
|
||||
|
||||
#fuel-percentage {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#fuel-percentage::before {
|
||||
content: url( /images/icons/fuel.svg );
|
||||
display:inline-block;
|
||||
filter:invert(100%);
|
||||
height:16px;
|
||||
text-indent:5px;
|
||||
translate:-10px 5%;
|
||||
margin-right:6px;
|
||||
width:16px;
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-fuel-level::after {
|
||||
content: attr( data-fuel-level ) "%";
|
||||
#fuel-percentage::after {
|
||||
content: attr( data-percentage ) "%";
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-container .loadout-item {
|
||||
background-color: black;
|
||||
|
||||
#fuel-display {
|
||||
background-color: var( --background-grey );
|
||||
border-radius: var( --border-radius-md );
|
||||
height:6px;
|
||||
margin-top:4px;
|
||||
overflow: hidden;
|
||||
width:90%;
|
||||
}
|
||||
|
||||
#fuel-display #fuel-bar {
|
||||
border-radius: var( --border-radius-md );
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#unit-info-panel #loadout-container .loadout-item::before {
|
||||
content: attr( data-loadout-qty )'\d7 ' attr( data-loadout-item ) ;
|
||||
}
|
||||
@ -19,6 +19,7 @@
|
||||
|
||||
--accent-green : #8bff63;
|
||||
--accent-light-blue : #5ca7ff;
|
||||
--accent-light-red : #ffcccc;
|
||||
|
||||
--background-grey : #3d4651;
|
||||
--background-slate-blue : #363c43;
|
||||
|
||||
@ -59,17 +59,38 @@ export class UnitControlPanel extends Panel {
|
||||
if (this.getElement() != null && units.length > 0)
|
||||
{
|
||||
this.#showFlightControlSliders(units);
|
||||
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit) =>
|
||||
|
||||
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index:number) =>
|
||||
{
|
||||
var button = document.createElement("button");
|
||||
button.innerText = unit.getBaseData().unitName;
|
||||
|
||||
if (unit instanceof Aircraft)
|
||||
button.setAttribute( "data-short-label", aircraftDatabase.getShortLabelByName(unit.getBaseData().name));
|
||||
else if (unit instanceof GroundUnit)
|
||||
button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(unit.getBaseData().name));
|
||||
else
|
||||
const baseData = unit.getBaseData();
|
||||
|
||||
if ( index === 0 ) {
|
||||
|
||||
this.getElement().querySelectorAll(`[data-object|="unit"]`).forEach( marker => {
|
||||
marker.setAttribute( "data-coalition", unit.getMissionData().coalition );
|
||||
const shortLabel = <HTMLElement>marker.querySelector( ".unit-short-label" );
|
||||
if ( shortLabel ) {
|
||||
shortLabel.innerText = aircraftDatabase.getShortLabelByName( baseData.name );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerText = baseData.unitName;
|
||||
|
||||
if (unit instanceof Aircraft) {
|
||||
button.innerText = "";
|
||||
button.setAttribute( "data-short-label", aircraftDatabase.getLabelByName( baseData.name ) );
|
||||
button.setAttribute( "data-callsign", aircraftDatabase.getLabelByName( baseData.unitName ) );
|
||||
} else if (unit instanceof GroundUnit) {
|
||||
|
||||
button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(baseData.name));
|
||||
button.setAttribute( "data-callsign", groundUnitsDatabase.getLabelByName( baseData.unitName ) );
|
||||
} else {
|
||||
button.setAttribute( "data-short-label", "");
|
||||
button.setAttribute( "data-callsign", "" );
|
||||
}
|
||||
|
||||
button.setAttribute( "data-coalition", unit.getMissionData().coalition );
|
||||
button.classList.add( "pill", "highlight-coalition" )
|
||||
|
||||
@ -1,34 +1,43 @@
|
||||
import { ConvertDDToDMS, rad2deg } from "../other/utils";
|
||||
import { aircraftDatabase } from "../units/aircraftdatabase";
|
||||
import { Unit } from "../units/unit";
|
||||
import { Panel } from "./panel";
|
||||
|
||||
export class UnitInfoPanel extends Panel {
|
||||
#unitName: HTMLElement;
|
||||
#groupName: HTMLElement;
|
||||
#name: HTMLElement;
|
||||
#heading: HTMLElement;
|
||||
#altitude: HTMLElement;
|
||||
#currentTask: HTMLElement;
|
||||
#fuelBar: HTMLElement;
|
||||
#fuelPercentage: HTMLElement;
|
||||
#groundSpeed: HTMLElement;
|
||||
#fuel: HTMLElement;
|
||||
#groupName: HTMLElement;
|
||||
#heading: HTMLElement;
|
||||
#name: HTMLElement;
|
||||
#latitude: HTMLElement;
|
||||
#longitude: HTMLElement;
|
||||
#currentTask: HTMLElement;
|
||||
#loadoutContainer: HTMLElement;
|
||||
#silhouette: HTMLElement;
|
||||
#unitControl: HTMLElement;
|
||||
#unitLabel: HTMLElement;
|
||||
#unitName: HTMLElement;
|
||||
|
||||
constructor(ID: string) {
|
||||
super(ID);
|
||||
|
||||
this.#unitName = <HTMLElement>(this.getElement().querySelector("#unit-name"));
|
||||
this.#groupName= <HTMLElement>(this.getElement().querySelector("#group-name"));
|
||||
this.#name = <HTMLElement>(this.getElement().querySelector("#name"));
|
||||
this.#heading = <HTMLElement>(this.getElement().querySelector("#heading"));
|
||||
this.#altitude = <HTMLElement>(this.getElement().querySelector("#altitude"));
|
||||
this.#groundSpeed = <HTMLElement>(this.getElement().querySelector("#ground-speed"));
|
||||
this.#fuel = <HTMLElement>(this.getElement().querySelector("#fuel"));
|
||||
this.#latitude = <HTMLElement>(this.getElement().querySelector("#latitude"));
|
||||
this.#longitude = <HTMLElement>(this.getElement().querySelector("#longitude"));
|
||||
this.#currentTask = <HTMLElement>(this.getElement().querySelector("#current-task"));
|
||||
this.#altitude = <HTMLElement>(this.getElement().querySelector("#altitude"));
|
||||
this.#currentTask = <HTMLElement>(this.getElement().querySelector("#current-task"));
|
||||
this.#groundSpeed = <HTMLElement>(this.getElement().querySelector("#ground-speed"));
|
||||
this.#fuelBar = <HTMLElement>(this.getElement().querySelector("#fuel-bar"));
|
||||
this.#fuelPercentage = <HTMLElement>(this.getElement().querySelector("#fuel-percentage"));
|
||||
this.#groupName = <HTMLElement>(this.getElement().querySelector("#group-name"));
|
||||
this.#heading = <HTMLElement>(this.getElement().querySelector("#heading"));
|
||||
this.#name = <HTMLElement>(this.getElement().querySelector("#name"));
|
||||
this.#latitude = <HTMLElement>(this.getElement().querySelector("#latitude"));
|
||||
this.#loadoutContainer = <HTMLElement>(this.getElement().querySelector("#loadout-container"));
|
||||
this.#longitude = <HTMLElement>(this.getElement().querySelector("#longitude"));
|
||||
this.#silhouette = <HTMLElement>(this.getElement().querySelector("#loadout-silhouette"));
|
||||
this.#unitControl = <HTMLElement>(this.getElement().querySelector("#unit-control"));
|
||||
this.#unitLabel = <HTMLElement>(this.getElement().querySelector("#unit-label"));
|
||||
this.#unitName = <HTMLElement>(this.getElement().querySelector("#unit-name"));
|
||||
|
||||
document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => this.#onUnitsSelection(e.detail));
|
||||
document.addEventListener("unitsDeselection", (e: CustomEvent<Unit[]>) => this.#onUnitsDeselection(e.detail));
|
||||
@ -40,29 +49,53 @@ export class UnitInfoPanel extends Panel {
|
||||
|
||||
#onUnitUpdate(unit: Unit) {
|
||||
if (this.getElement() != null && this.getVisible() && unit.getSelected()) {
|
||||
|
||||
const baseData = unit.getBaseData();
|
||||
//style=""
|
||||
console.log( );
|
||||
/* Set the unit info */
|
||||
this.#unitName.innerText = unit.getBaseData().unitName;
|
||||
this.#groupName.innerText = unit.getBaseData().groupName;
|
||||
this.#name.innerText = unit.getBaseData().name;
|
||||
this.#unitLabel.innerText = aircraftDatabase.getLabelByName( baseData.name );
|
||||
this.#unitName.innerText = baseData.unitName;
|
||||
this.#unitControl.innerText = ( ( baseData.AI ) ? "AI" : "Human" ) + " controlled";
|
||||
// this.#groupName.innerText = baseData.groupName;
|
||||
//this.#name.innerText = baseData.name;
|
||||
//this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °");
|
||||
//this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft");
|
||||
//this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts");
|
||||
//this.#fuel.innerText = String(unit.getMissionData().fuel + "%");
|
||||
this.#fuelBar.style.width = String(unit.getMissionData().fuel + "%");
|
||||
this.#fuelPercentage.dataset.percentage = "" + unit.getMissionData().fuel;
|
||||
//this.#latitude.innerText = ConvertDDToDMS(unit.getFlightData().latitude, false);
|
||||
//this.#longitude.innerText = ConvertDDToDMS(unit.getFlightData().longitude, true);
|
||||
this.#currentTask.dataset.currentTask = unit.getTaskData().currentTask !== ""? unit.getTaskData().currentTask: "No task";
|
||||
this.#currentTask.dataset.coalition = unit.getMissionData().coalition;
|
||||
|
||||
/* Add the loadout elements */
|
||||
this.#loadoutContainer.replaceChildren(...Object.values(unit.getMissionData().ammo).map(
|
||||
(ammo: any) => {
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("pill", "loadout-item");
|
||||
el.dataset.loadoutQty = ammo.count;
|
||||
el.dataset.loadoutItem = ammo.desc.displayName;
|
||||
return el;
|
||||
const items = <HTMLElement>this.#loadoutContainer.querySelector( "#loadout-items" );
|
||||
|
||||
this.#silhouette.setAttribute( "style", `--loadout-background-image:url('/images/units/${aircraftDatabase.getByName( baseData.name )?.filename}');` );;
|
||||
|
||||
if ( items ) {
|
||||
|
||||
const ammo = Object.values(unit.getMissionData().ammo);
|
||||
|
||||
if ( ammo.length > 0 ) {
|
||||
|
||||
items.replaceChildren(...Object.values(unit.getMissionData().ammo).map(
|
||||
(ammo: any) => {
|
||||
var el = document.createElement("div");
|
||||
el.dataset.qty = ammo.count;
|
||||
el.dataset.item = ammo.desc.displayName;
|
||||
return el;
|
||||
}
|
||||
));
|
||||
|
||||
} else {
|
||||
|
||||
items.innerText = "No loadout";
|
||||
|
||||
}
|
||||
))
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1019,6 +1019,50 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<div class="content-header">Airfield menu</div>
|
||||
<div class="content-body">
|
||||
<div class="example">
|
||||
|
||||
<div id="unit-info-panel" class="ol-panel" style="position:relative;">
|
||||
|
||||
<div class="ol-panel-board">
|
||||
|
||||
<div id="general" class="panel-section">
|
||||
<h3 class="unit-name">Olympus 1-1</h3>
|
||||
<div class="ol-group">
|
||||
<div class="unit-label">Name</div>
|
||||
<div class="unit-control">AI Controlled</div>
|
||||
</div>
|
||||
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task="Awaiting tasking"></div>
|
||||
</div>
|
||||
|
||||
<div id="loadout-container" class="panel-section">
|
||||
|
||||
<div id="loadout">
|
||||
<div id="loadout-silhouette" style="--loadout-background-image:url('/images/units/f-15.png');"></div>
|
||||
<div id="loadout-items" data-empty-message="Empty loadout">
|
||||
Empty loadout
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fuel-percentage" data-percentage="45"></div>
|
||||
<div id="fuel-display">
|
||||
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div id="unit-identification">
|
||||
<div data-object="unit-air-aircraft">
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-short-label"></div>
|
||||
</div>
|
||||
|
||||
<input id="unit-name" value="Olympus 1-1" readonly disabled />
|
||||
|
||||
@ -3,25 +3,25 @@
|
||||
<div class="ol-panel-board">
|
||||
|
||||
<div id="general" class="panel-section">
|
||||
<h3 id="unit-name">Olympus 1-1</h3>
|
||||
<h3 id="unit-name"></h3>
|
||||
<div class="ol-group">
|
||||
<div id="name" class="pill highlight-primary">Name</div>
|
||||
<div id="group-name" class="pill highlight-primary">Group</div>
|
||||
<div id="unit-label"></div>
|
||||
<div id="unit-control"></div>
|
||||
</div>
|
||||
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task=""></div>
|
||||
</div>
|
||||
|
||||
<div id="loadout-data" class="panel-section">
|
||||
<div id="loadout-container" class="panel-section">
|
||||
|
||||
<div id="loadout">
|
||||
<div id="loadout-silhouette"></div>
|
||||
<div id="loadout-items">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="loadout-label">Loadout</h4>
|
||||
|
||||
<dl class="ol-data-grid">
|
||||
<dt>Fuel</dt>
|
||||
<dd id="loadout-fuel-level" data-fuel-level="69"></dd>
|
||||
</dl>
|
||||
|
||||
<div id="loadout-container" class="ol-group wrap">
|
||||
<!-- Here the loadout elements will be shown -->
|
||||
<div id="fuel-percentage" data-percentage=""></div>
|
||||
<div id="fuel-display">
|
||||
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:30%;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user