Minor bugfixes

frontend/react/src/audio/audiomanager.ts

@@ -76,7 +76,7 @@ export class AudioManager {
 
     if (!this.#socket) return;
 
-    //this.#socket = new WebSocket(`wss://refugees.dcsolympus.com/audio`); // TODO: remove, used for testing!
+    this.#socket = new WebSocket(`wss://refugees.dcsolympus.com/audio`); // TODO: remove, used for testing!
 
     /* Log the opening of the connection */
     this.#socket.addEventListener("open", (event) => {

frontend/react/src/other/utils.ts

@@ -243,6 +243,15 @@ export function enumToROE(ROE: number) {
   else return ROEs[0];
 }
 
+export function convertROE(idx: number) {
+  let roe = 0;
+  if (idx === 0) roe = 4;
+  else if (idx === 1) roe = 3;
+  else if (idx === 2) roe = 1;
+  else roe = 0;
+  return roe;
+}
+
 export function enumToReactionToThreat(reactionToThreat: number) {
   if (reactionToThreat < reactionsToThreat.length) return reactionsToThreat[reactionToThreat];
   else return reactionsToThreat[0];

frontend/react/src/ui/panels/coordinatespanel.tsx

@@ -48,9 +48,9 @@ export function CoordinatesPanel(props: {}) {
                     `}
                   >
                     <FaBullseye />
-                  </span>
-                  {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} /{" "}
-                  {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}°
+                  </span> {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° / {" "}
+                  {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} 
+                  
                 </div>
                 <div className="flex w-[50%] justify-start gap-2">
                   <span
@@ -61,8 +61,9 @@ export function CoordinatesPanel(props: {}) {
                   >
                     <FaBullseye />
                   </span>
-                  {(bullseyes[1].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} /{" "}
-                  {bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}°
+                  {bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° / {" "}
+                  {(bullseyes[1].getLatLng().distanceTo(latlng) / 1852).toFixed(0)}
+                  
                 </div>
               </div>
               {/*}<div className="flex justify-start gap-2">

frontend/react/src/ui/panels/unitcontrolmenu.tsx

@@ -6,7 +6,16 @@ import { OlRangeSlider } from "../components/olrangeslider";
 import { getApp } from "../../olympusapp";
 import { OlButtonGroup, OlButtonGroupItem } from "../components/olbuttongroup";
 import { OlCheckbox } from "../components/olcheckbox";
-import { ROEs, altitudeIncrements, emissionsCountermeasures, maxAltitudeValues, maxSpeedValues, minAltitudeValues, reactionsToThreat, speedIncrements } from "../../constants/constants";
+import {
+  ROEs,
+  altitudeIncrements,
+  emissionsCountermeasures,
+  maxAltitudeValues,
+  maxSpeedValues,
+  minAltitudeValues,
+  reactionsToThreat,
+  speedIncrements,
+} from "../../constants/constants";
 import { OlToggle } from "../components/oltoggle";
 import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
 import {
@@ -38,7 +47,7 @@ import {
   olButtonsVisibilityOlympus,
 } from "../components/olicons";
 import { Coalition } from "../../types/types";
-import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
+import { convertROE, ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
 import { FaCog, FaGasPump, FaSignal, FaTag } from "react-icons/fa";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { OlSearchBar } from "../components/olsearchbar";
@@ -216,12 +225,10 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
     maxSpeed = maxSpeedValues.helicopter;
     speedStep = speedIncrements.helicopter;
     altitudeStep = altitudeIncrements.helicopter;
-  }
-  else if (everyUnitIsGround) {
+  } else if (everyUnitIsGround) {
     maxSpeed = maxSpeedValues.groundunit;
     speedStep = speedIncrements.groundunit;
-  }
-  else if (everyUnitIsNavy) {
+  } else if (everyUnitIsNavy) {
     maxSpeed = maxSpeedValues.navyunit;
     speedStep = speedIncrements.navyunit;
   }
@@ -622,39 +629,39 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                   </div>
                   {/* ============== Airspeed selector END ============== */}
                   {/* ============== Rules of Engagement START ============== */}
-                  {!(selectedUnits.length === 1 && selectedUnits[0].isTanker()) &&
-                    !(selectedUnits.length === 1 && selectedUnits[0].isAWACS()) && (
-                      <div className="flex flex-col gap-2">
-                        <span
-                          className={`
-                            my-auto font-normal
-                            dark:text-white
-                          `}
-                        >
-                          Rules of engagement
-                        </span>
-                        <OlButtonGroup>
-                          {[olButtonsRoeHold, olButtonsRoeReturn, olButtonsRoeDesignated, olButtonsRoeFree].map((icon, idx) => {
-                            return (
-                              <OlButtonGroupItem
-                                key={idx}
-                                onClick={() => {
-                                  selectedUnits.forEach((unit) => {
-                                    unit.setROE(ROEs[idx]);
-                                    setSelectedUnitsData({
-                                      ...selectedUnitsData,
-                                      ROE: ROEs[idx],
-                                    });
+                  {!(selectedUnits.length === 1 && selectedUnits[0].isTanker()) && !(selectedUnits.length === 1 && selectedUnits[0].isAWACS()) && (
+                    <div className="flex flex-col gap-2">
+                      <span
+                        className={`
+                          my-auto font-normal
+                          dark:text-white
+                        `}
+                      >
+                        Rules of engagement
+                      </span>
+                      <OlButtonGroup>
+                        {[olButtonsRoeHold, olButtonsRoeReturn, olButtonsRoeDesignated, olButtonsRoeFree].map((icon, idx) => {
+                          return (
+                            <OlButtonGroupItem
+                              key={idx}
+                              onClick={() => {
+                                
+                                selectedUnits.forEach((unit) => {
+                                  unit.setROE(ROEs[convertROE(idx)]);
+                                  setSelectedUnitsData({
+                                    ...selectedUnitsData,
+                                    ROE: ROEs[convertROE(idx)],
                                   });
-                                }}
-                                active={selectedUnitsData.ROE === ROEs[idx]}
-                                icon={icon}
-                              />
-                            );
-                          })}
-                        </OlButtonGroup>
-                      </div>
-                    )}
+                                });
+                              }}
+                              active={selectedUnitsData.ROE === ROEs[convertROE(idx)]}
+                              icon={icon}
+                            />
+                          );
+                        })}
+                      </OlButtonGroup>
+                    </div>
+                  )}
                   {/* ============== Rules of Engagement END ============== */}
                   {selectedCategories.every((category) => {
                     return ["Aircraft", "Helicopter"].includes(category);
@@ -1174,10 +1181,9 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                       value={activeAdvancedSettings ? activeAdvancedSettings.TACAN.channel : 1}
                     ></OlNumberInput>
 
-                    <OlDropdown
-                      label={activeAdvancedSettings ? activeAdvancedSettings.TACAN.XY : "X"}
-                      className={`my-auto w-20`}
-                    >
+                    <OlDropdown label={activeAdvancedSettings ? activeAdvancedSettings.TACAN.XY : "X"} className={`
+                      my-auto w-20
+                    `}>
                       <OlDropdownItem
                         key={"X"}
                         onClick={() => {
@@ -1296,11 +1302,9 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                       className={`
                         flex content-center gap-2 rounded-full
                         ${selectedUnits[0].getFuel() > 40 && `bg-green-700`}
-                        ${
-                          selectedUnits[0].getFuel() > 10 &&
-                          selectedUnits[0].getFuel() <= 40 &&
-                          `bg-yellow-700`
-                        }
+                        ${selectedUnits[0].getFuel() > 10 && selectedUnits[0].getFuel() <= 40 && `
+                          bg-yellow-700
+                        `}
                         ${selectedUnits[0].getFuel() <= 10 && `bg-red-700`}
                         px-2 py-1 text-sm font-bold text-white
                       `}

frontend/react/src/ui/ui.tsx

@@ -28,7 +28,7 @@ import { AppStateChangedEvent, MapOptionsChangedEvent } from "../events";
 import { GameMasterMenu } from "./panels/gamemastermenu";
 import { InfoBar } from "./panels/infobar";
 import { HotGroupBar } from "./panels/hotgroupsbar";
-import { SpawnContextMenu } from "./contextmenus/SpawnContextmenu";
+import { SpawnContextMenu } from "./contextmenus/spawncontextmenu";
 import { CoordinatesPanel } from "./panels/coordinatespanel";
 
 export type OlympusUIState = {