feat : update
This commit is contained in:
@@ -8,8 +8,18 @@ import { rarityGradient } from "@/lib/catalog/rarity";
|
||||
import { artifactTierCount } from "@/lib/guides/artifacts";
|
||||
import { getCachedPublicArtifactExport } from "@/lib/cache/public";
|
||||
import { imageContentDisposition } from "@/lib/guides/export-image";
|
||||
import { normalizeTargetStat, recommendedStatIconName, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
|
||||
import { normalizeTalentPriorities, talentRelationSymbol, talentTypeLabel } from "@/lib/guides/talents";
|
||||
import {
|
||||
normalizeTargetStat,
|
||||
recommendedStatIconName,
|
||||
statPriorityColor,
|
||||
targetStatIconName,
|
||||
targetStatOptions,
|
||||
} from "@/lib/guides/stats";
|
||||
import {
|
||||
normalizeTalentPriorities,
|
||||
talentRelationSymbol,
|
||||
talentTypeLabel,
|
||||
} from "@/lib/guides/talents";
|
||||
|
||||
const anuphanFonts = Promise.all(
|
||||
[
|
||||
@@ -21,7 +31,8 @@ const anuphanFonts = Promise.all(
|
||||
const response = await fetch(
|
||||
`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 {
|
||||
name: "Anuphan",
|
||||
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));
|
||||
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()
|
||||
.toBuffer();
|
||||
return `data:image/png;base64,${png.toString("base64")}`;
|
||||
@@ -93,46 +110,88 @@ export async function GET(
|
||||
if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
|
||||
const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
|
||||
|
||||
const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
|
||||
anuphanFonts,
|
||||
Promise.all(
|
||||
guide.groups.map((group) =>
|
||||
Promise.all(
|
||||
group.rows.map(async (row) => ({
|
||||
first: await pngDataUrl(row.first.imageUrl),
|
||||
second: row.second ? await pngDataUrl(row.second.imageUrl) : null,
|
||||
})),
|
||||
const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] =
|
||||
await Promise.all([
|
||||
anuphanFonts,
|
||||
Promise.all(
|
||||
guide.groups.map((group) =>
|
||||
Promise.all(
|
||||
group.rows.map(async (row) => ({
|
||||
first: await pngDataUrl(row.first.imageUrl),
|
||||
second: row.second ? await pngDataUrl(row.second.imageUrl) : null,
|
||||
})),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Promise.all([
|
||||
localPngDataUrl("Icon_Sands_of_Eon.webp"),
|
||||
localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
|
||||
localPngDataUrl("Icon_Circlet_of_Logos.webp"),
|
||||
]),
|
||||
Promise.all(talents.map((talent) => {
|
||||
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`, 96, true))),
|
||||
]);
|
||||
Promise.all([
|
||||
localPngDataUrl("Icon_Sands_of_Eon.webp"),
|
||||
localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
|
||||
localPngDataUrl("Icon_Circlet_of_Logos.webp"),
|
||||
]),
|
||||
Promise.all(
|
||||
talents.map((talent) => {
|
||||
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`, 96, true),
|
||||
),
|
||||
),
|
||||
]);
|
||||
|
||||
const profile = guide.profile;
|
||||
const recommendedStatAsset = (value: string) => {
|
||||
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;
|
||||
};
|
||||
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 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 groupRowHeights = guide.groups.map((group) =>
|
||||
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
|
||||
? 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;
|
||||
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;
|
||||
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;
|
||||
const leftHeight = tierListHeight + (profile ? profileHeight + 16 : 0);
|
||||
const rightHeight = detailHeight > 60 ? detailHeight : 0;
|
||||
@@ -153,142 +212,539 @@ export async function GET(
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div style={{ 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
|
||||
style={{
|
||||
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 style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
|
||||
Artifact & Stats
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
|
||||
อาร์ติแฟกต์และค่าสถานะ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
|
||||
<div style={{ display: "flex", flex: detailHeight > 60 ? 1.2 : 1, flexDirection: "column", gap: 16 }}>
|
||||
{guide.groups.map((group, groupIndex) => (
|
||||
<div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: detailHeight > 60 ? 1.2 : 1,
|
||||
flexDirection: "column",
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
{guide.groups.map((group, groupIndex) => (
|
||||
<div
|
||||
key={group.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
border: "1px solid #34343d",
|
||||
borderRadius: 14,
|
||||
background: "#1d1d25",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "16px 20px",
|
||||
fontSize: 22,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{group.name === "Late Game" ? "เลทเกม" : group.name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "0 20px 14px",
|
||||
}}
|
||||
>
|
||||
{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
|
||||
style={{ display: "flex", width: row.second ? 94 : 58 }}
|
||||
>
|
||||
{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),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={groupAssets[groupIndex][rowIndex].first!}
|
||||
alt=""
|
||||
width={58}
|
||||
height={58}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{row.second &&
|
||||
groupAssets[groupIndex][rowIndex].second ? (
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{artifactTierCount(row.second?.name ?? null)}{" "}
|
||||
{row.first.name}
|
||||
{row.second ? ` + ${row.second.name}` : ""}
|
||||
</div>
|
||||
{row.note ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#b9b9c2",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.55,
|
||||
}}
|
||||
>
|
||||
{row.note}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#f0b72f",
|
||||
fontSize: 26,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{Number(row.percent) === 0 ? "-%" : metric(row.percent)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{profile ? (
|
||||
<div
|
||||
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 style={{ display: "flex" }}>
|
||||
{[
|
||||
{
|
||||
label: "นาฬิกา",
|
||||
values: profile.sands,
|
||||
icon: statIconAssets[0],
|
||||
},
|
||||
{
|
||||
label: "ถ้วย",
|
||||
values: profile.goblet,
|
||||
icon: statIconAssets[1],
|
||||
},
|
||||
{
|
||||
label: "หัว",
|
||||
values: profile.circlet,
|
||||
icon: statIconAssets[2],
|
||||
},
|
||||
].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",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
) : null}
|
||||
|
||||
{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",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{profile && detailHeight > 60 ? (
|
||||
<div
|
||||
key={group.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
border: "1px solid #34343d",
|
||||
borderRadius: 14,
|
||||
background: "#1d1d25",
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}>
|
||||
{group.name === "Late Game" ? "เลทเกม" : group.name}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
|
||||
{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 style={{ display: "flex", width: row.second ? 94 : 58 }}>
|
||||
{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) }}>
|
||||
<img src={groupAssets[groupIndex][rowIndex].first!} alt="" width={58} height={58} style={{ objectFit: "contain" }} />
|
||||
</div>
|
||||
) : null}
|
||||
{row.second && groupAssets[groupIndex][rowIndex].second ? (
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}>
|
||||
{artifactTierCount(row.second?.name ?? null)}{" "}
|
||||
{row.first.name}{row.second ? ` + ${row.second.name}` : ""}
|
||||
</div>
|
||||
{row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
|
||||
</div>
|
||||
<div style={{ display: "flex", color: "#f0b72f", fontSize: 26, fontWeight: 700 }}>
|
||||
{Number(row.percent) === 0 ? "-%" : metric(row.percent)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{profile ? (
|
||||
<div 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 style={{ display: "flex" }}>
|
||||
{[
|
||||
{ label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] },
|
||||
{ label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] },
|
||||
{ label: "หัว", values: profile.circlet, icon: statIconAssets[2] },
|
||||
].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" }}>
|
||||
<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>
|
||||
) : null}
|
||||
|
||||
{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" }}>
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{profile && detailHeight > 60 ? (
|
||||
<div style={{ 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" }}>
|
||||
<div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
border: "1px solid #34343d",
|
||||
borderRadius: 14,
|
||||
background: "#1d1d25",
|
||||
padding: "18px 20px",
|
||||
}}
|
||||
>
|
||||
{profile.targets.length ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
|
||||
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 7 }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#b9b9c2",
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
ค่าสถานะต่ำๆที่ควรจะปั้นไว้
|
||||
</div>
|
||||
{profile.targets.map((target, index) => {
|
||||
const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
|
||||
const iconIndex = targetStatOptions.findIndex(
|
||||
(stat) => stat === normalizeTargetStat(target.stat),
|
||||
);
|
||||
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 }}>
|
||||
<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
|
||||
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>
|
||||
) : null}
|
||||
{talents.length ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ลำดับการอัพพรสวรรค์</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 17, fontWeight: 700 }}>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 6 }}
|
||||
>
|
||||
<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) => (
|
||||
<div key={talent.type} style={{ display: "flex", 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 style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
|
||||
<div
|
||||
key={talent.type}
|
||||
style={{
|
||||
display: "flex",
|
||||
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
|
||||
style={{
|
||||
color: "#b9b9c2",
|
||||
fontSize: 13,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{talentTypeLabel(talent.type)}
|
||||
</span>
|
||||
</span>
|
||||
{index < talents.length - 1 ? <span>{talentRelationSymbol(talent.relationToNext)}</span> : null}
|
||||
{index < talents.length - 1 ? (
|
||||
<span>
|
||||
{talentRelationSymbol(talent.relationToNext)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{profile.note ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>โน็ต</div>
|
||||
<div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{profile.note}</div>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 5 }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
color: "#b9b9c2",
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
โน็ต
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.55,
|
||||
}}
|
||||
>
|
||||
{profile.note}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
@@ -297,7 +753,10 @@ export async function GET(
|
||||
fonts: fonts.length ? fonts : undefined,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
"Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"),
|
||||
"Content-Disposition": imageContentDisposition(
|
||||
`${guide.guideName}-Artifact`,
|
||||
"artifacts",
|
||||
),
|
||||
"Content-Type": "image/png",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -16,7 +16,8 @@ const anuphanFonts = Promise.all(
|
||||
const response = await fetch(
|
||||
`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 {
|
||||
name: "Anuphan",
|
||||
data: await response.arrayBuffer(),
|
||||
@@ -58,9 +59,19 @@ export async function GET(
|
||||
anuphanFonts,
|
||||
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 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);
|
||||
const weaponHeights = guide.weapons.map((row) =>
|
||||
Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)),
|
||||
);
|
||||
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(
|
||||
<div
|
||||
@@ -77,65 +88,194 @@ export async function GET(
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", zIndex: 1, 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 }}>อาวุธ</div>
|
||||
{guide.note ? <div style={{ display: "flex", maxWidth: 760, color: "#b9b9c2", fontSize: 16, lineHeight: 1.4, textAlign: "center" }}>{guide.note}</div> : null}
|
||||
</div>
|
||||
{guide.weapons.map((row, index) => (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
key={row.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
borderRadius: 14,
|
||||
background: "white",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flex: 3,
|
||||
overflow: "hidden",
|
||||
borderBottomRightRadius: 80,
|
||||
background: rarityGradient(row.weapon.rarity),
|
||||
color: "white",
|
||||
padding: 0,
|
||||
color: "#f0b72f",
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, alignItems: "center", gap: 18, padding: "10px 40px 10px 24px" }}>
|
||||
{weaponImages[index] ? (
|
||||
<img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
|
||||
) : (
|
||||
<div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
|
||||
)}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
อาวุธที่แนะนำ
|
||||
</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>
|
||||
{guide.weapons.map((row, index) => (
|
||||
<div
|
||||
key={row.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(247, 247, 247, 0.1)",
|
||||
borderRadius: 14,
|
||||
background: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flex: 3,
|
||||
overflow: "hidden",
|
||||
borderBottomRightRadius: 80,
|
||||
background: rarityGradient(row.weapon.rarity),
|
||||
color: "white",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
gap: 18,
|
||||
padding: "10px 40px 10px 24px",
|
||||
}}
|
||||
>
|
||||
{weaponImages[index] ? (
|
||||
<img
|
||||
src={weaponImages[index]!}
|
||||
alt=""
|
||||
width={104}
|
||||
height={104}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
) : (
|
||||
<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
|
||||
style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
|
||||
>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
</div>
|
||||
{row.note ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.55,
|
||||
}}
|
||||
>
|
||||
{row.note}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: 12,
|
||||
color: "#17171c",
|
||||
padding: "12px 16px",
|
||||
}}
|
||||
>
|
||||
{row.overallPercent ? (
|
||||
<div
|
||||
style={{
|
||||
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>
|
||||
) : null}
|
||||
{row.personalPercent ? (
|
||||
<div
|
||||
style={{
|
||||
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>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}>
|
||||
{row.overallPercent ? (
|
||||
<div style={{ 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>
|
||||
) : null}
|
||||
{row.personalPercent ? (
|
||||
<div style={{ 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>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
@@ -144,7 +284,10 @@ export async function GET(
|
||||
fonts: fonts.length ? fonts : undefined,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
"Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"),
|
||||
"Content-Disposition": imageContentDisposition(
|
||||
`${guide.guideName}-Weapon`,
|
||||
"weapons",
|
||||
),
|
||||
"Content-Type": "image/png",
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user