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

feat : update

Browse Source
This commit is contained in:
gunshiz
2026-09-06 17:16:38 +07:00 Unverified
parent 5f6b8c1059
commit ce126810bb
13 changed files with 384 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/material-poster.tsx
+51 -25
View File
@@ -7,6 +7,7 @@ import type {
CatalogAscensionGroup,
CatalogBaseStat,
} from "@/lib/catalog/lunaris";
import { accentGradient } from "@/lib/overview-image";
import { cn } from "@/lib/utils";
type PosterMaterial = {
@@ -37,6 +38,14 @@ function statLabel(key: string): string {
return statLabels[key.toLowerCase()] ?? key;
}
function statIconName(key: string): string | null {
const normalized = key.toLowerCase().replace(/[^a-z]/gu, "");
if (["hp", "atk", "def", "em", "er"].includes(normalized)) return normalized;
if (["critrate", "crit", "criticalrate"].includes(normalized)) return "critrate";
if (["critdmg", "critdamage", "criticaldamage"].includes(normalized)) return "critdmg";
return null;
}
function statValue(key: string, value: number | string): string {
const formatted = typeof value === "number"
? value.toLocaleString("en-US", { maximumFractionDigits: 2 })
@@ -67,11 +76,10 @@ export function MaterialPoster({
onArtworkMove?: (offset: { x: number; y: number }) => void;
className?: string;
artworkScale: number;
bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; scale: number; blendMode: PosterBlendMode }>;
bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; blendMode: PosterBlendMode }>;
}) {
const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
const preferredStats = ["hp", "atk", "def", "em"];
const stats = preferredStats.map((key) => character.baseStats.find((stat) => stat.key.toLowerCase() === key));
const stats = character.baseStats.slice(0, 4);
const materials = [...character.ascension, ...character.leveling].flatMap((group) => group.items);
const background = `linear-gradient(180deg, ${topColors[0]} 0%, ${topColors[1]} 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, ${bottomColors[0]} 88%, ${bottomColors[1]} 100%)`;
@@ -143,49 +151,67 @@ export function MaterialPoster({
className="object-contain object-center"
priority={!interactive}
/>
{[...bleeding].reverse().map((layer) => (
<Image
key={layer.id}
src={characterArtUrl}
alt=""
fill
sizes="(min-width: 1024px) 800px, 100vw"
className="object-contain object-center"
style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, mixBlendMode: layer.blendMode }}
/>
))}
</div>
) : null}
<div className="pointer-events-none absolute inset-0 overflow-hidden">
{bleeding.map((layer) => layer.imageUrl ? (
<Image
key={layer.id}
src={layer.imageUrl}
alt=""
fill
sizes="(min-width: 1024px) 800px, 100vw"
className="object-contain object-center"
style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, mixBlendMode: layer.blendMode, transform: `scale(${Math.max(25, Math.min(300, layer.scale)) / 100})` }}
/>
) : null)}
</div>
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/80" />
<div
className="pointer-events-none absolute inset-x-0 top-0 h-[1.35cqw]"
style={{ backgroundImage: accentGradient(...topColors) }}
/>
<div
className="pointer-events-none absolute inset-x-0 bottom-0 h-[1.35cqw]"
style={{ backgroundImage: accentGradient(...bottomColors) }}
/>
<div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic", textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>
<h2 className="text-[7cqw] leading-none">BASE STATS</h2>
<div className="mt-[4%] flex w-[53%] flex-col gap-[2.5%]">
<div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
<h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>BASE STATS</h2>
<div className="mt-[4%] flex w-[53%] flex-col gap-[1.2cqw]">
{Array.from({ length: 4 }, (_, index) => {
const stat = stats[index];
const iconName = stat ? statIconName(stat.key) : null;
return (
<div key={stat?.key ?? index} className="flex h-[7cqw] items-center justify-between rounded-[1.5cqw] bg-black/95 px-[4%] text-[3.2cqw] leading-none">
<span>{stat ? statLabel(stat.key) : "—"}</span>
<span>{stat ? statValue(stat.key, stat.value) : "—"}</span>
<span className="flex min-w-0 items-center gap-[1cqw] whitespace-nowrap">
{iconName ? (
<Image
src={`/icon/stats/${iconName}.webp`}
alt=""
width={64}
height={64}
className="size-[3.5cqw] shrink-0 object-contain brightness-0 invert"
/>
) : null}
<span>{stat ? statLabel(stat.key) : "—"}</span>
</span>
<span className="whitespace-nowrap text-[2.7cqw]">{stat ? statValue(stat.key, stat.value) : "—"}</span>
</div>
);
})}
</div>
</div>
<div className="absolute inset-x-[4%] top-[51%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic", textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>
<h2 className="text-[7cqw] leading-none">MATERIALS</h2>
<div className="absolute inset-x-[4%] top-[49%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
<h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>MATERIALS</h2>
<p className="mt-[1%] text-[4.5cqw] leading-none">LV.90</p>
<div className="mt-[5%] grid grid-cols-8 gap-[1.2%]">
{materials.map((material, index) => (
<div key={`${material.key}-${index}`} className="aspect-[0.65] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
<div key={`${material.key}-${index}`} className="aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
<div className="flex h-[68%] items-center justify-center rounded-br-[1.3cqw] bg-[#c1c1c1] p-[8%]">
{material.imageUrl ? <Image src={material.imageUrl} alt="" width={96} height={96} className="size-full object-contain" /> : null}
</div>
<div className="flex h-[32%] items-center justify-center px-[4%] text-center text-[2.2cqw] leading-none">
<span>×{material.amount.toLocaleString("en-US")}</span>
<span className="whitespace-nowrap text-[1.8cqw]">×{material.amount.toLocaleString("en-US")}</span>
</div>
</div>
))}