More work on small screens

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

@@ -99,8 +99,7 @@ export function OlDropdown(props: {
           inline-flex w-full items-center justify-between rounded-lg border
           bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white
           dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100
-          dark:hover:bg-gray-600 dark:focus:ring-blue-800
-          focus:outline-none focus:ring-2 focus:ring-blue-300
+          dark:hover:bg-gray-600
           hover:bg-blue-800
         `}
         type="button"
@@ -135,8 +134,8 @@ export function OlDropdown(props: {
         ref={contentRef}
         data-open={open}
         className={`
-          absolute z-ui-4 w-full divide-y divide-gray-100 overflow-y-scroll
-          rounded-lg bg-white p-2 shadow
+          absolute z-ui-4 divide-y divide-gray-100 overflow-y-scroll rounded-lg
+          bg-white p-2 shadow
           dark:bg-gray-700
           data-[open='false']:hidden
         `}

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

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

@@ -14,7 +14,7 @@ export function Menu(props: {
     <div
       data-open={props.open}
       className={`
-        absolute left-16 right-0 top-[60px] bg-gray-200 backdrop-grayscale
+        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
         dark:bg-olympus-800/90
         data-[open='false']:-translate-x-full

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

@@ -31,8 +31,6 @@ import {
 } from "../components/olicons";
 
 export function Header() {
-  const [collapsed, setCollapsed] = useState(true);
-
   return (
     <StateConsumer>
       {(appState) => (
@@ -40,29 +38,28 @@ export function Header() {
           {() => (
             <nav
               className={`
-                ${collapsed ? "h-[60px]" : "h-fit"}
-                flex w-screen border-gray-200 bg-gray-300 px-3 drop-shadow-md
-                z-ui-2
+                flex w-full gap-4 border-gray-200 bg-gray-300 px-3
+                drop-shadow-md z-ui-2 align-center
                 dark:border-gray-800 dark:bg-olympus-900
               `}
             >
+              <img
+                src="images/icon.png"
+                className="my-auto h-10 w-10 rounded-md p-0"
+              ></img>
               <div
                 className={`
-                  my-2 flex w-full max-w-full flex-wrap items-center justify-end
-                  gap-3 overflow-hidden
+                  my-2 flex w-full items-center gap-3 overflow-x-scroll
+                  no-scrollbar
                 `}
               >
                 <div
                   className={`
-                    mr-auto flex flex-none basis-5/6 flex-row items-center
-                    justify-start gap-6
-                    sm:basis-0
+                    mr-auto hidden flex-none flex-row items-center justify-start
+                    gap-6
+                    lg:flex
                   `}
                 >
-                  <img
-                    src="images/icon.png"
-                    className="h-10 w-10 rounded-md p-0"
-                  ></img>
                   <div className="flex flex-col items-start">
                     <div
                       className={`
@@ -92,12 +89,6 @@ export function Header() {
                     </div>
                   </div>
                 </div>
-                <OlStateButton
-                  onClick={() => setCollapsed(!collapsed)}
-                  checked={!collapsed}
-                  icon={faBars}
-                  tooltip={"Show more options"}
-                ></OlStateButton>
                 <div>
                   <OlLockStateButton
                     checked={false}
@@ -105,6 +96,7 @@ export function Header() {
                     tooltip="Lock/unlock protected units (from scripted mission)"
                   />
                 </div>
+                <div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
                 <div
                   className={`
                     flex h-fit flex-row items-center justify-start gap-1
@@ -133,11 +125,7 @@ export function Header() {
                     );
                   })}
                 </div>
-                <div
-                  className={`
-                                  h-8 w-0 border-l-[2px] border-gray-700
-                                `}
-                ></div>
+                <div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
                 <div
                   className={`
                     flex h-fit flex-row items-center justify-start gap-1
@@ -180,11 +168,7 @@ export function Header() {
                     tooltip={"Hide/show neutral units"}
                   />
                 </div>
-                <div
-                  className={`
-                                  h-8 w-0 border-l-[2px] border-gray-700
-                                `}
-                ></div>
+                <div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
                 <div
                   className={`
                     flex h-fit flex-row items-center justify-start gap-1
@@ -230,12 +214,12 @@ export function Header() {
                   onClick={() => {}}
                   tooltip="Activate/deactivate camera plugin"
                 />
-                <OlDropdown label={appState.activeMapSource} className="w-80">
+                <OlDropdown label={appState.activeMapSource} className="w-40">
                   {appState.mapSources.map((source) => {
                     return (
                       <OlDropdownItem
                         key={source}
-                        className="w-full"
+                        className="w-52"
                         onClick={() => getApp().getMap().setLayerName(source)}
                       >
                         {source}

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

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import { FaHandPointer } from "react-icons/fa6";
-import { IDLE, SPAWN_UNIT } from "../../constants/constants";
-
-export function MapStatePanel(props: {}) {
-  const [mapState, setMapState] = useState(IDLE);
-
-  document.addEventListener("mapStateChanged", (ev) => {
-    setMapState((ev as CustomEvent).detail);
-  });
-
-  return (
-    <div
-      className={`
-        absolute bottom-6 right-[10px] w-[288px] z-ui-5 flex items-center
-        justify-between rounded-lg bg-gray-200 p-3 text-sm backdrop-blur-lg
-        backdrop-grayscale
-        dark:bg-olympus-800/90 dark:text-gray-200
-      `}
-    >
-      <div className={`flex w-full items-center gap-2 font-semibold`}>
-        {mapState === IDLE && "IDLE"}
-        {mapState === SPAWN_UNIT && (
-          <div className={`flex w-full items-center`}>
-            <FaHandPointer className="mr-2 text-sm text-white" />
-            <div
-              className={`
-                w-full animate-pulse border-l-[1px] px-2 text-center
-                dark:text-white
-              `}
-            >
-              Click on the map to spawn
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { OlStateButton } from "../components/olstatebutton";
 import {
-  faPlus,
   faGamepad,
   faRuler,
   faPencil,
@@ -12,8 +11,15 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { EventsConsumer } from "../../eventscontext";
 import { StateConsumer } from "../../statecontext";
+import { IDLE, SPAWN_UNIT } from "../../constants/constants";
 
 export function SideBar() {
+  const [mapState, setMapState] = useState(IDLE);
+
+  document.addEventListener("mapStateChanged", (ev) => {
+    setMapState((ev as CustomEvent).detail)
+  });
+
   return (
     <StateConsumer>
       {(appState) => (
@@ -46,6 +52,7 @@ 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,6 +15,7 @@ import {
   olButtonsVisibilityHelicopter,
   olButtonsVisibilityNavyunit,
 } from "../components/olicons";
+import { IDLE } from "../../constants/constants";
 
 library.add(faPlus);
 
@@ -74,15 +75,15 @@ export function SpawnMenu(props: {
   filteredAirDefense = filterUnits(filteredAirDefense, filterString);
   filteredGroundUnits = filterUnits(filteredGroundUnits, filterString);
 
-  /* When the menu is closed, reset the blueprint */
-  if (!props.open && blueprint !== null) setBlueprint(null);
-
   return (
     <Menu
       {...props}
       title="Spawn menu"
       showBackButton={blueprint !== null}
-      onBack={() => setBlueprint(null)}
+      onBack={() => {
+        getApp().getMap().setState(IDLE);
+        setBlueprint(null);
+      }}
     >
       <>
         {blueprint === null && (

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

@@ -4,7 +4,7 @@ import { ContextActionSet } from "../../unit/contextactionset";
 import { OlStateButton } from "../components/olstatebutton";
 import { getApp } from "../../olympusapp";
 import { ContextAction } from "../../unit/contextaction";
-import { CONTEXT_ACTION } from "../../constants/constants";
+import { CONTEXT_ACTION, MOVE_UNIT } from "../../constants/constants";
 import { FaInfoCircle } from "react-icons/fa";
 
 export function UnitMouseControlBar(props: {}) {
@@ -40,7 +40,7 @@ export function UnitMouseControlBar(props: {}) {
 
   /* Deselect the context action when exiting state */
   document.addEventListener("mapStateChanged", (ev) => {
-    setOpen((ev as CustomEvent).detail === CONTEXT_ACTION);
+    setOpen((ev as CustomEvent).detail === CONTEXT_ACTION || (ev as CustomEvent).detail === MOVE_UNIT);
   });
 
   /* Update the current values of the shown data */
@@ -91,7 +91,7 @@ export function UnitMouseControlBar(props: {}) {
                           setActiveContextAction(null);
                           getApp()
                             .getMap()
-                            .setState(CONTEXT_ACTION, { contextAction: null });
+                            .setState(MOVE_UNIT);
                         }
                       }
                     }}

frontend/react/src/ui/ui.css

@@ -3,10 +3,6 @@
   width: 10px;
 }
 
-/* Track */
-::-webkit-scrollbar-track {
-}
-
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #ffffffaa;
@@ -15,7 +11,7 @@
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
+.tiny-scrollbar::-webkit-scrollbar {
   display: none;
 }
 
@@ -93,3 +89,14 @@ input[type="range"]:active::-moz-range-thumb {
 input[type="range"]:focus::-moz-range-thumb {
   box-shadow: 0 0 0 13px #3f83f855;
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

frontend/react/src/ui/ui.tsx

@@ -24,7 +24,6 @@ import { LoginModal } from "./modals/login";
 import { sha256 } from "js-sha256";
 import { MiniMapPanel } from "./panels/minimappanel";
 import { UnitMouseControlBar } from "./panels/unitmousecontrolbar";
-import { MapStatePanel } from "./panels/mapstatepanel";
 
 export type OlympusState = {
   mainMenuVisible: boolean;
@@ -61,11 +60,11 @@ export function UI() {
     setMapOptions({ ...getApp().getMap().getOptions() });
   });
 
-  document.addEventListener("mapStateChanged", (ev) => {
-    if ((ev as CustomEvent).detail == IDLE) {
-      hideAllMenus();
-    }
-  });
+  //document.addEventListener("mapStateChanged", (ev) => {
+  //  if ((ev as CustomEvent).detail == IDLE) {
+  //    hideAllMenus();
+  //  }
+  //});
 
   document.addEventListener("mapSourceChanged", (ev) => {
     var source = (ev as CustomEvent).detail;
@@ -228,7 +227,6 @@ export function UI() {
               <UnitControlMenu open={unitControlMenuVisible} />
               <div id="map-container" className="h-full w-screen" />
               <UnitMouseControlBar />
-              <MapStatePanel />
             </div>
           </div>
         </EventsProvider>