From 49ded7f0396f935cf3f0af4cdda23cc22eded10f Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Wed, 22 Mar 2023 23:45:17 +0000 Subject: [PATCH] First commit for unit info panel. --- client/public/stylesheets/unitinfopanel.css | 100 ++++++++++++++++---- client/src/panels/unitinfopanel.ts | 89 +++++++++++------ client/views/uikit.ejs | 44 +++++++++ client/views/unitinfopanel.ejs | 26 ++--- 4 files changed, 199 insertions(+), 60 deletions(-) diff --git a/client/public/stylesheets/unitinfopanel.css b/client/public/stylesheets/unitinfopanel.css index 82a109d2..070413ea 100644 --- a/client/public/stylesheets/unitinfopanel.css +++ b/client/public/stylesheets/unitinfopanel.css @@ -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 ) ; -} \ No newline at end of file diff --git a/client/src/panels/unitinfopanel.ts b/client/src/panels/unitinfopanel.ts index c46cd486..83d2413b 100644 --- a/client/src/panels/unitinfopanel.ts +++ b/client/src/panels/unitinfopanel.ts @@ -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 = (this.getElement().querySelector("#unit-name")); - this.#groupName= (this.getElement().querySelector("#group-name")); - this.#name = (this.getElement().querySelector("#name")); - this.#heading = (this.getElement().querySelector("#heading")); - this.#altitude = (this.getElement().querySelector("#altitude")); - this.#groundSpeed = (this.getElement().querySelector("#ground-speed")); - this.#fuel = (this.getElement().querySelector("#fuel")); - this.#latitude = (this.getElement().querySelector("#latitude")); - this.#longitude = (this.getElement().querySelector("#longitude")); - this.#currentTask = (this.getElement().querySelector("#current-task")); + this.#altitude = (this.getElement().querySelector("#altitude")); + this.#currentTask = (this.getElement().querySelector("#current-task")); + this.#groundSpeed = (this.getElement().querySelector("#ground-speed")); + this.#fuelBar = (this.getElement().querySelector("#fuel-bar")); + this.#fuelPercentage = (this.getElement().querySelector("#fuel-percentage")); + this.#groupName = (this.getElement().querySelector("#group-name")); + this.#heading = (this.getElement().querySelector("#heading")); + this.#name = (this.getElement().querySelector("#name")); + this.#latitude = (this.getElement().querySelector("#latitude")); this.#loadoutContainer = (this.getElement().querySelector("#loadout-container")); + this.#longitude = (this.getElement().querySelector("#longitude")); + this.#silhouette = (this.getElement().querySelector("#loadout-silhouette")); + this.#unitControl = (this.getElement().querySelector("#unit-control")); + this.#unitLabel = (this.getElement().querySelector("#unit-label")); + this.#unitName = (this.getElement().querySelector("#unit-name")); document.addEventListener("unitsSelection", (e: CustomEvent) => this.#onUnitsSelection(e.detail)); document.addEventListener("unitsDeselection", (e: CustomEvent) => 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 = 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"; + } - )) + + } } } diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs index 8cea83f6..c54b63e5 100644 --- a/client/views/uikit.ejs +++ b/client/views/uikit.ejs @@ -1019,6 +1019,50 @@ + +
+
Airfield menu
+
+
+ +
+ +
+ +
+

Olympus 1-1

+
+
Name
+
AI Controlled
+
+
+
+ +
+ +
+
+
+ Empty loadout +
+
+ + +
+
+
+
+ +
+ +
+ +
+ +
+
+
+
diff --git a/client/views/unitinfopanel.ejs b/client/views/unitinfopanel.ejs index 72276a47..83787d3b 100644 --- a/client/views/unitinfopanel.ejs +++ b/client/views/unitinfopanel.ejs @@ -3,25 +3,25 @@
-

Olympus 1-1

+

-
Name
-
Group
+
+
-
+
+ +
+
+
+
+
-

Loadout

- -
-
Fuel
-
-
- -
- +
+
+