Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.3 kB · 122 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123import type { CardProps } from "@thorium/cards/CardProps";import { SensorsDamageOverlay, useSensorGridOffline,} from "@thorium/cards/Sensors/SensorsDamageOverlay";import { BeamVisualization, PhaserArcs, Phasers } from "@thorium/cards/Targeting/Phasers";import { Shields } from "@thorium/cards/Targeting/Shields";import { Torpedoes } from "@thorium/cards/Targeting/Torpedoes";import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import { cn } from "@thorium/utils/cn";import * as React from "react";
import { ObjectImage, useObjectData } from "../Navigation/ObjectDetails";import { CircleGrid, CircleGridTiltButton, GridCanvas } from "../Pilot/CircleGrid";import { CircleGridContacts } from "../Pilot/PilotContacts";import { PilotZoomSlider } from "../Pilot/PilotZoomSlider";import { CircleGridStoreProvider } from "../Pilot/useCircleGridStore";/** * TODO: * Add overlays to the targeting grid showing where the torpedo will fire from * Add explosions to the Viewscreen, and maybe even the targeting grid. */export function Targeting({ cardLoaded }: CardProps) { const { shipId, ship } = useStation(); const setTarget = q.targeting.setTarget.useNetSend(); const [targetedContact] = q.targeting.targetedContact.useNetRequest({ shipId, }); q.targeting.stream.useDataStream({ shipId }); q.pilot.stream.useDataStream({ shipId, systemId: ship.currentSystem }); const [hull] = q.targeting.hull.useNetRequest({ shipId }); const clickRef = React.useRef(false); const { gridOffline } = useSensorGridOffline();
return ( <CircleGridStoreProvider zoomMax={25000}> <div className="grid h-full grid-cols-4 grid-rows-1 place-content-center gap-4"> <div className="flex flex-col justify-between pb-4"> <div className="panel hull-container flex flex-col items-center text-center"> <div className="my-2 text-2xl font-bold tabular-nums">{hull}</div> <div>Hull Integrity</div> </div> <Shields /> <div className="flex-auto" /> <Phasers /> </div> <div className="targeting-radar col-span-2 aspect-square w-full self-center"> <React.Suspense fallback={null}> <GridCanvas shouldRender={cardLoaded} onBackgroundClick={() => { if (clickRef.current === true) { clickRef.current = false; return; } if (targetedContact) { setTarget.mutate({ target: null, shipId }); } }} outerChildren={<SensorsDamageOverlay gridOffline={gridOffline} />} > <CircleGrid fixedChildren={<PhaserArcs />}> {gridOffline ? null : ( <> <BeamVisualization /> <CircleGridContacts targetedContactId={targetedContact?.id} onContactClick={(contact) => { clickRef.current = true; setTarget.mutate({ target: contact, shipId }); }} /> </> )} </CircleGrid> </GridCanvas> </React.Suspense> </div> <div className="flex h-full flex-col gap-2 overflow-y-hidden"> <div className={cn("panel", targetedContact ? "panel-error" : "panel-primary")}> {targetedContact?.id ? ( <React.Suspense fallback={<h3 className="px-2 text-2xl">Accessing...</h3>}> <ObjectData objectId={targetedContact.id} /> </React.Suspense> ) : ( <h3 className="p-2 text-center text-2xl">No Object Targeted</h3> )} </div> <div> <div className="targeting-slider"> <PilotZoomSlider /> </div> <div className="targeting-tilt"> <CircleGridTiltButton /> </div> </div> <Torpedoes /> </div> </div> </CircleGridStoreProvider> );}
function ObjectData({ objectId }: { objectId: number }) { const [object, distanceRef] = useObjectData(objectId); return object ? ( <div className="flex items-center gap-2"> <ObjectImage objectImage={object.image} className="border-0 border-r p-2" />
<div> <h3 className="text-lg">{object.name}</h3> <h4>{object.classification}</h4> <h4 className="tabular-nums"> <strong>Distance:</strong> <span ref={distanceRef} /> </h4> </div> </div> ) : ( <h3 className="px-2 text-2xl">Unidentified</h3> );}