779 lines
27 KiB
TypeScript
779 lines
27 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { readFile } from "node:fs/promises";
|
|
import { join } from "node:path";
|
|
|
|
import { ImageResponse } from "next/og";
|
|
import sharp from "sharp";
|
|
|
|
import { rarityGradient } from "@/lib/catalog/rarity";
|
|
import { artifactTierCount } from "@/lib/guides/artifacts";
|
|
import { getCachedPublicArtifactExport } from "@/lib/cache/public";
|
|
import { imageContentDisposition } from "@/lib/guides/export-image";
|
|
import {
|
|
normalizeTargetStat,
|
|
recommendedStatIconName,
|
|
statPriorityColor,
|
|
targetStatIconName,
|
|
targetStatOptions,
|
|
} from "@/lib/guides/stats";
|
|
import {
|
|
normalizeTalentPriorities,
|
|
talentRelationSymbol,
|
|
talentTypeLabel,
|
|
} from "@/lib/guides/talents";
|
|
|
|
const anuphanFonts = Promise.all(
|
|
[
|
|
{ subset: "latin", weight: 400 as const },
|
|
{ subset: "thai", weight: 400 as const },
|
|
{ subset: "latin", weight: 700 as const },
|
|
{ subset: "thai", weight: 700 as const },
|
|
].map(async ({ subset, weight }) => {
|
|
const response = await fetch(
|
|
`https://unpkg.com/@fontsource/[email protected]/files/anuphan-${subset}-${weight}-normal.woff`,
|
|
);
|
|
if (!response.ok)
|
|
throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
|
|
return {
|
|
name: "Anuphan",
|
|
data: await response.arrayBuffer(),
|
|
weight,
|
|
style: "normal" as const,
|
|
};
|
|
}),
|
|
).catch(() => []);
|
|
|
|
const relationFont = readFile(
|
|
join(process.cwd(), "public", "Kanit-SemiBold.ttf"),
|
|
);
|
|
|
|
function metric(value: string): string {
|
|
return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
function statLabel(value: string): string {
|
|
const labels: Record<string, string> = {
|
|
HP: "พลังชีวิต",
|
|
ATK: "พลังโจมตี",
|
|
DEF: "พลังป้องกัน",
|
|
EM: "ความชำนาญธาตุ",
|
|
ER: "ฟื้นฟูพลังงาน",
|
|
"CRIT RATE": "อัตราคริ",
|
|
"CRIT DAMAGE": "ความแรงคริ",
|
|
"ATK%": "พลังโจมตี%",
|
|
"HP%": "พลังชีวิต%",
|
|
"DEF%": "พลังป้องกัน%",
|
|
"CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
|
|
"Pyro DMG%": "ความเสียหายธาตุไฟ%",
|
|
"Hydro DMG%": "ความเสียหายธาตุน้ำ%",
|
|
"Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
|
|
"Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
|
|
"Anemo DMG%": "ความเสียหายธาตุลม%",
|
|
"Geo DMG%": "ความเสียหายธาตุดิน%",
|
|
"Dendro DMG%": "ความเสียหายธาตุไม้%",
|
|
"Physical DMG%": "ความเสียหายกายภาพ%",
|
|
"Healing Bonus%": "โบนัสการรักษา%",
|
|
};
|
|
return labels[value] ?? value;
|
|
}
|
|
|
|
async function pngDataUrl(url: string): Promise<string | null> {
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) return null;
|
|
const png = await sharp(Buffer.from(await response.arrayBuffer()))
|
|
.resize(96, 96, { fit: "contain" })
|
|
.png()
|
|
.toBuffer();
|
|
return `data:image/png;base64,${png.toString("base64")}`;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function localPngDataUrl(
|
|
fileName: string,
|
|
size: number | null = 96,
|
|
white = false,
|
|
): Promise<string> {
|
|
let image = sharp(join(process.cwd(), "public", "icon", fileName));
|
|
if (white) image = image.negate({ alpha: false });
|
|
const png = await (
|
|
size === null ? image : image.resize(size, size, { fit: "contain" })
|
|
)
|
|
.png()
|
|
.toBuffer();
|
|
return `data:image/png;base64,${png.toString("base64")}`;
|
|
}
|
|
|
|
export async function GET(
|
|
_request: Request,
|
|
context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
|
|
) {
|
|
const { guideId } = await context.params;
|
|
const guide = await getCachedPublicArtifactExport(guideId);
|
|
if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
|
|
const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
|
|
|
|
const [fontAssets, groupAssets, statIconAssets, talentAssets, targetStatAssets] =
|
|
await Promise.all([
|
|
Promise.all([anuphanFonts, relationFont]),
|
|
Promise.all(
|
|
guide.groups.map((group) =>
|
|
Promise.all(
|
|
group.rows.map(async (row) => ({
|
|
first: await pngDataUrl(row.first.imageUrl),
|
|
second: row.second ? await pngDataUrl(row.second.imageUrl) : null,
|
|
})),
|
|
),
|
|
),
|
|
),
|
|
Promise.all([
|
|
localPngDataUrl("Icon_Sands_of_Eon.webp"),
|
|
localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
|
|
localPngDataUrl("Icon_Circlet_of_Logos.webp"),
|
|
]),
|
|
Promise.all(
|
|
talents.map((talent) => {
|
|
const catalogTalent = guide.character.talents.find(
|
|
(item) => item.type === talent.type,
|
|
);
|
|
return catalogTalent?.iconUrl
|
|
? pngDataUrl(catalogTalent.iconUrl)
|
|
: null;
|
|
}),
|
|
),
|
|
Promise.all(
|
|
targetStatOptions.map((stat) =>
|
|
localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true),
|
|
),
|
|
),
|
|
]);
|
|
const [fonts, relationFontData] = fontAssets;
|
|
|
|
const profile = guide.profile;
|
|
const recommendedStatAsset = (value: string) => {
|
|
const iconName = recommendedStatIconName(value);
|
|
const iconIndex = targetStatOptions.findIndex(
|
|
(stat) => targetStatIconName(stat) === iconName,
|
|
);
|
|
return iconIndex >= 0 ? targetStatAssets[iconIndex] : null;
|
|
};
|
|
const groupRowHeights = guide.groups.map((group) =>
|
|
group.rows.map((row) =>
|
|
Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0)),
|
|
),
|
|
);
|
|
const tierListHeight =
|
|
guide.groups.reduce(
|
|
(sum, _group, groupIndex) =>
|
|
sum +
|
|
68 +
|
|
groupRowHeights[groupIndex].reduce(
|
|
(groupSum, rowHeight) => groupSum + rowHeight,
|
|
0,
|
|
),
|
|
0,
|
|
) +
|
|
Math.max(0, guide.groups.length - 1) * 16;
|
|
const detailHeight = profile
|
|
? 60 +
|
|
profile.targets.length * 40 +
|
|
(profile.talents.length ? 82 : 0) +
|
|
(profile.note
|
|
? Math.max(48, Math.ceil(profile.note.length / 58) * 24)
|
|
: 0)
|
|
: 0;
|
|
const mainStatExtraHeight = profile
|
|
? Math.max(
|
|
0,
|
|
Math.max(
|
|
profile.sands.length,
|
|
profile.goblet.length,
|
|
profile.circlet.length,
|
|
) - 2,
|
|
) * 24
|
|
: 0;
|
|
const profileHeight = profile
|
|
? 242 +
|
|
mainStatExtraHeight +
|
|
(profile.substats.length ? 92 + profile.substats.length * 18 : 0)
|
|
: 0;
|
|
const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0);
|
|
const rightHeight = detailHeight > 60 ? detailHeight : 0;
|
|
const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
|
|
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 20,
|
|
color: "#f7f7f7",
|
|
background: "#05060a",
|
|
padding: "32px 36px",
|
|
fontFamily: "Anuphan",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
zIndex: 1,
|
|
display: "flex",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
gap: 20,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#f0b72f",
|
|
fontSize: 16,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
อาร์ติแฟกต์และสแตทที่แนะนำ
|
|
</div>
|
|
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
|
|
Artifact & Stats
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: detailHeight > 60 ? 1.2 : 1,
|
|
flexDirection: "column",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
{guide.groups.map((group, groupIndex) => (
|
|
<div
|
|
key={group.id}
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
overflow: "hidden",
|
|
border: "1px solid #34343d",
|
|
borderRadius: 14,
|
|
background: "#1d1d25",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
padding: "16px 20px",
|
|
fontSize: 22,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{group.name === "Late Game" ? "เลทเกม" : group.name}
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
padding: "0 20px 14px",
|
|
}}
|
|
>
|
|
{group.rows.map((row, rowIndex) => (
|
|
<div
|
|
key={row.id}
|
|
style={{
|
|
display: "flex",
|
|
minHeight: groupRowHeights[groupIndex][rowIndex],
|
|
alignItems: "center",
|
|
gap: 14,
|
|
borderRadius: 6,
|
|
background: rowIndex % 2 === 0 ? "#34343d" : "#272730",
|
|
padding: "5px 8px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{ display: "flex", width: row.second ? 94 : 58 }}
|
|
>
|
|
{groupAssets[groupIndex][rowIndex].first ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: 58,
|
|
height: 58,
|
|
overflow: "hidden",
|
|
border: "1px solid #ffffff2a",
|
|
borderRadius: 10,
|
|
background: rarityGradient(row.first.rarity),
|
|
}}
|
|
>
|
|
<img
|
|
src={groupAssets[groupIndex][rowIndex].first!}
|
|
alt=""
|
|
width={58}
|
|
height={58}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{row.second &&
|
|
groupAssets[groupIndex][rowIndex].second ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: 58,
|
|
height: 58,
|
|
overflow: "hidden",
|
|
marginLeft: -22,
|
|
border: "1px solid #ffffff2a",
|
|
borderRadius: 10,
|
|
background: rarityGradient(row.second.rarity),
|
|
}}
|
|
>
|
|
<img
|
|
src={groupAssets[groupIndex][rowIndex].second!}
|
|
alt=""
|
|
width={58}
|
|
height={58}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
gap: 5,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
fontSize: 18,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{artifactTierCount(row.second?.name ?? null)}{" "}
|
|
{row.first.name}
|
|
{row.second ? ` + ${row.second.name}` : ""}
|
|
</div>
|
|
{row.note ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#b9b9c2",
|
|
fontSize: 14,
|
|
lineHeight: 1.55,
|
|
}}
|
|
>
|
|
{row.note}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#f0b72f",
|
|
fontSize: 26,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{Number(row.percent) === 0 ? "-%" : metric(row.percent)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{profile ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
overflow: "hidden",
|
|
border: "1px solid #34343d",
|
|
borderRadius: 14,
|
|
background: "#1d1d25",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
background: "#ddb45a",
|
|
color: "#211a0d",
|
|
padding: "14px 20px",
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
ออฟหลักที่ดีที่สุด
|
|
</div>
|
|
<div style={{ display: "flex" }}>
|
|
{[
|
|
{
|
|
label: "นาฬิกา",
|
|
values: profile.sands,
|
|
icon: statIconAssets[0],
|
|
},
|
|
{
|
|
label: "ถ้วย",
|
|
values: profile.goblet,
|
|
icon: statIconAssets[1],
|
|
},
|
|
{
|
|
label: "หัว",
|
|
values: profile.circlet,
|
|
icon: statIconAssets[2],
|
|
},
|
|
].map((stat) => (
|
|
<div
|
|
key={stat.label}
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
minHeight: 176,
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
borderRight:
|
|
stat.label === "มงกุฎ" ? "none" : "1px solid #34343d",
|
|
padding: "16px 10px",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<img
|
|
src={stat.icon}
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
fontSize: 17,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{stat.label}
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: "100%",
|
|
borderTop: "1px solid #34343d",
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
fontSize: 14,
|
|
lineHeight: 1.45,
|
|
}}
|
|
>
|
|
{stat.values.length
|
|
? stat.values.map((value, index) => (
|
|
<span
|
|
key={`${value}-${index}`}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 5,
|
|
color: statPriorityColor(index),
|
|
whiteSpace: "normal",
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{recommendedStatAsset(value) ? (
|
|
<img
|
|
src={recommendedStatAsset(value)!}
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
) : null}
|
|
{statLabel(value)}
|
|
</span>
|
|
))
|
|
: "-"}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{profile?.substats.length ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
border: "1px solid #34343d",
|
|
borderRadius: 14,
|
|
background: "#1d1d25",
|
|
padding: "16px",
|
|
fontSize: 14,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<strong>ออฟรองที่ดีที่สุด</strong>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
}}
|
|
>
|
|
{profile.substats.map((stat, index) => (
|
|
<span
|
|
key={`${stat}-${index}`}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 5,
|
|
color: statPriorityColor(index),
|
|
}}
|
|
>
|
|
{recommendedStatAsset(stat) ? (
|
|
<img
|
|
src={recommendedStatAsset(stat)!}
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
) : null}
|
|
{statLabel(stat)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{profile && detailHeight > 60 ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 14,
|
|
border: "1px solid #34343d",
|
|
borderRadius: 14,
|
|
background: "#1d1d25",
|
|
padding: "18px 20px",
|
|
}}
|
|
>
|
|
{profile.targets.length ? (
|
|
<div
|
|
style={{ display: "flex", flexDirection: "column", gap: 7 }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#b9b9c2",
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
ค่าสถานะต่ำๆที่ควรจะปั้นไว้
|
|
</div>
|
|
{profile.targets.map((target, index) => {
|
|
const iconIndex = targetStatOptions.findIndex(
|
|
(stat) => stat === normalizeTargetStat(target.stat),
|
|
);
|
|
return (
|
|
<div
|
|
key={`${target.stat}-${target.value}`}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 12,
|
|
borderRadius: 6,
|
|
background: index % 2 === 0 ? "#34343d" : "#272730",
|
|
padding: "5px 8px",
|
|
fontSize: 15,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
}}
|
|
>
|
|
{iconIndex >= 0 ? (
|
|
<img
|
|
src={targetStatAssets[iconIndex]}
|
|
alt=""
|
|
width={14}
|
|
height={14}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
) : null}
|
|
{normalizeTargetStat(target.stat) ?? target.stat}
|
|
</span>
|
|
<strong>{target.value}</strong>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
{talents.length ? (
|
|
<div
|
|
style={{ display: "flex", flexDirection: "column", gap: 6 }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#b9b9c2",
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
ลำดับการอัพพรสวรรค์
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
fontSize: 17,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{talents.map((talent, index) => (
|
|
<div
|
|
key={talent.type}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
}}
|
|
>
|
|
{talentAssets[index] ? (
|
|
<img
|
|
src={talentAssets[index]!}
|
|
alt=""
|
|
width={42}
|
|
height={42}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
) : null}
|
|
<span
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<span>
|
|
{talent.type}
|
|
{talent.level ? ` เลเวล ${talent.level}+` : ""}
|
|
</span>
|
|
<span
|
|
style={{
|
|
color: "#b9b9c2",
|
|
fontSize: 13,
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
{talentTypeLabel(talent.type)}
|
|
</span>
|
|
</span>
|
|
{index < talents.length - 1 ? (
|
|
<span style={{ fontFamily: "Kanit" }}>
|
|
{talentRelationSymbol(talent.relationToNext)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{profile.note ? (
|
|
<div
|
|
style={{ display: "flex", flexDirection: "column", gap: 5 }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
color: "#b9b9c2",
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
โน็ต
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
fontSize: 14,
|
|
lineHeight: 1.55,
|
|
}}
|
|
>
|
|
{profile.note}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
{
|
|
width: 1200,
|
|
height,
|
|
fonts: [
|
|
...fonts,
|
|
{
|
|
name: "Kanit",
|
|
data: relationFontData,
|
|
weight: 600,
|
|
style: "normal",
|
|
},
|
|
],
|
|
headers: {
|
|
"Cache-Control": "no-store",
|
|
"Content-Disposition": imageContentDisposition(
|
|
`${guide.guideName}-Artifact`,
|
|
"artifacts",
|
|
),
|
|
"Content-Type": "image/png",
|
|
},
|
|
},
|
|
);
|
|
}
|