added dark mode and jacket art

This commit is contained in:
polaris 2024-07-01 14:19:20 -04:00
parent 076be97aab
commit fce22cda7c
9 changed files with 88 additions and 8 deletions

4
.gitignore vendored
View File

@ -34,4 +34,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
.env
.env
/public

View File

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

9
app/theme-provider.tsx Normal file
View 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>;
}

BIN
bun.lockb

Binary file not shown.

40
components/darkmode.tsx Normal file
View 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>
);
}

View File

@ -2,6 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ModeToggle } from "../darkmode";
const NAV_ITEMS = [
{ href: "/home", label: "Home" },

View File

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

View File

@ -19,6 +19,7 @@ import { generateShareToken } from "@/app/(sharing)/[token]/token";
import { chuni_score_playlog } 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 &
chuni_static_music & { playCount: number };
@ -27,15 +28,31 @@ export const columns: ColumnDef<includesPlayCount>[] = [
{
accessorKey: "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",
header: "Score",
cell: ({ row }) => (
<div>
{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>
),
},

View File

@ -13,7 +13,6 @@ type LinkSharingToken = {
export async function getSongsWithTitles(userId: number) {
try {
const songs: ChuniScorePlaylog[] = await artemis.chuni_score_playlog.findMany({
where: {
user: userId,
@ -63,7 +62,6 @@ export async function getSongsWithTitles(userId: number) {
},
});
// Extract unique musicIds from the fetched songs
const chuniScorePlaylogMusicId = songs
.map((song) => song.musicId)
.filter((id): id is number => id !== null);
@ -82,6 +80,7 @@ export async function getSongsWithTitles(userId: number) {
level: true,
genre: 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) => {
if (item.musicId !== null) {
map[item.musicId] = item._count.musicId;
@ -121,6 +119,7 @@ export async function getSongsWithTitles(userId: number) {
level: staticInfo?.level || "Unknown Level",
chartlevel: song.level || "Unknown Level",
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) {
try {
const tokens = (await daphnis.linkSharingToken.findMany({