fix: align public export displays
This commit is contained in:
@@ -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> {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user