style : readble img
This commit is contained in:
@@ -56,8 +56,9 @@ async function pngDataUrl(url: string): Promise<string | null> {
|
||||
}
|
||||
}
|
||||
|
||||
async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
|
||||
const image = sharp(join(process.cwd(), "public", "icon", fileName));
|
||||
async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
|
||||
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" }))
|
||||
.png()
|
||||
.toBuffer();
|
||||
@@ -94,7 +95,7 @@ export async function GET(
|
||||
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
|
||||
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),
|
||||
]);
|
||||
|
||||
@@ -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)
|
||||
: 0;
|
||||
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;
|
||||
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", width: "100%", borderTop: "1px solid #34343d" }} />
|
||||
<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>
|
||||
))}
|
||||
@@ -208,8 +209,11 @@ export async function GET(
|
||||
</div>
|
||||
|
||||
{profile.substats.length ? (
|
||||
<div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}>
|
||||
<strong>Stat Priority: </strong>{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{index ? " > " : ""}{statLabel(stat)}</span>)}
|
||||
<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:</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>
|
||||
) : null}
|
||||
|
||||
|
||||
@@ -370,13 +370,15 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
||||
</Card>
|
||||
{profile.substats.length ? (
|
||||
<Card>
|
||||
<CardContent className="py-6 text-center text-lg">
|
||||
<strong>Stat Priority:</strong>{" "}
|
||||
<CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
|
||||
<strong>Stat Priority:</strong>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
{profile.substats.map((stat, index) => (
|
||||
<span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
|
||||
{index ? " > " : ""}{statLabel(stat)}
|
||||
{statLabel(stat)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
@@ -396,7 +398,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
<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" />
|
||||
<p className="font-semibold">{label}</p>
|
||||
<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.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)}
|
||||
</span>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user