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

projects/website/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
+    "dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

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

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
 import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
 import LeaderboardPpChart from "@/components/leaderboard/leaderboard-pp-chart";
+import Card from "@/components/card";
 
 type LeaderboardDataProps = {
   /**
@@ -48,14 +49,16 @@ export function LeaderboardData({ initialLeaderboard, initialScores, initialPage
   const leaderboard = currentLeaderboard.leaderboard;
   return (
     <main className="flex flex-col-reverse xl:flex-row w-full gap-2">
-      <LeaderboardScores
-        leaderboard={leaderboard}
-        initialScores={initialScores}
-        initialPage={initialPage}
-        leaderboardChanged={newId => setCurrentLeaderboardId(newId)}
-        showDifficulties
-        isLeaderboardPage
-      />
+      <Card className="flex gap-2 w-full relative">
+        <LeaderboardScores
+          leaderboard={leaderboard}
+          initialScores={initialScores}
+          initialPage={initialPage}
+          leaderboardChanged={newId => setCurrentLeaderboardId(newId)}
+          showDifficulties
+          isLeaderboardPage
+        />
+      </Card>
       <div className="flex flex-col gap-2 w-full xl:w-[550px]">
         <LeaderboardInfo leaderboard={leaderboard} beatSaverMap={currentLeaderboard.beatsaver} />
         {leaderboard.stars > 0 && <LeaderboardPpChart leaderboard={leaderboard} />}

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

@@ -4,12 +4,10 @@ import useWindowDimensions from "@/hooks/use-window-dimensions";
 import { useQuery } from "@tanstack/react-query";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
-import Card from "../card";
 import Pagination from "../input/pagination";
 import LeaderboardScore from "./leaderboard-score";
 import { scoreAnimation } from "@/components/score/score-animation";
 import { Button } from "@/components/ui/button";
-import { clsx } from "clsx";
 import { getDifficultyFromRawDifficulty } from "@/common/song-utils";
 import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
@@ -17,6 +15,7 @@ import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leade
 import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
 import useDatabase from "@/hooks/use-database";
 import { useLiveQuery } from "dexie-react-hooks";
+import LeaderboardScoresSkeleton from "@/components/leaderboard/skeleton/leaderboard-scores-skeleton";
 
 type LeaderboardScoresProps = {
   initialPage?: number;
@@ -126,11 +125,11 @@ export default function LeaderboardScores({
   }, [selectedLeaderboardId, currentPage, disableUrlChanging]);
 
   if (currentScores === undefined) {
-    return undefined;
+    return <LeaderboardScoresSkeleton />;
   }
 
   return (
-    <Card className={clsx("flex gap-2 w-full relative", !isLeaderboardPage && "border border-input")}>
+    <>
       {/* Where to scroll to when new scores are loaded */}
       <div ref={topOfScoresRef} className="absolute" />
 
@@ -207,6 +206,6 @@ export default function LeaderboardScores({
           setShouldFetch(true);
         }}
       />
-    </Card>
+    </>
   );
 }

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

@@ -0,0 +1,47 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function LeaderboardScoreSkeleton() {
+  return (
+    <>
+      {/* Skeleton for Score Rank */}
+      <td className="px-4 py-2">
+        <Skeleton className="w-6 h-4 rounded-md" />
+      </td>
+
+      {/* Skeleton for Player Info */}
+      <td className="px-4 py-2 flex gap-2">
+        <Skeleton className="w-24 h-4 rounded-md" />
+      </td>
+
+      {/* Skeleton for Time Set */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-20 h-4 rounded-md mx-auto" />
+      </td>
+
+      {/* Skeleton for Score */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-16 h-4 rounded-md mx-auto" />
+      </td>
+
+      {/* Skeleton for Accuracy */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-16 h-4 rounded-md mx-auto" />
+      </td>
+
+      {/* Skeleton for Misses */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-8 h-4 rounded-md mx-auto" />
+      </td>
+
+      {/* Skeleton for PP */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-12 h-4 rounded-md mx-auto" />
+      </td>
+
+      {/* Skeleton for Modifiers */}
+      <td className="px-4 py-2 text-center">
+        <Skeleton className="w-10 h-4 rounded-md mx-auto" />
+      </td>
+    </>
+  );
+}

projects/website/src/components/leaderboard/skeleton/leaderboard-scores-skeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { LeaderboardScoreSkeleton } from "@/components/leaderboard/skeleton/leaderboard-score-skeleton";
+
+export default function LeaderboardScoresSkeleton() {
+  return (
+    <>
+      {/* Loading Skeleton for the LeaderboardScores Table */}
+      <div className="overflow-x-auto relative">
+        <table className="table w-full table-auto border-spacing-2 border-none text-left text-sm">
+          <thead>
+            <tr>
+              <th className="px-2 py-1">Rank</th>
+              <th className="px-2 py-1">Player</th>
+              <th className="px-2 py-1 text-center">Time Set</th>
+              <th className="px-2 py-1 text-center">Score</th>
+              <th className="px-2 py-1 text-center">Accuracy</th>
+              <th className="px-2 py-1 text-center">Misses</th>
+              <th className="px-2 py-1 text-center">PP</th>
+              <th className="px-2 py-1 text-center">Mods</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* Loop over to create 10 skeleton rows */}
+            {[...Array(10)].map((_, index) => (
+              <tr key={index} className="border-b border-border">
+                <LeaderboardScoreSkeleton />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Skeleton for Pagination */}
+      <div className="flex justify-center mt-4">
+        <Skeleton className="w-32 h-10 rounded-md" />
+      </div>
+    </>
+  );
+}

projects/website/src/components/player/player-info.tsx

@@ -23,13 +23,39 @@ type TablePlayerProps = {
    */
   hideCountryFlag?: boolean;
 
+  /**
+   * Whether to make the player name a link
+   */
+  useLink?: boolean;
+
   /**
    * Whether to apply hover brightness
    */
   hoverBrightness?: boolean;
 };
 
-export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag, hoverBrightness = true }: TablePlayerProps) {
+export function PlayerInfo({
+  player,
+  highlightedPlayer,
+  hideCountryFlag,
+  useLink,
+  hoverBrightness = true,
+}: TablePlayerProps) {
+  const name = (
+    <p
+      className={clsx(
+        hoverBrightness ? "transform-gpu transition-all hover:brightness-[66%]" : "",
+        player.id == highlightedPlayer?.id ? "font-bold" : "",
+        "text-ellipsis w-[140px] overflow-hidden whitespace-nowrap"
+      )}
+      style={{
+        color: getScoreSaberRole(player)?.color,
+      }}
+    >
+      {player.name}
+    </p>
+  );
+
   return (
     <div className="flex gap-2 items-center">
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
@@ -39,19 +65,7 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag, hoverBr
         />
       </Avatar>
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
-      <Link
-        className={clsx(hoverBrightness ? "transform-gpu transition-all hover:brightness-[66%]" : "")}
-        href={`/player/${player.id}`}
-      >
-        <p
-          className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
-          style={{
-            color: getScoreSaberRole(player)?.color,
-          }}
-        >
-          {player.name}
-        </p>
-      </Link>
+      {useLink ? <Link href={`/player/${player.id}`}>{name}</Link> : name}
     </div>
   );
 }

projects/website/src/components/ranking/mini.tsx

@@ -10,8 +10,6 @@ import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { getPlayersAroundPlayer } from "@ssr/common/utils/player-utils";
 import { AroundPlayer } from "@ssr/common/types/around-player";
 import { PlayerInfo } from "@/components/player/player-info";
-import useDatabase from "@/hooks/use-database";
-import { useLiveQuery } from "dexie-react-hooks";
 
 const PLAYER_NAME_MAX_LENGTH = 18;
 
@@ -50,9 +48,6 @@ const miniVariants: Variants = {
 };
 
 export default function Mini({ type, player, shouldUpdate }: MiniProps) {
-  const database = useDatabase();
-  const claimedPlayer = useLiveQuery(() => database.getClaimedPlayer());
-
   if (shouldUpdate == undefined) {
     shouldUpdate = true;
   }
@@ -79,7 +74,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
   }
 
   return (
-    <Card className="w-full flex gap-2 sticky select-none text-sm">
+    <Card className="flex gap-2 sticky select-none text-sm w-[400px]">
       <div className="flex gap-2">
         {icon}
         <p>{type} Ranking</p>
@@ -87,10 +82,6 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
       <div className="flex flex-col text-xs">
         {response.players.map((playerRanking, index) => {
           const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
-          const playerName =
-            playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
-              ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
-              : playerRanking.name;
           const ppDifference = playerRanking.pp - player.pp;
 
           return (

projects/website/src/components/ranking/player-ranking-skeleton.tsx

@@ -5,7 +5,7 @@ export function PlayerRankingSkeleton() {
   const skeletonArray = new Array(5).fill(0);
 
   return (
-    <Card className="w-full flex gap-2 sticky select-none">
+    <Card className="w-[400px] flex gap-2 sticky select-none">
       <div className="flex gap-2">
         <Skeleton className="w-6 h-6 rounded-full animate-pulse" /> {/* Icon Skeleton */}
         <Skeleton className="w-32 h-6 animate-pulse" /> {/* Text Skeleton for Ranking */}

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>

projects/website/tailwind.config.ts

@@ -14,6 +14,10 @@ const config: Config = {
         ssr: {
           DEFAULT: "#6773ff",
         },
+        hands: {
+          left: "rgba(168,32,32,1)",
+          right: "rgba(32,100,168,1)",
+        },
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         card: {