Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.4 kB · 82 lines
TSX
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import { useGetStarmapStore } from "@thorium/components/Starmap/starmapStore";import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import Button from "@thorium/ui/Button";import { ZoomSlider } from "@thorium/ui/Slider";import { useEffect } from "react";
export function MapControls() { const { shipId } = useStation(); const useStarmapStore = useGetStarmapStore(); const systemId = useStarmapStore((state) => state.currentSystem); const [ship] = q.navigation.ship.useNetRequest({ shipId });
useEffect(() => { q.navigation.ship.netRequest({ shipId }).then((res) => { useStarmapStore.setState({ followEntityId: res.id }); }); }, [useStarmapStore, shipId]);
useEffect(() => { if (useStarmapStore.getState().followEntityId === ship.id) { useStarmapStore.getState().setCurrentSystem(ship.position?.parentId || null); } }, [ship.position?.parentId, useStarmapStore, ship.id]);
return ( <div className="max-w-sm space-y-2 self-end"> <ZoomSliderComp /> {systemId !== null && ( <Button className="btn-primary pointer-events-auto w-full" onClick={() => { useStarmapStore.setState({ currentSystem: null, selectedObjectIds: [], }); }} > Interstellar View </Button> )} <Button className="btn-warning pointer-events-auto w-full" onClick={() => { useStarmapStore.setState({ followEntityId: ship.id, currentSystem: ship.position?.parentId || null, });
if (ship.position) { useStarmapStore.getState().setCameraFocus(ship.position); } }} > Follow Ship </Button> </div> );}
export const ZoomSliderComp = () => { const useStarmapStore = useGetStarmapStore(); const cameraZoom = useStarmapStore((store) => store.cameraObjectDistance); const cameraControls = useStarmapStore((store) => store.cameraControls); const maxDistance = cameraControls?.current?.maxDistance || 30000000000; const minDistance = cameraControls?.current?.minDistance || 10000; return ( <div> <p className="text-xl">Zoom:</p> <ZoomSlider value={cameraZoom} setValue={(val) => { useStarmapStore.getState().cameraControls?.current?.dollyTo(val); window.dispatchEvent(new Event("starmap-zoom")); }} zoomMin={minDistance} zoomMax={maxDistance} step={0.01} /> </div> );};