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

Merge branch 'v0.1.0' of https://github.com/Pax1601/DCSOlympus into v0.1.0

Browse Source
This commit is contained in:
dpassoni 2023-03-09 17:55:41 +01:00
commit 839357b52c
5 changed files with 125 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,6 +63,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
dl.data-grid {
align-items: center;
display:flex;
flex-direction: row;
flex-wrap: wrap;
@ -71,11 +72,11 @@ dl.data-grid {
}
dl.data-grid dt {
width:40%;
width:60%;
}
dl.data-grid dd {
width:60%;
width:40%;
}
@ -108,6 +109,10 @@ dl.data-grid dd {
margin-left: auto;
}
dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after {
content: attr( data-bearing ) '\00B0 / ' attr( data-distance ) attr( data-distance-units );
}
@ -138,13 +143,35 @@ dl.data-grid dd {
#connection-status-panel {
bottom: 20px;
height: 30px;
font-size:12px;
position: absolute;
right: 10px;
width: 160px;
z-index: 1000;
}
#connection-status-panel dt::before {
content: "No connection";
}
#connection-status-panel dd::after {
border-radius: 50%;
background: red;
content: " ";
height:12px;
width:12px;
}
#connection-status-panel[data-is-connected] dt::before {
content: "Connected";
}
#connection-status-panel[data-is-connected] dd::after {
background:var( --accent-green );
}
#mouse-info-panel {
bottom: 60px;
height: fit-content;
@ -154,9 +181,58 @@ dl.data-grid dd {
z-index: 1000;
}
.content #mouse-info-panel {
margin-bottom: 100px;
position: static;
#mouse-info-panel dl {
row-gap: 14px;
}
#mouse-info-panel dt {
height:20px;
width:40%;
}
#mouse-info-panel dt {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:24px 24px;
display:inline-block;
}
#mouse-info-panel dt[data-tooltip]:hover::before {
background-color: var( --background-steel );
border-radius: 5px;
content: attr( data-tooltip );
display:flex;
flex-wrap: nowrap;
padding: 5px;
position: absolute;
translate: calc( -100% - 15px ) 0;
white-space: nowrap;
}
#ref-measure-position {
background-image: url( "/images/pin.png" );
}
#ref-unit-position {
background-image: url( "/images/unit.png" );
}
#ref-bullseye-0 {
background-image: url( "/images/bullseye0.png" );
}
#ref-bullseye-1 {
background-image: url( "/images/bullseye1.png" );
}
#ref-bullseye-2 {
background-image: url( "/images/bullseye2.png" );
}
#mouse-info-panel dd {
width:60%;
}

14
client/src/panels/connectionstatuspanel.ts
View File

@ -6,18 +6,6 @@ export class ConnectionStatusPanel extends Panel {
}
update(connected: boolean) {
var div = this.getElement().querySelector("#status-string");
if (div != null) {
if (connected) {
div.innerHTML = "Connected";
div.classList.add("ol-status-connected");
div.classList.remove("ol-status-disconnected");
}
else {
div.innerHTML = "Disconnected";
div.classList.add("ol-status-disconnected");
div.classList.remove("ol-status-connected");
}
}
this.getElement().toggleAttribute( "data-is-connected", connected );
}
}

42
client/src/panels/mouseinfopanel.ts
View File

@ -33,28 +33,44 @@ export class MouseInfoPanel extends Panel {
var bullseyes = getMissionData().getBullseyes();
for (let idx in bullseyes)
{
var dist = distance(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
var bear = bearing(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
var el = <HTMLElement>this.getElement().querySelector(`#bullseye-${idx}`);
if (el != null)
el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
if ( el != null ) {
var dist = distance(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
var bear = bearing(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
el.dataset.bearing = zeroAppend(Math.floor(bear), 3);
el.dataset.distance = zeroAppend(Math.floor(dist*0.000539957), 3);
el.dataset.distanceUnits = "NM";
}
}
if (measurePosition) {
var dist = distance(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
var bear = bearing(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
var el = <HTMLElement>this.getElement().querySelector(`#measure-position`);
if (el != null)
el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
if (el != null) {
var bear = bearing(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
var dist = distance(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
el.dataset.bearing = zeroAppend(Math.floor(bear), 3);
el.dataset.distance = zeroAppend(Math.floor(dist*0.000539957), 3);
el.dataset.distanceUnits = "NM";
}
}
if (unitPosition) {
var dist = distance(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
var bear = bearing(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
var el = <HTMLElement>this.getElement().querySelector(`#unit-position`);
if (el != null)
el.innerText = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
if (el != null) {
var dist = distance(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
var bear = bearing(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
el.dataset.bearing = zeroAppend(Math.floor(bear), 3);
el.dataset.distance = zeroAppend(Math.floor(dist*0.000539957), 3);
el.dataset.distanceUnits = "nm";
}
}
}
@ -65,7 +81,6 @@ export class MouseInfoPanel extends Panel {
if (!this.#measurePoint)
{
this.#measureBox.classList.toggle("hide", false);
this.getElement().querySelector(`#measure-position`)?.classList.toggle("hide", false);
this.#measurePoint = e.latlng;
this.#measureMarker.setLatLng(e.latlng);
this.#measureMarker.addTo(getMap());
@ -75,7 +90,6 @@ export class MouseInfoPanel extends Panel {
else
{
this.#measureBox.classList.toggle("hide", true);
this.getElement().querySelector(`#measure-position`)?.classList.toggle("hide", true);
this.#measurePoint = null;
if (getMap().hasLayer(this.#measureMarker))
getMap().removeLayer(this.#measureMarker);

5
client/views/connectionstatuspanel.ejs
View File

@ -1,3 +1,6 @@
<div id="connection-status-panel" class="ol-panel">
<h4 id="status-string"> Connected </h4>
<dl class="data-grid">
<dt></dt>
<dd></dd>
</dl>
</div>

14
client/views/mouseinfopanel.ejs
View File

@ -1,6 +1,12 @@
<div id="mouse-info-panel" class="ol-panel">
<div class="list-item"><div id="measure-position" class="hide">---° / --- NM</div></div>
<div class="list-item"><div id="unit-position" class="hide">---° / --- NM</div></div>
<div class="list-item"><div id="bullseye-2">---° / --- NM</div></div>
<div class="list-item"><div id="bullseye-1">---° / --- NM</div></div>
<dl class="data-grid">
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
<dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-unit-position"></dt>
<dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-1"></dt>
<dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-2"></dt>
<dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
</div>