fix: Improvements to giving orders on the Flight Director screen

client/app/cards/Navigation/index.tsx

@@ -264,7 +264,9 @@ function CanvasWrapper({ shouldRender }: { shouldRender: boolean }) {
 		<StarmapCanvas shouldRender={firstRender || shouldRender}>
 			<ambientLight intensity={0.2} />
 			<pointLight position={[10, 10, 10]} />
-			<StarmapHooks />
+			<Suspense>
+				<StarmapHooks />
+			</Suspense>
 			{currentSystem === null ? (
 				<InterstellarWrapper />
 			) : (

client/app/components/Starmap/Planet/index.tsx

@@ -7,17 +7,17 @@ import Selected from "../Selected";
 import Dot from "./Dot.svg";
 import { useGetStarmapStore } from "../starmapStore";
 import SystemLabel from "../SystemMarker/SystemLabel";
-import { type Group, Vector3 } from "three";
+import type { Group, Vector3 } from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { getOrbitPosition } from "@server/utils/getOrbitPosition";
-import { Kilometer, degToRad } from "@server/utils/unitTypes";
+import { degToRad } from "@server/utils/unitTypes";
 import { OrbitLine } from "../OrbitContainer";
 
-export const PlanetSprite = ({ color = "white" }) => {
+export const PlanetSprite = ({ color = "white", userData = {} }) => {
 	const spriteMap = useTexture(Dot);
 
 	return (
-		<sprite>
+		<sprite userData={userData}>
 			<spriteMaterial
 				attach="material"
 				map={spriteMap}
@@ -30,14 +30,16 @@ export const PlanetSprite = ({ color = "white" }) => {
 export function PlanetSphere({
 	texture,
 	wireframe,
+	userData,
 }: {
 	texture: string;
 	wireframe?: boolean;
+	userData?: any;
 }) {
 	const mapTexture = useTexture(texture);
 
 	return (
-		<mesh castShadow>
+		<mesh castShadow userData={userData}>
 			<sphereGeometry args={[1, 32, 32]} attach="geometry" />
 			<meshPhysicalMaterial
 				map={wireframe ? undefined : mapTexture}
@@ -51,7 +53,6 @@ export function PlanetSphere({
 
 const SPRITE_SCALE_FACTOR = 50;
 export const planetSpriteScale = 1 / SPRITE_SCALE_FACTOR;
-const distanceVector = new Vector3();
 
 export function Planet({
 	planet,
@@ -197,14 +198,21 @@ export function Planet({
 							ref={planetSpriteRef}
 							scale={[planetSpriteScale, planetSpriteScale, planetSpriteScale]}
 						>
-							<PlanetSprite color={selected ? "#0088ff" : "white"} />
+							<PlanetSprite
+								color={selected ? "#0088ff" : "white"}
+								userData={{ type: "planet", id: planet.id }}
+							/>
 						</group>
 						<group
 							ref={planetMeshRef}
 							scale={[size, size, size]}
 							rotation={[0, 0, degToRad(axialTilt)]}
 						>
-							<PlanetSphere texture={texture} wireframe={wireframe} />
+							<PlanetSphere
+								texture={texture}
+								wireframe={wireframe}
+								userData={{ type: "planet", id: planet.id }}
+							/>
 							{rings && <Rings texture={rings} wireframe={wireframe} />}
 							{clouds && !wireframe && <Clouds texture={clouds} />}
 							{selected && <Selected />}

client/app/components/Starmap/Star/StarMesh.tsx

@@ -30,12 +30,14 @@ const Star: React.FC<{
 	position?: Vector3 | [number, number, number];
 	noLensFlare?: boolean;
 	showSprite?: boolean;
+	userData?: any;
 }> = ({
 	color1 = 0x224488,
 	color2 = 0xf6fcff,
 	size,
 	noLensFlare,
 	showSprite,
+	userData,
 	...props
 }) => {
 	const useStarmapStore = useGetStarmapStore();
@@ -99,10 +101,12 @@ const Star: React.FC<{
 	return (
 		<group {...props}>
 			<pointLight intensity={0.8} decay={2} color={color} castShadow />
-			{!isViewscreen && <StarSprite size={size} color1={color1} />}
+			{!isViewscreen && (
+				<StarSprite size={size} color1={color1} userData={userData} />
+			)}
 
 			<group ref={starMesh}>
-				<mesh ref={shader} uuid="My star">
+				<mesh ref={shader} userData={userData}>
 					<circleGeometry attach="geometry" args={[1, 8, 8]} />
 					<shaderMaterial
 						attach="material"
@@ -114,7 +118,7 @@ const Star: React.FC<{
 						depthTest={false}
 					/>
 				</mesh>
-				<mesh uuid="My star background">
+				<mesh>
 					<sphereGeometry attach="geometry" args={[0.5, 32, 32]} />
 					<meshBasicMaterial attach="material" color={0x000000} />
 				</mesh>
@@ -128,26 +132,28 @@ export default Star;
 
 export const StarSprite = forwardRef<
 	Group,
-	{ size?: number; color1: Color | number }
->(({ size = 1, color1 }, starSprite) => {
+	{ size?: number; color1: Color | number; userData: any }
+>(({ size = 1, color1, userData }, starSprite) => {
 	const spriteScale = 1 / size / SPRITE_SCALE_FACTOR;
 
 	return (
 		<group ref={starSprite} scale={[spriteScale, spriteScale, spriteScale]}>
 			<Suspense fallback={null}>
-				<StarSpriteInner color1={color1} />
+				<StarSpriteInner color1={color1} userData={userData} />
 			</Suspense>
 		</group>
 	);
 });
 
 StarSprite.displayName = "StarSprite";
 
-const StarSpriteInner = ({ color1 }: { color1: Color | number }) => {
+const StarSpriteInner = ({
+	color1,
+	userData,
+}: { color1: Color | number; userData: any }) => {
 	const spriteMap = useTexture(spritePath) as Texture;
-
 	return (
-		<sprite>
+		<sprite userData={userData}>
 			<spriteMaterial
 				attach="material"
 				map={spriteMap}

client/app/components/Starmap/Star/index.tsx

@@ -93,7 +93,12 @@ const StarEntity: React.FC<{
 				scale={[size, size, size]}
 			>
 				{selected && viewingMode !== "viewscreen" && <Selected />}
-				<Star color1={color1} color2={color2} size={size} />
+				<Star
+					color1={color1}
+					color2={color2}
+					size={size}
+					userData={{ type: "star", id: star.id }}
+				/>
 			</group>
 		</OrbitContainer>
 	);

client/app/components/Starmap/StarmapCanvas.tsx

@@ -6,17 +6,22 @@ import { useContextBridge } from "@react-three/drei";
 
 import { useQueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { StarmapStoreContext, useGetStarmapStore } from "./starmapStore";
-import { useTranslate2DTo3D } from "@client/hooks/useTranslate2DTo3D";
+import {
+	useGetObjectsAtScreenPoint as useGetObjectsUnderCursor,
+	useTranslate2DTo3D,
+} from "@client/hooks/useTranslate2DTo3D";
 import { LiveQueryContext } from "@thorium/live-query/client/liveQueryContext";
 
 const FAR = 1e27;
 
 function StarmapEffects() {
 	const to3D = useTranslate2DTo3D();
+	const getObjectsUnderCursor = useGetObjectsUnderCursor();
 	const useStarmapStore = useGetStarmapStore();
 	useEffect(() => {
 		useStarmapStore.setState({ translate2DTo3D: to3D });
-	}, [to3D, useStarmapStore]);
+		useStarmapStore.setState({ getObjectsUnderCursor });
+	}, [to3D, useStarmapStore, getObjectsUnderCursor]);
 	return null;
 }
 

client/app/components/Starmap/StarmapShip.tsx

@@ -108,6 +108,7 @@ export function StarmapShip({
 	});
 	return (
 		<group>
+			{/* Points towards the current destination */}
 			<Line
 				ref={lineRef}
 				points={[
@@ -120,6 +121,7 @@ export function StarmapShip({
 				lineWidth={0.5} // In pixels (default)
 			/>
 			<group ref={group}>
+				{/* Ship sensor range */}
 				{!isCore || sensorsHidden ? null : (
 					<mesh>
 						<icosahedronGeometry args={[10_000, 1]} />
@@ -148,18 +150,22 @@ export function StarmapShip({
 							<group ref={shipSprite}>
 								{logoUrl && (
 									<ShipSprite
-										id={id}
 										// TODO June 9, 2022 - This color should represent the faction, with a toggle to make it show IFF for the current ship
 										color={spriteColor}
 										spriteAsset={logoUrl}
+										userData={{ type: "ship", id }}
 									/>
 								)}
 							</group>
 						</Suspense>
 					)}
 					{model && (
 						<group ref={shipMesh}>
-							<primitive object={model} rotation={[Math.PI / 2, Math.PI, 0]} />
+							<primitive
+								userData={{ type: "ship", id }}
+								object={model}
+								rotation={[Math.PI / 2, Math.PI, 0]}
+							/>
 						</group>
 					)}
 				</group>
@@ -227,13 +233,13 @@ const maskTextureAsset = createAsset(async (image) => {
 	return new CanvasTexture(canvas);
 });
 const ShipSprite = ({
-	id,
 	color = "red",
 	spriteAsset,
+	userData,
 }: {
-	id: string | number;
 	color?: string | number;
 	spriteAsset: string;
+	userData?: any;
 }) => {
 	// TODO: Replace with a ship icon
 	const spriteMap = maskTextureAsset.read(spriteAsset);
@@ -251,7 +257,7 @@ const ShipSprite = ({
 		}
 	});
 	return (
-		<sprite ref={ref} scale={[scale, scale, scale]}>
+		<sprite ref={ref} scale={[scale, scale, scale]} userData={userData}>
 			<spriteMaterial
 				attach="material"
 				alphaMap={spriteMap}

client/app/components/Starmap/starmapStore.tsx

@@ -37,6 +37,7 @@ interface StarmapStore {
 		vanity: string;
 	};
 	translate2DTo3D?: (x: number, y: number) => Vector3;
+	getObjectsUnderCursor?: () => any[];
 	setCameraFocus: (position: Coordinates<number>) => void;
 	planetsHidden: boolean;
 	sensorsHidden: boolean;

client/app/components/Starmap/useFollowEntity.tsx

@@ -3,16 +3,22 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { useLiveQuery } from "@thorium/live-query/client";
 import { useEffect } from "react";
 import { useGetStarmapStore } from "./starmapStore";
+import { keepPreviousData } from "@tanstack/react-query";
 
 export function useFollowEntity() {
 	const useStarmapStore = useGetStarmapStore();
 
 	const cameraControls = useStarmapStore((store) => store.cameraControls);
 	const followEntityId = useStarmapStore((store) => store.followEntityId);
 
-	const [starmapShip] = q.starmapCore.ship.useNetRequest({
-		shipId: followEntityId,
-	});
+	const [starmapShip] = q.starmapCore.ship.useNetRequest(
+		{
+			shipId: followEntityId,
+		},
+		{
+			placeholderData: keepPreviousData,
+		},
+	);
 
 	const systemId = starmapShip?.systemId;
 	useEffect(() => {