Staging

beta-src/src/components/ui/WDBuildCounts.tsx

@@ -37,7 +37,7 @@ const WDBuildCounts: React.FC = function (): React.ReactElement {
     <div
       className={`${
         (numRemainingBuilds > 0 || numRemainingDestroys > 0) &&
-        "display-block px-7 py-3 mt-1 bg-[#1C2B33] rounded-xl mb-3"
+        "display-block px-7 py-3 mt-1 bg-black rounded-xl mb-3"
       }`}
     >
       <div className="pr-2 flex">

beta-src/src/components/ui/WDCenterCounts.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement, FunctionComponent } from "react";
+import { useWindowSize } from "react-use";
+import { gameOverview } from "../../state/game/game-api-slice";
+import { useAppSelector } from "../../state/hooks";
+
+const WDCenterCounts: FunctionComponent = function (): ReactElement {
+  const { members } = useAppSelector(gameOverview);
+
+  const sortedMembers = [...members].sort((a, b) => a.countryID - b.countryID);
+
+  return (
+    <div className="flex justify-center items-center">
+      {sortedMembers.map((m) => (
+        <span key={m.countryID} className="pl-1 pr-1">
+          {m.country.substring(0, 3)}: {m.supplyCenterNo}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default WDCenterCounts;

beta-src/src/components/ui/WDClassesJIT.tsx

@@ -4,7 +4,7 @@ const WDClassesJIT: FunctionComponent = function (): ReactElement {
   return (
     <>
       {/* This are the classes that wouldn't show because they were used  */}
-      <div className="hidden bottom-14 bottom-4 bottom-40 text-france-main text-france-light text-austria-main text-austria-light text-england-main text-england-light text-germany-main text-germany-light text-russia-main text-russia-light text-italy-main text-italy-light text-turkey-main text-turkey-light bg-france-main bg-austria-main bg-austria-light bg-england-main bg-england-light bg-germany-main bg-germany-light bg-russia-main bg-russia-light bg-italy-main bg-italy-light bg-turkey-main bg-turkey-light" />
+      <div className="hidden bottom-14 bottom-4 bottom-3 bottom-6 bottom-8 bottom-10 bottom-40 text-france-main text-france-light text-austria-main text-austria-light text-england-main text-england-light text-germany-main text-germany-light text-russia-main text-russia-light text-italy-main text-italy-light text-turkey-main text-turkey-light bg-france-main bg-austria-main bg-austria-light bg-england-main bg-england-light bg-germany-main bg-germany-light bg-russia-main bg-russia-light bg-italy-main bg-italy-light bg-turkey-main bg-turkey-light" />
     </>
   );
 };

beta-src/src/components/ui/WDUI.tsx

@@ -1,4 +1,5 @@
 import React, { useState, FunctionComponent, ReactElement } from "react";
+import { useWindowSize } from "react-use";
 import { useTheme } from "@mui/material";
 import WDShortcuts from "./WDShortcuts";
 
@@ -26,6 +27,9 @@ import {
   getHistoricalPhaseSeasonYear,
 } from "../../utils/state/getPhaseSeasonYear";
 import WDClassesJIT from "./WDClassesJIT";
+import WDPositionContainer from "./WDPositionContainer";
+import Position from "../../enums/Position";
+import WDCenterCounts from "./WDCenterCounts";
 // import WDLoading from "../miscellaneous/Loading";
 
 interface WDUIProps {
@@ -74,6 +78,7 @@ const WDUI: FunctionComponent<WDUIProps> = function ({
   const userTableData = user ? constructTableData(user.member) : null;
 
   const gameStatusData = useAppSelector(gameStatus);
+  const { width } = useWindowSize();
 
   const { viewedPhaseIdx } = useAppSelector(gameViewedPhase);
 
@@ -140,6 +145,13 @@ const WDUI: FunctionComponent<WDUIProps> = function ({
         viewedPhase={viewedPhase}
         totalPhases={gameStatusData.phases.length}
       />
+
+      {width <= 650 && phase !== "Pre-game" && (
+        <div className="bg-black text-white items-center p-1 m-0 font-medium uppercase text-xs absolute bottom-0 z-30 left-0 center w-full">
+          <WDCenterCounts />
+        </div>
+      )}
+
       <WDClassesJIT />
       <WDShortcuts
         onPhaseSelectorShortcut={() => setPhaseSelectorOpen(!phaseSelectorOpen)}

beta-src/src/components/ui/main-screen/BottomLeft.tsx

@@ -19,13 +19,9 @@ const BottomLeft: FunctionComponent<BottomLeftProps> = function ({
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
       {user && phase !== "Pre-game" && (
-        <WDPositionContainer
-          position={Position.BOTTOM_LEFT}
-          bottom={phaseSelectorOpen ? 40 : 4}
-        >
-          <AutoSaveToggle className="hidden mb-3 sm:block" />
+        <WDPositionContainer position={Position.BOTTOM_LEFT} bottom={8}>
+          <AutoSaveToggle className="mb-3" />
           <WDOrderStatusControls orderStatus={user?.member.orderStatus} />
-          <AutoSaveToggle className="sm:hidden mt-3 sm:mt-0" />
         </WDPositionContainer>
       )}
     </>

beta-src/src/components/ui/main-screen/BottomMiddle.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../../state/game/game-api-slice";
 import { getGamePhaseSeasonYear } from "../../../utils/state/getPhaseSeasonYear";
 import { formatPhaseForDisplay } from "../../../utils/formatPhaseForDisplay";
+import WDCenterCounts from "../WDCenterCounts";
 
 interface BottomMiddleProps {
   viewedSeason: Season;
@@ -41,7 +42,7 @@ const NextPhase = function (): ReactElement {
   const formattedPhase = formatPhaseForDisplay(gamePhase);
 
   return (
-    <div className="flex display-block px-5 sm:px-10 py-5 mt-1 bg-[#1C2B33] rounded-xl text-white items-center select-none w-fit mb-3 mx-auto">
+    <div className="flex display-block px-5 sm:px-10 py-5 mt-1 bg-black rounded-xl text-white items-center select-none w-fit mb-3 mx-auto">
       <div>
         <div className="text-xs">New phase</div>
         <div className="text-sm font-bold uppercase">
@@ -79,7 +80,7 @@ const BottomMiddle: FunctionComponent<BottomMiddleProps> = function ({
   const [lastViewedPhase, setLastViewedPhase] =
     useState<number>(viewedPhaseIdx);
   const [lastPhase, setLastPhase] = useState<number>(-1);
-  const { members } = useAppSelector(gameOverview);
+  const { phase } = useAppSelector(gameOverview);
 
   useEffect(() => {
     if (
@@ -96,23 +97,12 @@ const BottomMiddle: FunctionComponent<BottomMiddleProps> = function ({
     setLastPhase(totalPhases);
   }, [viewedPhaseIdx, totalPhases]);
 
-  const centerCounts = [...members]
-    .sort((a, b) => a.countryID - b.countryID)
-    .map((m) => (
-      <span key={m.countryID} className="p-1">
-        {m.country.substring(0, 3)}: {m.supplyCenterNo}
-      </span>
-    ));
-
   return (
-    <WDPositionContainer
-      position={Position.BOTTOM_MIDDLE}
-      bottom={width < 500 ? 14 : 4}
-    >
+    <WDPositionContainer position={Position.BOTTOM_MIDDLE} bottom={8}>
       <WDBuildCounts />
-      {width > 650 && (
-        <div className="bg-[#1C2B33] text-white items-center p-1 m-2 font-medium uppercase text-xs">
-          {centerCounts}
+      {width > 650 && phase !== "Pre-game" && (
+        <div className="bg-black text-white items-center p-1 m-2 font-medium uppercase text-xs">
+          <WDCenterCounts />
         </div>
       )}
 

beta-src/src/components/ui/main-screen/BottomRight.tsx

@@ -49,7 +49,7 @@ const BottomRight: FunctionComponent<BottomRightProps> = function ({
     <>
       <WDPositionContainer
         position={Position.BOTTOM_RIGHT}
-        bottom={width < 500 ? 14 : 4}
+        bottom={8}
         zIndex={30}
       >
         <OpenModalButton

beta-src/src/components/ui/phase-selector/PhaseSelectorSimple.tsx

@@ -33,7 +33,7 @@ const PhaseSelectorSimple: FunctionComponent<PhaseSelectorSimpleProps> =
 
     return (
       <div
-        className="has-tooltip bg-[#1C2B33] flex text-white items-center h-14 px-4 sm:px-8 rounded-full space-x-3 sm:space-x-8 z-20 select-none"
+        className="has-tooltip bg-black flex text-white items-center h-14 px-4 sm:px-8 rounded-full space-x-3 sm:space-x-8 z-20 select-none"
         title="Change phases with Shift-Left and Shift-Right."
       >
         <button

beta-src/src/utils/state/gameApiSlice/reducers/processMapClick.ts

@@ -313,20 +313,34 @@ export default function processMapClick(
           toTerrID,
           convoyPath,
         });
-
         // if it's a support-move of my unit, fill it in
         const targetUnitID =
           maps.provinceIDToUnits[maps.terrIDToProvinceID[order.fromTerrID]][0];
+
         if (ownUnits.includes(targetUnitID) && fromTerrID !== toTerrID) {
-          startNewOrder(state, { unitID: targetUnitID });
           let coastalToTerrID = toTerrID;
+          let coastalToTerr = clickRootTerritory;
+
           if (data.units[targetUnitID].type === "Fleet") {
-            const coastalToTerr = getBestCoastalUnitTerritory(
-              evt,
-              clickProvinceMapData,
+            const legalDests = legalOrders.legalMoveDestsByUnitID[targetUnitID];
+            const slotDests = clickProvinceMapData.unitSlots.map(
+              (slot) => slot.territory,
+            );
+            const legalDestsInProvince = legalDests.filter((terr) =>
+              slotDests.includes(terr),
             );
+            if (legalDestsInProvince.length === 1) {
+              [coastalToTerr] = legalDestsInProvince;
+            } else {
+              // find the best one
+              coastalToTerr = getBestCoastalUnitTerritory(
+                evt,
+                clickProvinceMapData,
+              );
+            }
             coastalToTerrID = maps.territoryToTerrID[coastalToTerr];
           }
+          startNewOrder(state, { unitID: targetUnitID });
           updateOrder(state, {
             convoyPath,
             toTerrID: coastalToTerrID,