Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.3 kB · 91 lines
TSX
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192import { q } from "@thorium/context/AppContext";import useEventListener, { ShipMapDeckSelectEvent, ShipMapRoomSelectEvent,} from "@thorium/hooks/useEventListener";import { useStation } from "@thorium/routes/station/useStation";import { SVGImageLoader } from "@thorium/ui/SVGImageLoader";import { cn } from "@thorium/utils/cn";import { useCallback, useRef, type ReactNode, type RefObject } from "react";import { Suspense } from "react";
import { useShipMapStore } from "./useShipMapStore";
type DeckChildren = ( deck: { name: string }, deckIndex: number, ref: RefObject<HTMLDivElement | null>,) => ReactNode;
export function ShipView({ deckIndex, deckChildren,}: { deckIndex: number; cardLoaded: boolean; deckChildren?: DeckChildren;}) { const { shipId } = useStation(); const [cargoRooms] = q.cargoControl.rooms.useNetRequest({ shipId });
const { decks } = cargoRooms;
useEventListener(ShipMapDeckSelectEvent.name, (event: ShipMapDeckSelectEvent) => { useShipMapStore.setState({ deckIndex: event.deckIndex }); }); useEventListener(ShipMapRoomSelectEvent.name, (event: ShipMapRoomSelectEvent) => { useShipMapStore.setState({ selectedRoomId: event.roomId }); });
return ( <div id="deck-container" className="relative h-full w-full justify-self-center select-none"> <Suspense fallback={null}> {decks.map((d, i) => ( <Deck key={d.name} d={d} i={i} deckIndex={deckIndex} deckChildren={deckChildren} /> ))} </Suspense> </div> );}
function Deck({ d, i, deckIndex, deckChildren,}: { d: { name: string; backgroundUrl?: string }; i: number; deckIndex: number; deckChildren?: DeckChildren;}) { const ref = useRef<HTMLDivElement>(null);
const onClick = useCallback(() => useShipMapStore.setState({ selectedRoomId: null }), []); return ( <div id={d.name} className="pointer-events-none absolute w-full origin-top" style={{ transition: "opacity 0.2s ease", }} > <div className={cn(`relative transition-all duration-500`, { "deck-on": deckIndex === i, "deck-before": deckIndex < i, "deck-after": deckIndex > i, })} > {deckChildren?.(d, i, ref)}
<SVGImageLoader url={d.backgroundUrl || ""} onClick={onClick} className="pointer-events-none outline-none" ref={ref} /> </div> </div> );}