update

components/providers/GameLaunchDialog.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import { useEffect, useState, useSyncExternalStore } from "react";
-import { closeGameLaunch, getGameLaunchState, subscribeGameLaunch } from "@/components/providers/game-launch-store";
+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";
-import Link from "next/link";
 
 export function GameLaunchDialog() {
 	const state = useSyncExternalStore(
@@ -16,6 +20,34 @@ export function GameLaunchDialog() {
 
 	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);
@@ -33,7 +65,7 @@ export function GameLaunchDialog() {
 
 	return (
 		<div
-			className="fixed inset-0 z-50 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			className="fixed inset-0 z-[70] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
 			onClick={closeGameLaunch}
 		>
 			<div
@@ -50,28 +82,41 @@ export function GameLaunchDialog() {
 					<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 className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
+						<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!
+									Roblox is now loading.
+									<br />
+									Get ready!
 								</>
 							) : (
-								<>Download Roblox to play millions of experiences!</>
+								<>
+									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>
+					{launchTimeouted ? (
+						<Button
+							onClick={handleDownloadClick}
+							className="w-full rounded-full"
+						>
+							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>