feat : buzz style
This commit is contained in:
@@ -18,7 +18,8 @@ const anuphanFonts = Promise.all(
|
|||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`https://unpkg.com/@fontsource/[email protected]/files/anuphan-${subset}-${weight}-normal.woff`,
|
`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 {
|
return {
|
||||||
name: "Anuphan",
|
name: "Anuphan",
|
||||||
data: await response.arrayBuffer(),
|
data: await response.arrayBuffer(),
|
||||||
@@ -29,7 +30,9 @@ const anuphanFonts = Promise.all(
|
|||||||
).catch(() => []);
|
).catch(() => []);
|
||||||
|
|
||||||
function amount(value: number): string {
|
function amount(value: number): string {
|
||||||
return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
|
return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(
|
||||||
|
value,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function pngDataUrl(url: string): Promise<string | null> {
|
async function pngDataUrl(url: string): Promise<string | null> {
|
||||||
@@ -37,7 +40,7 @@ async function pngDataUrl(url: string): Promise<string | null> {
|
|||||||
const response = await fetch(url);
|
const response = await fetch(url);
|
||||||
if (!response.ok) return null;
|
if (!response.ok) return null;
|
||||||
const png = await sharp(Buffer.from(await response.arrayBuffer()))
|
const png = await sharp(Buffer.from(await response.arrayBuffer()))
|
||||||
.resize(156, 156, { fit: "cover" })
|
.resize(300, 300, { fit: "cover" })
|
||||||
.png()
|
.png()
|
||||||
.toBuffer();
|
.toBuffer();
|
||||||
return `data:image/png;base64,${png.toString("base64")}`;
|
return `data:image/png;base64,${png.toString("base64")}`;
|
||||||
@@ -63,14 +66,14 @@ export async function GET(
|
|||||||
const [fonts, memberAssets] = await Promise.all([
|
const [fonts, memberAssets] = await Promise.all([
|
||||||
anuphanFonts,
|
anuphanFonts,
|
||||||
Promise.all(
|
Promise.all(
|
||||||
team.members.map(async (member) => {
|
team.members.map(async (member) => {
|
||||||
const [character, weapon, artifact] = await Promise.all([
|
const [character, weapon, artifact] = await Promise.all([
|
||||||
pngDataUrl(member.character.imageUrl),
|
pngDataUrl(member.character.imageUrl),
|
||||||
member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
|
member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
|
||||||
member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
|
member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
|
||||||
]);
|
]);
|
||||||
return { character, weapon, artifact };
|
return { character, weapon, artifact };
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -83,105 +86,313 @@ export async function GET(
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
color: "#f7f7f7",
|
color: "#f7f7f7",
|
||||||
background: "#05060a",
|
background: "#05060a",
|
||||||
border: "2px solid #34343d",
|
border: "3px solid #34343d",
|
||||||
padding: "34px 36px",
|
padding: "48px 52px",
|
||||||
fontFamily: "Anuphan",
|
fontFamily: "Anuphan",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column" }}>
|
<div
|
||||||
<div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
|
style={{
|
||||||
<div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
|
position: "relative",
|
||||||
{team.guideName}
|
zIndex: 1,
|
||||||
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontSize: 64,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{team.guideName}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
color: "#b9b9c2",
|
||||||
|
fontSize: 32,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{team.title} · ระยะเวลาโรเทชั่น{" "}
|
||||||
|
{seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", justifyContent: "center", color: "#b9b9c2", fontSize: 20 }}>
|
|
||||||
{team.title} · ระยะเวลาโรเทชั่น {seconds.toLocaleString(undefined, { maximumFractionDigits: 2 })} วิ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 10 }}>
|
<div
|
||||||
{team.members.map((member, index) => {
|
style={{
|
||||||
const damage = Number(member.damage);
|
display: "flex",
|
||||||
const percent = total > 0 ? (damage / total) * 100 : 0;
|
flexDirection: "column",
|
||||||
return (
|
gap: 24,
|
||||||
<div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14, borderRadius: 16, background: elementBackgroundColor(member.character.element), padding: 6 }}>
|
marginTop: 24,
|
||||||
<div style={{ position: "relative", display: "flex", width: 78, height: 78, flexShrink: 0, overflow: "hidden", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity) }}>
|
}}
|
||||||
{memberAssets[index].character ? (
|
>
|
||||||
<img
|
{team.members.map((member, index) => {
|
||||||
src={memberAssets[index].character}
|
const damage = Number(member.damage);
|
||||||
alt=""
|
const percent = total > 0 ? (damage / total) * 100 : 0;
|
||||||
width={78}
|
return (
|
||||||
height={78}
|
<div
|
||||||
style={{ objectFit: "cover" }}
|
key={member.position}
|
||||||
/>
|
style={{
|
||||||
) : (
|
display: "flex",
|
||||||
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", color: "#b9b9c2", fontSize: 30 }}>
|
alignItems: "center",
|
||||||
{member.character.name.slice(0, 1)}
|
gap: 24,
|
||||||
</div>
|
borderRadius: 24,
|
||||||
)}
|
background: elementBackgroundColor(member.character.element),
|
||||||
<div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
|
padding: 14,
|
||||||
C{member.constellation}
|
}}
|
||||||
</div>
|
>
|
||||||
</div>
|
<div
|
||||||
<div style={{ display: "flex", gap: 6 }}>
|
style={{
|
||||||
{member.weapon && memberAssets[index].weapon ? (
|
position: "relative",
|
||||||
<div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
|
display: "flex",
|
||||||
<img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
|
width: 150,
|
||||||
<div style={{ position: "absolute", top: 1, left: 1, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "0 2px", fontSize: 9, fontWeight: 700 }}>
|
height: 150,
|
||||||
R{member.refinement}
|
flexShrink: 0,
|
||||||
</div>
|
overflow: "hidden",
|
||||||
</div>
|
borderRadius: 24,
|
||||||
) : null}
|
border: "3px solid #ffffff2a",
|
||||||
{member.artifact && memberAssets[index].artifact ? (
|
background: rarityGradient(
|
||||||
<div style={{ display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.artifact.rarity) }}>
|
isCustomTravelerKey(member.character.key)
|
||||||
<img src={memberAssets[index].artifact} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
|
? 5
|
||||||
</div>
|
: member.character.rarity,
|
||||||
) : null}
|
),
|
||||||
</div>
|
}}
|
||||||
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
|
>
|
||||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
{memberAssets[index].character ? (
|
||||||
<div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>{member.character.name}</div>
|
<img
|
||||||
<div style={{ display: "flex", color: "#f7f7f7", fontSize: 18 }}>{amount(damage)}</div>
|
src={memberAssets[index].character}
|
||||||
</div>
|
alt=""
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
width={150}
|
||||||
<div style={{ display: "flex", flex: 1, height: 24, overflow: "hidden", borderRadius: 8, background: "#272730" }}>
|
height={150}
|
||||||
|
style={{ objectFit: "cover" }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
width: `${Math.max(2, Math.min(100, percent))}%`,
|
width: 150,
|
||||||
height: "100%",
|
height: 150,
|
||||||
borderRadius: 8,
|
alignItems: "center",
|
||||||
background: "linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
|
justifyContent: "center",
|
||||||
|
color: "#b9b9c2",
|
||||||
|
fontSize: 52,
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{member.character.name.slice(0, 1)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 6,
|
||||||
|
left: 6,
|
||||||
|
display: "flex",
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "transparent",
|
||||||
|
color: "#ffffff",
|
||||||
|
padding: "2px 8px",
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
C{member.constellation}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", width: 66, justifyContent: "flex-end", fontSize: 20, fontWeight: 700 }}>
|
</div>
|
||||||
{percent.toFixed(1)}%
|
<div style={{ display: "flex", gap: 12 }}>
|
||||||
|
{member.weapon && memberAssets[index].weapon ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
display: "flex",
|
||||||
|
width: 96,
|
||||||
|
height: 96,
|
||||||
|
overflow: "hidden",
|
||||||
|
borderRadius: 16,
|
||||||
|
background: rarityGradient(member.weapon.rarity),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={memberAssets[index].weapon}
|
||||||
|
alt=""
|
||||||
|
width={96}
|
||||||
|
height={96}
|
||||||
|
style={{ objectFit: "contain" }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 3,
|
||||||
|
left: 3,
|
||||||
|
display: "flex",
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "transparent",
|
||||||
|
color: "#ffffff",
|
||||||
|
padding: "1px 5px",
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
R{member.refinement}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{member.artifact && memberAssets[index].artifact ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
width: 96,
|
||||||
|
height: 96,
|
||||||
|
overflow: "hidden",
|
||||||
|
borderRadius: 16,
|
||||||
|
background: rarityGradient(member.artifact.rarity),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={memberAssets[index].artifact}
|
||||||
|
alt=""
|
||||||
|
width={96}
|
||||||
|
height={96}
|
||||||
|
style={{ objectFit: "contain" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 14,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{ display: "flex", fontSize: 36, fontWeight: 600 }}
|
||||||
|
>
|
||||||
|
{member.character.name}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
color: "#f7f7f7",
|
||||||
|
fontSize: 34,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{amount(damage)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{ display: "flex", alignItems: "center", gap: 20 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
|
height: 44,
|
||||||
|
overflow: "hidden",
|
||||||
|
borderRadius: 14,
|
||||||
|
background: "#272730",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
width: `${Math.max(2, Math.min(100, percent))}%`,
|
||||||
|
height: "100%",
|
||||||
|
borderRadius: 14,
|
||||||
|
background:
|
||||||
|
"linear-gradient(90deg, #b7791f 0%, #f0b72f 100%)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
width: 116,
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
fontSize: 34,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{percent.toFixed(1)}%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</div>
|
||||||
</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
|
||||||
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 15, fontWeight: 700 }}>Rotation</div>
|
style={{
|
||||||
<div style={{ display: "flex" }}>{team.combo}</div>
|
display: "flex",
|
||||||
</div>
|
flex: 1,
|
||||||
<div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #34343d", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
|
flexDirection: "column",
|
||||||
<span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
|
alignItems: "center",
|
||||||
<span style={{ color: "#74747f" }}>|</span>
|
justifyContent: "center",
|
||||||
<span>DPR: {amount(total)}</span>
|
gap: 10,
|
||||||
</div>
|
margin: "20px 0",
|
||||||
<div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#74747f", fontSize: 14 }}>
|
borderRadius: 16,
|
||||||
By YT เกนชินไม่ใช่เกมมือถือ
|
background: "#272730",
|
||||||
</div>
|
padding: "24px",
|
||||||
|
textAlign: "center",
|
||||||
|
color: "#f7f7f7",
|
||||||
|
fontSize: 28,
|
||||||
|
lineHeight: 1.45,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex" }}>{team.combo}</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
gap: 24,
|
||||||
|
borderTop: "2px solid #34343d",
|
||||||
|
paddingTop: 26,
|
||||||
|
fontSize: 38,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
|
||||||
|
<span style={{ color: "#74747f" }}>|</span>
|
||||||
|
<span>DPR: {amount(total)}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
marginTop: 22,
|
||||||
|
color: "#74747f",
|
||||||
|
fontSize: 40,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
By YT เกนชินไม่ใช่เกมมือถือ
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>,
|
||||||
{
|
{
|
||||||
width: 550,
|
width: 1080,
|
||||||
height: 776,
|
height: 1350,
|
||||||
fonts: fonts.length ? fonts : undefined,
|
fonts: fonts.length ? fonts : undefined,
|
||||||
headers: {
|
headers: {
|
||||||
"Cache-Control": "no-store",
|
"Cache-Control": "no-store",
|
||||||
|
|||||||
@@ -337,6 +337,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
) : null}
|
) : null}
|
||||||
|
<div className="order-first flex flex-col gap-5">
|
||||||
{guide.artifactGroups.map((group) => (
|
{guide.artifactGroups.map((group) => (
|
||||||
<Card key={group.id}>
|
<Card key={group.id}>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@@ -393,6 +394,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{profile ? (
|
{profile ? (
|
||||||
<div className="flex flex-col gap-5">
|
<div className="flex flex-col gap-5">
|
||||||
|
|||||||
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev --turbopack",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
|
|||||||
Reference in New Issue
Block a user