feat : update
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user