cleanup score component and add finish score stats

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

@@ -25,7 +25,7 @@ class BeatSaverFetcher extends DataFetcher {
     let map = await db.beatSaverMaps.get(query);
     // The map is cached
     if (map != undefined) {
-      this.log(`Found cached map "${query}" in ${(performance.now() - before).toFixed(2)}ms`);
+      this.log(`Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
       return map;
     }
 
@@ -47,7 +47,7 @@ class BeatSaverFetcher extends DataFetcher {
       fullData: response,
     });
     map = await db.beatSaverMaps.get(query);
-    this.log(`Found map "${query}" in ${(performance.now() - before).toFixed(2)}ms`);
+    this.log(`Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
     return map;
   }
 }

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

@@ -35,7 +35,7 @@ class ScoreSaberFetcher extends DataFetcher {
       return undefined;
     }
     results.players.sort((a, b) => a.rank - b.rank);
-    this.log(`Found ${results.players.length} players in ${(performance.now() - before).toFixed(2)}ms`);
+    this.log(`Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
     return results;
   }
 
@@ -53,7 +53,7 @@ class ScoreSaberFetcher extends DataFetcher {
     if (response === undefined) {
       return undefined;
     }
-    this.log(`Found player "${playerId}" in ${(performance.now() - before).toFixed(2)}ms`);
+    this.log(`Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
     return response;
   }
 
@@ -84,7 +84,7 @@ class ScoreSaberFetcher extends DataFetcher {
     if (response === undefined) {
       return undefined;
     }
-    this.log(`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(2)}ms`);
+    this.log(`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
     return response;
   }
 }

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { copyToClipboard } from "@/common/browser-utils";
+import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+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 ScoreButton from "./score-button";
+
+type Props = {
+  playerScore: ScoreSaberPlayerScore;
+  beatSaverMap?: BeatSaverMap;
+};
+
+export default function ScoreButtons({ playerScore, beatSaverMap }: Props) {
+  const { leaderboard } = playerScore;
+  const { toast } = useToast();
+
+  return (
+    <div className="hidden lg:flex flex-row flex-wrap gap-1 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 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>
+  );
+}

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

@@ -0,0 +1,78 @@
+import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
+import { songDifficultyToColor } from "@/common/song-utils";
+import FallbackLink from "@/components/fallback-link";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { StarIcon } from "@radix-ui/react-icons";
+import clsx from "clsx";
+import Image from "next/image";
+
+type Props = {
+  playerScore: ScoreSaberPlayerScore;
+  beatSaverMap?: BeatSaverMap;
+};
+
+export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
+  const { leaderboard } = playerScore;
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+  const mappersProfile =
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
+
+  return (
+    <div className="flex gap-3">
+      <div className="relative flex justify-center  h-[64px]">
+        <Tooltip>
+          <TooltipTrigger
+            asChild
+            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs"
+            style={{
+              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+            }}
+          >
+            {leaderboard.stars > 0 ? (
+              <div className="flex gap-1 items-center justify-center">
+                <p>{leaderboard.stars}</p>
+                <StarIcon className="w-4 h-4" />
+              </div>
+            ) : (
+              <p>{diff}</p>
+            )}
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              Difficulty: <span className="font-bold">{diff}</span>
+            </p>
+            {leaderboard.stars > 0 && (
+              <p>
+                Stars: <span className="font-bold">{leaderboard.stars}</span>
+              </p>
+            )}
+          </TooltipContent>
+        </Tooltip>
+        <Image
+          unoptimized
+          src={leaderboard.coverImage}
+          width={64}
+          height={64}
+          alt="Song Artwork"
+          className="rounded-md min-w-[64px]"
+          priority
+        />
+      </div>
+      <div className="flex">
+        <div className="overflow-y-clip">
+          <p className="text-pp">
+            {leaderboard.songName} {leaderboard.songSubName}
+          </p>
+          <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
+          <FallbackLink href={mappersProfile}>
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
+              {leaderboard.levelAuthorName}
+            </p>
+          </FallbackLink>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { timeAgo } from "@/common/time-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+
+type Props = {
+  playerScore: ScoreSaberPlayerScore;
+};
+
+export default function ScoreRankInfo({ playerScore }: Props) {
+  const { score } = playerScore;
+
+  return (
+    <div className="flex w-full flex-row justify-between items-center lg:w-[125px] lg:justify-center lg:flex-col">
+      <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+
+const stats = [
+  {
+    name: "PP",
+    create: (playerScore: ScoreSaberPlayerScore) => {
+      const { score } = playerScore;
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      return <StatValue value={`${score.pp.toFixed(2)}pp`} />;
+    },
+  },
+  {
+    name: "Accuracy",
+    create: (playerScore: ScoreSaberPlayerScore) => {
+      const { score, leaderboard } = playerScore;
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return <StatValue value={`${acc.toFixed(2)}%`} />;
+    },
+  },
+  {
+    name: "Score",
+    create: (playerScore: ScoreSaberPlayerScore) => {
+      const { score } = playerScore;
+      return <StatValue value={`${formatNumberWithCommas(score.baseScore)}`} />;
+    },
+  },
+  {
+    name: "Full Combo",
+    create: (playerScore: ScoreSaberPlayerScore) => {
+      const { score } = playerScore;
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <StatValue
+          value={
+            <>
+              <p>{fullCombo ? "FC" : formatNumberWithCommas(score.missedNotes)}</p>
+              <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+            </>
+          }
+        />
+      );
+    },
+  },
+];
+
+type Props = {
+  playerScore: ScoreSaberPlayerScore;
+};
+
+export default function ScoreStats({ playerScore }: Props) {
+  const itemsPerRow = 3;
+  const totalStats = stats.length;
+  const remainingItems = totalStats % itemsPerRow;
+  const emptySpaces = remainingItems > 0 ? itemsPerRow - remainingItems : 0;
+
+  return (
+    <div className="flex flex-wrap gap-2 pl-0 lg:pl-2">
+      {/* Render all but the last row of stats normally */}
+      {stats.slice(0, totalStats - remainingItems).map((stat) => (
+        <div key={stat.name} className="flex-1 min-w-[30%]">
+          {stat.create(playerScore)}
+        </div>
+      ))}
+
+      {/* Handle the last row - align right and push empty spaces to the left */}
+      <div className="flex justify-end w-full gap-2">
+        {Array(emptySpaces)
+          .fill(null)
+          .map((_, index) => (
+            <div key={`empty-${index}`} className="flex-1 min-w-[30%]"></div>
+          ))}
+        {stats.slice(totalStats - remainingItems).map((stat) => (
+          <div key={stat.name} className="flex-1 min-w-[30%]">
+            {stat.create(playerScore)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/player/score/score.tsx

@@ -1,24 +1,13 @@
 "use client";
 
-import { copyToClipboard } from "@/common/browser-utils";
 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 { formatNumberWithCommas } from "@/common/number-utils";
-import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
-import { songDifficultyToColor } from "@/common/song-utils";
-import { timeAgo } from "@/common/time-utils";
-import { songNameToYouTubeLink } from "@/common/youtube-utils";
-import FallbackLink from "@/components/fallback-link";
-import YouTubeLogo from "@/components/logos/youtube-logo";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useToast } from "@/hooks/use-toast";
-import { GlobeAmericasIcon, StarIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import BeatSaverLogo from "../../logos/beatsaver-logo";
-import ScoreButton from "./score-button";
+import { useCallback, useEffect, useState } from "react";
+import ScoreButtons from "./score-buttons";
+import ScoreSongInfo from "./score-info";
+import ScoreRankInfo from "./score-rank-info";
+import ScoreStats from "./score-stats";
 
 type Props = {
   /**
@@ -28,128 +17,24 @@ type Props = {
 };
 
 export default function Score({ playerScore }: Props) {
-  const { score, leaderboard } = playerScore;
-  const { toast } = useToast();
+  const { leaderboard } = playerScore;
   const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
 
-  useEffect(() => {
-    (async () => {
-      const beatSaverMap = await beatsaverFetcher.lookupMap(leaderboard.songHash);
-      setBeatSaverMap(beatSaverMap);
-    })();
-  }, [playerScore, leaderboard.songHash]);
+  const fetchBeatSaverData = useCallback(async () => {
+    const beatSaverMap = await beatsaverFetcher.lookupMap(leaderboard.songHash);
+    setBeatSaverMap(beatSaverMap);
+  }, [leaderboard.songHash]);
 
-  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
-  const mappersProfile =
-    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
+  useEffect(() => {
+    fetchBeatSaverData();
+  }, [fetchBeatSaverData]);
 
   return (
-    <div className="grid gap-2 md:gap-0 pb-2 pt-2 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] md:grid-cols-[0.85fr_5fr_1fr_1.2fr]">
-      <div className="flex w-full flex-row justify-between items-center md:w-[125px] md:justify-center md:flex-col">
-        <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>
-      </div>
-      <div className="flex gap-3">
-        <div className="relative flex justify-center  h-[64px]">
-          <Tooltip>
-            <TooltipTrigger
-              asChild
-              className="absolute w-[85%] h-[20px] bottom-0 mb-[-5px] rounded-sm flex justify-center items-center text-xs"
-              style={{
-                backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
-              }}
-            >
-              {leaderboard.stars > 0 ? (
-                <div className="flex gap-1 items-center justify-center">
-                  <p>{leaderboard.stars}</p>
-                  <StarIcon className="w-4 h-4" />
-                </div>
-              ) : (
-                <p>{diff}</p>
-              )}
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                Difficulty: <span className="font-bold">{diff}</span>
-              </p>
-              {leaderboard.stars > 0 && (
-                <p>
-                  Stars: <span className="font-bold">{leaderboard.stars}</span>
-                </p>
-              )}
-            </TooltipContent>
-          </Tooltip>
-          <Image
-            unoptimized
-            src={leaderboard.coverImage}
-            width={64}
-            height={64}
-            alt="Song Artwork"
-            className="rounded-md min-w-[64px]"
-            priority
-          />
-        </div>
-        <div className="flex">
-          <div className="overflow-y-clip">
-            <p className="text-pp">
-              {leaderboard.songName} {leaderboard.songSubName}
-            </p>
-            <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
-            <FallbackLink href={mappersProfile}>
-              <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
-                {leaderboard.levelAuthorName}
-              </p>
-            </FallbackLink>
-          </div>
-        </div>
-      </div>
-      <div className="hidden md:flex flex-row flex-wrap gap-1 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 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 className="flex justify-end">stats stuff</div>
+    <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>
   );
 }

src/components/stat-value.tsx

@@ -0,0 +1,25 @@
+type Props = {
+  /**
+   * The stat name.
+   */
+  name?: string;
+
+  /**
+   * The value of the stat.
+   */
+  value: React.ReactNode;
+};
+
+export default function StatValue({ name, value }: Props) {
+  return (
+    <div className="flex min-w-16 gap-2 bg-accent h-[28px] p-1 items-center justify-center rounded-md text-sm">
+      {name && (
+        <>
+          <p>{name}</p>
+          <div className="h-4 w-[1px] bg-primary" />
+        </>
+      )}
+      <div className="flex gap-1 items-center">{typeof value === "string" ? <p>{value}</p> : value}</div>
+    </div>
+  );
+}