From d35e6063e7e06eb70dd898180c86fe926237b8a4 Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Sat, 22 Mar 2025 10:21:08 +0100
Subject: [PATCH 1/2] feat(coordinates): added DDM format

---
 frontend/react/src/other/utils.ts             |  7 +++
 .../react/src/ui/components/ollocation.tsx    | 43 ++++++++++++++++++-
 frontend/react/src/ui/modals/keybindmodal.tsx |  6 +--
 frontend/react/src/ui/panels/jtacmenu.tsx     |  3 ++
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/frontend/react/src/other/utils.ts b/frontend/react/src/other/utils.ts
index df0b6577..d2b01d07 100644
--- a/frontend/react/src/other/utils.ts
+++ b/frontend/react/src/other/utils.ts
@@ -83,6 +83,13 @@ export function ConvertDDToDMS(D: number, lng: boolean) {
   else return zeroPad(deg, 2) + "°" + zeroPad(min, 2) + "'" + zeroPad(sec, 2) + "." + zeroPad(dec, 2) + '"';
 }
 
+export function DDToDDM(decimalDegrees) {
+  const degrees = Math.trunc(decimalDegrees);
+  const minutes = Math.abs((decimalDegrees - degrees) * 60);
+
+  return `${Math.abs(degrees)}° ${minutes.toFixed(4)}'`;
+}
+
 export function deg2rad(deg: number) {
   var pi = Math.PI;
   return deg * (pi / 180);
diff --git a/frontend/react/src/ui/components/ollocation.tsx b/frontend/react/src/ui/components/ollocation.tsx
index 34e142f5..f6a76ef2 100644
--- a/frontend/react/src/ui/components/ollocation.tsx
+++ b/frontend/react/src/ui/components/ollocation.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { LatLng } from "leaflet";
-import { ConvertDDToDMS, latLngToMGRS, latLngToUTM, zeroAppend } from "../../other/utils";
+import { ConvertDDToDMS, DDToDDM, latLngToMGRS, latLngToUTM, zeroAppend } from "../../other/utils";
 
 export function OlLocation(props: { location: LatLng; className?: string; referenceSystem?: string; onClick?: () => void }) {
   const [referenceSystem, setReferenceSystem] = props.referenceSystem ? [props.referenceSystem, () => {}] : useState("LatLngDec");
@@ -82,7 +82,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
           props.onClick
             ? props.onClick
             : (ev) => {
-                setReferenceSystem("MGRS");
+                setReferenceSystem("LatLngDDM");
                 ev.stopPropagation();
               }
         }
@@ -109,6 +109,45 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
         </div>
       </div>
     );
+  } else if (referenceSystem === "LatLngDDM") {
+    return (
+      <div
+        className={`
+          ${props.className ?? ""}
+          my-auto flex cursor-pointer justify-between gap-2 bg-olympus-400 p-2
+          text-white
+        `}
+        onClick={
+          props.onClick
+            ? props.onClick
+            : (ev) => {
+                setReferenceSystem("MGRS");
+                ev.stopPropagation();
+              }
+        }
+      >
+        <div className="flex gap-2">
+          <span
+            className={`
+              w-5 rounded-sm bg-white text-center font-bold text-olympus-700
+            `}
+          >
+            {props.location.lat >= 0 ? "N" : "S"}
+          </span>
+          {DDToDDM(props.location.lat)}
+        </div>
+        <div className="flex w-[50%] gap-2">
+          <span
+            className={`
+              w-5 rounded-sm bg-white text-center font-bold text-olympus-700
+            `}
+          >
+            {props.location.lng >= 0 ? "E" : "W"}
+          </span>
+          {DDToDDM(props.location.lng)}
+        </div>
+      </div>
+    );
   } else {
   }
 }
diff --git a/frontend/react/src/ui/modals/keybindmodal.tsx b/frontend/react/src/ui/modals/keybindmodal.tsx
index fd98864d..bd4e8a65 100644
--- a/frontend/react/src/ui/modals/keybindmodal.tsx
+++ b/frontend/react/src/ui/modals/keybindmodal.tsx
@@ -62,7 +62,7 @@ export function KeybindModal(props: { open: boolean }) {
 
   return (
     <Modal open={props.open} size={"sm"}>
-      <div className="flex flex-col gap-4 h-full w-full">
+      <div className="flex h-full w-full flex-col gap-4">
       <div className={`flex flex-col gap-2`}>
         <span
           className={`
@@ -97,7 +97,7 @@ export function KeybindModal(props: { open: boolean }) {
                 className={`flex flex-wrap gap-2 font-bold text-orange-600`}
               >
                 {inUseShortcuts.map((shortcut) => (
-                  <span>{shortcut.getOptions().label}</span>
+                  <span key={shortcut.getId()}>{shortcut.getOptions().label}</span>
                 ))}
               </div>
             </div>
@@ -105,7 +105,7 @@ export function KeybindModal(props: { open: boolean }) {
           </div>
         )}
       </div>
-      <div className="flex justify-end mt-auto ">
+      <div className="mt-auto flex justify-end">
         {shortcut && (
           <button
             type="button"
diff --git a/frontend/react/src/ui/panels/jtacmenu.tsx b/frontend/react/src/ui/panels/jtacmenu.tsx
index 795980d6..4f1212dd 100644
--- a/frontend/react/src/ui/panels/jtacmenu.tsx
+++ b/frontend/react/src/ui/panels/jtacmenu.tsx
@@ -98,6 +98,7 @@ export function JTACMenu(props: { open: boolean; onClose: () => void; children?:
               onClick={() => {
                 if (referenceSystem === "MGRS") setReferenceSystem("LatLngDec");
                 else if (referenceSystem === "LatLngDec") setReferenceSystem("LatLngDMS");
+                else if (referenceSystem === "LatLngDMS") setReferenceSystem("LatLngDDM");
                 else setReferenceSystem("MGRS");
               }}
               referenceSystem={referenceSystem}
@@ -133,6 +134,7 @@ export function JTACMenu(props: { open: boolean; onClose: () => void; children?:
               onClick={() => {
                 if (referenceSystem === "MGRS") setReferenceSystem("LatLngDec");
                 else if (referenceSystem === "LatLngDec") setReferenceSystem("LatLngDMS");
+                else if (referenceSystem === "LatLngDMS") setReferenceSystem("LatLngDDM");
                 else setReferenceSystem("MGRS");
               }}
               referenceSystem={referenceSystem}
@@ -168,6 +170,7 @@ export function JTACMenu(props: { open: boolean; onClose: () => void; children?:
               onClick={() => {
                 if (referenceSystem === "MGRS") setReferenceSystem("LatLngDec");
                 else if (referenceSystem === "LatLngDec") setReferenceSystem("LatLngDMS");
+                else if (referenceSystem === "LatLngDMS") setReferenceSystem("LatLngDDM");
                 else setReferenceSystem("MGRS");
               }}
               referenceSystem={referenceSystem}

From 45f828c8388d1ed511b30c345db6c2a5dfad5404 Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Sat, 22 Mar 2025 12:33:34 +0100
Subject: [PATCH 2/2] feat(map): added coordinates copy feature

---
 frontend/react/src/events.ts                  |  16 ++
 frontend/react/src/map/map.ts                 |   4 +-
 frontend/react/src/other/utils.ts             |   4 +
 .../react/src/ui/components/ollocation.tsx    |   6 +-
 .../react/src/ui/panels/coordinatespanel.tsx  | 135 +++++++++---
 .../react/src/ui/panels/unitcontrolmenu.tsx   | 192 +++++-------------
 frontend/react/src/unit/unit.ts               |   2 +
 7 files changed, 182 insertions(+), 177 deletions(-)

diff --git a/frontend/react/src/events.ts b/frontend/react/src/events.ts
index b8693d13..a6f4f9f3 100644
--- a/frontend/react/src/events.ts
+++ b/frontend/react/src/events.ts
@@ -892,3 +892,19 @@ export class WeaponsRefreshedEvent {
     if (DEBUG) console.log(`Event ${this.name} dispatched`);
   }
 }
+
+export class CoordinatesFreezeEvent {
+  static on(callback: () => void) {
+    document.addEventListener(
+      this.name,
+      (ev: CustomEventInit) => {
+        callback();
+      }
+    )
+  }
+
+  static dispatch() {
+    document.dispatchEvent(new CustomEvent(this.name));
+    if (DEBUG) console.log(`Event ${this.name} dispatched`);
+  }
+}
diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts
index 48ec8bde..d146c1c9 100644
--- a/frontend/react/src/map/map.ts
+++ b/frontend/react/src/map/map.ts
@@ -49,6 +49,7 @@ import {
   ConfigLoadedEvent,
   ContextActionChangedEvent,
   ContextActionSetChangedEvent,
+  CoordinatesFreezeEvent,
   HiddenTypesChangedEvent,
   MapContextMenuRequestEvent,
   MapOptionsChangedEvent,
@@ -509,7 +510,7 @@ export class Map extends L.Map {
         code: "ShiftLeft",
         altKey: false,
         ctrlKey: false,
-      });
+      })
   }
 
   setLayerName(layerName: string) {
@@ -1031,6 +1032,7 @@ export class Map extends L.Map {
   }
 
   #onLeftShortClick(e: L.LeafletMouseEvent) {
+    CoordinatesFreezeEvent.dispatch();
     if (Date.now() - this.#leftMouseDownEpoch < SHORT_PRESS_MILLISECONDS) {
       this.#debounceTimeout = window.setTimeout(() => {
         if (!this.#isSelecting) {
diff --git a/frontend/react/src/other/utils.ts b/frontend/react/src/other/utils.ts
index d2b01d07..4b39e816 100644
--- a/frontend/react/src/other/utils.ts
+++ b/frontend/react/src/other/utils.ts
@@ -769,4 +769,8 @@ export function secondsToTimeString(seconds: number) {
   const secs = Math.floor(seconds % 60);
 
   return `${zeroPad(hours, 2)}:${zeroPad(minutes, 2)}:${zeroPad(secs, 2)}`;
+}
+
+export function isTrustedEnvironment() {
+  return window.location.protocol === "https:";
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/components/ollocation.tsx b/frontend/react/src/ui/components/ollocation.tsx
index f6a76ef2..f5ab162a 100644
--- a/frontend/react/src/ui/components/ollocation.tsx
+++ b/frontend/react/src/ui/components/ollocation.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { LatLng } from "leaflet";
 import { ConvertDDToDMS, DDToDDM, latLngToMGRS, latLngToUTM, zeroAppend } from "../../other/utils";
 
-export function OlLocation(props: { location: LatLng; className?: string; referenceSystem?: string; onClick?: () => void }) {
+export function OlLocation(props: { location: LatLng; className?: string; referenceSystem?: string; onClick?: () => void; onRefSystemChange?: (refSystem: string) => any }) {
   const [referenceSystem, setReferenceSystem] = props.referenceSystem ? [props.referenceSystem, () => {}] : useState("LatLngDec");
   const MGRS = latLngToMGRS(props.location.lat, props.location.lng, 6);
   if (referenceSystem === "MGRS") {
@@ -17,6 +17,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
             ? props.onClick
             : (ev) => {
                 setReferenceSystem("LatLngDec");
+                props.onRefSystemChange ? props.onRefSystemChange("LatLngDec") : null;
                 ev.stopPropagation();
               }
         }
@@ -44,6 +45,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
             ? props.onClick
             : (ev) => {
                 setReferenceSystem("LatLngDMS");
+                props.onRefSystemChange ? props.onRefSystemChange("LatLngDMS") : null;
                 ev.stopPropagation();
               }
         }
@@ -83,6 +85,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
             ? props.onClick
             : (ev) => {
                 setReferenceSystem("LatLngDDM");
+                props.onRefSystemChange ? props.onRefSystemChange("LatLngDDM") : null;
                 ev.stopPropagation();
               }
         }
@@ -122,6 +125,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
             ? props.onClick
             : (ev) => {
                 setReferenceSystem("MGRS");
+                props.onRefSystemChange ? props.onRefSystemChange("MGRS") : null;
                 ev.stopPropagation();
               }
         }
diff --git a/frontend/react/src/ui/panels/coordinatespanel.tsx b/frontend/react/src/ui/panels/coordinatespanel.tsx
index c1fe6dee..06489307 100644
--- a/frontend/react/src/ui/panels/coordinatespanel.tsx
+++ b/frontend/react/src/ui/panels/coordinatespanel.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { OlLocation } from "../components/ollocation";
 import { LatLng } from "leaflet";
-import { FaBullseye, FaChevronDown, FaChevronUp, FaJetFighter, FaMountain } from "react-icons/fa6";
-import { BullseyesDataChangedEvent, MouseMovedEvent, SelectedUnitsChangedEvent, SelectionClearedEvent } from "../../events";
-import { computeBearingRangeString, mToFt } from "../../other/utils";
+import { FaBullseye, FaChevronDown, FaChevronUp, FaJetFighter, FaMountain, FaCopy, FaXmark } from "react-icons/fa6";
+import { BullseyesDataChangedEvent, CoordinatesFreezeEvent, MouseMovedEvent, SelectedUnitsChangedEvent, SelectionClearedEvent } from "../../events";
+import { computeBearingRangeString, ConvertDDToDMS, DDToDDM, isTrustedEnvironment, latLngToMGRS, mToFt, zeroAppend } from "../../other/utils";
 import { Bullseye } from "../../mission/bullseye";
 import { Unit } from "../../unit/unit";
+import { getApp } from "../../olympusapp";
 
 export function CoordinatesPanel(props: {}) {
   const [latlng, setLatlng] = useState(new LatLng(0, 0));
@@ -13,7 +14,10 @@ export function CoordinatesPanel(props: {}) {
   const [bullseyes, setBullseyes] = useState(null as null | { [name: string]: Bullseye });
   const [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
   const [open, setOpen] = useState(true);
-
+  const [copyCoordsOpen, setCopyCoordsOpen] = useState(false);
+  const [refSystem, setRefSystem] = useState("LatLngDec");
+  const [copyableCoordinates, setCopyableCoordinates] = useState("To start, click any point on the map.");
+  
   useEffect(() => {
     MouseMovedEvent.on((latlng, elevation) => {
       setLatlng(latlng);
@@ -23,18 +27,43 @@ export function CoordinatesPanel(props: {}) {
     BullseyesDataChangedEvent.on((bullseyes) => setBullseyes(bullseyes));
     SelectedUnitsChangedEvent.on((selectedUnits) => setSelectedUnits(selectedUnits));
     SelectionClearedEvent.on(() => setSelectedUnits([]));
-  }, []);
+    CoordinatesFreezeEvent.on( () => {
+      setCopyableCoordinates(getCopyableCoordinates());
+    });
+  }, [refSystem, latlng, elevation]);
+
+  const getCopyableCoordinates = () => {
+    let returnString = '';
+    
+    switch (refSystem) {
+      case "LatLngDec":
+        returnString = `${latlng.lat >= 0 ? "N" : "S"} ${zeroAppend(latlng.lat, 3, true, 6)}°, ${latlng.lng >= 0 ? "E" : "W"} ${zeroAppend(latlng.lng, 3, true, 6)}°,`
+        break;
+      case "LatLngDMS":
+        returnString = `${latlng.lat >= 0 ? "N" : "S"} ${ConvertDDToDMS(latlng.lat, false)}, ${latlng.lng >= 0 ? "E" : "W"} ${ConvertDDToDMS(latlng.lng, false)},`
+        break;
+      case "LatLngDDM":
+        returnString = `${latlng.lat >= 0 ? "N" : "S"} ${DDToDDM(latlng.lat)}, ${latlng.lng >= 0 ? "E" : "W"} ${DDToDDM(latlng.lng)}`;
+        break;
+      case "MGRS":
+        returnString = latLngToMGRS(latlng.lat, latlng.lng, 6)?.string || "Error";
+        break;
+    }
+
+    returnString += ` Elevation: ${Math.round(elevation)}`;
+
+    return returnString;
+  };
 
   return (
     <div
       className={`
-        flex w-full flex-col items-center justify-between gap-2 rounded-lg
-        bg-gray-200 px-3 py-3 text-sm backdrop-blur-lg backdrop-grayscale
+        flex w-full flex-col justify-between gap-2 rounded-lg bg-gray-200 px-3
+        py-3 text-sm backdrop-blur-lg backdrop-grayscale
         dark:bg-olympus-800/90 dark:text-gray-200
       `}
-      onClick={() => setOpen(!open)}
     >
-      <div className="absolute right-[12px] top-[15px]">
+      <div className="absolute right-[12px] top-[15px]" onClick={() => setOpen(!open)}>
         {open ? (
           <FaChevronDown className="cursor-pointer" />
         ) : (
@@ -44,11 +73,7 @@ export function CoordinatesPanel(props: {}) {
         )}
       </div>
       {open && bullseyes && (
-        <div
-          className={`
-            flex w-full flex-col items-start justify-start gap-2
-          `}
-        >
+        <div className={`flex w-full flex-col items-start justify-start gap-2`}>
           <div
             className={`
               flex flex min-w-64 max-w-64 items-start justify-between gap-2
@@ -98,26 +123,74 @@ export function CoordinatesPanel(props: {}) {
       )}
 
       <div
-        className={`
-        flex w-full items-center justify-between pointer-events-all
-      `}
+        className={`flex w-full items-center justify-between pointer-events-all`}
       >
-        <OlLocation className="!min-w-64 !max-w-64 bg-transparent !p-0" location={latlng} />
+        <OlLocation onRefSystemChange={(evt) => setRefSystem(evt)} className={`
+          !min-w-64 !max-w-64 bg-transparent !p-0
+        `} location={latlng} />
       </div>
 
-      {open && (
-        <div className="flex w-full items-center justify-start">
-          <span
-            className={`
-              mr-2 rounded-sm bg-white px-1 py-1 text-center font-bold
-              text-olympus-700
-            `}
+      {open && [
+        <div
+          className={`
+            flex w-full min-w-64 max-w-64 items-center justify-between
+          `}
+        >
+          <div className="flex">
+            <span
+              className={`
+                mr-2 rounded-sm bg-white px-1 py-1 text-center font-bold
+                text-olympus-700
+              `}
+            >
+              <FaMountain />
+            </span>
+            <div className="min-w-12">{mToFt(elevation).toFixed()}ft</div>
+          </div>
+
+          <div
+            className="ml-auto flex w-[50%]"
+            onClick={async (evt) => {
+              evt.stopPropagation();
+              setCopyCoordsOpen(true);
+
+              if (isTrustedEnvironment()) {
+                try {
+                  await navigator.clipboard.writeText(copyableCoordinates);
+                  getApp().addInfoMessage(`Coordinates copied to clipboard: ${copyableCoordinates}`);
+                } catch (err) {
+                  console.error('Failed to copy text: ', err);
+                }
+              }
+            }}
           >
-            <FaMountain />
-          </span>
-          <div className="min-w-12">{mToFt(elevation).toFixed()}ft</div>
-        </div>
-      )}
+            <span
+              className={`
+                mr-2 rounded-sm bg-white px-1 py-1 text-center font-bold
+                text-olympus-700
+              `}
+            >
+              <FaCopy />
+            </span>
+            <div className="min-w-12">Copy Coords</div>
+          </div>
+        </div>,
+
+        open && copyCoordsOpen && (
+          <div
+            className={`
+              relative mt-4 flex w-full min-w-64 items-center justify-between
+            `}
+            onClick={(evt) => evt.stopPropagation()}
+          >
+            <textarea readOnly={true} className="resize-none p-2 text-black" name="coordsTextArea" id="coordsTextArea" cols={25} rows={2} value={copyableCoordinates}></textarea>
+
+            <div className="absolute right-[0] top-[0px] background-transparent" onClick={() => setCopyCoordsOpen(false)}>
+              <FaXmark className="cursor-pointer" />
+            </div>
+          </div>
+        ),
+      ]}
     </div>
   );
 }
diff --git a/frontend/react/src/ui/panels/unitcontrolmenu.tsx b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
index 0ee452ea..2dc6b4c1 100644
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -417,9 +417,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                           <td className="flex gap-2 text-lg text-gray-200">
                             <FontAwesomeIcon icon={entry[1][0] as IconDefinition} />{" "}
                             <div
-                              className={`
-                              text-sm text-gray-400
-                            `}
+                              className={`text-sm text-gray-400`}
                             >
                               {entry[1][1] as string}
                             </div>
@@ -799,9 +797,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     {" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeHold}
-                                      className={`
-                                      my-auto min-w-8 text-white
-                                    `}
+                                      className={`my-auto min-w-8 text-white`}
                                     />{" "}
                                     Hold fire: The unit will not shoot in any circumstance
                                   </div>
@@ -809,9 +805,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     {" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeReturn}
-                                      className={`
-                                      my-auto min-w-8 text-white
-                                    `}
+                                      className={`my-auto min-w-8 text-white`}
                                     />{" "}
                                     Return fire: The unit will not fire unless fired upon
                                   </div>
@@ -819,17 +813,13 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     {" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeDesignated}
-                                      className={`
-                                      my-auto min-w-8 text-white
-                                    `}
+                                      className={`my-auto min-w-8 text-white`}
                                     />{" "}
                                     <div>
                                       {" "}
                                       Fire on target: The unit will not fire unless fired upon{" "}
                                       <p
-                                        className={`
-                                        inline font-bold
-                                      `}
+                                        className={`inline font-bold`}
                                       >
                                         or
                                       </p>{" "}
@@ -840,9 +830,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     {" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeFree}
-                                      className={`
-                                      my-auto min-w-8 text-white
-                                    `}
+                                      className={`my-auto min-w-8 text-white`}
                                     />{" "}
                                     Free: The unit will fire at any detected enemy in range
                                   </div>
@@ -850,25 +838,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                 <div className="flex gap-4">
                                   <div className="my-auto">
                                     <FaExclamationCircle
-                                      className={`
-                                      animate-bounce text-xl
-                                    `}
+                                      className={`animate-bounce text-xl`}
                                     />
                                   </div>
                                   <div>
                                     Currently, DCS blue and red ground units do not respect{" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeReturn}
-                                      className={`
-                                      my-auto text-white
-                                    `}
+                                      className={`my-auto text-white`}
                                     />{" "}
                                     and{" "}
                                     <FontAwesomeIcon
                                       icon={olButtonsRoeDesignated}
-                                      className={`
-                                      my-auto text-white
-                                    `}
+                                      className={`my-auto text-white`}
                                     />{" "}
                                     rules of engagement, so be careful, they may start shooting when you don't want them to. Use neutral units for finer
                                     control.
@@ -929,9 +911,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsThreatNone}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       No reaction: The unit will not react in any circumstance
                                     </div>
@@ -939,9 +919,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsThreatPassive}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Passive: The unit will use counter-measures, but will not alter its course
                                     </div>
@@ -949,9 +927,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsThreatManoeuvre}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Manouevre: The unit will try to evade the threat using manoeuvres, but no counter-measures
                                     </div>
@@ -959,9 +935,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsThreatEvade}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Full evasion: the unit will try to evade the threat both manoeuvering and using counter-measures
                                     </div>
@@ -1016,9 +990,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsEmissionsSilent}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Radio silence: No radar or ECM will be used
                                     </div>
@@ -1026,9 +998,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsEmissionsDefend}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Defensive: The unit will turn radar and ECM on only when threatened
                                     </div>
@@ -1036,9 +1006,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsEmissionsAttack}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Attack: The unit will use radar and ECM when engaging other units
                                     </div>
@@ -1046,9 +1014,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                       {" "}
                                       <FontAwesomeIcon
                                         icon={olButtonsEmissionsFree}
-                                        className={`
-                                        my-auto min-w-8 text-white
-                                      `}
+                                        className={`my-auto min-w-8 text-white`}
                                       />{" "}
                                       Free: the unit will use the radar and ECM all the time
                                     </div>
@@ -1269,9 +1235,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                               <div className="flex gap-4">
                                 <div className="my-auto">
                                   <FaExclamationCircle
-                                    className={`
-                                    animate-bounce text-xl
-                                  `}
+                                    className={`animate-bounce text-xl`}
                                   />
                                 </div>
                                 <div>
@@ -1451,9 +1415,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                             {/* ============== Operate as toggle START ============== */}
                             {selectedUnits.every((unit) => unit.getCoalition() === "neutral") && (
                               <div
-                                className={`
-                                flex content-center justify-between
-                              `}
+                                className={`flex content-center justify-between`}
                               >
                                 <span
                                   className={`
@@ -1495,17 +1457,13 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                               >
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Barrel height:{" "}
                                   </div>
                                   <OlNumberInput
                                     decimalPlaces={1}
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={barrelHeight}
                                     min={0}
                                     max={100}
@@ -1520,26 +1478,20 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Muzzle velocity:{" "}
                                   </div>
                                   <OlNumberInput
                                     decimalPlaces={0}
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={muzzleVelocity}
                                     min={0}
                                     max={10000}
@@ -1554,26 +1506,20 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m/s
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Aim time:{" "}
                                   </div>
                                   <OlNumberInput
                                     decimalPlaces={2}
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={aimTime}
                                     min={0}
                                     max={100}
@@ -1588,25 +1534,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     s
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Shots to fire:{" "}
                                   </div>
                                   <OlNumberInput
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={shotsToFire}
                                     min={0}
                                     max={100}
@@ -1623,17 +1563,13 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Shots base interval:{" "}
                                   </div>
                                   <OlNumberInput
                                     decimalPlaces={2}
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={shotsBaseInterval}
                                     min={0}
                                     max={100}
@@ -1648,26 +1584,20 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     s
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Shots base scatter:{" "}
                                   </div>
                                   <OlNumberInput
                                     decimalPlaces={2}
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={shotsBaseScatter}
                                     min={0}
                                     max={50}
@@ -1682,25 +1612,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     deg
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Engagement range:{" "}
                                   </div>
                                   <OlNumberInput
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={engagementRange}
                                     min={0}
                                     max={100000}
@@ -1715,25 +1639,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Targeting range:{" "}
                                   </div>
                                   <OlNumberInput
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={targetingRange}
                                     min={0}
                                     max={100000}
@@ -1748,25 +1666,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Aim method range:{" "}
                                   </div>
                                   <OlNumberInput
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={aimMethodRange}
                                     min={0}
                                     max={100000}
@@ -1781,25 +1693,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m
                                   </div>
                                 </div>
                                 <div className="flex align-center gap-2">
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     Acquisition range:{" "}
                                   </div>
                                   <OlNumberInput
-                                    className={`
-                                  ml-auto
-                                `}
+                                    className={`ml-auto`}
                                     value={acquisitionRange}
                                     min={0}
                                     max={100000}
@@ -1814,9 +1720,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                                     }}
                                   ></OlNumberInput>
                                   <div
-                                    className={`
-                                  my-auto
-                                `}
+                                    className={`my-auto`}
                                   >
                                     m
                                   </div>
diff --git a/frontend/react/src/unit/unit.ts b/frontend/react/src/unit/unit.ts
index eece5f48..1bb25f9d 100644
--- a/frontend/react/src/unit/unit.ts
+++ b/frontend/react/src/unit/unit.ts
@@ -60,6 +60,7 @@ import * as turf from "@turf/turf";
 import { Carrier } from "../mission/carrier";
 import {
   ContactsUpdatedEvent,
+  CoordinatesFreezeEvent,
   HiddenTypesChangedEvent,
   MapOptionsChangedEvent,
   UnitContextMenuRequestEvent,
@@ -1611,6 +1612,7 @@ export abstract class Unit extends CustomMarker {
   }
 
   #onLeftShortClick(e: any) {
+    CoordinatesFreezeEvent.dispatch();
     DomEvent.stop(e);
     DomEvent.preventDefault(e);
     e.originalEvent.stopImmediatePropagation();