fix acc colors >= 95 not working
All checks were successful
Deploy / deploy (push) Successful in 5m20s

This commit is contained in:
Lee 2024-09-30 12:33:26 +01:00
parent 3217b26bce
commit bb5506148c
4 changed files with 36 additions and 24 deletions

@ -6,13 +6,15 @@ const diffColors: Record<string, string> = {
expertplus: "#8f48db", expertplus: "#8f48db",
}; };
const badgesDef: { export type ScoreBadge = {
name: string; name: string;
min: number | null; min: number | null;
max: number | null; max: number | null;
color: string; color: string;
}[] = [ };
{ name: "SS+", min: 95, max: null, color: diffColors.expertPlus },
const scoreBadges: ScoreBadge[] = [
{ name: "SS+", min: 95, max: null, color: diffColors.expertplus },
{ name: "SS", min: 90, max: 95, color: diffColors.expert }, { name: "SS", min: 90, max: 95, color: diffColors.expert },
{ name: "S+", min: 85, max: 90, color: diffColors.hard }, { name: "S+", min: 85, max: 90, color: diffColors.hard },
{ name: "S", min: 80, max: 85, color: diffColors.normal }, { name: "S", min: 80, max: 85, color: diffColors.normal },
@ -20,6 +22,33 @@ const badgesDef: {
{ name: "-", min: null, max: 70, color: "hsl(var(--accent))" }, { name: "-", min: null, max: 70, color: "hsl(var(--accent))" },
]; ];
/**
* Returns the color based on the accuracy provided.
*
* @param acc - The accuracy for the score
* @returns The corresponding color for the accuracy.
*/
export function getScoreColorFromAccuracy(acc: number): ScoreBadge {
// Check for SS+ first since it has no upper limit
if (acc >= 95) {
return scoreBadges[0]; // SS+ color
}
// Iterate through the rest of the badges
for (const badge of scoreBadges) {
const min = badge.min ?? -Infinity; // Treat null `min` as -Infinity
const max = badge.max ?? Infinity; // Treat null `max` as Infinity
// Check if the accuracy falls within the badge's range
if (acc >= min && acc < (max === null ? Infinity : max)) {
return badge; // Return the color of the matching badge
}
}
// Fallback color if no badge matches (should not happen)
return scoreBadges[scoreBadges.length - 1];
}
/** /**
* Turns the difficulty of a song into a color * Turns the difficulty of a song into a color
* *
@ -30,20 +59,3 @@ export function songDifficultyToColor(diff: string) {
diff = diff.replace("+", "Plus"); diff = diff.replace("+", "Plus");
return diffColors[diff.toLowerCase() as keyof typeof diffColors]; return diffColors[diff.toLowerCase() as keyof typeof diffColors];
} }
/**
* Formats the accuracy into a color
*
* @param acc the accuracy to get the color for
*/
export function accuracyToColor(acc: number): string {
for (const badge of badgesDef) {
if (
(badge.min === null || acc >= badge.min) &&
(badge.max === null || acc < badge.max)
) {
return badge.color;
}
}
return "#000000"; // fallback color
}

@ -27,7 +27,7 @@ export default function ProfileButton() {
<Avatar className="w-6 h-6"> <Avatar className="w-6 h-6">
<AvatarImage <AvatarImage
alt="Profile Picture" alt="Profile Picture"
src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`} src={`https://img.fascinated.cc/upload/w_24,h_24/https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
/> />
</Avatar> </Avatar>
<p>You</p> <p>You</p>

@ -1,12 +1,12 @@
import BeatSaverMap from "@/common/database/types/beatsaver-map"; import BeatSaverMap from "@/common/database/types/beatsaver-map";
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token"; import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils"; import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
import { songDifficultyToColor } from "@/common/song-utils";
import FallbackLink from "@/components/fallback-link"; import FallbackLink from "@/components/fallback-link";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { StarIcon } from "@heroicons/react/24/solid"; import { StarIcon } from "@heroicons/react/24/solid";
import clsx from "clsx"; import clsx from "clsx";
import Image from "next/image"; import Image from "next/image";
import { songDifficultyToColor } from "@/common/song-utils";
type Props = { type Props = {
leaderboard: ScoreSaberLeaderboardToken; leaderboard: ScoreSaberLeaderboardToken;

@ -1,7 +1,7 @@
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token"; import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token"; import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
import { formatNumberWithCommas, formatPp } from "@/common/number-utils"; import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
import { accuracyToColor } from "@/common/song-utils"; import { getScoreColorFromAccuracy } from "@/common/song-utils";
import StatValue from "@/components/stat-value"; import StatValue from "@/components/stat-value";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import clsx from "clsx"; import clsx from "clsx";
@ -39,7 +39,7 @@ const badges: Badge[] = [
leaderboard: ScoreSaberLeaderboardToken, leaderboard: ScoreSaberLeaderboardToken,
) => { ) => {
const acc = (score.baseScore / leaderboard.maxScore) * 100; const acc = (score.baseScore / leaderboard.maxScore) * 100;
return accuracyToColor(acc); return getScoreColorFromAccuracy(acc).color;
}, },
create: ( create: (
score: ScoreSaberScoreToken, score: ScoreSaberScoreToken,