Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.0 kB · 96 lines
TSX
at develop
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697import type { AppRouter } from "@thorium/.server/init/router";import { AlertDialog } from "@thorium/ui/AlertDialog";import { createLiveQueryReact, LiveQueryProvider, useLiveQuery,} from "@thorium/utils/live-query/client";import uniqid from "@thorium/utils/uniqid";import { type ReactNode } from "react";
import { IssueTrackerProvider } from "../components/IssueTracker";import useEasterEgg from "../hooks/useEasterEgg";import { Disconnected, Reconnecting } from "./ConnectionStatus";import { ThoriumAccountContextProvider } from "./ThoriumAccountContext";import ToastContainer from "./ToastContext";
const PERSISTENT_ID_KEY = "thoriumNova_clientPersistentId";const PING_TIMEOUT = 500;export let clientId = typeof window !== "undefined" ? sessionStorage.getItem("test-clientId") || sessionStorage.getItem(PERSISTENT_ID_KEY) || "" : "";
/** * This client ID implementation works as follows: * - If the clientId is already present in session storage, use it. * - Request all open tabs to let us know what their clientId is. * - After a timeout, pick one of the available clientIds, or create a new one and add it to the overall list */const broadcastChannel = new BroadcastChannel("thorium_clientCount");const claimedByOthers = new Set();export async function initializeClient() { broadcastChannel.addEventListener("message", (event) => { if (event.data === "clientPing") { if (clientId) { broadcastChannel.postMessage(clientId); } } else { claimedByOthers.add(event.data); } }); if (clientId) return clientId;
broadcastChannel.postMessage("clientPing"); await new Promise<void>((res) => setTimeout(() => res(), PING_TIMEOUT)); const clientList = (localStorage.getItem(PERSISTENT_ID_KEY) || "").split(",").filter(Boolean); for (const client of clientList) { if (claimedByOthers.has(client)) continue; return setClient(client); } const id = uniqid("tab-"); localStorage.setItem(PERSISTENT_ID_KEY, [...clientList, id].join(",")); return setClient(id);}
function setClient(id: string) { sessionStorage.setItem(PERSISTENT_ID_KEY, id); clientId = id; return id;}
function getRequestContext() { return { id: clientId };}
function ConnectionStatus() { const { reconnectionState } = useLiveQuery();
if (reconnectionState === "reconnecting") return <Reconnecting />; if (reconnectionState === "disconnected") return <Disconnected />; return null;}
/** * A component to contain all of the context and wrapper components for the app. */export default function AppContext({ children }: { children: ReactNode }) { useEasterEgg(); return ( <LiveQueryProvider getRequestContext={getRequestContext}> <ConnectionStatus /> <ThoriumAccountContextProvider> <AlertDialog> <IssueTrackerProvider>{children}</IssueTrackerProvider> <ToastContainer /> </AlertDialog> </ThoriumAccountContextProvider> </LiveQueryProvider> );}
export const [q, liveQueryClient] = createLiveQueryReact<AppRouter>({ headers: async () => ({ "client-id": clientId, }),});