cleanup

projects/website/src/components/score/score-modifiers.tsx

@@ -0,0 +1,30 @@
+import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
+import { Modifier } from "@ssr/common/score/modifier";
+
+type ScoreModifiersProps = {
+  /**
+   * The score to get the modifiers from
+   */
+  score: ScoreSaberScore;
+
+  /**
+   * The way to display the modifiers
+   */
+  type: "full" | "simple";
+};
+
+export function ScoreModifiers({ score, type }: ScoreModifiersProps) {
+  switch (type) {
+    case "full":
+      return <span>{score.modifiers.join(", ")}</span>;
+    case "simple":
+      return (
+        <span>
+          {Object.entries(Modifier)
+            .filter(mod => score.modifiers.includes(mod[1] as Modifier))
+            .map(mod => mod[0])
+            .join(",")}
+        </span>
+      );
+  }
+}

projects/website/src/components/score/score-stats.tsx

@@ -6,6 +6,7 @@ import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
 import FullComboBadge from "@/components/score/badges/full-combo";
 import { Modifier } from "@ssr/common/score/modifier";
+import { ScoreModifiers } from "@/components/score/score-modifiers";
 
 const badges: ScoreBadge[] = [
   {
@@ -71,22 +72,14 @@ const badges: ScoreBadge[] = [
                 {modCount > 0 && (
                   <div>
                     <p className="font-semibold">Modifiers</p>
-                    <p>{score.modifiers.join(", ")}</p>
+                    <ScoreModifiers type="full" score={score} />
                   </div>
                 )}
               </div>
             }
           >
             <p className="cursor-default">
-              {acc.toFixed(2)}%
-              {modCount > 0
-                ? ` ${
-                    Object.entries(Modifier)
-                      .filter(mod => score.modifiers.includes(mod[1] as Modifier))
-                      .map(mod => mod[0])
-                      .slice(0, 1)[0]
-                  }`
-                : ""}
+              {acc.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" score={score} />}
             </p>
           </Tooltip>
         </>