roblox/app/games/[id]/content.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePlaceDetails } from "@/hooks/roblox/usePlaceDetails";
import { RobloxVerifiedSmall } from "@/components/roblox/RobloxTooltips";
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,
	shouldSetDocumentTitle = true
}: GamePageContentProps) {
	const game = usePlaceDetails(placeId);
	const [hasHydrated, setHasHydrated] = useState(false);

	// Set dynamic document title
	useEffect(() => {
		if (!shouldSetDocumentTitle) return;
		if (!!game) {
			document.title = `${game.name} | Roblox`;
		}
	}, [game, shouldSetDocumentTitle]);

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