addded nameplates

This commit is contained in:
Polaris 2024-07-26 14:08:36 -04:00
parent 5af3b9236b
commit ce82e860bd
5 changed files with 284 additions and 28 deletions

View File

@ -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>

View File

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

View File

@ -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;
}

View File

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

View File

@ -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>