Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.2 kB · 167 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168import { UNSAFE_PortalProvider } from "@react-aria/overlays";import { useQueries } from "@tanstack/react-query";import { NoMatch } from "@thorium/components/NotFound";import Stars from "@thorium/components/Station/Stars";import AppContext, { clientId, liveQueryClient, q } from "@thorium/context/AppContext";import Button from "@thorium/ui/Button";import { Icon } from "@thorium/ui/Icon";
import "./styles/tailwind.css";import "@fontsource-variable/outfit";import { useEffect, useRef } from "react";import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration, type MetaFunction,} from "react-router";
import type { Route } from "./+types/root";import icon from "./images/logo.svg?url";
export const meta: MetaFunction = () => { return [{ title: "Thorium Nova" }, {}];};
export const links: Route.LinksFunction = () => { return [{ rel: "icon", href: icon }];};
export function Layout({ children }: { children: React.ReactNode }) { const container = useRef<HTMLDivElement>(null); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <Meta /> <Links /> </head> <body> <UNSAFE_PortalProvider getContainer={() => container.current}> <div className="fixed top-0 z-0 h-full w-full text-white">{children}</div> </UNSAFE_PortalProvider> <div ref={container} /> <div id="training-container" /> <Snapshot /> <ScrollRestoration /> <Scripts /> </body> </html> );}
function Preload() { const preloadOptions = { refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, staleTime: Number.POSITIVE_INFINITY, queryFn: ({ signal, queryKey: [pathKey, input] }: { signal: any; queryKey: any }) => { const path = pathKey.join("."); return liveQueryClient.netRequest({ path, ...input, signal }); }, }; useQueries({ queries: [ { queryKey: q.ship.players.getQueryKey(), ...preloadOptions, }, { queryKey: q.ship.player.getQueryKey({ clientId }), ...preloadOptions }, { queryKey: q.ship.get.getQueryKey({ clientId }), ...preloadOptions }, { queryKey: q.station.get.getQueryKey({ clientId }), ...preloadOptions }, { queryKey: q.client.get.getQueryKey({ clientId }), ...preloadOptions }, { queryKey: q.flight.active.getQueryKey(), ...preloadOptions }, ], });
return null;}
export default function Root() { useHttpRedirect(); return ( <AppContext> <Preload /> <Outlet /> </AppContext> );}
export function HydrateFallback() { return ( <Stars className="bg-linear-to-b from-black to-fuchsia-950"> <h1 className="text-4xl font-bold">Loading Thorium Nova..</h1> </Stars> );}
export function ErrorBoundary({ error }: { error: Error }) { let message = "Oops!"; let details = "An unexpected error occurred."; let stack: string | undefined;
if (isRouteErrorResponse(error)) { if (error.status === 404) { return <NoMatch />; } message = "Error"; details = error.statusText || details; } else if (import.meta.env.DEV && error && error instanceof Error) { details = error.message; stack = error.stack; }
return ( <main className="container mx-auto p-4 pt-16"> <h1>{message}</h1> <p>{details}</p> {stack && ( <pre className="w-full overflow-x-auto p-4"> <code>{stack}</code> </pre> )} </main> );}
function Snapshot() { if (process.env.NODE_ENV === "production") return null; return ( <Button className="btn-circle btn-sm bg-neutral/20 fixed bottom-2 left-2 z-50 backdrop-blur" onClick={() => { q.server.snapshot.netSend(); }} > <Icon name="camera" size="md" className="text-white" /> </Button> );}
function useHttpRedirect() { useEffect(() => { if (window.location.protocol === "http:") { const url = new URL(window.location.href); const oldPathname = url.pathname; url.protocol = "https:"; url.pathname = "/https"; fetch(url) .then(async (res) => { if (res.ok) { const port = await res.text(); url.pathname = oldPathname; if (port !== "443") { url.port = port; } window.location.assign(url); } }) .catch(() => {}); } }, []);}