PolarisPyra/daphnis
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed hydration error when changing theme and added dynamic default avatar

Browse Source
This commit is contained in:
Polaris 2024-07-24 23:25:01 -04:00
parent 8df0064100
commit 0a2eac63b6
7 changed files with 171 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/layout.tsx
View File

@ -2,7 +2,7 @@ import type { Metadata } from "next";
import { GeistSans } from "geist/font/sans"; import { GeistSans } from "geist/font/sans";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "./theme-provider"; import Providers from "./theme-provider";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Daphnis", title: "Daphnis",
description: "Artemis score viewer", description: "Artemis score viewer",
@ -16,14 +16,9 @@ export default function RootLayout({
return ( return (
<html lang="en" className={GeistSans.className}> <html lang="en" className={GeistSans.className}>
<body className={GeistSans.className}> <body className={GeistSans.className}>
<ThemeProvider <Providers>
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<main className="">{children} </main> <main className="">{children} </main>
</ThemeProvider> </Providers>
<Toaster /> <Toaster />
</body> </body>
</html> </html>

24
app/theme-provider.tsx
View File

@ -1,9 +1,23 @@
"use client"; "use client";
import * as React from "react"; import { ThemeProvider } from "next-themes";
import { ThemeProvider as NextThemesProvider } from "next-themes"; import { useEffect, useState } from "react";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) { function Providers({ children }: { children: React.ReactNode }) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>; const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
return (
<ThemeProvider attribute="class" enableSystem={true}>
{children}
</ThemeProvider>
);
} }
export default Providers;

67
components/avatarcustomization/actions.ts
View File

@ -7,27 +7,50 @@ import type * as Prisma from "@prisma/client";
// type ChuniScorePlaylog = Prisma.PrismaClient; // type ChuniScorePlaylog = Prisma.PrismaClient;
// type ChuniStaticMusic = Prisma.PrismaClient; // type ChuniStaticMusic = Prisma.PrismaClient;
export async function getCurrentAvatarParts() {
const { user } = await getAuth();
if (!user || !user.accessCode) {
throw new Error("User is not authenticated or accessCode is missing");
}
const avatarParts = await artemis.chuni_profile_data.findMany({
where: {
user: user.UserId,
},
select: {
avatarSkin: true,
avatarBack: true,
avatarFace: true,
avatarFront: true,
avatarHead: true,
avatarItem: true,
avatarWear: true,
},
});
return avatarParts;
}
export async function getAllAvatarParts(category: number) { export async function getAllAvatarParts(category: number) {
const { user } = await getAuth(); const { user } = await getAuth();
if (!user || !user.accessCode) { if (!user || !user.accessCode) {
throw new Error("User is not authenticated or accessCode is missing"); throw new Error("User is not authenticated or accessCode is missing");
} }
const avatarParts = await artemis.chuni_static_avatar.findMany({ const avatarParts = await artemis.chuni_static_avatar.findMany({
where: { where: {
category: category category: category,
}, },
select: { select: {
id: true, id: true,
name: true, name: true,
avatarAccessoryId: true, avatarAccessoryId: true,
category: true, category: true,
version: true, version: true,
iconPath: true, iconPath: true,
texturePath: true, texturePath: true,
} },
}); });
return avatarParts; return avatarParts;
} }

79
components/avatarcustomization/page.tsx
View File

@ -1,9 +1,9 @@
"use client"; "use client";
import React, { FC } from "react"; import React, { FC, useEffect, useState } from "react";
import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis"; import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import { getCurrentAvatarParts } from "./actions";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -28,7 +28,6 @@ import {
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { z } from "zod"; import { z } from "zod";
type chunithm_avatar = chuni_static_avatar;
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "../ui/use-toast"; import { toast } from "../ui/use-toast";
@ -38,11 +37,12 @@ const getAvatarTextureSrc = (id: number | undefined) => {
return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`; return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`;
}; };
type chunithm_avatar = chuni_static_avatar;
type AvatarSelectionProps = { type AvatarSelectionProps = {
avatarHeadSelectionData: { avatarHeadSelectionData: {
avatarParts: chunithm_avatar[]; avatarParts: chunithm_avatar[];
}; };
avatarFaceSelectionData: { avatarFaceSelectionData: {
avatarParts: chunithm_avatar[]; avatarParts: chunithm_avatar[];
}; };
@ -86,6 +86,46 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
resolver: zodResolver(FormSchema), resolver: zodResolver(FormSchema),
}); });
const [avatarFaceId, setAvatarFaceId] = useState<number | undefined>(
undefined
);
const [avatarSkinId, setAvatarSkinId] = useState<number | undefined>(
undefined
);
const [avatarHeadId, setAvatarHeadId] = useState<number | undefined>(
undefined
);
const [avatarWearId, setAvatarWearId] = useState<number | undefined>(
undefined
);
const [avatarBackId, setAvatarBackId] = useState<number | undefined>(
undefined
);
const [avatarItemId, setAvatarItemId] = useState<number | undefined>(
undefined
);
useEffect(() => {
const fetchAvatarParts = async () => {
try {
const data = await getCurrentAvatarParts();
if (data.length > 0) {
setAvatarFaceId(data[0].avatarFace!);
setAvatarSkinId(data[0].avatarSkin!);
setAvatarHeadId(data[0].avatarHead!);
setAvatarWearId(data[0].avatarWear!);
setAvatarBackId(data[0].avatarBack!);
setAvatarItemId(data[0].avatarItem!);
}
} catch (error) {
console.error("Error fetching avatar parts:", error);
}
};
fetchAvatarParts();
}, []);
function onSubmit(data: z.infer<typeof FormSchema>) { function onSubmit(data: z.infer<typeof FormSchema>) {
toast({ toast({
title: "You submitted the following values:", title: "You submitted the following values:",
@ -105,67 +145,70 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
AvatarHeadAccessory: { AvatarHeadAccessory: {
src: getTexture( src: getTexture(
form.watch("AvatarHeadAccessory"), form.watch("AvatarHeadAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultHead.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarHeadId}.png`
), ),
className: "avatar_head", className: "avatar_head",
}, },
AvatarFaceAccessory: { AvatarFaceAccessory: {
src: getTexture( src: getTexture(
form.watch("AvatarFaceAccessory"), form.watch("AvatarFaceAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultFace.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarFaceId}.png`
), ),
className: "avatar_face", className: "avatar_face",
}, },
AvatarItemAccessoryR: { AvatarItemAccessoryR: {
src: getTexture( src: getTexture(
form.watch("AvatarItemAccessory"), form.watch("AvatarItemAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
), ),
className: "avatar_item_r ", className: "avatar_item_r ",
}, },
AvatarItemAccessoryL: { AvatarItemAccessoryL: {
src: getTexture( src: getTexture(
form.watch("AvatarItemAccessory"), form.watch("AvatarItemAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultItem.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
), ),
className: "avatar_item_l ", className: "avatar_item_l ",
}, },
AvatarBackAccessory: { AvatarBackAccessory: {
src: getTexture( src: getTexture(
form.watch("AvatarBackAccessory"), form.watch("AvatarBackAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultBack.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarBackId}.png`
), ),
className: "avatar_back", className: "avatar_back",
}, },
AvatarWearAccessory: { AvatarWearAccessory: {
src: getTexture( src: getTexture(
form.watch("AvatarWearAccessory"), form.watch("AvatarWearAccessory"),
"avatarAccessory/CHU_UI_Avatar_Tex_DefaultWear.png" `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarWearId}.png`
), ),
className: "avatar_wear", className: "avatar_wear",
}, },
avatarSkinAccessory: { avatarSkinAccessory: {
src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png", src: getTexture(
avatarSkinId,
`avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`
),
className: "avatar_skin", className: "avatar_skin",
}, },
AvatarRightHand: { AvatarRightHand: {
src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png", src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
className: "avatar_hand_r", className: "avatar_hand_r",
}, },
AvatarSkinFootR: {
src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,
className: "avatar_skinfoot_r",
},
AvatarLeftHand: { AvatarLeftHand: {
src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png", src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
className: "avatar_hand_l", className: "avatar_hand_l",
}, },
AvatarSkinFootL: { AvatarSkinFootL: {
src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png", src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,
className: "avatar_skinfoot_l", className: "avatar_skinfoot_l",
}, },
AvatarSkinFootR: {
src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
className: "avatar_skinfoot_r",
},
AvatarFaceStatic: { AvatarFaceStatic: {
src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png", src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
className: "avatar_face_static", className: "avatar_face_static",

68
components/darkmode.tsx
View File

@ -1,40 +1,46 @@
"use client"; "use client";
import * as React from "react"; import React, { useState, useEffect } from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button"; function DarkToggle() {
import { const [mounted, setMounted] = useState(false);
DropdownMenu, const [isDark, setIsDark] = useState(false);
DropdownMenuContent, const { theme, setTheme } = useTheme();
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export function ModeToggle() { useEffect(() => {
const { setTheme } = useTheme(); setMounted(true);
setIsDark(theme === "dark");
}, [theme]);
if (!mounted) {
return null;
}
const toggleDarkMode = () => {
setIsDark(!isDark);
setTheme(theme === "light" ? "dark" : "light");
};
return ( return (
<DropdownMenu> <button
<DropdownMenuTrigger asChild> onClick={toggleDarkMode}
<Button variant="outline" size="icon"> className="flex items-center focus:outline-none"
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> >
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> {isDark ? (
<span className="sr-only">Toggle theme</span> <div className="mr-2 text-2xl text-yellow-400">
</Button> <Moon />
</DropdownMenuTrigger> </div>
<DropdownMenuContent align="end"> ) : (
<DropdownMenuItem onClick={() => setTheme("light")}> <div className="mr-2 text-2xl text-gray-700">
Light <span className="text-yellow-400">
</DropdownMenuItem> <Sun />
<DropdownMenuItem onClick={() => setTheme("dark")}> </span>
Dark </div>
</DropdownMenuItem> )}
<DropdownMenuItem onClick={() => setTheme("system")}> </button>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
); );
} }
export default DarkToggle;

4
components/navigationbar/navigationbar.tsx
View File

@ -16,7 +16,7 @@ import { getAuth } from "@/auth/queries/getauth";
import NavigationMenuDesktop from "./desktopNavBar"; import NavigationMenuDesktop from "./desktopNavBar";
import NavigationMenuMobile from "./mobileNavBar"; import NavigationMenuMobile from "./mobileNavBar";
import { signOut } from "@/auth/components/signout"; import { signOut } from "@/auth/components/signout";
import { ModeToggle } from "../darkmode"; import DarkToggle from "../darkmode";
const HeaderNavigation = async () => { const HeaderNavigation = async () => {
const { user } = await getAuth(); const { user } = await getAuth();
@ -51,7 +51,7 @@ const HeaderNavigation = async () => {
/> />
</div> </div>
</form> </form>
<ModeToggle /> <DarkToggle />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>

4
next.config.mjs
View File

@ -1,6 +1,10 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
compiler: {
styledComponents: true,
},
webpack: (config) => { webpack: (config) => {
config.externals.push('@node-rs/argon2', '@node-rs/bcrypt'); config.externals.push('@node-rs/argon2', '@node-rs/bcrypt');
return config; return config;
}, },