add acc ranges to the score (eg: A, S, SS, etc)

src/app/global-error.tsx

@@ -4,7 +4,11 @@ import * as Sentry from "@sentry/nextjs";
 import NextError from "next/error";
 import { useEffect } from "react";
 
-export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);

src/common/song-utils.ts

@@ -28,7 +28,7 @@ const scoreBadges: ScoreBadge[] = [
  * @param acc - The accuracy for the score
  * @returns The corresponding color for the accuracy.
  */
-export function getScoreColorFromAccuracy(acc: number): ScoreBadge {
+export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
   // Check for SS+ first since it has no upper limit
   if (acc >= 95) {
     return scoreBadges[0]; // SS+ color

src/components/score/score-stats.tsx

@@ -1,10 +1,11 @@
 import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
 import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
 import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
-import { getScoreColorFromAccuracy } from "@/common/song-utils";
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
 import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import Tooltip from "@/components/tooltip";
 
 type Badge = {
   name: string;
@@ -39,14 +40,36 @@ const badges: Badge[] = [
       leaderboard: ScoreSaberLeaderboardToken,
     ) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
-      return getScoreColorFromAccuracy(acc).color;
+      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>
+        </>
+      );
     },
   },
   {

src/instrumentation.ts

@@ -1,12 +1,12 @@
-import * as Sentry from '@sentry/nextjs';
+import * as Sentry from "@sentry/nextjs";
 
 export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
-    await import('../sentry.server.config');
+    await import("../sentry.server.config");
   }
 
-  if (process.env.NEXT_RUNTIME === 'edge') {
+  if (process.env.NEXT_RUNTIME === "edge") {
-    await import('../sentry.edge.config');
+    await import("../sentry.edge.config");
   }
 }