144 lines
3.7 KiB
TypeScript
144 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import { MoreHorizontal } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { generateShareToken } from "@/app/(sharing)/[token]/token";
|
|
import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
|
|
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
|
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
|
import { chuni_score_best } from "@/prisma/schemas/artemis/generated/artemis";
|
|
import { getDifficultyText, getGrade } from "@/lib/helpers";
|
|
import { Skeleton } from "../ui/skeleton";
|
|
import ActionsCell from "./moreAction";
|
|
type chunithm = chuni_score_playlog &
|
|
chuni_static_music & { playCount: number };
|
|
|
|
export const columns: ColumnDef<chunithm>[] = [
|
|
{
|
|
accessorKey: "title",
|
|
header: "Title",
|
|
|
|
cell: ({ row }) => {
|
|
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
|
|
|
return (
|
|
<div className="flex w-[300px] items-center truncate font-medium">
|
|
{!jacketPath ? (
|
|
<Skeleton className="mr-2 inline-block h-8 w-8" />
|
|
) : (
|
|
<img
|
|
src={`/jacketArts/${jacketPath}`}
|
|
alt="Jacket"
|
|
className="mr-2 inline-block h-[70px] w-[70px]"
|
|
/>
|
|
)}
|
|
<span className="truncate">{row.original.title}</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
accessorKey: "score",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button variant="ghost">
|
|
Score
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => {
|
|
return (
|
|
<div>
|
|
{row.original.score?.toLocaleString()}
|
|
<div className="mt-2 w-24 rounded-sm bg-primary pl-2 text-primary-foreground">
|
|
e
|
|
</div>
|
|
<div
|
|
className={`mt-2 w-24 rounded-sm pl-2 ${
|
|
row.original.isNewRecord
|
|
? "bg-primary text-primary-foreground"
|
|
: "invisible"
|
|
}`}
|
|
>
|
|
<span>New!!</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
|
|
{
|
|
accessorKey: "grade",
|
|
header: "Grade",
|
|
cell: ({ row }) => (
|
|
<div className="font-medium"> {getGrade(row.original.score ?? 0)}</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "userPlayDate",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
Date
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "difficulty",
|
|
header: "Difficulty",
|
|
cell: ({ row }) => (
|
|
<div className="font-medium">
|
|
{row.original.level}
|
|
<br />
|
|
{getDifficultyText(row.original.chartId)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "FC / AJ",
|
|
header: "FC / AJ",
|
|
cell: ({ row }) => (
|
|
<div className="font-medium">
|
|
{!row.original.isAllJustice && row.original.isFullCombo && (
|
|
<span>Full Combo</span>
|
|
)}
|
|
{row.original.isAllJustice && <span>All Justice</span>}
|
|
</div>
|
|
),
|
|
},
|
|
|
|
{
|
|
accessorKey: "Attempts",
|
|
header: "Attempts",
|
|
|
|
cell: ({ row }) => (
|
|
<div className="font-medium">{row.original.playCount}</div>
|
|
),
|
|
},
|
|
// for fixing react-hooks/rules-of-hooks
|
|
{
|
|
id: "actions",
|
|
header: () => <div className="pl-2 text-left">More</div>,
|
|
cell: ({ row }) => <ActionsCell row={row} />,
|
|
},
|
|
];
|