userbox v1

app/(authenticated)/chunithm/page.tsx

@@ -9,6 +9,10 @@ import { TrophyCustomization } from "@/components/(customization)/trophycustomiz
 import { getTrophies } from "@/components/(customization)/trophycustomization/actions";
 import { NameplateCustomization } from "@/components/(customization)/nameplatecustomization/page";
 import { getNamePlates } from "@/components/(customization)/nameplatecustomization/actions";
+import { getSystemVoices } from "@/components/(customization)/systemvoicecustomization/actions";
+import { SystemVoiceCustomization } from "@/components/(customization)/systemvoicecustomization/page";
+import { MapIconCustomization } from "@/components/(customization)/mapiconcustomization/page";
+import { getMapIcons } from "@/components/(customization)/mapiconcustomization/actions";
 
 const getAvatarHeadAccessories = async () => {
   const avatarParts = await getAllAvatarParts(2); // head
@@ -45,6 +49,16 @@ const getAllNameplates = async () => {
   return { namePlates };
 };
 
+const getAllSystemVoices = async () => {
+  const systemVoices = await getSystemVoices();
+  return { systemVoices };
+};
+
+const getAllMapIcons = async () => {
+  const mapIcon = await getMapIcons();
+  return { mapIcon };
+};
+
 const Page = async () => {
   const AvatarHeadAccessories = await getAvatarHeadAccessories();
   const AvatarFaceAccessories = await getAvatarFaceAccessories();
@@ -53,6 +67,8 @@ const Page = async () => {
   const AvatarWearAccessories = await getAvatarWearAccessories();
   const AllPlayerTrophies = await getAllTrophies();
   const AllStaticNameplates = await getAllNameplates();
+  const AllSystemVoices = await getAllSystemVoices();
+  const AllMapIcons = await getAllMapIcons();
 
   return (
     <div className="p-10">
@@ -83,6 +99,14 @@ const Page = async () => {
                 playerTrophySelectionData={AllPlayerTrophies}
               />
             </div>
+            <div className="pt-4">
+              <SystemVoiceCustomization
+                playerSystemVoiceSelectionData={AllSystemVoices}
+              />
+            </div>
+            <div className="pt-4">
+              <MapIconCustomization playerMapIconCustomization={AllMapIcons} />
+            </div>
           </div>
           <div></div>
         </TabsContent>

components/(customization)/mapiconcustomization/actions.ts

@@ -0,0 +1,48 @@
+"use server";
+
+import { getAuth } from "@/auth/queries/getauth";
+import { artemis, daphnis } from "@/lib/prisma";
+import type * as Prisma from "@prisma/client";
+
+// type ChuniScorePlaylog = Prisma.PrismaClient;
+// type ChuniStaticMusic = Prisma.PrismaClient;
+
+export async function getCurrentMapIcon() {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const nameplates = await artemis.chuni_profile_data.findMany({
+    where: {
+      user: user.UserId,
+    },
+    select: {
+      mapIconId: true,
+    },
+  });
+  console.log(nameplates);
+  return nameplates;
+}
+
+export async function getMapIcons() {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const nameplates = await artemis.cozynet_chuni_static_mapicon.findMany({
+    select: {
+      id: true,
+      str: true,
+      sortName: true,
+      category: true,
+      imagePath: true,
+      rareType: true,
+      netOpenName: true,
+    },
+  });
+  return nameplates;
+}

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>
+  );
+};

components/(customization)/nameplatecustomization/page.tsx

@@ -1,7 +1,6 @@
 "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 { getCurrentNameplate } from "./actions";
 import { cn } from "@/lib/utils";
@@ -64,7 +63,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   const [nameplateId, setNameplateId] = useState<number | undefined>(undefined);
 
   useEffect(() => {
-    const fetchAvatarParts = async () => {
+    const fetchNamePlates = async () => {
       try {
         const data = await getCurrentNameplate();
         if (data.length > 0) {
@@ -75,7 +74,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
       }
     };
 
-    fetchAvatarParts();
+    fetchNamePlates();
   }, []);
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
@@ -95,11 +94,12 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
 
   const AvatarTextures = {
     AvatarHeadAccessory: {
-      src: getTexture(
+      src: nameplateId
-        form.watch("PlayerNamePlateId"),
+        ? getTexture(
-        `namePlates/CHU_UI_NamePlate_000${nameplateId}.png`
+            form.watch("PlayerNamePlateId"),
-      ),
+            `namePlates/CHU_UI_NamePlate_${nameplateId.toString().padStart(8, "0")}.png`
-      className: "avatar_head",
+          )
+        : `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`,
     },
   };
 
@@ -112,7 +112,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
             name="PlayerNamePlateId"
             render={({ field }) => (
               <FormItem className="flex flex-col">
-                <FormLabel>Name plate Item</FormLabel>
+                <FormLabel>Select Nameplate</FormLabel>
                 <Popover>
                   <PopoverTrigger asChild>
                     <FormControl>
@@ -128,7 +128,7 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
                           ? playerNamePlateSelectionData.namePlates.find(
                               (part) => part.id === field.value
                             )?.str
-                          : "Select Name plate Item"}
+                          : "Select Name Plate"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                       </Button>
                     </FormControl>

components/(customization)/systemvoicecustomization/actions.ts

@@ -0,0 +1,47 @@
+"use server";
+
+import { getAuth } from "@/auth/queries/getauth";
+import { artemis, daphnis } from "@/lib/prisma";
+import type * as Prisma from "@prisma/client";
+
+// type ChuniScorePlaylog = Prisma.PrismaClient;
+// type ChuniStaticMusic = Prisma.PrismaClient;
+
+export async function getCurrentSystemVoice() {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const nameplates = await artemis.chuni_profile_data.findMany({
+    where: {
+      user: user.UserId,
+    },
+    select: {
+      voiceId: true,
+    },
+  });
+  return nameplates;
+}
+
+export async function getSystemVoices() {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const nameplates = await artemis.cozynet_chuni_static_systemvoice.findMany({
+    select: {
+      id: true,
+      str: true,
+      sortName: true,
+      category: true,
+      imagePath: true,
+      rareType: true,
+      netOpenName: true,
+    },
+  });
+  return nameplates;
+}

components/(customization)/systemvoicecustomization/page.tsx

@@ -0,0 +1,190 @@
+"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_systemvoice } from "@/prisma/schemas/artemis/generated/artemis";
+import { getCurrentSystemVoice, getSystemVoices } 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 `systemVoiceThumbnails/CHU_UI_SystemVoice_${paddedId}.png`;
+};
+
+type systemvoice = cozynet_chuni_static_systemvoice;
+
+type SystemVoiceSelectionProps = {
+  playerSystemVoiceSelectionData: {
+    systemVoices: systemvoice[];
+  };
+};
+
+export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
+  playerSystemVoiceSelectionData,
+}) => {
+  const FormSchema = z.object({
+    PlayerSystemVoice: z.number({
+      required_error: "Please select a System Voice.",
+    }),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const [systemVoiceId, setSytemVoiceId] = useState<number | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    const fetchSystemVoices = async () => {
+      try {
+        const data = await getCurrentSystemVoice();
+        if (data.length > 0) {
+          setSytemVoiceId(data[0].voiceId!);
+        }
+      } catch (error) {
+        console.error("Error fetching system voices:", error);
+      }
+    };
+
+    fetchSystemVoices();
+  }, []);
+
+  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: systemVoiceId
+        ? getTexture(
+            form.watch("PlayerSystemVoice"),
+            `systemVoiceThumbnails/CHU_UI_SystemVoice_${systemVoiceId.toString().padStart(8, "0")}.png`
+          )
+        : `systemVoiceThumbnails/CHU_UI_SystemVoice_Default.png`, // Provide a default texture or handle the case when systemVoiceId is undefined
+    },
+  };
+
+  return (
+    <main className="flex">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="PlayerSystemVoice"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Select System Voice</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? playerSystemVoiceSelectionData.systemVoices.find(
+                              (part) => part.id === field.value
+                            )?.str
+                          : "Select System Voice"}
+                        <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 system voice found.</CommandEmpty>
+                        <CommandGroup>
+                          {playerSystemVoiceSelectionData.systemVoices.map(
+                            (part) => (
+                              <CommandItem
+                                value={part.str ?? ""}
+                                key={part.id}
+                                onSelect={() => {
+                                  form.setValue("PlayerSystemVoice", 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>
+  );
+};

components/(customization)/trophycustomization/page.tsx

@@ -61,7 +61,7 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
   const [trophyID, setTrophyId] = useState<number | undefined>(undefined);
 
   useEffect(() => {
-    const fetchAvatarParts = async () => {
+    const fetchTrophies = async () => {
       try {
         const data = await getCurrentTrophies();
         if (data.length > 0) {
@@ -72,7 +72,7 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
       }
     };
 
-    fetchAvatarParts();
+    fetchTrophies();
   }, []);
 
   function onSubmit(data: z.infer<typeof FormSchema>) {