fix : fix export image not like the actual
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user