some bug fixes and add the ranking page

projects/website/src/components/loaders/database-loader.tsx

@@ -3,7 +3,6 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
 import Database, { db } from "../../common/database/database";
 import FullscreenLoader from "./fullscreen-loader";
-import { useToast } from "@/hooks/use-toast";
 
 /**
  * The context for the database. This is used to access the database from within the app.

projects/website/src/components/navbar/navbar.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import React from "react";
 import NavbarButton from "./navbar-button";
 import ProfileButton from "./profile-button";
+import { TrendingUpIcon } from "lucide-react";
 
 type NavbarItem = {
   name: string;
@@ -19,6 +20,12 @@ const items: NavbarItem[] = [
     align: "left",
     icon: <HomeIcon className="h-5 w-5" />,
   },
+  {
+    name: "Ranking",
+    link: "/ranking",
+    align: "left",
+    icon: <TrendingUpIcon className="h-5 w-5" />,
+  },
   {
     name: "Search",
     link: "/search",

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

@@ -9,6 +9,7 @@ import Tooltip from "@/components/tooltip";
 import { ReactElement } from "react";
 import PlayerTrackedStatus from "@/components/player/player-tracked-status";
 import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
+import Link from "next/link";
 
 /**
  * Renders the change for a stat.
@@ -41,10 +42,12 @@ const playerData = [
       const rankChange = statisticChange?.rank ?? 0;
 
       return (
-        <div className="text-gray-300 flex gap-1 items-center">
-          <p>#{formatNumberWithCommas(player.rank)}</p>
-          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
-        </div>
+        <Link href={`/ranking/${player.country}/${player.rankPages.global}`}>
+          <div className="text-gray-300 flex gap-1 items-center hover:brightness-75 transition-all transform-gpu">
+            <p>#{formatNumberWithCommas(player.rank)}</p>
+            {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
+          </div>
+        </Link>
       );
     },
   },
@@ -58,10 +61,12 @@ const playerData = [
       const rankChange = statisticChange?.countryRank ?? 0;
 
       return (
-        <div className="text-gray-300 flex gap-1 items-center">
-          <p>#{formatNumberWithCommas(player.countryRank)}</p>
-          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
-        </div>
+        <Link href={`/ranking/${player.country}/${player.rankPages.country}`}>
+          <div className="text-gray-300 flex gap-1 items-center hover:brightness-75 transition-all transform-gpu">
+            <p>#{formatNumberWithCommas(player.countryRank)}</p>
+            {rankChange != 0 && renderChange(rankChange, <p>The change in your country rank compared to yesterday</p>)}
+          </div>
+        </Link>
       );
     },
   },

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import CountryFlag from "@/components/country-flag";
+import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
+import Link from "next/link";
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+
+type PlayerRankingProps = {
+  player: ScoreSaberPlayerToken;
+  isCountry: boolean;
+};
+
+export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  return (
+    <>
+      <td className="px-4 py-2">
+        #{formatNumberWithCommas(isCountry ? player.countryRank : player.rank)}{" "}
+        <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
+      </td>
+      <td className="flex items-center gap-2 px-4 py-2">
+        <Avatar className="w-[24px] h-[24px] pointer-events-none">
+          <AvatarImage
+            alt="Profile Picture"
+            src={`https://img.fascinated.cc/upload/w_128,h_128/${player.profilePicture}`}
+          />
+        </Avatar>
+        <CountryFlag code={player.country} size={14} />
+        <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}/top/1`}>
+          <p
+            className={
+              player.id == settings?.playerId ? "transform-gpu text-pp transition-all hover:brightness-75" : ""
+            }
+          >
+            {player.name}
+          </p>
+        </Link>
+      </td>
+      <td className="px-4 py-2 text-pp-blue">{formatPp(player.pp)}pp</td>
+      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
+      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
+      <td className="px-4 py-2">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>
+    </>
+  );
+}

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

@@ -0,0 +1,118 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import Pagination from "@/components/input/pagination";
+import { PlayerRanking } from "@/components/ranking/player-ranking";
+
+const REFRESH_INTERVAL = 1000 * 60 * 5;
+
+type RankingDataProps = {
+  /**
+   * The page to show when opening the leaderboard.
+   */
+  initialPage: number;
+
+  /**
+   * The country to show when opening the leaderboard.
+   */
+  country?: string | undefined;
+
+  /**
+   * The leaderboard to display.
+   */
+  initialPageData?: ScoreSaberPlayersPageToken;
+};
+
+export default function RankingData({ initialPage, country, initialPageData }: RankingDataProps) {
+  const isMobile = useIsMobile();
+
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [rankingData, setRankingData] = useState<ScoreSaberPlayersPageToken | undefined>(initialPageData);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["rankingData", currentPage],
+    queryFn: async () => {
+      const players =
+        country == undefined
+          ? await scoresaberService.lookupPlayers(currentPage)
+          : await scoresaberService.lookupPlayersByCountry(currentPage, country);
+      return players && players.players.length > 0 ? players : undefined;
+    },
+    staleTime: REFRESH_INTERVAL,
+    refetchInterval: REFRESH_INTERVAL,
+    refetchIntervalInBackground: false,
+  });
+
+  useEffect(() => {
+    if (data && (!isLoading || !isError)) {
+      setRankingData(data);
+    }
+  }, [data, isLoading, isError]);
+
+  /**
+   * Gets the URL to the page.
+   */
+  const getUrl = useCallback(
+    (page: number) => {
+      return `/ranking/${country != undefined ? `${country}/` : ""}${page}`;
+    },
+    [country]
+  );
+
+  /**
+   * Handle updating the URL when the page number,
+   * sort, or search term changes.
+   */
+  useEffect(() => {
+    const newUrl = getUrl(currentPage);
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+  }, [currentPage, getUrl]);
+
+  if (!rankingData) {
+    return <p>Unknown page.</p>;
+  }
+
+  const { players, metadata } = rankingData;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <table className="table w-full table-auto border-spacing-2 border-none text-left">
+        <thead>
+          <tr>
+            <th className="px-4 py-2">Rank</th>
+            <th className="px-4 py-2">Profile</th>
+            <th className="px-4 py-2">Performance Points</th>
+            <th className="px-4 py-2">Total Plays</th>
+            <th className="px-4 py-2">Total Ranked Plays</th>
+            <th className="px-4 py-2">Avg Ranked Accuracy</th>
+          </tr>
+        </thead>
+        <tbody className="border-none">
+          {players.map(player => (
+            <tr key={player.rank} className="border-b border-border">
+              <PlayerRanking isCountry={country != undefined} player={player} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {/* Pagination */}
+      <Pagination
+        mobilePagination={isMobile}
+        page={currentPage}
+        totalPages={Math.ceil(metadata.total / metadata.itemsPerPage)}
+        loadingPage={isLoading ? currentPage : undefined}
+        generatePageUrl={page => {
+          return getUrl(page);
+        }}
+        onPageChange={newPage => {
+          setCurrentPage(newPage);
+        }}
+      />
+    </div>
+  );
+}

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

@@ -6,5 +6,5 @@ import { Variants } from "framer-motion";
 export const scoreAnimation: Variants = {
   hiddenRight: { opacity: 0, x: 50 },
   hiddenLeft: { opacity: 0, x: -50 },
-  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
+  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.02 } },
 };