userbox v1

components/(customization)/mapiconcustomization/page.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import React, { FC, useEffect, useState } from "react";
+import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
+import { Check, ChevronsUpDown } from "lucide-react";
+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_mapicon } from "@/prisma/schemas/artemis/generated/artemis";
+import { getCurrentMapIcon } from "./actions";
+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 `mapIcon/CHU_UI_MapIcon_${paddedId}.png`;
+};
+
+type mapIcons = cozynet_chuni_static_mapicon;
+
+type SystemVoiceSelectionProps = {
+  playerMapIconCustomization: {
+    mapIcon: mapIcons[];
+  };
+};
+
+export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
+  playerMapIconCustomization,
+}) => {
+  const FormSchema = z.object({
+    PlayerMapIcon: z.number({
+      required_error: "Please select an Avatar Head Item.",
+    }),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const [mapIconId, setMapIconId] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchMapIcons = async () => {
+      try {
+        const data = await getCurrentMapIcon();
+        if (data.length > 0) {
+          setMapIconId(data[0].mapIconId!);
+        }
+      } catch (error) {
+        console.error("Error fetching avatar parts:", error);
+      }
+    };
+
+    fetchMapIcons();
+  }, []);
+
+  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>
+      ),
+    });
+  }
+
+  const getTexture = (id: number | undefined, defaultSrc: string) => {
+    return id ? getNamePlateTextures(id) : defaultSrc;
+  };
+
+  const AvatarTextures = {
+    AvatarHeadAccessory: {
+      src: mapIconId
+        ? getTexture(
+            form.watch("PlayerMapIcon"),
+            `mapIcon/CHU_UI_MapIcon_${mapIconId.toString().padStart(8, "0")}.png`
+          )
+        : `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`,
+    },
+  };
+
+  return (
+    <main className="flex">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="PlayerMapIcon"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Select Map Icon</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? playerMapIconCustomization.mapIcon.find(
+                              (part) => part.id === field.value
+                            )?.str
+                          : "Select Map Icon"}
+                        <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>
+                          {playerMapIconCustomization.mapIcon.map((part) => (
+                            <CommandItem
+                              value={part.str ?? ""}
+                              key={part.id}
+                              onSelect={() => {
+                                form.setValue("PlayerMapIcon", 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>
+      <div className="w-1/2 flex flex-col items-center">
+        {Object.entries(AvatarTextures).map(([key, { src }]) => (
+          <div className="" key={key}>
+            <img src={src} alt="" className=" w-300 h-32 object-contain" />
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+};