From ddab28f8743b4da929b7a00f863bbffd83dae61e Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Tue, 1 Apr 2025 14:46:56 +0200 Subject: [PATCH 1/3] fix(drawings): coalition commanders will not see enemy coalition drawings and navpoints --- .../react/src/map/drawings/drawingsmanager.ts | 64 +++++++++++++++++-- 1 file changed, 57 insertions(+), 7 deletions(-) diff --git a/frontend/react/src/map/drawings/drawingsmanager.ts b/frontend/react/src/map/drawings/drawingsmanager.ts index 108bda5e..19f739f7 100644 --- a/frontend/react/src/map/drawings/drawingsmanager.ts +++ b/frontend/react/src/map/drawings/drawingsmanager.ts @@ -1,9 +1,10 @@ import { decimalToRGBA } from "../../other/utils"; import { getApp } from "../../olympusapp"; -import { DrawingsInitEvent, DrawingsUpdatedEvent, MapOptionsChangedEvent, SessionDataLoadedEvent } from "../../events"; +import { CommandModeOptionsChangedEvent, DrawingsInitEvent, DrawingsUpdatedEvent, MapOptionsChangedEvent, SessionDataLoadedEvent } from "../../events"; import { MapOptions } from "../../types/types"; import { Circle, DivIcon, Layer, LayerGroup, layerGroup, Marker, Polygon, Polyline } from "leaflet"; import { NavpointMarker } from "../markers/navpointmarker"; +import { BLUE_COMMANDER, GAME_MASTER, NONE, RED_COMMANDER } from "../../constants/constants"; export abstract class DCSDrawing { #name: string; @@ -582,12 +583,6 @@ export class DCSDrawingsContainer { if (othersContainer.getDrawings().length === 0) this.removeSubContainer(othersContainer); // Remove empty container } - // initNavpoints(drawingsData) { - // const newContainer = new DCSDrawingsContainer('Navpoints', this); - // this.addSubContainer(newContainer); - // newContainer.initFromData(drawingsData); - // } - getLayerGroup() { return this.#layerGroup; } @@ -705,6 +700,7 @@ export class DrawingsManager { #sessionDataDrawings = {}; #sessionDataNavpoints = {}; #initialized: boolean = false; + #hiddenContainers: Record = {}; constructor() { const drawingsLayerGroup = new LayerGroup(); @@ -727,6 +723,13 @@ export class DrawingsManager { this.#drawingsContainer.setVisibility(getApp().getMap().getOptions().showMissionDrawings); this.#navpointsContainer.setVisibility(getApp().getMap().getOptions().showMissionNavpoints); }); + + CommandModeOptionsChangedEvent.on((commandOptions) => { + if (commandOptions.commandMode !== GAME_MASTER) { + this.restrictCoalitionLayers(commandOptions.commandMode) + } + this.restoreHiddenLayers(commandOptions.commandMode); + }) } initDrawings(data: { drawings: Record> }): boolean { @@ -747,6 +750,53 @@ export class DrawingsManager { } } + private restrictContainer(containerName: string, targetContainer: any, hiddenKey: string) { + const container = targetContainer.getSubContainers().find(c => c.getName().toLowerCase() === containerName.toLowerCase()); + if (container) { + this.#hiddenContainers[hiddenKey] = { + parent: container['#parent'], + container: container + }; + container.setVisibility(false); + targetContainer.removeSubContainer(container); + } + } + + restrictCoalitionLayers(playerRole: string) { + if (playerRole === RED_COMMANDER) { + this.restrictContainer('Blue', this.#drawingsContainer, 'blue_drawings'); + this.restrictContainer('blue', this.#navpointsContainer, 'blue_navpoints'); + } else { + this.restrictContainer('Red', this.#drawingsContainer, 'red_drawings'); + this.restrictContainer('red', this.#navpointsContainer, 'red_navpoints'); + } + } + + private restoreContainer(key: string, targetContainer: any) { + if (this.#hiddenContainers[key]) { + console.log('this.#hiddenContainers[key] esiste ', this.#hiddenContainers); + + const container = this.#hiddenContainers[key].container; + targetContainer.addSubContainer(container); + container.setVisibility(true); + } + } + + restoreHiddenLayers(playerRole: string) { + console.log('--- restoring hidden layers for role ', playerRole); + + const roleContainers: Record = { + [RED_COMMANDER]: ['red_drawings', 'red_navpoints'], + [BLUE_COMMANDER]: ['blue_drawings', 'blue_navpoints'], + [GAME_MASTER]: ['red_drawings', 'red_navpoints', 'blue_drawings', 'blue_navpoints'] + }; + + roleContainers[playerRole]?.forEach((key) => { + const targetContainer = key.includes('drawings') ? this.#drawingsContainer : this.#navpointsContainer; + this.restoreContainer(key, targetContainer); + }); + } + getDrawingsContainer() { return this.#drawingsContainer; } From e6ef6cd05be7f71a5e9c1eab9d06d22f69f8df8f Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Tue, 1 Apr 2025 15:01:51 +0200 Subject: [PATCH 2/3] fix(drawings): not initializing empty layers --- frontend/react/src/map/drawings/drawingsmanager.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/react/src/map/drawings/drawingsmanager.ts b/frontend/react/src/map/drawings/drawingsmanager.ts index 19f739f7..4210ca1a 100644 --- a/frontend/react/src/map/drawings/drawingsmanager.ts +++ b/frontend/react/src/map/drawings/drawingsmanager.ts @@ -528,7 +528,9 @@ export class DCSDrawingsContainer { initFromData(drawingsData) { let hasContainers = false; Object.keys(drawingsData).forEach((layerName: string) => { - if (drawingsData[layerName]["name"] === undefined && drawingsData[layerName]["callsignStr"] === undefined) { + const layerIsAContainer = drawingsData[layerName]["name"] === undefined && drawingsData[layerName]["callsignStr"] === undefined; + const layerIsNotEmpty = Object.keys(drawingsData[layerName]).length > 0; + if (layerIsAContainer && layerIsNotEmpty) { const newContainer = new DCSDrawingsContainer(layerName, this); this.addSubContainer(newContainer); newContainer.initFromData(drawingsData[layerName]); @@ -580,7 +582,10 @@ export class DCSDrawingsContainer { else this.addDrawing(newDrawing); }); - if (othersContainer.getDrawings().length === 0) this.removeSubContainer(othersContainer); // Remove empty container + if (othersContainer.getDrawings().length === 0) { + this.removeSubContainer(othersContainer); // Remove empty container + // FIXME: it's not working for main containers. + } } getLayerGroup() { From 24015686ead9bb46a00617b2ad4b6056c1e7c76a Mon Sep 17 00:00:00 2001 From: MarcoJayUsai Date: Thu, 3 Apr 2025 14:43:38 +0200 Subject: [PATCH 3/3] feature(navpoints): navpoint marked as TGT have a special icon. Styles reworked. --- .../public/images/markers/navpoint-tgt.svg | 4 +++ .../react/public/images/markers/navpoint.svg | 3 ++ .../react/src/map/drawings/drawingsmanager.ts | 2 +- .../react/src/map/markers/navpointmarker.ts | 33 +++++++++++++++++-- .../src/map/markers/stylesheets/navpoint.css | 10 +++--- 5 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 frontend/react/public/images/markers/navpoint-tgt.svg create mode 100644 frontend/react/public/images/markers/navpoint.svg diff --git a/frontend/react/public/images/markers/navpoint-tgt.svg b/frontend/react/public/images/markers/navpoint-tgt.svg new file mode 100644 index 00000000..7f7cd846 --- /dev/null +++ b/frontend/react/public/images/markers/navpoint-tgt.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/react/public/images/markers/navpoint.svg b/frontend/react/public/images/markers/navpoint.svg new file mode 100644 index 00000000..b9075e11 --- /dev/null +++ b/frontend/react/public/images/markers/navpoint.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/react/src/map/drawings/drawingsmanager.ts b/frontend/react/src/map/drawings/drawingsmanager.ts index 4210ca1a..ccb208a0 100644 --- a/frontend/react/src/map/drawings/drawingsmanager.ts +++ b/frontend/react/src/map/drawings/drawingsmanager.ts @@ -460,7 +460,7 @@ export class DCSNavpoint extends DCSDrawing { constructor(drawingData, parent) { super(drawingData, parent); - this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment); + this.#point = new NavpointMarker([drawingData.lat, drawingData.lng], drawingData.callsignStr, drawingData.comment, drawingData.tag); this.setVisibility(true); } diff --git a/frontend/react/src/map/markers/navpointmarker.ts b/frontend/react/src/map/markers/navpointmarker.ts index f7092794..2ffba311 100644 --- a/frontend/react/src/map/markers/navpointmarker.ts +++ b/frontend/react/src/map/markers/navpointmarker.ts @@ -1,14 +1,35 @@ import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet"; import { CustomMarker } from "./custommarker"; +import { SVGInjector } from "@tanem/svg-injector"; export class NavpointMarker extends CustomMarker { #callsignStr: string; #comment: string; + #tag: string; - constructor(latlng: LatLngExpression, callsignStr: string, comment?: string) { + constructor(latlng: LatLngExpression, callsignStr: string, comment: string, tag: string) { super(latlng, { interactive: false, draggable: false }); this.#callsignStr = callsignStr; comment ? this.#comment = comment : null; + tag ? this.#tag = tag : null; + } + + private getImage() { + switch (this.#tag) { + case 'TGT': + return 'images/markers/navpoint-tgt.svg' + default: + return 'images/markers/navpoint.svg' + } + } + + private getSize() { + switch (this.#tag) { + case 'TGT': + return '20px' + default: + return '8px' + } } createIcon() { @@ -16,7 +37,7 @@ export class NavpointMarker extends CustomMarker { let icon = new DivIcon({ className: "leaflet-navpoint-icon", iconAnchor: [0, 0], - iconSize: [50, 50], + iconSize: [2, 2], }); this.setIcon(icon); @@ -26,6 +47,14 @@ export class NavpointMarker extends CustomMarker { // Main icon let pointIcon = document.createElement("div"); pointIcon.classList.add("navpoint-icon"); + var img = document.createElement("img"); + img.src = this.getImage(); + img.onload = () => { + SVGInjector(img); + }; + img.style.width = this.getSize(); + img.style.height = this.getSize(); + pointIcon.appendChild(img); el.append(pointIcon); // Label diff --git a/frontend/react/src/map/markers/stylesheets/navpoint.css b/frontend/react/src/map/markers/stylesheets/navpoint.css index a3e30eb9..52cd8082 100644 --- a/frontend/react/src/map/markers/stylesheets/navpoint.css +++ b/frontend/react/src/map/markers/stylesheets/navpoint.css @@ -5,11 +5,7 @@ gap: 10px; } .ol-navpoint-marker>.navpoint>.navpoint-icon { - height: 8px; - width: 8px; - background: white; - flex: none; - transform: rotate3d(0, 0, 1, 45deg); + filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1)); } .ol-navpoint-marker>.navpoint>.navpoint-main-label { @@ -17,6 +13,8 @@ flex-direction: column; font-size: 10px; color: white; + text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113); + } .ol-navpoint-marker .navpoint-comment-box { @@ -24,4 +22,6 @@ font-style: italic; color: white; max-width: 50px; + text-shadow: -1px -1px 2px rgb(113, 113, 113), 1px -1px 2px rgb(113, 113, 113), -1px 1px 2px rgb(113, 113, 113), 1px 1px 2px rgb(113, 113, 113); + } \ No newline at end of file