forked from PolarisPyra/daphnis
redesigned share page and change type names
This commit is contained in:
polaris
parent
1410028235
commit
e1a9760b38
@ -2,7 +2,13 @@ import { getAuth } from "@/auth/queries/getauth";
|
||||
import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
|
||||
import { shareScore } from "../token";
|
||||
import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers";
|
||||
import { type chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
import {
|
||||
type chuni_score_playlog,
|
||||
chuni_static_music,
|
||||
} from "@/prisma/schemas/artemis/generated/artemis";
|
||||
|
||||
type chunithm = chuni_score_playlog &
|
||||
chuni_static_music & { playCount: number };
|
||||
|
||||
export default async function Share({
|
||||
params,
|
||||
@ -31,83 +37,90 @@ export default async function Share({
|
||||
const playlogIds = await generatePlaylogId(playlogId);
|
||||
|
||||
// Filter songsData to match the playlogIds
|
||||
const matchedSongs: chuni_score_playlog[] = songsData.filter((song) =>
|
||||
const chunithm: chunithm[] = 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-white rounded-lg shadow-md flex items-center justify-center">
|
||||
{matchedSongs.map((song) => (
|
||||
<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 className="flex flex-col items-center justify-center space-y-4 p-4 dark:text-black">
|
||||
<div className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
{song.isNewRecord && "NEW RECORD!!"}
|
||||
</span>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
Song: {song.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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 className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.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>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
{song.isNewRecord && "NEW RECORD!!"}
|
||||
</span>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
Artist: {song.artist}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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 className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.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>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
{song.isNewRecord && "NEW RECORD!!"}
|
||||
</span>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
Score: {song.score?.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<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 ">
|
||||
|
||||
<div className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
Rank: {getGrade(song.score ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
{song.isFullCombo && "FULL COMBO"}
|
||||
</span>
|
||||
<span className="text-black text-center font-bold text-xl">
|
||||
Max combo: {song.maxCombo}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-full p-4 bg-white dark:text-black rounded-sm">
|
||||
{chunithm.map((song) => (
|
||||
<div key={song.id} className="w-full">
|
||||
<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">
|
||||
<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-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<p>Edamame</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -21,10 +21,10 @@ 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 &
|
||||
type chunithm = chuni_score_playlog &
|
||||
chuni_static_music & { playCount: number };
|
||||
|
||||
export const columns: ColumnDef<includesPlayCount>[] = [
|
||||
export const columns: ColumnDef<chunithm>[] = [
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Title",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user