2024-06-29 05:22:22 +00:00
|
|
|
"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";
|
2024-07-07 15:07:23 +00:00
|
|
|
import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
|
2024-06-30 18:24:33 +00:00
|
|
|
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
|
|
|
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
2024-08-23 14:51:47 +00:00
|
|
|
import { chuni_score_best } from "@/prisma/schemas/artemis/generated/artemis";
|
2024-08-14 15:52:19 +00:00
|
|
|
import { getDifficultyText, getGrade } from "@/lib/helpers";
|
2024-07-21 04:02:26 +00:00
|
|
|
import { Skeleton } from "../ui/skeleton";
|
2024-06-30 18:24:33 +00:00
|
|
|
|
2024-08-23 14:51:47 +00:00
|
|
|
type chunithm = chuni_score_playlog & chuni_static_music & chuni_score_best;
|
2024-07-01 17:42:57 +00:00
|
|
|
|
2024-07-07 03:57:37 +00:00
|
|
|
export const columns: ColumnDef<chunithm>[] = [
|
2024-06-29 05:22:22 +00:00
|
|
|
{
|
|
|
|
accessorKey: "title",
|
|
|
|
header: "Title",
|
2024-07-07 14:24:04 +00:00
|
|
|
|
2024-07-01 18:19:20 +00:00
|
|
|
cell: ({ row }) => {
|
|
|
|
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
2024-08-23 14:51:47 +00:00
|
|
|
|
2024-07-01 18:19:20 +00:00
|
|
|
return (
|
2024-07-28 05:24:54 +00:00
|
|
|
<div className="flex w-[300px] items-center truncate font-medium">
|
2024-07-21 17:24:31 +00:00
|
|
|
{!jacketPath ? (
|
2024-07-28 05:24:54 +00:00
|
|
|
<Skeleton className="mr-2 inline-block h-8 w-8" />
|
2024-07-21 04:02:26 +00:00
|
|
|
) : (
|
2024-07-01 18:19:20 +00:00
|
|
|
<img
|
2024-08-17 20:25:04 +00:00
|
|
|
src={`/jacketArts/${jacketPath}`}
|
2024-07-01 18:19:20 +00:00
|
|
|
alt="Jacket"
|
2024-08-23 14:51:47 +00:00
|
|
|
className="mr-2 inline-block h-[70px] w-[70px]"
|
2024-07-01 18:19:20 +00:00
|
|
|
/>
|
|
|
|
)}
|
2024-07-21 15:35:22 +00:00
|
|
|
<span className="truncate">{row.original.title}</span>
|
2024-07-01 18:19:20 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
2024-07-01 16:47:02 +00:00
|
|
|
},
|
2024-07-01 18:19:20 +00:00
|
|
|
|
2024-07-01 16:47:02 +00:00
|
|
|
{
|
|
|
|
accessorKey: "score",
|
2024-07-07 15:07:23 +00:00
|
|
|
header: ({ column }) => {
|
|
|
|
return (
|
2024-08-23 14:51:47 +00:00
|
|
|
<Button variant="ghost">
|
2024-07-07 15:07:23 +00:00
|
|
|
Score
|
|
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
2024-08-23 14:51:47 +00:00
|
|
|
cell: ({ row }) => {
|
|
|
|
const isSuccess = row.original.isSuccess;
|
|
|
|
const skillId = row.original.skillId;
|
|
|
|
let isSuccessText = "";
|
|
|
|
|
|
|
|
switch (isSuccess) {
|
|
|
|
case 0:
|
|
|
|
isSuccessText = "Not Clear";
|
|
|
|
break;
|
|
|
|
case 1:
|
|
|
|
isSuccessText = "Clear";
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
isSuccessText = "Hard";
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
isSuccessText = "Absolute";
|
|
|
|
break;
|
|
|
|
case 4:
|
|
|
|
isSuccessText = "Absolute+";
|
|
|
|
break;
|
|
|
|
case 6:
|
|
|
|
isSuccessText = "Catastrophe";
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
isSuccessText = isSuccess?.toString() ?? "";
|
|
|
|
break;
|
|
|
|
}
|
2024-07-07 15:46:39 +00:00
|
|
|
|
2024-08-23 14:51:47 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{row.original.score?.toLocaleString()}
|
|
|
|
<div className="mt-2 w-24 rounded-sm bg-primary pl-2 text-primary-foreground">
|
|
|
|
{isSuccessText}
|
|
|
|
</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>
|
|
|
|
);
|
2024-07-07 15:46:39 +00:00
|
|
|
},
|
2024-07-07 14:24:04 +00:00
|
|
|
},
|
2024-08-23 14:51:47 +00:00
|
|
|
|
2024-07-07 14:24:04 +00:00
|
|
|
{
|
|
|
|
accessorKey: "grade",
|
|
|
|
header: "Grade",
|
|
|
|
cell: ({ row }) => (
|
|
|
|
<div className="font-medium"> {getGrade(row.original.score ?? 0)}</div>
|
|
|
|
),
|
|
|
|
},
|
2024-07-01 16:47:02 +00:00
|
|
|
{
|
|
|
|
accessorKey: "userPlayDate",
|
2024-07-07 15:07:23 +00:00
|
|
|
header: ({ column }) => {
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
variant="ghost"
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
|
|
>
|
|
|
|
Date
|
|
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
2024-07-01 16:47:02 +00:00
|
|
|
},
|
2024-07-07 14:24:04 +00:00
|
|
|
{
|
|
|
|
accessorKey: "difficulty",
|
|
|
|
header: "Difficulty",
|
2024-08-14 15:52:19 +00:00
|
|
|
cell: ({ row }) => (
|
|
|
|
<div className="font-medium">
|
2024-08-16 19:25:14 +00:00
|
|
|
{row.original.level}
|
|
|
|
<br />
|
|
|
|
{getDifficultyText(row.original.chartId)}
|
|
|
|
</div>
|
2024-08-14 15:52:19 +00:00
|
|
|
),
|
2024-07-07 14:24:04 +00:00
|
|
|
},
|
2024-07-01 16:47:02 +00:00
|
|
|
{
|
|
|
|
accessorKey: "FC / AJ",
|
2024-08-17 20:25:04 +00:00
|
|
|
header: "FC / AJ",
|
2024-06-29 05:22:22 +00:00
|
|
|
cell: ({ row }) => (
|
2024-07-07 15:46:39 +00:00
|
|
|
<div className="font-medium">
|
|
|
|
{!row.original.isAllJustice && row.original.isFullCombo && (
|
|
|
|
<span>Full Combo</span>
|
|
|
|
)}
|
|
|
|
{row.original.isAllJustice && <span>All Justice</span>}
|
2024-06-29 05:22:22 +00:00
|
|
|
</div>
|
|
|
|
),
|
|
|
|
},
|
2024-07-07 14:24:04 +00:00
|
|
|
|
2024-06-29 05:22:22 +00:00
|
|
|
{
|
2024-07-01 16:47:02 +00:00
|
|
|
accessorKey: "Attempts",
|
|
|
|
header: "Attempts",
|
2024-07-07 15:07:23 +00:00
|
|
|
|
2024-07-01 17:42:57 +00:00
|
|
|
cell: ({ row }) => (
|
|
|
|
<div className="font-medium">{row.original.playCount}</div>
|
|
|
|
),
|
2024-06-29 05:22:22 +00:00
|
|
|
},
|
2024-07-07 14:24:04 +00:00
|
|
|
|
2024-06-29 05:22:22 +00:00
|
|
|
{
|
|
|
|
id: "actions",
|
2024-07-28 05:24:54 +00:00
|
|
|
header: () => <div className="pl-2 text-left">More</div>,
|
2024-06-29 05:22:22 +00:00
|
|
|
cell: ({ row }) => {
|
|
|
|
const [error, setError] = useState<string>("");
|
2024-07-14 21:51:10 +00:00
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
2024-06-29 05:22:22 +00:00
|
|
|
const router = useRouter();
|
2024-06-30 18:24:33 +00:00
|
|
|
|
2024-06-29 05:22:22 +00:00
|
|
|
const handleGenerateShareToken = async () => {
|
|
|
|
const { token, error } = await generateShareToken(row.original.id);
|
|
|
|
if (error) {
|
|
|
|
setError(error);
|
|
|
|
} else {
|
2024-07-21 15:40:54 +00:00
|
|
|
const newTab = window.open(`/${token}/${row.original.id}`);
|
2024-06-29 19:25:43 +00:00
|
|
|
if (newTab) {
|
|
|
|
newTab.focus();
|
|
|
|
} else {
|
|
|
|
router.push(`/${token}/${row.original.id}`);
|
|
|
|
}
|
2024-06-29 05:22:22 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<DropdownMenu>
|
|
|
|
<DropdownMenuTrigger asChild>
|
|
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
|
|
<span className="sr-only">Open menu</span>
|
|
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
|
|
</Button>
|
|
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end">
|
|
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
2024-08-23 14:51:47 +00:00
|
|
|
|
2024-06-29 05:22:22 +00:00
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuItem onClick={handleGenerateShareToken}>
|
2024-06-29 19:25:43 +00:00
|
|
|
Share Song
|
2024-06-29 05:22:22 +00:00
|
|
|
</DropdownMenuItem>
|
|
|
|
</DropdownMenuContent>
|
|
|
|
</DropdownMenu>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|