astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(image-export) : capture guide sections in browser
CI / Verify (push) Successful in 58s
Details
CI / Build immutable images and deploy (push) Successful in 2m54s
Details

Browse Source
This commit is contained in:
gunshiz
2026-09-02 22:28:28 +07:00 Unverified
parent ded10ebb36
commit dd672e5331
6 changed files with 272 additions and 1266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/guide-image-export.tsx
+101
View File
@@ -0,0 +1,101 @@
"use client";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { DownloadIcon } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
const EXPORT_WIDTH = 1200;
function downloadFileName(value: string): string {
return value.replace(/[\\/:*?"<>|]/gu, "-");
}
export function GuideImageExport({
children,
fileName,
}: {
children: ReactNode;
fileName: string;
}) {
const captureRef = useRef<HTMLDivElement>(null);
const [capturing, setCapturing] = useState(false);
useEffect(() => {
if (!capturing) return;
let cancelled = false;
async function capture() {
try {
const node = captureRef.current;
if (!node) throw new Error("Capture target is unavailable");
const { domToBlob, waitUntilLoad } = await import("modern-screenshot");
await Promise.all([document.fonts.ready, waitUntilLoad(node)]);
const blob = await domToBlob(node, {
backgroundColor: getComputedStyle(node).backgroundColor,
scale: 1,
width: EXPORT_WIDTH,
});
if (cancelled) return;
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = downloadFileName(fileName);
link.href = url;
document.body.append(link);
link.click();
link.remove();
window.setTimeout(() => URL.revokeObjectURL(url), 0);
} catch {
if (!cancelled) toast.error("ส่งออกภาพไม่สำเร็จ กรุณาลองอีกครั้ง");
} finally {
if (!cancelled) setCapturing(false);
}
}
void capture();
return () => {
cancelled = true;
};
}, [capturing, fileName]);
return (
<>
<Button
type="button"
variant="outline"
size="sm"
disabled={capturing}
onClick={() => setCapturing(true)}
>
{capturing ? (
<Spinner data-icon="inline-start" />
) : (
<DownloadIcon data-icon="inline-start" />
)}
{capturing ? "กำลังส่งออก…" : "ส่งออกภาพ"}
</Button>
{capturing
? createPortal(
<div
aria-hidden="true"
className="pointer-events-none fixed top-0 -left-[10000px]"
>
<div
ref={captureRef}
className="w-[1200px] bg-background p-10 text-foreground"
>
{children}
</div>
</div>,
document.body,
)
: null}
</>
);
}
components/public/structured-guide.tsx
+171 -38
View File
@@ -1,9 +1,8 @@
import Image from "next/image";
import Link from "next/link";
import { ArrowUpRightIcon, ChevronLeftIcon, DownloadIcon } from "lucide-react";
import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import {
Card,
CardAction,
@@ -16,6 +15,7 @@ import { Separator } from "@/components/ui/separator";
import { SiteHeader } from "@/components/public/site-header";
import { ScrollableNav } from "@/components/public/scrollable-nav";
import { TeamSearch } from "@/components/public/team-search";
import { GuideImageExport } from "@/components/public/guide-image-export";
import { LiveRefresh } from "@/components/live-refresh";
import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
import type { PublicGuide } from "@/lib/guides/queries";
@@ -262,6 +262,27 @@ function metric(value: string | null) {
}
function WeaponSection({ guide }: { guide: PublicGuide }) {
return (
<WeaponSectionContent
guide={guide}
action={
<GuideImageExport fileName={`${guide.name}-Weapon.png`}>
<WeaponSectionContent guide={guide} exporting />
</GuideImageExport>
}
/>
);
}
function WeaponSectionContent({
guide,
action,
exporting = false,
}: {
guide: PublicGuide;
action?: React.ReactNode;
exporting?: boolean;
}) {
const note = guide.sections.find(
(section) => section.slug === "weapon",
)?.note;
@@ -277,22 +298,25 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
{note}
</p>
) : null}
<a
href={`/api/guides/${guide.id}/weapons/image`}
download
className={buttonVariants({ variant: "outline", size: "sm" })}
>
<DownloadIcon data-icon="inline-start" />
ส่งออกภาพ
</a>
{action}
</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)]">
<CardContent
className={cn(
"grid p-0",
exporting
? "grid-cols-[minmax(0,3fr)_minmax(0,1fr)]"
: "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",
"flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white",
exporting
? "rounded-br-[8rem] pr-16"
: "md:rounded-br-[8rem] md:pr-16",
rarityGradientClass(row.weapon.rarity),
)}
>
@@ -301,12 +325,18 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
src={row.weapon.imageUrl}
alt={row.weapon.name}
fill
loading={exporting ? "eager" : undefined}
sizes="(min-width: 768px) 5rem, 4rem"
className="object-contain"
/>
</div>
<div className="flex min-w-0 flex-col gap-1">
<p className="truncate text-base font-semibold sm:text-lg">
<p
className={cn(
"truncate font-semibold",
exporting ? "text-lg" : "text-base sm:text-lg",
)}
>
{index + 1}. {row.weapon.name} R{row.refinement}
</p>
{row.note ? (
@@ -319,7 +349,8 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
<div className="flex-1 text-center">
<p
className={cn(
"whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
"whitespace-nowrap leading-none font-bold",
exporting ? "text-5xl" : "text-4xl sm:text-5xl",
rarityTextClass(row.weapon.rarity),
)}
>
@@ -327,14 +358,22 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
? "-%"
: metric(row.overallPercent)}
</p>
<p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
<p
className={cn(
"mt-1",
exporting ? "text-base" : "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",
"whitespace-nowrap leading-none font-bold",
exporting ? "text-5xl" : "text-4xl sm:text-5xl",
rarityTextClass(row.weapon.rarity),
)}
>
@@ -342,7 +381,14 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
? "-%"
: metric(row.personalPercent)}
</p>
<p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
<p
className={cn(
"mt-1",
exporting ? "text-base" : "text-sm sm:text-base",
)}
>
ดาเมจส่วนตัว
</p>
</div>
) : null}
</div>
@@ -355,6 +401,27 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
}
function ArtifactSection({ guide }: { guide: PublicGuide }) {
return (
<ArtifactSectionContent
guide={guide}
action={
<GuideImageExport fileName={`${guide.name}-Artifact.png`}>
<ArtifactSectionContent guide={guide} exporting />
</GuideImageExport>
}
/>
);
}
function ArtifactSectionContent({
guide,
action,
exporting = false,
}: {
guide: PublicGuide;
action?: React.ReactNode;
exporting?: boolean;
}) {
const profile = guide.artifactProfile;
return (
<section className="flex flex-col gap-6">
@@ -365,16 +432,14 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
<h1 className="font-heading text-4xl font-semibold">
Artifact & Stats
</h1>
<a
href={`/api/guides/${guide.id}/artifacts/image`}
download
className={buttonVariants({ variant: "outline", size: "sm" })}
>
<DownloadIcon data-icon="inline-start" />
ส่งออกภาพ
</a>
{action}
</header>
<div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
<div
className={cn(
"grid gap-5",
exporting ? "grid-cols-[1.2fr_1fr]" : "lg:grid-cols-[1.2fr_1fr]",
)}
>
{" "}
<div className="flex flex-col gap-5">
{profile ? (
@@ -387,16 +452,19 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
iconSrc="/icon/Icon_Sands_of_Eon.webp"
label="นาฬิกา"
values={profile.sands}
exporting={exporting}
/>
<ArtifactStat
iconSrc="/icon/Icon_Goblet_of_Eonothem.webp"
label="ถ้วย"
values={profile.goblet}
exporting={exporting}
/>
<ArtifactStat
iconSrc="/icon/Icon_Circlet_of_Logos.webp"
label="หัว"
values={profile.circlet}
exporting={exporting}
/>
</CardContent>
</Card>
@@ -411,6 +479,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
key={`${stat}-${index}`}
value={stat}
index={index}
exporting={exporting}
/>
))}
</div>
@@ -441,7 +510,8 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
<div className="flex -space-x-3">
<div
className={cn(
"relative size-14 overflow-hidden rounded-lg border sm:size-16",
"relative overflow-hidden rounded-lg border",
exporting ? "size-16" : "size-14 sm:size-16",
rarityGradientClass(row.first.rarity),
)}
>
@@ -449,6 +519,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
src={row.first.imageUrl}
alt={row.first.name}
fill
loading={exporting ? "eager" : undefined}
sizes="(min-width: 640px) 4rem, 3.5rem"
className="object-contain"
/>
@@ -456,7 +527,8 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
{row.second ? (
<div
className={cn(
"relative size-14 overflow-hidden rounded-lg border sm:size-16",
"relative overflow-hidden rounded-lg border",
exporting ? "size-16" : "size-14 sm:size-16",
rarityGradientClass(row.second.rarity),
)}
>
@@ -464,6 +536,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
src={row.second.imageUrl}
alt={row.second.name}
fill
loading={exporting ? "eager" : undefined}
sizes="(min-width: 640px) 4rem, 3.5rem"
className="object-contain"
/>
@@ -517,6 +590,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
alt=""
width={14}
height={14}
loading={exporting ? "eager" : undefined}
className="size-3.5 shrink-0 object-contain brightness-0 invert"
/>
) : null}
@@ -537,7 +611,12 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
<p className="mb-2 text-sm font-medium">
ลำดับการอัพพรสวรรค์
</p>
<div className="flex items-start justify-center gap-1 sm:gap-3">
<div
className={cn(
"flex items-start justify-center",
exporting ? "gap-3" : "gap-1 sm:gap-3",
)}
>
{normalizeTalentPriorities(profile.talents).map(
(talent, index, talents) => {
const catalogTalent = guide.character.talents.find(
@@ -547,15 +626,29 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
return (
<div
key={talent.type}
className="flex min-w-0 items-start gap-1 sm:gap-3"
className={cn(
"flex min-w-0 items-start",
exporting ? "gap-3" : "gap-1 sm:gap-3",
)}
>
<div className="flex w-16 flex-col items-center gap-2 text-center sm:w-28">
<div className="relative size-14 overflow-hidden rounded-xl border bg-muted sm:size-20">
<div
className={cn(
"flex flex-col items-center gap-2 text-center",
exporting ? "w-28" : "w-16 sm:w-28",
)}
>
<div
className={cn(
"relative overflow-hidden rounded-xl border bg-muted",
exporting ? "size-20" : "size-14 sm:size-20",
)}
>
{catalogTalent?.iconUrl ? (
<Image
src={catalogTalent.iconUrl}
alt={talentName}
fill
loading={exporting ? "eager" : undefined}
className="object-contain"
/>
) : (
@@ -569,16 +662,31 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
? `เลเวล ${talent.level}+`
: "-"}
</Badge>
<p className="text-xs font-medium sm:text-sm">
<p
className={cn(
"font-medium",
exporting ? "text-sm" : "text-xs sm:text-sm",
)}
>
{talentName}
</p>
<p className="text-[11px] text-muted-foreground sm:text-xs">
<p
className={cn(
"text-muted-foreground",
exporting ? "text-xs" : "text-[11px] sm:text-xs",
)}
>
{talentTypeLabel(talent.type)}
</p>
</div>
{index < talents.length - 1 ? (
<span
className="mt-4 text-xl font-semibold sm:mt-6 sm:text-3xl"
className={cn(
"font-semibold",
exporting
? "mt-6 text-3xl"
: "mt-4 text-xl sm:mt-6 sm:text-3xl",
)}
aria-label={
talent.relationToNext === "gte"
? "มากกว่าหรือเท่ากับ"
@@ -644,29 +752,45 @@ function ArtifactStat({
iconSrc,
label,
values,
exporting = false,
}: {
iconSrc: string;
label: string;
values: string[];
exporting?: boolean;
}) {
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">
<div
className={cn(
"flex min-w-0 flex-col items-center gap-3 border-r text-center last:border-r-0",
exporting ? "p-5" : "p-3 sm:p-5",
)}
>
<Image
src={iconSrc}
alt=""
width={48}
height={48}
loading={exporting ? "eager" : undefined}
className="size-12 object-contain"
/>
<p className="font-semibold">{label}</p>
<Separator />
<div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
<div
className={cn(
"flex max-w-full flex-col items-center gap-1",
exporting
? "text-sm leading-6"
: "text-xs leading-5 sm:text-sm sm:leading-6",
)}
>
{values.length ? (
values.map((value, index) => (
<ArtifactStatValue
key={`${value}-${index}`}
value={value}
index={index}
exporting={exporting}
/>
))
) : (
@@ -677,7 +801,15 @@ function ArtifactStat({
);
}
function ArtifactStatValue({ value, index }: { value: string; index: number }) {
function ArtifactStatValue({
value,
index,
exporting = false,
}: {
value: string;
index: number;
exporting?: boolean;
}) {
const iconName = recommendedStatIconName(value);
const hasIcon =
iconName &&
@@ -695,6 +827,7 @@ function ArtifactStatValue({ value, index }: { value: string; index: number }) {
alt=""
width={20}
height={20}
loading={exporting ? "eager" : undefined}
className="size-5 shrink-0 object-contain brightness-0 invert"
/>
) : null}