Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.2 kB · 100 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101import { clientId, q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import { Icon } from "@thorium/ui/Icon";import { Tooltip } from "@thorium/ui/Tooltip";import { cn } from "@thorium/utils/cn";import { useLiveQuery } from "@thorium/utils/live-query/client";
import { useShipMapStore } from "./useShipMapStore";
export function CargoContainerList() { const { shipId } = useStation();
const [cargoContainers] = q.cargoControl.containers.useNetRequest({ shipId });
return ( <div className="cargo-container-list row-span-2 flex h-full cursor-pointer flex-col justify-center gap-4"> {cargoContainers.map((container) => ( <CargoContainer key={container.id} container={container} /> ))} </div> );}
function CargoContainer({ container,}: { container: { id: number; destinationNode: number | null; entityState: "idle" | "enRoute"; };}) { const { shipId } = useStation();
const [cargoRooms] = q.cargoControl.rooms.useNetRequest({ shipId }); const { rooms } = cargoRooms;
const selectedRoomId = useShipMapStore((state) => state.selectedRoomId); const { interpolate } = useLiveQuery();
const selectedContainerId = useShipMapStore((state) => state.selectedContainerId); const isSelected = container.id === selectedContainerId; const inRoom = container.destinationNode === selectedRoomId; const destinationRoom = rooms.find((room) => room.id === container.destinationNode); return ( <button className={cn( `cargo-container relative flex aspect-square w-full items-center justify-center rounded-full border border-white text-3xl transition-colors`, { "bg-primary-focus/75 hover:bg-primary-focus": isSelected, "bg-transparent hover:bg-white/25": !isSelected, moving: Boolean(destinationRoom && container.entityState === "enRoute"), }, )} onClick={() => { const containerPosition = interpolate(container.id); if (!containerPosition) return; useShipMapStore.setState({ deckIndex: Math.round(containerPosition.z || 0), }); useShipMapStore.setState({ selectedContainerId: container.id }); q.thorium.genericEvent.netSend({ clientId, eventName: "cargo-container-selected", properties: `${container.id}`, }); }} > <Icon name="package-open" /> {inRoom && !isSelected && ( <Tooltip placement="left" content={`Container is ${ container.entityState === "idle" ? "present in" : "en route to" } the selected room.`} > <div className={`absolute top-0 right-0 rounded-full ${ container.entityState === "idle" ? "bg-blue-400" : "bg-orange-400" } h-3 w-3`} /> </Tooltip> )} {destinationRoom && container.entityState === "enRoute" && ( <Tooltip content={ <span> Container is en route to <span className="inline-block">{destinationRoom.name},</span>{" "} <span className="inline-block">{destinationRoom.deck}.</span> </span> } > <div className="absolute bottom-0 left-0 rounded-full border border-white bg-black p-0.5 text-xs"> <Icon name="chevron-right" /> </div> </Tooltip> )} </button> );}