astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style : readble img
CI / Verify (push) Successful in 1m0s
Details
CI / Build immutable images and deploy (push) Successful in 1m42s
Details

Browse Source
This commit is contained in:
gunshiz
2026-08-30 15:15:55 +00:00 Unverified
parent 14a98c55f1
commit 7d8d4b561e
2 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/guides/[guideId]/artifacts/image/route.tsx
+11 -7
View File
@@ -56,8 +56,9 @@ async function pngDataUrl(url: string): Promise<string | null> {
} }
} }
async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> { async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
const image = sharp(join(process.cwd(), "public", "icon", fileName)); let image = sharp(join(process.cwd(), "public", "icon", fileName));
if (white) image = image.negate();
const png = await (size === null ? image : image.resize(size, size, { fit: "contain" })) const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
.png() .png()
.toBuffer(); .toBuffer();
@@ -94,7 +95,7 @@ export async function GET(
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type); const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null; return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
})), })),
Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`))), Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))),
localPngDataUrl("Watermark.png", null), localPngDataUrl("Watermark.png", null),
]); ]);
@@ -105,7 +106,7 @@ export async function GET(
? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0) ? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
: 0; : 0;
const rightHeight = profile const rightHeight = profile
? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32 ? 242 + (profile.substats.length ? 76 + profile.substats.length * 18 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
: 0; : 0;
const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight)); const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
@@ -200,7 +201,7 @@ export async function GET(
<div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div> <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
<div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} /> <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}> <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}>
{stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "nowrap" }}>{statLabel(value)}</span>) : "—"} {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{statLabel(value)}</span>) : "—"}
</div> </div>
</div> </div>
))} ))}
@@ -208,8 +209,11 @@ export async function GET(
</div> </div>
{profile.substats.length ? ( {profile.substats.length ? (
<div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}> <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
<strong>Stat Priority:&nbsp;</strong>{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{index ? " > " : ""}{statLabel(stat)}</span>)} <strong>Stat Priority:</strong>
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
</div>
</div> </div>
) : null} ) : null}
components/public/structured-guide.tsx
+8 -6
View File
@@ -370,13 +370,15 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
</Card> </Card>
{profile.substats.length ? ( {profile.substats.length ? (
<Card> <Card>
<CardContent className="py-6 text-center text-lg"> <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
<strong>Stat Priority:</strong>{" "} <strong>Stat Priority:</strong>
<div className="flex flex-col items-center gap-1">
{profile.substats.map((stat, index) => ( {profile.substats.map((stat, index) => (
<span key={`${stat}-${index}`} className={statPriorityColorClass(index)}> <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
{index ? " > " : ""}{statLabel(stat)} {statLabel(stat)}
</span> </span>
))} ))}
</div>
</CardContent> </CardContent>
</Card> </Card>
) : null} ) : null}
@@ -396,7 +398,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
)} )}
> >
<span className="flex min-w-0 items-center gap-2"> <span className="flex min-w-0 items-center gap-2">
{targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain" /> : null} {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
<span>{normalizeTargetStat(target.stat) ?? target.stat}</span> <span>{normalizeTargetStat(target.stat) ?? target.stat}</span>
</span> </span>
<strong className="shrink-0">{target.value}</strong> <strong className="shrink-0">{target.value}</strong>
@@ -460,10 +462,10 @@ function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: stri
<Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" /> <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
<p className="font-semibold">{label}</p> <p className="font-semibold">{label}</p>
<Separator /> <Separator />
<div className="flex max-w-full flex-col items-center gap-1 text-sm leading-6 sm:text-base"> <div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
{values.length {values.length
? values.map((value, index) => ( ? values.map((value, index) => (
<span key={`${value}-${index}`} className={cn("max-w-full overflow-x-auto whitespace-nowrap", statPriorityColorClass(index))}> <span key={`${value}-${index}`} className={cn("max-w-full break-words text-center", statPriorityColorClass(index))}>
{statLabel(value)} {statLabel(value)}
</span> </span>
)) ))