feat : update

components/public/material-poster.tsx

@@ -23,6 +23,7 @@ type PosterCharacter = {
   nameCardImageUrl: string | null;
   baseStats: CatalogBaseStat[];
   ascension: Array<Omit<CatalogAscensionGroup, "items"> & { items: PosterMaterial[] }>;
+  leveling: Array<Omit<CatalogAscensionGroup, "items"> & { items: PosterMaterial[] }>;
 };
 
 const statLabels: Record<string, string> = {
@@ -43,10 +44,6 @@ function statValue(key: string, value: number | string): string {
   return key.includes("%") ? `${formatted}%` : formatted;
 }
 
-function clampOffset(value: number): number {
-  return Math.max(-50, Math.min(50, value));
-}
-
 export function MaterialPoster({
   character,
   characterArtUrl,
@@ -73,8 +70,9 @@ export function MaterialPoster({
   bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; scale: number; blendMode: PosterBlendMode }>;
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
-  const stats = character.baseStats.slice(0, 4);
-  const materials = character.ascension.flatMap((group) => group.items);
+  const preferredStats = ["hp", "atk", "def", "em"];
+  const stats = preferredStats.map((key) => character.baseStats.find((stat) => stat.key.toLowerCase() === key));
+  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%)`;
 
   function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
@@ -93,8 +91,8 @@ export function MaterialPoster({
     if (!dragStart.current || dragStart.current.pointerId !== event.pointerId || !onArtworkMove) return;
     const rect = event.currentTarget.getBoundingClientRect();
     onArtworkMove({
-      x: clampOffset(dragStart.current.offsetX + ((event.clientX - dragStart.current.x) / rect.width) * 100),
-      y: clampOffset(dragStart.current.offsetY + ((event.clientY - dragStart.current.y) / rect.height) * 100),
+      x: dragStart.current.offsetX + ((event.clientX - dragStart.current.x) / rect.width) * 100,
+      y: dragStart.current.offsetY + ((event.clientY - dragStart.current.y) / rect.height) * 100,
     });
   }
 
@@ -164,7 +162,7 @@ export function MaterialPoster({
 
       <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-[1.5%]">
+        <div className="mt-[4%] flex w-[53%] flex-col gap-[2.5%]">
           {Array.from({ length: 4 }, (_, index) => {
             const stat = stats[index];
             return (