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(() => []); ).catch(() => []);
function metric(value: string): string { 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> { async function pngDataUrl(url: string): Promise<string | null> {
+14 -15
View File
@@ -80,10 +80,9 @@ export async function GET(
height: "100%", height: "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
color: "#f4fbfa", color: "#f7f7f7",
background: background: "#05060a",
"radial-gradient(circle at 50% 0%, #16454a 0%, #0a2429 38%, #06171b 100%)", border: "2px solid #34343d",
border: "2px solid #3aaaa2",
padding: "34px 36px", padding: "34px 36px",
fontFamily: "Anuphan", fontFamily: "Anuphan",
position: "relative", position: "relative",
@@ -94,7 +93,7 @@ export async function GET(
<div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}> <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
{team.guideName} {team.guideName}
</div> </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 })} วิ {team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
</div> </div>
</div> </div>
@@ -111,10 +110,10 @@ export async function GET(
alt="" alt=""
width={78} width={78}
height={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)} {member.character.name.slice(0, 1)}
</div> </div>
)} )}
@@ -136,17 +135,17 @@ export async function GET(
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}> <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}> <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", 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>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}> <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 <div
style={{ style={{
display: "flex", display: "flex",
width: `${Math.max(2, Math.min(100, percent))}%`, width: `${Math.max(2, Math.min(100, percent))}%`,
height: "100%", height: "100%",
borderRadius: 8, borderRadius: 8,
background: "linear-gradient(90deg, #55b7ae 0%, #8be0d7 100%)", background: "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
}} }}
/> />
</div> </div>
@@ -160,16 +159,16 @@ export async function GET(
})} })}
</div> </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", 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: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Rotation</div> <div style={{ display: "flex", color: "#b9b9c2", fontSize: 15, fontWeight: 700 }}>Rotation</div>
<div style={{ display: "flex" }}>{team.combo}</div> <div style={{ display: "flex" }}>{team.combo}</div>
</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: "#f0c95f" }}>DPS): {amount(dps)}</span>
<span style={{ color: "#688c90" }}>|</span> <span style={{ color: "#74747f" }}>|</span>
<span>DPR: {amount(total)}</span> <span>DPR: {amount(total)}</span>
</div> </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 เกนชินไม่ใช่เกมมือถือ By YT เกนชินไม่ใช่เกมมือถือ
</div> </div>
</div> </div>
+2 -2
View File
@@ -262,7 +262,7 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
rarityTextClass(row.weapon.rarity), rarityTextClass(row.weapon.rarity),
)} )}
> >
{metric(row.overallPercent)} {Number(row.overallPercent) === 0 ? "-%" : metric(row.overallPercent)}
</p> </p>
<p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p> <p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
</div> </div>
@@ -275,7 +275,7 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
rarityTextClass(row.weapon.rarity), rarityTextClass(row.weapon.rarity),
)} )}
> >
{metric(row.personalPercent)} {Number(row.personalPercent) === 0 ? "-%" : metric(row.personalPercent)}
</p> </p>
<p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p> <p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
</div> </div>