add map stats from beat saver

2024-10-23 15:33:25 +01:00
parent 62090b8054
commit 33b931b5f1
47 changed files with 835 additions and 289 deletions
--- a/projects/website/src/app/layout.tsx
+++ b/projects/website/src/app/layout.tsx
@ -5,7 +5,6 @@ import { QueryProvider } from "@/components/providers/query-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { AnimatePresence } from "framer-motion";
 import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import BackgroundCover from "../components/background-cover";
@ -79,16 +78,14 @@ export default function RootLayout({
            <OfflineNetwork>
              <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
                <QueryProvider>
-                  <AnimatePresence>
-                    <ApiHealth />
-                    <main className="flex flex-col min-h-screen gap-2 text-white w-full">
-                      <NavBar />
-                      <div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
-                        {children}
-                      </div>
-                      <Footer />
-                    </main>
-                  </AnimatePresence>
+                  <ApiHealth />
+                  <main className="flex flex-col min-h-screen gap-2 text-white w-full">
+                    <NavBar />
+                    <div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
+                      {children}
+                    </div>
+                    <Footer />
+                  </main>
                </QueryProvider>
              </ThemeProvider>
            </OfflineNetwork>
--- a/projects/website/src/common/song-utils.ts
+++ b/projects/website/src/common/song-utils.ts
@ -1,17 +1,23 @@
+import { MapDifficulty } from "@ssr/common/score/map-difficulty";
+
 type Difficulty = {
-  name: DifficultyName;
-  gamemode?: string;
+  /**
+   * The name of the difficulty
+   */
+  name: MapDifficulty;
+
+  /**
+   * The color of the difficulty
+   */
  color: string;
 };

-type DifficultyName = "Easy" | "Normal" | "Hard" | "Expert" | "Expert+";
-
 const difficulties: Difficulty[] = [
  { name: "Easy", color: "#3cb371" },
  { name: "Normal", color: "#59b0f4" },
  { name: "Hard", color: "#FF6347" },
  { name: "Expert", color: "#bf2a42" },
-  { name: "Expert+", color: "#8f48db" },
+  { name: "ExpertPlus", color: "#8f48db" },
 ];

 export type ScoreBadge = {
@ -22,7 +28,7 @@ export type ScoreBadge = {
 };

 const scoreBadges: ScoreBadge[] = [
-  { name: "SS+", min: 95, max: null, color: getDifficulty("Expert+")!.color },
+  { name: "SS+", min: 95, max: null, color: getDifficulty("ExpertPlus")!.color },
  { name: "SS", min: 90, max: 95, color: getDifficulty("Expert")!.color },
  { name: "S+", min: 85, max: 90, color: getDifficulty("Hard")!.color },
  { name: "S", min: 80, max: 85, color: getDifficulty("Normal")!.color },
@ -57,45 +63,16 @@ export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
  return scoreBadges[scoreBadges.length - 1];
 }

-/**
- * Parses a raw difficulty into a {@link Difficulty}
- * Example: _Easy_SoloStandard -> { name: "Easy", type: "Standard", color: "#59b0f4" }
- *
- * @param rawDifficulty the raw difficulty to parse
- * @return the parsed difficulty
- */
-export function getDifficultyFromRawDifficulty(rawDifficulty: string): Difficulty {
-  const [name, ...type] = rawDifficulty
-    .replace("Plus", "+") // Replaces Plus with + so we can match it to our difficulty names
-    .replace("Solo", "") // Removes "Solo"
-    .replace(/^_+|_+$/g, "") // Removes leading and trailing underscores
-    .split("_");
-  const difficulty = difficulties.find(d => d.name === name);
-  if (!difficulty) {
-    throw new Error(`Unknown difficulty: ${rawDifficulty}`);
-  }
-  return {
-    ...difficulty,
-    gamemode: type.join("_"),
-  };
-}
-
 /**
 * Gets a {@link Difficulty} from its name
 *
 * @param diff the name of the difficulty
 * @returns the difficulty
 */
-export function getDifficulty(diff: DifficultyName) {
-  return difficulties.find(d => d.name === diff);
-}
-
-/**
- * Turns the difficulty of a song into a color
- *
- * @param diff the difficulty to get the color for
- * @returns the color for the difficulty
- */
-export function songDifficultyToColor(diff: string) {
-  return getDifficultyFromRawDifficulty(diff).color;
+export function getDifficulty(diff: MapDifficulty) {
+  const difficulty = difficulties.find(d => d.name === diff);
+  if (!difficulty) {
+    throw new Error(`Unknown difficulty: ${diff}`);
+  }
+  return difficulty;
 }
--- a/projects/website/src/components/input/pagination.tsx
+++ b/projects/website/src/components/input/pagination.tsx
@ -14,14 +14,7 @@ import {
 import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid";

 type PaginationItemWrapperProps = {
-  /**
-   * Whether a page is currently loading.
-   */
  isLoadingPage: boolean;
-
-  /**
-   * The children to render.
-   */
  children: React.ReactNode;
 };

@ -38,34 +31,11 @@ function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrappe
 }

 type Props = {
-  /**
-   * If true, the pagination will be rendered as a mobile-friendly pagination.
-   */
  mobilePagination: boolean;
-
-  /**
-   * The current page.
-   */
  page: number;
-
-  /**
-   * The total number of pages.
-   */
  totalPages: number;
-
-  /**
-   * The page to show a loading icon on.
-   */
  loadingPage: number | undefined;
-
-  /**
-   * Callback function that is called when the user clicks on a page number.
-   */
  onPageChange: (page: number) => void;
-
-  /**
-   * Optional callback to generate the URL for each page.
-   */
  generatePageUrl?: (page: number) => string;
 };

@ -89,15 +59,12 @@ export default function Pagination({
    if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
      return;
    }
-
    setCurrentPage(newPage);
    onPageChange(newPage);
  };

  const handleLinkClick = (newPage: number, event: React.MouseEvent) => {
-    event.preventDefault(); // Prevent default navigation behavior
-
-    // Check if the new page is valid
+    event.preventDefault();
    if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
      return;
    }
@ -116,26 +83,26 @@ export default function Pagination({

    if (startPage > 1) {
      pageNumbers.push(
-        <>
-          <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
-            {!mobilePagination && (
-              <PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
-                1
-              </PaginationLink>
-            )}
-          </PaginationItemWrapper>
-          {startPage > 2 && !mobilePagination && (
-            <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
-              <PaginationEllipsis />
-            </PaginationItemWrapper>
+        <PaginationItemWrapper key={`start-1`} isLoadingPage={isLoading}>
+          {!mobilePagination && (
+            <PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
+              1
+            </PaginationLink>
          )}
-        </>
+        </PaginationItemWrapper>
      );
+      if (startPage > 2 && !mobilePagination) {
+        pageNumbers.push(
+          <PaginationItemWrapper key={`ellipsis-start`} isLoadingPage={isLoading}>
+            <PaginationEllipsis />
+          </PaginationItemWrapper>
+        );
+      }
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(
-        <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
+        <PaginationItemWrapper key={`page-${i}`} isLoadingPage={isLoading}>
          <PaginationLink
            isActive={i === currentPage}
            href={generatePageUrl ? generatePageUrl(i) : ""}
@ -153,17 +120,15 @@ export default function Pagination({
  return (
    <ShadCnPagination className="select-none">
      <PaginationContent>
-        {/* ">>" before the Previous button in mobile mode */}
        {mobilePagination && (
-          <PaginationItemWrapper key="mobile-start" isLoadingPage={isLoading}>
+          <PaginationItemWrapper key={`mobile-start`} isLoadingPage={isLoading}>
            <PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
              <ChevronDoubleLeftIcon className="h-4 w-4" />
            </PaginationLink>
          </PaginationItemWrapper>
        )}

-        {/* Previous button - disabled on the first page */}
-        <PaginationItemWrapper isLoadingPage={isLoading}>
+        <PaginationItemWrapper key={`previous`} isLoadingPage={isLoading}>
          <PaginationPrevious
            href={currentPage > 1 && generatePageUrl ? generatePageUrl(currentPage - 1) : ""}
            onClick={e => handleLinkClick(currentPage - 1, e)}
@ -176,10 +141,10 @@ export default function Pagination({

        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
          <>
-            <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
+            <PaginationItemWrapper key={`ellipsis-end`} isLoadingPage={isLoading}>
              <PaginationEllipsis />
            </PaginationItemWrapper>
-            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
+            <PaginationItemWrapper key={`end`} isLoadingPage={isLoading}>
              <PaginationLink
                href={generatePageUrl ? generatePageUrl(totalPages) : ""}
                onClick={e => handleLinkClick(totalPages, e)}
@ -190,8 +155,7 @@ export default function Pagination({
          </>
        )}

-        {/* Next button - disabled on the last page */}
-        <PaginationItemWrapper isLoadingPage={isLoading}>
+        <PaginationItemWrapper key={`next`} isLoadingPage={isLoading}>
          <PaginationNext
            href={currentPage < totalPages && generatePageUrl ? generatePageUrl(currentPage + 1) : ""}
            onClick={e => handleLinkClick(currentPage + 1, e)}
@ -200,9 +164,8 @@ export default function Pagination({
          />
        </PaginationItemWrapper>

-        {/* ">>" after the Next button in mobile mode */}
        {mobilePagination && (
-          <PaginationItemWrapper key="mobile-end" isLoadingPage={isLoading}>
+          <PaginationItemWrapper key={`mobile-end`} isLoadingPage={isLoading}>
            <PaginationLink
              href={generatePageUrl ? generatePageUrl(totalPages) : ""}
              onClick={e => handleLinkClick(totalPages, e)}
--- a/projects/website/src/components/input/search-player.tsx
+++ b/projects/website/src/components/input/search-player.tsx
@ -66,11 +66,11 @@ export default function SearchPlayer() {
      {results !== undefined && (
        <ScrollArea>
          <div className="flex flex-col gap-1 max-h-60">
-            {results?.map(player => {
+            {results?.map((player, index) => {
              return (
                <Link
                  href={`/player/${player.id}`}
-                  key={player.id}
+                  key={index}
                  className="bg-secondary p-2 rounded-md flex gap-2 items-center hover:brightness-75 transition-all transform-gpu"
                >
                  <Avatar>
--- a/projects/website/src/components/leaderboard/leaderboard-info.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-info.tsx
@ -3,7 +3,7 @@ import Image from "next/image";
 import { LeaderboardSongStarCount } from "@/components/leaderboard/leaderboard-song-star-count";
 import ScoreButtons from "@/components/score/score-buttons";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
+import { BeatSaverMap } from "../../../../common/src/model/beatsaver/map";
 import { getBeatSaverMapperProfileUrl } from "@ssr/common/utils/beatsaver.util";
 import FallbackLink from "@/components/fallback-link";
 import { formatNumber } from "@ssr/common/utils/number-utils";
--- a/projects/website/src/components/leaderboard/leaderboard-scores.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
@ -8,7 +8,7 @@ import Pagination from "../input/pagination";
 import LeaderboardScore from "./leaderboard-score";
 import { scoreAnimation } from "@/components/score/score-animation";
 import { Button } from "@/components/ui/button";
-import { getDifficultyFromRawDifficulty } from "@/common/song-utils";
+import { getDifficulty } from "@/common/song-utils";
 import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
@ -140,28 +140,26 @@ export default function LeaderboardScores({

      {showDifficulties && (
        <div className="flex gap-2 justify-center items-center flex-wrap">
-          {leaderboard.difficulties.map(({ difficultyRaw, leaderboardId }) => {
-            const difficulty = getDifficultyFromRawDifficulty(difficultyRaw);
-            // todo: add support for other gamemodes?
-            if (difficulty.gamemode !== "Standard") {
+          {leaderboard.difficulties.map(({ difficulty, characteristic, leaderboardId }, index) => {
+            if (characteristic !== "Standard") {
              return null;
            }

            const isSelected = leaderboardId === selectedLeaderboardId;
            return (
              <Button
-                key={difficultyRaw}
+                key={index}
                variant={isSelected ? "default" : "outline"}
                onClick={() => {
                  handleLeaderboardChange(leaderboardId);
                }}
                className={`border ${isSelected ? "bg-primary/5 font-bold" : ""}`}
                style={{
-                  color: getDifficultyFromRawDifficulty(difficultyRaw).color,
-                  borderColor: getDifficultyFromRawDifficulty(difficultyRaw).color,
+                  color: getDifficulty(difficulty).color,
+                  borderColor: getDifficulty(difficulty).color,
                }}
              >
-                {difficulty.name}
+                {difficulty}
              </Button>
            );
          })}
--- a/projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx
@ -1,4 +1,4 @@
-import { songDifficultyToColor } from "@/common/song-utils";
+import { getDifficulty } from "@/common/song-utils";
 import { StarIcon } from "@heroicons/react/24/solid";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";

@ -18,7 +18,7 @@ export function LeaderboardSongStarCount({ leaderboard }: LeaderboardSongStarCou
    <div
      className="w-fit h-[20px] rounded-sm flex justify-center items-center text-xs cursor-default"
      style={{
-        backgroundColor: songDifficultyToColor(leaderboard.difficulty.difficultyRaw) + "f0", // Transparency value (in hex 0-255)
+        backgroundColor: getDifficulty(leaderboard.difficulty.difficulty).color + "f0", // Transparency value (in hex 0-255)
      }}
    >
      <div className="flex gap-1 items-center justify-center p-1">
--- a/projects/website/src/components/navbar/friends-button.tsx
+++ b/projects/website/src/components/navbar/friends-button.tsx
@ -26,7 +26,7 @@ export default function FriendsButton() {
      </PopoverTrigger>
      <PopoverContent className="p-2">
        {friends && friends.length > 0 ? (
-          friends.map(friend => <Friend player={friend} key={friend.id} onClick={() => setOpen(false)} />)
+          friends.map((friend, index) => <Friend player={friend} key={index} onClick={() => setOpen(false)} />)
        ) : (
          <div className="text-sm flex flex-col gap-2 justify-center items-center">
            <p>You don&#39;t have any friends :(</p>
--- a/projects/website/src/components/score/map-stats.tsx
+++ b/projects/website/src/components/score/map-stats.tsx
@ -0,0 +1,53 @@
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import StatValue from "@/components/stat-value";
+import { getBeatSaverDifficulty } from "@ssr/common/utils/beatsaver.util";
+import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import { formatTime } from "@ssr/common/utils/time-utils";
+import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
+import { BombIcon, BrickWallIcon, DrumIcon, MusicIcon, TimerIcon } from "lucide-react";
+import { BsSpeedometer } from "react-icons/bs";
+import { CubeIcon } from "@heroicons/react/24/solid";
+
+type MapAndScoreData = {
+  /**
+   * The leaderboard that the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
+
+  /**
+   * The map that the score was set on.
+   */
+  beatSaver?: BeatSaverMap;
+};
+
+export function MapStats({ leaderboard, beatSaver }: MapAndScoreData) {
+  const metadata = beatSaver?.metadata;
+  const mapDiff = beatSaver
+    ? getBeatSaverDifficulty(beatSaver, leaderboard.songHash, leaderboard.difficulty.difficulty)
+    : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Map Stats */}
+      {mapDiff && metadata && (
+        <div className="flex flex-wrap gap-2 justify-center">
+          <StatValue name="Length" icon={<TimerIcon className="w-4 h-4" />} value={formatTime(metadata.duration)} />
+          <StatValue name="BPM" icon={<MusicIcon className="w-4 h-4" />} value={formatNumberWithCommas(metadata.bpm)} />
+          <StatValue name="NPS" icon={<DrumIcon className="w-4 h-4" />} value={mapDiff.nps.toFixed(2)} />
+          <StatValue name="NJS" icon={<BsSpeedometer className="w-4 h-4" />} value={mapDiff.njs.toFixed(2)} />
+          <StatValue
+            name="Notes"
+            icon={<CubeIcon className="w-4 h-4" />}
+            value={formatNumberWithCommas(mapDiff.notes)}
+          />
+          <StatValue
+            name="Bombs"
+            icon={<BombIcon className="w-4 h-4" />}
+            value={formatNumberWithCommas(mapDiff.bombs)}
+          />
+          <StatValue name="Obstacles" icon={<BrickWallIcon className="w-4 h-4" />} value={mapDiff.obstacles} />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-buttons.tsx
+++ b/projects/website/src/components/score/score-buttons.tsx
@ -12,7 +12,7 @@ import clsx from "clsx";
 import ScoreEditorButton from "@/components/score/score-editor-button";
 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 { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";

 type Props = {
--- a/projects/website/src/components/score/score-modifiers.tsx
+++ b/projects/website/src/components/score/score-modifiers.tsx
@ -21,7 +21,7 @@ type ScoreModifiersProps = {
 export function ScoreModifiers({ score, type, limit }: ScoreModifiersProps) {
  const modifiers = score.modifiers;
  if (modifiers.length === 0) {
-    return <p>-</p>;
+    return <span>-</span>;
  }

  switch (type) {
--- a/projects/website/src/components/score/score-song-info.tsx
+++ b/projects/website/src/components/score/score-song-info.tsx
@ -2,10 +2,10 @@ import FallbackLink from "@/components/fallback-link";
 import Tooltip from "@/components/tooltip";
 import { StarIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
-import { songDifficultyToColor } from "@/common/song-utils";
 import Link from "next/link";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import { getDifficulty } from "@/common/song-utils";

 type Props = {
  leaderboard: ScoreSaberLeaderboard;
@ -14,25 +14,25 @@ type Props = {

 export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
  const mappersProfile =
-    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.author.id}` : undefined;
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap.author.id}` : undefined;

  const starCount = leaderboard.stars;
-  const difficulty = leaderboard.difficulty;
+  const difficulty = leaderboard.difficulty.difficulty.replace("Plus", "+");
  return (
    <div className="flex gap-3 items-center">
      <div className="relative flex justify-center h-[64px]">
        <Tooltip
          display={
-            <>
-              <p>Difficulty: {difficulty.difficulty}</p>
+            <div>
+              <p>Difficulty: {difficulty}</p>
              {starCount > 0 && <p>Stars: {starCount.toFixed(2)}</p>}
-            </>
+            </div>
          }
        >
          <div
            className="absolute w-full h-[18px] bottom-0 right-0 rounded-sm flex justify-center items-center text-[0.70rem] cursor-default"
            style={{
-              backgroundColor: songDifficultyToColor(difficulty.difficultyRaw) + "f0", // Transparency value (in hex 0-255)
+              backgroundColor: getDifficulty(leaderboard.difficulty.difficulty).color + "f0", // Transparency value (in hex 0-255)
            }}
          >
            {starCount > 0 ? (
@ -41,7 +41,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
                <StarIcon className="w-[14px] h-[14px]" />
              </div>
            ) : (
-              <p>{difficulty.difficulty}</p>
+              <p>{difficulty}</p>
            )}
          </div>
        </Tooltip>
--- a/projects/website/src/components/score/score.tsx
+++ b/projects/website/src/components/score/score.tsx
@ -3,7 +3,7 @@
 import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
 import { useEffect, useState } from "react";
 import ScoreButtons from "./score-buttons";
-import ScoreSongInfo from "./score-info";
+import ScoreSongInfo from "./score-song-info";
 import ScoreRankInfo from "./score-rank-info";
 import ScoreStats from "./score-stats";
 import { motion } from "framer-motion";
@ -11,10 +11,10 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 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 { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Card from "@/components/card";
-import StatValue from "@/components/stat-value";
+import { MapStats } from "@/components/score/map-stats";

 type Props = {
  /**
@ -106,11 +106,7 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
          className="w-full mt-2"
        >
          <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>
-            )}
+            <MapStats leaderboard={leaderboard} beatSaver={beatSaverMap} />

            <LeaderboardScores
              initialPage={getPageFromRank(score.rank, 12)}
--- a/projects/website/src/components/stat-value.tsx
+++ b/projects/website/src/components/stat-value.tsx
@ -6,6 +6,11 @@ type Props = {
   */
  name?: string;

+  /**
+   * The icon for the stat.
+   */
+  icon?: React.ReactNode;
+
  /**
   * The background color of the stat.
   */
@ -17,7 +22,7 @@ type Props = {
  value: React.ReactNode;
 };

-export default function StatValue({ name, color, value }: Props) {
+export default function StatValue({ name, icon, color, value }: Props) {
  return (
    <div
      className={clsx(
@ -28,6 +33,7 @@ export default function StatValue({ name, color, value }: Props) {
        backgroundColor: (!color?.includes("bg") && color) || undefined,
      }}
    >
+      {icon}
      {name && (
        <>
          <p>{name}</p>
--- a/projects/website/src/components/tooltip.tsx
+++ b/projects/website/src/components/tooltip.tsx
@ -37,8 +37,7 @@ export default function Tooltip({ children, display, asChild = true, side = "top
  return (
    <ShadCnTooltip>
      <TooltipTrigger className={className} asChild={asChild}>
-        <button
-          type="button"
+        <div
          className={cn("cursor-default", className)}
          onClick={() => setOpen(!open)}
          onMouseEnter={() => setOpen(true)}
@ -46,7 +45,7 @@ export default function Tooltip({ children, display, asChild = true, side = "top
          onTouchStart={() => setOpen(!open)}
        >
          {children}
-        </button>
+        </div>
      </TooltipTrigger>
      <TooltipContent className="max-w-[350px]" side={side}>
        {display}