125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useSyncExternalStore } from "react";
|
|
import {
|
|
closeGameLaunch,
|
|
getGameLaunchState,
|
|
subscribeGameLaunch
|
|
} from "@/components/providers/game-launch-store";
|
|
import { openDownloadDialog } from "@/components/providers/download-dialog-store";
|
|
import { Button } from "@/components/ui/button";
|
|
import { X } from "lucide-react";
|
|
import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons";
|
|
|
|
export function GameLaunchDialog() {
|
|
const state = useSyncExternalStore(
|
|
subscribeGameLaunch,
|
|
getGameLaunchState,
|
|
getGameLaunchState
|
|
);
|
|
|
|
const [launchTimeouted, setLaunchTimeouted] = useState<boolean>(false);
|
|
|
|
function detectOS() {
|
|
if (typeof navigator === "undefined") return "Unknown";
|
|
const nav = navigator as Navigator & {
|
|
userAgentData?: { platform?: string };
|
|
};
|
|
const platform = nav.userAgentData?.platform || nav.platform || "";
|
|
const ua = nav.userAgent || "";
|
|
const haystack = `${platform} ${ua}`;
|
|
if (/windows/i.test(haystack)) return "Windows";
|
|
if (/mac os x|macintosh|macos/i.test(haystack)) return "Mac";
|
|
if (/linux/i.test(haystack)) return "Linux";
|
|
return "Unknown";
|
|
}
|
|
|
|
function handleDownloadClick() {
|
|
const os = detectOS();
|
|
const canDownload = os === "Windows" || os === "Mac";
|
|
const url = canDownload
|
|
? "https://www.roblox.com/download/client"
|
|
: null;
|
|
openDownloadDialog(url);
|
|
closeGameLaunch();
|
|
if (!canDownload || !url) return;
|
|
try {
|
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
} catch {}
|
|
}
|
|
|
|
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-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm pointer-events-auto"
|
|
onClick={closeGameLaunch}
|
|
>
|
|
<div
|
|
className="panel-blur relative w-[92vw] max-w-sm"
|
|
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-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20 ring-1 ring-blue/30">
|
|
<RobloxLogoIcon className="h-10 w-10 text-blue" />
|
|
</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>
|
|
{launchTimeouted ? (
|
|
<Button
|
|
onClick={handleDownloadClick}
|
|
className="w-full rounded-full z-50"
|
|
>
|
|
Download Roblox
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
disabled
|
|
variant="secondary"
|
|
className="w-full rounded-full"
|
|
>
|
|
<div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|