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

feat : update
CI / Verify (push) Successful in 1m14s
Details
CI / Build immutable images and deploy (push) Successful in 3m57s
Details

Browse Source
This commit is contained in:
gunshiz
2026-09-01 22:36:57 +07:00 Unverified
parent d3de822366
commit 69530932f2
5 changed files with 799 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/guides/[guideId]/artifacts/image/route.tsx
+533 -74
View File
@@ -8,8 +8,18 @@ import { rarityGradient } from "@/lib/catalog/rarity";
import { artifactTierCount } from "@/lib/guides/artifacts"; import { artifactTierCount } from "@/lib/guides/artifacts";
import { getCachedPublicArtifactExport } from "@/lib/cache/public"; import { getCachedPublicArtifactExport } from "@/lib/cache/public";
import { imageContentDisposition } from "@/lib/guides/export-image"; import { imageContentDisposition } from "@/lib/guides/export-image";
import { normalizeTargetStat, recommendedStatIconName, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats"; import {
import { normalizeTalentPriorities, talentRelationSymbol, talentTypeLabel } from "@/lib/guides/talents"; normalizeTargetStat,
recommendedStatIconName,
statPriorityColor,
targetStatIconName,
targetStatOptions,
} from "@/lib/guides/stats";
import {
normalizeTalentPriorities,
talentRelationSymbol,
talentTypeLabel,
} from "@/lib/guides/talents";
const anuphanFonts = Promise.all( const anuphanFonts = Promise.all(
[ [
@@ -21,7 +31,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(),
@@ -75,10 +86,16 @@ async function pngDataUrl(url: string): Promise<string | null> {
} }
} }
async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> { async function localPngDataUrl(
fileName: string,
size: number | null = 96,
white = false,
): Promise<string> {
let image = sharp(join(process.cwd(), "public", "icon", fileName)); let image = sharp(join(process.cwd(), "public", "icon", fileName));
if (white) image = image.negate({ alpha: false }); if (white) image = image.negate({ alpha: false });
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();
return `data:image/png;base64,${png.toString("base64")}`; return `data:image/png;base64,${png.toString("base64")}`;
@@ -93,7 +110,8 @@ export async function GET(
if (!guide) return new Response("ไม่พบไกด์", { status: 404 }); if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
const talents = normalizeTalentPriorities(guide.profile?.talents ?? []); const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([ const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] =
await Promise.all([
anuphanFonts, anuphanFonts,
Promise.all( Promise.all(
guide.groups.map((group) => guide.groups.map((group) =>
@@ -110,29 +128,70 @@ export async function GET(
localPngDataUrl("Icon_Goblet_of_Eonothem.webp"), localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
localPngDataUrl("Icon_Circlet_of_Logos.webp"), localPngDataUrl("Icon_Circlet_of_Logos.webp"),
]), ]),
Promise.all(talents.map((talent) => { Promise.all(
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type); talents.map((talent) => {
return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null; const catalogTalent = guide.character.talents.find(
})), (item) => item.type === talent.type,
Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))), );
return catalogTalent?.iconUrl
? pngDataUrl(catalogTalent.iconUrl)
: null;
}),
),
Promise.all(
targetStatOptions.map((stat) =>
localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true),
),
),
]); ]);
const profile = guide.profile; const profile = guide.profile;
const recommendedStatAsset = (value: string) => { const recommendedStatAsset = (value: string) => {
const iconName = recommendedStatIconName(value); const iconName = recommendedStatIconName(value);
const iconIndex = targetStatOptions.findIndex((stat) => targetStatIconName(stat) === iconName); const iconIndex = targetStatOptions.findIndex(
(stat) => targetStatIconName(stat) === iconName,
);
return iconIndex >= 0 ? targetStatAssets[iconIndex] : null; return iconIndex >= 0 ? targetStatAssets[iconIndex] : null;
}; };
const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0)))); const groupRowHeights = guide.groups.map((group) =>
const tierListHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16; group.rows.map((row) =>
Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0)),
),
);
const tierListHeight =
guide.groups.reduce(
(sum, _group, groupIndex) =>
sum +
68 +
groupRowHeights[groupIndex].reduce(
(groupSum, rowHeight) => groupSum + rowHeight,
0,
),
0,
) +
Math.max(0, guide.groups.length - 1) * 16;
const detailHeight = profile const detailHeight = profile
? 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 mainStatExtraHeight = profile const mainStatExtraHeight = profile
? Math.max(0, Math.max(profile.sands.length, profile.goblet.length, profile.circlet.length) - 2) * 24 ? Math.max(
0,
Math.max(
profile.sands.length,
profile.goblet.length,
profile.circlet.length,
) - 2,
) * 24
: 0; : 0;
const profileHeight = profile const profileHeight = profile
? 242 + mainStatExtraHeight + (profile.substats.length ? 92 + profile.substats.length * 18 : 0) ? 242 +
mainStatExtraHeight +
(profile.substats.length ? 92 + profile.substats.length * 18 : 0)
: 0; : 0;
const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0); const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0);
const rightHeight = detailHeight > 60 ? detailHeight : 0; const rightHeight = detailHeight > 60 ? detailHeight : 0;
@@ -153,18 +212,48 @@ export async function GET(
position: "relative", position: "relative",
}} }}
> >
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 20 }}> <div
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}> style={{
<div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}> position: "relative",
อาร์ติแฟกต์และสเตตัสที่แนะนำ zIndex: 1,
display: "flex",
flex: 1,
flexDirection: "column",
gap: 20,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 8,
}}
>
<div
style={{
display: "flex",
color: "#f0b72f",
fontSize: 16,
fontWeight: 700,
}}
>
อาร์ติแฟกต์และสแตทที่แนะนำ
</div> </div>
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}> <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
อาร์ติแฟกต์และค่าสถานะ Artifact & Stats
</div> </div>
</div> </div>
<div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}> <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
<div style={{ display: "flex", flex: detailHeight > 60 ? 1.2 : 1, flexDirection: "column", gap: 16 }}> <div
style={{
display: "flex",
flex: detailHeight > 60 ? 1.2 : 1,
flexDirection: "column",
gap: 16,
}}
>
{guide.groups.map((group, groupIndex) => ( {guide.groups.map((group, groupIndex) => (
<div <div
key={group.id} key={group.id}
@@ -177,32 +266,124 @@ export async function GET(
background: "#1d1d25", background: "#1d1d25",
}} }}
> >
<div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}> <div
style={{
display: "flex",
padding: "16px 20px",
fontSize: 22,
fontWeight: 700,
}}
>
{group.name === "Late Game" ? "เลทเกม" : group.name} {group.name === "Late Game" ? "เลทเกม" : group.name}
</div> </div>
<div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}> <div
style={{
display: "flex",
flexDirection: "column",
padding: "0 20px 14px",
}}
>
{group.rows.map((row, rowIndex) => ( {group.rows.map((row, rowIndex) => (
<div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14, borderRadius: 6, background: rowIndex % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px" }}> <div
<div style={{ display: "flex", width: row.second ? 94 : 58 }}> key={row.id}
style={{
display: "flex",
minHeight: groupRowHeights[groupIndex][rowIndex],
alignItems: "center",
gap: 14,
borderRadius: 6,
background: rowIndex % 2 === 0 ? "#34343d" : "#272730",
padding: "5px 8px",
}}
>
<div
style={{ display: "flex", width: row.second ? 94 : 58 }}
>
{groupAssets[groupIndex][rowIndex].first ? ( {groupAssets[groupIndex][rowIndex].first ? (
<div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}> <div
<img src={groupAssets[groupIndex][rowIndex].first!} alt="" width={58} height={58} style={{ objectFit: "contain" }} /> style={{
display: "flex",
width: 58,
height: 58,
overflow: "hidden",
border: "1px solid #ffffff2a",
borderRadius: 10,
background: rarityGradient(row.first.rarity),
}}
>
<img
src={groupAssets[groupIndex][rowIndex].first!}
alt=""
width={58}
height={58}
style={{ objectFit: "contain" }}
/>
</div> </div>
) : null} ) : null}
{row.second && groupAssets[groupIndex][rowIndex].second ? ( {row.second &&
<div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", marginLeft: -22, border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.second.rarity) }}> groupAssets[groupIndex][rowIndex].second ? (
<img src={groupAssets[groupIndex][rowIndex].second!} alt="" width={58} height={58} style={{ objectFit: "contain" }} /> <div
style={{
display: "flex",
width: 58,
height: 58,
overflow: "hidden",
marginLeft: -22,
border: "1px solid #ffffff2a",
borderRadius: 10,
background: rarityGradient(row.second.rarity),
}}
>
<img
src={groupAssets[groupIndex][rowIndex].second!}
alt=""
width={58}
height={58}
style={{ objectFit: "contain" }}
/>
</div> </div>
) : null} ) : null}
</div> </div>
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}> <div
<div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}> style={{
display: "flex",
flex: 1,
flexDirection: "column",
gap: 5,
}}
>
<div
style={{
display: "flex",
fontSize: 18,
fontWeight: 700,
}}
>
{artifactTierCount(row.second?.name ?? null)}{" "} {artifactTierCount(row.second?.name ?? null)}{" "}
{row.first.name}{row.second ? ` + ${row.second.name}` : ""} {row.first.name}
{row.second ? ` + ${row.second.name}` : ""}
</div> </div>
{row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null} {row.note ? (
<div
style={{
display: "flex",
color: "#b9b9c2",
fontSize: 14,
lineHeight: 1.55,
}}
>
{row.note}
</div> </div>
<div style={{ display: "flex", color: "#f0b72f", fontSize: 26, fontWeight: 700 }}> ) : null}
</div>
<div
style={{
display: "flex",
color: "#f0b72f",
fontSize: 26,
fontWeight: 700,
}}
>
{Number(row.percent) === 0 ? "-%" : metric(row.percent)} {Number(row.percent) === 0 ? "-%" : metric(row.percent)}
</div> </div>
</div> </div>
@@ -212,22 +393,122 @@ export async function GET(
))} ))}
{profile ? ( {profile ? (
<div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}> <div
<div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}> style={{
ออฟหลัก display: "flex",
flexDirection: "column",
overflow: "hidden",
border: "1px solid #34343d",
borderRadius: 14,
background: "#1d1d25",
}}
>
<div
style={{
display: "flex",
justifyContent: "center",
background: "#ddb45a",
color: "#211a0d",
padding: "14px 20px",
fontSize: 24,
fontWeight: 700,
}}
>
ออฟหลักที่ดีที่สุด
</div> </div>
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
{[ {[
{ label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] }, {
{ label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] }, label: "นาฬิกา",
{ label: "หัว", values: profile.circlet, icon: statIconAssets[2] }, values: profile.sands,
icon: statIconAssets[0],
},
{
label: "ถ้วย",
values: profile.goblet,
icon: statIconAssets[1],
},
{
label: "หัว",
values: profile.circlet,
icon: statIconAssets[2],
},
].map((stat) => ( ].map((stat) => (
<div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "มงกุฎ" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}> <div
<img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} /> key={stat.label}
<div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div> style={{
<div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} /> display: "flex",
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}> flex: 1,
{stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 5, color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{recommendedStatAsset(value) ? <img src={recommendedStatAsset(value)!} alt="" width={18} height={18} style={{ objectFit: "contain" }} /> : null}{statLabel(value)}</span>) : "-"} minHeight: 176,
flexDirection: "column",
alignItems: "center",
gap: 10,
borderRight:
stat.label === "มงกุฎ" ? "none" : "1px solid #34343d",
padding: "16px 10px",
textAlign: "center",
}}
>
<img
src={stat.icon}
alt=""
width={48}
height={48}
style={{ objectFit: "contain" }}
/>
<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={{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 5,
color: statPriorityColor(index),
whiteSpace: "normal",
wordBreak: "break-word",
}}
>
{recommendedStatAsset(value) ? (
<img
src={recommendedStatAsset(value)!}
alt=""
width={18}
height={18}
style={{ objectFit: "contain" }}
/>
) : null}
{statLabel(value)}
</span>
))
: "-"}
</div> </div>
</div> </div>
))} ))}
@@ -236,53 +517,228 @@ export async function GET(
) : null} ) : null}
{profile?.substats.length ? ( {profile?.substats.length ? (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}> <div
<strong>ออฟรอง</strong> style={{
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}> display: "flex",
{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 5, color: statPriorityColor(index) }}>{recommendedStatAsset(stat) ? <img src={recommendedStatAsset(stat)!} alt="" width={18} height={18} style={{ objectFit: "contain" }} /> : null}{statLabel(stat)}</span>)} flexDirection: "column",
alignItems: "center",
gap: 4,
border: "1px solid #34343d",
borderRadius: 14,
background: "#1d1d25",
padding: "16px",
fontSize: 14,
textAlign: "center",
}}
>
<strong>ออฟรองที่ดีที่สุด</strong>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 2,
}}
>
{profile.substats.map((stat, index) => (
<span
key={`${stat}-${index}`}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 5,
color: statPriorityColor(index),
}}
>
{recommendedStatAsset(stat) ? (
<img
src={recommendedStatAsset(stat)!}
alt=""
width={18}
height={18}
style={{ objectFit: "contain" }}
/>
) : null}
{statLabel(stat)}
</span>
))}
</div> </div>
</div> </div>
) : null} ) : null}
</div> </div>
{profile && detailHeight > 60 ? ( {profile && detailHeight > 60 ? (
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}> <div
<div style={{ display: "flex", flexDirection: "column", gap: 14, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "18px 20px" }}> style={{
<div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div> display: "flex",
flex: 1,
flexDirection: "column",
gap: 16,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 14,
border: "1px solid #34343d",
borderRadius: 14,
background: "#1d1d25",
padding: "18px 20px",
}}
>
{profile.targets.length ? ( {profile.targets.length ? (
<div style={{ display: "flex", flexDirection: "column", gap: 7 }}> <div
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div> style={{ display: "flex", flexDirection: "column", gap: 7 }}
>
<div
style={{
display: "flex",
color: "#b9b9c2",
fontSize: 14,
fontWeight: 700,
}}
>
ค่าสถานะต่ำๆที่ควรจะปั้นไว้
</div>
{profile.targets.map((target, index) => { {profile.targets.map((target, index) => {
const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat)); const iconIndex = targetStatOptions.findIndex(
(stat) => stat === normalizeTargetStat(target.stat),
);
return ( return (
<div key={`${target.stat}-${target.value}`} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, borderRadius: 6, background: index % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px", fontSize: 15 }}> <div
<span style={{ display: "flex", alignItems: "center", gap: 8 }}>{iconIndex >= 0 ? <img src={targetStatAssets[iconIndex]} alt="" width={14} height={14} style={{ objectFit: "contain" }} /> : null}{normalizeTargetStat(target.stat) ?? target.stat}</span><strong>{target.value}</strong> key={`${target.stat}-${target.value}`}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
borderRadius: 6,
background: index % 2 === 0 ? "#34343d" : "#272730",
padding: "5px 8px",
fontSize: 15,
}}
>
<span
style={{
display: "flex",
alignItems: "center",
gap: 8,
}}
>
{iconIndex >= 0 ? (
<img
src={targetStatAssets[iconIndex]}
alt=""
width={14}
height={14}
style={{ objectFit: "contain" }}
/>
) : null}
{normalizeTargetStat(target.stat) ?? target.stat}
</span>
<strong>{target.value}</strong>
</div> </div>
); );
})} })}
</div> </div>
) : null} ) : null}
{talents.length ? ( {talents.length ? (
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}> <div
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ลำดับการอัพพรสวรรค์</div> style={{ display: "flex", flexDirection: "column", gap: 6 }}
<div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 17, fontWeight: 700 }}> >
<div
style={{
display: "flex",
color: "#b9b9c2",
fontSize: 14,
fontWeight: 700,
}}
>
ลำดับการอัพพรสวรรค์
</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: 10,
fontSize: 17,
fontWeight: 700,
}}
>
{talents.map((talent, index) => ( {talents.map((talent, index) => (
<div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}> <div
{talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null} key={talent.type}
<span style={{ display: "flex", flexDirection: "column", gap: 2 }}> style={{
<span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span> display: "flex",
<span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span> alignItems: "center",
gap: 8,
}}
>
{talentAssets[index] ? (
<img
src={talentAssets[index]!}
alt=""
width={42}
height={42}
style={{ objectFit: "contain" }}
/>
) : null}
<span
style={{
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<span>
{talent.type}
{talent.level ? ` เลเวล ${talent.level}+` : ""}
</span> </span>
{index < talents.length - 1 ? <span>{talentRelationSymbol(talent.relationToNext)}</span> : null} <span
style={{
color: "#b9b9c2",
fontSize: 13,
fontWeight: 400,
}}
>
{talentTypeLabel(talent.type)}
</span>
</span>
{index < talents.length - 1 ? (
<span>
{talentRelationSymbol(talent.relationToNext)}
</span>
) : null}
</div> </div>
))} ))}
</div> </div>
</div> </div>
) : null} ) : null}
{profile.note ? ( {profile.note ? (
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}> <div
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>โน็ต</div> style={{ display: "flex", flexDirection: "column", gap: 5 }}
<div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{profile.note}</div> >
<div
style={{
display: "flex",
color: "#b9b9c2",
fontSize: 14,
fontWeight: 700,
}}
>
โน็ต
</div>
<div
style={{
display: "flex",
fontSize: 14,
lineHeight: 1.55,
}}
>
{profile.note}
</div>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -297,7 +753,10 @@ export async function GET(
fonts: fonts.length ? fonts : undefined, fonts: fonts.length ? fonts : undefined,
headers: { headers: {
"Cache-Control": "no-store", "Cache-Control": "no-store",
"Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"), "Content-Disposition": imageContentDisposition(
`${guide.guideName}-Artifact`,
"artifacts",
),
"Content-Type": "image/png", "Content-Type": "image/png",
}, },
}, },
app/api/guides/[guideId]/weapons/image/route.tsx
+167 -24
View File
@@ -16,7 +16,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(),
@@ -58,9 +59,19 @@ export async function GET(
anuphanFonts, anuphanFonts,
Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))), Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
]); ]);
const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0))); const weaponHeights = guide.weapons.map((row) =>
const noteHeight = guide.note ? Math.max(24, Math.ceil(guide.note.length / 70) * 22) : 0; Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)),
const height = Math.max(360, 190 + noteHeight + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14); );
const noteHeight = guide.note
? Math.max(24, Math.ceil(guide.note.length / 70) * 22)
: 0;
const height = Math.max(
360,
190 +
noteHeight +
weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
Math.max(0, guide.weapons.length - 1) * 14,
);
return new ImageResponse( return new ImageResponse(
<div <div
@@ -77,11 +88,52 @@ export async function GET(
position: "relative", position: "relative",
}} }}
> >
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}> <div
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}> style={{
<div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div> position: "relative",
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>อาวุธ</div> zIndex: 1,
{guide.note ? <div style={{ display: "flex", maxWidth: 760, color: "#b9b9c2", fontSize: 16, lineHeight: 1.4, textAlign: "center" }}>{guide.note}</div> : null} display: "flex",
flex: 1,
flexDirection: "column",
gap: 14,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 8,
marginBottom: 6,
}}
>
<div
style={{
display: "flex",
color: "#f0b72f",
fontSize: 16,
fontWeight: 700,
}}
>
อาวุธที่แนะนำ
</div>
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
Weapons
</div>
{guide.note ? (
<div
style={{
display: "flex",
maxWidth: 760,
color: "#b9b9c2",
fontSize: 16,
lineHeight: 1.4,
textAlign: "center",
}}
>
{guide.note}
</div>
) : null}
</div> </div>
{guide.weapons.map((row, index) => ( {guide.weapons.map((row, index) => (
<div <div
@@ -90,8 +142,9 @@ export async function GET(
display: "flex", display: "flex",
minHeight: weaponHeights[index], minHeight: weaponHeights[index],
overflow: "hidden", overflow: "hidden",
border: "1px solid rgba(247, 247, 247, 0.1)",
borderRadius: 14, borderRadius: 14,
background: "white", background: "#ffffff",
}} }}
> >
<div <div
@@ -106,31 +159,118 @@ export async function GET(
padding: 0, padding: 0,
}} }}
> >
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, alignItems: "center", gap: 18, padding: "10px 40px 10px 24px" }}> <div
style={{
position: "relative",
zIndex: 1,
display: "flex",
flex: 1,
alignItems: "center",
gap: 18,
padding: "10px 40px 10px 24px",
}}
>
{weaponImages[index] ? ( {weaponImages[index] ? (
<img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} /> <img
src={weaponImages[index]!}
alt=""
width={104}
height={104}
style={{ objectFit: "contain" }}
/>
) : ( ) : (
<div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div> <div
style={{
display: "flex",
width: 104,
height: 104,
alignItems: "center",
justifyContent: "center",
fontSize: 32,
}}
>
{index + 1}
</div>
)} )}
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}> <div
<div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}> style={{ display: "flex", flexDirection: "column", gap: 5 }}
>
<div
style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
>
{index + 1}. {row.weapon.name} R{row.refinement} {index + 1}. {row.weapon.name} R{row.refinement}
</div> </div>
{row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null} {row.note ? (
<div
style={{
display: "flex",
fontSize: 14,
lineHeight: 1.55,
}}
>
{row.note}
</div>
) : null}
</div> </div>
</div> </div>
</div> </div>
<div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}> <div
style={{
display: "flex",
flex: 1,
alignItems: "center",
justifyContent: "space-around",
gap: 12,
color: "#17171c",
padding: "12px 16px",
}}
>
{row.overallPercent ? ( {row.overallPercent ? (
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}> <div
<div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.overallPercent)}</div> style={{
<div style={{ display: "flex", fontSize: 14 }}>ดาเมททั้งทีม</div> display: "flex",
flex: 1,
flexDirection: "column",
alignItems: "center",
}}
>
<div
style={{
display: "flex",
color: rarityTextColor(row.weapon.rarity),
fontSize: 36,
fontWeight: 700,
}}
>
{metric(row.overallPercent)}
</div>
<div style={{ display: "flex", fontSize: 14 }}>
ดาเมททั้งทีม
</div>
</div> </div>
) : null} ) : null}
{row.personalPercent ? ( {row.personalPercent ? (
<div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}> <div
<div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.personalPercent)}</div> style={{
<div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div> display: "flex",
flex: 1,
flexDirection: "column",
alignItems: "center",
}}
>
<div
style={{
display: "flex",
color: rarityTextColor(row.weapon.rarity),
fontSize: 36,
fontWeight: 700,
}}
>
{metric(row.personalPercent)}
</div>
<div style={{ display: "flex", fontSize: 14 }}>
ดาเมจส่วนตัว
</div>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -144,7 +284,10 @@ export async function GET(
fonts: fonts.length ? fonts : undefined, fonts: fonts.length ? fonts : undefined,
headers: { headers: {
"Cache-Control": "no-store", "Cache-Control": "no-store",
"Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"), "Content-Disposition": imageContentDisposition(
`${guide.guideName}-Weapon`,
"weapons",
),
"Content-Type": "image/png", "Content-Type": "image/png",
}, },
}, },
bun.lock
+3
View File
@@ -18,6 +18,7 @@
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"ioredis": "^6.0.0", "ioredis": "^6.0.0",
"lucide-react": "^1.35.0", "lucide-react": "^1.35.0",
"modern-screenshot": "^4.7.0",
"next": "16.3.3", "next": "16.3.3",
"postgres": "^3.4.9", "postgres": "^3.4.9",
"react": "19.2.8", "react": "19.2.8",
@@ -1231,6 +1232,8 @@
"minimist": ["[email protected]", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="], "minimist": ["[email protected]", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
"modern-screenshot": ["[email protected]", "", {}, "sha512-9YxN+ddPSMMlhylOv25VHzXrl9u67QRxoh7+SEewGtgUw7t6hHTrjptSDJUSne9oG4Xk/h2cwG15nIt4Hc9ujg=="],
"ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
"nanoid": ["[email protected]", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w=="], "nanoid": ["[email protected]", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w=="],
components/public/structured-guide.tsx
+1 -1
View File
@@ -270,7 +270,7 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
<header className="flex flex-col items-center gap-3 text-center"> <header className="flex flex-col items-center gap-3 text-center">
<p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p> <p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
<h1 className="whitespace-nowrap font-heading text-4xl font-semibold"> <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
อาวุธ Weapons
</h1> </h1>
{note ? ( {note ? (
<p className="max-w-3xl whitespace-pre-wrap text-muted-foreground"> <p className="max-w-3xl whitespace-pre-wrap text-muted-foreground">
package.json
+1
View File
@@ -32,6 +32,7 @@
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"ioredis": "^6.0.0", "ioredis": "^6.0.0",
"lucide-react": "^1.35.0", "lucide-react": "^1.35.0",
"modern-screenshot": "^4.7.0",
"next": "16.3.3", "next": "16.3.3",
"postgres": "^3.4.9", "postgres": "^3.4.9",
"react": "19.2.8", "react": "19.2.8",