feat : update
This commit is contained in:
@@ -16,7 +16,8 @@ const anuphanFonts = Promise.all(
|
||||
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}`);
|
||||
if (!response.ok)
|
||||
throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
|
||||
return {
|
||||
name: "Anuphan",
|
||||
data: await response.arrayBuffer(),
|
||||
@@ -58,9 +59,19 @@ export async function GET(
|
||||
anuphanFonts,
|
||||
Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
|
||||
]);
|
||||
const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)));
|
||||
const noteHeight = guide.note ? Math.max(24, Math.ceil(guide.note.length / 70) * 22) : 0;
|
||||
const height = Math.max(360, 190 + noteHeight + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14);
|
||||
const weaponHeights = guide.weapons.map((row) =>
|
||||
Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)),
|
||||
);
|
||||
const noteHeight = guide.note
|
||||
? Math.max(24, Math.ceil(guide.note.length / 70) * 22)
|
||||
: 0;
|
||||
const height = Math.max(
|
||||
360,
|
||||
190 +
|
||||
noteHeight +
|
||||
weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
|
||||
Math.max(0, guide.weapons.length - 1) * 14,
|
||||
);
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
@@ -77,65 +88,194 @@ export async function GET(
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}>
|
||||
<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 }}>อาวุธ</div>
|
||||
{guide.note ? <div style={{ display: "flex", maxWidth: 760, color: "#b9b9c2", fontSize: 16, lineHeight: 1.4, textAlign: "center" }}>{guide.note}</div> : null}
|
||||
</div>
|
||||
{guide.weapons.map((row, index) => (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
key={row.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
borderRadius: 14,
|
||||
background: "white",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flex: 3,
|
||||
overflow: "hidden",
|
||||
borderBottomRightRadius: 80,
|
||||
background: rarityGradient(row.weapon.rarity),
|
||||
color: "white",
|
||||
padding: 0,
|
||||
color: "#f0b72f",
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, alignItems: "center", gap: 18, padding: "10px 40px 10px 24px" }}>
|
||||
{weaponImages[index] ? (
|
||||
<img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
|
||||
) : (
|
||||
<div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
|
||||
)}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
อาวุธที่แนะนำ
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
|
||||
Weapons
|
||||
</div>
|
||||
{guide.note ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
maxWidth: 760,
|
||||
color: "#b9b9c2",
|
||||
fontSize: 16,
|
||||
lineHeight: 1.4,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{guide.note}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{guide.weapons.map((row, index) => (
|
||||
<div
|
||||
key={row.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(247, 247, 247, 0.1)",
|
||||
borderRadius: 14,
|
||||
background: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flex: 3,
|
||||
overflow: "hidden",
|
||||
borderBottomRightRadius: 80,
|
||||
background: rarityGradient(row.weapon.rarity),
|
||||
color: "white",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
gap: 18,
|
||||
padding: "10px 40px 10px 24px",
|
||||
}}
|
||||
>
|
||||
{weaponImages[index] ? (
|
||||
<img
|
||||
src={weaponImages[index]!}
|
||||
alt=""
|
||||
width={104}
|
||||
height={104}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 104,
|
||||
height: 104,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: 32,
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 5 }}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
|
||||
>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
</div>
|
||||
{row.note ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.55,
|
||||
}}
|
||||
>
|
||||
{row.note}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
|
||||
</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>
|
||||
<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>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
@@ -144,7 +284,10 @@ export async function GET(
|
||||
fonts: fonts.length ? fonts : undefined,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
"Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"),
|
||||
"Content-Disposition": imageContentDisposition(
|
||||
`${guide.guideName}-Weapon`,
|
||||
"weapons",
|
||||
),
|
||||
"Content-Type": "image/png",
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user