feat(overlay): add rank colors to score stats

src/components/overlay/ScoreStats.tsx

@@ -1,5 +1,6 @@
 import { useOverlayDataStore } from "@/store/overlayDataStore";
 import { formatNumber } from "@/utils/numberUtils";
+import { accuracyToColor } from "@/utils/songUtils";
 import useStore from "@/utils/useStore";
 
 export default function ScoreStats() {
@@ -13,7 +14,14 @@ export default function ScoreStats() {
       <p className="text-2xl font-bold">{formatNumber(scoreStats.score)}</p>
       <p className="text-2xl">Combo: {formatNumber(scoreStats.combo)}x</p>
       <p className="text-2xl">
-        {scoreStats.rank} {scoreStats.accuracy.toFixed(2)}%
+        <span
+          style={{
+            color: accuracyToColor(scoreStats.accuracy),
+          }}
+        >
+          {scoreStats.accuracy == 100 ? "SS" : scoreStats.rank}
+        </span>{" "}
+        {scoreStats.accuracy.toFixed(2)}%
       </p>
     </div>
   );

src/components/overlay/SongInfo.tsx

@@ -26,7 +26,9 @@ export default function SongInfo() {
       />
       <div className="flex flex-col justify-between pb-2 pt-1">
         <div>
-          <p className="text-xl font-bold">{songInfo.songName}</p>
+          <p className="text-xl font-bold">
+            {songInfo.songName} {songInfo.songSubName}
+          </p>
           <p className="text-md">{songInfo.songMapper}</p>
         </div>
         <div className="mt-1 flex items-center gap-2">

src/utils/songUtils.ts

@@ -15,6 +15,20 @@ export function songDifficultyToColor(diff: string) {
   }
 }
 
+export function accuracyToColor(acc: number) {
+  if (acc >= 90) {
+    return "rgb(0, 255, 255)";
+  } else if (acc >= 80) {
+    return "rgb(255, 255, 255)";
+  } else if (acc >= 70) {
+    return "rgb(0, 255, 0)";
+  } else if (acc >= 60) {
+    return "rgb(255, 235, 4)";
+  } else {
+    return "rgb(255, 0, 0)";
+  }
+}
+
 export function scoresaberDifficultyNumberToName(
   diff: number,
   shortened: boolean = false,