252 lines
11 KiB
TypeScript
252 lines
11 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { join } from "node:path";
|
|
|
|
import { ImageResponse } from "next/og";
|
|
import sharp from "sharp";
|
|
|
|
import { rarityGradient } from "@/lib/catalog/rarity";
|
|
import { imageContentDisposition } from "@/lib/guides/export-image";
|
|
import { getPublicArtifactExport } from "@/lib/guides/queries";
|
|
import { normalizeTalentPriorities } 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(() => []);
|
|
|
|
function metric(value: string): string {
|
|
return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
|
|
}
|
|
|
|
function statLabel(value: string): string {
|
|
return value === "EM"
|
|
? "Elemental Mastery"
|
|
: value === "ER"
|
|
? "Energy Recharge"
|
|
: 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): Promise<string> {
|
|
const png = await sharp(join(process.cwd(), "public", "icon", fileName))
|
|
.resize(96, 96, { 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 getPublicArtifactExport(guideId);
|
|
if (!guide) return new Response("Guide not found", { status: 404 });
|
|
|
|
const [fonts, groupAssets, statIconAssets] = await Promise.all([
|
|
anuphanFonts,
|
|
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"),
|
|
]),
|
|
]);
|
|
|
|
const profile = guide.profile;
|
|
const leftHeight = guide.groups.reduce((sum, group) => sum + 68 + group.rows.length * 76, 0) + Math.max(0, guide.groups.length - 1) * 16;
|
|
const detailHeight = profile
|
|
? 60 + profile.targets.length * 30 + (profile.talents.length ? 58 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
|
|
: 0;
|
|
const rightHeight = profile
|
|
? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
|
|
: 0;
|
|
const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
|
|
const talents = normalizeTalentPriorities(profile?.talents ?? []);
|
|
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 20,
|
|
color: "#f7f7f7",
|
|
background: "#05060a",
|
|
padding: "32px 36px",
|
|
fontFamily: "Anuphan",
|
|
}}
|
|
>
|
|
<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 }}>
|
|
Artifacts & Stats
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
|
|
<div style={{ display: "flex", flex: profile ? 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}
|
|
</div>
|
|
<div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
|
|
{group.rows.map((row, rowIndex) => (
|
|
<div key={row.id} style={{ display: "flex", minHeight: 76, alignItems: "center", gap: 14 }}>
|
|
<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, fontSize: 18, fontWeight: 700 }}>
|
|
{rowIndex + 1}. {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
|
|
</div>
|
|
<div style={{ display: "flex", fontSize: 26, fontWeight: 700 }}>
|
|
{metric(row.percent)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{profile ? (
|
|
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
|
|
<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 }}>
|
|
Artifact Stats
|
|
</div>
|
|
<div style={{ display: "flex" }}>
|
|
{[
|
|
{ label: "Sands", values: profile.sands, icon: statIconAssets[0] },
|
|
{ label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
|
|
{ label: "Circlet", 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 === "Circlet" ? "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", fontSize: 14, lineHeight: 1.45 }}>
|
|
{stat.values.length ? stat.values.map(statLabel).join(" > ") : "—"}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{profile.substats.length ? (
|
|
<div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}>
|
|
<strong>Stat Priority: </strong>{profile.substats.map(statLabel).join(" > ")}
|
|
</div>
|
|
) : null}
|
|
|
|
{detailHeight > 60 ? (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 14, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "18px 20px" }}>
|
|
<div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
|
|
{profile.targets.length ? (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
|
|
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>Target Stats</div>
|
|
{profile.targets.map((target) => (
|
|
<div key={`${target.stat}-${target.value}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 15 }}>
|
|
<span>{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", gap: 10, fontSize: 17, fontWeight: 700 }}>
|
|
{talents.map((talent, index) => (
|
|
<div key={talent.type} style={{ display: "flex", gap: 10 }}>
|
|
<span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
|
|
{index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</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>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>,
|
|
{
|
|
width: 1200,
|
|
height,
|
|
fonts: fonts.length ? fonts : undefined,
|
|
headers: {
|
|
"Cache-Control": "no-store",
|
|
"Content-Disposition": imageContentDisposition(`${guide.guideName} Artifacts`, "artifacts"),
|
|
"Content-Type": "image/png",
|
|
},
|
|
},
|
|
);
|
|
}
|