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" };
}
}