Merge pull request #466 from Thorium-Sim/deck-map-navigation

fix: Improve the deck navigation.

client/src/cards/CargoControl/DeckPicker.tsx

@@ -0,0 +1,20 @@
+import {useShipMapStore} from "./useShipMapStore";
+
+export function DeckPicker({decks}: {decks: {name: string}[]}) {
+  const deckIndex = useShipMapStore(store => store.deckIndex);
+  return (
+    <ul className="row-span-2 self-center overflow-y-auto select-none">
+      {decks.map((deck, index) => (
+        <li
+          key={deck.name}
+          onClick={() => useShipMapStore.setState({deckIndex: index})}
+          className={`pointer-events-auto cursor-pointer list-group-item ${
+            index === deckIndex ? "selected" : ""
+          }`}
+        >
+          {deck.name}
+        </li>
+      ))}
+    </ul>
+  );
+}

client/src/cards/CargoControl/ShipView.tsx

@@ -46,7 +46,7 @@ export function ShipView({
 
   return (
     <div
-      className="h-full w-full justify-self-center overflow-hidden relative select-none mx-16"
+      className="h-full w-full justify-self-center overflow-hidden relative select-none"
       ref={ref}
     >
       <Suspense fallback={null}>
@@ -105,20 +105,6 @@ export function ShipView({
           </div>
         ))}
       </Suspense>
-      <div className="absolute bottom-0 top-0 left-0 flex items-center justify-center">
-        <Slider
-          aria-label="Deck Selector"
-          value={decks.length - deckIndex}
-          onChange={val =>
-            useShipMapStore.setState({
-              deckIndex: decks.length - (val as number) - 1,
-            })
-          }
-          minValue={0}
-          maxValue={decks.length - 1}
-          orientation="vertical"
-        />
-      </div>
     </div>
   );
 }

client/src/cards/CargoControl/index.tsx

@@ -11,6 +11,7 @@ import {GoToRoomButton} from "./GoToRoomButton";
 import {ShipView} from "./ShipView";
 import {useShipMapStore} from "./useShipMapStore";
 import {q} from "@client/context/AppContext";
+import {DeckPicker} from "./DeckPicker";
 
 export function CargoControl(props: CardProps) {
   const selectedRoomId = useShipMapStore(state => state.selectedRoomId);
@@ -34,9 +35,15 @@ export function CargoControl(props: CardProps) {
   );
 
   const transferAmount = useTransferAmount();
-
+  const maxDeckName = Math.max(...decks.map(d => d.name.length));
   return (
-    <div className="mx-auto h-full relative grid grid-cols-[1fr_30%_50px] grid-rows-2 gap-8">
+    <div
+      className="mx-auto h-full relative grid grid-rows-2 gap-8"
+      style={{
+        gridTemplateColumns: `calc(${maxDeckName}ch + 1.25rem) 1fr 30% 50px`,
+      }}
+    >
+      <DeckPicker decks={decks} />
       <div className="row-span-2">
         <div className="w-1/3 mx-auto z-10">
           <CargoSearchInput />