feat : update
This commit is contained in:
@@ -1,432 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { ImageResponse } from "next/og";
|
||||
import sharp from "sharp";
|
||||
|
||||
import { elementBackgroundColor } from "@/lib/catalog/element";
|
||||
import { rarityGradient } from "@/lib/catalog/rarity";
|
||||
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
|
||||
import { getCachedPublicTeamExport } from "@/lib/cache/public";
|
||||
import { imageContentDisposition } from "@/lib/guides/export-image";
|
||||
|
||||
const anuphanFonts = Promise.all(
|
||||
[
|
||||
{ subset: "latin", weight: 400 as const },
|
||||
{ subset: "thai", weight: 400 as const },
|
||||
{ subset: "latin", weight: 700 as const },
|
||||
{ subset: "thai", weight: 700 as const },
|
||||
].map(async ({ subset, weight }) => {
|
||||
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}`);
|
||||
return {
|
||||
name: "Anuphan",
|
||||
data: await response.arrayBuffer(),
|
||||
weight,
|
||||
style: "normal" as const,
|
||||
};
|
||||
}),
|
||||
).catch(() => []);
|
||||
|
||||
function amount(value: number): string {
|
||||
return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(
|
||||
value,
|
||||
);
|
||||
}
|
||||
|
||||
async function pngDataUrl(url: string): Promise<string | null> {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) return null;
|
||||
const png = await sharp(Buffer.from(await response.arrayBuffer()))
|
||||
.resize(300, 300, { fit: "cover" })
|
||||
.png()
|
||||
.toBuffer();
|
||||
return `data:image/png;base64,${png.toString("base64")}`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
_request: Request,
|
||||
context: RouteContext<"/api/teams/[teamId]/image">,
|
||||
) {
|
||||
const { teamId } = await context.params;
|
||||
const team = await getCachedPublicTeamExport(teamId);
|
||||
if (!team) return new Response("ไม่พบทีม", { status: 404 });
|
||||
|
||||
const total = team.members.reduce(
|
||||
(sum, member) => sum + Number(member.damage),
|
||||
0,
|
||||
);
|
||||
const seconds = Number(team.rotationSeconds);
|
||||
const dps = seconds > 0 ? total / seconds : 0;
|
||||
const [fonts, memberAssets] = await Promise.all([
|
||||
anuphanFonts,
|
||||
Promise.all(
|
||||
team.members.map(async (member) => {
|
||||
const [character, weapon, artifact, secondArtifact] = await Promise.all(
|
||||
[
|
||||
pngDataUrl(member.character.imageUrl),
|
||||
member.weapon ? pngDataUrl(member.weapon.imageUrl) : null,
|
||||
member.artifact ? pngDataUrl(member.artifact.imageUrl) : null,
|
||||
member.secondArtifact
|
||||
? pngDataUrl(member.secondArtifact.imageUrl)
|
||||
: null,
|
||||
],
|
||||
);
|
||||
return { character, weapon, artifact, secondArtifact };
|
||||
}),
|
||||
),
|
||||
]);
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
color: "#f7f7f7",
|
||||
background: "#05060a",
|
||||
border: "3px solid #34343d",
|
||||
padding: "48px 52px",
|
||||
fontFamily: "Anuphan",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
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
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 24,
|
||||
marginTop: 24,
|
||||
}}
|
||||
>
|
||||
{team.members.map((member, index) => {
|
||||
const damage = Number(member.damage);
|
||||
const percent = total > 0 ? (damage / total) * 100 : 0;
|
||||
return (
|
||||
<div
|
||||
key={member.position}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 24,
|
||||
borderRadius: 24,
|
||||
background: elementBackgroundColor(member.character.element),
|
||||
padding: 14,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
width: 150,
|
||||
height: 150,
|
||||
flexShrink: 0,
|
||||
overflow: "hidden",
|
||||
borderRadius: 24,
|
||||
border: "3px solid #ffffff2a",
|
||||
background: rarityGradient(
|
||||
isCustomTravelerKey(member.character.key)
|
||||
? 5
|
||||
: member.character.rarity,
|
||||
),
|
||||
}}
|
||||
>
|
||||
{memberAssets[index].character ? (
|
||||
<img
|
||||
src={memberAssets[index].character}
|
||||
alt=""
|
||||
width={150}
|
||||
height={150}
|
||||
style={{ objectFit: "cover" }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 150,
|
||||
height: 150,
|
||||
alignItems: "center",
|
||||
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", 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}
|
||||
{member.secondArtifact &&
|
||||
memberAssets[index].secondArtifact ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 96,
|
||||
height: 96,
|
||||
overflow: "hidden",
|
||||
borderRadius: 16,
|
||||
background: rarityGradient(
|
||||
member.secondArtifact.rarity,
|
||||
),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={memberAssets[index].secondArtifact}
|
||||
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: 36,
|
||||
}}
|
||||
>
|
||||
{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
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 10,
|
||||
margin: "20px 0",
|
||||
borderRadius: 16,
|
||||
background: "#272730",
|
||||
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", fontSize: 64, fontWeight: 700 }}>
|
||||
DPS: {amount(dps)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginTop: 22,
|
||||
color: "#74747f",
|
||||
fontSize: 40,
|
||||
}}
|
||||
>
|
||||
By YT เกนชินไม่ใช่เกมมือถือ
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
width: 1080,
|
||||
height: 1350,
|
||||
fonts: fonts.length ? fonts : undefined,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
"Content-Disposition": imageContentDisposition(team.title, "team"),
|
||||
"Content-Type": "image/png",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -53,11 +53,9 @@ export function ConstellationImage({
|
||||
>
|
||||
{guide.character.name} Constellations
|
||||
</h2>
|
||||
{sectionNote ? (
|
||||
<p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
|
||||
{sectionNote}
|
||||
Team Damage
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -899,8 +899,6 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
||||
</header>
|
||||
{guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
|
||||
<div key={group.id} className="flex flex-col gap-4">
|
||||
{groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">Condition {groupIndex + 1}</h2> : null}
|
||||
{group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
|
||||
<div>
|
||||
<GuideImageExport
|
||||
fileName={`${guide.name}-Constellations${groups.length > 1 ? `-Condition-${groupIndex + 1}` : ""}.png`}
|
||||
@@ -915,6 +913,8 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
||||
/>
|
||||
</GuideImageExport>
|
||||
</div>
|
||||
{groups.length > 1 ? <h2 className="font-heading text-2xl font-semibold">Condition {groupIndex + 1}</h2> : null}
|
||||
{group.note ? <p className="whitespace-pre-wrap">{group.note}</p> : null}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{group.rows.map((row) => (
|
||||
<Card key={row.level}>
|
||||
|
||||
+221
-172
@@ -2,10 +2,10 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRightIcon, DownloadIcon, SearchIcon } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { ArrowUpRightIcon, SearchIcon } from "lucide-react";
|
||||
import { useMemo, useState, type ReactNode } from "react";
|
||||
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { GuideImageExport } from "@/components/public/guide-image-export";
|
||||
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Kbd } from "@/components/ui/kbd";
|
||||
@@ -16,6 +16,213 @@ import { isCustomTravelerKey } from "@/lib/catalog/travelers";
|
||||
import type { PublicGuide } from "@/lib/guides/queries";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Team = PublicGuide["teams"][number];
|
||||
|
||||
function TeamCard({
|
||||
team,
|
||||
action,
|
||||
exporting = false,
|
||||
}: {
|
||||
team: Team;
|
||||
action?: ReactNode;
|
||||
exporting?: boolean;
|
||||
}) {
|
||||
const total = team.members.reduce(
|
||||
(sum, member) => sum + Number(member.damage),
|
||||
0,
|
||||
);
|
||||
const seconds = Number(team.rotationSeconds);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{team.title}</CardTitle>
|
||||
<CardDescription>โรเทชั่น {seconds} วิ</CardDescription>
|
||||
{action ? <CardAction>{action}</CardAction> : null}
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-4",
|
||||
exporting ? "gap-3" : "gap-1 sm:gap-3",
|
||||
)}
|
||||
>
|
||||
{team.members.map((member) => (
|
||||
<div
|
||||
key={member.position}
|
||||
className={cn(
|
||||
"min-w-0 rounded-lg text-center",
|
||||
exporting ? "p-2" : "p-1 sm:p-2",
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: elementBackgroundColor(
|
||||
member.character.element,
|
||||
),
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"gap-2",
|
||||
exporting
|
||||
? "grid grid-cols-3"
|
||||
: "flex flex-col sm:grid sm:grid-cols-3",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"relative aspect-square min-h-0 overflow-hidden rounded-lg bg-muted",
|
||||
exporting
|
||||
? "col-span-2 row-span-2"
|
||||
: "sm:col-span-2 sm:row-span-2",
|
||||
rarityGradientClass(
|
||||
isCustomTravelerKey(member.character.key)
|
||||
? 5
|
||||
: member.character.rarity,
|
||||
),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.character.imageUrl}
|
||||
alt={member.character.name}
|
||||
fill
|
||||
loading={exporting ? "eager" : undefined}
|
||||
className="object-contain"
|
||||
/>
|
||||
<Kbd className="absolute top-0 left-0 bg-transparent text-white">
|
||||
C{member.constellation}
|
||||
</Kbd>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"min-w-0 gap-2",
|
||||
exporting
|
||||
? "col-span-1 row-span-2 flex flex-col"
|
||||
: "grid grid-cols-2 sm:col-span-1 sm:row-span-2 sm:flex sm:flex-col",
|
||||
)}
|
||||
>
|
||||
{member.weapon ? (
|
||||
<a
|
||||
href={`https://lunaris.moe/weapon/${encodeURIComponent(member.weapon.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabIndex={exporting ? -1 : undefined}
|
||||
aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted outline-none",
|
||||
rarityGradientClass(member.weapon.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.weapon.imageUrl}
|
||||
alt={member.weapon.name}
|
||||
fill
|
||||
loading={exporting ? "eager" : undefined}
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 left-0 h-4 min-w-4 whitespace-nowrap bg-transparent px-0.5 text-[9px] text-white">
|
||||
R{member.refinement}
|
||||
</Kbd>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</a>
|
||||
) : (
|
||||
<div className="aspect-square rounded-md border bg-muted" />
|
||||
)}
|
||||
{member.artifact ? (
|
||||
<Link
|
||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabIndex={exporting ? -1 : undefined}
|
||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
||||
rarityGradientClass(member.artifact.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.artifact.imageUrl}
|
||||
alt={member.artifact.name}
|
||||
fill
|
||||
loading={exporting ? "eager" : undefined}
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="aspect-square rounded-md border bg-muted" />
|
||||
)}
|
||||
{member.secondArtifact ? (
|
||||
<Link
|
||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabIndex={exporting ? -1 : undefined}
|
||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
||||
rarityGradientClass(member.secondArtifact.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.secondArtifact.imageUrl}
|
||||
alt={member.secondArtifact.name}
|
||||
fill
|
||||
loading={exporting ? "eager" : undefined}
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 truncate text-sm font-medium">
|
||||
{member.character.name}
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{Number(member.damage).toLocaleString(undefined, {
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{total
|
||||
? ((Number(member.damage) / total) * 100).toFixed(2)
|
||||
: "0.00"}
|
||||
%
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">ดาเมจรวม</p>
|
||||
<p className="font-semibold">{total.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">DPS</p>
|
||||
<p className="text-3xl font-semibold text-primary">
|
||||
{seconds > 0
|
||||
? (total / seconds).toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
: "0"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="rounded-lg bg-muted p-3 text-sm leading-6">
|
||||
{team.combo}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const normalizedQuery = query.trim().toLocaleLowerCase();
|
||||
@@ -50,175 +257,17 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
|
||||
</div>
|
||||
{filteredTeams.length ? (
|
||||
<div className="grid gap-5 xl:grid-cols-2">
|
||||
{filteredTeams.map((team) => {
|
||||
const total = team.members.reduce(
|
||||
(sum, member) => sum + Number(member.damage),
|
||||
0,
|
||||
);
|
||||
const seconds = Number(team.rotationSeconds);
|
||||
return (
|
||||
<Card key={team.id}>
|
||||
<CardHeader>
|
||||
<CardTitle>{team.title}</CardTitle>
|
||||
<CardDescription>โรเทชั่น {seconds} วิ</CardDescription>
|
||||
<CardAction>
|
||||
<a
|
||||
href={`/api/teams/${team.id}/image`}
|
||||
download
|
||||
className={buttonVariants({
|
||||
variant: "outline",
|
||||
size: "sm",
|
||||
})}
|
||||
>
|
||||
<DownloadIcon data-icon="inline-start" />
|
||||
ส่งออกภาพ
|
||||
</a>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<div className="grid grid-cols-4 gap-1 sm:gap-3">
|
||||
{team.members.map((member) => (
|
||||
<div
|
||||
key={member.position}
|
||||
className="min-w-0 rounded-lg p-1 text-center sm:p-2"
|
||||
style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
|
||||
>
|
||||
<div className="flex flex-col gap-2 sm:grid sm:grid-cols-3">
|
||||
<div
|
||||
className={cn(
|
||||
"relative aspect-square min-h-0 overflow-hidden rounded-lg bg-muted sm:col-span-2 sm:row-span-2",
|
||||
rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.character.imageUrl}
|
||||
alt={member.character.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
<Kbd className="absolute top-0 left-0 bg-transparent text-white">
|
||||
C{member.constellation}
|
||||
</Kbd>
|
||||
</div>
|
||||
<div className="grid min-w-0 grid-cols-2 gap-2 sm:col-span-1 sm:row-span-2 sm:flex sm:flex-col">
|
||||
{member.weapon ? (
|
||||
<a
|
||||
href={`https://lunaris.moe/weapon/${encodeURIComponent(member.weapon.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted outline-none",
|
||||
rarityGradientClass(member.weapon.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.weapon.imageUrl}
|
||||
alt={member.weapon.name}
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 left-0 h-4 min-w-4 whitespace-nowrap bg-transparent px-0.5 text-[9px] text-white">
|
||||
R{member.refinement}
|
||||
</Kbd>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</a>
|
||||
) : (
|
||||
<div className="aspect-square rounded-md border bg-muted" />
|
||||
)}
|
||||
{member.artifact ? (
|
||||
<Link
|
||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
||||
rarityGradientClass(member.artifact.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.artifact.imageUrl}
|
||||
alt={member.artifact.name}
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="aspect-square rounded-md border bg-muted" />
|
||||
)}
|
||||
{member.secondArtifact ? (
|
||||
<Link
|
||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"relative aspect-square overflow-hidden rounded-md bg-muted",
|
||||
rarityGradientClass(member.secondArtifact.rarity),
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src={member.secondArtifact.imageUrl}
|
||||
alt={member.secondArtifact.name}
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||
<ArrowUpRightIcon aria-hidden="true" />
|
||||
</Kbd>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 truncate text-sm font-medium">
|
||||
{member.character.name}
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{Number(member.damage).toLocaleString(undefined, {
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{total
|
||||
? ((Number(member.damage) / total) * 100).toFixed(2)
|
||||
: "0.00"}
|
||||
%
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
ดาเมจรวม
|
||||
</p>
|
||||
<p className="font-semibold">{total.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">DPS</p>
|
||||
<p className="text-3xl font-semibold text-primary">
|
||||
{seconds > 0
|
||||
? (total / seconds).toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
: "0"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="rounded-lg bg-muted p-3 text-sm leading-6">
|
||||
{team.combo}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{filteredTeams.map((team) => (
|
||||
<TeamCard
|
||||
key={team.id}
|
||||
team={team}
|
||||
action={
|
||||
<GuideImageExport fileName={`${team.title}.png`}>
|
||||
<TeamCard team={team} exporting />
|
||||
</GuideImageExport>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
|
||||
Vendored
+1
-13
@@ -3,11 +3,7 @@ import "server-only";
|
||||
import { cacheLife, cacheTag } from "next/cache";
|
||||
|
||||
import { getPublicPage, listPublicCharacters } from "@/lib/content/queries";
|
||||
import {
|
||||
getPublicGuide,
|
||||
getPublicTeamExport,
|
||||
listGuideCards,
|
||||
} from "@/lib/guides/queries";
|
||||
import { getPublicGuide, listGuideCards } from "@/lib/guides/queries";
|
||||
import {
|
||||
characterCacheTag,
|
||||
dataSourceCacheTag,
|
||||
@@ -61,11 +57,3 @@ export async function getCachedPublicGuide(slug: string) {
|
||||
if (result) cacheTag(pageCacheTag(result.id));
|
||||
return result;
|
||||
}
|
||||
|
||||
export async function getCachedPublicTeamExport(teamId: string) {
|
||||
"use cache: remote";
|
||||
cacheLife({ stale: 15, revalidate: 60, expire: 60 * 60 });
|
||||
const result = await getPublicTeamExport(teamId);
|
||||
if (result) cacheTag(pageCacheTag(result.guideId));
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,8 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
constellationChartRows,
|
||||
imageContentDisposition,
|
||||
} from "@/lib/guides/export-image";
|
||||
import { constellationChartRows } from "@/lib/guides/export-image";
|
||||
|
||||
describe("guide image downloads", () => {
|
||||
it("provides a safe ASCII fallback and a UTF-8 filename", () => {
|
||||
expect(imageContentDisposition("ไกด์อาวุธ", "weapons")).toBe(
|
||||
"attachment; filename=\"weapons.png\"; filename*=UTF-8''%E0%B9%84%E0%B8%81%E0%B8%94%E0%B9%8C%E0%B8%AD%E0%B8%B2%E0%B8%A7%E0%B8%B8%E0%B8%98.png",
|
||||
);
|
||||
});
|
||||
|
||||
it("sanitizes punctuation in the fallback filename", () => {
|
||||
expect(imageContentDisposition("Arlecchino / R5", "weapons")).toContain(
|
||||
'filename="Arlecchino-R5.png"',
|
||||
);
|
||||
});
|
||||
|
||||
it("orders constellation levels, adds C0, and scales against the maximum", () => {
|
||||
const rows = constellationChartRows([
|
||||
{ level: 1, cumulativePercent: "117", isGreat: false },
|
||||
|
||||
@@ -1,16 +1,3 @@
|
||||
export function imageContentDisposition(displayName: string, fallbackName: string): string {
|
||||
const safeDisplayName = displayName.trim() || fallbackName;
|
||||
const fallback = safeDisplayName
|
||||
.normalize("NFKD")
|
||||
.replace(/[^a-z0-9]+/giu, "-")
|
||||
.replace(/^-|-$/gu, "") || fallbackName;
|
||||
const encoded = encodeURIComponent(`${safeDisplayName}.png`).replace(
|
||||
/['()*]/gu,
|
||||
(character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`,
|
||||
);
|
||||
return `attachment; filename="${fallback}.png"; filename*=UTF-8''${encoded}`;
|
||||
}
|
||||
|
||||
export interface ConstellationChartRow {
|
||||
level: number;
|
||||
percent: number;
|
||||
|
||||
@@ -142,57 +142,4 @@ export async function getPublicGuide(slug: string) {
|
||||
};
|
||||
}
|
||||
|
||||
export async function getPublicTeamExport(teamId: string) {
|
||||
const [row] = await getDb()
|
||||
.select({ team: teamCompositions, guide: guides })
|
||||
.from(teamCompositions)
|
||||
.innerJoin(guides, eq(guides.id, teamCompositions.guideId))
|
||||
.innerJoin(
|
||||
guideSections,
|
||||
and(
|
||||
eq(guideSections.guideId, guides.id),
|
||||
eq(guideSections.slug, "team"),
|
||||
eq(guideSections.enabled, true),
|
||||
),
|
||||
)
|
||||
.where(and(eq(teamCompositions.id, teamId), isNull(guides.trashedAt)))
|
||||
.limit(1);
|
||||
if (!row) return null;
|
||||
|
||||
const members = await getDb()
|
||||
.select({ member: teamMembers, character: catalogCharacters })
|
||||
.from(teamMembers)
|
||||
.innerJoin(
|
||||
catalogCharacters,
|
||||
eq(catalogCharacters.key, teamMembers.characterKey),
|
||||
)
|
||||
.where(eq(teamMembers.teamId, teamId))
|
||||
.orderBy(asc(teamMembers.position));
|
||||
|
||||
const weaponKeys = members.map(({ member }) => member.weaponKey).filter((key): key is string => Boolean(key));
|
||||
const artifactKeys = members.flatMap(({ member }) => [member.artifactKey, member.secondArtifactKey]).filter((key): key is string => Boolean(key));
|
||||
const [weapons, artifacts] = await Promise.all([
|
||||
weaponKeys.length ? getDb().select().from(catalogWeapons).where(inArray(catalogWeapons.key, weaponKeys)) : [],
|
||||
artifactKeys.length ? getDb().select().from(catalogArtifacts).where(inArray(catalogArtifacts.key, artifactKeys)) : [],
|
||||
]);
|
||||
|
||||
return {
|
||||
...row.team,
|
||||
guideId: row.guide.id,
|
||||
guideName: row.guide.name,
|
||||
members: members.map(({ member, character }) => {
|
||||
const weapon = weapons.find((item) => item.key === member.weaponKey);
|
||||
const artifact = artifacts.find((item) => item.key === member.artifactKey);
|
||||
const secondArtifact = artifacts.find((item) => item.key === member.secondArtifactKey);
|
||||
return {
|
||||
...member,
|
||||
character: catalogCharacterWithUrls(character),
|
||||
weapon: weapon ? { ...weapon, imageUrl: publicMediaUrl(weapon.imageKey) } : null,
|
||||
artifact: artifact ? { ...artifact, imageUrl: publicMediaUrl(artifact.imageKey) } : null,
|
||||
secondArtifact: secondArtifact ? { ...secondArtifact, imageUrl: publicMediaUrl(secondArtifact.imageKey) } : null,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
export type PublicGuide = NonNullable<Awaited<ReturnType<typeof getPublicGuide>>>;
|
||||
|
||||
Reference in New Issue
Block a user