Merge pull request #552 from Thorium-Sim/interstellar-viewscreen-fix

fix: Interstellar viewscreen no longer shows the Flight Director view.
Thorium-Sim · Feb 10, 2023 · bd4d415 · bd4d415
2 parents 945dd22 + 6fb2bdb
commit bd4d415
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 82 deletions.
diff --git a/client/react-test-utils.tsx b/client/react-test-utils.tsx
@@ -1,8 +1,10 @@
 import React, {ReactNode, Suspense} from "react";
 import {render as rtlRender, RenderOptions} from "@testing-library/react";
 import {MemoryRouter as Router} from "react-router-dom";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {LiveQueryContext} from "@thorium/live-query/client/liveQueryContext";
+import {
+  LiveQueryContext,
+  LiveQueryProvider,
+} from "@thorium/live-query/client/liveQueryContext";
 import {MockNetRequestContext} from "@thorium/live-query/client/mockContext";
 import {AppRouter} from "@server/init/router";
 import {inferRouterOutputs} from "@thorium/live-query/server/types";
@@ -44,8 +46,6 @@ interface OptionsInterface {
   netRequestData?: DeepPartial<inferRouterOutputs<AppRouter>>;
 }
 
-const queryClient = new QueryClient();
-
 async function render(
   ui: Parameters<typeof rtlRender>[0],
   options?: Omit<RenderOptions, "queries"> & OptionsInterface
@@ -54,58 +54,56 @@ async function render(
   const Wrapper = ({children}: {children: ReactNode}) => {
     return (
       <Suspense fallback={<p>Suspended in test</p>}>
-        <LiveQueryContext.Provider value={{} as any}>
-          <QueryClientProvider client={queryClient}>
-            <MockNetRequestContext.Provider
-              value={{
-                client: {
-                  get: {
-                    id: "Test",
-                    name: "Test Client",
-                    connected: true,
-                    loginName: "Test User",
-                  },
-                } as any,
-                flight: null,
-                ship: {
-                  get: {
-                    id: 0,
-                    components: {
-                      isPlayerShip: {value: true},
-                      identity: {name: "Test Ship"},
-                      isShip: {
-                        assets: {
-                          logo: "",
-                        },
-                        category: "Cruiser",
-                        registry: "NCC-2016-A",
-                        shipClass: "Astra Cruiser",
+        <LiveQueryProvider getRequestContext={() => ({id: "test"})}>
+          <MockNetRequestContext.Provider
+            value={{
+              client: {
+                get: {
+                  id: "Test",
+                  name: "Test Client",
+                  connected: true,
+                  loginName: "Test User",
+                },
+              } as any,
+              flight: null,
+              ship: {
+                get: {
+                  id: 0,
+                  components: {
+                    isPlayerShip: {value: true},
+                    identity: {name: "Test Ship"},
+                    isShip: {
+                      assets: {
+                        logo: "",
                       },
+                      category: "Cruiser",
+                      registry: "NCC-2016-A",
+                      shipClass: "Astra Cruiser",
                     },
-                    alertLevel: 5,
                   },
-                } as any,
-                station: {
-                  get: {
-                    name: "Test Station",
-                    logo: "",
-                    cards: [
-                      {
-                        icon: "",
-                        name: "Test Card",
-                        component: "Login",
-                      },
-                    ],
-                  },
-                } as any,
-                theme: null,
-                ...options?.netRequestData,
-              }}
-            >
-              <Router initialEntries={initialRoutes}>{children}</Router>
-            </MockNetRequestContext.Provider>
-          </QueryClientProvider>
-        </LiveQueryContext.Provider>
+                  alertLevel: 5,
+                },
+              } as any,
+              station: {
+                get: {
+                  name: "Test Station",
+                  logo: "",
+                  cards: [
+                    {
+                      icon: "",
+                      name: "Test Card",
+                      component: "Login",
+                    },
+                  ],
+                },
+              } as any,
+              theme: null,
+              ...options?.netRequestData,
+            }}
+          >
+            <Router initialEntries={initialRoutes}>{children}</Router>
+          </MockNetRequestContext.Provider>
+        </LiveQueryProvider>
       </Suspense>
     );
   };

diff --git a/client/src/components/Starmap/InterstellarMap.tsx b/client/src/components/Starmap/InterstellarMap.tsx
@@ -59,35 +59,40 @@ export function InterstellarMap({children}: {children: React.ReactNode}) {
   const viewingMode = useStarmapStore(store => store.viewingMode);
 
   const isStation = viewingMode === "station";
+  const isViewscreen = viewingMode === "viewscreen";
 
   return (
     <Suspense fallback={null}>
       <Starfield radius={lightYearToLightMinute(INTERSTELLAR_MAX_DISTANCE)} />
-      <CameraControls
-        ref={orbitControls}
-        enabled={controlsEnabled}
-        maxDistance={lightYearToLightMinute(INTERSTELLAR_MAX_DISTANCE)}
-        minDistance={1}
-        mouseButtons={{
-          left: ACTION.TRUCK,
-          right: ACTION.ROTATE,
-          middle: ACTION.DOLLY,
-          wheel: ACTION.DOLLY,
-        }}
-        dollyToCursor={isStation}
-        dollySpeed={0.5}
-      />
-      <PolarGrid
-        rotation={[0, (2 * Math.PI) / 12, 0]}
-        args={[
-          lightYearToLightMinute(INTERSTELLAR_MAX_DISTANCE),
-          12,
-          20,
-          64,
-          0xffffff,
-          0xffffff,
-        ]}
-      />
+      {!isViewscreen && (
+        <>
+          <CameraControls
+            ref={orbitControls}
+            enabled={controlsEnabled}
+            maxDistance={lightYearToLightMinute(INTERSTELLAR_MAX_DISTANCE)}
+            minDistance={1}
+            mouseButtons={{
+              left: ACTION.TRUCK,
+              right: ACTION.ROTATE,
+              middle: ACTION.DOLLY,
+              wheel: ACTION.DOLLY,
+            }}
+            dollyToCursor={isStation}
+            dollySpeed={0.5}
+          />
+          <PolarGrid
+            rotation={[0, (2 * Math.PI) / 12, 0]}
+            args={[
+              lightYearToLightMinute(INTERSTELLAR_MAX_DISTANCE),
+              12,
+              20,
+              64,
+              0xffffff,
+              0xffffff,
+            ]}
+          />
+        </>
+      )}
       {children}
     </Suspense>
   );

diff --git a/shared/live-query/client/liveQueryContext.tsx b/shared/live-query/client/liveQueryContext.tsx
@@ -1,4 +1,10 @@
-import {createContext, ReactNode, Suspense, useContext, useMemo} from "react";
+import React, {
+  createContext,
+  ReactNode,
+  Suspense,
+  useContext,
+  useMemo,
+} from "react";
 import {useDataConnection} from "./useDataConnection";
 import {ClientSocket} from "./clientSocket";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
@@ -47,6 +53,8 @@ export function processInterpolation(
   });
 }
 
+const isTestEnv = process.env.NODE_ENV === "test";
+
 function DataResponse() {
   useDataResponse();
   return null;
@@ -60,8 +68,9 @@ export function LiveQueryProvider({
 }) {
   const {socket, reconnectionState} = useDataConnection(getRequestContext);
 
-  useAnimationFrame(() =>
-    processInterpolation(socket?.SI.calcInterpolation("x y z r(quat)"))
+  useAnimationFrame(
+    () => processInterpolation(socket?.SI.calcInterpolation("x y z r(quat)")),
+    isTestEnv ? false : true
   );
   const value: ILiveQueryContext = useMemo(() => {
     return {
@@ -82,7 +91,7 @@ export function LiveQueryProvider({
         <ErrorBoundary fallback={<>Error Loading</>}>
           <Suspense>{children}</Suspense>
         </ErrorBoundary>
-        <DataResponse />
+        {!isTestEnv ? <DataResponse /> : null}
         <ReactQueryDevtools position="bottom-right" />
       </QueryClientProvider>
     </LiveQueryContext.Provider>

diff --git a/shared/live-query/client/useDataConnection.ts b/shared/live-query/client/useDataConnection.ts
@@ -14,6 +14,9 @@ const connectClient = async <TContext extends RequestContext>(
 ) => {
   socket.send(JSON.stringify({type: "clientConnect", ...context}));
 };
+
+const isTestEnv = process.env.NODE_ENV === "test";
+
 export function useDataConnection<TContext extends RequestContext>(
   getRequestContext: () => TContext | Promise<TContext>
 ) {
@@ -54,6 +57,7 @@ export function useDataConnection<TContext extends RequestContext>(
   );
 
   useEffect(() => {
+    if (isTestEnv) return;
     startDataConnection();
     return () => {
       socket?.close();