dynamic avatar rendering

components/avatarcustomization/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
 import { Check, ChevronsUpDown } from "lucide-react";
 
@@ -10,7 +10,6 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandInput,
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
@@ -34,6 +33,11 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "../ui/use-toast";
 
+const getAvatarTextureSrc = (id: number | undefined) => {
+  if (id === undefined) return "";
+  return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`;
+};
+
 type AvatarSelectionProps = {
   avatarHeadSelectionData: {
     avatarParts: chunithm_avatar[];
@@ -62,19 +66,19 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
 }) => {
   const FormSchema = z.object({
     AvatarHeadAccessory: z.number({
-      required_error: "Please select a language.",
+      required_error: "Please select an Avatar Head Item.",
     }),
     AvatarFaceAccessory: z.number({
-      required_error: "Please select a language.",
+      required_error: "Please select an Avatar Face Item.",
     }),
     AvatarItemAccessory: z.number({
-      required_error: "Please select a language.",
+      required_error: "Please select an Avatar Item.",
     }),
     AvatarBackAccessory: z.number({
-      required_error: "Please select a language.",
+      required_error: "Please select an Avatar Back Item.",
     }),
     AvatarWearAccessory: z.number({
-      required_error: "Please select a language.",
+      required_error: "Please select an Avatar Wear Item.",
     }),
   });
 
@@ -93,13 +97,57 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
     });
   }
 
-  const AvatarTextures: Record<string, { src: string; className: string }> = {
+  const getTexture = (id: number | undefined, defaultSrc: string) => {
-    AvatarFaceStatic: {
+    return id ? getAvatarTextureSrc(id) : defaultSrc;
-      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
+  };
-      className: "avatar_face_static",
+
+  const AvatarTextures = {
+    AvatarHeadAccessory: {
+      src: getTexture(
+        form.watch("AvatarHeadAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultHead.png"
+      ),
+      className: "avatar_head",
     },
-    AvatarSkin: {
+    AvatarFaceAccessory: {
-      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${1400001}.png`,
+      src: getTexture(
+        form.watch("AvatarFaceAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultFace.png"
+      ),
+      className: "avatar_face",
+    },
+    AvatarItemAccessoryR: {
+      src: getTexture(
+        form.watch("AvatarItemAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png"
+      ),
+      className: "avatar_item_r ",
+    },
+
+    AvatarItemAccessoryL: {
+      src: getTexture(
+        form.watch("AvatarItemAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png"
+      ),
+      className: "avatar_item_l ",
+    },
+
+    AvatarBackAccessory: {
+      src: getTexture(
+        form.watch("AvatarBackAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultBack.png"
+      ),
+      className: "avatar_back",
+    },
+    AvatarWearAccessory: {
+      src: getTexture(
+        form.watch("AvatarWearAccessory"),
+        "avatarAccessory/CHU_UI_Avatar_Tex_DefaultWear.png"
+      ),
+      className: "avatar_wear",
+    },
+    avatarSkinAccessory: {
+      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
       className: "avatar_skin",
     },
     AvatarRightHand: {
@@ -118,43 +166,14 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
       src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
       className: "avatar_skinfoot_r",
     },
-
+    AvatarFaceStatic: {
-    AvatarHeadAccessory: {
+      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
-      src: "avatarAccessory/CHU_UI_Avatar_Tex_06202301.png",
+      className: "avatar_face_static",
-      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 className="flex">
-      {" "}
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -186,8 +205,6 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                     </PopoverTrigger>
                     <PopoverContent className="w-[300px] p-0">
                       <Command>
-                        {/* bugged  */}
-                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                         <CommandList>
                           <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
@@ -200,7 +217,6 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                                     "AvatarHeadAccessory",
                                     part.avatarAccessoryId!
                                   );
-                                  console.log(part.avatarAccessoryId);
                                 }}
                               >
                                 <Check
@@ -224,6 +240,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="AvatarFaceAccessory"
@@ -252,10 +269,8 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                     </PopoverTrigger>
                     <PopoverContent className="w-[300px] p-0">
                       <Command>
-                        {/* bugged  */}
-                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                         <CommandList>
-                          <CommandEmpty>No language found.</CommandEmpty>
+                          <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
                             {avatarFaceSelectionData.avatarParts.map((part) => (
                               <CommandItem
@@ -289,6 +304,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="AvatarItemAccessory"
@@ -310,15 +326,13 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                             ? avatarItemSelectionData.avatarParts.find(
                                 (part) => part.avatarAccessoryId === field.value
                               )?.name
-                            : "Select Avatar Head Item"}
+                            : "Select Avatar Face Item"}
                           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
                     <PopoverContent className="w-[300px] p-0">
                       <Command>
-                        {/* bugged  */}
-                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                         <CommandList>
                           <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
@@ -354,6 +368,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="AvatarBackAccessory"
@@ -382,8 +397,6 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                     </PopoverTrigger>
                     <PopoverContent className="w-[300px] p-0">
                       <Command>
-                        {/* bugged  */}
-                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                         <CommandList>
                           <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
@@ -419,12 +432,13 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="AvatarWearAccessory"
               render={({ field }) => (
                 <FormItem className="flex flex-col">
-                  <FormLabel>Avatar Body Item</FormLabel>
+                  <FormLabel>Avatar Clothing Item</FormLabel>
                   <Popover>
                     <PopoverTrigger asChild>
                       <FormControl>
@@ -440,15 +454,13 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                             ? avatarWearSelectionData.avatarParts.find(
                                 (part) => part.avatarAccessoryId === field.value
                               )?.name
-                            : "Select Avatar Body Item"}
+                            : "Select Avatar Clothing Item"}
                           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
                     <PopoverContent className="w-[300px] p-0">
                       <Command>
-                        {/* bugged  */}
-                        {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                         <CommandList>
                           <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
@@ -493,7 +505,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
         <div className="avatar_base">
           {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
             <div className={className} key={key}>
-              <img src={src} alt={key} />
+              <img src={src} alt={""} />
             </div>
           ))}
         </div>