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

make the score improvement text smaller and show a previous pp inaccuracy warning
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m21s
Details

Browse Source
This commit is contained in:
Lee
2024-10-23 08:13:07 +01:00
parent 8090361615
commit 08295d7b04
8 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
projects/website/src/components/score/badges/hand-accuracy.tsx
View File

@ -26,7 +26,11 @@ export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) {
</Tooltip>
{scoreImprovement && previousHandAccuracy && (
<Tooltip display={`Previous ${formattedHand} Hand Accuracy: ${previousHandAccuracy.toFixed(2)}`}>
<Change change={scoreImprovement.handAccuracy[hand]} formatValue={num => num.toFixed(2)} />
<Change
className="text-xs"
change={scoreImprovement.handAccuracy[hand]}
formatValue={num => num.toFixed(2)}
/>
</Tooltip>
)}
</div>

2
projects/website/src/components/score/badges/score-accuracy.tsx
View File

@ -58,7 +58,7 @@ export function ScoreAccuracyBadge({ score, leaderboard }: ScoreAccuracyProps) {
</Tooltip>
{scoreImprovement && previousAccuracy && (
<Tooltip display={`Previous Accuracy: ${previousAccuracy.toFixed(2)}%`}>
<Change change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
<Change className="text-xs" change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
</Tooltip>
)}
</div>

8
projects/website/src/components/score/badges/score-misses.tsx
View File

@ -27,6 +27,8 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
wallsHit: (scoreImprovement.misses.wallsHit - misses.wallsHit) * -1,
};
const previousScoreFc = previousScoreMisses?.misses == 0;
const isMissImprovement =
previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses;
return (
<div className="flex flex-col justify-center items-center">
@ -42,7 +44,7 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
{!hideXMark && <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />}
</div>
</ScoreMissesTooltip>
{additionalData && previousScoreMisses && scoreImprovement && misses && (
{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
<div className="flex gap-2 items-center justify-center">
<ScoreMissesTooltip
missedNotes={previousScoreMisses.missedNotes}
@ -51,7 +53,7 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
wallsHit={previousScoreMisses.wallsHit}
fullCombo={previousScoreFc}
>
<div className="flex gap-1 items-center">
<div className="flex gap-1 items-center text-xs">
{previousScoreFc ? (
<p className="text-green-400">FC</p>
) : (
@ -67,7 +69,7 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
wallsHit={misses.wallsHit}
fullCombo={additionalData.fullCombo}
>
<div className="flex gap-1 items-center">
<div className="flex gap-1 items-center text-xs">
{additionalData.fullCombo ? <p className="text-green-400">FC</p> : formatNumberWithCommas(misses.misses)}
</div>
</ScoreMissesTooltip>

39
projects/website/src/components/score/badges/score-pp.tsx
View File

@ -1,9 +1,10 @@
import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
import Tooltip from "@/components/tooltip";
import { formatPp } from "@ssr/common/utils/number-utils";
import { ensurePositiveNumber, formatPp } from "@ssr/common/utils/number-utils";
import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
import { Change } from "@/common/change";
import { Warning } from "@/components/warning";
type ScorePpProps = ScoreBadgeProps & {
/**
@ -22,26 +23,42 @@ export function ScorePpBadge({ score, leaderboard }: ScorePpProps) {
return undefined;
}
const weightedPp = pp * weight;
const previousPp = fcAccuracy ? scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0) : undefined;
const isSamePp = previousPp === pp.toFixed(0);
const fcPp =
!score.fullCombo && fcAccuracy ? scoresaberService.getPp(leaderboard.stars, fcAccuracy).toFixed(0) : undefined;
return (
<>
<Tooltip
display={
<div>
<p className="font-semibold">Performance Points</p>
<p>Raw: {formatPp(pp)}pp</p>
<p>
Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%)
</p>
{previousPp && !isSamePp && <p>Full Combo: {previousPp}pp</p>}
<div className="flex flex-col gap-2">
<div>
<p className="font-semibold">Performance Points</p>
<p>Raw: {formatPp(pp)}pp</p>
<p>
Weighted: {formatPp(weightedPp)}pp ({(100 * weight).toFixed(2)}%)
</p>
{fcPp && <p>Full Combo: {fcPp}pp</p>}
</div>
{previousAccuracy && (
<Warning>
<p className="text-red-700">
The previous pp may not be 100% accurate due to ScoreSaber API limitations.
</p>
</Warning>
)}
</div>
}
>
<div className="flex flex-col items-center justify-center cursor-default">
<p>{formatPp(pp)}pp</p>
{previousAccuracy && <Change change={previousAccuracy} isPp />}
{previousAccuracy && (
<Change
className="text-xs"
change={ensurePositiveNumber(pp - scoresaberService.getPp(leaderboard.stars, previousAccuracy))}
isPp
/>
)}
</div>
</Tooltip>
</>

2
projects/website/src/components/score/badges/score-score.tsx
View File

@ -8,7 +8,7 @@ export function ScoreScoreBadge({ score }: ScoreBadgeProps) {
return (
<div className="flex flex-col items-center justify-center">
<p>{formatNumberWithCommas(Number(score.score.toFixed(0)))}</p>
{scoreImprovement && <Change change={scoreImprovement.score} />}
{scoreImprovement && <Change className="text-xs" change={scoreImprovement.score} />}
</div>
);
}