cleanup

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

@@ -3,9 +3,9 @@ import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import { PlayerInfo } from "@/components/player/player-info";
 import { clsx } from "clsx";
-import { Modifier } from "@ssr/common/score/modifier";
 import Tooltip from "@/components/tooltip";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
+import { ScoreModifiers } from "@/components/score/score-modifiers";
 
 type Props = {
   /**
@@ -62,15 +62,12 @@ export default function LeaderboardScore({ score, claimedPlayer }: Props) {
           display={
             <div>
               <p className="font-semibold">Modifiers</p>
-              <p>{score.modifiers.join(", ")}</p>
+              <ScoreModifiers type="full" score={score} />
             </div>
           }
         >
           <p className="cursor-pointer">
-            {Object.entries(Modifier)
-              .filter(mod => score.modifiers.includes(mod[1] as Modifier))
-              .map(mod => mod[0])
-              .join(",")}
+            <ScoreModifiers type="simple" score={score} />
           </p>
         </Tooltip>
       </td>

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>
         </>