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
|
{guide.character.name} Constellations
|
||||||
</h2>
|
</h2>
|
||||||
{sectionNote ? (
|
|
||||||
<p className="mt-3 line-clamp-2 max-w-[1100px] whitespace-pre-line text-[42px] leading-tight font-bold text-[#f1badd]">
|
<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>
|
</p>
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -899,8 +899,6 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
|||||||
</header>
|
</header>
|
||||||
{guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
|
{guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
|
||||||
<div key={group.id} className="flex flex-col gap-4">
|
<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>
|
<div>
|
||||||
<GuideImageExport
|
<GuideImageExport
|
||||||
fileName={`${guide.name}-Constellations${groups.length > 1 ? `-Condition-${groupIndex + 1}` : ""}.png`}
|
fileName={`${guide.name}-Constellations${groups.length > 1 ? `-Condition-${groupIndex + 1}` : ""}.png`}
|
||||||
@@ -915,6 +913,8 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
|
|||||||
/>
|
/>
|
||||||
</GuideImageExport>
|
</GuideImageExport>
|
||||||
</div>
|
</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">
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
{group.rows.map((row) => (
|
{group.rows.map((row) => (
|
||||||
<Card key={row.level}>
|
<Card key={row.level}>
|
||||||
|
|||||||
+221
-172
@@ -2,10 +2,10 @@
|
|||||||
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ArrowUpRightIcon, DownloadIcon, SearchIcon } from "lucide-react";
|
import { ArrowUpRightIcon, SearchIcon } from "lucide-react";
|
||||||
import { useMemo, useState } from "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 { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Kbd } from "@/components/ui/kbd";
|
import { Kbd } from "@/components/ui/kbd";
|
||||||
@@ -16,6 +16,213 @@ import { isCustomTravelerKey } from "@/lib/catalog/travelers";
|
|||||||
import type { PublicGuide } from "@/lib/guides/queries";
|
import type { PublicGuide } from "@/lib/guides/queries";
|
||||||
import { cn } from "@/lib/utils";
|
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"] }) {
|
export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const normalizedQuery = query.trim().toLocaleLowerCase();
|
const normalizedQuery = query.trim().toLocaleLowerCase();
|
||||||
@@ -50,175 +257,17 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
|
|||||||
</div>
|
</div>
|
||||||
{filteredTeams.length ? (
|
{filteredTeams.length ? (
|
||||||
<div className="grid gap-5 xl:grid-cols-2">
|
<div className="grid gap-5 xl:grid-cols-2">
|
||||||
{filteredTeams.map((team) => {
|
{filteredTeams.map((team) => (
|
||||||
const total = team.members.reduce(
|
<TeamCard
|
||||||
(sum, member) => sum + Number(member.damage),
|
key={team.id}
|
||||||
0,
|
team={team}
|
||||||
);
|
action={
|
||||||
const seconds = Number(team.rotationSeconds);
|
<GuideImageExport fileName={`${team.title}.png`}>
|
||||||
return (
|
<TeamCard team={team} exporting />
|
||||||
<Card key={team.id}>
|
</GuideImageExport>
|
||||||
<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>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Card>
|
<Card>
|
||||||
|
|||||||
Vendored
+1
-13
@@ -3,11 +3,7 @@ import "server-only";
|
|||||||
import { cacheLife, cacheTag } from "next/cache";
|
import { cacheLife, cacheTag } from "next/cache";
|
||||||
|
|
||||||
import { getPublicPage, listPublicCharacters } from "@/lib/content/queries";
|
import { getPublicPage, listPublicCharacters } from "@/lib/content/queries";
|
||||||
import {
|
import { getPublicGuide, listGuideCards } from "@/lib/guides/queries";
|
||||||
getPublicGuide,
|
|
||||||
getPublicTeamExport,
|
|
||||||
listGuideCards,
|
|
||||||
} from "@/lib/guides/queries";
|
|
||||||
import {
|
import {
|
||||||
characterCacheTag,
|
characterCacheTag,
|
||||||
dataSourceCacheTag,
|
dataSourceCacheTag,
|
||||||
@@ -61,11 +57,3 @@ export async function getCachedPublicGuide(slug: string) {
|
|||||||
if (result) cacheTag(pageCacheTag(result.id));
|
if (result) cacheTag(pageCacheTag(result.id));
|
||||||
return result;
|
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 { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
import {
|
import { constellationChartRows } from "@/lib/guides/export-image";
|
||||||
constellationChartRows,
|
|
||||||
imageContentDisposition,
|
|
||||||
} from "@/lib/guides/export-image";
|
|
||||||
|
|
||||||
describe("guide image downloads", () => {
|
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", () => {
|
it("orders constellation levels, adds C0, and scales against the maximum", () => {
|
||||||
const rows = constellationChartRows([
|
const rows = constellationChartRows([
|
||||||
{ level: 1, cumulativePercent: "117", isGreat: false },
|
{ 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 {
|
export interface ConstellationChartRow {
|
||||||
level: number;
|
level: number;
|
||||||
percent: 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>>>;
|
export type PublicGuide = NonNullable<Awaited<ReturnType<typeof getPublicGuide>>>;
|
||||||
|
|||||||
Reference in New Issue
Block a user