fixxxxxxxx

components/providers/GameLaunchDialog.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { closeGameLaunch, getGameLaunchState, subscribeGameLaunch } from "@/components/providers/game-launch-store";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons";
+import Link from "next/link";
+
+export function GameLaunchDialog() {
+	const state = useSyncExternalStore(
+		subscribeGameLaunch,
+		getGameLaunchState,
+		getGameLaunchState
+	);
+
+	const [launchTimeouted, setLaunchTimeouted] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (!state.isOpen) {
+			setLaunchTimeouted(false);
+			return;
+		}
+
+		const timeout = setTimeout(() => {
+			setLaunchTimeouted(true);
+		}, 5000); // 5 seconds
+
+		return () => clearTimeout(timeout);
+	}, [state.isOpen]);
+
+	if (!state.isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			onClick={closeGameLaunch}
+		>
+			<div
+				className="relative w-[92vw] max-w-sm rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				onClick={(event) => event.stopPropagation()}
+			>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={closeGameLaunch}
+					aria-label="Close launcher"
+					className="absolute right-3 top-3"
+				>
+					<X className="h-4 w-4" />
+				</Button>
+				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
+					<div className="h-24 w-24 flex items-center justify-center">
+						<RobloxLogoIcon />
+					</div>
+					<div className="space-y-1">
+						<p className="text-2xl font-semibold text-text">
+							{!launchTimeouted ? (
+								<>
+									Roblox is now loading.<br />Get Ready!
+								</>
+							) : (
+								<>Download Roblox to play millions of experiences!</>
+							)}
+						</p>
+					</div>
+					<Button disabled={!launchTimeouted} variant="default" className="w-full rounded-full">
+						{launchTimeouted ? (
+							<Link href="https://flathub.org/en/apps/org.vinegarhq.Sober" target="_blank" rel="noopener noreferrer">
+								Download Roblox
+							</Link>
+						) : null}
+						{!launchTimeouted && <div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

components/providers/GameLaunchProvider.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React, { createContext, useCallback, useContext, useMemo } from "react";
+import { openGameLaunchWithParams } from "@/components/providers/game-launch-store";
+
+type GameLaunchContextValue = {
+	launchGame: (placeId: string, jobId?: string) => void;
+};
+
+const GameLaunchContext = createContext<GameLaunchContextValue | null>(null);
+
+export function useGameLaunch() {
+	const ctx = useContext(GameLaunchContext);
+	if (!ctx) {
+		throw new Error("useGameLaunch must be used within GameLaunchProvider");
+	}
+	return ctx;
+}
+
+export function GameLaunchProvider({
+	children
+}: {
+	children: React.ReactNode;
+}) {
+	const launchGame = useCallback((placeId: string, jobId?: string) => {
+		openGameLaunchWithParams(placeId, jobId);
+
+		console.log("[GameLaunchProvider] Launching",{placeId, jobId});
+
+		const gameLaunchParams = {
+			launchmode: "play",
+			LaunchExp: "InApp",
+			placeId: placeId,
+			gameInstanceId: jobId ?? undefined
+		};
+
+		console.log("[GameLaunchProvider] Constructed GameLaunchParams",gameLaunchParams);
+
+		const url = new URL("roblox://experiences/start")
+
+		for (const [key, value] of Object.entries(gameLaunchParams)) {
+			if (value !== undefined && value !== null) {
+				url.searchParams.append(key, String(value));
+			}
+		}
+
+		const deeplinkNew = url.toString();
+		console.log("[GameLaunchProvider] Opening URL:", deeplinkNew);
+
+		document.location.href = deeplinkNew;
+	}, []);
+
+	const value = useMemo(() => ({ launchGame }), [launchGame]);
+
+	return (
+		<GameLaunchContext.Provider value={value}>
+			{children}
+		</GameLaunchContext.Provider>
+	);
+}

components/providers/ReactQueryProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { persistQueryClient } from "@tanstack/react-query-persist-client";
 import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
@@ -11,19 +11,22 @@ interface Props {
 }
 
 export function ReactQueryProvider({ children }: Props) {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				staleTime: 1000 * 60 * 5, // 5 minutes
-				retry: true
-			}
-		}
-	});
+	const [queryClient] = useState(
+		() =>
+			new QueryClient({
+				defaultOptions: {
+					queries: {
+						staleTime: 1000 * 60 * 5, // 5 minutes
+						retry: true
+					}
+				}
+			})
+	);
 
 	// will cause bun to SEGFAULT
 
 	useEffect(() => {
-		if (!window) return;
+		if (typeof window === "undefined") return;
 		// Persist to localStorage (safe, runs client-side)
 		const localStoragePersister = createAsyncStoragePersister({
 			storage: window.localStorage
@@ -34,7 +37,7 @@ export function ReactQueryProvider({ children }: Props) {
 			persister: localStoragePersister,
 			maxAge: 1000 * 60 * 60 // 1 hour max
 		});
-	}, [window || "wtf"]);
+	}, [queryClient]);
 
 	return (
 		<QueryClientProvider client={queryClient}>

components/providers/game-launch-store.ts

@@ -0,0 +1,35 @@
+type GameLaunchState = {
+	isOpen: boolean;
+	placeId?: string;
+	gameInstanceId?: string;
+};
+
+let state: GameLaunchState = { isOpen: false };
+const listeners = new Set<() => void>();
+
+function emit() {
+	listeners.forEach((listener) => listener());
+}
+
+export function getGameLaunchState() {
+	return state;
+}
+
+export function subscribeGameLaunch(listener: () => void) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+export function openGameLaunchWithParams(placeId: string, jobId?: string) {
+	state = {
+		isOpen: true,
+		placeId,
+		gameInstanceId: jobId
+	};
+	emit();
+}
+
+export function closeGameLaunch() {
+	state = { isOpen: false };
+	emit();
+}