daphnis/components/(customization)/nameplatecustomization/page.tsx

202 lines
6.2 KiB
TypeScript

"use client";
import React, { FC, useEffect, useState } from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { getCurrentNameplate, updatePlayerNamePlate } from "./actions";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
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 { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "../../ui/use-toast";
import { cozynet_chuni_static_nameplate } from "@/prisma/schemas/artemis/generated/artemis";
const getNamePlateTextures = (id: number | undefined) => {
if (id === undefined) return "";
// Pad the id to be 8 digits long, using leading zeros
const paddedId = id.toString().padStart(8, "0");
return `namePlates/CHU_UI_NamePlate_${paddedId}.png`;
};
type player_nameplates = cozynet_chuni_static_nameplate;
type AvatarSelectionProps = {
playerNamePlateSelectionData: {
namePlates: player_nameplates[];
};
};
export const NameplateCustomization: FC<AvatarSelectionProps> = ({
playerNamePlateSelectionData,
}) => {
const FormSchema = z.object({
nameplateId: z.number({
required_error: "Please select an Avatar Head Item.",
}),
});
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
});
const [nameplateId, setNameplateId] = useState<number | undefined>(undefined);
useEffect(() => {
const fetchNamePlates = async () => {
try {
const data = await getCurrentNameplate();
if (data.length > 0) {
setNameplateId(data[0].nameplateId!);
}
} catch (error) {
console.error("Error fetching avatar parts:", error);
}
};
fetchNamePlates();
}, []);
function onSubmit(data: z.infer<typeof FormSchema>) {
const defaultNamePlateId = nameplateId;
const newNamePlateId = data.nameplateId ?? defaultNamePlateId;
updatePlayerNamePlate(newNamePlateId).then(() => {
setNameplateId(newNamePlateId);
});
resetFormValues();
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>
),
});
function resetFormValues() {
form.reset({
nameplateId: undefined,
});
}
}
const getTexture = (id: number | undefined, defaultSrc: string) => {
return id ? getNamePlateTextures(id) : defaultSrc;
};
const namePlateTextures = {
namePlateTexture: {
src: nameplateId
? getTexture(
form.watch("nameplateId"),
`namePlates/CHU_UI_NamePlate_${nameplateId.toString().padStart(8, "0")}.png`,
)
: `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`,
},
};
return (
<main className="flex flex-col items-center space-y-6">
<div className="flex w-full justify-center">
{Object.entries(namePlateTextures).map(([key, { src }]) => (
<div key={key}>
<img className="w-[300px]" src={src} alt={`Name Plate ${key}`} />
</div>
))}
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="nameplateId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="pb-2">Select Nameplate</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[300px] justify-between",
!field.value && "text-muted-foreground",
)}
>
{field.value
? playerNamePlateSelectionData.namePlates.find(
(part) => part.id === field.value,
)?.str
: "Select Name Plate"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command>
<CommandList>
<CommandEmpty>No name plate found.</CommandEmpty>
<CommandGroup>
{playerNamePlateSelectionData.namePlates.map(
(part) => (
<CommandItem
value={part.str ?? ""}
key={part.id}
onSelect={() => {
form.setValue("nameplateId", part.id!);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
part.id === field.value
? "opacity-100"
: "opacity-0",
)}
/>
{part.str}
</CommandItem>
),
)}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit">Submit</Button>
</div>
</form>
</Form>
</main>
);
};