addded nameplates

app/(authenticated)/chunithm/page.tsx

@@ -1,6 +1,5 @@
 "use server";
 //https://github.com/vercel/next.js/discussions/63862
-
 import React from "react";
 import { AvatarCustomization } from "@/components/(customization)/avatarcustomization/page";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -8,8 +7,8 @@ import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
 import { getAllAvatarParts } from "@/components/(customization)/avatarcustomization/actions";
 import { TrophyCustomization } from "@/components/(customization)/trophycustomization/page";
 import { getTrophies } from "@/components/(customization)/trophycustomization/actions";
-
-// the number is the category id for the specific part
+import { NameplateCustomization } from "@/components/(customization)/nameplatecustomization/page";
+import { getNamePlates } from "@/components/(customization)/nameplatecustomization/actions";
 
 const getAvatarHeadAccessories = async () => {
   const avatarParts = await getAllAvatarParts(2); // head
@@ -25,19 +24,27 @@ const getAvatarItemAccessories = async () => {
   const avatarParts = await getAllAvatarParts(5); // item_l item_r
   return { avatarParts };
 };
+
 const getAvatarBackAccessories = async () => {
   const avatarParts = await getAllAvatarParts(7); // back
   return { avatarParts };
 };
+
 const getAvatarWearAccessories = async () => {
   const avatarParts = await getAllAvatarParts(1); // wear
   return { avatarParts };
 };
+
 const getAllTrophies = async () => {
   const statictrophies = await getTrophies();
   return { statictrophies };
 };
 
+const getAllNameplates = async () => {
+  const namePlates = await getNamePlates();
+  return { namePlates };
+};
+
 const Page = async () => {
   const AvatarHeadAccessories = await getAvatarHeadAccessories();
   const AvatarFaceAccessories = await getAvatarFaceAccessories();
@@ -45,6 +52,8 @@ const Page = async () => {
   const AvatarBackAccessories = await getAvatarBackAccessories();
   const AvatarWearAccessories = await getAvatarWearAccessories();
   const AllPlayerTrophies = await getAllTrophies();
+  const AllStaticNameplates = await getAllNameplates();
+
   return (
     <div className="p-10">
       <Tabs defaultValue="scores">
@@ -65,7 +74,14 @@ const Page = async () => {
               avatarWearSelectionData={AvatarWearAccessories}
             />
             <div className="pt-4">
-              <TrophyCustomization allTrophies={AllPlayerTrophies} />
+              <NameplateCustomization
+                playerNamePlateSelectionData={AllStaticNameplates}
+              />
+            </div>
+            <div className="pt-4">
+              <TrophyCustomization
+                playerTrophySelectionData={AllPlayerTrophies}
+              />
             </div>
           </div>
           <div></div>

components/(customization)/avatarcustomization/page.tsx

@@ -539,7 +539,9 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+            <div className="flex justify-end">
               <Button type="submit">Submit</Button>
+            </div>
           </form>
         </Form>
       </div>

components/(customization)/nameplatecustomization/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 getCurrentNameplate() {
+  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: {
+      nameplateId: true,
+    },
+  });
+  return nameplates;
+}
+
+export async function getNamePlates() {
+  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_nameplate.findMany({
+    select: {
+      id: true,
+      str: true,
+      sortName: true,
+      category: true,
+      imagePath: true,
+      rareType: true,
+      netOpenName: true,
+    },
+  });
+  return nameplates;
+}

components/(customization)/nameplatecustomization/page.tsx

@@ -0,0 +1,187 @@
+"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";
+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({
+    PlayerNamePlateId: 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 fetchAvatarParts = async () => {
+      try {
+        const data = await getCurrentNameplate();
+        if (data.length > 0) {
+          setNameplateId(data[0].nameplateId!);
+        }
+      } catch (error) {
+        console.error("Error fetching avatar parts:", error);
+      }
+    };
+
+    fetchAvatarParts();
+  }, []);
+
+  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: getTexture(
+        form.watch("PlayerNamePlateId"),
+        `namePlates/CHU_UI_NamePlate_000${nameplateId}.png`
+      ),
+      className: "avatar_head",
+    },
+  };
+
+  return (
+    <main className="flex">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="PlayerNamePlateId"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Name plate Item</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 Item"}
+                        <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("PlayerNamePlateId", 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

@@ -40,13 +40,13 @@ const getAvatarTextureSrc = (id: number | undefined) => {
 type static_trophies = cozynet_chuni_static_trophies;
 
 type AvatarSelectionProps = {
-  allTrophies: {
+  playerTrophySelectionData: {
     statictrophies: static_trophies[];
   };
 };
 
 export const TrophyCustomization: FC<AvatarSelectionProps> = ({
-  allTrophies,
+  playerTrophySelectionData,
 }) => {
   const FormSchema = z.object({
     trophies: z.number({
@@ -109,7 +109,7 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                           )}
                         >
                           {field.value
-                            ? allTrophies.statictrophies.find(
+                            ? playerTrophySelectionData.statictrophies.find(
                                 (part) => part.id === field.value
                               )?.str
                             : "Select Trophy"}
@@ -122,7 +122,8 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                         <CommandList>
                           <CommandEmpty>No avatar part found.</CommandEmpty>
                           <CommandGroup>
-                            {allTrophies.statictrophies.map((part) => (
+                            {playerTrophySelectionData.statictrophies.map(
+                              (part) => (
                                 <CommandItem
                                   value={part.id.toString()}
                                   key={part.id}
@@ -140,7 +141,8 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                                   />
                                   {part.str}
                                 </CommandItem>
-                            ))}
+                              )
+                            )}
                           </CommandGroup>
                         </CommandList>
                       </Command>
@@ -150,7 +152,9 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                 </FormItem>
               )}
             />
+            <div className="flex justify-end">
               <Button type="submit">Submit</Button>
+            </div>
           </form>
         </Form>
       </div>