PolarisPyra/daphnis
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesigned share page and change type names

Browse Source
This commit is contained in:
polaris
2024-07-06 23:57:37 -04:00
parent 1410028235
commit e1a9760b38
2 changed files with 66 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/(sharing)/[token]/[id]/page.tsx
View File

@ -2,7 +2,13 @@ import { getAuth } from "@/auth/queries/getauth";
import { generatePlaylogId, getSongsWithTitles } from "@/lib/api"; import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
import { shareScore } from "../token"; import { shareScore } from "../token";
import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers"; 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({ export default async function Share({
params, params,
@ -31,68 +37,78 @@ export default async function Share({
const playlogIds = await generatePlaylogId(playlogId); const playlogIds = await generatePlaylogId(playlogId);
// Filter songsData to match the playlogIds // Filter songsData to match the playlogIds
const matchedSongs: chuni_score_playlog[] = songsData.filter((song) => const chunithm: chunithm[] = songsData.filter((song) =>
playlogIds.includes(song.id) playlogIds.includes(song.id)
); );
return ( 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="flex flex-col items-center justify-center space-y-4 p-4 dark:text-black">
<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"> <div className="w-full p-4 bg-white dark:text-black rounded-sm">
{matchedSongs.map((song) => ( {chunithm.map((song) => (
<div <div key={song.id} className="w-full">
key={song.id} <span className="text-black text-center font-bold text-xl">
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!!"} {song.isNewRecord && "NEW RECORD!!"}
</span> </span>
</div> <span className="text-black text-center font-bold text-xl">
<p className="text-center p-5 font-bold text-4xl"> Song: {song.title}
{" "} </span>
{song.score?.toLocaleString()}
</p>
</div>
</div> </div>
))} ))}
</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"> <div className="w-full p-4 bg-white dark:text-black rounded-sm">
{matchedSongs.map((song) => ( {chunithm.map((song) => (
<div key={song.id} className="w-full"> <div key={song.id} className="w-full">
<div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium"> <span className="text-black text-center font-bold text-xl">
<span className="text-white font-bold text-xl"> {song.isNewRecord && "NEW RECORD!!"}
{song.isNewRecord && "NEW!!"}
</span> </span>
</div> <span className="text-black text-center font-bold text-xl">
<div className=" flex items-center justify-center"> Artist: {song.artist}
<span className=" text-black text-center p-5 font-bold text-8xl">
{getGrade(song.score ?? 0)}
</span> </span>
</div> </div>
</div>
))} ))}
</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"> <div className="w-full p-4 bg-white dark:text-black rounded-sm">
{matchedSongs.map((song) => ( {chunithm.map((song) => (
<div key={song.id} className="w-full"> <div key={song.id} className="w-full">
<div className=" flex flex-col items-center justify-center"> <span className="text-black text-center font-bold text-xl">
<span className=" text-black text-center p-5 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="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"} {song.isFullCombo && "FULL COMBO"}
</span> </span>
<span className=" text-black text-center font-medium text-xl"> <span className="text-black text-center font-bold text-xl">
Max combo: {song.maxCombo} Max combo: {song.maxCombo}
</span> </span>
</div> </div>
</div>
))} ))}
</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 className="w-full p-4 bg-white dark:text-black rounded-sm">
<div key={song.id} className="w-full p-5"> {chunithm.map((song) => (
<div className=" flex flex-col items-center justify-center "> <div key={song.id} className="w-full">
<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="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} Judge Justice: {song.judgeJustice}
</span> </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"> <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">
@ -105,9 +121,6 @@ export default async function Share({
</div> </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> </div>
); );
} }

4
components/scoreplaylog/colums.tsx
View File

@ -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 { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
import { getGrade } from "@/lib/helpers"; import { getGrade } from "@/lib/helpers";
type includesPlayCount = chuni_score_playlog & type chunithm = chuni_score_playlog &
chuni_static_music & { playCount: number }; chuni_static_music & { playCount: number };
export const columns: ColumnDef<includesPlayCount>[] = [ export const columns: ColumnDef<chunithm>[] = [
{ {
accessorKey: "title", accessorKey: "title",
header: "Title", header: "Title",