added getavatarpart

This commit is contained in:
Polaris
2024-07-21 13:24:31 -04:00
parent 0375709c8f
commit f916143f15
4 changed files with 120 additions and 256 deletions

View File

View File

@ -32,15 +32,10 @@ import {
import { toast } from "@/components/ui/use-toast"; import { toast } from "@/components/ui/use-toast";
const AvatarParts = [ const AvatarParts = [
{ label: "English", value: "en" }, { label: "Head", value: "avatarHead", src: "/path/to/head.png" },
{ label: "French", value: "fr" }, { label: "Body", value: "avatarBody", src: "/path/to/body.png" },
{ label: "German", value: "de" }, { label: "Face", value: "avatarFace", src: "/path/to/face.png" },
{ label: "Spanish", value: "es" }, { label: "Back", value: "avatarBack", src: "/path/to/back.png" },
{ label: "Portuguese", value: "pt" },
{ label: "Russian", value: "ru" },
{ label: "Japanese", value: "ja" },
{ label: "Korean", value: "ko" },
{ label: "Chinese", value: "zh" },
] as const; ] as const;
const FormSchema = z.object({ const FormSchema = z.object({
@ -75,250 +70,95 @@ export function AvatarCustomization() {
} }
return ( return (
<Form {...form}> <div className="bg-red-500 rounded-sm mx-auto">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 "> <div className="flex flex-col md:flex-row justify-center items-center">
<FormField <div className="avatar_group w-full md:w-1/2 flex justify-center items-center">
control={form.control} <div className="avatar_base">
name="AvatarHead" {AvatarParts.map(({ value, src }) => (
render={({ field }) => ( <div className={value} key={value}>
<FormItem className="flex flex-col"> <img src={src} alt={value} />
<FormLabel>Avatar Head Item</FormLabel> </div>
<Popover> ))}
<PopoverTrigger asChild> </div>
<FormControl> </div>
<Button </div>
variant="outline" <Form {...form}>
role="combobox" <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
className={cn( {AvatarParts.map((part) => (
"w-[200px] justify-between", <FormField
!field.value && "text-muted-foreground" key={part.value}
)} control={form.control}
> name={part.value as keyof z.infer<typeof FormSchema>}
{field.value render={({ field }) => (
? AvatarParts.find((part) => part.value === field.value) <FormItem className="flex flex-col">
?.label <FormLabel>{`Avatar ${part.label} Item`}</FormLabel>
: "Select head item"} <Popover>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <PopoverTrigger asChild>
</Button> <FormControl>
</FormControl> <Button
</PopoverTrigger> variant="outline"
<PopoverContent className="w-[200px] p-0"> role="combobox"
<Command> className={cn(
<CommandInput placeholder="Search head item..." /> "w-[200px] justify-between",
<CommandList> !field.value && "text-muted-foreground"
<CommandEmpty>No head item found.</CommandEmpty> )}
<CommandGroup> >
{AvatarParts.map((part) => ( {field.value
<CommandItem ? AvatarParts.find(
value={part.label} (item) => item.value === field.value
key={part.value} )?.label
onSelect={() => { : `Select ${part.label.toLowerCase()} item`}
form.setValue("AvatarHead", part.value); <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
}} </Button>
> </FormControl>
<Check </PopoverTrigger>
className={cn( <PopoverContent className="w-[200px] p-0">
"mr-2 h-4 w-4", <Command>
part.value === field.value <CommandInput
? "opacity-100" placeholder={`Search ${part.label.toLowerCase()} item...`}
: "opacity-0" />
)} <CommandList>
/> <CommandEmpty>
{part.label} No {part.label.toLowerCase()} item found.
</CommandItem> </CommandEmpty>
))} <CommandGroup>
</CommandGroup> {AvatarParts.map((item) => (
</CommandList> <CommandItem
</Command> value={item.value}
</PopoverContent> key={item.value}
</Popover> onSelect={() => {
form.setValue(
<FormMessage /> part.value as keyof z.infer<
</FormItem> typeof FormSchema
)} >,
/> item.value
<FormField );
control={form.control} }}
name="AvatarBody" >
render={({ field }) => ( <Check
<FormItem className="flex flex-col"> className={cn(
<FormLabel>Avatar Body Item</FormLabel> "mr-2 h-4 w-4",
<Popover> item.value === field.value
<PopoverTrigger asChild> ? "opacity-100"
<FormControl> : "opacity-0"
<Button )}
variant="outline" />
role="combobox" {item.label}
className={cn( </CommandItem>
"w-[200px] justify-between", ))}
!field.value && "text-muted-foreground" </CommandGroup>
)} </CommandList>
> </Command>
{field.value </PopoverContent>
? AvatarParts.find((part) => part.value === field.value) </Popover>
?.label <FormMessage />
: "Select body item"} </FormItem>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> )}
</Button> />
</FormControl> ))}
</PopoverTrigger> <Button type="submit">Submit</Button>
<PopoverContent className="w-[200px] p-0"> </form>
<Command> </Form>
<CommandInput placeholder="Search body item..." /> </div>
<CommandList>
<CommandEmpty>No body item found.</CommandEmpty>
<CommandGroup>
{AvatarParts.map((part) => (
<CommandItem
value={part.label}
key={part.value}
onSelect={() => {
form.setValue("AvatarBody", part.value);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarFace"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Face Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[200px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? AvatarParts.find((part) => part.value === field.value)
?.label
: "Select face item"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search face item..." />
<CommandList>
<CommandEmpty>No face item found.</CommandEmpty>
<CommandGroup>
{AvatarParts.map((part) => (
<CommandItem
value={part.label}
key={part.value}
onSelect={() => {
form.setValue("AvatarFace", part.value);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="AvatarBack"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Avatar Back Item</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[200px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? AvatarParts.find((part) => part.value === field.value)
?.label
: "Select back item"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search back item..." />
<CommandList>
<CommandEmpty>No back item found.</CommandEmpty>
<CommandGroup>
{AvatarParts.map((part) => (
<CommandItem
value={part.label}
key={part.value}
onSelect={() => {
form.setValue("AvatarBack", part.value);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{part.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
); );
} }

View File

@ -34,10 +34,9 @@ export const columns: ColumnDef<chunithm>[] = [
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
return ( return (
<div className="font-medium w-[300px] truncate flex items-center"> <div className="font-medium w-[300px] truncate flex items-center">
{isLoading || !jacketPath ? ( {!jacketPath ? (
<Skeleton className="w-8 h-8 inline-block mr-2" /> <Skeleton className="w-8 h-8 inline-block mr-2" />
) : ( ) : (
// eslint-disable-next-line @next/next/no-img-element
<img <img
src={`/jacketArt/${jacketPath}`} src={`/jacketArt/${jacketPath}`}
alt="Jacket" alt="Jacket"

View File

@ -180,6 +180,31 @@ export async function getAllAimeCards() {
return aimeUser; return aimeUser;
} }
export async function getAvatarParts(avatarAccessoryId: number) {
const { user } = await getAuth();
if (!user || !user.accessCode) {
throw new Error("User is not authenticated or accessCode is missing");
}
const avatarParts = await artemis.chuni_static_avatar.findMany({
where: {
avatarAccessoryId: avatarAccessoryId,
},
select: {
name: true,
category: true,
version: true,
iconPath: true,
texturePath: true,
}
});
return avatarParts;
}
export async function verifyAimeCodeAgainstArtemis() { export async function verifyAimeCodeAgainstArtemis() {
const { user } = await getAuth(); const { user } = await getAuth();