From e4af9b06d3f0a519ad12c40e99e76d3cbeb5a893 Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Mon, 4 Aug 2025 20:03:40 +0200
Subject: [PATCH] fix: Ground units spawned in group are on top of each other,
 no heading when importing units

Units spawned via map, context menu, or unit spawn menu now include a heading property and are offset in latitude to prevent overlap. Also ensures heading is set during import/export. Minor JSX formatting improvements in UnitSpawnMenu.
---
 frontend/react/src/map/map.ts                 |  8 +++-
 .../src/ui/contextmenus/spawncontextmenu.tsx  |  8 +++-
 .../react/src/ui/modals/importexportmodal.tsx |  2 +-
 .../react/src/ui/panels/unitspawnmenu.tsx     | 42 ++++++++++---------
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts
index 9fbee7b8..af7ce75d 100644
--- a/frontend/react/src/map/map.ts
+++ b/frontend/react/src/map/map.ts
@@ -1055,7 +1055,13 @@ export class Map extends L.Map {
             .getUnitsManager()
             .spawnUnits(
               this.#spawnRequestTable.category,
-              Array(this.#spawnRequestTable.amount).fill(this.#spawnRequestTable.unit),
+              Array(this.#spawnRequestTable.amount).fill(this.#spawnRequestTable.unit).map((unit, index) => {
+                return {
+                  ...unit,
+                  location: new L.LatLng(unit.location.lat + (this.#spawnRequestTable?.category === "groundunit" ? 0.00025 * index : 0.005 * index), unit.location.lng),
+                  heading: this.#spawnHeading,
+                };
+              }),
               this.#spawnRequestTable.coalition,
               false,
               undefined,
diff --git a/frontend/react/src/ui/contextmenus/spawncontextmenu.tsx b/frontend/react/src/ui/contextmenus/spawncontextmenu.tsx
index a710eb7d..078cfa2e 100644
--- a/frontend/react/src/ui/contextmenus/spawncontextmenu.tsx
+++ b/frontend/react/src/ui/contextmenus/spawncontextmenu.tsx
@@ -660,7 +660,13 @@ export function SpawnContextMenu(props: {}) {
                                     .getUnitsManager()
                                     .spawnUnits(
                                       spawnRequestTable.category,
-                                      Array(spawnRequestTable.amount).fill(spawnRequestTable.unit),
+                                      Array(spawnRequestTable.amount).fill(spawnRequestTable.unit).map((unit, index) => {
+                                        return {
+                                          ...unit,
+                                           location: new LatLng(unit.location.lat + (spawnRequestTable?.category === "groundunit" ? 0.00025 * index : 0.005 * index), unit.location.lng),
+                                          heading: unit.heading || 0,
+                                        };
+                                      }),
                                       spawnRequestTable.coalition,
                                       false
                                     );
diff --git a/frontend/react/src/ui/modals/importexportmodal.tsx b/frontend/react/src/ui/modals/importexportmodal.tsx
index f600dcce..141d026d 100644
--- a/frontend/react/src/ui/modals/importexportmodal.tsx
+++ b/frontend/react/src/ui/modals/importexportmodal.tsx
@@ -319,7 +319,7 @@ export function ImportExportModal(props: { open: boolean }) {
                 if (selectionFilter[coalition][markerCategory] !== true) continue;
 
                 let unitsToSpawn = groupData.map((unitData: UnitData) => {
-                  return { unitType: unitData.name, location: unitData.position, liveryID: "", skill: "High" };
+                  return { unitType: unitData.name, location: unitData.position, liveryID: "", skill: "High", heading: unitData.heading || 0 };
                 });
 
                 getApp().getUnitsManager().spawnUnits(category.toLocaleLowerCase(), unitsToSpawn, coalition, false);
diff --git a/frontend/react/src/ui/panels/unitspawnmenu.tsx b/frontend/react/src/ui/panels/unitspawnmenu.tsx
index ec9b8ba1..674f1454 100644
--- a/frontend/react/src/ui/panels/unitspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/unitspawnmenu.tsx
@@ -451,10 +451,9 @@ export function UnitSpawnMenu(props: {
                                     `}
                                   >
                                     {props.blueprint?.liveries && props.blueprint?.liveries[id].countries.length == 1 && (
-                                      <img
-                                        src={`images/countries/${country?.flagCode.toLowerCase()}.svg`}
-                                        className={`h-6`}
-                                      />
+                                      <img src={`images/countries/${country?.flagCode.toLowerCase()}.svg`} className={`
+                                        h-6
+                                      `} />
                                     )}
 
                                     <div className="my-auto truncate">
@@ -521,12 +520,9 @@ export function UnitSpawnMenu(props: {
                     <div className="my-auto flex flex-col gap-2">
                       <span>Spawn heading</span>
                       <div className="flex gap-1 text-sm text-gray-400">
-                        <FaQuestionCircle className={`my-auto`} />{" "}
-                        <div
-                          className={`my-auto`}
-                        >
-                          Drag to change
-                        </div>
+                        <FaQuestionCircle className={`my-auto`} /> <div className={`
+                          my-auto
+                        `}>Drag to change</div>
                       </div>
                     </div>
 
@@ -632,7 +628,15 @@ export function UnitSpawnMenu(props: {
                         .getUnitsManager()
                         .spawnUnits(
                           spawnRequestTable.category,
-                          Array(spawnRequestTable.amount).fill(spawnRequestTable.unit),
+                          Array(spawnRequestTable.amount)
+                            .fill(spawnRequestTable.unit)
+                            .map((unit, index) => {
+                              return {
+                                ...unit,
+                                location: new LatLng(unit.location.lat + (spawnRequestTable?.category === "groundunit" ? 0.00025 * index : 0.005 * index), unit.location.lng),
+                                heading: unit.heading || 0,
+                              };
+                            }),
                           spawnRequestTable.coalition,
                           false,
                           props.airbase?.getName() ?? undefined
@@ -912,9 +916,12 @@ export function UnitSpawnMenu(props: {
                                 `}
                               >
                                 {props.blueprint?.liveries && props.blueprint?.liveries[id].countries.length == 1 && (
-                                  <img src={`images/countries/${country?.flagCode.toLowerCase()}.svg`} className={`
+                                  <img
+                                    src={`images/countries/${country?.flagCode.toLowerCase()}.svg`}
+                                    className={`
                                     h-6
-                                  `} />
+                                  `}
+                                  />
                                 )}
 
                                 <div className="my-auto truncate">
@@ -980,12 +987,9 @@ export function UnitSpawnMenu(props: {
                   <div className="my-auto flex flex-col gap-2">
                     <span className="text-white">Spawn heading</span>
                     <div className="flex gap-1 text-sm text-gray-400">
-                      <FaQuestionCircle className={`my-auto`} />{" "}
-                      <div
-                        className={`my-auto`}
-                      >
-                        Drag to change
-                      </div>
+                      <FaQuestionCircle className={`my-auto`} /> <div className={`
+                        my-auto
+                      `}>Drag to change</div>
                     </div>
                   </div>