From abe697bf39df22a3808222d452cb0b43e8005a1d Mon Sep 17 00:00:00 2001 From: Alex Anderson Date: Fri, 15 Mar 2024 20:39:31 -0400 Subject: [PATCH] fix: Improvements to giving orders on the Flight Director screen --- client/app/cards/Navigation/index.tsx | 4 +- .../app/components/Starmap/Planet/index.tsx | 24 ++-- .../app/components/Starmap/Star/StarMesh.tsx | 24 ++-- client/app/components/Starmap/Star/index.tsx | 7 +- .../app/components/Starmap/StarmapCanvas.tsx | 9 +- client/app/components/Starmap/StarmapShip.tsx | 16 ++- .../app/components/Starmap/starmapStore.tsx | 1 + .../components/Starmap/useFollowEntity.tsx | 12 +- .../StarmapCore/StarmapCoreContextMenu.tsx | 123 ++++++++++++++---- client/app/cores/StarmapCore/data.tsx | 82 ++++++++++-- client/app/cores/StarmapCore/index.tsx | 18 ++- client/app/hooks/useTranslate2DTo3D.ts | 13 +- client/app/routes/_landing/QuoteOfTheDay.tsx | 11 ++ server/src/components/shipBehavior.ts | 3 +- 14 files changed, 273 insertions(+), 74 deletions(-) diff --git a/client/app/cards/Navigation/index.tsx b/client/app/cards/Navigation/index.tsx index 79d9dcd4..c2ba822d 100644 --- a/client/app/cards/Navigation/index.tsx +++ b/client/app/cards/Navigation/index.tsx @@ -264,7 +264,9 @@ function CanvasWrapper({ shouldRender }: { shouldRender: boolean }) { - + + + {currentSystem === null ? ( ) : ( diff --git a/client/app/components/Starmap/Planet/index.tsx b/client/app/components/Starmap/Planet/index.tsx index 40693990..fdf1fb3e 100644 --- a/client/app/components/Starmap/Planet/index.tsx +++ b/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 ( - + { export function PlanetSphere({ texture, wireframe, + userData, }: { texture: string; wireframe?: boolean; + userData?: any; }) { const mapTexture = useTexture(texture); return ( - + - + - + {rings && } {clouds && !wireframe && } {selected && } diff --git a/client/app/components/Starmap/Star/StarMesh.tsx b/client/app/components/Starmap/Star/StarMesh.tsx index 657a1959..2652abfa 100644 --- a/client/app/components/Starmap/Star/StarMesh.tsx +++ b/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 ( - {!isViewscreen && } + {!isViewscreen && ( + + )} - + - + @@ -128,14 +132,14 @@ 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 ( - + ); @@ -143,11 +147,13 @@ export const StarSprite = forwardRef< 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 ( - + {selected && viewingMode !== "viewscreen" && } - + ); diff --git a/client/app/components/Starmap/StarmapCanvas.tsx b/client/app/components/Starmap/StarmapCanvas.tsx index e87f15f1..bd9118bd 100644 --- a/client/app/components/Starmap/StarmapCanvas.tsx +++ b/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; } diff --git a/client/app/components/Starmap/StarmapShip.tsx b/client/app/components/Starmap/StarmapShip.tsx index 41916f88..1ef8c18d 100644 --- a/client/app/components/Starmap/StarmapShip.tsx +++ b/client/app/components/Starmap/StarmapShip.tsx @@ -108,6 +108,7 @@ export function StarmapShip({ }); return ( + {/* Points towards the current destination */} + {/* Ship sensor range */} {!isCore || sensorsHidden ? null : ( @@ -148,10 +150,10 @@ export function StarmapShip({ {logoUrl && ( )} @@ -159,7 +161,11 @@ export function StarmapShip({ )} {model && ( - + )} @@ -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 ( - + Vector3; + getObjectsUnderCursor?: () => any[]; setCameraFocus: (position: Coordinates) => void; planetsHidden: boolean; sensorsHidden: boolean; diff --git a/client/app/components/Starmap/useFollowEntity.tsx b/client/app/components/Starmap/useFollowEntity.tsx index 883d5cd3..b932cb1b 100644 --- a/client/app/components/Starmap/useFollowEntity.tsx +++ b/client/app/components/Starmap/useFollowEntity.tsx @@ -3,6 +3,7 @@ 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(); @@ -10,9 +11,14 @@ export function useFollowEntity() { 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(() => { diff --git a/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx b/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx index 15251551..d996cfe8 100644 --- a/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx +++ b/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx @@ -33,7 +33,14 @@ export const StarmapCoreContextMenu = ({ }: { parentRef: RefObject; }) => { - const [open, setOpen] = useState<{ x: number; y: number } | false>(false); + const [open, setOpen] = useState< + | { + x: number; + y: number; + object?: { type: "star" | "ship" | "planet"; id: number }; + } + | false + >(false); const useStarmapStore = useGetStarmapStore(); const { strategy, refs } = useFloating({ @@ -51,7 +58,15 @@ export const StarmapCoreContextMenu = ({ useRightClick((e) => { e.preventDefault(); - setOpen({ x: e.clientX, y: e.clientY }); + + const object = useStarmapStore + .getState() + .getObjectsUnderCursor?.() + .filter( + (o) => o.userData.type && o.userData.id !== undefined, + )[0]?.userData; + + setOpen({ x: e.clientX, y: e.clientY, object }); const virtualEl = makeVirtualEl({ x: e.clientX, y: e.clientY }); refs.setReference(virtualEl); }, parentRef); @@ -68,7 +83,7 @@ export const StarmapCoreContextMenu = ({ if (!open) return null; - const { x, y } = open; + const { x, y, object } = open; return ( @@ -83,31 +98,83 @@ export const StarmapCoreContextMenu = ({ > {/* TODO March 11, 2024: Add commands for when right clicking on another object, such as following or attacking the target */} {selectedShips.length > 0 ? ( - + !object ? ( + + ) : object.type === "planet" ? ( + + ) : object.type === "star" ? ( + + ) : object.type === "ship" ? ( + + ) : null ) : null}