fix : fix export image not like the actual

This commit is contained in:
2026-08-30 11:21:54 +00:00 Unverified
parent 8177c91434
commit 7db727d6ea
3 changed files with 38 additions and 21 deletions
@@ -2,7 +2,7 @@
import { ImageResponse } from "next/og";
import sharp from "sharp";
import { rarityGradient } from "@/lib/catalog/rarity";
import { rarityGradient, rarityTextColor } from "@/lib/catalog/rarity";
import { imageContentDisposition } from "@/lib/guides/export-image";
import { getPublicWeaponExport } from "@/lib/guides/queries";
@@ -26,10 +26,8 @@ const anuphanFonts = Promise.all(
}),
).catch(() => []);
function metric(value: string | null): string {
return value === null
? "—"
: `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
function metric(value: string): string {
return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
}
async function pngDataUrl(url: string): Promise<string | null> {
@@ -69,14 +67,14 @@ export async function GET(
flexDirection: "column",
gap: 14,
color: "#f7f7f7",
background: "#17171c",
background: "#05060a",
padding: "32px 36px",
fontFamily: "Anuphan",
}}
>
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 6 }}>
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>{guide.guideName}</div>
<div style={{ display: "flex", color: "#d3b568", fontSize: 22 }}>Weapons</div>
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
<div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>Weapons</div>
</div>
{guide.weapons.map((row, index) => (
<div
@@ -92,12 +90,13 @@ export async function GET(
<div
style={{
display: "flex",
flex: 1,
flex: 3,
alignItems: "center",
gap: 18,
borderBottomRightRadius: 80,
background: rarityGradient(row.weapon.rarity),
color: "white",
padding: "10px 24px",
padding: "10px 40px 10px 24px",
}}
>
{weaponImages[index] ? (
@@ -109,15 +108,19 @@ export async function GET(
{index + 1}. {row.weapon.name} R{row.refinement}
</div>
</div>
<div style={{ display: "flex", width: 350, alignItems: "center", justifyContent: "space-around", gap: 16, color: "#17171c", padding: "12px 20px" }}>
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
<div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
<div style={{ display: "flex", fontSize: 14 }}>ดาเมจทั้งทีม</div>
</div>
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
<div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
<div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
</div>
<div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}>
{row.overallPercent ? (
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
<div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
<div style={{ display: "flex", fontSize: 14 }}>ดาเมททั้งทีม</div>
</div>
) : null}
{row.personalPercent ? (
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
<div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
<div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
</div>
) : null}
</div>
</div>
))}