This commit is contained in:
Polaris
2024-07-22 20:59:17 -04:00
parent 4877a6e93b
commit 23bbef4d00
3 changed files with 55 additions and 173 deletions

View File

@ -1,4 +1,4 @@
import { AvatarCustomization } from "@/components/avatarcustomization/page"; import AvatarCustomization from "@/components/avatarcustomization/page";
import ChunithmScorePlaylog from "@/components/scoreplaylog/page"; import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -14,9 +14,7 @@ const ChunithmPage = () => {
<ChunithmScorePlaylog /> <ChunithmScorePlaylog />
</TabsContent> </TabsContent>
<TabsContent value="customize"> <TabsContent value="customize">
<div className="p-10"> <AvatarCustomization />
<AvatarCustomization />
</div>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>

View File

@ -1,167 +1,7 @@
"use client"; import React from "react";
import { zodResolver } from "@hookform/resolvers/zod"; const AvatarCustomization = () => {
import { Check, ChevronsUpDown } from "lucide-react"; return <div>AvatarCustomization</div>;
import { useForm } from "react-hook-form"; };
import { z } from "zod";
import { cn } from "@/lib/utils"; export default AvatarCustomization;
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { toast } from "@/components/ui/use-toast";
import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
type chunithmAvatars = chuni_static_avatar;
const AvatarParts = [
{ label: "Head", value: "avatarHead", src: "/path/to/head.png" },
{ label: "Body", value: "avatarBody", src: "/path/to/body.png" },
{ label: "Face", value: "avatarFace", src: "/path/to/face.png" },
{ label: "Back", value: "avatarBack", src: "/path/to/back.png" },
] as const;
const FormSchema = z.object({
AvatarHead: z.string({
required_error: "Please select a head item.",
}),
AvatarBody: z.string({
required_error: "Please select a body item.",
}),
AvatarFace: z.string({
required_error: "Please select a face item.",
}),
AvatarBack: z.string({
required_error: "Please select a back item.",
}),
});
export function AvatarCustomization() {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
});
function onSubmit(data: z.infer<typeof FormSchema>) {
toast({
title: "You submitted the following values:",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
});
}
return (
<div className="bg-red-500 rounded-sm mx-auto">
<div className="flex flex-col md:flex-row justify-center items-center">
<div className="avatar_group w-full md:w-1/2 flex justify-center items-center">
<div className="avatar_base">
{AvatarParts.map(({ value, src }) => (
<div className={value} key={value}>
<img src={src} alt={value} />
</div>
))}
</div>
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
{AvatarParts.map((part) => (
<FormField
key={part.value}
control={form.control}
name={part.value as keyof z.infer<typeof FormSchema>}
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>{`Avatar ${part.label} 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(
(item) => item.value === field.value
)?.label
: `Select ${part.label.toLowerCase()} 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 ${part.label.toLowerCase()} item...`}
/>
<CommandList>
<CommandEmpty>
No {part.label.toLowerCase()} item found.
</CommandEmpty>
<CommandGroup>
{AvatarParts.map((item) => (
<CommandItem
value={item.value}
key={item.value}
onSelect={() => {
form.setValue(
part.value as keyof z.infer<
typeof FormSchema
>,
item.value
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
item.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{item.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
))}
<Button type="submit">Submit</Button>
</form>
</Form>
</div>
);
}

View File

@ -180,9 +180,10 @@ export async function getAllAimeCards() {
return aimeUser; return aimeUser;
} }
export async function test(data?: FormData) {
console.log(data);
export async function getAvatarParts(avatarAccessoryId: number) { }
export async function setAvatarPart(avatarAccessoryId: number) {
const { user } = await getAuth(); const { user } = await getAuth();
if (!user || !user.accessCode) { if (!user || !user.accessCode) {
@ -191,7 +192,7 @@ export async function getAvatarParts(avatarAccessoryId: number) {
const avatarParts = await artemis.chuni_static_avatar.findMany({ const avatarParts = await artemis.chuni_static_avatar.findMany({
where: { where: {
avatarAccessoryId: avatarAccessoryId, avatarAccessoryId: avatarAccessoryId
}, },
select: { select: {
name: true, name: true,
@ -205,6 +206,49 @@ export async function getAvatarParts(avatarAccessoryId: number) {
} }
export async function GetSpecificAvatarParts(category: 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: { category },
select: {
name: true,
category: true,
version: true,
iconPath: true,
texturePath: true,
},
});
return avatarParts;
}
export async function getCurrentPlayerAvatarParts() {
const { user } = await getAuth();
if (!user || !user.accessCode) {
throw new Error("User is not authenticated or accessCode is missing");
}
const avatarParts = await artemis.chuni_profile_data.findMany({
select: {
avatarBack: true,
avatarFace: true,
avatarItem: true,
avatarHead: true,
avatarWear: true,
},
});
return avatarParts;
}
export async function verifyAimeCodeAgainstArtemis() { export async function verifyAimeCodeAgainstArtemis() {
const { user } = await getAuth(); const { user } = await getAuth();