199 lines
8.5 KiB
TypeScript
199 lines
8.5 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { ImageResponse } from "next/og";
|
|
import { join } from "node:path";
|
|
import sharp from "sharp";
|
|
|
|
import { rarityGradient } from "@/lib/catalog/rarity";
|
|
import { imageContentDisposition } from "@/lib/guides/export-image";
|
|
import { getPublicTeamExport } from "@/lib/guides/queries";
|
|
|
|
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 amount(value: number): string {
|
|
return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(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(156, 156, { fit: "cover" })
|
|
.png()
|
|
.toBuffer();
|
|
return `data:image/png;base64,${png.toString("base64")}`;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
|
|
const image = sharp(join(process.cwd(), "public", "icon", fileName));
|
|
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/teams/[teamId]/image">,
|
|
) {
|
|
const { teamId } = await context.params;
|
|
const team = await getPublicTeamExport(teamId);
|
|
if (!team) return new Response("Team not found", { status: 404 });
|
|
|
|
const total = team.members.reduce(
|
|
(sum, member) => sum + Number(member.damage),
|
|
0,
|
|
);
|
|
const seconds = Number(team.rotationSeconds);
|
|
const dps = seconds > 0 ? total / seconds : 0;
|
|
const [fonts, watermark, memberAssets] = await Promise.all([
|
|
anuphanFonts,
|
|
localPngDataUrl("Watermark.png", null),
|
|
Promise.all(
|
|
team.members.map(async (member) => {
|
|
const [character, weapon, artifact] = await Promise.all([
|
|
pngDataUrl(member.character.imageUrl),
|
|
member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
|
|
member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
|
|
]);
|
|
return { character, weapon, artifact };
|
|
}),
|
|
),
|
|
]);
|
|
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
color: "#f4fbfa",
|
|
background:
|
|
"radial-gradient(circle at 50% 0%, #16454a 0%, #0a2429 38%, #06171b 100%)",
|
|
border: "2px solid #3aaaa2",
|
|
padding: "34px 36px",
|
|
fontFamily: "Anuphan",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
|
|
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
|
|
<div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
|
|
{team.guideName}
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "center", color: "#82d6ce", fontSize: 20 }}>
|
|
{team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 10 }}>
|
|
{team.members.map((member, index) => {
|
|
const damage = Number(member.damage);
|
|
const percent = total > 0 ? (damage / total) * 100 : 0;
|
|
return (
|
|
<div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14 }}>
|
|
{memberAssets[index].character ? (
|
|
<img
|
|
src={memberAssets[index].character}
|
|
alt=""
|
|
width={78}
|
|
height={78}
|
|
style={{ borderRadius: 16, border: "2px solid #78cbc4", objectFit: "cover" }}
|
|
/>
|
|
) : (
|
|
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", color: "#82d6ce", fontSize: 30 }}>
|
|
{member.character.name.slice(0, 1)}
|
|
</div>
|
|
)}
|
|
<div style={{ display: "flex", gap: 6 }}>
|
|
{member.weapon && memberAssets[index].weapon ? (
|
|
<div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
|
|
<img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
|
|
<div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
|
|
R{member.refinement}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{member.artifact && memberAssets[index].artifact ? (
|
|
<div style={{ display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.artifact.rarity) }}>
|
|
<img src={memberAssets[index].artifact} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
|
<div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} · {member.character.name}</div>
|
|
<div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
|
<div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#17383d" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
width: `${Math.max(2, Math.min(100, percent))}%`,
|
|
height: "100%",
|
|
borderRadius: 8,
|
|
background: "linear-gradient(90deg, #55b7ae 0%, #8be0d7 100%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div style={{ display: "flex", width: 66, justifyContent: "flex-end", fontSize: 20, fontWeight: 700 }}>
|
|
{percent.toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div style={{ display: "flex", flex: 1 }} />
|
|
<div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
|
|
<span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
|
|
<span style={{ color: "#688c90" }}>|</span>
|
|
<span>DPR: {amount(total)}</span>
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "center", marginTop: 14, textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
|
|
{team.combo}
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
|
|
By YT เกนชินไม่ใช่เกมมือถือ
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
{
|
|
width: 550,
|
|
height: 776,
|
|
fonts: fonts.length ? fonts : undefined,
|
|
headers: {
|
|
"Cache-Control": "no-store",
|
|
"Content-Disposition": imageContentDisposition(team.title, "team"),
|
|
"Content-Type": "image/png",
|
|
},
|
|
},
|
|
);
|
|
}
|