Completed advanced settings panel for tanker and AWACS

Reformatted files with larger width, reordered unused icons
2025-10-29 16:56:34 +00:00 · 2024-08-07 15:32:39 +02:00
parent bc5049992a
commit 224dc5a688
158 changed files with 5813 additions and 6404 deletions
--- a/frontend/react/src/map/boxselect.ts
+++ b/frontend/react/src/map/boxselect.ts
@@ -53,10 +53,7 @@ export var BoxSelect = Handler.extend({
  },

  _onMouseDown: function (e: any) {
-    if (
-      (e.which == 1 && e.button == 0 && (e.shiftKey || this._forceBoxSelect)) ||
-      (e.type === "touchstart" && this._forceBoxSelect)
-    ) {
+    if ((e.which == 1 && e.button == 0 && (e.shiftKey || this._forceBoxSelect)) || (e.type === "touchstart" && this._forceBoxSelect)) {
      this._map.fire("selectionstart");
      // Clear the deferred resetState if it hasn't executed yet, otherwise it
      // will interrupt the interaction and orphan a box element in the container.
@@ -67,10 +64,8 @@ export var BoxSelect = Handler.extend({
      DomUtil.disableImageDrag();
      this._map.dragging.disable();

-      if (e.type === "touchstart")
-        this._startPoint = this._map.mouseEventToContainerPoint(e.touches[0]);
-      else
-        this._startPoint = this._map.mouseEventToContainerPoint(e);
+      if (e.type === "touchstart") this._startPoint = this._map.mouseEventToContainerPoint(e.touches[0]);
+      else this._startPoint = this._map.mouseEventToContainerPoint(e);

      DomEvent.on(
        //@ts-ignore
@@ -101,10 +96,8 @@ export var BoxSelect = Handler.extend({
      this._map.fire("boxzoomstart");
    }

-    if (e.type === "touchmove")
-      this._point = this._map.mouseEventToContainerPoint(e.touches[0]);
-    else
-      this._point = this._map.mouseEventToContainerPoint(e);
+    if (e.type === "touchmove") this._point = this._map.mouseEventToContainerPoint(e.touches[0]);
+    else this._point = this._map.mouseEventToContainerPoint(e);

    var bounds = new Bounds(this._point, this._startPoint),
      size = bounds.getSize();
@@ -154,10 +147,7 @@ export var BoxSelect = Handler.extend({
    // Postpone to next JS tick so internal click event handling
    // still see it as "moved".
    window.setTimeout(Util.bind(this._resetState, this), 0);
-    var bounds = new LatLngBounds(
-      this._map.containerPointToLatLng(this._startPoint),
-      this._map.containerPointToLatLng(this._point)
-    );
+    var bounds = new LatLngBounds(this._map.containerPointToLatLng(this._startPoint), this._map.containerPointToLatLng(this._point));

    this._forceBoxSelect = false;
    this._map.fire("selectionend", { selectionBounds: bounds });
--- a/frontend/react/src/map/coalitionarea/coalitionarea.ts
+++ b/frontend/react/src/map/coalitionarea/coalitionarea.ts
@@ -1,5 +0,0 @@
-const CoalitionArea = Base => class extends Base {
-
-}
-
-export CoalitionArea;
--- a/frontend/react/src/map/coalitionarea/coalitionareahandle.ts
+++ b/frontend/react/src/map/coalitionarea/coalitionareahandle.ts
@@ -7,7 +7,7 @@ export class CoalitionAreaHandle extends CustomMarker {

    this.on("add", (e) => {
      this.getElement()?.addEventListener("touchstart", (e) => e.stopPropagation());
-    })
+    });
  }

  createIcon() {
--- a/frontend/react/src/map/coalitionarea/coalitioncircle.ts
+++ b/frontend/react/src/map/coalitionarea/coalitioncircle.ts
@@ -1,12 +1,4 @@
-import {
-  LatLngExpression,
-  Map,
-  Circle,
-  DivIcon,
-  Marker,
-  CircleOptions,
-  LatLng,
-} from "leaflet";
+import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng } from "leaflet";
 import { getApp } from "../../olympusapp";
 import { CoalitionAreaHandle } from "./coalitionareahandle";
 import { BLUE_COMMANDER, RED_COMMANDER } from "../../constants/constants";
@@ -38,11 +30,7 @@ export class CoalitionCircle extends Circle {

    this.#labelText = `Circle ${totalAreas}`;

-    if (
-      [BLUE_COMMANDER, RED_COMMANDER].includes(
-        getApp().getMissionManager().getCommandModeOptions().commandMode
-      )
-    )
+    if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
      this.setCoalition(getApp().getMissionManager().getCommandedCoalition());

    this.on("drag", () => {
@@ -129,14 +117,8 @@ export class CoalitionCircle extends Circle {
    if (this.#radiusHandle) this.#radiusHandle.removeFrom(getApp().getMap());

    if (this.#selected) {
-      const dest = turf.destination(
-        turf.point([this.getLatLng().lng, this.getLatLng().lat]),
-        this.getRadius() / 1000,
-        0
-      );
-      this.#radiusHandle = new CoalitionAreaHandle(
-        new LatLng(dest.geometry.coordinates[1], dest.geometry.coordinates[0])
-      );
+      const dest = turf.destination(turf.point([this.getLatLng().lng, this.getLatLng().lat]), this.getRadius() / 1000, 0);
+      this.#radiusHandle = new CoalitionAreaHandle(new LatLng(dest.geometry.coordinates[1], dest.geometry.coordinates[0]));
      this.#radiusHandle.addTo(getApp().getMap());
      this.#radiusHandle.on("drag", (e: any) => {
        this.setRadius(this.getLatLng().distanceTo(e.latlng));
@@ -156,11 +138,6 @@ export class CoalitionCircle extends Circle {
      }),
      interactive: false,
    }).addTo(this._map);
-    this.#label
-      .getElement()
-      ?.classList.add(
-        `ol-coalitionarea-label`,
-        `${this.#selected ? "selected" : `${this.#coalition}`}`
-      );
+    this.#label.getElement()?.classList.add(`ol-coalitionarea-label`, `${this.#selected ? "selected" : `${this.#coalition}`}`);
  }
 }
--- a/frontend/react/src/map/coalitionarea/coalitionpolygon.ts
+++ b/frontend/react/src/map/coalitionarea/coalitionpolygon.ts
@@ -1,13 +1,4 @@
-import {
-  LatLng,
-  LatLngExpression,
-  Map,
-  Point,
-  Polygon,
-  PolylineOptions,
-  DivIcon,
-  Marker
-} from "leaflet";
+import { LatLng, LatLngExpression, Map, Point, Polygon, PolylineOptions, DivIcon, Marker } from "leaflet";
 import { getApp } from "../../olympusapp";
 import { CoalitionAreaHandle } from "./coalitionareahandle";
 import { CoalitionAreaMiddleHandle } from "./coalitionareamiddlehandle";
@@ -27,10 +18,7 @@ export class CoalitionPolygon extends Polygon {
  #labelText: string;
  #label: Marker;

-  constructor(
-    latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][],
-    options?: PolylineOptions
-  ) {
+  constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
    if (options === undefined) options = {};

    totalAreas++;
@@ -45,11 +33,7 @@ export class CoalitionPolygon extends Polygon {

    this.#labelText = `Polygon ${totalAreas}`;

-    if (
-      [BLUE_COMMANDER, RED_COMMANDER].includes(
-        getApp().getMissionManager().getCommandModeOptions().commandMode
-      )
-    )
+    if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
      this.setCoalition(getApp().getMissionManager().getCommandedCoalition());

    this.on("drag", () => {
@@ -130,17 +114,11 @@ export class CoalitionPolygon extends Polygon {

  onRemove(map: Map): this {
    super.onRemove(map);
-    this.#handles
-      .concat(this.#middleHandles)
-      .forEach((handle: CoalitionAreaHandle | CoalitionAreaMiddleHandle) =>
-        handle.removeFrom(getApp().getMap())
-      );
+    this.#handles.concat(this.#middleHandles).forEach((handle: CoalitionAreaHandle | CoalitionAreaMiddleHandle) => handle.removeFrom(getApp().getMap()));
    return this;
  }

-  setLatLngs(
-    latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]
-  ) {
+  setLatLngs(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]) {
    super.setLatLngs(latlngs);
    this.#drawLabel();
    return this;
@@ -158,9 +136,7 @@ export class CoalitionPolygon extends Polygon {
  }

  #setHandles() {
-    this.#handles.forEach((handle: CoalitionAreaHandle) =>
-      handle.removeFrom(getApp().getMap())
-    );
+    this.#handles.forEach((handle: CoalitionAreaHandle) => handle.removeFrom(getApp().getMap()));
    this.#handles = [];
    if (this.getSelected()) {
      var latlngs = this.getLatLngs()[0] as LatLng[];
@@ -181,9 +157,7 @@ export class CoalitionPolygon extends Polygon {
  }

  #setMiddleHandles() {
-    this.#middleHandles.forEach((handle: CoalitionAreaMiddleHandle) =>
-      handle.removeFrom(getApp().getMap())
-    );
+    this.#middleHandles.forEach((handle: CoalitionAreaMiddleHandle) => handle.removeFrom(getApp().getMap()));
    this.#middleHandles = [];
    var latlngs = this.getLatLngs()[0] as LatLng[];
    if (this.getSelected() && latlngs.length >= 2) {
@@ -193,13 +167,8 @@ export class CoalitionPolygon extends Polygon {
        if (lastLatLng != null) {
          const handle1Point = getApp().getMap().latLngToLayerPoint(latlng);
          const handle2Point = getApp().getMap().latLngToLayerPoint(lastLatLng);
-          const middlePoint = new Point(
-            (handle1Point.x + handle2Point.x) / 2,
-            (handle1Point.y + handle2Point.y) / 2
-          );
-          const middleLatLng = getApp()
-            .getMap()
-            .layerPointToLatLng(middlePoint);
+          const middlePoint = new Point((handle1Point.x + handle2Point.x) / 2, (handle1Point.y + handle2Point.y) / 2);
+          const middleLatLng = getApp().getMap().layerPointToLatLng(middlePoint);

          const middleHandle = new CoalitionAreaMiddleHandle(middleLatLng);
          middleHandle.addTo(getApp().getMap());
@@ -228,12 +197,7 @@ export class CoalitionPolygon extends Polygon {
        }),
        interactive: false,
      }).addTo(this._map);
-      this.#label
-        .getElement()
-        ?.classList.add(
-          `ol-coalitionarea-label`,
-          `${this.#selected ? "selected" : `${this.#coalition}`}`
-        );
+      this.#label.getElement()?.classList.add(`ol-coalitionarea-label`, `${this.#selected ? "selected" : `${this.#coalition}`}`);
    }
  }
 }
--- a/frontend/react/src/map/coalitionarea/draggablepath.ts
+++ b/frontend/react/src/map/coalitionarea/draggablepath.ts
@@ -1,6 +1,4 @@
-import * as L from "leaflet";
-
-export const initDraggablePath = () => {
+export const initDraggablePath = (L) => {
  //@ts-ignore
  L.PathDraggable = L.Draggable.extend({
    initialize: function (path) {
@@ -8,9 +6,7 @@ export const initDraggablePath = () => {

      this._canvas = path._map.getRenderer(path) instanceof L.Canvas;

-      var element = this._canvas
-        ? this._path._map.getRenderer(this._path)._container
-        : this._path._path;
+      var element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path;

      //@ts-ignore
      L.Draggable.prototype.initialize.call(this, element, element, true);
@@ -27,12 +23,7 @@ export const initDraggablePath = () => {

      this._startPoint = new L.Point(first.clientX, first.clientY);

-      if (
-        this._canvas &&
-        !this._path._containsPoint(
-          this._path._map.mouseEventToLayerPoint(first)
-        )
-      ) {
+      if (this._canvas && !this._path._containsPoint(this._path._map.mouseEventToLayerPoint(first))) {
        return;
      }

@@ -87,10 +78,7 @@ export const initDraggablePath = () => {

    _onDrag: function (e) {
      var path = this._path,
-        event =
-          e.originalEvent.touches && e.originalEvent.touches.length === 1
-            ? e.originalEvent.touches[0]
-            : e.originalEvent,
+        event = e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent,
        newPoint = L.point(event.clientX, event.clientY),
        latlng = path._map.layerPointToLatLng(newPoint);

@@ -108,9 +96,7 @@ export const initDraggablePath = () => {

      path.fire("drag", e);

-      e.latlng = this._path.getCenter
-        ? this._path.getCenter()
-        : this._path.getLatLng();
+      e.latlng = this._path.getCenter ? this._path.getCenter() : this._path.getLatLng();

      path.fire("move", e);
    },
--- a/frontend/react/src/map/map.ts
+++ b/frontend/react/src/map/map.ts
@@ -3,12 +3,7 @@ import { getApp } from "../olympusapp";
 import { BoxSelect } from "./boxselect";
 import { Airbase } from "../mission/airbase";
 import { Unit } from "../unit/unit";
-import {
-  areaContains,
-  deg2rad,
-  getFunctionArguments,
-  getGroundElevation,
-} from "../other/utils";
+import { areaContains, deg2rad, getFunctionArguments, getGroundElevation } from "../other/utils";
 import { TemporaryUnitMarker } from "./markers/temporaryunitmarker";
 import { ClickableMiniMap } from "./clickableminimap";
 import {
@@ -38,18 +33,12 @@ import "./map.css";
 import { CoalitionCircle } from "./coalitionarea/coalitioncircle";

 import { initDraggablePath } from "./coalitionarea/draggablepath";
-import {
-  faComputerMouse,
-  faDrawPolygon,
-  faHandPointer,
-  faJetFighter,
-  faMap,
-} from "@fortawesome/free-solid-svg-icons";
+import { faComputerMouse, faDrawPolygon, faHandPointer, faJetFighter, faMap } from "@fortawesome/free-solid-svg-icons";

 /* Register the handler for the box selection */
 L.Map.addInitHook("addHandler", "boxSelect", BoxSelect);

-initDraggablePath();
+initDraggablePath(L);

 export class Map extends L.Map {
  /* Options */
@@ -141,10 +130,10 @@ export class Map extends L.Map {
    this.setView([37.23, -115.8], 10);

    /* Minimap */
-    var minimapLayer = new L.TileLayer(
-      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-      { minZoom: 0, maxZoom: 13 }
-    );
+    var minimapLayer = new L.TileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
+      minZoom: 0,
+      maxZoom: 13,
+    });
    this.#miniMapLayerGroup = new L.LayerGroup([minimapLayer]);
    this.#miniMapPolyline = new L.Polyline([], { color: "#202831" });
    this.#miniMapPolyline.addTo(this.#miniMapLayerGroup);
@@ -181,15 +170,11 @@ export class Map extends L.Map {

    /* Event listeners */
    document.addEventListener("hiddenTypesChanged", (ev: CustomEventInit) => {
-      Object.values(getApp().getUnitsManager().getUnits()).forEach(
-        (unit: Unit) => unit.updateVisibility()
-      );
-      Object.values(getApp().getMissionManager().getAirbases()).forEach(
-        (airbase: Airbase) => {
-          if (this.getHiddenTypes().airbase) airbase.removeFrom(this);
-          else airbase.addTo(this);
-        }
-      );
+      Object.values(getApp().getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
+      Object.values(getApp().getMissionManager().getAirbases()).forEach((airbase: Airbase) => {
+        if (this.getHiddenTypes().airbase) airbase.removeFrom(this);
+        else airbase.addTo(this);
+      });
    });

    //document.addEventListener("unitUpdated", (ev: CustomEvent) => {
@@ -198,10 +183,7 @@ export class Map extends L.Map {
    //});

    document.addEventListener("mapOptionsChanged", () => {
-      this.getContainer().toggleAttribute(
-        "data-hide-labels",
-        !this.getOptions().showUnitLabels
-      );
+      this.getContainer().toggleAttribute("data-hide-labels", !this.getOptions().showUnitLabels);
      //this.#cameraControlPort = this.getOptions()[DCS_LINK_PORT] as number;
      //this.#cameraZoomRatio = 50 / (20 + (this.getOptions()[DCS_LINK_RATIO] as number));

@@ -263,12 +245,8 @@ export class Map extends L.Map {
      if (this.#panUp || this.#panDown || this.#panRight || this.#panLeft)
        this.panBy(
          new L.Point(
-            ((this.#panLeft ? -1 : 0) + (this.#panRight ? 1 : 0)) *
-              this.defaultPanDelta *
-              (this.#isShiftKeyDown ? 3 : 1),
-            ((this.#panUp ? -1 : 0) + (this.#panDown ? 1 : 0)) *
-              this.defaultPanDelta *
-              (this.#isShiftKeyDown ? 3 : 1)
+            ((this.#panLeft ? -1 : 0) + (this.#panRight ? 1 : 0)) * this.defaultPanDelta * (this.#isShiftKeyDown ? 3 : 1),
+            ((this.#panUp ? -1 : 0) + (this.#panDown ? 1 : 0)) * this.defaultPanDelta * (this.#isShiftKeyDown ? 3 : 1)
          )
        );
    }, 20);
@@ -289,10 +267,7 @@ export class Map extends L.Map {
      const layerData = this.#mapLayers[layerName];
      if (layerData instanceof Array) {
        let layers = layerData.map((layer: any) => {
-          return new L.TileLayer(
-            layer.urlTemplate.replace("{theatre}", theatre.toLowerCase()),
-            layer
-          );
+          return new L.TileLayer(layer.urlTemplate.replace("{theatre}", theatre.toLowerCase()), layer);
        });
        this.#layer = new L.LayerGroup(layers);
        this.#layer?.addTo(this);
@@ -306,13 +281,10 @@ export class Map extends L.Map {
      let layers: L.TileLayer[] = [];

      layers.push(
-        new L.TileLayer(
-          "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-          {
-            minZoom: 1,
-            maxZoom: 19,
-          }
-        )
+        new L.TileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
+          minZoom: 1,
+          maxZoom: 19,
+        })
      );

      /* Load the configuration file */
@@ -348,9 +320,7 @@ export class Map extends L.Map {
    }
    this.#layerName = layerName;

-    document.dispatchEvent(
-      new CustomEvent("mapSourceChanged", { detail: layerName })
-    );
+    document.dispatchEvent(new CustomEvent("mapSourceChanged", { detail: layerName }));
  }

  getLayerName() {
@@ -372,11 +342,7 @@ export class Map extends L.Map {
    console.log(`Switching from state ${this.#state} to ${state}`);

    /* Operations to perform when leaving a state */
-    if (
-      this.#state === COALITIONAREA_DRAW_POLYGON ||
-      this.#state === COALITIONAREA_DRAW_CIRCLE
-    )
-      this.getSelectedCoalitionArea()?.setEditing(false);
+    if (this.#state === COALITIONAREA_DRAW_POLYGON || this.#state === COALITIONAREA_DRAW_CIRCLE) this.getSelectedCoalitionArea()?.setEditing(false);

    this.#state = state;

@@ -400,15 +366,11 @@ export class Map extends L.Map {
      this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
    } else if (this.#state === COALITIONAREA_DRAW_CIRCLE) {
      getApp().getUnitsManager().deselectAllUnits();
-      this.#coalitionAreas.push(
-        new CoalitionCircle(new L.LatLng(0, 0), { radius: 1000 })
-      );
+      this.#coalitionAreas.push(new CoalitionCircle(new L.LatLng(0, 0), { radius: 1000 }));
      this.#coalitionAreas[this.#coalitionAreas.length - 1].addTo(this);
    }

-    document.dispatchEvent(
-      new CustomEvent("mapStateChanged", { detail: this.#state })
-    );
+    document.dispatchEvent(new CustomEvent("mapStateChanged", { detail: this.#state }));
  }

  getState() {
@@ -449,10 +411,7 @@ export class Map extends L.Map {
          text: "Spawn unit",
        },
        {
-          actions: [
-            touch ? faHandPointer : faComputerMouse,
-            touch ? faHandPointer : faComputerMouse,
-          ],
+          actions: [touch ? faHandPointer : faComputerMouse, touch ? faHandPointer : faComputerMouse],
          target: faMap,
          text: "Exit spawn mode",
        },
@@ -465,10 +424,7 @@ export class Map extends L.Map {
    } else if (this.#state === CONTEXT_ACTION) {
      let controls = [
        {
-          actions: [
-            touch ? faHandPointer : faComputerMouse,
-            touch ? faHandPointer : faComputerMouse,
-          ],
+          actions: [touch ? faHandPointer : faComputerMouse, touch ? faHandPointer : faComputerMouse],
          target: faMap,
          text: "Deselect units",
        },
@@ -498,10 +454,7 @@ export class Map extends L.Map {
          text: "Select shape",
        },
        {
-          actions: [
-            touch ? faHandPointer : faComputerMouse,
-            touch ? faHandPointer : faComputerMouse,
-          ],
+          actions: [touch ? faHandPointer : faComputerMouse, touch ? faHandPointer : faComputerMouse],
          target: faMap,
          text: "Exit drawing mode",
        },
@@ -519,10 +472,7 @@ export class Map extends L.Map {
          text: "Add vertex to polygon",
        },
        {
-          actions: [
-            touch ? faHandPointer : faComputerMouse,
-            touch ? faHandPointer : faComputerMouse,
-          ],
+          actions: [touch ? faHandPointer : faComputerMouse, touch ? faHandPointer : faComputerMouse],
          target: faMap,
          text: "Finalize polygon",
        },
@@ -557,18 +507,11 @@ export class Map extends L.Map {
      })
    );

-    this.#coalitionAreas.forEach(
-      (coalitionArea: CoalitionPolygon | CoalitionCircle) =>
-        coalitionArea.setSelected(false)
-    );
+    this.#coalitionAreas.forEach((coalitionArea: CoalitionPolygon | CoalitionCircle) => coalitionArea.setSelected(false));
  }

  deleteCoalitionArea(coalitionArea: CoalitionPolygon | CoalitionCircle) {
-    if (this.#coalitionAreas.includes(coalitionArea))
-      this.#coalitionAreas.splice(
-        this.#coalitionAreas.indexOf(coalitionArea),
-        1
-      );
+    if (this.#coalitionAreas.includes(coalitionArea)) this.#coalitionAreas.splice(this.#coalitionAreas.indexOf(coalitionArea), 1);

    if (this.hasLayer(coalitionArea)) this.removeLayer(coalitionArea);
  }
@@ -617,9 +560,7 @@ export class Map extends L.Map {
    this.updateMinimap();

    const boundaries = this.#getMinimapBoundaries();
-    this.#miniMapPolyline.setLatLngs(
-      boundaries[theatre as keyof typeof boundaries]
-    );
+    this.#miniMapPolyline.setLatLngs(boundaries[theatre as keyof typeof boundaries]);

    this.setLayerName(this.#layerName);
  }
@@ -697,12 +638,7 @@ export class Map extends L.Map {
    }
  }

-  addTemporaryMarker(
-    latlng: L.LatLng,
-    name: string,
-    coalition: string,
-    commandHash?: string
-  ) {
+  addTemporaryMarker(latlng: L.LatLng, name: string, coalition: string, commandHash?: string) {
    var marker = new TemporaryUnitMarker(latlng, name, coalition, commandHash);
    marker.addTo(this);
    this.#temporaryMarkers.push(marker);
@@ -710,11 +646,9 @@ export class Map extends L.Map {
  }

  getSelectedCoalitionArea() {
-    const coalitionArea = this.#coalitionAreas.find(
-      (coalitionArea: CoalitionPolygon | CoalitionCircle) => {
-        return coalitionArea.getSelected();
-      }
-    );
+    const coalitionArea = this.#coalitionAreas.find((coalitionArea: CoalitionPolygon | CoalitionCircle) => {
+      return coalitionArea.getSelected();
+    });

    return coalitionArea ?? null;
  }
@@ -794,10 +728,7 @@ export class Map extends L.Map {
    //}
  }

-  executeContextAction(
-    targetUnit: Unit | null,
-    targetPosition: L.LatLng | null
-  ) {
+  executeContextAction(targetUnit: Unit | null, targetPosition: L.LatLng | null) {
    this.#contextAction?.executeCallback(targetUnit, targetPosition);
  }

@@ -847,8 +778,7 @@ export class Map extends L.Map {

    this.#longPressTimer = window.setTimeout(() => {
      /* If the mouse is still being pressed, execute the long press action */
-      if (this.#isMouseDown && !this.#isDragging && !this.#isZooming)
-        this.#onLongPress(e);
+      if (this.#isMouseDown && !this.#isDragging && !this.#isZooming) this.#onLongPress(e);
    }, 500);
  }

@@ -858,10 +788,7 @@ export class Map extends L.Map {
    window.clearTimeout(this.#shortPressTimer);
    window.clearTimeout(this.#longPressTimer);

-    if (
-      this.#state === COALITIONAREA_DRAW_POLYGON ||
-      this.#state === COALITIONAREA_DRAW_CIRCLE
-    ) {
+    if (this.#state === COALITIONAREA_DRAW_POLYGON || this.#state === COALITIONAREA_DRAW_CIRCLE) {
      this.setState(COALITIONAREA_EDIT);
    } else {
      this.setState(IDLE);
@@ -870,10 +797,7 @@ export class Map extends L.Map {

  #onShortPress(e: any) {
    let touchLocation: L.LatLng;
-    if (e.type === "touchstart")
-      touchLocation = this.containerPointToLatLng(
-        this.mouseEventToContainerPoint(e.touches[0])
-      );
+    if (e.type === "touchstart") touchLocation = this.containerPointToLatLng(this.mouseEventToContainerPoint(e.touches[0]));
    else touchLocation = new L.LatLng(e.latlng.lat, e.latlng.lng);

    console.log(`Short press at ${touchLocation}`);
@@ -893,12 +817,7 @@ export class Map extends L.Map {
            undefined,
            undefined,
            (hash) => {
-              this.addTemporaryMarker(
-                touchLocation,
-                this.#spawnRequestTable?.unit.unitType ?? "unknown",
-                this.#spawnRequestTable?.coalition ?? "blue",
-                hash
-              );
+              this.addTemporaryMarker(touchLocation, this.#spawnRequestTable?.unit.unitType ?? "unknown", this.#spawnRequestTable?.coalition ?? "blue", hash);
            }
          );
      }
@@ -910,11 +829,7 @@ export class Map extends L.Map {
    } else if (this.#state === COALITIONAREA_DRAW_CIRCLE) {
      const selectedArea = this.getSelectedCoalitionArea();
      if (selectedArea && selectedArea instanceof CoalitionCircle) {
-        if (
-          selectedArea.getLatLng().lat == 0 &&
-          selectedArea.getLatLng().lng == 0
-        )
-          selectedArea.setLatLng(touchLocation);
+        if (selectedArea.getLatLng().lat == 0 && selectedArea.getLatLng().lng == 0) selectedArea.setLatLng(touchLocation);
        this.setState(COALITIONAREA_EDIT);
      }
    } else if (this.#state == COALITIONAREA_EDIT) {
@@ -938,10 +853,7 @@ export class Map extends L.Map {

  #onLongPress(e: any) {
    let touchLocation: L.LatLng;
-    if (e.type === "touchstart")
-      touchLocation = this.containerPointToLatLng(
-        this.mouseEventToContainerPoint(e.touches[0])
-      );
+    if (e.type === "touchstart") touchLocation = this.containerPointToLatLng(this.mouseEventToContainerPoint(e.touches[0]));
    else touchLocation = new L.LatLng(e.latlng.lat, e.latlng.lng);

    console.log(`Long press at ${touchLocation}`);
@@ -949,14 +861,8 @@ export class Map extends L.Map {
    if (!this.#isDragging && !this.#isZooming) {
      this.deselectAllCoalitionAreas();
      if (this.#state === IDLE) {
-        if (e.type === "touchstart")
-          document.dispatchEvent(
-            new CustomEvent("mapForceBoxSelect", { detail: e })
-          );
-        else
-          document.dispatchEvent(
-            new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent })
-          );
+        if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e }));
+        else document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent }));
      }
    }
  }
@@ -996,11 +902,7 @@ export class Map extends L.Map {
  }

  #broadcastPosition() {
-    if (
-      this.#bradcastPositionXmlHttp?.readyState !== 4 &&
-      this.#bradcastPositionXmlHttp !== null
-    )
-      return;
+    if (this.#bradcastPositionXmlHttp?.readyState !== 4 && this.#bradcastPositionXmlHttp !== null) return;

    getGroundElevation(this.getCenter(), (response: string) => {
      var groundElevation: number | null = null;
@@ -1009,18 +911,12 @@ export class Map extends L.Map {
        this.#bradcastPositionXmlHttp = new XMLHttpRequest();
        /* Using 127.0.0.1 instead of localhost because the LuaSocket version used in DCS only listens to IPv4. This avoids the lag caused by the
                browser if it first tries to send the request on the IPv6 address for localhost */
-        this.#bradcastPositionXmlHttp.open(
-          "POST",
-          `http://127.0.0.1:${this.#cameraControlPort}`
-        );
+        this.#bradcastPositionXmlHttp.open("POST", `http://127.0.0.1:${this.#cameraControlPort}`);

        const C = 40075016.686;
-        let mpp =
-          (C * Math.cos(deg2rad(this.getCenter().lat))) /
-          Math.pow(2, this.getZoom() + 8);
+        let mpp = (C * Math.cos(deg2rad(this.getCenter().lat))) / Math.pow(2, this.getZoom() + 8);
        let d = mpp * 1920;
-        let alt =
-          (((d / 2) * 1) / Math.tan(deg2rad(40))) * this.#cameraZoomRatio;
+        let alt = (((d / 2) * 1) / Math.tan(deg2rad(40))) * this.#cameraZoomRatio;
        alt = Math.min(alt, 50000);
        this.#bradcastPositionXmlHttp.send(
          JSON.stringify({
@@ -1038,10 +934,7 @@ export class Map extends L.Map {

  /* */
  #panToUnit(unit: Unit) {
-    var unitPosition = new L.LatLng(
-      unit.getPosition().lat,
-      unit.getPosition().lng
-    );
+    var unitPosition = new L.LatLng(unit.getPosition().lat, unit.getPosition().lng);
    this.setView(unitPosition, this.getZoom(), { animate: false });
  }

@@ -1067,23 +960,15 @@ export class Map extends L.Map {

  /* Check if the camera control plugin is available. Right now this will only change the color of the button, no changes in functionality */
  #checkCameraPort() {
-    if (this.#cameraOptionsXmlHttp?.readyState !== 4)
-      this.#cameraOptionsXmlHttp?.abort();
+    if (this.#cameraOptionsXmlHttp?.readyState !== 4) this.#cameraOptionsXmlHttp?.abort();

    this.#cameraOptionsXmlHttp = new XMLHttpRequest();

    /* Using 127.0.0.1 instead of localhost because the LuaSocket version used in DCS only listens to IPv4. This avoids the lag caused by the
        browser if it first tries to send the request on the IPv6 address for localhost */
-    this.#cameraOptionsXmlHttp.open(
-      "OPTIONS",
-      `http://127.0.0.1:${this.#cameraControlPort}`
-    );
+    this.#cameraOptionsXmlHttp.open("OPTIONS", `http://127.0.0.1:${this.#cameraControlPort}`);
    this.#cameraOptionsXmlHttp.onload = (res: any) => {
-      if (
-        this.#cameraOptionsXmlHttp !== null &&
-        this.#cameraOptionsXmlHttp.status == 204
-      )
-        this.#setSlaveDCSCameraAvailable(true);
+      if (this.#cameraOptionsXmlHttp !== null && this.#cameraOptionsXmlHttp.status == 204) this.#setSlaveDCSCameraAvailable(true);
      else this.#setSlaveDCSCameraAvailable(false);
    };
    this.#cameraOptionsXmlHttp.onerror = (res: any) => {
--- a/frontend/react/src/map/markers/smokemarker.ts
+++ b/frontend/react/src/map/markers/smokemarker.ts
@@ -6,11 +6,7 @@ import { getApp } from "../../olympusapp";
 export class SmokeMarker extends CustomMarker {
  #color: string;

-  constructor(
-    latlng: LatLngExpression,
-    color: string,
-    options?: MarkerOptions
-  ) {
+  constructor(latlng: LatLngExpression, color: string, options?: MarkerOptions) {
    super(latlng, options);
    this.setZIndexOffset(9999);
    this.#color = color;
--- a/frontend/react/src/map/markers/temporaryunitmarker.ts
+++ b/frontend/react/src/map/markers/temporaryunitmarker.ts
@@ -1,10 +1,7 @@
 import { CustomMarker } from "./custommarker";
 import { DivIcon, LatLng } from "leaflet";
 import { SVGInjector } from "@tanem/svg-injector";
-import {
-  getMarkerCategoryByName,
-  getUnitDatabaseByCategory,
-} from "../../other/utils";
+import { getMarkerCategoryByName, getUnitDatabaseByCategory } from "../../other/utils";
 import { getApp } from "../../olympusapp";

 export class TemporaryUnitMarker extends CustomMarker {
@@ -13,12 +10,7 @@ export class TemporaryUnitMarker extends CustomMarker {
  #commandHash: string | undefined = undefined;
  #timer: number = 0;

-  constructor(
-    latlng: LatLng,
-    name: string,
-    coalition: string,
-    commandHash?: string
-  ) {
+  constructor(latlng: LatLng, name: string, coalition: string, commandHash?: string) {
    super(latlng, { interactive: false });
    this.#name = name;
    this.#coalition = coalition;
@@ -45,9 +37,7 @@ export class TemporaryUnitMarker extends CustomMarker {

  createIcon() {
    const category = getMarkerCategoryByName(this.#name);
-    const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(
-      this.#name
-    );
+    const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(this.#name);

    /* Set the icon */
    var icon = new DivIcon({
--- a/frontend/react/src/map/rangecircle.ts
+++ b/frontend/react/src/map/rangecircle.ts
@@ -26,14 +26,8 @@ export class RangeCircle extends Circle {
    let pathBegun = false;
    let dtheta = (Math.PI * 2) / 120;
    for (let theta = 0; theta <= Math.PI * 2; theta += dtheta) {
-      let p1 = new Point(
-        p.x + r * Math.cos(theta),
-        p.y / s + r * Math.sin(theta)
-      );
-      let p2 = new Point(
-        p.x + r * Math.cos(theta + dtheta),
-        p.y / s + r * Math.sin(theta + dtheta)
-      );
+      let p1 = new Point(p.x + r * Math.cos(theta), p.y / s + r * Math.sin(theta));
+      let p2 = new Point(p.x + r * Math.cos(theta + dtheta), p.y / s + r * Math.sin(theta + dtheta));
      let l1 = this._map.layerPointToLatLng(p1);
      let l2 = this._map.layerPointToLatLng(p2);
      let line = new Polyline([l1, l2]);