Implemented range rings

client/src/map/map.ts

@@ -12,7 +12,7 @@ import { DestinationPreviewMarker } from "./markers/destinationpreviewmarker";
 import { TemporaryUnitMarker } from "./markers/temporaryunitmarker";
 import { ClickableMiniMap } from "./clickableminimap";
 import { SVGInjector } from '@tanem/svg-injector'
-import { mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes, SHOW_UNIT_LABELS } from "../constants/constants";
+import { mapLayers, mapBounds, minimapBoundaries, IDLE, COALITIONAREA_DRAW_POLYGON, visibilityControls, visibilityControlsTooltips, MOVE_UNIT, SHOW_UNIT_CONTACTS, HIDE_GROUP_MEMBERS, SHOW_UNIT_PATHS, SHOW_UNIT_TARGETS, visibilityControlsTypes, SHOW_UNIT_LABELS, SHOW_UNITS_RINGS } from "../constants/constants";
 import { TargetMarker } from "./markers/targetmarker";
 import { CoalitionArea } from "./coalitionarea/coalitionarea";
 import { CoalitionAreaContextMenu } from "../contextmenus/coalitionareacontextmenu";
@@ -214,6 +214,7 @@ export class Map extends L.Map {
         this.addVisibilityOption(SHOW_UNIT_PATHS, true);
         this.addVisibilityOption(SHOW_UNIT_TARGETS, true);
         this.addVisibilityOption(SHOW_UNIT_LABELS, true);
+        this.addVisibilityOption(SHOW_UNITS_RINGS, true);
     }
 
     addVisibilityOption(option: string, defaultValue: boolean) {

client/src/other/utils.ts

@@ -208,12 +208,10 @@ export function nmToM(nm: number) {
     return nm / 0.000539957;
 }
 
-
 export function nmToFt(nm: number) {
     return nm * 6076.12;
 }
 
-
 export function polyContains(latlng: LatLng, polygon: Polygon) {
     var poly   = polygon.toGeoJSON();
     return turf.inside(turf.point([latlng.lng, latlng.lat]), poly);

client/src/unit/unit.ts

@@ -87,7 +87,8 @@ export class Unit extends CustomMarker {
     #pathMarkers: Marker[] = [];
     #pathPolyline: Polyline;
     #contactsPolylines: Polyline[] = [];
-    #rangeRingCircles: Circle[] = [];
+    #engagementCircle: Circle;
+    #acquisitionCircle: Circle;
     #miniMapMarker: CircleMarker | null = null;
     #targetPositionMarker: TargetMarker;
     #targetPositionPolyline: Polyline;
@@ -151,6 +152,8 @@ export class Unit extends CustomMarker {
         this.#pathPolyline.addTo(getApp().getMap());
         this.#targetPositionMarker = new TargetMarker(new LatLng(0, 0));
         this.#targetPositionPolyline = new Polyline([], { color: '#FF0000', weight: 3, opacity: 0.5, smoothFactor: 1 });
+        this.#engagementCircle = new Circle(this.getPosition(), { radius: 0, weight: 4, opacity: 0.5, fillOpacity: 0, dashArray: "4 8" });
+        this.#acquisitionCircle = new Circle(this.getPosition(), { radius: 0, weight: 1, opacity: 0.5, fillOpacity: 0, dashArray: "8 4 2 4 2 4" });
 
         this.on('click', (e) => this.#onClick(e));
         this.on('dblclick', (e) => this.#onDoubleClick(e));
@@ -178,8 +181,12 @@ export class Unit extends CustomMarker {
 
         document.addEventListener("mapVisibilityOptionsChanged", (ev: CustomEventInit) => {
             this.#updateMarker();
-            if (this.getSelected())
+            if (this.getSelected()) {
                 this.drawLines();
+                this.#drawRanges();
+            } else {
+                this.#clearRanges();
+            }
         });
     }
 
@@ -249,10 +256,12 @@ export class Unit extends CustomMarker {
     }
 
     drawLines() {
-        this.#drawPath();
+        /* Leaflet does not like it when you change coordinates when the map is zooming */
-        this.#drawContacts();
+        if (!getApp().getMap().isZooming()) {
-        this.#drawRanges();
+            this.#drawPath();
-        this.#drawTarget();
+            this.#drawContacts();
+            this.#drawTarget();
+        }
     }
 
     getData(): UnitData {
@@ -340,6 +349,7 @@ export class Unit extends CustomMarker {
             }
             else {
                 this.#clearContacts();
+                this.#clearRanges();
                 this.#clearPath();
                 this.#clearTarget();
             }
@@ -1048,6 +1058,41 @@ export class Unit extends CustomMarker {
             /* Set vertical offset for altitude stacking */
             var pos = getApp().getMap().latLngToLayerPoint(this.getLatLng()).round();
             this.setZIndexOffset(1000 + Math.floor(this.#position.alt as number) - pos.y + (this.#highlighted || this.#selected ? 5000 : 0));
+
+            /* Circles don't like to be updated when the map is zooming */
+            if (!getApp().getMap().isZooming()) {
+                var engagementRange = 0;
+                var acquisitionRange = 0;
+
+                /* Get the acquisition and engagement ranges of the entire group, not for each unit */
+                if (this.getIsLeader()) {
+                    var engagementRange = this.getDatabase()?.getByName(this.getName())?.engagementRange?? 0;
+                    var acquisitionRange = this.getDatabase()?.getByName(this.getName())?.acquisitionRange?? 0;
+
+                    this.getGroupMembers().forEach((unit: Unit) => {
+                        let unitEngagementRange = unit.getDatabase()?.getByName(unit.getName())?.engagementRange?? 0;
+                        let unitAcquisitionRange = unit.getDatabase()?.getByName(unit.getName())?.acquisitionRange?? 0;
+
+                        if (unitEngagementRange > engagementRange)
+                            engagementRange = unitEngagementRange;
+
+                        if (unitAcquisitionRange > acquisitionRange)
+                            acquisitionRange = unitAcquisitionRange;
+                    })
+                }
+   
+                if (engagementRange !== this.#engagementCircle.getRadius())
+                    this.#engagementCircle.setRadius(engagementRange);
+
+                if (acquisitionRange !== this.#acquisitionCircle.getRadius())
+                    this.#acquisitionCircle.setRadius(acquisitionRange);
+                
+                
+                if (this.getSelected())
+                    this.#drawRanges();
+                else
+                    this.#clearRanges();
+            }
         }
     }
 
@@ -1134,29 +1179,39 @@ export class Unit extends CustomMarker {
         }
     }
 
-    #drawRanges() {
-        this.#clearRanges();
-        if (getApp().getMap().getVisibilityOptions()[SHOW_UNITS_RINGS]) {
-            var engagementRange = this.getDatabase()?.getByName(this.getName())?.engagementRange;
-            var acquisitionRange = this.getDatabase()?.getByName(this.getName())?.acquisitionRange
-            if (engagementRange) {
-                var rangeCircle = new Circle(this.getPosition(), { radius: nmToM(engagementRange), color: "#FF0000", weight: 3, opacity: 1 });
-                rangeCircle.addTo(getApp().getMap());
-                this.#rangeRingCircles.push(rangeCircle)
-            }
-        }
-    }
-
     #clearContacts() {
         for (let index in this.#contactsPolylines) {
             getApp().getMap().removeLayer(this.#contactsPolylines[index])
         }
     }
 
-    #clearRanges() {
+    #drawRanges() {
-        for (let index in this.#rangeRingCircles) {
+        if (getApp().getMap().getVisibilityOptions()[SHOW_UNITS_RINGS] && this.getIsLeader()) {
-            getApp().getMap().removeLayer(this.#rangeRingCircles[index])
+            if (!getApp().getMap().hasLayer(this.#acquisitionCircle)) {
+                this.#acquisitionCircle.addTo(getApp().getMap());
+                this.#acquisitionCircle.options.color = this.getCoalition() == "red" ? "#FFAAAA": "#AAAAFF";
+            }
+            
+            this.#acquisitionCircle.setLatLng(this.getPosition());
+
+            if (!getApp().getMap().hasLayer(this.#engagementCircle)) {
+                this.#engagementCircle.addTo(getApp().getMap());
+                this.#engagementCircle.options.color = this.getCoalition();
+            }
+            
+            this.#engagementCircle.setLatLng(this.getPosition());
         }
+        else {
+            this.#clearRanges();
+        }
+    }
+
+    #clearRanges() {
+        if (getApp().getMap().hasLayer(this.#acquisitionCircle))
+            this.#acquisitionCircle.removeFrom(getApp().getMap());
+
+        if (getApp().getMap().hasLayer(this.#engagementCircle))
+            this.#engagementCircle.removeFrom(getApp().getMap());
     }
 
     #drawTarget() {

scripts/python/addRanges.py

@@ -8,7 +8,8 @@ SEARCH_FOLDER = "D:\\Eagle Dynamics\\DCS World OpenBeta"
 
 sys.path.append("..\..\..\dcs-master\dcs-master")
 
-from dcs.weapons_data import Weapons
+from dcs.vehicles import *
+from dcs.ships import *
 from dcs.planes import *
 from dcs.helicopters import *
         
@@ -26,8 +27,6 @@ if len(sys.argv) > 1:
     # Loads the database 
     with open(filename) as f:
         database = json.load(f)
-        for unit_name in database:
-            database[unit_name]["enabled"] = True
     
     # Loop on all the units in the database
     for unit_name in database:
@@ -50,6 +49,9 @@ if len(sys.argv) > 1:
                 print(f"Warning, could not find {unit_name} in classes list. Skipping...")
                 continue
 
+            database[unit_name]["acquisitionRange"] = unitmap[found_name].detection_range
+            database[unit_name]["engagementRange"] = unitmap[found_name].threat_range
+
         except Exception as e:
             print(f"Could not find data for aircraft of type {unit_name}: {e}, skipping...")