628 lines
24 KiB
TypeScript
628 lines
24 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ChevronLeftIcon, DownloadIcon } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Kbd } from "@/components/ui/kbd";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { SiteHeader } from "@/components/public/site-header";
|
|
import { ElementIcon } from "@/components/public/element-icon";
|
|
import { LiveRefresh } from "@/components/live-refresh";
|
|
import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
|
|
import type { PublicGuide } from "@/lib/guides/queries";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function hasSection(guide: PublicGuide, slug: string): boolean {
|
|
if (slug === "weapon") return guide.weapons.length > 0;
|
|
if (slug === "artifact")
|
|
return (
|
|
guide.artifactGroups.some((group) => group.rows.length > 0) ||
|
|
Boolean(
|
|
guide.artifactProfile &&
|
|
(guide.artifactProfile.sands.length ||
|
|
guide.artifactProfile.goblet.length ||
|
|
guide.artifactProfile.circlet.length),
|
|
)
|
|
);
|
|
if (slug === "constellations") return guide.constellations.length > 0;
|
|
if (slug === "team") return guide.teams.length > 0;
|
|
return guide.extras.some(
|
|
(extra) => extra.slug === slug && extra.rows.length > 0,
|
|
);
|
|
}
|
|
|
|
export function publicSections(guide: PublicGuide) {
|
|
return guide.sections.filter((section) => hasSection(guide, section.slug));
|
|
}
|
|
|
|
export function StructuredGuideShell({
|
|
guide,
|
|
section,
|
|
}: {
|
|
guide: PublicGuide;
|
|
section?: string;
|
|
}) {
|
|
const sections = publicSections(guide);
|
|
return (
|
|
<div className="min-h-svh bg-background">
|
|
<LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
|
|
<SiteHeader />
|
|
<div className="sticky top-0 z-10 border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
|
|
<div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6">
|
|
<Link
|
|
href="/"
|
|
aria-label="กลับหน้ารวม"
|
|
className="grid size-10 place-items-center rounded-lg hover:bg-muted"
|
|
>
|
|
<ChevronLeftIcon />
|
|
</Link>
|
|
<div className="relative size-11 overflow-hidden rounded-lg border">
|
|
<Image
|
|
src={guide.character.imageUrl}
|
|
alt={guide.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-heading font-semibold">{guide.name}</p>
|
|
</div>
|
|
{guide.character.element ? (
|
|
<Badge>
|
|
{guide.character.elementIconUrl ? (
|
|
<ElementIcon element={guide.character.element} url={guide.character.elementIconUrl} />
|
|
) : null}
|
|
{guide.character.element}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<nav className="mx-auto flex min-h-11 w-full max-w-7xl gap-1 overflow-x-auto px-4 sm:px-6">
|
|
<Link
|
|
href={`/${guide.slug}`}
|
|
className={cn(
|
|
"flex items-center rounded-md px-3 text-sm text-muted-foreground",
|
|
!section && "bg-muted text-foreground",
|
|
)}
|
|
>
|
|
Overview
|
|
</Link>
|
|
{sections.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/${guide.slug}/${item.slug}`}
|
|
className={cn(
|
|
"flex items-center rounded-md px-3 text-sm text-muted-foreground",
|
|
section === item.slug && "bg-muted text-foreground",
|
|
)}
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
<main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
|
|
{section ? (
|
|
<GuideSection guide={guide} section={section} />
|
|
) : (
|
|
<GuideOverview guide={guide} sections={sections} />
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideOverview({
|
|
guide,
|
|
sections,
|
|
}: {
|
|
guide: PublicGuide;
|
|
sections: ReturnType<typeof publicSections>;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="relative mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-xl border bg-muted">
|
|
<Image
|
|
src={guide.coverUrl}
|
|
alt={`Guide ${guide.name}`}
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
|
|
<p className="text-sm font-medium text-primary">Build Overview</p>
|
|
<h1 className="font-heading text-4xl font-semibold">{guide.name}</h1>
|
|
<p className="text-lg leading-8 text-muted-foreground">
|
|
{guide.overview}
|
|
</p>
|
|
</div>
|
|
{sections.length ? (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{sections.map((item) => (
|
|
<Link key={item.id} href={`/${guide.slug}/${item.slug}`}>
|
|
<Card className="h-full">
|
|
<CardHeader>
|
|
<CardTitle>{item.title}</CardTitle>
|
|
<CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
|
|
<CardDescription>
|
|
กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideSection({
|
|
guide,
|
|
section,
|
|
}: {
|
|
guide: PublicGuide;
|
|
section: string;
|
|
}) {
|
|
if (section === "weapon") return <WeaponSection guide={guide} />;
|
|
if (section === "artifact") return <ArtifactSection guide={guide} />;
|
|
if (section === "constellations")
|
|
return <ConstellationSection guide={guide} />;
|
|
if (section === "team") return <TeamSection guide={guide} />;
|
|
const extra = guide.extras.find((item) => item.slug === section);
|
|
return extra ? <ExtraSection extra={extra} /> : null;
|
|
}
|
|
|
|
function metric(value: string | null) {
|
|
return value === null
|
|
? null
|
|
: `${Number(value).toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
function WeaponSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="flex flex-col items-center gap-3 text-center">
|
|
<p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
|
|
<h1 className="font-heading text-4xl font-semibold">Weapons</h1>
|
|
<a
|
|
href={`/api/guides/${guide.id}/weapons/image`}
|
|
download
|
|
className={buttonVariants({ variant: "outline", size: "sm" })}
|
|
>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
Export image
|
|
</a>
|
|
</header>
|
|
<div className="grid gap-3">
|
|
{guide.weapons.map((row, index) => (
|
|
<Card key={row.id} size="sm" className="bg-white py-0">
|
|
<CardContent className="grid p-0 md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]">
|
|
<div
|
|
className={cn(
|
|
"flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white md:rounded-br-[8rem] md:pr-16",
|
|
rarityGradientClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
<div className="relative size-20 shrink-0">
|
|
<Image
|
|
src={row.weapon.imageUrl}
|
|
alt={row.weapon.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<p className="truncate text-base font-semibold sm:text-lg">
|
|
{index + 1}. {row.weapon.name} R{row.refinement}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-around gap-4 bg-white px-4 py-5 text-black">
|
|
{row.overallPercent ? (
|
|
<div className="flex-1 text-center">
|
|
<p
|
|
className={cn(
|
|
"whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
|
|
rarityTextClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
{metric(row.overallPercent)}
|
|
</p>
|
|
<p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
|
|
</div>
|
|
) : null}
|
|
{row.personalPercent ? (
|
|
<div className="flex-1 text-center">
|
|
<p
|
|
className={cn(
|
|
"whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
|
|
rarityTextClass(row.weapon.rarity),
|
|
)}
|
|
>
|
|
{metric(row.personalPercent)}
|
|
</p>
|
|
<p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
|
const profile = guide.artifactProfile;
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">
|
|
อาร์ติแฟกต์และสเตตัสที่แนะนำ
|
|
</p>
|
|
<h1 className="font-heading text-4xl font-semibold">
|
|
Artifacts & Stats
|
|
</h1>
|
|
</header>
|
|
<div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
|
|
{" "}
|
|
<div className="flex flex-col gap-5">
|
|
{guide.artifactGroups.map((group) => (
|
|
<Card key={group.id}>
|
|
<CardHeader>
|
|
<CardTitle>{group.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-3">
|
|
{group.rows.map((row, index) => (
|
|
<div key={row.id} className="flex items-center gap-3">
|
|
<div className="flex -space-x-3">
|
|
<div
|
|
className={cn(
|
|
"relative size-14 overflow-hidden rounded-lg border",
|
|
rarityGradientClass(row.first.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={row.first.imageUrl}
|
|
alt={row.first.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
{row.second ? (
|
|
<div
|
|
className={cn(
|
|
"relative size-14 overflow-hidden rounded-lg border",
|
|
rarityGradientClass(row.second.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={row.second.imageUrl}
|
|
alt={row.second.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-medium">
|
|
{index + 1}. {row.first.name}
|
|
{row.second ? ` + ${row.second.name}` : ""}
|
|
</p>
|
|
</div>
|
|
<p className="text-2xl font-semibold">
|
|
{metric(row.percent)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
{profile ? (
|
|
<div className="flex flex-col gap-5">
|
|
<Card className="overflow-hidden pt-0">
|
|
<CardHeader className="bg-primary py-4 text-center text-primary-foreground">
|
|
<CardTitle className="text-2xl">Artifact Stats</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-3 p-0">
|
|
<ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
|
|
<ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
|
|
<ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
|
|
</CardContent>
|
|
</Card>
|
|
{profile.substats.length ? (
|
|
<Card>
|
|
<CardContent className="py-6 text-center text-lg">
|
|
<strong>Stat Priority:</strong> {profile.substats.map(statLabel).join(" > ")}
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
<Card>
|
|
<CardHeader><CardTitle>รายละเอียดเพิ่มเติม</CardTitle></CardHeader>
|
|
<CardContent className="flex flex-col gap-5">
|
|
{profile.targets.length ? (
|
|
<div>
|
|
<p className="mb-2 text-sm font-medium">Target Stats</p>
|
|
{profile.targets.map((target) => (
|
|
<div
|
|
key={`${target.stat}-${target.value}`}
|
|
className="flex justify-between py-1 text-sm"
|
|
>
|
|
<span>{target.stat}</span>
|
|
<strong>{target.value}</strong>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{profile.talents.length ? (
|
|
<div>
|
|
<p className="mb-2 text-sm font-medium">ลำดับการอัพพรสวรรค์</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
{[...profile.talents]
|
|
.sort((a, b) => a.priority - b.priority)
|
|
.map((talent) => {
|
|
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
|
|
return catalogTalent?.iconUrl ? (
|
|
<div key={talent.type} className="relative size-14 overflow-hidden rounded-lg border bg-muted">
|
|
<Image src={catalogTalent.iconUrl} alt="" fill className="object-contain" />
|
|
<Kbd className="absolute top-0 right-0">{talent.priority}</Kbd>
|
|
</div>
|
|
) : <Badge key={talent.type} variant="secondary">{talent.priority}. {talent.type}</Badge>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{profile.note ? (
|
|
<div className="pt-3">
|
|
<p className="mb-2 text-sm font-medium">โน็ต</p>
|
|
<p className="text-sm leading-6 text-muted-foreground">
|
|
{profile.note}
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function statLabel(value: string): string {
|
|
return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
|
|
}
|
|
|
|
function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
|
|
return (
|
|
<div className="flex min-w-0 flex-col items-center gap-3 border-r p-3 text-center last:border-r-0 sm:p-5">
|
|
<Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
|
|
<p className="font-semibold">{label}</p>
|
|
<Separator />
|
|
<p className="text-sm leading-6 sm:text-base">{values.length ? values.map(statLabel).join(" > ") : "—"}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">กลุ่มดาว</p>
|
|
<h1 className="font-heading text-4xl font-semibold">Constellations</h1>
|
|
</header>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{guide.constellations.map((row) => (
|
|
<Card key={row.level}>
|
|
<CardHeader>
|
|
<CardTitle className="text-3xl text-white">
|
|
{metric(row.cumulativePercent)}
|
|
</CardTitle>
|
|
<CardDescription className="text-base font-medium text-white">
|
|
C{row.level} · {row.name}
|
|
</CardDescription>
|
|
{row.iconUrl ? (
|
|
<CardAction>
|
|
<Image
|
|
src={row.iconUrl}
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
className="rounded-lg bg-muted"
|
|
/>
|
|
</CardAction>
|
|
) : null}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-line leading-7">{row.detail}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function TeamSection({ guide }: { guide: PublicGuide }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">คำนวณความเสียหาย</p>
|
|
<h1 className="font-heading text-4xl font-semibold">Team Calc</h1>
|
|
</header>
|
|
<div className="grid gap-5 xl:grid-cols-2">
|
|
{guide.teams.map((team) => {
|
|
const total = team.members.reduce(
|
|
(sum, member) => sum + Number(member.damage),
|
|
0,
|
|
);
|
|
const seconds = Number(team.rotationSeconds);
|
|
return (
|
|
<Card key={team.id}>
|
|
<CardHeader>
|
|
<CardTitle>{team.title}</CardTitle>
|
|
<CardDescription>{seconds}s rotation</CardDescription>
|
|
<CardAction>
|
|
<a
|
|
href={`/api/teams/${team.id}/image`}
|
|
download
|
|
className={buttonVariants({
|
|
variant: "outline",
|
|
size: "sm",
|
|
})}
|
|
>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
Export image
|
|
</a>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
{team.members.map((member) => (
|
|
<div key={member.position} className="min-w-0 text-center">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_2.75rem] gap-2">
|
|
<div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
|
|
<Image
|
|
src={member.character.imageUrl}
|
|
alt={member.character.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{member.weapon ? (
|
|
<div
|
|
className={cn(
|
|
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
|
rarityGradientClass(member.weapon.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={member.weapon.imageUrl}
|
|
alt={member.weapon.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
<Kbd className="absolute top-0 right-0">
|
|
R{member.refinement}
|
|
</Kbd>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-square rounded-md border bg-muted" />
|
|
)}
|
|
{member.artifact ? (
|
|
<div
|
|
className={cn(
|
|
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
|
rarityGradientClass(member.artifact.rarity),
|
|
)}
|
|
>
|
|
<Image
|
|
src={member.artifact.imageUrl}
|
|
alt={member.artifact.name}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-square rounded-md border bg-muted" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 truncate text-sm font-medium">
|
|
C{member.constellation} {member.character.name}
|
|
</p>
|
|
<p className="text-sm font-semibold">
|
|
{Number(member.damage).toLocaleString(undefined, {
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{total
|
|
? ((Number(member.damage) / total) * 100).toFixed(2)
|
|
: "0.00"}
|
|
%
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Separator />
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Total damage
|
|
</p>
|
|
<p className="font-semibold">{total.toLocaleString()}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm text-muted-foreground">Total DPS</p>
|
|
<p className="text-3xl font-semibold text-primary">
|
|
{seconds > 0
|
|
? (total / seconds).toLocaleString(undefined, {
|
|
maximumFractionDigits: 0,
|
|
})
|
|
: "0"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="rounded-lg bg-muted p-3 text-sm leading-6">
|
|
{team.combo}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
|
|
return (
|
|
<section className="flex flex-col gap-6">
|
|
<header className="text-center">
|
|
<p className="text-sm font-medium text-primary">Extra Guide</p>
|
|
<h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
|
|
</header>
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
{extra.rows.map((row) => (
|
|
<Card key={row.id} className="overflow-hidden py-0">
|
|
{row.imageUrl ? (
|
|
<div className="relative aspect-video bg-muted">
|
|
<Image
|
|
src={row.imageUrl}
|
|
alt={row.heading}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<CardHeader className="pt-5">
|
|
<CardTitle>{row.heading}</CardTitle>
|
|
<CardDescription>{row.body}</CardDescription>
|
|
{row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|