Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

i hate grids.
All checks were successful
Deploy SSR / deploy (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
Lee 2024-09-12 18:47:19 +01:00
parent 8da9ec73d1
commit 17c40edc3a
3 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/player/player-scores.tsx
View File

@ -89,7 +89,7 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
}
return (
<Card className="flex gap-4">
<Card className="flex gap-2">
<div className="flex items-center flex-row w-full gap-2 justify-center">
{Object.values(scoreSort).map((sortOption, index) => (
<Button

12
src/components/player/score/score-info.tsx
View File

@ -1,6 +1,7 @@
import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
import BeatSaverMap from "@/common/database/types/beatsaver-map";
import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
import { songDifficultyToColor } from "@/common/song-utils";
import FallbackLink from "@/components/fallback-link";
import Tooltip from "@/components/tooltip";
import { StarIcon } from "@heroicons/react/24/solid";
@ -19,8 +20,8 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
return (
<div className="flex gap-3">
<div className="relative flex justify-center h-[64px]">
<div className="flex gap-3 items-center">
<div className="relative flex justify-center h-[64px]">
<Tooltip
display={
<>
@ -35,7 +36,12 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
</>
}
>
<div className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs">
<div
className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs"
style={{
backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
}}
>
{leaderboard.stars > 0 ? (
<div className="flex gap-1 items-center justify-center">
<p>{leaderboard.stars}</p>

48
src/components/player/score/score-stats.tsx
View File

@ -4,7 +4,12 @@ import StatValue from "@/components/stat-value";
import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
const stats = [
type Badge = {
name: string;
create: (playerScore: ScoreSaberPlayerScore) => string | React.ReactNode | undefined;
};
const badges: Badge[] = [
{
name: "PP",
create: (playerScore: ScoreSaberPlayerScore) => {
@ -31,6 +36,14 @@ const stats = [
return `${formatNumberWithCommas(score.baseScore)}`;
},
},
{
name: "",
create: () => undefined,
},
{
name: "",
create: () => undefined,
},
{
name: "Full Combo",
create: (playerScore: ScoreSaberPlayerScore) => {
@ -39,7 +52,7 @@ const stats = [
return (
<>
<p>{fullCombo ? "FC" : formatNumberWithCommas(score.missedNotes)}</p>
<p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
</>
);
@ -52,32 +65,15 @@ type Props = {
};
export default function ScoreStats({ playerScore }: Props) {
const itemsPerRow = 3;
const totalStats = stats.length;
const numRows = Math.ceil(totalStats / itemsPerRow);
return (
<div className="flex flex-wrap gap-2 pl-0 lg:pl-2">
{Array.from({ length: numRows }).map((_, rowIndex) => {
const startIndex = rowIndex * itemsPerRow;
const endIndex = startIndex + itemsPerRow;
const rowStats = stats.slice(startIndex, endIndex);
const emptySpaces = itemsPerRow - rowStats.length;
<div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
{badges.map((badge, index) => {
const toRender = badge.create(playerScore);
if (toRender === undefined) {
return <div key={index} />;
}
return (
<div key={rowIndex} className="flex w-full gap-2">
{rowIndex === numRows - 1 &&
emptySpaces > 0 &&
Array(emptySpaces)
.fill(null)
.map((_, index) => <div key={`empty-${index}`} className="flex-1 min-w-[30%]"></div>)}
{rowStats.map((stat) => (
<div key={stat.name} className="flex-1 min-w-[30%]">
{stat.create(playerScore) && <StatValue value={stat.create(playerScore)} />}
</div>
))}
</div>
);
return <StatValue key={index} value={toRender} />;
})}
</div>
);