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";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
import { Button } from "@/components/ui/button";
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 {
placeId: string;
shouldSetDocumentTitle?: boolean;
}
export default function GamePageContent({ placeId }: GamePageContentProps) {
export default function GamePageContent({
placeId,
shouldSetDocumentTitle = true
}: GamePageContentProps) {
const game = usePlaceDetails(placeId);
const { launchGame } = useGameLaunch();
const [hasHydrated, setHasHydrated] = useState(false);
// Set dynamic document title
useEffect(() => {
if (!shouldSetDocumentTitle) return;
if (!!game) {
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 (
<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="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
<div className="space-y-4">
<div className="h-7 w-3/4 rounded bg-surface0/60 animate-pulse" />
<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 className="grid grid-cols-2 gap-3">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={`game-stat-skeleton-${index}`}
className="h-20 rounded-xl bg-surface0/60 animate-pulse"
/>
))}
</div>
</div>
</div>
<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="p-4 space-y-6">
<Button onClick={() => launchGame(game.rootPlaceId.toString())}>
PLAY
</Button>
<div className="break-all pl-4 whitespace-pre-line font-black text-2xl">
{game.name}
</div>
<div className="break-all pl-4 whitespace-pre-line font-bold flex">
<Link
href={`https://roblox.com/${
game.creator.type === "Group" ? "groups" : "user"
}/${game.creator.id}`}
className="flex"
>
<span className="underline">
{game.creator.name}
</span>
{game.creator.hasVerifiedBadge && (
<RobloxVerifiedSmall className="text-base fill-blue w-4 h-4" />
)}
</Link>
<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="break-all pl-4 whitespace-pre-line">
{game.description}
<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>
);

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

@@ -1,11 +1,89 @@
import { Suspense } from "react";
import type { Metadata } from "next";
import GamePageContentF from "./content";
// page.tsx (Server Component)
export default async function GamePageContent({ params }: { params: { id: string } }) {
export default async function GamePageContent({
params
}: {
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<GamePageContentF placeId={(await params).id} />
</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" };
}
}

80
app/globals.css
View File

@@ -2,11 +2,15 @@
@import "tailwindcss";
body {
font-family: SF Pro Display, Geist;
font-family:
SF Pro Display,
Geist;
}
.font-super-mono {
font-family: SF Mono, Geist Mono;
font-family:
SF Mono,
Geist Mono;
}
@layer base {
@@ -83,41 +87,41 @@ body {
}
@theme {
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
--color-sidebar: hsl(var(--sidebar-background));
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
--color-sidebar-primary: hsl(var(--sidebar-primary));
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
--color-sidebar-accent: hsl(var(--sidebar-accent));
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
--color-sidebar-border: hsl(var(--sidebar-border));
--color-sidebar-ring: hsl(var(--sidebar-ring));
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
--color-sidebar: hsl(var(--sidebar-background));
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
--color-sidebar-primary: hsl(var(--sidebar-primary));
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
--color-sidebar-accent: hsl(var(--sidebar-accent));
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
--color-sidebar-border: hsl(var(--sidebar-border));
--color-sidebar-ring: hsl(var(--sidebar-ring));
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
}
@layer base {
@@ -140,5 +144,5 @@ body {
}
}
@utility border-border {
border-color: hsl(var(--border));
border-color: hsl(var(--border));
}

17
app/layout.tsx
View File

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

51
app/page.tsx
View File

@@ -6,15 +6,10 @@ import {
} from "@/components/roblox/FriendsOnline";
import { GameCard } from "@/components/roblox/GameCard";
import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent } from "@/components/ui/card";
import {
getOmniRecommendationsHome,
OmniRecommendation
} from "@/lib/omniRecommendation";
import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertTriangleIcon } from "lucide-react";
export default function Home() {
const SORTS_ALLOWED_IDS = [100000003, 100000001];
@@ -53,8 +48,10 @@ export default function Home() {
<>
<HomeLoggedInHeader />
<div className="h-4" />
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
</div>
{/* <div className="justify-center w-screen px-8 pt-6">
<Alert variant="default" className="bg-base/50 space-x-2">
<AlertTriangleIcon />
@@ -66,23 +63,39 @@ export default function Home() {
</Alert>
</div> */}
<div className="p-4 space-y-8 no-scrollbar">
{isLoading || !rec ? (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
{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>
<CardContent className="p-4">
<div className="h-[200px] flex items-center justify-center">
<div className="animate-pulse text-muted-foreground">
Loading...
</div>
</div>
<CardContent className="p-6 text-sm text-subtext1">
We could not load recommendations right now. Try
again in a moment.
</CardContent>
</Card>
) : (
rec.sorts
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
.map((sort, idx) => (
<div key={idx}>
<h1 className="text-2xl pb-2">{sort.topic}</h1>
<section key={idx} className="space-y-4">
<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">
{(sort.recommendationList || []).map(
(recommendation, idxb) => {
@@ -99,7 +112,7 @@ export default function Home() {
}
)}
</div>
</div>
</section>
))
)}
</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" />}
{/*
//@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";
// page.tsx (Server Component)
export default async function UserProfilePage({ params }: { params: { id: string } }) {
export default async function UserProfilePage({
params
}: {
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<UserProfileContent userId={(await params).id} />