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

Mostly done the mouse info panel.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-09 16:47:08 +00:00
parent b7ed3ebd8a
commit fbaface592
3 changed files with 94 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,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 );
}
@ -177,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%;
}

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);

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>