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

Unit info panel done - probably.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-13 15:05:54 +00:00
parent da2dd7e0fd
commit 1d043b1d2d
4 changed files with 113 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
client/public/stylesheets/layout.css
View File

@ -58,34 +58,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
display:block !important;
}
#unit-control-panel #loadout-container {
display:flex;
flex-wrap: wrap;
row-gap: 4px;
}
#unit-control-panel #loadout-label span {
display:block;
float:right;
}
#unit-control-panel #loadout-label span::before {
content: url( /images/icons/fuel.svg );
display:inline-block;
filter:invert(100%);
height:16px;
translate:-25% 5%;
width:16px;
}
#unit-control-panel #loadout-label span::after {
content: attr( data-fuel-level ) "%";
}
#unit-control-panel #loadout-container .loadout-item {
background-color: black;
}
dl.data-grid {
align-items: center;
display:flex;
@ -155,6 +127,7 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
color: var( --accent-light-blue );
}
#unit-info-panel {
bottom: 20px;
font-size:12px;
@ -164,6 +137,59 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
z-index: 1000;
}
#unit-info-panel #unit-name {
line-height: 18px;
margin-bottom:10px;
}
#unit-info-panel #current-task {
border-radius: var( --border-radius-lg );
margin-top:15px;
}
#unit-info-panel #current-task::after {
content: attr( data-current-task );
display:block;
}
#unit-info-panel #loadout-data {
max-width: 250px;
}
#unit-info-panel #loadout-data .data-grid {
margin: 6px 0;
}
#unit-info-panel #loadout-data .data-grid dt:first-child {
text-indent: 5px;
}
#unit-info-panel #loadout-data .data-grid dt:first-child::before {
content: url( /images/icons/fuel.svg );
display:inline-block;
filter:invert(100%);
height:16px;
text-indent:5px;
translate:-10px 5%;
width:16px;
}
#unit-info-panel #loadout-fuel-level::after {
content: attr( data-fuel-level ) "%";
}
#unit-info-panel #loadout-container .loadout-item {
background-color: black;
}
#unit-info-panel #loadout-container .loadout-item::before {
content: attr( data-loadout-item ) ' \d7 ' attr( data-loadout-qty );
}
#connection-status-panel {
bottom: 20px;
font-size:12px;

61
client/public/stylesheets/olympus.css
View File

@ -66,18 +66,11 @@ button[disabled="disabled"] {
.pill {
background-color: var( --background-darksteel );
border-radius: var(--border-radius-sm);
padding: 2px 6px;
padding: 4px 8px;
width: fit-content;
}
.loadout-item::after {
content: attr( data-qty ) 'x ' attr( data-item );
}
.ol-panel {
background-color: var(--background-steel);
border-radius: 15px;
@ -267,25 +260,24 @@ button[disabled="disabled"] {
justify-content: space-evenly;
}
.ol-panel-board>.panel-section {
.ol-panel-board > .panel-section {
border-right: 1px solid #555;
padding: 10px;
margin:10px 0;
padding:0 30px;
}
.ol-panel-board>.panel-section:last-of-type {
.ol-panel-board > .panel-section:first-child {
padding-left:20px;
}
.ol-panel-board > .panel-section:last-child {
padding-right:20px;
}
.ol-panel-board > .panel-section:last-of-type {
border-right-width: 0;
}
.ol-panel-board h1,
.ol-panel-board h2 {
font-weight: var(--font-weight-bolder);
margin: 0;
padding: 0 0 5px 0;
}
.ol-panel-board h2 {
font-size: 14px;
}
h1,
h2,
@ -335,16 +327,19 @@ nav.ol-panel> :last-child {
.ol-panel .ol-group {
border-radius: var(--border-radius-sm);
column-gap: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
row-gap: 4px;
}
.ol-panel .ol-group {
border-radius: var(--border-radius-sm);
.ol-panel .ol-group.wrap {
flex-wrap: wrap;
}
.ol-panel .ol-group-button-toggle {
align-items: center;
column-gap: 15px;
@ -385,20 +380,20 @@ nav.ol-panel> :last-child {
background-color: var(--secondary-light-grey);
}
.highlight-bluefor {
background-color: var(--primary-blue);
color: var(--background-steel)
}
.highlight-redfor {
background-color: var(--primary-red);
}
.highlight-neutral {
.highlight-coalition, .highlight-neutral {
background-color: var(--primary-grey);
color: var(--secondary-gunmetal-grey)
}
.highlight-coalition[data-coalition="blue"], .highlight-bluefor {
background-color: var(--primary-blue);
color: white;
}
.highlight-coalition[data-coalition="red"], .highlight-redfor {
background-color: var(--primary-red);
}
.accent-green {
color: var(--accent-green);

6
client/src/panels/unitinfopanel.ts
View File

@ -44,9 +44,9 @@ export class UnitInfoPanel extends Panel {
this.#unitName.innerText = unit.getBaseData().unitName;
this.#groupName.innerText = unit.getBaseData().groupName;
this.#name.innerText = unit.getBaseData().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.#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.#latitude.innerText = ConvertDDToDMS(unit.getFlightData().latitude, false);
//this.#longitude.innerText = ConvertDDToDMS(unit.getFlightData().longitude, true);

46
client/views/unitinfopanel.ejs
View File

@ -1,25 +1,35 @@
<div id="unit-info-panel" class="ol-panel" >
<div class="ol-panel-board">
<div id="general" class="panel-section">
<h1 id="unit-name">Olympus 1-1</h1>
<div id="name" class="pill highlight-primary">Name</div>
<div id="group-name" class="pill highlight-primary">Group</div>
<div id="task" class="pill highlight-primary">Task</div>
</div>
<div id="flight-data" class="panel-section">
<dl class="data-grid">
<dt>Heading</dt>
<dd id="heading">123&deg;</dd>
<dt>Speed</dt>
<dd id="ground-speed">323kts</dd>
<dt>Altitude</dt>
<dd id="altitude">27,414ft</dd>
</dl>
</div>
<div id="loadout-data" class="panel-section">
<h4 id="loadout-label">Loadout<span id="loadout-fuel-level" data-fuel-level="69"></span></h4>
<div id="loadout-container" class="ol-group">
<h3 id="unit-name">Olympus 1-1</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="task" class="pill highlight-primary">Task</div>
</div>
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task="Orbiting in place"></div>
</div>
<div id="loadout-data" class="panel-section">
<h4 id="loadout-label">Loadout</h4>
<dl class="data-grid">
<dt>Fuel</dt>
<dd id="loadout-fuel-level" data-fuel-level="69"></dd>
</dl>
<div id="loadout-container" class="ol-group wrap">
<div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-120"></div>
<div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-54"></div>
<div class="pill loadout-item" data-loadout-qty="2" data-loadout-item="AIM-9P"></div>
<div class="pill loadout-item" data-loadout-qty="895" data-loadout-item="bullets"></div>
</div>
</div>
</div>
</div>