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

cleanup score stats
All checks were successful
Deploy SSR / deploy (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
Lee 2024-09-12 16:41:38 +01:00
parent b411554f75
commit 9ec43b9a77
1 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ const stats = [
if (pp === 0) { if (pp === 0) {
return undefined; return undefined;
} }
return <StatValue value={`${score.pp.toFixed(2)}pp`} />; return `${score.pp.toFixed(2)}pp`;
}, },
}, },
{ {
@ -21,14 +21,14 @@ const stats = [
create: (playerScore: ScoreSaberPlayerScore) => { create: (playerScore: ScoreSaberPlayerScore) => {
const { score, leaderboard } = playerScore; const { score, leaderboard } = playerScore;
const acc = (score.baseScore / leaderboard.maxScore) * 100; const acc = (score.baseScore / leaderboard.maxScore) * 100;
return <StatValue value={`${acc.toFixed(2)}%`} />; return `${acc.toFixed(2)}%`;
}, },
}, },
{ {
name: "Score", name: "Score",
create: (playerScore: ScoreSaberPlayerScore) => { create: (playerScore: ScoreSaberPlayerScore) => {
const { score } = playerScore; const { score } = playerScore;
return <StatValue value={`${formatNumberWithCommas(score.baseScore)}`} />; return `${formatNumberWithCommas(score.baseScore)}`;
}, },
}, },
{ {
@ -38,14 +38,10 @@ const stats = [
const fullCombo = score.missedNotes === 0; const fullCombo = score.missedNotes === 0;
return ( return (
<StatValue
value={
<> <>
<p>{fullCombo ? "FC" : formatNumberWithCommas(score.missedNotes)}</p> <p>{fullCombo ? "FC" : formatNumberWithCommas(score.missedNotes)}</p>
<XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} /> <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
</> </>
}
/>
); );
}, },
}, },
@ -58,31 +54,31 @@ type Props = {
export default function ScoreStats({ playerScore }: Props) { export default function ScoreStats({ playerScore }: Props) {
const itemsPerRow = 3; const itemsPerRow = 3;
const totalStats = stats.length; const totalStats = stats.length;
const remainingItems = totalStats % itemsPerRow; const numRows = Math.ceil(totalStats / itemsPerRow);
const emptySpaces = remainingItems > 0 ? itemsPerRow - remainingItems : 0;
return ( return (
<div className="flex flex-wrap gap-2 pl-0 lg:pl-2"> <div className="flex flex-wrap gap-2 pl-0 lg:pl-2">
{/* Render all but the last row of stats normally */} {Array.from({ length: numRows }).map((_, rowIndex) => {
{stats.slice(0, totalStats - remainingItems).map((stat) => ( const startIndex = rowIndex * itemsPerRow;
<div key={stat.name} className="flex-1 min-w-[30%]"> const endIndex = startIndex + itemsPerRow;
{stat.create(playerScore)} const rowStats = stats.slice(startIndex, endIndex);
</div> const emptySpaces = itemsPerRow - rowStats.length;
))}
{/* Handle the last row - align right and push empty spaces to the left */} return (
<div className="flex justify-end w-full gap-2"> <div key={rowIndex} className="flex w-full gap-2">
{Array(emptySpaces) {rowIndex === numRows - 1 &&
emptySpaces > 0 &&
Array(emptySpaces)
.fill(null) .fill(null)
.map((_, index) => ( .map((_, index) => <div key={`empty-${index}`} className="flex-1 min-w-[30%]"></div>)}
<div key={`empty-${index}`} className="flex-1 min-w-[30%]"></div> {rowStats.map((stat) => (
))}
{stats.slice(totalStats - remainingItems).map((stat) => (
<div key={stat.name} className="flex-1 min-w-[30%]"> <div key={stat.name} className="flex-1 min-w-[30%]">
{stat.create(playerScore)} <StatValue value={stat.create(playerScore)} />
</div> </div>
))} ))}
</div> </div>
);
})}
</div> </div>
); );
} }