fix: align public export displays
CI / Verify (push) Successful in 58s
CI / Build immutable images and deploy (push) Successful in 1m48s

This commit is contained in:
2026-09-01 14:57:05 +07:00 Unverified
parent 1b4581b94e
commit 9553acccd5
3 changed files with 19 additions and 18 deletions
@@ -27,7 +27,9 @@ const anuphanFonts = Promise.all(
).catch(() => []);
function metric(value: string): string {
return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
return Number(value) === 0
? "-%"
: `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
}
async function pngDataUrl(url: string): Promise<string | null> {
+14 -15
View File
@@ -80,10 +80,9 @@ export async function GET(
height: "100%",
display: "flex",
flexDirection: "column",
color: "#f4fbfa",
background:
"radial-gradient(circle at 50% 0%, #16454a 0%, #0a2429 38%, #06171b 100%)",
border: "2px solid #3aaaa2",
color: "#f7f7f7",
background: "#05060a",
border: "2px solid #34343d",
padding: "34px 36px",
fontFamily: "Anuphan",
position: "relative",
@@ -94,7 +93,7 @@ export async function GET(
<div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
{team.guideName}
</div>
<div style={{ display: "flex", justifyContent: "center", color: "#82d6ce", fontSize: 20 }}>
<div style={{ display: "flex", justifyContent: "center", color: "#b9b9c2", fontSize: 20 }}>
{team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
</div>
</div>
@@ -111,10 +110,10 @@ export async function GET(
alt=""
width={78}
height={78}
style={{ borderRadius: 16, border: "2px solid #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
/>
) : (
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#82d6ce", fontSize: 30 }}>
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#b9b9c2", fontSize: 30 }}>
{member.character.name.slice(0, 1)}
</div>
)}
@@ -136,17 +135,17 @@ export async function GET(
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} {member.character.name}</div>
<div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
<div style={{ display: "flex", color: "#f7f7f7", fontSize: 18 }}>{amount(damage)}</div>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#17383d" }}>
<div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#272730" }}>
<div
style={{
display: "flex",
width: `${Math.max(2, Math.min(100, percent))}%`,
height: "100%",
borderRadius: 8,
background: "linear-gradient(90deg, #55b7ae 0%, #8be0d7 100%)",
background: "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
}}
/>
</div>
@@ -160,16 +159,16 @@ export async function GET(
})}
</div>
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "16px 0", textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
<div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Rotation</div>
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, margin: "16px 0", borderRadius: 10, background: "#272730", padding: "16px", textAlign: "center", color: "#f7f7f7", fontSize: 18, lineHeight: 1.45 }}>
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 15, fontWeight: 700 }}>Rotation</div>
<div style={{ display: "flex" }}>{team.combo}</div>
</div>
<div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
<div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #34343d", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
<span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
<span style={{ color: "#688c90" }}>|</span>
<span style={{ color: "#74747f" }}>|</span>
<span>DPR: {amount(total)}</span>
</div>
<div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
<div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#74747f", fontSize: 14 }}>
By YT เกนชินไม่ใช่เกมมือถือ
</div>
</div>