added dark mode and jacket art
This commit is contained in:
parent
076be97aab
commit
fce22cda7c
4
.gitignore
vendored
4
.gitignore
vendored
@ -34,4 +34,6 @@ yarn-error.log*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
.env
|
.env
|
||||||
|
|
||||||
|
/public
|
@ -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";
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Daphnis",
|
title: "Daphnis",
|
||||||
description: "Artemis score viewer",
|
description: "Artemis score viewer",
|
||||||
@ -16,7 +16,14 @@ 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}>
|
||||||
<main className="">{children} </main>
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
<main className="">{children} </main>
|
||||||
|
</ThemeProvider>
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
9
app/theme-provider.tsx
Normal file
9
app/theme-provider.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
import { type ThemeProviderProps } from "next-themes/dist/types";
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||||
|
}
|
40
components/darkmode.tsx
Normal file
40
components/darkmode.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Moon, Sun } from "lucide-react";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
|
export function ModeToggle() {
|
||||||
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<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" />
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||||
|
Light
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||||
|
Dark
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||||
|
System
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
@ -2,6 +2,7 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
import { ModeToggle } from "../darkmode";
|
||||||
|
|
||||||
const NAV_ITEMS = [
|
const NAV_ITEMS = [
|
||||||
{ href: "/home", label: "Home" },
|
{ href: "/home", label: "Home" },
|
||||||
|
@ -16,6 +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";
|
||||||
const HeaderNavigation = async () => {
|
const HeaderNavigation = async () => {
|
||||||
const { user } = await getAuth();
|
const { user } = await getAuth();
|
||||||
|
|
||||||
@ -50,6 +51,8 @@ const HeaderNavigation = async () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<ModeToggle />
|
||||||
|
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
|
@ -19,6 +19,7 @@ import { generateShareToken } from "@/app/(sharing)/[token]/token";
|
|||||||
|
|
||||||
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||||
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
||||||
|
import { getGrade } from "@/lib/helpers";
|
||||||
|
|
||||||
type includesPlayCount = chuni_score_playlog &
|
type includesPlayCount = chuni_score_playlog &
|
||||||
chuni_static_music & { playCount: number };
|
chuni_static_music & { playCount: number };
|
||||||
@ -27,15 +28,31 @@ export const columns: ColumnDef<includesPlayCount>[] = [
|
|||||||
{
|
{
|
||||||
accessorKey: "title",
|
accessorKey: "title",
|
||||||
header: "Title",
|
header: "Title",
|
||||||
cell: ({ row }) => <div className="font-medium">{row.original.title}</div>,
|
cell: ({ row }) => {
|
||||||
|
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
||||||
|
return (
|
||||||
|
<div className="font-medium w-[200px] truncate">
|
||||||
|
{jacketPath && (
|
||||||
|
<img
|
||||||
|
src={`/jackets/${jacketPath}`}
|
||||||
|
alt="Jacket"
|
||||||
|
className="w-8 h-8 inline-block mr-2"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{row.original.title}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
accessorKey: "score",
|
accessorKey: "score",
|
||||||
header: "Score",
|
header: "Score",
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div>
|
<div>
|
||||||
{row.original.score?.toLocaleString()}
|
{row.original.score?.toLocaleString()}
|
||||||
{row.original.isNewRecord && <span className="pl-2 ">New!!</span>}{" "}
|
<span className="pl-2"> {getGrade(row.original.score ?? 0)}</span>
|
||||||
|
{row.original.isNewRecord && <span className="pl-2 ">New!!</span>}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -13,7 +13,6 @@ type LinkSharingToken = {
|
|||||||
|
|
||||||
export async function getSongsWithTitles(userId: number) {
|
export async function getSongsWithTitles(userId: number) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
const songs: ChuniScorePlaylog[] = await artemis.chuni_score_playlog.findMany({
|
const songs: ChuniScorePlaylog[] = await artemis.chuni_score_playlog.findMany({
|
||||||
where: {
|
where: {
|
||||||
user: userId,
|
user: userId,
|
||||||
@ -63,7 +62,6 @@ export async function getSongsWithTitles(userId: number) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Extract unique musicIds from the fetched songs
|
|
||||||
const chuniScorePlaylogMusicId = songs
|
const chuniScorePlaylogMusicId = songs
|
||||||
.map((song) => song.musicId)
|
.map((song) => song.musicId)
|
||||||
.filter((id): id is number => id !== null);
|
.filter((id): id is number => id !== null);
|
||||||
@ -82,6 +80,7 @@ export async function getSongsWithTitles(userId: number) {
|
|||||||
level: true,
|
level: true,
|
||||||
genre: true,
|
genre: true,
|
||||||
worldsEndTag: true,
|
worldsEndTag: true,
|
||||||
|
jacketPath: true, // Add jacketPath to the selection
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -98,7 +97,6 @@ export async function getSongsWithTitles(userId: number) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Create a map of musicId to play count
|
|
||||||
const playCountMap = playCounts.reduce((map, item) => {
|
const playCountMap = playCounts.reduce((map, item) => {
|
||||||
if (item.musicId !== null) {
|
if (item.musicId !== null) {
|
||||||
map[item.musicId] = item._count.musicId;
|
map[item.musicId] = item._count.musicId;
|
||||||
@ -121,6 +119,7 @@ export async function getSongsWithTitles(userId: number) {
|
|||||||
level: staticInfo?.level || "Unknown Level",
|
level: staticInfo?.level || "Unknown Level",
|
||||||
chartlevel: song.level || "Unknown Level",
|
chartlevel: song.level || "Unknown Level",
|
||||||
playCount: song.musicId !== null ? playCountMap[song.musicId] || 0 : 0,
|
playCount: song.musicId !== null ? playCountMap[song.musicId] || 0 : 0,
|
||||||
|
jacketPath: staticInfo?.jacketPath || "",
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -131,6 +130,8 @@ export async function getSongsWithTitles(userId: number) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export async function generatePlaylogId(playlogid: number) {
|
export async function generatePlaylogId(playlogid: number) {
|
||||||
try {
|
try {
|
||||||
const tokens = (await daphnis.linkSharingToken.findMany({
|
const tokens = (await daphnis.linkSharingToken.findMany({
|
||||||
|
Loading…
Reference in New Issue
Block a user