added clear lamps and fixed score grid size problems

This commit is contained in:
Polaris
2024-08-23 10:51:47 -04:00
parent 620874905e
commit d13fa0f2da
10 changed files with 312 additions and 131 deletions

View File

@ -41,77 +41,86 @@ export default async function Share({
const chunithm: chunithm[] = songsData.filter((song) =>
playlogIds.includes(song.id),
);
return (
<div className="flex flex-col items-center justify-center space-y-4 p-4 dark:text-black">
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-black">
Song: {song.title}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-black">
Artist: {song.artist}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-black">
Score: {song.score?.toLocaleString()}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-black">
Rank: {getGrade(song.score ?? 0)}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="pr-2 text-center text-xl font-bold text-black">
{song.isFullCombo && "FULL COMBO!"}
</span>
<span className="text-center text-xl font-bold text-black">
Max combo: {song.maxCombo}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-white p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<div className="flex flex-col items-center justify-center">
<span className="text-md w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
Judge Justice: {song.judgeJustice}
</span>
<span className="text-md m-5 w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
Judge Attack: {song.judgeAttack}
</span>
<span className="text-md w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
Miss: {song.judgeGuilty}
<div className="min-h-screen bg-primary">
<div className="flex flex-col items-center justify-center space-y-4 p-4 dark:text-black">
<div className="w-full rounded-sm bg-primary-foreground p-4 dark:text-black">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-primary">
Song: {song.title}
</span>
</div>
</div>
))}
))}
</div>
<div className="w-full rounded-sm bg-primary-foreground p-4">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-primary">
Artist: {song.artist}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-primary-foreground p-4">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-primary">
Score: {song.score?.toLocaleString()}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-primary-foreground p-4">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="text-center text-xl font-bold text-primary">
Rank: {getGrade(song.score ?? 0)}
</span>
</div>
))}
</div>
<div className="w-full rounded-sm bg-primary-foreground p-4">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<span className="pr-2 text-center text-xl font-bold text-primary">
{song.isFullCombo && "FULL COMBO!"}
</span>
<div className="pt-2">
<span className="text-center text-xl font-bold text-primary">
Max combo: {song.maxCombo}
</span>
</div>
</div>
))}
</div>
<div className="w-full rounded-sm bg-primary-foreground p-2">
{chunithm.map((song) => (
<div key={song.id} className="w-full">
<div className="flex flex-col items-center justify-center">
<span className="text-md w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-primary shadow-[inset_0px_3px_6px_0px_#1a202c]">
Justice Critcal: {song.judgeCritical! + song.judgeHeaven!}
</span>
<span className="text-md mt-5 w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-primary shadow-[inset_0px_3px_6px_0px_#1a202c]">
Justice: {song.judgeJustice}
</span>
<span className="text-md mt-5 w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-primary shadow-[inset_0px_3px_6px_0px_#1a202c]">
Attack: {song.judgeAttack}
</span>
<span className="text-md mt-5 w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-primary shadow-[inset_0px_3px_6px_0px_#1a202c]">
Miss: {song.judgeGuilty}
</span>
</div>
</div>
))}
</div>
</div>
</div>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

View File

@ -15,6 +15,12 @@ export default function RootLayout({
}>) {
return (
<html lang="en" className={GeistSans.className}>
<head>
<link rel="shortcut icon" href="/icon.png" />
<link rel="apple-touch-icon" sizes="any" href="/icon.png" />
<link rel="icon" type="image/png" sizes="any" href="/icon.png" />
<link rel="icon" type="image/png" sizes="any" href="/icon.png" />{" "}
</head>
<body className={GeistSans.className}>
<CustomThemeProvider>
<main className="">{children} </main>