mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
First commit for unit info panel.
This commit is contained in:
PeekabooSteam
parent
1f2887c75a
commit
49ded7f039
@ -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 ) ;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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