kris/roblox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Kris
2025-12-27 16:57:19 +02:00
parent 5bfdd7dd2b
commit 331ff6daf3
31 changed files with 1049 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
app/games/[id]/content.tsx
View File

@@ -1,55 +1,183 @@
"use client"; "use client";
import { useEffect } from "react"; import { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails"; import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips"; import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
import { Button } from "@/components/ui/button";
import { useGameLaunch } from "@/components/providers/GameLaunchProvider"; import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
import LazyLoadedImage from "@/components/util/LazyLoadedImage";
import { Badge } from "@/components/ui/badge";
import { PlayGameButton } from "@/components/roblox/PlayGameButton";
interface GamePageContentProps { interface GamePageContentProps {
placeId: string; placeId: string;
shouldSetDocumentTitle?: boolean;
} }
export default function GamePageContent({ placeId }: GamePageContentProps) { export default function GamePageContent({
placeId,
shouldSetDocumentTitle = true
}: GamePageContentProps) {
const game = usePlaceDetails(placeId); const game = usePlaceDetails(placeId);
const { launchGame } = useGameLaunch(); const [hasHydrated, setHasHydrated] = useState(false);
// Set dynamic document title // Set dynamic document title
useEffect(() => { useEffect(() => {
if (!shouldSetDocumentTitle) return;
if (!!game) { if (!!game) {
document.title = `${game.name} | Roblox`; document.title = `${game.name} | Roblox`;
} }
}, [game]); }, [game, shouldSetDocumentTitle]);
if (!game) return <div className="p-4">Loading game...</div>; useEffect(() => {
setHasHydrated(true);
}, []);
if (!hasHydrated || !game) {
return ( return (
<div className="p-4 space-y-6"> <div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<Button onClick={() => launchGame(game.rootPlaceId.toString())}> <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
PLAY <div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
</Button> <div className="space-y-4">
<div className="break-all pl-4 whitespace-pre-line font-black text-2xl"> <div className="h-7 w-3/4 rounded bg-surface0/60 animate-pulse" />
{game.name} <div className="h-4 w-1/3 rounded bg-surface0/60 animate-pulse" />
<div className="flex gap-3">
<div className="h-10 w-24 rounded-md bg-surface0/60 animate-pulse" />
<div className="h-10 w-28 rounded-md bg-surface0/60 animate-pulse" />
</div> </div>
<div className="break-all pl-4 whitespace-pre-line font-bold flex"> <div className="grid grid-cols-2 gap-3">
<Link {Array.from({ length: 4 }).map((_, index) => (
href={`https://roblox.com/${ <div
game.creator.type === "Group" ? "groups" : "user" key={`game-stat-skeleton-${index}`}
}/${game.creator.id}`} className="h-20 rounded-xl bg-surface0/60 animate-pulse"
className="flex" />
> ))}
<span className="underline">
{game.creator.name}
</span>
{game.creator.hasVerifiedBadge && (
<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
)}
</Link>
</div> </div>
</div>
<div className="break-all pl-4 whitespace-pre-line"> </div>
{game.description} <div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<div className="h-5 w-24 rounded bg-surface0/60 animate-pulse" />
<div className="mt-3 h-4 w-full rounded bg-surface0/60 animate-pulse" />
<div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
</div>
</div>
);
}
const avatarTypeLabel =
game.universeAvatarType === "MorphToR15"
? "R15 Only"
: game.universeAvatarType === "MorphToR6"
? "R6 Only"
: null;
return (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="rounded-2xl overflow-hidden bg-surface0/40 ring-1 ring-surface1/60">
<LazyLoadedImage
imgId={`GameThumbnail_${game.rootPlaceId}`}
alt={game.name}
className="w-full h-full object-cover"
lazyFetch={false}
size="768x432"
/>
</div>
<div className="flex flex-col gap-4">
<div className="space-y-2">
<h1 className="text-2xl sm:text-3xl font-semibold text-text">
{game.name}
</h1>
<div className="flex flex-wrap items-center gap-2 text-sm text-subtext1">
{!game.isAllGenre && (
<>
{game.genre && game.genre !== "All" ? (
<Badge variant="secondary">
{game.genre}
</Badge>
) : null}
{game.genre_l1 &&
game.genre_l1 !== "All" ? (
<Badge variant="secondary">
{game.genre_l1}
</Badge>
) : null}
{game.genre_l2 &&
game.genre_l2 !== "All" ? (
<Badge variant="secondary">
{game.genre_l2}
</Badge>
) : null}
</>
)}
{game.maxPlayers === 1 ? (
<Badge variant="outline">Singleplayer</Badge>
) : null}
{game.copyingAllowed ? (
<Badge variant="outline">Uncopylocked</Badge>
) : null}
{avatarTypeLabel ? (
<Badge variant="outline">
{avatarTypeLabel}
</Badge>
) : null}
</div>
</div>
<div className="flex flex-wrap items-center gap-3">
<PlayGameButton placeId={game.rootPlaceId.toString()} />
</div>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<p className="text-subtext1">Playing now</p>
<p className="text-lg font-semibold text-text">
{game.playing.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<p className="text-subtext1">Total visits</p>
<p className="text-lg font-semibold text-text">
{game.visits.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<p className="text-subtext1">Favorites</p>
<p className="text-lg font-semibold text-text">
{game.favoritedCount.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<p className="text-subtext1">Max players</p>
<p className="text-lg font-semibold text-text">
{game.maxPlayers}
</p>
</div>
</div>
<div className="text-sm text-subtext1">
<Link
href={`https://roblox.com/${
game.creator.type === "Group"
? "groups"
: "user"
}/${game.creator.id}`}
className="inline-flex items-center gap-1 underline"
>
{game.creator.name}
{game.creator.hasVerifiedBadge ? (
<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
) : null}
</Link>
</div>
</div>
</div>
<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
{game.description || "No description provided yet."}
</p>
</div> </div>
</div> </div>
); );

80
app/games/[id]/page.tsx
View File

@@ -1,11 +1,89 @@
import { Suspense } from "react"; import { Suspense } from "react";
import type { Metadata } from "next";
import GamePageContentF from "./content"; import GamePageContentF from "./content";
// page.tsx (Server Component) // page.tsx (Server Component)
export default async function GamePageContent({ params }: { params: { id: string } }) { export default async function GamePageContent({
params
}: {
params: { id: string };
}) {
return ( return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}> <Suspense fallback={<div className="p-4">Loading profile…</div>}>
<GamePageContentF placeId={(await params).id} /> <GamePageContentF placeId={(await params).id} />
</Suspense> </Suspense>
); );
} }
export async function generateMetadata({
params
}: {
params: { id: string };
}): Promise<Metadata> {
const placeId = params.id;
try {
const universeRes = await fetch(
`https://apis.roblox.com/universes/v1/places/${placeId}/universe`,
{ next: { revalidate: 300 } }
);
if (!universeRes.ok) {
return { title: "Game | Roblox" };
}
const { universeId } = await universeRes.json();
if (!universeId) {
return { title: "Game | Roblox" };
}
const gameRes = await fetch(
`https://games.roblox.com/v1/games?universeIds=${universeId}`,
{ next: { revalidate: 300 } }
);
if (!gameRes.ok) {
return { title: "Game | Roblox" };
}
const data = await gameRes.json();
const game = data?.data?.[0];
if (!game) {
return { title: "Game | Roblox" };
}
const title = `${game.name} | Roblox`;
const description =
game.description ||
"Roblox is a global platform that brings people together through play.";
let imageUrl: string | undefined;
try {
const thumbRes = await fetch(
`https://thumbnails.roblox.com/v1/games/multiget?universeIds=${universeId}&size=768x432&format=png&isCircular=false`,
{ next: { revalidate: 300 } }
);
if (thumbRes.ok) {
const thumbs = await thumbRes.json();
imageUrl = thumbs?.data?.[0]?.imageUrl;
}
} catch {
imageUrl = undefined;
}
return {
title,
description,
openGraph: {
title,
description,
images: imageUrl ? [imageUrl] : undefined
},
twitter: {
title,
description,
images: imageUrl ? [imageUrl] : undefined
}
};
} catch {
return { title: "Game | Roblox" };
}
}

8
app/globals.css
View File

@@ -2,11 +2,15 @@
@import "tailwindcss"; @import "tailwindcss";
body { body {
font-family: SF Pro Display, Geist; font-family:
SF Pro Display,
Geist;
} }
.font-super-mono { .font-super-mono {
font-family: SF Mono, Geist Mono; font-family:
SF Mono,
Geist Mono;
} }
@layer base { @layer base {

15
app/layout.tsx
View File

@@ -8,6 +8,7 @@ import { QuickTopUI, QuickTopUILogoPart } from "@/components/site/QuickTopUI";
import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider"; import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
import { GameLaunchProvider } from "@/components/providers/GameLaunchProvider"; import { GameLaunchProvider } from "@/components/providers/GameLaunchProvider";
import { GameLaunchDialog } from "@/components/providers/GameLaunchDialog"; import { GameLaunchDialog } from "@/components/providers/GameLaunchDialog";
import { DownloadDialog } from "@/components/providers/DownloadDialog";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -21,9 +22,18 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Home | Roblox", title: "Home | Roblox",
description: "Roblox is a global platform that brings people together through play.", description:
"Roblox is a global platform that brings people together through play.",
authors: [{ name: "Roblox Corporation" }], authors: [{ name: "Roblox Corporation" }],
keywords: ["free games", "online games", "building games", "virtual worlds", "free mmo", "gaming cloud", "physics engine"] keywords: [
"free games",
"online games",
"building games",
"virtual worlds",
"free mmo",
"gaming cloud",
"physics engine"
]
}; };
export default function RootLayout({ export default function RootLayout({
@@ -53,6 +63,7 @@ export default function RootLayout({
{children} {children}
</div> </div>
</main> </main>
<DownloadDialog />
<GameLaunchDialog /> <GameLaunchDialog />
<Toaster /> <Toaster />
</GameLaunchProvider> </GameLaunchProvider>

47
app/page.tsx
View File

@@ -6,15 +6,10 @@ import {
} from "@/components/roblox/FriendsOnline"; } from "@/components/roblox/FriendsOnline";
import { GameCard } from "@/components/roblox/GameCard"; import { GameCard } from "@/components/roblox/GameCard";
import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader"; import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
getOmniRecommendationsHome,
OmniRecommendation
} from "@/lib/omniRecommendation";
import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader"; import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertTriangleIcon } from "lucide-react";
export default function Home() { export default function Home() {
const SORTS_ALLOWED_IDS = [100000003, 100000001]; const SORTS_ALLOWED_IDS = [100000003, 100000001];
@@ -53,8 +48,10 @@ export default function Home() {
<> <>
<HomeLoggedInHeader /> <HomeLoggedInHeader />
<div className="h-4" /> <div className="h-4" />
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<BestFriendsHomeSect className="pt-2" /> <BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" /> <FriendsHomeSect className="pt-2" />
</div>
{/* <div className="justify-center w-screen px-8 pt-6"> {/* <div className="justify-center w-screen px-8 pt-6">
<Alert variant="default" className="bg-base/50 space-x-2"> <Alert variant="default" className="bg-base/50 space-x-2">
<AlertTriangleIcon /> <AlertTriangleIcon />
@@ -66,23 +63,39 @@ export default function Home() {
</Alert> </Alert>
</div> */} </div> */}
<div className="p-4 space-y-8 no-scrollbar"> <div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
{isLoading || !rec ? ( {isLoading ? (
<div className="space-y-6">
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, index) => (
<Card key={`home-skeleton-${index}`}>
<CardContent className="p-4 space-y-3">
<div className="aspect-video rounded-xl bg-surface0/60 animate-pulse" />
<div className="h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
<div className="h-3 w-1/3 rounded bg-surface0/60 animate-pulse" />
</CardContent>
</Card>
))}
</div>
</div>
) : !rec ? (
<Card> <Card>
<CardContent className="p-4"> <CardContent className="p-6 text-sm text-subtext1">
<div className="h-[200px] flex items-center justify-center"> We could not load recommendations right now. Try
<div className="animate-pulse text-muted-foreground"> again in a moment.
Loading...
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
rec.sorts rec.sorts
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId)) .filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
.map((sort, idx) => ( .map((sort, idx) => (
<div key={idx}> <section key={idx} className="space-y-4">
<h1 className="text-2xl pb-2">{sort.topic}</h1> <div className="flex items-center justify-between">
<h2 className="text-xl sm:text-2xl font-semibold text-text">
{sort.topic}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{(sort.recommendationList || []).map( {(sort.recommendationList || []).map(
(recommendation, idxb) => { (recommendation, idxb) => {
@@ -99,7 +112,7 @@ export default function Home() {
} }
)} )}
</div> </div>
</div> </section>
)) ))
)} )}
</div> </div>

6
app/users/[id]/content.tsx
View File

@@ -25,7 +25,11 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
{!theirFriends && <Skeleton className="w-full h-64" />} {!theirFriends && <Skeleton className="w-full h-64" />}
{/* {/*
//@ts-expect-error */} //@ts-expect-error */}
<FriendCarousel title={<span className="pl-4">Friends</span>} className="overflow-visible -ml-4" friends={theirFriends || []} /> <FriendCarousel
title={<span className="pl-4">Friends</span>}
className="overflow-visible -ml-4"
friends={theirFriends || []}
/>
</> </>
); );
} }

6
app/users/[id]/page.tsx
View File

@@ -2,7 +2,11 @@ import { Suspense } from "react";
import UserProfileContent from "./content"; import UserProfileContent from "./content";
// page.tsx (Server Component) // page.tsx (Server Component)
export default async function UserProfilePage({ params }: { params: { id: string } }) { export default async function UserProfilePage({
params
}: {
params: { id: string };
}) {
return ( return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}> <Suspense fallback={<div className="p-4">Loading profile…</div>}>
<UserProfileContent userId={(await params).id} /> <UserProfileContent userId={(await params).id} />

170
components/providers/DownloadDialog.tsx Normal file
View 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>
);
}

69
components/providers/GameLaunchDialog.tsx
View File

@@ -1,11 +1,15 @@
"use client"; "use client";
import { useEffect, useState, useSyncExternalStore } from "react"; 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 { Button } from "@/components/ui/button";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons"; import { RobloxLogoIcon } from "@/components/roblox/RobloxIcons";
import Link from "next/link";
export function GameLaunchDialog() { export function GameLaunchDialog() {
const state = useSyncExternalStore( const state = useSyncExternalStore(
@@ -16,6 +20,34 @@ export function GameLaunchDialog() {
const [launchTimeouted, setLaunchTimeouted] = useState<boolean>(false); 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(() => { useEffect(() => {
if (!state.isOpen) { if (!state.isOpen) {
setLaunchTimeouted(false); setLaunchTimeouted(false);
@@ -33,7 +65,7 @@ export function GameLaunchDialog() {
return ( return (
<div <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} onClick={closeGameLaunch}
> >
<div <div
@@ -50,28 +82,41 @@ export function GameLaunchDialog() {
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
<div className="flex flex-col items-center gap-4 px-6 py-8 text-center"> <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"> <div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
<RobloxLogoIcon /> <RobloxLogoIcon className="h-10 w-10 text-blue" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<p className="text-2xl font-semibold text-text"> <p className="text-2xl font-semibold text-text">
{!launchTimeouted ? ( {!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> </p>
</div> </div>
<Button disabled={!launchTimeouted} variant="default" className="w-full rounded-full">
{launchTimeouted ? ( {launchTimeouted ? (
<Link href="https://flathub.org/en/apps/org.vinegarhq.Sober" target="_blank" rel="noopener noreferrer"> <Button
onClick={handleDownloadClick}
className="w-full rounded-full"
>
Download Roblox Download Roblox
</Link>
) : null}
{!launchTimeouted && <div className="h-4 w-4 rounded-full border-2 border-white/70 border-t-transparent animate-spin" />}
</Button> </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> </div>
</div> </div>

7
components/providers/GameLaunchProvider.tsx
View File

@@ -34,9 +34,12 @@ export function GameLaunchProvider({
gameInstanceId: jobId ?? undefined 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)) { for (const [key, value] of Object.entries(gameLaunchParams)) {
if (value !== undefined && value !== null) { if (value !== undefined && value !== null) {

30
components/providers/download-dialog-store.ts Normal file
View 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();
}

4
components/providers/game-launch-store.ts
View File

@@ -15,6 +15,10 @@ export function getGameLaunchState() {
return state; return state;
} }
export function isGameLaunchOpen() {
return state.isOpen;
}
export function subscribeGameLaunch(listener: () => void) { export function subscribeGameLaunch(listener: () => void) {
listeners.add(listener); listeners.add(listener);
return () => listeners.delete(listener); return () => listeners.delete(listener);

6
components/roblox/FriendCarousel.tsx
View File

@@ -57,7 +57,7 @@ export function FriendCarousel({
<h1 className="text-2xl pt-4 pl-4 -mb-4">{title}</h1> <h1 className="text-2xl pt-4 pl-4 -mb-4">{title}</h1>
<div className="rounded-xl flex flex-col gap-2 px-4 no-scrollbar"> <div className="rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
<div <div
className="flex p-8 items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0" className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar py-6 scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
style={{ style={{
scrollSnapType: "x mandatory", scrollSnapType: "x mandatory",
WebkitOverflowScrolling: "touch", WebkitOverflowScrolling: "touch",
@@ -108,7 +108,7 @@ export function FriendCarousel({
<div className="text-center items-center justify-center content-center"> <div className="text-center items-center justify-center content-center">
<span className="space-x-1 flex items-center"> <span className="space-x-1 flex items-center">
<p>{a.displayName || a.name}</p> <p>{a.displayName || a.name}</p>
{!a.hasVerifiedBadge ? ( {a.hasVerifiedBadge ? (
<VerifiedIcon <VerifiedIcon
useDefault useDefault
className={`w-4 h-4 shrink-0`} className={`w-4 h-4 shrink-0`}
@@ -136,7 +136,7 @@ export function FriendCarousel({
<span className="line-clamp-1 overflow-hidden text-ellipsis"> <span className="line-clamp-1 overflow-hidden text-ellipsis">
{a.displayName || a.name} {a.displayName || a.name}
</span> </span>
{!a.hasVerifiedBadge ? ( {a.hasVerifiedBadge ? (
<VerifiedIcon <VerifiedIcon
className={`text-base ${fillColor} w-3 h-3 shrink-0`} className={`text-base ${fillColor} w-3 h-3 shrink-0`}
/> />

6
components/roblox/FriendsOnline.tsx
View File

@@ -11,7 +11,11 @@ export function FriendsHomeSect(
) { ) {
const friends = useFriendsHome(); const friends = useFriendsHome();
return friends && <FriendCarousel {...props} title="Friends" friends={friends} />; return (
friends && (
<FriendCarousel {...props} title="Friends" friends={friends} />
)
);
} }
export function BestFriendsHomeSect( export function BestFriendsHomeSect(

92
components/roblox/GameCard.tsx
View File

@@ -12,6 +12,10 @@ import { ContextMenuItem } from "@radix-ui/react-context-menu";
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import { useGameLaunch } from "@/components/providers/GameLaunchProvider"; import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import GamePageContent from "@/app/games/[id]/content";
import { Maximize2 } from "lucide-react";
import { useRouter } from "next/navigation";
interface GameCardProps { interface GameCardProps {
game: ContentMetadata; game: ContentMetadata;
@@ -19,11 +23,24 @@ interface GameCardProps {
export const GameCard = React.memo(function GameCard({ game }: GameCardProps) { export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
const { launchGame } = useGameLaunch(); const { launchGame } = useGameLaunch();
const totalVotes = game.totalUpVotes + game.totalDownVotes;
const rating =
totalVotes > 0 ? Math.round((game.totalUpVotes / totalVotes) * 100) : 0;
const [isOpen, setIsOpen] = React.useState(false);
const router = useRouter();
return ( return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger> <ContextMenuTrigger>
<div className="overflow-hidden aspect-video relative bg-muted rounded-2xl"> <button
type="button"
className="text-left"
onClick={() => setIsOpen(true)}
>
<div className="space-y-2">
<div className="group overflow-hidden aspect-video relative bg-muted rounded-2xl ring-1 ring-surface0/60 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
<div className="overflow-hidden"> <div className="overflow-hidden">
{game.primaryMediaAsset ? ( {game.primaryMediaAsset ? (
<LazyLoadedImage <LazyLoadedImage
@@ -44,40 +61,25 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
</div> </div>
)} )}
</div> </div>
<div className="text-blue bg-base font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1"> <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-crust/50 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
<div className="text-blue bg-base/90 font-mono flex right-2 bottom-2 absolute rounded-lg px-2 py-1 text-xs shadow-sm ring-1 ring-surface0/60 backdrop-blur">
{game.playerCount.toLocaleString()} {game.playerCount.toLocaleString()}
</div> </div>
</div> </div>
</ContextMenuTrigger> <div>
<ContextMenuContent className="max-w-[512px] p-2 space-y-1"> <p className="text-sm font-semibold text-text line-clamp-2">
<ContextMenuItem
disabled
className="text-s font-bold text-muted-foreground"
>
{game.name} {game.name}
</ContextMenuItem> </p>
<ContextMenuItem <p className="text-xs text-subtext1">
disabled {rating}% rating
className="text-xs text-subtext0 text-muted-foreground" </p>
> </div>
{Math.round( </div>
(game.totalUpVotes / </button>
(game.totalUpVotes + game.totalDownVotes)) * </ContextMenuTrigger>
100 <ContextMenuContent className="min-w-[180px] p-1">
)}
% rating - {game.playerCount.toLocaleString()} playing
</ContextMenuItem>
<ContextMenuItem
disabled
className="pb-1 text-xs text-subtext0 text-muted-foreground"
>
{game.ageRecommendationDisplayName || ""}
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem> <ContextMenuItem>
<Link href={`/games/${game.rootPlaceId}`}> <Link href={`/games/${game.rootPlaceId}`}>Open</Link>
Open
</Link>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
onClick={() => { onClick={() => {
@@ -89,10 +91,12 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
<ContextMenuSeparator /> <ContextMenuSeparator />
<ContextMenuItem <ContextMenuItem
onClick={() => { onClick={() => {
navigator.clipboard.writeText(`${game.rootPlaceId}`); navigator.clipboard.writeText(
`${game.rootPlaceId}`
);
}} }}
> >
Copy rootPlaceId Copy placeId
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
onClick={() => { onClick={() => {
@@ -103,5 +107,29 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
</ContextMenuItem> </ContextMenuItem>
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
<DialogContent className="max-w-6xl h-[75vh] w-[96vw] max-h-[90vh] overflow-hidden bg-crust ring-1 ring-surface0/60 p-0">
<DialogTitle className="sr-only" hidden>
{game.name}
</DialogTitle>
<div
className="absolute right-12 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
onClick={(e) => {
e.preventDefault();
router.push(`/games/${game.rootPlaceId}`);
}}
>
<Maximize2 className="h-4 w-4" />
<span className="sr-only">Maximize</span>
</div>
<div className="overflow-y-auto">
<div className="max-h-[70vh] px-2 py-4">
<GamePageContent
placeId={game.rootPlaceId.toString()}
shouldSetDocumentTitle={false}
/>
</div>
</div>
</DialogContent>
</Dialog>
); );
}); });

22
components/roblox/PlayGameButton.tsx Normal file
View File

@@ -0,0 +1,22 @@
"use client";
import { Button } from "@/components/ui/button";
import { useGameLaunch } from "@/components/providers/GameLaunchProvider";
import { Play } from "lucide-react";
type PlayGameButtonProps = {
placeId: string;
};
export function PlayGameButton({ placeId }: PlayGameButtonProps) {
const { launchGame } = useGameLaunch();
return (
<Button
onClick={() => launchGame(placeId)}
className="h-12 w-full px-10 rounded-2xl text-base font-semibold flex items-center gap-2 bg-primary hover:bg-primary/90"
>
<Play className="h-16 w-16 fill-base transition-transform duration-200 hover:scale-110" />
</Button>
);
}

33
components/roblox/RobloxIcons.tsx
View File

@@ -97,13 +97,34 @@ export const RobuxIcon = (props: React.SVGProps<SVGSVGElement>) => (
); );
export const RobloxLogoIcon = (props: React.SVGProps<SVGSVGElement>) => ( export const RobloxLogoIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" fill="none" viewBox="0 0 1024 1024"> <svg
xmlns="http://www.w3.org/2000/svg"
width="1024"
height="1024"
fill="none"
viewBox="0 0 1024 1024"
>
<g clipPath="url(#a)"> <g clipPath="url(#a)">
<mask id="b" width="1024" height="1024" x="0" y="0" maskUnits="userSpaceOnUse" className="mask-type-alpha"> <mask
<path fill="#d9d9d9" d="M0 365.856c0-128.061 0-192.092 24.923-241.005a228.66 228.66 0 0 1 99.928-99.928C173.764 0 237.795 0 365.856 0h292.288c128.061 0 192.092 0 241.005 24.923a228.66 228.66 0 0 1 99.929 99.928C1024 173.764 1024 237.795 1024 365.856v292.288c0 128.061 0 192.092-24.922 241.005a228.66 228.66 0 0 1-99.929 99.929C850.236 1024 786.205 1024 658.144 1024H365.856c-128.061 0-192.092 0-241.005-24.922a228.66 228.66 0 0 1-99.928-99.929C0 850.236 0 786.205 0 658.144z"/> id="b"
width="1024"
height="1024"
x="0"
y="0"
maskUnits="userSpaceOnUse"
className="mask-type-alpha"
>
<path
fill="#d9d9d9"
d="M0 365.856c0-128.061 0-192.092 24.923-241.005a228.66 228.66 0 0 1 99.928-99.928C173.764 0 237.795 0 365.856 0h292.288c128.061 0 192.092 0 241.005 24.923a228.66 228.66 0 0 1 99.929 99.928C1024 173.764 1024 237.795 1024 365.856v292.288c0 128.061 0 192.092-24.922 241.005a228.66 228.66 0 0 1-99.929 99.929C850.236 1024 786.205 1024 658.144 1024H365.856c-128.061 0-192.092 0-241.005-24.922a228.66 228.66 0 0 1-99.928-99.929C0 850.236 0 786.205 0 658.144z"
/>
</mask> </mask>
<g mask="url(#b)"><path fill="#335fff" d="M0 0h1024v1024H0z"/> <g mask="url(#b)">
<path fill="#fff" d="m307.201 157.281-149.92 559.518 559.518 149.92 149.92-559.518zm262.041 453.876-156.349-41.915 41.914-156.349 156.412 41.914z"/> <path fill="#335fff" d="M0 0h1024v1024H0z" />
<path
fill="#fff"
d="m307.201 157.281-149.92 559.518 559.518 149.92 149.92-559.518zm262.041 453.876-156.349-41.915 41.914-156.349 156.412 41.914z"
/>
</g> </g>
</g> </g>
<defs> <defs>
@@ -112,4 +133,4 @@ export const RobloxLogoIcon = (props: React.SVGProps<SVGSVGElement>) => (
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
) );

3
components/roblox/UserProfileHeader.tsx
View File

@@ -19,7 +19,6 @@ import Link from "next/link";
import { UserProfileDetails } from "@/lib/profile"; import { UserProfileDetails } from "@/lib/profile";
export function UserProfileHeader({ user }: { user: UserProfileDetails }) { export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
if (!user) { if (!user) {
return ( return (
<div className="justify-center w-screen px-8 py-6"> <div className="justify-center w-screen px-8 py-6">
@@ -98,7 +97,7 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
<RobloxBannedSmall className="w-6 h-6 text-blue" /> <RobloxBannedSmall className="w-6 h-6 text-blue" />
)} )}
</span> </span>
<span className="text-base font-super-mono text-subtext0 mt-1"> <span className="font-super-mono text-subtext0 mt-1">
{isLoaded ? ( {isLoaded ? (
<> <>
@{user.name} @{user.name}

37
components/site/HomeUserHeader.tsx
View File

@@ -15,7 +15,6 @@ import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
import { loadThumbnails } from "@/lib/thumbnailLoader"; import { loadThumbnails } from "@/lib/thumbnailLoader";
import { toast } from "sonner"; import { toast } from "sonner";
import Link from "next/link"; import Link from "next/link";
import { Button } from "../ui/button";
// chatgpt + human // chatgpt + human
function randomGreeting(name: string): string { function randomGreeting(name: string): string {
@@ -71,8 +70,9 @@ export function HomeLoggedInHeader() {
return ( return (
<> <>
{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */} {/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<div <div
className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0" className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 rounded-2xl bg-base/40 ring-1 ring-surface0/60 px-4 sm:px-6 py-4 sm:py-6 mt-6"
onContextMenu={(e) => { onContextMenu={(e) => {
if (e.button === 2) { if (e.button === 2) {
toast("[debug] reloading user pfp"); toast("[debug] reloading user pfp");
@@ -89,16 +89,16 @@ export function HomeLoggedInHeader() {
}} }}
> >
{!isLoaded ? ( {!isLoaded ? (
<Skeleton className="w-28 h-28 rounded-full" /> <Skeleton className="w-24 h-24 sm:w-28 sm:h-28 rounded-full" />
) : ( ) : (
<LazyLoadedImage <LazyLoadedImage
imgId={`AvatarHeadShot_${profile.id}`} imgId={`AvatarHeadShot_${profile.id}`}
alt="" alt=""
className={`w-28 h-28 rounded-full shadow-crust border-2 ${borderColor}`} className={`w-24 h-24 sm:w-28 sm:h-28 rounded-full shadow-crust border-2 ${borderColor}`}
/> />
)} )}
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<span className="text-3xl font-bold text-text flex items-center gap-2"> <span className="text-2xl sm:text-3xl font-bold text-text flex flex-wrap items-center gap-2">
{isLoaded ? ( {isLoaded ? (
<Link href={`/users/${profile.id}`}> <Link href={`/users/${profile.id}`}>
{randomGreeting( {randomGreeting(
@@ -108,38 +108,31 @@ export function HomeLoggedInHeader() {
)} )}
</Link> </Link>
) : ( ) : (
<> <Skeleton className="w-56 sm:w-96 h-7 sm:h-8 rounded-lg" />
<Skeleton className="w-96 h-8 rounded-lg" />
</>
)} )}
{!!accountSettings && {!!accountSettings &&
accountSettings.IsPremium === true ? ( accountSettings.IsPremium === true ? (
<RobloxPremiumSmall className="w-6 h-6 fill-transparent" /> <RobloxPremiumSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-transparent" />
) : ( ) : null}
<></> {isLoaded && profile.hasVerifiedBadge ? (
)} <RobloxVerifiedSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-blue text-base" />
{isLoaded ? ( ) : null}
<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
) : (
<></>
)}
</span> </span>
<span className="text-base font-super-mono text-subtext0 mt-1"> <span className="text-sm font-super-mono text-subtext0 mt-1">
{isLoaded ? ( {isLoaded ? (
<> <>
@{profile.name} @{profile.name}
{!!userActivity && userPresence === 2 ? ( {!!userActivity && userPresence === 2 ? (
<> - {userActivity.lastLocation}</> <> - {userActivity.lastLocation}</>
) : ( ) : null}
<></>
)}
</> </>
) : ( ) : (
<Skeleton className="w-64 h-6 rounded-lg" /> <Skeleton className="w-40 sm:w-64 h-5 sm:h-6 rounded-lg" />
)} )}
</span> </span>
</div> </div>
</div> </div>
</div>
</> </>
); );
} }

60
components/site/OutfitQuickChooser.tsx
View File

@@ -6,8 +6,9 @@ import LazyLoadedImage from "../util/LazyLoadedImage";
import { StupidHoverThing } from "../util/MiscStuff"; import { StupidHoverThing } from "../util/MiscStuff";
import { loadThumbnails } from "@/lib/thumbnailLoader"; import { loadThumbnails } from "@/lib/thumbnailLoader";
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount"; import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { useEffect } from "react"; import { useEffect, useMemo, useState } from "react";
import { X } from "lucide-react"; import { Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
type OutfitSelectorProps = { type OutfitSelectorProps = {
setVisible: (visible: boolean) => void; setVisible: (visible: boolean) => void;
@@ -23,6 +24,7 @@ export function OutfitSelector({
}: OutfitSelectorProps) { }: OutfitSelectorProps) {
const outfits = useAvatarOutfits(); const outfits = useAvatarOutfits();
const acc = useCurrentAccount(); const acc = useCurrentAccount();
const [query, setQuery] = useState("");
useEffect(() => { useEffect(() => {
if (!outfits || outfits.length === 0) return; if (!outfits || outfits.length === 0) return;
@@ -47,6 +49,15 @@ export function OutfitSelector({
const isLoading = outfits === null; const isLoading = outfits === null;
const hasOutfits = Array.isArray(outfits) && outfits.length > 0; const hasOutfits = Array.isArray(outfits) && outfits.length > 0;
const filteredOutfits = useMemo(() => {
if (!hasOutfits) return [];
if (!query.trim()) return outfits;
const lowered = query.trim().toLowerCase();
return outfits.filter((outfit) =>
outfit.name.toLowerCase().includes(lowered)
);
}, [hasOutfits, outfits, query]);
return ( return (
<div <div
className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm" className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
@@ -56,13 +67,27 @@ export function OutfitSelector({
className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl" className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >
<div className="flex items-center justify-between border-b border-surface0/60 px-6 py-4"> <div className="flex flex-col gap-3 border-b border-surface0/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
<p className="text-lg font-semibold text-text">Outfits</p> <p className="text-lg font-semibold text-text">
Outfits
</p>
<p className="text-xs text-subtext1"> <p className="text-xs text-subtext1">
Pick a look to update your avatar instantly. Pick a look to update your avatar instantly.
</p> </p>
</div> </div>
<div className="flex items-center gap-2">
<div className="relative w-full sm:w-64">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtext1" />
<Input
value={query}
onChange={(event) =>
setQuery(event.target.value)
}
placeholder="Search outfits"
className="pl-9"
/>
</div>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@@ -72,6 +97,7 @@ export function OutfitSelector({
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div>
<div className="p-6"> <div className="p-6">
{!acc ? ( {!acc ? (
@@ -91,8 +117,14 @@ export function OutfitSelector({
))} ))}
</div> </div>
) : hasOutfits ? ( ) : hasOutfits ? (
<div className="space-y-4">
<p className="text-xs text-subtext1">
{filteredOutfits.length} outfit
{filteredOutfits.length === 1 ? "" : "s"}
</p>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
{outfits.map((outfit: { id: number; name: string }) => ( {filteredOutfits.map(
(outfit: { id: number; name: string }) => (
<StupidHoverThing <StupidHoverThing
key={outfit.id} key={outfit.id}
delayDuration={0} delayDuration={0}
@@ -101,7 +133,10 @@ export function OutfitSelector({
<button <button
className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60" className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
onClick={async () => { onClick={async () => {
await updateOutfit(outfit, acc); await updateOutfit(
outfit,
acc
);
setVisible(false); setVisible(false);
}} }}
aria-label={`Wear ${outfit.name}`} aria-label={`Wear ${outfit.name}`}
@@ -118,12 +153,19 @@ export function OutfitSelector({
</p> </p>
</button> </button>
</StupidHoverThing> </StupidHoverThing>
))} )
)}
</div>
{filteredOutfits.length === 0 ? (
<div className="rounded-xl border border-surface0/60 bg-base/50 p-4 text-sm text-subtext1">
No outfits match that search yet.
</div>
) : null}
</div> </div>
) : ( ) : (
<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1"> <div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
No outfits found yet. Make one in the Roblox avatar editor, No outfits found yet. Make one in the Roblox avatar
then come back here. editor, then come back here.
</div> </div>
)} )}
</div> </div>

12
components/site/QuickTopUI.tsx
View File

@@ -81,9 +81,12 @@ async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
); );
} }
await proxyFetch(`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`, { await proxyFetch(
`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`,
{
method: "POST" method: "POST"
}); }
);
loadThumbnails([ loadThumbnails([
{ {
@@ -158,7 +161,10 @@ export const QuickTopUILogoPart = React.memo(function () {
> >
<img src="/roblox.png" className="w-6 h-6" alt="" /> <img src="/roblox.png" className="w-6 h-6" alt="" />
</Link> </Link>
<Link href="/" className="gap-2 flex items-center text-sm font-medium"> <Link
href="/"
className="gap-2 flex items-center text-sm font-medium"
>
<p>{"Roblox"}</p> <p>{"Roblox"}</p>
{/* <p className="text-surface2 line-clamp-1"> {/* <p className="text-surface2 line-clamp-1">
{process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD}{" "} {process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD}{" "}

3
components/ui/badge.tsx
View File

@@ -24,7 +24,8 @@ const badgeVariants = cva(
); );
export interface BadgeProps export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>, extends
React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {} VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) { function Badge({ className, variant, ...props }: BadgeProps) {

3
components/ui/button.tsx
View File

@@ -35,7 +35,8 @@ const buttonVariants = cva(
); );
export interface ButtonProps export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>, extends
React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean; asChild?: boolean;
} }

6
components/ui/chart.tsx
View File

@@ -102,8 +102,10 @@ ${colorConfig
const ChartTooltip = RechartsPrimitive.Tooltip; const ChartTooltip = RechartsPrimitive.Tooltip;
type ChartTooltipContentProps = type ChartTooltipContentProps = RechartsPrimitive.TooltipContentProps<
RechartsPrimitive.TooltipContentProps<number | string, string> & number | string,
string
> &
React.ComponentProps<"div"> & { React.ComponentProps<"div"> & {
hideLabel?: boolean; hideLabel?: boolean;
hideIndicator?: boolean; hideIndicator?: boolean;

2
components/ui/dialog.tsx
View File

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
ref={ref} ref={ref}
className={cn( className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className className
)} )}
{...props} {...props}

3
components/ui/sheet.tsx
View File

@@ -48,7 +48,8 @@ const sheetVariants = cva(
); );
interface SheetContentProps interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, extends
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {} VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef< const SheetContent = React.forwardRef<

15
hooks/roblox/useFriends.ts
View File

@@ -8,7 +8,7 @@ import assert from "assert";
export function useFriendsHome(targetId?: string) { export function useFriendsHome(targetId?: string) {
const acct = useCurrentAccount(); const acct = useCurrentAccount();
const target = targetId || (acct ? acct.id : "acctId") const target = targetId || (acct ? acct.id : "acctId");
const { data: friends } = useQuery({ const { data: friends } = useQuery({
queryKey: ["friends", target], queryKey: ["friends", target],
queryFn: async () => { queryFn: async () => {
@@ -47,15 +47,20 @@ export function useFriendsHome( targetId?: string ) {
format: "webp" format: "webp"
})) }))
).catch(() => {}); ).catch(() => {});
const friendsList = j.data.map((a) => { const friendsList = j.data
.map((a) => {
const x = j2.data.find((b) => b.id === a.id); const x = j2.data.find((b) => b.id === a.id);
return !!x ? { return !!x
? {
id: a.id, id: a.id,
hasVerifiedBadge: x?.hasVerifiedBadge || false, hasVerifiedBadge: x?.hasVerifiedBadge || false,
name: x?.name || "?", name: x?.name || "?",
displayName: x?.displayName || "?" displayName: x?.displayName || "?"
} : null; }
}).filter(a=>!!a).filter(a=>a.id.toString()!=="-1"); : null;
})
.filter((a) => !!a)
.filter((a) => a.id.toString() !== "-1");
return friendsList; return friendsList;
}, },
enabled: !!acct, enabled: !!acct,

11
hooks/roblox/usePlaceDetails.ts
View File

@@ -18,14 +18,25 @@ type PlaceDetails = {
name: string; name: string;
description: string; description: string;
creator: Creator; creator: Creator;
sourceName: string | null;
sourceDescription: string | null;
price: number | null;
allowedGearGenres: string[];
allowedGearCategories: string[];
isGenreEnforced: boolean;
copyingAllowed: boolean;
playing: number; playing: number;
visits: number; visits: number;
maxPlayers: number; maxPlayers: number;
created: string; created: string;
updated: string; updated: string;
studioAccessToApisAllowed: boolean;
createVipServersAllowed: boolean;
genre: string; genre: string;
genre_l1?: string; genre_l1?: string;
genre_l2?: string; genre_l2?: string;
untranslated_genre_l1?: string;
isAllGenre?: boolean;
favoritedCount: number; favoritedCount: number;
isFavoritedByUser: boolean; isFavoritedByUser: boolean;
universeAvatarType: string; universeAvatarType: string;

2
hooks/roblox/usePresence.ts
View File

@@ -51,7 +51,7 @@ export function useFriendsPresence(userIds: number[]) {
// assert is shit // assert is shit
if (!res.ok) { if (!res.ok) {
throw "wtf?"; throw "wtf?";
}; }
const json = await res.json(); const json = await res.json();

4
tailwind.config.ts
View File

@@ -105,7 +105,5 @@ export default {
} }
} }
}, },
plugins: [ plugins: [require("tailwindcss-animate")]
require("tailwindcss-animate")
]
} satisfies Config; } satisfies Config;

14
tsconfig.json
View File

@@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@@ -23,9 +19,7 @@
} }
], ],
"paths": { "paths": {
"@/*": [ "@/*": ["./*"]
"./*"
]
} }
}, },
"include": [ "include": [
@@ -35,7 +29,5 @@
".next/types/**/*.ts", ".next/types/**/*.ts",
".next/dev/types/**/*.ts" ".next/dev/types/**/*.ts"
], ],
"exclude": [ "exclude": ["node_modules"]
"node_modules"
]
} }