Multiple small improvements and bugfixes

2025-10-29 16:56:34 +00:00 · 2024-10-19 10:53:43 +02:00
parent 0c5139f5ee
commit 7fa39561e3
17 changed files with 133 additions and 70 deletions
--- a/frontend/react/src/ui/contextmenus/mapcontextmenu.tsx
+++ b/frontend/react/src/ui/contextmenus/mapcontextmenu.tsx
@@ -16,7 +16,7 @@ export function MapContextMenu(props: {}) {
  const [xPosition, setXPosition] = useState(0);
  const [yPosition, setYPosition] = useState(0);
  const [latLng, setLatLng] = useState(null as null | LatLng);
-  const [unit, setUnit] = useState(null as null | Unit)
+  const [unit, setUnit] = useState(null as null | Unit);

  var contentRef = useRef(null);

@@ -84,7 +84,7 @@ export function MapContextMenu(props: {}) {
    getApp()
      .getUnitsManager()
      .getSelectedUnits()
-      .filter(unit => !unit.getHuman())
+      .filter((unit) => !unit.getHuman())
      .forEach((unit: Unit) => {
        unit.appendContextActions(newContextActionSet);
      });
@@ -93,6 +93,15 @@ export function MapContextMenu(props: {}) {
    return newContextActionSet;
  }

+  let colors = [null, "white", "green", "purple", "blue", "red"];
+  let reorderedActions: ContextAction[] = [];
+  colors.forEach((color) => {
+    Object.values(contextActionsSet.getContextActions()).forEach((contextAction: ContextAction) => {
+      if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
+      else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
+    });
+  });
+
  return (
    <>
      {open && (
@@ -108,10 +117,19 @@ export function MapContextMenu(props: {}) {
                flex w-full flex-col gap-2 overflow-x-auto no-scrollbar p-2
              `}
            >
-              {Object.values(contextActionsSet.getContextActions(latLng? "position": "unit")).map((contextAction) => {
+              {Object.values(contextActionsSet.getContextActions(latLng ? "position" : "unit")).map((contextAction) => {
+                const colorString = contextAction.getOptions().buttonColor
+                  ? `
+                  border-2
+                  border-${contextAction.getOptions().buttonColor}-500
+                `
+                  : "";
                return (
                  <OlDropdownItem
-                    className="flex w-full content-center gap-2 text-white"
+                    className={`
+                      flex w-full content-center gap-2 text-white
+                      ${colorString}
+                    `}
                    onClick={() => {
                      if (contextAction.getOptions().executeImmediately) {
                        contextAction.executeCallback(null, null);
--- a/frontend/react/src/ui/modals/login.tsx
+++ b/frontend/react/src/ui/modals/login.tsx
@@ -15,7 +15,7 @@ export function LoginModal(props: {
  onBack: () => void;
 }) {
  const [password, setPassword] = useState("");
-  const [displayName, setDisplayName] = useState("");
+  const [displayName, setDisplayName] = useState("Game Master");

  return (
    <Modal
@@ -29,9 +29,7 @@ export function LoginModal(props: {
    >
      <img
        src="/vite/images/splash/1.jpg"
-        className={`
-        contents-center w-full object-cover opacity-[7%]
-      `}
+        className={`contents-center w-full object-cover opacity-[7%]`}
      ></img>
      <div
        className={`
@@ -92,9 +90,7 @@ export function LoginModal(props: {
                  <span className="size-[80px] min-w-14">
                    <img
                      src="..\vite\images\olympus-500x500.png"
-                      className={`
-                      flex w-full
-                    `}
+                      className={`flex w-full`}
                    ></img>
                  </span>
                  <div className={`flex flex-col items-start gap-1`}>
@@ -204,6 +200,7 @@ export function LoginModal(props: {
                              focus:border-blue-500 focus:ring-blue-500
                            `}
                            placeholder="Enter display name"
+                            value={displayName}
                            required
                          />
                        </div>
--- a/frontend/react/src/ui/panels/airbasemenu.tsx
+++ b/frontend/react/src/ui/panels/airbasemenu.tsx
@@ -50,12 +50,14 @@ export function AirbaseMenu(props: { open: boolean; onClose: () => void; airbase

          <OlAccordion title={`Runways`} className="!p-0 !text-gray-400">
            <div className="flex flex-col gap-2">
-              {props.airbase?.getChartData().runways.map((runway) => {
+              {props.airbase?.getChartData().runways.map((runway, idx) => {
                return (
                  <>
                    {Object.keys(runway.headings[0]).map((runwayName) => {
                      return (
-                        <div className="flex w-full justify-between">
+                        <div key={`${idx}-${runwayName}`} className={`
+                          flex w-full justify-between
+                        `}>
                          <span>
                            {" "}
                            <span className="text-gray-400">RWY</span> {runwayName}
--- a/frontend/react/src/ui/panels/components/sourcepanel.tsx
+++ b/frontend/react/src/ui/panels/components/sourcepanel.tsx
@@ -116,7 +116,7 @@ export const AudioSourcePanel = forwardRef((props: { source: AudioSource; onExpa
              <OlRangeSlider
                value={props.source.getVolume() * 100}
                min={0}
-                max={200}
+                max={100}
                onChange={(ev) => {
                  props.source.setVolume(parseFloat(ev.currentTarget.value) / 100);
                }}
--- a/frontend/react/src/ui/panels/drawingmenu.tsx
+++ b/frontend/react/src/ui/panels/drawingmenu.tsx
@@ -43,11 +43,6 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {

      /* Align the state of the coalition toggle to the coalition of the area */
      if (activeCoalitionArea && activeCoalitionArea?.getCoalition() !== areaCoalition) setAreaCoalition(activeCoalitionArea?.getCoalition());
-
-      if (!props.open) {
-        if ([COALITIONAREA_EDIT, COALITIONAREA_DRAW_CIRCLE, COALITIONAREA_DRAW_POLYGON].includes(getApp().getMap().getState()))
-          getApp().getMap().setState(IDLE);
-      }
    }
  });

--- a/frontend/react/src/ui/panels/formationmenu.tsx
+++ b/frontend/react/src/ui/panels/formationmenu.tsx
@@ -103,6 +103,7 @@ export function FormationMenu(props: {
              .map((optionFormationType) => {
                return (
                  <OlDropdownItem
+                    key={optionFormationType}
                    onClick={() => {
                      setCount(count + 1);
                      setFormationType(optionFormationType);
@@ -231,7 +232,7 @@ export function FormationMenu(props: {
              .forEach((unit, idx) => {
                if (units.length > 0 && units[0] !== null && idx != 0) {
                  const ID = units[0].ID;
-                  
+
                  const [dx, dz] = [
                    -(silhouetteHandles[idx].position.y - silhouetteHandles[0].position.y),
                    silhouetteHandles[idx].position.x - silhouetteHandles[0].position.x,
@@ -265,7 +266,9 @@ export function FormationMenu(props: {
            style={{
              width: `${referenceWidth}px`,
            }}
-          ><div className="translate-y-[-8px]">{referenceDistance}ft</div></div>
+          >
+            <div className="translate-y-[-8px]">{referenceDistance}ft</div>
+          </div>
        </div>

        <div
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -3,7 +3,7 @@ import { OlStateButton } from "../components/olstatebutton";
 import { faGamepad, faRuler, faPencil, faEllipsisV, faCog, faQuestionCircle, faPlusSquare, faMagnifyingGlass, faRadio, faVolumeHigh, faJ } from "@fortawesome/free-solid-svg-icons";
 import { EventsConsumer } from "../../eventscontext";
 import { StateConsumer } from "../../statecontext";
-import { IDLE } from "../../constants/constants";
+import { CONTEXT_ACTION, IDLE } from "../../constants/constants";

 export function SideBar() {
  return (
@@ -42,7 +42,7 @@ export function SideBar() {
                  <OlStateButton
                    onClick={events.toggleUnitControlMenuVisible}
                    checked={appState.unitControlMenuVisible}
-                    icon={appState.mapState === IDLE? faMagnifyingGlass: faGamepad}
+                    icon={appState.mapState !== CONTEXT_ACTION? faMagnifyingGlass: faGamepad}
                    tooltip="Hide/show selection tool and unit control menu"
                  ></OlStateButton>
                  <OlStateButton onClick={events.toggleMeasureMenuVisible} checked={appState.measureMenuVisible} icon={faRuler} tooltip="NOT IMPLEMENTED"></OlStateButton>
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -137,6 +137,10 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
    });
  }, []);

+  useEffect(() => {
+    setShowAdvancedSettings(false);
+  }, [selectedUnits])
+
  /* Update the current values of the shown data */
  function updateData() {
    const getters = {
--- a/frontend/react/src/ui/panels/unitmousecontrolbar.tsx
+++ b/frontend/react/src/ui/panels/unitmousecontrolbar.tsx
@@ -72,6 +72,15 @@ export function UnitMouseControlBar(props: {}) {
    sr > 1 && scrolledRight && setScrolledRight(false);
  }

+  let colors = [null, "white", "green", "purple", "blue", "red"];
+  let reorderedActions: ContextAction[] = [];
+  colors.forEach((color) => {
+    Object.values(contextActionsSet.getContextActions()).forEach((contextAction: ContextAction) => {
+      if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
+      else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
+    });
+  });
+
  return (
    <>
      {open && Object.keys(contextActionsSet.getContextActions()).length > 0 && (
@@ -93,13 +102,21 @@ export function UnitMouseControlBar(props: {}) {
              />
            )}
            <div className="flex gap-2 overflow-x-auto no-scrollbar p-2" onScroll={(ev) => onScroll(ev.target)} ref={scrollRef}>
-              {Object.values(contextActionsSet.getContextActions()).map((contextAction: ContextAction) => {
+              {reorderedActions.map((contextAction: ContextAction) => {
                return (
                  <OlStateButton
                    key={contextAction.getId()}
                    checked={contextAction === activeContextAction}
                    icon={contextAction.getIcon()}
                    tooltip={contextAction.getLabel()}
+                    className={
+                      contextAction.getOptions().buttonColor
+                        ? `
+                          border-2
+                          border-${contextAction.getOptions().buttonColor}-500
+                        `
+                        : ""
+                    }
                    onClick={() => {
                      if (contextAction.getOptions().executeImmediately) {
                        setActiveContextAction(null);
--- a/frontend/react/src/ui/ui.tsx
+++ b/frontend/react/src/ui/ui.tsx
@@ -79,14 +79,13 @@ export function UI() {
      setMapOptions({ ...getApp().getMap().getOptions() });
    });

-    document.addEventListener("mapStateChanged", (ev) => {
-      //if ((ev as CustomEvent).detail === IDLE) hideAllMenus();
-      /*else*/ if ((ev as CustomEvent).detail === CONTEXT_ACTION && window.innerWidth > 1000) setUnitControlMenuVisible(true);
-      setMapState(String((ev as CustomEvent).detail));
-    });
+    document.addEventListener("mapStateChanged", (ev: CustomEventInit) => {
+      if (ev.detail === IDLE || ev.detail === CONTEXT_ACTION || mapState !== IDLE) {
+        hideAllMenus();
+      }

-    document.addEventListener("hideAllMenus", (ev) => {
-      hideAllMenus();
+      if (ev.detail === CONTEXT_ACTION && window.innerWidth > 1000) setUnitControlMenuVisible(true);
+      setMapState(ev.detail);
    });

    document.addEventListener("mapSourceChanged", (ev) => {
@@ -116,14 +115,16 @@ export function UI() {

    document.addEventListener("showProtectionPrompt", (ev: CustomEventInit) => {
      setProtectionPromptVisible(true);
-      setProtectionCallback(() => {return ev.detail.callback});
+      setProtectionCallback(() => {
+        return ev.detail.callback;
+      });
      setProtectionUnits(ev.detail.units);
    });

    document.addEventListener("showUnitExplosionMenu", (ev) => {
      setUnitExplosionMenuVisible(true);
      setUnitExplosionUnits((ev as CustomEvent).detail.units);
-    })
+    });
  }, []);

  function hideAllMenus() {
@@ -137,6 +138,7 @@ export function UI() {
    setAudioMenuVisible(false);
    setFormationMenuVisible(false);
    setUnitExplosionMenuVisible(false);
+    setJTACMenuVisible(false);
  }

  function checkPassword(password: string) {