updated share page ui and table types
This commit is contained in:
polaris
@ -1,7 +1,8 @@
|
||||
import { getAuth } from "@/auth/queries/getauth";
|
||||
import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
|
||||
import { shareScore } from "../token";
|
||||
import { getDifficultyClass, getDifficultyText } from "@/lib/helpers";
|
||||
import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers";
|
||||
import { type chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
|
||||
export default async function Share({
|
||||
params,
|
||||
@ -30,32 +31,81 @@ export default async function Share({
|
||||
const playlogIds = await generatePlaylogId(playlogId);
|
||||
|
||||
// Filter songsData to match the playlogIds
|
||||
const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
|
||||
const matchedSongs: chuni_score_playlog[] = songsData.filter((song) =>
|
||||
playlogIds.includes(song.id)
|
||||
);
|
||||
return (
|
||||
<div className=" h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
|
||||
<div className="col-span-2 row-span-1 row-start-2 col-start-2 bg-pink-200 rounded-lg shadow-md flex items-center justify-center">
|
||||
<div className="h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
|
||||
<div className="col-span-2 row-span-1 row-start-2 col-start-2 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
{matchedSongs.map((song) => (
|
||||
<div key={song.id} className=" flex justify-center items-center">
|
||||
<div className="text-white text-lg">
|
||||
<p>Score: {song.score}</p>
|
||||
<div
|
||||
key={song.id}
|
||||
className="flex justify-center items-center w-full"
|
||||
>
|
||||
<div className=" w-full p-4">
|
||||
<div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium ">
|
||||
<span className=" text-white font-bold text-xl ">
|
||||
{song.isNewRecord && "NEW RECORD!!"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-center p-5 font-bold text-4xl">
|
||||
{" "}
|
||||
{song.score?.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-4 row-span-4 row-start-2 bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
|
||||
<p>Broccoli</p>
|
||||
<div className="col-span-4 row-span-4 row-start-2 bg-white rounded-lg shadow-md flex flex-col justify-start items-center p-4">
|
||||
{matchedSongs.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium">
|
||||
<span className="text-white font-bold text-xl">
|
||||
{song.isNewRecord && "NEW!!"}
|
||||
</span>
|
||||
</div>
|
||||
<div className=" flex items-center justify-center">
|
||||
<span className=" text-black text-center p-5 font-bold text-8xl">
|
||||
{getGrade(song.score ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 col-start-2 row-span-3 row-start-3 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
||||
<p>Tamago</p>
|
||||
<div className="col-span-1 col-start-3 row-span-1 row-start-3 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
{matchedSongs.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<div className=" flex flex-col items-center justify-center">
|
||||
<span className=" text-black text-center p-5 font-bold text-xl">
|
||||
{song.isFullCombo && "FULL COMBO"}
|
||||
</span>
|
||||
<span className=" text-black text-center font-medium text-xl">
|
||||
Max combo: {song.maxCombo}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 col-start-2 row-span-2 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
||||
<p>Pork</p>
|
||||
<div className="col-span-1 col-start-3 row-span-3 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
{matchedSongs.map((song) => (
|
||||
<div key={song.id} className="w-full p-5">
|
||||
<div className=" flex flex-col items-center justify-center ">
|
||||
<span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md ">
|
||||
Judge Justice: {song.judgeJustice}
|
||||
</span>
|
||||
<span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md m-5">
|
||||
Judge Attack: {song.judgeAttack}
|
||||
</span>
|
||||
<span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md">
|
||||
Miss: {song.judgeGuilty}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-4 col-start-4 row-span-1 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
|
||||
<div className="col-span-4 col-start-4 row-span-1 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<p>Edamame</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,37 +16,33 @@ import { Badge } from "@/components/ui/badge";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { generateShareToken } from "@/app/(sharing)/[token]/token";
|
||||
export type Song = {
|
||||
title: string;
|
||||
artist: string;
|
||||
score?: number | null;
|
||||
userPlayDate: string | null;
|
||||
isFullCombo: boolean | null;
|
||||
isAllJustice: boolean | null;
|
||||
id: number;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Song>[] = [
|
||||
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
|
||||
export const columns: ColumnDef<chuni_score_playlog & chuni_static_music>[] = [
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Title",
|
||||
cell: ({ row }) => (
|
||||
<div>
|
||||
<div className="font-medium ">
|
||||
<div className="font-medium">
|
||||
{row.original.title}
|
||||
<span className="space-x-2 pl-2">
|
||||
{row.original.isFullCombo && (
|
||||
<Badge className="rounded-sm">Full Combo</Badge>
|
||||
)}
|
||||
{row.original.isAllJustice && (
|
||||
<Badge className="rounded-sm bg-yellow-500 text-black">
|
||||
<Badge className="rounded-sm bg-yellow-500 text-black">
|
||||
All Justice
|
||||
</Badge>
|
||||
)}
|
||||
{row.original.isNewRecord && (
|
||||
<Badge className="rounded-sm bg-pink-400 text-white">New!!</Badge>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground truncate inline-block w-[200px] ">
|
||||
<div className="text-sm text-muted-foreground truncate inline-block w-[200px]">
|
||||
{row.original.artist}
|
||||
</div>
|
||||
</div>
|
||||
@ -68,14 +64,13 @@ export const columns: ColumnDef<Song>[] = [
|
||||
const song = row.original;
|
||||
const [error, setError] = useState<string>("");
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
|
||||
const handleGenerateShareToken = async () => {
|
||||
const { token, error } = await generateShareToken(row.original.id);
|
||||
if (error) {
|
||||
setError(error);
|
||||
} else {
|
||||
const newTab = window.open(`/${token}/${row.original.id}`, '_blank');
|
||||
const newTab = window.open(`/${token}/${row.original.id}`, "_blank");
|
||||
if (newTab) {
|
||||
newTab.focus();
|
||||
} else {
|
||||
@ -96,7 +91,9 @@ export const columns: ColumnDef<Song>[] = [
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigator.clipboard.writeText(song.title)}
|
||||
onClick={() =>
|
||||
song.title && navigator.clipboard.writeText(song.title)
|
||||
}
|
||||
>
|
||||
Copy song title
|
||||
</DropdownMenuItem>
|
||||
|
||||
Reference in New Issue
Block a user