feat : update
This commit is contained in:
@@ -1,432 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { ImageResponse } from "next/og";
|
||||
import sharp from "sharp";
|
||||
|
||||
import { elementBackgroundColor } from "@/lib/catalog/element";
|
||||
import { rarityGradient } from "@/lib/catalog/rarity";
|
||||
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
|
||||
import { getCachedPublicTeamExport } from "@/lib/cache/public";
|
||||
import { imageContentDisposition } from "@/lib/guides/export-image";
|
||||
|
||||
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(300, 300, { fit: "cover" })
|
||||
.png()
|
||||
.toBuffer();
|
||||
return `data:image/png;base64,${png.toString("base64")}`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
_request: Request,
|
||||
context: RouteContext<"/api/teams/[teamId]/image">,
|
||||
) {
|
||||
const { teamId } = await context.params;
|
||||
const team = await getCachedPublicTeamExport(teamId);
|
||||
if (!team) return new Response("ไม่พบทีม", { 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, memberAssets] = await Promise.all([
|
||||
anuphanFonts,
|
||||
Promise.all(
|
||||
team.members.map(async (member) => {
|
||||
const [character, weapon, artifact, secondArtifact] = await Promise.all(
|
||||
[
|
||||
pngDataUrl(member.character.imageUrl),
|
||||
member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
|
||||
member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
|
||||
member.secondArtifact
|
||||
? pngDataUrl(member.secondArtifact.imageUrl)
|
||||
: null,
|
||||
],
|
||||
);
|
||||
return { character, weapon, artifact, secondArtifact };
|
||||
}),
|
||||
),
|
||||
]);
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
color: "#f7f7f7",
|
||||
background: "#05060a",
|
||||
border: "3px solid #34343d",
|
||||
padding: "48px 52px",
|
||||
fontFamily: "Anuphan",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<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: 64,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{team.guideName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
color: "#b9b9c2",
|
||||
fontSize: 32,
|
||||
}}
|
||||
>
|
||||
{team.title} · ระยะเวลาโรเทชั่น{" "}
|
||||
{seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 24,
|
||||
marginTop: 24,
|
||||
}}
|
||||
>
|
||||
{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: 24,
|
||||
borderRadius: 24,
|
||||
background: elementBackgroundColor(member.character.element),
|
||||
padding: 14,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
width: 150,
|
||||
height: 150,
|
||||
flexShrink: 0,
|
||||
overflow: "hidden",
|
||||
borderRadius: 24,
|
||||
border: "3px solid #ffffff2a",
|
||||
background: rarityGradient(
|
||||
isCustomTravelerKey(member.character.key)
|
||||
? 5
|
||||
: member.character.rarity,
|
||||
),
|
||||
}}
|
||||
>
|
||||
{memberAssets[index].character ? (
|
||||
<img
|
||||
src={memberAssets[index].character}
|
||||
alt=""
|
||||
width={150}
|
||||
height={150}
|
||||
style={{ objectFit: "cover" }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 150,
|
||||
height: 150,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "#b9b9c2",
|
||||
fontSize: 52,
|
||||
}}
|
||||
>
|
||||
{member.character.name.slice(0, 1)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 6,
|
||||
left: 6,
|
||||
display: "flex",
|
||||
borderRadius: 4,
|
||||
background: "transparent",
|
||||
color: "#ffffff",
|
||||
padding: "2px 8px",
|
||||
fontSize: 20,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
C{member.constellation}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 12 }}>
|
||||
{member.weapon && memberAssets[index].weapon ? (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
width: 96,
|
||||
height: 96,
|
||||
overflow: "hidden",
|
||||
borderRadius: 16,
|
||||
background: rarityGradient(member.weapon.rarity),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={memberAssets[index].weapon}
|
||||
alt=""
|
||||
width={96}
|
||||
height={96}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 3,
|
||||
left: 3,
|
||||
display: "flex",
|
||||
borderRadius: 4,
|
||||
background: "transparent",
|
||||
color: "#ffffff",
|
||||
padding: "1px 5px",
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
R{member.refinement}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{member.artifact && memberAssets[index].artifact ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 96,
|
||||
height: 96,
|
||||
overflow: "hidden",
|
||||
borderRadius: 16,
|
||||
background: rarityGradient(member.artifact.rarity),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={memberAssets[index].artifact}
|
||||
alt=""
|
||||
width={96}
|
||||
height={96}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{member.secondArtifact &&
|
||||
memberAssets[index].secondArtifact ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 96,
|
||||
height: 96,
|
||||
overflow: "hidden",
|
||||
borderRadius: 16,
|
||||
background: rarityGradient(
|
||||
member.secondArtifact.rarity,
|
||||
),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={memberAssets[index].secondArtifact}
|
||||
alt=""
|
||||
width={96}
|
||||
height={96}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", fontSize: 36, fontWeight: 600 }}
|
||||
>
|
||||
{member.character.name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#f7f7f7",
|
||||
fontSize: 36,
|
||||
}}
|
||||
>
|
||||
{amount(damage)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 20 }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
height: 44,
|
||||
overflow: "hidden",
|
||||
borderRadius: 14,
|
||||
background: "#272730",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: `${Math.max(2, Math.min(100, percent))}%`,
|
||||
height: "100%",
|
||||
borderRadius: 14,
|
||||
background:
|
||||
"linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 116,
|
||||
justifyContent: "flex-end",
|
||||
fontSize: 34,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{percent.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 10,
|
||||
margin: "20px 0",
|
||||
borderRadius: 16,
|
||||
background: "#272730",
|
||||
padding: "24px",
|
||||
textAlign: "center",
|
||||
color: "#f7f7f7",
|
||||
fontSize: 28,
|
||||
lineHeight: 1.45,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex" }}>{team.combo}</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: 24,
|
||||
borderTop: "2px solid #34343d",
|
||||
paddingTop: 26,
|
||||
fontSize: 38,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#f0c95f", fontSize: 64, fontWeight: 700 }}>
|
||||
DPS: {amount(dps)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginTop: 22,
|
||||
color: "#74747f",
|
||||
fontSize: 40,
|
||||
}}
|
||||
>
|
||||
By YT เกนชินไม่ใช่เกมมือถือ
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
width: 1080,
|
||||
height: 1350,
|
||||
fonts: fonts.length ? fonts : undefined,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
"Content-Disposition": imageContentDisposition(team.title, "team"),
|
||||
"Content-Type": "image/png",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user