Fix: Improvements to Starmap navigation and core screens

client/app/components/Starmap/CameraControls.tsx

@@ -66,7 +66,6 @@ export function useExternalCameraControl(
   controls: React.MutableRefObject<CameraControlsDefault | null>
 ) {
   const useStarmapStore = useGetStarmapStore();
-
   useEffect(() => {
     if (controls) {
       useStarmapStore.setState({

client/app/components/Starmap/StarmapShip.tsx

@@ -48,6 +48,7 @@ export function StarmapShip({
     store => store.viewingMode !== "viewscreen"
   );
   const isCore = useStarmapStore(store => store.viewingMode === "core");
+  const sensorsHidden = useStarmapStore(store => store.sensorsHidden);
 
   const group = useRef<Group>(null);
   const shipMesh = useRef<Group>(null);
@@ -118,37 +119,49 @@ export function StarmapShip({
         transparent
         lineWidth={0.5} // In pixels (default)
       />
-      <group
-        ref={group}
-        onPointerOver={() => {
-          // set the cursor to pointer
-          document.body.style.cursor = "pointer";
-        }}
-        onPointerOut={() => {
-          // set the cursor to default
-          document.body.style.cursor = "default";
-        }}
-        onClick={onClick}
-      >
-        {isNotViewscreen && (
-          <Suspense fallback={null}>
-            <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}
-                />
-              )}
-            </group>
-          </Suspense>
-        )}
-        {model && (
-          <group ref={shipMesh}>
-            <primitive object={model} rotation={[Math.PI / 2, Math.PI, 0]} />
-          </group>
+      <group ref={group}>
+        {!isCore || sensorsHidden ? null : (
+          <mesh>
+            <icosahedronGeometry args={[10_000, 1]} />
+            <meshBasicMaterial
+              color="#0088ff"
+              transparent
+              opacity={0.2}
+              wireframe
+            />
+          </mesh>
         )}
+        <group
+          onPointerOver={() => {
+            // set the cursor to pointer
+            document.body.style.cursor = "pointer";
+          }}
+          onPointerOut={() => {
+            // set the cursor to default
+            document.body.style.cursor = "default";
+          }}
+          onClick={onClick}
+        >
+          {isNotViewscreen && (
+            <Suspense fallback={null}>
+              <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}
+                  />
+                )}
+              </group>
+            </Suspense>
+          )}
+          {model && (
+            <group ref={shipMesh}>
+              <primitive object={model} rotation={[Math.PI / 2, Math.PI, 0]} />
+            </group>
+          )}
+        </group>
       </group>
     </group>
   );

client/app/components/Starmap/starmapStore.tsx

@@ -39,7 +39,9 @@ interface StarmapStore {
   translate2DTo3D?: (x: number, y: number) => Vector3;
   setCameraFocus: (position: Coordinates<number>) => void;
   planetsHidden: boolean;
+  sensorsHidden: boolean;
 }
+
 let storeCount = 0;
 const createStarmapStore = () =>
   create<StarmapStore>((set, get) => ({
@@ -76,6 +78,8 @@ const createStarmapStore = () =>
         const up = camera.up.clone();
         camera.up.set(0, 0, -1);
         const distance = camera.position.distanceTo(position as Vector3);
+        set({yDimensionIndex: position.y});
+        camera.up.copy(up);
 
         await cameraControls.setLookAt(
           position.x,
@@ -86,10 +90,10 @@ const createStarmapStore = () =>
           position.z,
           true
         );
-        camera.up.copy(up);
       }
     },
     planetsHidden: false,
+    sensorsHidden: true,
   }));
 
 const useStarmapStore = createStarmapStore();

client/app/components/Starmap/useFollowEntity.tsx

@@ -4,7 +4,7 @@ import {useLiveQuery} from "@thorium/live-query/client";
 import {useEffect} from "react";
 import {useGetStarmapStore} from "./starmapStore";
 
-export function useFollowEntity(topDown = true) {
+export function useFollowEntity() {
   const useStarmapStore = useGetStarmapStore();
 
   const cameraControls = useStarmapStore(store => store.cameraControls);
@@ -26,12 +26,7 @@ export function useFollowEntity(topDown = true) {
     if (!followEntityId) return;
     const position = interpolate(followEntityId);
     if (!position) return;
-    cameraControls?.current?.moveTo(
-      position.x,
-      topDown ? 0 : position.y,
-      position.z,
-      false
-    );
+    cameraControls?.current?.moveTo(position.x, position.y, position.z, false);
     // TODO July 30, 2022: Also make the camera point in the direction of the entity. Useful for the viewscreen
   });
 }

client/app/cores/StarmapCore/index.tsx

@@ -1,7 +1,7 @@
 import {InterstellarMap} from "@client/components/Starmap/InterstellarMap";
 import SystemMarker from "@client/components/Starmap/SystemMarker";
 import StarmapCanvas from "@client/components/Starmap/StarmapCanvas";
-import {useEffect, useRef} from "react";
+import {useEffect, useRef, useState} from "react";
 import {
   StarmapStoreProvider,
   useCalculateVerticalDistance,
@@ -33,6 +33,7 @@ import {useFrame} from "@react-three/fiber";
 import clsx from "clsx";
 import {Tooltip} from "@thorium/ui/Tooltip";
 import {Icon} from "@thorium/ui/Icon";
+import useInterval from "@client/hooks/useInterval";
 
 export function StarmapCore() {
   const ref = useRef<HTMLDivElement>(null);
@@ -160,11 +161,12 @@ function StarmapCoreMenubar() {
     });
   }, [playerShip.id, playerShip.currentSystem, useStarmapStore]);
   const inSystem = useStarmapStore(store => !!store.currentSystem);
-  const yDimension = useStarmapStore(store => store.yDimensionIndex);
   const selectedSpawn = useStarmapStore(store => store.spawnShipTemplate);
   const selectedObjectIds = useStarmapStore(store => store.selectedObjectIds);
   const followEntityId = useStarmapStore(store => store.followEntityId);
   const planetsHidden = useStarmapStore(store => store.planetsHidden);
+  const sensorsHidden = useStarmapStore(store => store.sensorsHidden);
+
   return (
     <>
       {inSystem && (
@@ -239,33 +241,61 @@ function StarmapCoreMenubar() {
       >
         {planetsHidden ? <Icon name="orbit" /> : <Icon name="circle-off" />}
       </Button>
-      <Input
-        className="input-sm"
-        label="Y Dimension"
-        title="Y Dimension"
-        labelHidden
-        placeholder="Y Dimension"
-        type="text"
-        inputMode="numeric"
-        pattern="[0-9]*"
-        defaultValue={yDimension}
-        onBlur={e =>
-          (e.target.value = (
-            isNaN(Number(e.target.value)) ? 0 : Number(e.target.value)
-          ).toString())
-        }
-        onChange={e =>
-          useStarmapStore.setState({
-            yDimensionIndex: isNaN(Number(e.target.value))
-              ? 0
-              : Number(e.target.value),
-          })
+      <Button
+        title="Hide/Show Sensor Range"
+        className={`btn-xs btn-info ${sensorsHidden ? "" : "btn-outline"}`}
+        onClick={() =>
+          useStarmapStore.setState(state => ({
+            sensorsHidden: !state.sensorsHidden,
+          }))
         }
-      />
+      >
+        {sensorsHidden ? (
+          <Icon name="circle-dot" />
+        ) : (
+          <Icon name="circle-off" />
+        )}
+      </Button>
+      <YDimensionInput />
     </>
   );
 }
 
+function YDimensionInput() {
+  const useStarmapStore = useGetStarmapStore();
+
+  const yDimension = useStarmapStore(store => store.yDimensionIndex);
+  const [yDimensionState, setYDimensionState] = useState(yDimension.toString());
+
+  useEffect(() => {
+    setYDimensionState(yDimension.toString());
+  }, [yDimension]);
+  return (
+    <Input
+      className="input-sm"
+      label="Y Dimension"
+      title="Y Dimension"
+      labelHidden
+      placeholder="Y Dimension"
+      type="text"
+      inputMode="numeric"
+      pattern="[0-9]*"
+      value={yDimensionState}
+      onBlur={e => {
+        setYDimensionState(yDimension.toString());
+      }}
+      onChange={e => {
+        setYDimensionState(e.target.value);
+        if (!isNaN(Number(e.target.value))) {
+        }
+        useStarmapStore.setState({
+          yDimensionIndex: Number(e.target.value),
+        });
+      }}
+    />
+  );
+}
+
 function StarmapCoreCanvasHooks() {
   useCancelFollow();
   useFollowEntity();
@@ -427,6 +457,7 @@ export function SolarSystemWrapper() {
     <SolarSystemMap
       skyboxKey={system?.components.isSolarSystem?.skyboxKey || "Blank"}
     >
+      <ambientLight intensity={0.5} />
       {starmapEntities.map(entity => {
         if (planetsHidden) return null;
         if (entity.components.isStar) {
@@ -506,9 +537,9 @@ export function SolarSystemWrapper() {
           </ErrorBoundary>
         </Suspense>
       ))}
-      {debugSpheres.map(sphere => (
+      {/* {debugSpheres.map(sphere => (
         <DebugSphere key={sphere.id} id={sphere.id} />
-      ))}
+      ))} */}
     </SolarSystemMap>
   );
 }

client/app/root.tsx

@@ -1,13 +1,11 @@
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useRouteError,
   isRouteErrorResponse,
-  useLoaderData,
 } from "@remix-run/react";
 import "@fontsource/outfit";
 import "./styles/tailwind.css";
@@ -81,7 +79,6 @@ function Document({children}: {children: ReactNode}) {
 
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );