static avatar resources

This commit is contained in:
Polaris 2024-07-24 15:18:05 -04:00
parent 14202be355
commit 38d97e5a1c
3 changed files with 406 additions and 360 deletions

View File

@ -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>

View File

@ -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
*/

View File

@ -93,349 +93,411 @@ 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>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="AvatarHeadAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Head Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarHeadSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Head 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>
{avatarHeadSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarHeadAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<main className="flex">
{" "}
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="AvatarHeadAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Head Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarHeadSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Head 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>
{avatarHeadSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarHeadAccessory",
part.avatarAccessoryId!
);
console.log(part.avatarAccessoryId);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarFaceAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Face Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarFaceSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "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 language found.</CommandEmpty>
<CommandGroup>
{avatarFaceSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarFaceAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarFaceAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Face Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarFaceSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "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 language found.</CommandEmpty>
<CommandGroup>
{avatarFaceSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarFaceAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarItemAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Hand Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarItemSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Head 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>
{avatarItemSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarItemAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarItemAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Hand Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarItemSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Head 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>
{avatarItemSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarItemAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarBackAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Back Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarBackSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Back 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>
{avatarBackSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarBackAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarBackAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Back Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarBackSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Back 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>
{avatarBackSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarBackAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarWearAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Body Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarWearSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Body 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>
{avatarWearSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarWearAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarWearAccessory"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Body Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? avatarWearSelectionData.avatarParts.find(
(part) => part.avatarAccessoryId === field.value
)?.name
: "Select Avatar Body 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>
{avatarWearSelectionData.avatarParts.map((part) => (
<CommandItem
value={part.name ?? ""}
key={part.avatarAccessoryId}
onSelect={() => {
form.setValue(
"AvatarWearAccessory",
part.avatarAccessoryId!
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.avatarAccessoryId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
<FormMessage />
</FormItem>
)}
/>
<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> */
}