fix(weapon-export) : align image with public layout
This commit is contained in:
@@ -10,6 +10,10 @@ const anuphanFonts = Promise.all(
|
||||
[
|
||||
{ subset: "latin", weight: 400 as const },
|
||||
{ subset: "thai", weight: 400 as const },
|
||||
{ subset: "latin", weight: 500 as const },
|
||||
{ subset: "thai", weight: 500 as const },
|
||||
{ subset: "latin", weight: 600 as const },
|
||||
{ subset: "thai", weight: 600 as const },
|
||||
{ subset: "latin", weight: 700 as const },
|
||||
{ subset: "thai", weight: 700 as const },
|
||||
].map(async ({ subset, weight }) => {
|
||||
@@ -33,12 +37,21 @@ function metric(value: string): string {
|
||||
: `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
|
||||
}
|
||||
|
||||
function wrappedLineCount(value: string, lineLength: number): number {
|
||||
return value
|
||||
.split(/\r?\n/u)
|
||||
.reduce(
|
||||
(lines, line) => lines + Math.max(1, Math.ceil(line.length / lineLength)),
|
||||
0,
|
||||
);
|
||||
}
|
||||
|
||||
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(120, 120, { fit: "contain" })
|
||||
.resize(80, 80, { fit: "contain" })
|
||||
.png()
|
||||
.toBuffer();
|
||||
return `data:image/png;base64,${png.toString("base64")}`;
|
||||
@@ -59,18 +72,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 weaponHeights = guide.weapons.map((row) => {
|
||||
const noteLines = row.note ? wrappedLineCount(row.note, 58) : 0;
|
||||
return Math.max(112, noteLines ? 64 + noteLines * 22 : 112);
|
||||
});
|
||||
const noteLines = guide.note ? wrappedLineCount(guide.note, 70) : 0;
|
||||
const headerHeight = 72 + (noteLines ? 12 + noteLines * 24 : 0);
|
||||
const height = Math.max(
|
||||
360,
|
||||
190 +
|
||||
noteHeight +
|
||||
64 +
|
||||
headerHeight +
|
||||
24 +
|
||||
weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
|
||||
Math.max(0, guide.weapons.length - 1) * 14,
|
||||
Math.max(0, guide.weapons.length - 1) * 12,
|
||||
);
|
||||
|
||||
return new ImageResponse(
|
||||
@@ -80,22 +94,18 @@ export async function GET(
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
color: "#f7f7f7",
|
||||
background: "#05060a",
|
||||
color: "#f2eee6",
|
||||
background: "#06070c",
|
||||
padding: "32px 36px",
|
||||
fontFamily: "Anuphan",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -103,21 +113,29 @@ export async function GET(
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginBottom: 6,
|
||||
gap: 12,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#f0b72f",
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
color: "#ebae42",
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.43,
|
||||
}}
|
||||
>
|
||||
อาวุธที่แนะนำ
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 36,
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.11,
|
||||
}}
|
||||
>
|
||||
Weapons
|
||||
</div>
|
||||
{guide.note ? (
|
||||
@@ -125,10 +143,11 @@ export async function GET(
|
||||
style={{
|
||||
display: "flex",
|
||||
maxWidth: 760,
|
||||
color: "#b9b9c2",
|
||||
color: "#9b9eaa",
|
||||
fontSize: 16,
|
||||
lineHeight: 1.4,
|
||||
lineHeight: 1.5,
|
||||
textAlign: "center",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{guide.note}
|
||||
@@ -142,18 +161,17 @@ export async function GET(
|
||||
display: "flex",
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(247, 247, 247, 0.1)",
|
||||
border: "1px solid rgba(242, 238, 230, 0.1)",
|
||||
borderRadius: 14,
|
||||
background: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flex: 3,
|
||||
overflow: "hidden",
|
||||
borderBottomRightRadius: 80,
|
||||
borderBottomRightRadius: 128,
|
||||
background: rarityGradient(row.weapon.rarity),
|
||||
color: "white",
|
||||
padding: 0,
|
||||
@@ -161,29 +179,27 @@ export async function GET(
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
gap: 18,
|
||||
padding: "10px 40px 10px 24px",
|
||||
gap: 16,
|
||||
padding: "16px 64px 16px 16px",
|
||||
}}
|
||||
>
|
||||
{weaponImages[index] ? (
|
||||
<img
|
||||
src={weaponImages[index]!}
|
||||
alt=""
|
||||
width={104}
|
||||
height={104}
|
||||
width={80}
|
||||
height={80}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 104,
|
||||
height: 104,
|
||||
width: 80,
|
||||
height: 80,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: 32,
|
||||
@@ -193,10 +209,24 @@ export async function GET(
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 5 }}
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
|
||||
style={{
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.55,
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
</div>
|
||||
@@ -205,7 +235,8 @@ export async function GET(
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.55,
|
||||
lineHeight: 1.43,
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{row.note}
|
||||
@@ -220,9 +251,9 @@ export async function GET(
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: 12,
|
||||
color: "#17171c",
|
||||
padding: "12px 16px",
|
||||
gap: 16,
|
||||
color: "#000000",
|
||||
padding: "20px 16px",
|
||||
}}
|
||||
>
|
||||
{row.overallPercent ? (
|
||||
@@ -238,13 +269,17 @@ export async function GET(
|
||||
style={{
|
||||
display: "flex",
|
||||
color: rarityTextColor(row.weapon.rarity),
|
||||
fontSize: 36,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{metric(row.overallPercent)}
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 14 }}>
|
||||
<div
|
||||
style={{ display: "flex", marginTop: 4, fontSize: 16 }}
|
||||
>
|
||||
ดาเมททั้งทีม
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,13 +297,17 @@ export async function GET(
|
||||
style={{
|
||||
display: "flex",
|
||||
color: rarityTextColor(row.weapon.rarity),
|
||||
fontSize: 36,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{metric(row.personalPercent)}
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 14 }}>
|
||||
<div
|
||||
style={{ display: "flex", marginTop: 4, fontSize: 16 }}
|
||||
>
|
||||
ดาเมจส่วนตัว
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user