diff --git a/client/package-lock.json b/client/package-lock.json index e6e672a7..e627bd43 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,12 +1,12 @@ { "name": "DCSOlympus", - "version": "v0.2.1-alpha", + "version": "v0.3.0-alpha", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "DCSOlympus", - "version": "v0.2.1-alpha", + "version": "v0.3.0-alpha", "dependencies": { "@types/geojson": "^7946.0.10", "@types/leaflet": "^1.9.0", diff --git a/client/package.json b/client/package.json index f0db50cb..9f2fec90 100644 --- a/client/package.json +++ b/client/package.json @@ -2,7 +2,7 @@ "name": "DCSOlympus", "node-main": "./bin/www", "main": "http://localhost:3000", - "version": "v0.2.1-alpha", + "version": "v0.3.0-alpha", "private": true, "scripts": { "copy": "copy.bat", diff --git a/client/public/stylesheets/layout/layout.css b/client/public/stylesheets/layout/layout.css index 31cb44fc..cf209ea9 100644 --- a/client/public/stylesheets/layout/layout.css +++ b/client/public/stylesheets/layout/layout.css @@ -14,6 +14,10 @@ z-index: 1000; } +#app-icon>.ol-select-options { + width: fit-content; +} + #toolbar-summary { background-image: url("/images/icon-round.png"); background-position: 20px 22px; @@ -25,6 +29,10 @@ text-indent: 60px; } +#toolbar-summary { + white-space: nowrap; +} + #connection-status-panel { bottom: 20px; font-size: 12px; diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index b0fbae9e..7fe17ff9 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -574,9 +574,9 @@ nav.ol-panel> :last-child { .ol-measure-box { background-color: var(--background-steel); border-radius: 999px; - color: var(--primary-neutral); + color: var(--background-offwhite); font-size: 12px; - font-weight: var(--font-weight-bolder); + font-weight: bolder; height: fit-content; padding-bottom: 0.2em; padding-left: 0.5em; @@ -586,6 +586,7 @@ nav.ol-panel> :last-child { text-align: center; width: fit-content; z-index: 2000; + pointer-events: none; } .ol-sortable .handle { @@ -910,18 +911,6 @@ dl.ol-data-grid dd { margin-left: auto; } -.br-info::after { - content: attr(data-bearing) '\00B0 / ' attr(data-distance) attr(data-distance-units); -} - -.br-info[data-message]::after { - content: attr(data-message); -} - -.coordinates::after { - content: attr(data-dd) "\00b0 " attr(data-mm) "'" attr(data-ss) "." attr(data-sss) '"' attr(data-label); -} - .ol-button-box { column-gap: 6px; display: flex; diff --git a/client/public/stylesheets/panels/mouseinfo.css b/client/public/stylesheets/panels/mouseinfo.css index 1c3d5e2e..e32f4540 100644 --- a/client/public/stylesheets/panels/mouseinfo.css +++ b/client/public/stylesheets/panels/mouseinfo.css @@ -6,11 +6,11 @@ #mouse-info-panel dl { margin-bottom: 4px; - row-gap: 8px; + row-gap: 5px; } #mouse-info-panel dt { - height: 20px; + height: fit-content; width: 30%; } @@ -30,20 +30,22 @@ width: 16px; } -#mouse-info-panel dt#ref-unit-position::after { - background-image: url("/resources/theme/images/icons/ruler.svg"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 16px 16px; - content: ""; +#mouse-info-panel #measuring-tool dt { + height: 24px; + width: 24px; + background-color: var(--background-offwhite); + border-radius: var(--border-radius-sm); } -#mouse-info-panel dt#ref-measure-position::after { - background-image: url("/resources/theme/images/icons/pin.png"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 16px 16px; - content: ""; +#mouse-info-panel #measuring-tool svg { + padding: 3px; + height: 100%; + width: 100%; +} + +#mouse-info-panel #measuring-tool dt svg>* { + fill: black; + stroke: black; } #mouse-info-panel dt[data-label]::after { @@ -72,4 +74,36 @@ #mouse-info-panel dd { width: 70%; +} + +.br-info::after { + content: attr(data-bearing) '\00B0 / ' attr(data-distance) " " attr(data-distance-units); + font-weight: bold; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--background-offwhite); +} + +.br-info[data-coalition="blue"]::after { + color: var(--primary-blue) +} + +.br-info[data-coalition="red"]::after { + color: var(--primary-red) +} + +.br-info[data-message]::after { + content: attr(data-message); +} + +.coordinates::after { + content: attr(data-dd) "\00b0 " attr(data-mm) "'" attr(data-ss) "." attr(data-sss) '"' attr(data-label); + font-weight: bold; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--background-offwhite); } \ No newline at end of file diff --git a/client/public/themes/olympus/images/icons/pin.png b/client/public/themes/olympus/images/icons/pin.png deleted file mode 100644 index c6222cd2..00000000 Binary files a/client/public/themes/olympus/images/icons/pin.png and /dev/null differ diff --git a/client/public/themes/olympus/images/icons/pin.svg b/client/public/themes/olympus/images/icons/pin.svg new file mode 100644 index 00000000..e42653e9 --- /dev/null +++ b/client/public/themes/olympus/images/icons/pin.svg @@ -0,0 +1,46 @@ + + + + + + + diff --git a/client/public/themes/olympus/images/icons/plane.svg b/client/public/themes/olympus/images/icons/plane.svg new file mode 100644 index 00000000..b672646e --- /dev/null +++ b/client/public/themes/olympus/images/icons/plane.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index bdd38fb3..7301e130 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/client/src/panels/mouseinfopanel.ts @@ -14,8 +14,8 @@ export class MouseInfoPanel extends Panel { constructor(ID: string) { super(ID); - this.#measureIcon = new Icon({ iconUrl: 'images/pin.png', iconAnchor: [16, 32]}); - this.#measureMarker = new Marker([0, 0], {icon: this.#measureIcon, interactive: false}); + this.#measureIcon = new Icon({ iconUrl: 'resources/theme/images/icons/pin.svg', iconAnchor: [16, 32] }); + this.#measureMarker = new Marker([0, 0], { icon: this.#measureIcon, interactive: false }); this.#measureBox = document.createElement("div"); this.#measureBox.classList.add("ol-measure-box", "hide"); @@ -25,109 +25,36 @@ export class MouseInfoPanel extends Panel { getMap()?.on('zoom', (e: any) => this.#onZoom(e)); getMap()?.on('mousemove', (e: any) => this.#onMouseMove(e)); - document.addEventListener('unitsSelection', (e: CustomEvent) => this.#onUnitsSelection(e.detail)); - document.addEventListener('clearSelection', () => this.#onClearSelection()); + document.addEventListener('unitsSelection', (e: CustomEvent) => this.#update()); + document.addEventListener('clearSelection', () => this.#update()); } - #update(mousePosition: LatLng, measurePosition: LatLng | null, unitPosition: LatLng | null) { + #update() { + const mousePosition = getMap().getMouseCoordinates(); + + var selectedUnitPosition = null; + var selectedUnits = getUnitsManager().getSelectedUnits(); + if (selectedUnits && selectedUnits.length == 1) + selectedUnitPosition = new LatLng(selectedUnits[0].getFlightData().latitude, selectedUnits[0].getFlightData().longitude); + + /* Draw measures from selected unit, from pin location, and from bullseyes */ + this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition); + this.#drawMeasure("ref-unit-position", "unit-position", selectedUnitPosition, mousePosition); + + this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null && selectedUnitPosition === null); + var bullseyes = getMissionData().getBullseyes(); for (let idx in bullseyes) - { - var el = this.getElement().querySelector(`#bullseye-${idx}`); + this.#drawMeasure(null, `bullseye-${idx}`, bullseyes[idx].getLatLng(), mousePosition); - if ( el != null ) { - - var dist = distance(bullseyes[idx].getLatLng().lat, bullseyes[idx].getLatLng().lng, mousePosition.lat, mousePosition.lng); - var bear = bearing(bullseyes[idx].getLatLng().lat, bullseyes[idx].getLatLng().lng, mousePosition.lat, mousePosition.lng); - - let bng = zeroAppend(Math.floor(bear), 3); - - if ( bng === "000" ) { - bng = "360"; - } - - el.dataset.bearing = bng; - el.dataset.distance = zeroAppend(Math.floor(dist*0.000539957), 3); - el.dataset.distanceUnits = "NM"; - } - - } - - if (measurePosition) { - var el = this.getElement().querySelector(`#measure-position`); - - 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); - - let bng = zeroAppend(Math.floor(bear), 3); - - if ( bng === "000" ) { - bng = "360"; - } - - el.dataset.bearing = bng; - el.dataset.distance = zeroAppend(Math.floor(dist*0.000539957), 3); - el.dataset.distanceUnits = "NM"; - - } - } - - - if (unitPosition) { - var el = this.getElement().querySelector(`#unit-position`); - 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"; - } - } - - const refMouseLat = document.getElementById( "ref-mouse-position-latitude" ); - const mouseLat = document.getElementById( "mouse-position-latitude" ); - - if ( refMouseLat && mouseLat ) { - - let matches = String( mousePosition.lat ).match( /^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/ ); - - if ( matches && matches.length ) { - mouseLat.dataset.dd = matches[1]; - mouseLat.dataset.mm = matches[2]; - mouseLat.dataset.ss = matches[3]; - mouseLat.dataset.sss = matches[4]; - } - - refMouseLat.dataset.label = ( mousePosition.lat < 0 ) ? "S" : "N"; - - } - - const refMouseLng = document.getElementById( "ref-mouse-position-longitude" ); - const mouseLng = document.getElementById( "mouse-position-longitude" ); - - if ( refMouseLng && mouseLng ) { - - let matches = String( mousePosition.lng ).match( /^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/ ); - - if ( matches && matches.length ) { - mouseLng.dataset.dd = matches[1]; - mouseLng.dataset.mm = matches[2]; - mouseLng.dataset.ss = matches[3]; - mouseLng.dataset.sss = matches[4]; - } - - refMouseLng.dataset.label = ( mousePosition.lng < 0 ) ? "W" : "E"; - } + /* Draw coordinates */ + this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", mousePosition.lat, ["N", "S"]); + this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", mousePosition.lng, ["E", "W"]); } - #onMapClick(e: any) - { - if (e.originalEvent.ctrlKey) - { - if (!this.#measurePoint) - { + #onMapClick(e: any) { + if (e.originalEvent.ctrlKey) { + if (!this.#measurePoint) { this.#measureBox.classList.toggle("hide", false); this.#measurePoint = e.latlng; this.#measureMarker.setLatLng(e.latlng); @@ -135,8 +62,7 @@ export class MouseInfoPanel extends Panel { if (!getMap().hasLayer(this.#measureLine)) this.#measureLine.addTo(getMap()); } - else - { + else { this.#measureBox.classList.toggle("hide", true); this.#measurePoint = null; if (getMap().hasLayer(this.#measureMarker)) @@ -147,13 +73,13 @@ export class MouseInfoPanel extends Panel { getMap().removeLayer(this.#measureLine); } } + + this.#update(); } - #drawMeasureLine() - { + #drawMeasureLine() { var mouseLatLng = getMap().containerPointToLatLng(getMap().getMousePosition()); - if (this.#measurePoint != null) - { + if (this.#measurePoint != null) { var points = [this.#measurePoint, mouseLatLng]; this.#measureLine.setLatLngs(points); var dist = distance(this.#measurePoint.lat, this.#measurePoint.lng, mouseLatLng.lat, mouseLatLng.lng); @@ -163,74 +89,79 @@ export class MouseInfoPanel extends Panel { var dy = (getMap().getMousePosition().y - startXY.y); var angle = Math.atan2(dy, dx); - if (angle > Math.PI / 2) + if (angle > Math.PI / 2) angle = angle - Math.PI; - if (angle < -Math.PI / 2) + if (angle < -Math.PI / 2) angle = angle + Math.PI; let bng = zeroAppend(Math.floor(bear), 3); - const reciprocal = zeroAppend( reciprocalHeading( parseInt( bng ) ), 3 ); - if ( bng === "000" ) { + if (bng === "000") bng = "360"; - } - let data = [ `${bng}°`, `${Math.floor(dist*0.000539957)}NM`, `${reciprocal}°` ]; + let data = [`${bng}°`, `${Math.floor(dist * 0.000539957)} NM`]; - if ( bear < 180 ) { - data = data.reverse(); - } - - this.#measureBox.innerText = data.join( " | " ); + this.#measureBox.innerText = data.join(" / "); this.#measureBox.style.left = (getMap().getMousePosition().x + startXY.x) / 2 - this.#measureBox.offsetWidth / 2 + "px"; this.#measureBox.style.top = (getMap().getMousePosition().y + startXY.y) / 2 - this.#measureBox.offsetHeight / 2 + "px"; this.#measureBox.style.rotate = angle + "rad"; } } - #onMouseMove(e: any) - { - var selectedUnitPosition = null; - var selectedUnits = getUnitsManager().getSelectedUnits(); - if (selectedUnits && selectedUnits.length == 1) - selectedUnitPosition = new LatLng(selectedUnits[0].getFlightData().latitude, selectedUnits[0].getFlightData().longitude); - - this.#update(e.latlng, this.#measurePoint, selectedUnitPosition); - this.#drawMeasureLine(); - } - - #onZoom(e: any) - { - this.#drawMeasureLine(); - } - - #onUnitsSelection(units: Unit[]) - { - const pos = this.getElement().querySelector(`#unit-position`); + #onMouseMove(e: any) { - if ( units.length > 1 ) { - pos?.setAttribute( "data-message", "(multiple units)" ); - } else { - pos?.removeAttribute( "data-message" ); + this.#update(); + this.#drawMeasureLine(); + } + + #onZoom(e: any) { + this.#drawMeasureLine(); + } + + #drawMeasure(imgId: string | null, textId: string, value: LatLng | null, mousePosition: LatLng) { + var el = this.getElement().querySelector(`#${textId}`) as HTMLElement; + var img = imgId != null ? this.getElement().querySelector(`#${imgId}`) as HTMLElement : null; + if (value) { + if (el != null) { + el.classList.remove("hide"); + + var bear = bearing(value.lat, value.lng, mousePosition.lat, mousePosition.lng); + var dist = distance(value.lat, value.lng, mousePosition.lat, mousePosition.lng); + + let bng = zeroAppend(Math.floor(bear), 3); + + if (bng === "000") + bng = "360"; + + el.dataset.bearing = bng; + el.dataset.distance = zeroAppend(Math.floor(dist * 0.000539957), 3); + el.dataset.distanceUnits = "NM"; + } + if (img != null) + img.classList.remove("hide"); + } + else { + if (el != null) + el.classList.add("hide"); + if (img != null) + img.classList.add("hide"); } - } - - #onClearSelection() - { - this.#measureBox.classList.toggle("hide", true); - - const pos = this.getElement().querySelector(`#unit-position`); - - if ( pos instanceof HTMLElement ) { - pos?.removeAttribute( "data-message" ); - - pos.dataset.bearing = "---"; - pos.dataset.distance = "---"; - pos.dataset.distanceUnits = "NM"; + #drawCoordinates(imgId: string, textId: string, value: number, prefixes: string[]) { + const el = this.getElement().querySelector(`#${textId}`) as HTMLElement; + const img = this.getElement().querySelector(`#${imgId}`) as HTMLElement; + if (img && el) { + let matches = String(value).match(/^\-?(\d+)\.(\d{2})(\d{2})(\d{2})/); + if (matches && matches.length) { + el.dataset.dd = matches[1]; + el.dataset.mm = matches[2]; + el.dataset.ss = matches[3]; + el.dataset.sss = matches[4]; + } + img.dataset.label = (value < 0) ? prefixes[1] : prefixes[0]; } } } diff --git a/client/views/panels/mouseinfo.ejs b/client/views/panels/mouseinfo.ejs index 5127e4a4..c4434cc6 100644 --- a/client/views/panels/mouseinfo.ejs +++ b/client/views/panels/mouseinfo.ejs @@ -1,24 +1,28 @@
-
+
-
+
+ +
-
+
+ +
-
+
-
-
-
-
+
+
+
+
-
+
diff --git a/client/views/panels/navbar.ejs b/client/views/panels/navbar.ejs index 3ae2453a..922fe414 100644 --- a/client/views/panels/navbar.ejs +++ b/client/views/panels/navbar.ejs @@ -6,7 +6,7 @@

DCS Olympus

-
version v0.2.1
+
version v0.3.0
Discord @@ -15,7 +15,7 @@ Github
diff --git a/installer/olympus.iss b/installer/olympus.iss index dfc937f3..55664142 100644 --- a/installer/olympus.iss +++ b/installer/olympus.iss @@ -1,5 +1,5 @@ #define nwjsFolder "C:\Users\dpass\Documents\nwjs\" -#define version "v0.2.1-alpha" +#define version "v0.3.0-alpha" [Setup] AppName=DCS Olympus diff --git a/olympus.json b/olympus.json index 45d703ff..3618c236 100644 --- a/olympus.json +++ b/olympus.json @@ -1,6 +1,6 @@ { "server": { - "address": "136.243.170.132", + "address": "localhost", "port": 30000 }, "authentication": { diff --git a/scripts/OlympusCommand.lua b/scripts/OlympusCommand.lua index bd61f8d2..d137728c 100644 --- a/scripts/OlympusCommand.lua +++ b/scripts/OlympusCommand.lua @@ -1,4 +1,4 @@ -local version = "v0.2.1-alpha" +local version = "v0.3.0-alpha" local debug = true diff --git a/scripts/OlympusHook.lua b/scripts/OlympusHook.lua index 7215d3cd..b87c8926 100644 --- a/scripts/OlympusHook.lua +++ b/scripts/OlympusHook.lua @@ -1,4 +1,4 @@ -local version = 'v0.2.1-alpha' +local version = 'v0.3.0-alpha' Olympus = {} Olympus.OlympusDLL = nil