add beatleader data tracking!!!!!!!!!!!!!

projects/website/src/components/score/badges/score-misses.tsx

@@ -21,6 +21,12 @@ export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeP
               <p className="font-semibold">Misses</p>
               <p>Missed Notes: {formatNumberWithCommas(score.missedNotes)}</p>
               <p>Bad Cuts: {formatNumberWithCommas(score.badCuts)}</p>
+              {score.additionalData && (
+                <>
+                  <p>Bomb Cuts: {formatNumberWithCommas(score.additionalData.bombCuts)}</p>
+                  <p>Wall Hits: {formatNumberWithCommas(score.additionalData.wallsHit)}</p>
+                </>
+              )}
             </>
           ) : (
             <p>Full Combo</p>

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

@@ -11,9 +11,14 @@ type ScoreModifiersProps = {
    * The way to display the modifiers
    */
   type: "full" | "simple";
+
+  /**
+   * Limit the number of modifiers to display
+   */
+  limit?: number;
 };
 
-export function ScoreModifiers({ score, type }: ScoreModifiersProps) {
+export function ScoreModifiers({ score, type, limit }: ScoreModifiersProps) {
   const modifiers = score.modifiers;
   if (modifiers.length === 0) {
     return <p>-</p>;
@@ -21,13 +26,14 @@ export function ScoreModifiers({ score, type }: ScoreModifiersProps) {
 
   switch (type) {
     case "full":
-      return <span>{modifiers.join(", ")}</span>;
+      return <span>{modifiers.slice(0, limit).join(", ")}</span>;
     case "simple":
       return (
         <span>
           {Object.entries(Modifier)
             .filter(([_, mod]) => modifiers.includes(mod))
             .map(([mod, _]) => mod)
+            .slice(0, limit)
             .join(",")}
         </span>
       );

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

@@ -49,6 +49,7 @@ const badges: ScoreBadge[] = [
     },
     create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
       const acc = (score.score / leaderboard.maxScore) * 100;
+      const fcAccuracy = score.additionalData?.fcAccuracy;
       const scoreBadge = getScoreBadgeFromAccuracy(acc);
       let accDetails = `${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
       if (scoreBadge.max == null) {
@@ -68,7 +69,8 @@ const badges: ScoreBadge[] = [
               <div className="flex flex-col gap-2">
                 <div>
                   <p className="font-semibold">Accuracy</p>
-                  <p>{accDetails}</p>
+                  <p>Score: {accDetails}</p>
+                  {fcAccuracy && <p>Full Combo: {fcAccuracy.toFixed(2)}%</p>}
                 </div>
 
                 {modCount > 0 && (
@@ -82,7 +84,7 @@ const badges: ScoreBadge[] = [
             }
           >
             <p className="cursor-default">
-              {acc.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" score={score} />}
+              {acc.toFixed(2)}% {modCount > 0 && <ScoreModifiers type="simple" limit={1} score={score} />}
             </p>
           </Tooltip>
         </>
@@ -96,12 +98,36 @@ const badges: ScoreBadge[] = [
     },
   },
   {
-    name: "",
-    create: () => undefined,
+    name: "Left Hand Accuracy",
+    color: () => "bg-hands-left",
+    create: (score: ScoreSaberScore) => {
+      if (!score.additionalData) {
+        return undefined;
+      }
+
+      const { handAccuracy } = score.additionalData;
+      return (
+        <Tooltip display={"Left Hand Accuracy"}>
+          <p>{handAccuracy.left.toFixed(2)}</p>
+        </Tooltip>
+      );
+    },
   },
   {
-    name: "",
-    create: () => undefined,
+    name: "Right Hand Accuracy",
+    color: () => "bg-hands-right",
+    create: (score: ScoreSaberScore) => {
+      if (!score.additionalData) {
+        return undefined;
+      }
+
+      const { handAccuracy } = score.additionalData;
+      return (
+        <Tooltip display={"Right Hand Accuracy"}>
+          <p>{handAccuracy.right.toFixed(2)}</p>
+        </Tooltip>
+      );
+    },
   },
   {
     name: "Full Combo",

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

@@ -13,6 +13,8 @@ import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
 import { useIsMobile } from "@/hooks/use-is-mobile";
+import Card from "@/components/card";
+import StatValue from "@/components/stat-value";
 
 type Props = {
   /**
@@ -103,11 +105,19 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
           animate={{ opacity: 1, y: 0 }}
           className="w-full mt-2"
         >
-          <LeaderboardScores
-            initialPage={getPageFromRank(score.rank, 12)}
-            leaderboard={leaderboard}
-            disableUrlChanging
-          />
+          <Card className="flex gap-4 w-full relative border border-input">
+            {score.additionalData && (
+              <div className="flex w-full items-center justify-center gap-2">
+                <StatValue name="Pauses" value={score.additionalData.pauses} />
+              </div>
+            )}
+
+            <LeaderboardScores
+              initialPage={getPageFromRank(score.rank, 12)}
+              leaderboard={leaderboard}
+              disableUrlChanging
+            />
+          </Card>
         </motion.div>
       )}
     </div>