static avatar resources

app/(authenticated)/chunithm/page.tsx

@@ -10,25 +10,25 @@ import { getAllAvatarParts } from "@/components/avatarcustomization/actions";
 // the number is the category id for the specific part
 
 const getAvatarHeadAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(2);
+  const avatarParts = await getAllAvatarParts(2); // head
   return { avatarParts };
 };
 
 const getAvatarFaceAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(3);
+  const avatarParts = await getAllAvatarParts(3); // face
   return { avatarParts };
 };
 
 const getAvatarItemAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(5);
+  const avatarParts = await getAllAvatarParts(5); // item_l item_r
   return { avatarParts };
 };
 const getAvatarBackAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(7);
+  const avatarParts = await getAllAvatarParts(7); // back
   return { avatarParts };
 };
 const getAvatarWearAccessories = async () => {
-  const avatarParts = await getAllAvatarParts(1);
+  const avatarParts = await getAllAvatarParts(1); // wear
   return { avatarParts };
 };
 
@@ -59,6 +59,7 @@ const Page = async () => {
               avatarWearSelectionData={AvatarWearAccessories}
             />
           </div>
+          <div></div>
         </TabsContent>
       </Tabs>
     </div>

app/globals.css

@@ -76,29 +76,12 @@
   }
 
 
-  g,
+img,
 video {
   max-width: revert;
   height: revert;
 }
 
-.rainbow-text {
-  background: linear-gradient(
-    to left,
-    violet,
-    indigo,
-    blue,
-    green,
-    yellow,
-    orange,
-    red
-  );
-  -webkit-background-clip: text;
-  color: transparent;
-  background-clip: text;
-  color: transparent;
-}
-
 /*
 * CHUSAN AVATAR
 */

components/avatarcustomization/page.tsx

@@ -93,8 +93,69 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
     });
   }
 
+  const AvatarTextures: Record<string, { src: string; className: string }> = {
+    AvatarFaceStatic: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
+      className: "avatar_face_static",
+    },
+    AvatarSkin: {
+      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${1400001}.png`,
+      className: "avatar_skin",
+    },
+    AvatarRightHand: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
+      className: "avatar_hand_r",
+    },
+    AvatarLeftHand: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
+      className: "avatar_hand_l",
+    },
+    AvatarSkinFootL: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      className: "avatar_skinfoot_l",
+    },
+    AvatarSkinFootR: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
+      className: "avatar_skinfoot_r",
+    },
+
+    AvatarHeadAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06202301.png",
+      className: "avatar_head",
+    },
+
+    AvatarItemAccessoryR: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
+      className: "avatar_item_r",
+    },
+    AvatarItemAccessoryL: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
+      className: "avatar_item_l",
+    },
+    AvatarBackAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_06703301.png",
+      className: "avatar_back",
+    },
+    AvatarWearAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_04103101.png",
+      className: "avatar_wear",
+    },
+
+    AvatarFace: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_02300003.png",
+      className: "avatar_face",
+    },
+    // not in use
+    AvatarFront: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01600001.png",
+      className: "avatar_front",
+    },
+  };
+
   return (
-    <main>
+    <main className="flex">
+      {" "}
+      <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             <FormField
@@ -139,6 +200,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                                     "AvatarHeadAccessory",
                                     part.avatarAccessoryId!
                                   );
+                                  console.log(part.avatarAccessoryId);
                                 }}
                               >
                                 <Check
@@ -425,17 +487,17 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
             <Button type="submit">Submit</Button>
           </form>
         </Form>
+      </div>
+      {/* Avatar Customization Section */}
+      <div className="w-1/2 flex flex-col items-center">
+        <div className="avatar_base">
+          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
+            <div className={className} key={key}>
+              <img src={src} alt={key} />
+            </div>
+          ))}
+        </div>
+      </div>
     </main>
   );
 };
-
-{
-  /* <div>State is: {state}</div>
-      <div>Server data:</div>
-      <div></div>
-      <ul>
-        {avatarSelectionData.avatarParts.map((part) => (
-          <li key={part.avatarAccessoryId}>{part.name}</li>
-        ))}
-      </ul> */
-}