update
This commit is contained in:
170
components/providers/DownloadDialog.tsx
Normal file
170
components/providers/DownloadDialog.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import { useSyncExternalStore } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { X } from "lucide-react";
|
||||
import {
|
||||
closeDownloadDialog,
|
||||
getDownloadDialogState,
|
||||
subscribeDownloadDialog
|
||||
} from "@/components/providers/download-dialog-store";
|
||||
import Link from "next/link";
|
||||
|
||||
export function DownloadDialog() {
|
||||
const state = useSyncExternalStore(
|
||||
subscribeDownloadDialog,
|
||||
getDownloadDialogState,
|
||||
getDownloadDialogState
|
||||
);
|
||||
|
||||
const isLinux =
|
||||
typeof window !== "undefined" && navigator.userAgent.includes("Linux");
|
||||
const downloadUrl = state.url ?? "https://www.roblox.com/download/client";
|
||||
|
||||
if (!state.isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[90] flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
|
||||
onClick={closeDownloadDialog}
|
||||
>
|
||||
<div
|
||||
className="relative w-[94vw] max-w-4xl rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={closeDownloadDialog}
|
||||
aria-label="Close download"
|
||||
className="absolute right-3 top-3"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="px-6 py-7 sm:px-8 sm:py-8">
|
||||
<div className="max-w-3xl space-y-2">
|
||||
<h2 className="text-2xl font-semibold text-text sm:text-3xl">
|
||||
Thanks for downloading Roblox
|
||||
</h2>
|
||||
{isLinux ? (
|
||||
<p className="text-sm text-subtext0">
|
||||
Unfortunately, Roblox does not support Linux
|
||||
natively. The only way to play Roblox on Linux
|
||||
as of now is through{" "}
|
||||
<Link
|
||||
href="https://sober.vinegarhq.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-text underline underline-offset-4"
|
||||
>
|
||||
Sober
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-subtext0">
|
||||
Just follow the steps below to install Roblox.
|
||||
The download should start in a few seconds. If
|
||||
it doesn't,{" "}
|
||||
<a
|
||||
href={downloadUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-text underline underline-offset-4"
|
||||
>
|
||||
restart the download
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6 grid gap-6 md:grid-cols-[1.15fr,0.85fr] md:gap-8 md:divide-x md:divide-surface0/60">
|
||||
<div className="space-y-4 md:pr-8">
|
||||
<p className="text-sm font-semibold text-text">
|
||||
Install Instructions
|
||||
</p>
|
||||
<ol className="list-decimal space-y-3 pl-5 text-sm text-subtext0">
|
||||
{isLinux ? (
|
||||
<>
|
||||
<li>
|
||||
<Link
|
||||
href="https://flathub.org/en/setup"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-text underline underline-offset-4"
|
||||
>
|
||||
Install Flatpak
|
||||
</Link>{" "}
|
||||
using the guide provided for your
|
||||
distro.
|
||||
</li>
|
||||
<li>
|
||||
Add the Flathub repository to your
|
||||
system with following command:
|
||||
<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
|
||||
<code>
|
||||
flatpak remote-add
|
||||
--if-not-exists flathub
|
||||
https://flathub.org/repo/flathub.flatpakrepo
|
||||
</code>
|
||||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
Install and run Sober with these
|
||||
commands:
|
||||
<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
|
||||
<code>
|
||||
flatpak install flathub
|
||||
org.vinegarhq.Sober
|
||||
</code>
|
||||
</pre>
|
||||
<pre className="mt-2 rounded bg-surface0 p-2 text-xs text-text">
|
||||
<code>
|
||||
flatpak run
|
||||
org.vinegarhq.Sober
|
||||
</code>
|
||||
</pre>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>
|
||||
Once downloaded, double-click the{" "}
|
||||
<span className="font-semibold text-text">
|
||||
Roblox.exe
|
||||
</span>{" "}
|
||||
file in your Downloads folder.
|
||||
</li>
|
||||
<li>
|
||||
Double-click{" "}
|
||||
<span className="font-semibold text-text">
|
||||
RobloxPlayerInstaller
|
||||
</span>{" "}
|
||||
to install the app.
|
||||
</li>
|
||||
<li>
|
||||
Follow the instructions to install
|
||||
Roblox on your computer.
|
||||
</li>
|
||||
<li>
|
||||
Now that Roblox is installed,{" "}
|
||||
<a
|
||||
href="https://www.roblox.com/discover"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-text underline underline-offset-4"
|
||||
>
|
||||
join the experience
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -25,7 +25,7 @@ export function GameLaunchProvider({
|
||||
const launchGame = useCallback((placeId: string, jobId?: string) => {
|
||||
openGameLaunchWithParams(placeId, jobId);
|
||||
|
||||
console.log("[GameLaunchProvider] Launching",{placeId, jobId});
|
||||
console.log("[GameLaunchProvider] Launching", { placeId, jobId });
|
||||
|
||||
const gameLaunchParams = {
|
||||
launchmode: "play",
|
||||
@@ -34,9 +34,12 @@ export function GameLaunchProvider({
|
||||
gameInstanceId: jobId ?? undefined
|
||||
};
|
||||
|
||||
console.log("[GameLaunchProvider] Constructed GameLaunchParams",gameLaunchParams);
|
||||
console.log(
|
||||
"[GameLaunchProvider] Constructed GameLaunchParams",
|
||||
gameLaunchParams
|
||||
);
|
||||
|
||||
const url = new URL("roblox://experiences/start")
|
||||
const url = new URL("roblox://experiences/start");
|
||||
|
||||
for (const [key, value] of Object.entries(gameLaunchParams)) {
|
||||
if (value !== undefined && value !== null) {
|
||||
|
||||
30
components/providers/download-dialog-store.ts
Normal file
30
components/providers/download-dialog-store.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
type DownloadDialogState = {
|
||||
isOpen: boolean;
|
||||
url: string | null;
|
||||
};
|
||||
|
||||
let state: DownloadDialogState = { isOpen: false, url: null };
|
||||
const listeners = new Set<() => void>();
|
||||
|
||||
function emit() {
|
||||
listeners.forEach((l) => l());
|
||||
}
|
||||
|
||||
export function subscribeDownloadDialog(listener: () => void) {
|
||||
listeners.add(listener);
|
||||
return () => listeners.delete(listener);
|
||||
}
|
||||
|
||||
export function getDownloadDialogState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
export function openDownloadDialog(url: string | null) {
|
||||
state = { isOpen: true, url };
|
||||
emit();
|
||||
}
|
||||
|
||||
export function closeDownloadDialog() {
|
||||
state = { isOpen: false, url: null };
|
||||
emit();
|
||||
}
|
||||
@@ -15,6 +15,10 @@ export function getGameLaunchState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
export function isGameLaunchOpen() {
|
||||
return state.isOpen;
|
||||
}
|
||||
|
||||
export function subscribeGameLaunch(listener: () => void) {
|
||||
listeners.add(listener);
|
||||
return () => listeners.delete(listener);
|
||||
|
||||
Reference in New Issue
Block a user