Added ability to hide spawn menu

frontend/react/src/map/map.ts

@@ -763,13 +763,8 @@ export class Map extends L.Map {
           if (this.#state === IDLE) {
             this.deselectAllCoalitionAreas();
           } else if (this.#state === MOVE_UNIT) {
-                getApp().getUnitsManager().clearDestinations();
+            getApp().getUnitsManager().clearDestinations();
-              getApp()
+            getApp().getUnitsManager().addDestination(e.latlng, false, 0);
-                .getUnitsManager()
-                .addDestination(e.latlng,
-                  false,
-                  0
-                );
           } else if (this.#state === SPAWN_UNIT) {
             if (this.#spawnRequestTable !== null) {
               const location = e.latlng;
@@ -821,9 +816,7 @@ export class Map extends L.Map {
     this.setState(IDLE);
   }
 
-  #onContextMenu(e: any) {
+  #onContextMenu(e: any) {}
-    
-  }
 
   #onSelectionStart(e: any) {
     this.#selecting = true;
@@ -841,9 +834,7 @@ export class Map extends L.Map {
     this.#updateCursor();
   }
 
-  #onMouseDown(e: any) {
+  #onMouseDown(e: any) {}
-    
-  }
 
   #onMouseMove(e: any) {
     this.#lastMousePosition.x = e.originalEvent.x;

frontend/react/src/ui/components/ollabeltoggle.tsx

@@ -11,7 +11,7 @@ export function OlLabelToggle(props: {
       onClick={props.onClick}
       className={`
         relative flex h-10 w-[120px] flex-none cursor-pointer select-none
-        flex-row justify-between rounded-md border border px-1 py-[5px] text-sm
+        flex-row justify-between rounded-md border px-1 py-[5px] text-sm
         contents-center
         dark:border-gray-600 dark:border-transparent dark:bg-gray-700
         dark:hover:bg-gray-600 dark:focus:ring-blue-800
@@ -33,7 +33,6 @@ export function OlLabelToggle(props: {
         className={`
           my-auto pl-3 font-normal transition-colors z-ui-2
           dark:data-[active='false']:text-gray-400
-          dark:data-[active='false']:text-gray-400
           dark:data-[active='true']:text-white
         `}
       >

frontend/react/src/ui/components/olstatebutton.tsx

@@ -13,7 +13,6 @@ import { OlTooltip } from "./oltooltip";
 export function OlStateButton(props: {
   className?: string;
   checked: boolean;
-  highlighted?: boolean;
   icon: IconProp;
   tooltip: string;
   onClick: () => void;
@@ -26,8 +25,6 @@ export function OlStateButton(props: {
     `
       h-[40px] w-[40px] flex-none rounded-md text-lg font-medium
       dark:bg-olympus-600 dark:text-gray-300 dark:hover:bg-olympus-300
-      dark:data-[highlighted='true']:border-[2px]
-      dark:data-[highlighted='true']:border-blue-800
       dark:data-[checked='true']:bg-blue-500
       dark:data-[checked='true']:text-white
     `;
@@ -41,7 +38,6 @@ export function OlStateButton(props: {
           setHover(false);
         }}
         data-checked={props.checked}
-        data-highlighted={props.highlighted ?? false}
         type="button"
         className={className}
         onMouseEnter={() => {
@@ -61,7 +57,6 @@ export function OlStateButton(props: {
 export function OlRoundStateButton(props: {
   className?: string;
   checked: boolean;
-  highlighted?: boolean;
   icon: IconProp;
   tooltip: string;
   onClick: () => void;

frontend/react/src/ui/panels/components/menu.tsx

@@ -1,57 +1,78 @@
 import { faArrowLeft, faClose } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
+import React, { useState } from "react";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 
 export function Menu(props: {
   title: string;
   open: boolean;
   onClose: () => void;
+  canBeHidden?: boolean;
   onBack?: () => void;
   showBackButton?: boolean;
   children?: JSX.Element | JSX.Element[];
 }) {
+  const [hide, setHide] = useState(true);
+
+  if (!props.open && hide) setHide(false);
+
   return (
     <div
       data-open={props.open}
+      data-hide={hide}
       className={`
         absolute left-16 right-0 top-[58px] bg-gray-200 backdrop-grayscale
-        z-ui-3 h-screen overflow-y-auto backdrop-blur-lg transition-transform
+        z-ui-3 h-[calc(100vh-58px)] backdrop-blur-lg transition-transform
         dark:bg-olympus-800/90
+        data-[hide='true']:-translate-y-[calc(100vh-1.5rem-58px)]
         data-[open='false']:-translate-x-full
         sm:w-[400px]
       `}
       tabIndex={-1}
     >
-      <h5
+      <div className={`
-        className={`
+        h-[calc(100vh-58px-1.5rem)] overflow-y-auto overflow-x-hidden
-          inline-flex w-full items-center px-5 py-3 pb-2 font-semibold
+      `}>
-          text-gray-800 shadow-lg
+        <h5
-          dark:text-gray-400
+          className={`
-        `}
+            inline-flex w-full items-center px-5 py-3 pb-2 font-semibold
-      >
+            text-gray-800 shadow-lg
-        {props.showBackButton && (
+            dark:text-gray-400
+          `}
+        >
+          {props.showBackButton && (
+            <FontAwesomeIcon
+              onClick={props.onBack ?? (() => {})}
+              icon={faArrowLeft}
+              className={`
+                mr-1 cursor-pointer rounded-md p-2
+                dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
+              `}
+            />
+          )}{" "}
+          {props.title}
           <FontAwesomeIcon
-            onClick={props.onBack ?? (() => {})}
+            onClick={props.onClose}
-            icon={faArrowLeft}
+            icon={faClose}
             className={`
-              mr-1 cursor-pointer rounded-md p-2
+              ml-auto flex cursor-pointer items-center justify-center rounded-md
+              p-2 text-lg
               dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
+              hover:bg-gray-200
             `}
           />
-        )}{" "}
+        </h5>
-        {props.title}
+        {props.children}
-        <FontAwesomeIcon
+      </div>
-          onClick={props.onClose}
+      {props.canBeHidden == true && (
-          icon={faClose}
+        <div className="flex h-6 justify-center" onClick={() => setHide(!hide)}>
-          className={`
+          {hide ? (
-            ml-auto flex cursor-pointer items-center justify-center rounded-md
+            <FaChevronDown className="mx-auto my-auto text-gray-400" />
-            p-2 text-lg
+          ) : (
-            dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
+            <FaChevronUp className="mx-auto my-auto text-gray-400" />
-            hover:bg-gray-200
+          )}
-          `}
+        </div>
-        />
+      )}
-      </h5>
-      {props.children}
     </div>
   );
 }

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

@@ -39,7 +39,7 @@ export function Header() {
             <nav
               className={`
                 flex w-full gap-4 border-gray-200 bg-gray-300 px-3
-                drop-shadow-md z-ui-2 align-center
+                drop-shadow-md z-ui-4 align-center
                 dark:border-gray-800 dark:bg-olympus-900
               `}
             >

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

@@ -72,7 +72,7 @@ export function MiniMapPanel(props: {}) {
       onClick={() => setShowMissionTime(!showMissionTime)}
       className={`
         absolute right-[10px]
-        ${showMinimap ? `top-[232px]` : `top-[70px]`}
+        ${showMinimap ? `top-[232px]` : `top-[90px]`}
         w-[288px] z-ui-0 flex items-center justify-between
         ${showMinimap ? `rounded-b-lg` : `rounded-lg`}
         bg-gray-200 p-3 text-sm backdrop-blur-lg backdrop-grayscale
@@ -114,13 +114,13 @@ export function MiniMapPanel(props: {}) {
           onClick={() => {
             getApp().getMap().setOption("showMinimap", false);
           }}
-        ></FaChevronUp>
+        />
       ) : (
         <FaChevronDown
           onClick={() => {
             getApp().getMap().setOption("showMinimap", true);
           }}
-        ></FaChevronDown>
+        />
       )}
     </div>
   );

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

@@ -52,7 +52,6 @@ export function SideBar() {
                     checked={appState.spawnMenuVisible}
                     icon={faPlusSquare}
                     tooltip="Hide/show unit spawn menu"
-                    highlighted={mapState === SPAWN_UNIT}
                   ></OlStateButton>
                   <OlStateButton
                     onClick={events.toggleUnitControlMenuVisible}

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

@@ -15,7 +15,7 @@ import {
   olButtonsVisibilityHelicopter,
   olButtonsVisibilityNavyunit,
 } from "../components/olicons";
-import { IDLE } from "../../constants/constants";
+import { IDLE, SPAWN_UNIT } from "../../constants/constants";
 
 library.add(faPlus);
 
@@ -75,11 +75,19 @@ export function SpawnMenu(props: {
   filteredAirDefense = filterUnits(filteredAirDefense, filterString);
   filteredGroundUnits = filterUnits(filteredGroundUnits, filterString);
 
+  if (!props.open) {
+    if (getApp()?.getMap()?.getState() === SPAWN_UNIT)
+      getApp().getMap().setState(IDLE);
+    if (blueprint !== null)
+      setBlueprint(null);
+  }
+
   return (
     <Menu
       {...props}
       title="Spawn menu"
       showBackButton={blueprint !== null}
+      canBeHidden={true}
       onBack={() => {
         getApp().getMap().setState(IDLE);
         setBlueprint(null);

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

@@ -36,7 +36,8 @@ import { Coalition } from "../../types/types";
 import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
 
 export function UnitControlMenu(props: {
-  open: boolean
+  open: boolean;
+  onClose: () => void;
 }) {
   var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
 
@@ -184,7 +185,7 @@ export function UnitControlMenu(props: {
     getApp()?.getUnitsManager()?.getSelectedUnitsCategories() ?? [];
 
   return (
-    <Menu open={props.open} title="Units selected (x)" onClose={() => {}}>
+    <Menu open={props.open} title="Units selected (x)" onClose={props.onClose}>
       {/* Units list */}
       <div
         className={`

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

@@ -54,7 +54,7 @@ export function UnitSpawnMenu(props: { blueprint: UnitBlueprint }) {
         });
     } else {
       if (getApp()?.getMap()?.getState() === SPAWN_UNIT)
-        getApp()?.getMap()?.setState(IDLE);
+        getApp().getMap().setState(IDLE);
     }
   });
 

frontend/react/src/ui/ui.tsx

@@ -224,7 +224,10 @@ export function UI() {
                 options={mapOptions}
               />
               <MiniMapPanel />
-              <UnitControlMenu open={unitControlMenuVisible} />
+              <UnitControlMenu
+                open={unitControlMenuVisible}
+                onClose={() => setUnitControlMenuVisible(false)}
+              />
               <div id="map-container" className="h-full w-screen" />
               <UnitMouseControlBar />
             </div>