show pause count for scores
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m21s

This commit is contained in:
Lee 2024-10-26 18:02:04 +01:00
parent 5f4d3829e2
commit 5ff0d11f5a
4 changed files with 43 additions and 21 deletions

@ -6,7 +6,7 @@ import Tooltip from "@/components/tooltip";
import { ScoreTimeSet } from "@/components/score/score-time-set";
import { ScoreModifiers } from "@/components/score/score-modifiers";
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
import ScoreMissesBadge from "@/components/score/badges/score-misses";
import ScoreMissesAndPausesBadge from "@/components/score/badges/score-misses-and-pauses";
import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
type Props = {
@ -57,7 +57,7 @@ export default function LeaderboardScore({ score, leaderboard, highlightedPlayer
score.misses > 0 ? "text-red-500" : "text-green-500"
)}
>
<ScoreMissesBadge score={score} hideXMark />
<ScoreMissesAndPausesBadge score={score} hideXMark />
</td>
{/* Score PP */}

@ -1,9 +1,9 @@
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import { PauseIcon } from "@heroicons/react/24/solid";
import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip";
import { Misses } from "@ssr/common/model/additional-score-data/misses";
import Tooltip from "@/components/tooltip";
type ScoreMissesBadgeProps = ScoreBadgeProps & {
/**
@ -12,7 +12,7 @@ type ScoreMissesBadgeProps = ScoreBadgeProps & {
hideXMark?: boolean;
};
export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
export default function ScoreMissesAndPausesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
const additionalData = score.additionalData;
const scoreImprovement = additionalData?.scoreImprovement;
@ -30,20 +30,42 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
const isMissImprovement =
previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses;
const pauses = additionalData?.pauses;
return (
<div className="flex flex-col justify-center items-center">
<ScoreMissesTooltip
missedNotes={score.missedNotes}
badCuts={score.badCuts}
bombCuts={misses?.bombCuts}
wallsHit={misses?.wallsHit}
fullCombo={score.fullCombo}
>
<div className="flex gap-1 items-center">
<p>{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}</p>
{!hideXMark && <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />}
</div>
</ScoreMissesTooltip>
<div className="flex flex-col justify-center items-center w-full">
<div className="flex items-center gap-1">
<ScoreMissesTooltip
missedNotes={score.missedNotes}
badCuts={score.badCuts}
bombCuts={misses?.bombCuts}
wallsHit={misses?.wallsHit}
fullCombo={score.fullCombo}
>
<div className="flex items-center">
<p>
{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}
{!hideXMark && !score.fullCombo && <span>x</span>}
</p>
</div>
</ScoreMissesTooltip>
{additionalData && !!pauses && pauses > 0 && (
<>
<p>|</p>
<Tooltip
display={
<p>
{pauses}x Pause{pauses > 1 ? "s" : ""}
</p>
}
>
<div className="flex gap-1 items-center">
<p>{pauses && pauses}</p>
<PauseIcon className="w-4 h-4" />
</div>
</Tooltip>
</>
)}
</div>
{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
<div className="flex gap-2 items-center justify-center">
<ScoreMissesTooltip

@ -25,7 +25,7 @@ export function ScoreMissesTooltip({
return (
<Tooltip
display={
<div className="flex flex-col">
<div className="flex flex-col w-full">
{!fullCombo ? (
<>
<p className="font-semibold">Misses</p>

@ -2,7 +2,7 @@ import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
import ScoreMissesBadge from "@/components/score/badges/score-misses";
import ScoreMissesAndPausesBadge from "@/components/score/badges/score-misses-and-pauses";
import { HandAccuracyBadge } from "@/components/score/badges/hand-accuracy";
import { ScoreAccuracyBadge } from "@/components/score/badges/score-accuracy";
import { ScorePpBadge } from "@/components/score/badges/score-pp";
@ -60,7 +60,7 @@ const badges: ScoreBadge[] = [
{
name: "Full Combo",
create: (score: ScoreSaberScore) => {
return <ScoreMissesBadge score={score} />;
return <ScoreMissesAndPausesBadge score={score} />;
},
},
];