fix: Starmap Core Travel to Here points at the correct place on the c…

…anvas. Closes #612
Thorium-Sim · Mar 12, 2024 · e4e91c3 · e4e91c3
1 parent 51bace4
commit e4e91c3
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 50 deletions.
diff --git a/client/app/cards/Navigation/MapControls.tsx b/client/app/cards/Navigation/MapControls.tsx
@@ -78,6 +78,7 @@ export const ZoomSliderComp = () => {
 				value={cameraZoom}
 				setValue={(val) => {
 					useStarmapStore.getState().cameraControls?.current?.dollyTo(val);
+					window.dispatchEvent(new Event("starmap-zoom"));
 				}}
 				zoomMin={minDistance}
 				zoomMax={maxDistance}

diff --git a/client/app/components/ui/Icon.tsx b/client/app/components/ui/Icon.tsx
@@ -57,11 +57,11 @@ export function Icon({
 		);
 	}
 	return (
+		// biome-ignore lint/a11y/noSvgWithoutTitle: The parent element should provide a title
 		<svg
 			{...props}
 			className={cn(sizeClassName[size], "inline self-center", className)}
 		>
-			<title>{name}</title>
 			<use href={`${href}#${name}`} />
 		</svg>
 	);

diff --git a/client/app/components/ui/SearchableInput.tsx b/client/app/components/ui/SearchableInput.tsx
@@ -68,7 +68,6 @@ export default function SearchableInput<T extends { id: any }>({
 		enabled: query.length > 0,
 	});
 
-	console.log({ selected, query, displayValue });
 	return (
 		<Combobox value={selected} onChange={setSelected || (() => {})}>
 			<div className="relative mt-1">

diff --git a/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx b/client/app/cores/StarmapCore/StarmapCoreContextMenu.tsx
@@ -4,7 +4,7 @@ import { useGetStarmapStore } from "@client/components/Starmap/starmapStore";
 import { toast } from "@client/context/ToastContext";
 import useEventListener from "@client/hooks/useEventListener";
 import { useRightClick } from "@client/hooks/useRightClick";
-import { useEffect, type RefObject, useState } from "react";
+import { type RefObject, useState } from "react";
 import { q } from "@client/context/AppContext";
 
 function makeVirtualEl({ x: X, y: Y }: { x: number; y: number }) {
@@ -25,17 +25,20 @@ function makeVirtualEl({ x: X, y: Y }: { x: number; y: number }) {
 	return virtualEl;
 }
 
+const menuItemClass =
+	"px-2 py-1 text-left cursor-pointer hover:bg-purple-700 hover:bg-opacity-50 focus:outline-none focus:ring transition-all";
+
 export const StarmapCoreContextMenu = ({
 	parentRef,
 }: {
 	parentRef: RefObject<HTMLDivElement>;
 }) => {
-	const [open, setOpen] = useState<boolean>(false);
+	const [open, setOpen] = useState<{ x: number; y: number } | false>(false);
 	const useStarmapStore = useGetStarmapStore();
 
-	const { x, y, strategy, refs } = useFloating({
-		open,
-		onOpenChange: setOpen,
+	const { strategy, refs } = useFloating({
+		open: !!open,
+		onOpenChange: (open) => setOpen(open ? { x: 0, y: 0 } : false),
 		placement: "right-start",
 		middleware: [autoPlacement()],
 	});
@@ -48,42 +51,25 @@ export const StarmapCoreContextMenu = ({
 
 	useRightClick((e) => {
 		e.preventDefault();
-		const selectedShips = useStarmapStore.getState().selectedObjectIds;
-		if (selectedShips.length > 0) {
-			const position = useStarmapStore
-				.getState()
-				.translate2DTo3D?.(e.clientX, e.clientY);
-			if (!position) return;
-			q.starmapCore.setDestinations.netSend({
-				ships: selectedShips.map((id: any) => ({
-					id,
-					position: {
-						x: position.x,
-						y: useStarmapStore.getState().yDimensionIndex,
-						z: position.z,
-					},
-					systemId: useStarmapStore.getState().currentSystem,
-				})),
-			});
-			return;
-		}
-
-		setOpen(true);
+		setOpen({ x: e.clientX, y: e.clientY });
 		const virtualEl = makeVirtualEl({ x: e.clientX, y: e.clientY });
 		refs.setReference(virtualEl);
 	}, parentRef);
 
-	const cameraObjectDistance = useStarmapStore(
-		(store) => store.cameraObjectDistance,
-	);
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		// If the camera zooms in or out, hide the context menu.
+	useEventListener("wheel", () => {
+		setOpen(false);
+	});
+
+	useEventListener("starmap-zoom", () => {
 		setOpen(false);
-	}, [cameraObjectDistance]);
+	});
+
+	const selectedShips = useStarmapStore.getState().selectedObjectIds;
 
 	if (!open) return null;
 
+	const { x, y } = open;
+
 	return (
 		<Portal>
 			<div
@@ -93,13 +79,40 @@ export const StarmapCoreContextMenu = ({
 					top: y ?? "",
 					left: x ?? "",
 				}}
-				className="text-white bg-opacity-50 bg-black border border-opacity-25 border-white rounded-sm  text-lg divide-y divide-purple-500 divide-opacity-25 flex flex-col"
+				className="text-white bg-opacity-50 bg-black border border-opacity-25 border-white rounded-sm  divide-y divide-purple-500 divide-opacity-25 flex flex-col"
 			>
+				{/* TODO March 11, 2024: Add commands for when right clicking on another object, such as following or attacking the target */}
+				{selectedShips.length > 0 ? (
+					<button
+						className={menuItemClass}
+						onClick={() => {
+							if (selectedShips.length > 0) {
+								const position = useStarmapStore
+									.getState()
+									.translate2DTo3D?.(x, y);
+								if (!position) return;
+								q.starmapCore.setDestinations.netSend({
+									ships: selectedShips.map((id: any) => ({
+										id,
+										position: {
+											x: position.x,
+											y: useStarmapStore.getState().yDimensionIndex,
+											z: position.z,
+										},
+										systemId: useStarmapStore.getState().currentSystem,
+									})),
+								});
+								setOpen(false);
+							}
+						}}
+					>
+						Travel To Here
+					</button>
+				) : null}
 				<button
-					className="px-2 py-1  text-left cursor-pointer hover:bg-purple-700 hover:bg-opacity-50 focus:outline-none focus:ring transition-all"
+					className={menuItemClass}
 					onClick={async () => {
 						const template = useStarmapStore.getState().spawnShipTemplate;
-						// TODO: Give a warning to indicate why you can't spawn a ship (need to set template ID in menubar)
 						if (!template) {
 							toast({
 								title: "Cannot Spawn Ship",
@@ -128,9 +141,7 @@ export const StarmapCoreContextMenu = ({
 				>
 					Spawn Here
 				</button>
-				<button className="px-2 py-1  text-left cursor-pointer hover:bg-purple-700 hover:bg-opacity-50 focus:outline-none focus:ring transition-all">
-					Measure Distance
-				</button>
+				<button className={menuItemClass}>Measure Distance</button>
 			</div>
 		</Portal>
 	);

diff --git a/client/app/cores/StarmapCore/index.tsx b/client/app/cores/StarmapCore/index.tsx
@@ -61,21 +61,24 @@ export function StarmapCore() {
 
 function ShipControls() {
 	const useStarmapStore = useGetStarmapStore();
-	const followEntityId = useStarmapStore((store) => store.followEntityId);
+	const selectedObjectIds = useStarmapStore(
+		(store) => store.selectedObjectIds,
+	) as number[];
 
+	const firstObject = selectedObjectIds[0];
 	const [starmapShip] = q.starmapCore.ship.useNetRequest({
-		shipId: followEntityId,
+		shipId: firstObject,
 	});
 
 	return (
 		<>
-			{followEntityId && starmapShip?.behavior ? (
+			{selectedObjectIds.length > 0 && starmapShip?.behavior ? (
 				<>
 					<Tooltip content="Patrol">
 						<Button
 							onClick={() =>
 								q.starmapCore.setBehavior.netSend({
-									ships: [followEntityId],
+									ships: selectedObjectIds,
 									behavior: "patrol",
 								})
 							}
@@ -90,7 +93,7 @@ function ShipControls() {
 						<Button
 							onClick={() =>
 								q.starmapCore.setBehavior.netSend({
-									ships: [followEntityId],
+									ships: selectedObjectIds,
 									behavior: "hold",
 								})
 							}
@@ -105,7 +108,7 @@ function ShipControls() {
 						<Button
 							onClick={() =>
 								q.starmapCore.setBehavior.netSend({
-									ships: [followEntityId],
+									ships: selectedObjectIds,
 									behavior: "attack",
 								})
 							}
@@ -134,7 +137,7 @@ function ShipControls() {
 						<Button
 							onClick={() =>
 								q.starmapCore.setBehavior.netSend({
-									ships: [followEntityId],
+									ships: selectedObjectIds,
 									behavior: "defend",
 								})
 							}
@@ -219,9 +222,9 @@ function StarmapCoreMenubar() {
 			<Button
 				title="Follow selected entity"
 				disabled={selectedObjectIds.length === 0}
-				className={`btn-xs ${
+				className={`btn-xs btn-primary ${
 					selectedObjectIds.length === 0 ? "btn-disabled" : ""
-				} ${followEntityId ? "btn-primary" : "btn-outline"}`}
+				} ${followEntityId ? "" : "btn-outline"}`}
 				onClick={() => {
 					const firstSelected = selectedObjectIds[0];
 					if (typeof firstSelected === "number") {