add score colors to the scores on a score leaderboard (the button to show the leaderboard for that score)

src/components/leaderboard/leaderboard-score-stats.tsx

@@ -4,16 +4,11 @@ import { formatNumberWithCommas } from "@/common/number-utils";
 import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
+import Tooltip from "@/components/tooltip";
+import { ScoreBadge } from "@/components/score/score-badge";
 
-type Badge = {
+const badges: ScoreBadge[] = [
-  name: string;
-  create: (
-    score: ScoreSaberScoreToken,
-    leaderboard: ScoreSaberLeaderboardToken
-  ) => string | React.ReactNode | undefined;
-};
-
-const badges: Badge[] = [
   {
     name: "PP",
     create: (score: ScoreSaberScoreToken) => {
@@ -26,9 +21,35 @@ const badges: Badge[] = [
   },
   {
     name: "Accuracy",
+    color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return getScoreBadgeFromAccuracy(acc).color;
+    },
     create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
-      return `${acc.toFixed(2)}%`;
+      const scoreBadge = getScoreBadgeFromAccuracy(acc);
+      let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
+      if (scoreBadge.max == null) {
+        accDetails += ` (> ${scoreBadge.min}%)`;
+      } else if (scoreBadge.min == null) {
+        accDetails += ` (< ${scoreBadge.max}%)`;
+      } else {
+        accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
+      }
+
+      return (
+        <>
+          <Tooltip
+            display={
+              <div>
+                <p>{accDetails}</p>
+              </div>
+            }
+          >
+            <p className="cursor-default">{acc.toFixed(2)}%</p>
+          </Tooltip>
+        </>
+      );
     },
   },
   {
@@ -56,11 +77,11 @@ export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
     <div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
       {badges.map((badge, index) => {
         const toRender = badge.create(score, leaderboard);
+        const color = badge.color?.(score, leaderboard);
         if (toRender === undefined) {
           return <div key={index} />;
         }
-
+        return <StatValue key={index} color={color} value={toRender} />;
-        return <StatValue key={index} value={toRender} />;
       })}
     </div>
   );

src/components/score/score-badge.tsx

@@ -0,0 +1,14 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+
+/**
+ * A badge to display in the score stats.
+ */
+export type ScoreBadge = {
+  name: string;
+  color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
+  create: (
+    score: ScoreSaberScoreToken,
+    leaderboard: ScoreSaberLeaderboardToken
+  ) => string | React.ReactNode | undefined;
+};

src/components/score/score-stats.tsx

@@ -6,17 +6,9 @@ import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import Tooltip from "@/components/tooltip";
+import { ScoreBadge } from "@/components/score/score-badge";
 
-type Badge = {
+const badges: ScoreBadge[] = [
-  name: string;
-  color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
-  create: (
-    score: ScoreSaberScoreToken,
-    leaderboard: ScoreSaberLeaderboardToken
-  ) => string | React.ReactNode | undefined;
-};
-
-const badges: Badge[] = [
   {
     name: "PP",
     color: () => {