add basic leaderboard dropdown on scores

src/common/data-fetcher/impl/scoresaber.ts

@@ -1,5 +1,6 @@
 import DataFetcher from "../data-fetcher";
 import { ScoreSort } from "../sort";
+import ScoreSaberLeaderboardScoresPage from "../types/scoresaber/scoresaber-leaderboard-scores-page";
 import ScoreSaberPlayer from "../types/scoresaber/scoresaber-player";
 import ScoreSaberPlayerScoresPage from "../types/scoresaber/scoresaber-player-scores-page";
 import { ScoreSaberPlayerSearch } from "../types/scoresaber/scoresaber-player-search";
@@ -8,6 +9,7 @@ const API_BASE = "https://scoresaber.com/api";
 const SEARCH_PLAYERS_ENDPOINT = `${API_BASE}/players?search=:query`;
 const LOOKUP_PLAYER_ENDPOINT = `${API_BASE}/player/:id/full`;
 const LOOKUP_PLAYER_SCORES_ENDPOINT = `${API_BASE}/player/:id/scores?limit=:limit&sort=:sort&page=:page`;
+const LOOKUP_LEADERBOARD_SCORES_ENDPOINT = `${API_BASE}/leaderboard/by-id/:id/scores?page=:page`;
 
 class ScoreSaberFetcher extends DataFetcher {
   constructor() {
@@ -87,6 +89,33 @@ class ScoreSaberFetcher extends DataFetcher {
     this.log(`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
     return response;
   }
+
+  /**
+   * Looks up a page of scores for a leaderboard
+   *
+   * @param leaderboardId the ID of the leaderboard to look up
+   * @param sort the sort to use
+   * @param page the page to get scores for
+   * @param useProxy whether to use the proxy or not
+   * @returns the scores of the leaderboard, or undefined
+   */
+  async lookupLeaderboardScores(
+    leaderboardId: string,
+    page: number,
+    useProxy = true
+  ): Promise<ScoreSaberLeaderboardScoresPage | undefined> {
+    const before = performance.now();
+    this.log(`Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`);
+    const response = await this.fetch<ScoreSaberLeaderboardScoresPage>(
+      useProxy,
+      LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(":page", page.toString())
+    );
+    if (response === undefined) {
+      return undefined;
+    }
+    this.log(`Found scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`);
+    return response;
+  }
 }
 
 export const scoresaberFetcher = new ScoreSaberFetcher();

src/common/data-fetcher/types/scoresaber/scoresaber-leaderboard-scores-page.ts

@@ -0,0 +1,14 @@
+import ScoreSaberMetadata from "./scoresaber-metadata";
+import ScoreSaberScore from "./scoresaber-score";
+
+export default interface ScoreSaberLeaderboardScoresPage {
+  /**
+   * The scores on this page.
+   */
+  scores: ScoreSaberScore[];
+
+  /**
+   * The metadata for the page.
+   */
+  metadata: ScoreSaberMetadata;
+}

src/components/leaderboard/leaderboard-player.tsx

@@ -0,0 +1,27 @@
+import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
+import Image from "next/image";
+
+type Props = {
+  score: ScoreSaberScore;
+};
+
+export default function LeaderboardPlayer({ score }: Props) {
+  const player = score.leaderboardPlayerInfo;
+
+  return (
+    <div className="flex gap-2">
+      <Image
+        unoptimized
+        src={player.profilePicture}
+        width={32}
+        height={32}
+        alt="Song Artwork"
+        className="rounded-md min-w-[32px]"
+        priority
+      />
+      <div>
+        <p>{player.name}</p>
+      </div>
+    </div>
+  );
+}

src/components/leaderboard/leaderboard-score-stats.tsx

@@ -0,0 +1,64 @@
+import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
+import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+
+type Badge = {
+  name: string;
+  create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "PP",
+    create: (score: ScoreSaberScore) => {
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      return `${score.pp.toFixed(2)}pp`;
+    },
+  },
+  {
+    name: "Accuracy",
+    create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return `${acc.toFixed(2)}%`;
+    },
+  },
+  {
+    name: "Full Combo",
+    create: (score: ScoreSaberScore) => {
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+        </>
+      );
+    },
+  },
+];
+
+type Props = {
+  score: ScoreSaberScore;
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
+  return (
+    <div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(score, leaderboard);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+
+        return <StatValue key={index} value={toRender} />;
+      })}
+    </div>
+  );
+}

src/components/leaderboard/leaderboard-score.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
+import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
+import { timeAgo } from "@/common/time-utils";
+import ScoreRankInfo from "../player/score/score-rank-info";
+import LeaderboardPlayer from "./leaderboard-player";
+import LeaderboardScoreStats from "./leaderboard-score-stats";
+
+type Props = {
+  /**
+   * The score to display.
+   */
+  score: ScoreSaberScore;
+
+  /**
+   * The leaderboard to display.
+   */
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export default function LeaderboardScore({ score, leaderboard }: Props) {
+  return (
+    <div className="grid w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[100px_4fr_0.8fr_300px]">
+      <ScoreRankInfo score={score} isLeaderboard />
+      <LeaderboardPlayer score={score} />
+      <p className="text-sm text-right">{timeAgo(new Date(score.timeSet))}</p>
+      <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
+    </div>
+  );
+}

src/components/leaderboard/leaderboard-scores.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { scoresaberFetcher } from "@/common/data-fetcher/impl/scoresaber";
+import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
+import ScoreSaberLeaderboardScoresPage from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard-scores-page";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { useQuery } from "@tanstack/react-query";
+import { motion, useAnimation } from "framer-motion";
+import { useCallback, useEffect, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import LeaderboardScore from "./leaderboard-score";
+
+type Props = {
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export default function LeaderboardScores({ leaderboard }: Props) {
+  const { width } = useWindowDimensions();
+  const controls = useAnimation();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>();
+
+  const {
+    data: scores,
+    isError,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["playerScores", leaderboard.id, currentPage],
+    queryFn: () => scoresaberFetcher.lookupLeaderboardScores(leaderboard.id + "", currentPage),
+    staleTime: 30 * 1000, // Cache data for 30 seconds
+  });
+
+  const handleAnimation = useCallback(() => {
+    controls.set({ x: -50, opacity: 0 });
+    controls.start({ x: 0, opacity: 1, transition: { duration: 0.25 } });
+  }, [controls]);
+
+  useEffect(() => {
+    if (scores) {
+      setCurrentScores(scores);
+    }
+  }, [scores]);
+
+  useEffect(() => {
+    if (scores) {
+      handleAnimation();
+    }
+  }, [scores, handleAnimation]);
+
+  useEffect(() => {
+    refetch();
+  }, [leaderboard, currentPage, refetch]);
+
+  if (currentScores === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Card className="flex gap-2">
+      <div className="text-center">
+        {isError && <p>Oopsies! Something went wrong.</p>}
+        {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
+      </div>
+
+      <motion.div animate={controls}>
+        <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+          {currentScores.scores.map((playerScore, index) => (
+            <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
+          ))}
+        </div>
+      </motion.div>
+
+      <Pagination
+        mobilePagination={width < 768}
+        page={currentPage}
+        totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+        loadingPage={isLoading ? currentPage : undefined}
+        onPageChange={setCurrentPage}
+      />
+    </Card>
+  );
+}

src/components/player/score/leaderboard-button.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { ArrowDownIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { Dispatch, SetStateAction } from "react";
+
+type Props = {
+  isLeaderboardExpanded: boolean;
+  setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) {
+  return (
+    <div className="pr-2 flex items-center justify-center h-full">
+      <Button className="p-0" variant="ghost" onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}>
+        <ArrowDownIcon
+          className={clsx("w-6 h-6 transition-all transform-gpu", isLeaderboardExpanded ? "" : "rotate-180")}
+        />
+      </Button>
+    </div>
+  );
+}

src/components/player/score/score-buttons.tsx

@@ -7,59 +7,74 @@ import { songNameToYouTubeLink } from "@/common/youtube-utils";
 import BeatSaverLogo from "@/components/logos/beatsaver-logo";
 import YouTubeLogo from "@/components/logos/youtube-logo";
 import { useToast } from "@/hooks/use-toast";
+import { Dispatch, SetStateAction } from "react";
+import LeaderboardButton from "./leaderboard-button";
 import ScoreButton from "./score-button";
 
 type Props = {
   playerScore: ScoreSaberPlayerScore;
   beatSaverMap?: BeatSaverMap;
+  isLeaderboardExpanded: boolean;
+  setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
 };
 
-export default function ScoreButtons({ playerScore, beatSaverMap }: Props) {
+export default function ScoreButtons({
+  playerScore,
+  beatSaverMap,
+  isLeaderboardExpanded,
+  setIsLeaderboardExpanded,
+}: Props) {
   const { leaderboard } = playerScore;
   const { toast } = useToast();
 
   return (
-    <div className="flex flex-row justify-center flex-wrap gap-1 lg:justify-end">
-      {beatSaverMap != undefined && (
-        <>
-          {/* Copy BSR */}
-          <ScoreButton
-            onClick={() => {
-              toast({
-                title: "Copied!",
-                description: `Copied "!bsr ${beatSaverMap}" to your clipboard!`,
-              });
-              copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
-            }}
-            tooltip={<p>Click to copy the bsr code</p>}
-          >
-            <p>!</p>
-          </ScoreButton>
+    <div className="flex justify-end">
+      <LeaderboardButton
+        isLeaderboardExpanded={isLeaderboardExpanded}
+        setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+      />
+      <div className="flex flex-row justify-center flex-wrap gap-1 lg:justify-end">
+        {beatSaverMap != undefined && (
+          <>
+            {/* Copy BSR */}
+            <ScoreButton
+              onClick={() => {
+                toast({
+                  title: "Copied!",
+                  description: `Copied "!bsr ${beatSaverMap}" to your clipboard!`,
+                });
+                copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
+              }}
+              tooltip={<p>Click to copy the bsr code</p>}
+            >
+              <p>!</p>
+            </ScoreButton>
 
-          {/* Open map in BeatSaver */}
-          <ScoreButton
-            onClick={() => {
-              window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
-            }}
-            tooltip={<p>Click to open the map</p>}
-          >
-            <BeatSaverLogo />
-          </ScoreButton>
-        </>
-      )}
+            {/* Open map in BeatSaver */}
+            <ScoreButton
+              onClick={() => {
+                window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+              }}
+              tooltip={<p>Click to open the map</p>}
+            >
+              <BeatSaverLogo />
+            </ScoreButton>
+          </>
+        )}
 
-      {/* Open song in YouTube */}
-      <ScoreButton
-        onClick={() => {
-          window.open(
-            songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
-            "_blank"
-          );
-        }}
-        tooltip={<p>Click to open the song in YouTube</p>}
-      >
-        <YouTubeLogo />
-      </ScoreButton>
+        {/* Open song in YouTube */}
+        <ScoreButton
+          onClick={() => {
+            window.open(
+              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              "_blank"
+            );
+          }}
+          tooltip={<p>Click to open the song in YouTube</p>}
+        >
+          <YouTubeLogo />
+        </ScoreButton>
+      </div>
     </div>
   );
 }

src/components/player/score/score-info.tsx

@@ -1,4 +1,4 @@
-import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
 import { songDifficultyToColor } from "@/common/song-utils";
@@ -9,12 +9,11 @@ import clsx from "clsx";
 import Image from "next/image";
 
 type Props = {
-  playerScore: ScoreSaberPlayerScore;
+  leaderboard: ScoreSaberLeaderboard;
   beatSaverMap?: BeatSaverMap;
 };
 
-export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
-  const { leaderboard } = playerScore;
+export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
   const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
   const mappersProfile =
     beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;

src/components/player/score/score-rank-info.tsx

@@ -1,22 +1,27 @@
-import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
 import { formatNumberWithCommas } from "@/common/number-utils";
 import { timeAgo } from "@/common/time-utils";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
 
 type Props = {
-  playerScore: ScoreSaberPlayerScore;
+  score: ScoreSaberScore;
+  isLeaderboard?: boolean;
 };
 
-export default function ScoreRankInfo({ playerScore }: Props) {
-  const { score } = playerScore;
-
+export default function ScoreRankInfo({ score, isLeaderboard = false }: Props) {
   return (
-    <div className="flex w-full flex-row justify-between items-center lg:w-[125px] lg:justify-center lg:flex-col">
+    <div
+      className={clsx(
+        "flex w-full flex-row justify-between lg:w-[125px] lg:flex-col",
+        !isLeaderboard && "lg:justify-center items-center"
+      )}
+    >
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
       </div>
-      <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
+      {!isLeaderboard && <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>}
     </div>
   );
 }

src/components/player/score/score-stats.tsx

@@ -1,4 +1,5 @@
-import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard";
+import ScoreSaberScore from "@/common/data-fetcher/types/scoresaber/scoresaber-score";
 import { formatNumberWithCommas } from "@/common/number-utils";
 import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
@@ -6,14 +7,13 @@ import clsx from "clsx";
 
 type Badge = {
   name: string;
-  create: (playerScore: ScoreSaberPlayerScore) => string | React.ReactNode | undefined;
+  create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
 };
 
 const badges: Badge[] = [
   {
     name: "PP",
-    create: (playerScore: ScoreSaberPlayerScore) => {
-      const { score } = playerScore;
+    create: (score: ScoreSaberScore) => {
       const pp = score.pp;
       if (pp === 0) {
         return undefined;
@@ -23,16 +23,14 @@ const badges: Badge[] = [
   },
   {
     name: "Accuracy",
-    create: (playerScore: ScoreSaberPlayerScore) => {
-      const { score, leaderboard } = playerScore;
+    create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
       return `${acc.toFixed(2)}%`;
     },
   },
   {
     name: "Score",
-    create: (playerScore: ScoreSaberPlayerScore) => {
-      const { score } = playerScore;
+    create: (score: ScoreSaberScore) => {
       return `${formatNumberWithCommas(score.baseScore)}`;
     },
   },
@@ -46,8 +44,7 @@ const badges: Badge[] = [
   },
   {
     name: "Full Combo",
-    create: (playerScore: ScoreSaberPlayerScore) => {
-      const { score } = playerScore;
+    create: (score: ScoreSaberScore) => {
       const fullCombo = score.missedNotes === 0;
 
       return (
@@ -61,14 +58,15 @@ const badges: Badge[] = [
 ];
 
 type Props = {
-  playerScore: ScoreSaberPlayerScore;
+  score: ScoreSaberScore;
+  leaderboard: ScoreSaberLeaderboard;
 };
 
-export default function ScoreStats({ playerScore }: Props) {
+export default function ScoreStats({ score, leaderboard }: Props) {
   return (
     <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
       {badges.map((badge, index) => {
-        const toRender = badge.create(playerScore);
+        const toRender = badge.create(score, leaderboard);
         if (toRender === undefined) {
           return <div key={index} />;
         }

src/components/player/score/score.tsx

@@ -3,6 +3,7 @@
 import { beatsaverFetcher } from "@/common/data-fetcher/impl/beatsaver";
 import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
 import { useCallback, useEffect, useState } from "react";
 import ScoreButtons from "./score-buttons";
 import ScoreSongInfo from "./score-info";
@@ -17,8 +18,9 @@ type Props = {
 };
 
 export default function Score({ playerScore }: Props) {
-  const { leaderboard } = playerScore;
+  const { score, leaderboard } = playerScore;
   const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
+  const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
 
   const fetchBeatSaverData = useCallback(async () => {
     const beatSaverMap = await beatsaverFetcher.lookupMap(leaderboard.songHash);
@@ -30,11 +32,19 @@ export default function Score({ playerScore }: Props) {
   }, [fetchBeatSaverData]);
 
   return (
-    <div className="grid gap-2 lg:gap-0 pb-2 pt-2 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.85fr_4fr_1fr_300px]">
-      <ScoreRankInfo playerScore={playerScore} />
-      <ScoreSongInfo playerScore={playerScore} beatSaverMap={beatSaverMap} />
-      <ScoreButtons playerScore={playerScore} beatSaverMap={beatSaverMap} />
-      <ScoreStats playerScore={playerScore} />
+    <div className="pb-2 pt-2">
+      <div className="grid w-full gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.85fr_4fr_1fr_300px]">
+        <ScoreRankInfo score={score} />
+        <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
+        <ScoreButtons
+          playerScore={playerScore}
+          beatSaverMap={beatSaverMap}
+          isLeaderboardExpanded={isLeaderboardExpanded}
+          setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+        />
+        <ScoreStats score={score} leaderboard={leaderboard} />
+      </div>
+      {isLeaderboardExpanded && <LeaderboardScores leaderboard={leaderboard} />}
     </div>
   );
 }

tsconfig.json

@@ -21,6 +21,13 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tailwind.config.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "tailwind.config.ts",
+    "src/components/leaderboard/leaderboard-score-statstsx"
+  ],
   "exclude": ["node_modules"]
 }