315 lines
15 KiB
TypeScript
315 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useEffect } from "react";
|
|
import { ModalPrices, ModalReviews, ModalScreenshots } from "@/components/game-profile-sections";
|
|
import { formatReleaseDate, selectGameView, type ModalDict } from "@/lib/game/game-format";
|
|
import { steamdbAppUrl } from "@/lib/game/discord-app";
|
|
import type { Locale } from "@/lib/i18n/locales";
|
|
import { useGameProfile } from "@/hooks/use-game-profile";
|
|
|
|
export function GameProfileModal({
|
|
applicationId,
|
|
heroSeed,
|
|
lang,
|
|
iconUrl,
|
|
fallbackName,
|
|
fallbackGameUrl,
|
|
dict,
|
|
onClose,
|
|
}: {
|
|
applicationId: string;
|
|
heroSeed: number;
|
|
lang: Locale;
|
|
iconUrl: string | null;
|
|
fallbackName: string;
|
|
fallbackGameUrl: string;
|
|
dict: ModalDict;
|
|
onClose: () => void;
|
|
}) {
|
|
const {
|
|
profile,
|
|
failed,
|
|
localeTag,
|
|
hero,
|
|
hasDetails,
|
|
partialFail,
|
|
isDeterministicMiss,
|
|
canRetry,
|
|
retry,
|
|
reset,
|
|
setBannerPick,
|
|
} = useGameProfile(applicationId, lang, heroSeed);
|
|
|
|
useEffect(() => {
|
|
function onKey(event: KeyboardEvent): void {
|
|
if (event.key === "Escape") {
|
|
onClose();
|
|
}
|
|
}
|
|
document.addEventListener("keydown", onKey);
|
|
const previous = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
document.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = previous;
|
|
};
|
|
}, [onClose]);
|
|
|
|
const { gameUrl, name, bestPrice, historyLow, isFree } = selectGameView(
|
|
profile,
|
|
fallbackName,
|
|
fallbackGameUrl,
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 p-4 backdrop-blur-sm sm:items-center"
|
|
onClick={onClose}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={name}
|
|
className="modal-scroll max-h-[85vh] w-full max-w-4xl overflow-y-auto rounded-3xl border border-white/10 bg-panel shadow-2xl"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
{hero ? (
|
|
<div className="relative h-48 w-full shrink-0 sm:h-64">
|
|
<Image
|
|
src={hero}
|
|
alt=""
|
|
fill
|
|
sizes="(max-width: 896px) 100vw, 896px"
|
|
className="rounded-t-3xl object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 rounded-t-3xl bg-gradient-to-t from-panel via-panel/30 to-transparent" />
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="p-5 sm:p-6">
|
|
<div className="flex items-center gap-4">
|
|
{iconUrl ? (
|
|
<Image
|
|
src={iconUrl}
|
|
alt=""
|
|
width={64}
|
|
height={64}
|
|
className="shrink-0 rounded-2xl border border-white/10"
|
|
/>
|
|
) : (
|
|
<div
|
|
aria-hidden
|
|
className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-blurple/20 text-2xl font-bold text-blurple-soft"
|
|
>
|
|
{name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="truncate text-xl font-bold">{name}</h2>
|
|
{profile && profile.genres.length > 0 ? (
|
|
<div className="mt-1.5 flex flex-wrap gap-1.5">
|
|
{profile.genres.map((genre) => (
|
|
<span
|
|
key={genre}
|
|
className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-zinc-300"
|
|
>
|
|
{genre}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="shrink-0 rounded-full border border-white/10 px-3 py-1 text-xs text-zinc-400 transition-colors hover:border-white/25 hover:text-white"
|
|
>
|
|
{dict.close}
|
|
</button>
|
|
</div>
|
|
|
|
{!profile && !failed ? (
|
|
<p className="mt-4 animate-pulse text-sm text-zinc-500">{dict.loading}</p>
|
|
) : null}
|
|
{failed && !profile ? (
|
|
<div className="mt-4 flex items-center gap-3 text-sm text-zinc-500">
|
|
<p>{dict.loadError}</p>
|
|
<button
|
|
type="button"
|
|
onClick={retry}
|
|
disabled={!canRetry}
|
|
className="shrink-0 cursor-pointer rounded-full border border-white/10 px-3 py-1 text-xs text-zinc-300 transition-colors hover:border-white/25 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
{dict.retry}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{isDeterministicMiss ? (
|
|
<div className="mt-4 flex items-center gap-3 rounded-xl border border-white/5 bg-white/[0.03] p-3 text-sm text-zinc-400">
|
|
<p className="flex-1">{dict.noGameData}</p>
|
|
</div>
|
|
) : partialFail ? (
|
|
<div className="mt-4 flex items-center gap-3 rounded-xl border border-white/5 bg-white/[0.03] p-3 text-sm text-zinc-400">
|
|
<p className="flex-1">{dict.partialFail}</p>
|
|
<button
|
|
type="button"
|
|
onClick={reset}
|
|
disabled={!canRetry}
|
|
className="shrink-0 cursor-pointer rounded-full border border-white/10 px-3 py-1 text-xs text-zinc-300 transition-colors hover:border-white/25 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
{dict.retry}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
|
|
{profile?.description ? (
|
|
<p className="mt-4 text-sm leading-relaxed text-zinc-300">
|
|
{profile.description}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{profile?.steamUrl ? (
|
|
<a
|
|
href={profile.steamUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full bg-blurple px-4 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
|
|
>
|
|
{dict.openOnSteam} ↗
|
|
</a>
|
|
) : null}
|
|
{profile?.steamId ? (
|
|
<a
|
|
href={steamdbAppUrl(profile.steamId)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full border border-white/15 px-4 py-1.5 text-xs text-zinc-300 transition-colors hover:border-blurple hover:text-white"
|
|
>
|
|
{dict.openOnSteamDb} ↗
|
|
</a>
|
|
) : null}
|
|
{profile?.igdbUrl ? (
|
|
<a
|
|
href={profile.igdbUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full border border-white/15 px-4 py-1.5 text-xs text-zinc-300 transition-colors hover:border-blurple hover:text-white"
|
|
>
|
|
{dict.openOnIgdb} ↗
|
|
</a>
|
|
) : null}
|
|
<a
|
|
href={gameUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full border border-white/15 px-4 py-1.5 text-xs text-zinc-300 transition-colors hover:border-blurple hover:text-white"
|
|
>
|
|
{dict.openOnDiscord} ↗
|
|
</a>
|
|
{profile?.itad?.pageUrl ? (
|
|
<a
|
|
href={profile.itad.pageUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full border border-white/15 px-4 py-1.5 text-xs text-zinc-300 transition-colors hover:border-blurple hover:text-white"
|
|
>
|
|
{dict.allPrices} ↗
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
{profile && hasDetails ? (
|
|
<dl className="mt-5 grid gap-x-6 gap-y-2 rounded-2xl border border-white/5 bg-white/[0.03] p-4 text-sm md:grid-cols-2">
|
|
{profile.developers.length > 0 ? (
|
|
<div className="flex flex-col gap-0.5 sm:flex-row sm:gap-3">
|
|
<dt className="shrink-0 text-zinc-500 sm:w-36">
|
|
{dict.developers}
|
|
</dt>
|
|
<dd className="text-zinc-200">
|
|
{profile.developers.join(", ")}
|
|
</dd>
|
|
</div>
|
|
) : null}
|
|
{profile.publishers.length > 0 ? (
|
|
<div className="flex flex-col gap-0.5 sm:flex-row sm:gap-3">
|
|
<dt className="shrink-0 text-zinc-500 sm:w-36">
|
|
{dict.publishers}
|
|
</dt>
|
|
<dd className="text-zinc-200">
|
|
{profile.publishers.join(", ")}
|
|
</dd>
|
|
</div>
|
|
) : null}
|
|
{profile.releaseDate ? (
|
|
<div className="flex flex-col gap-0.5 sm:flex-row sm:gap-3">
|
|
<dt className="shrink-0 text-zinc-500 sm:w-36">
|
|
{dict.releaseDate}
|
|
</dt>
|
|
<dd className="text-zinc-200">
|
|
{formatReleaseDate(profile.releaseDate, localeTag)}
|
|
</dd>
|
|
</div>
|
|
) : null}
|
|
{profile.platforms.length > 0 ? (
|
|
<div className="flex flex-col gap-0.5 sm:flex-row sm:gap-3">
|
|
<dt className="shrink-0 text-zinc-500 sm:w-36">
|
|
{dict.platforms}
|
|
</dt>
|
|
<dd className="text-zinc-200">
|
|
{profile.platforms.join(" · ")}
|
|
</dd>
|
|
</div>
|
|
) : null}
|
|
{profile.links.length > 0 ? (
|
|
<div className="flex flex-col gap-0.5 sm:flex-row sm:gap-3 md:col-span-2">
|
|
<dt className="shrink-0 text-zinc-500 sm:w-36">{dict.links}</dt>
|
|
<dd className="flex flex-wrap gap-x-3 gap-y-1">
|
|
{profile.links.slice(0, 8).map((link) => (
|
|
<a
|
|
key={link.url}
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blurple-soft transition-colors hover:text-white"
|
|
>
|
|
{link.label} ↗
|
|
</a>
|
|
))}
|
|
</dd>
|
|
</div>
|
|
) : null}
|
|
</dl>
|
|
) : null}
|
|
|
|
{profile ? (
|
|
<ModalReviews profile={profile} dict={dict} localeTag={localeTag} />
|
|
) : null}
|
|
|
|
{profile?.itad && (bestPrice || historyLow) ? (
|
|
<ModalPrices
|
|
dict={dict}
|
|
localeTag={localeTag}
|
|
bestPrice={bestPrice}
|
|
historyLow={historyLow}
|
|
isFree={isFree}
|
|
/>
|
|
) : null}
|
|
|
|
{profile && profile.screenshots.length > 0 ? (
|
|
<ModalScreenshots
|
|
profile={profile}
|
|
dict={dict}
|
|
hero={hero}
|
|
onPick={setBannerPick}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|