some bug fixes and add the ranking page

projects/website/src/app/(pages)/leaderboard/[...slug]/page.tsx

@@ -42,7 +42,7 @@ const getLeaderboardData = async ({ params }: Props, fetchScores: boolean = true
   const id = slug[0]; // The leaderboard id
   const page = parseInt(slug[1]) || 1; // The page number
 
-  const cacheId = `${id}-${page}`;
+  const cacheId = `${id}-${page}-${fetchScores}`;
   if (leaderboardCache.has(cacheId)) {
     return leaderboardCache.get(cacheId) as LeaderboardData;
   }

projects/website/src/app/(pages)/player/[...slug]/page.tsx

@@ -51,7 +51,7 @@ const getPlayerData = async ({ params }: Props, fetchScores: boolean = true): Pr
   const page = parseInt(slug[2]) || 1; // The page number
   const search = (slug[3] as string) || ""; // The search query
 
-  const cacheId = `${id}-${sort}-${page}-${search}`;
+  const cacheId = `${id}-${sort}-${page}-${search}-${fetchScores}`;
   if (playerCache.has(cacheId)) {
     return playerCache.get(cacheId) as PlayerData;
   }

projects/website/src/app/(pages)/ranking/[[...slug]]/page.tsx

@@ -0,0 +1,109 @@
+import { Metadata } from "next";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import NodeCache from "node-cache";
+import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
+import Card from "@/components/card";
+import RankingData from "@/components/ranking/ranking-data";
+import CountryFlag from "@/components/country-flag";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
+
+const UNKNOWN_PAGE = {
+  title: "ScoreSaber Reloaded - Unknown Page",
+  description: "The page you were looking for could not be found.",
+};
+
+type Props = {
+  params: Promise<{
+    slug: string[];
+  }>;
+};
+
+type RankingPageData = {
+  players: ScoreSaberPlayersPageToken | undefined;
+  page: number;
+  country: string | undefined;
+};
+
+const rankingCache = new NodeCache({ stdTTL: 60, checkperiod: 120 });
+
+/**
+ * Gets the ranking data.
+ *
+ * @param params the params
+ * @returns the ranking data
+ */
+const getRankingData = async ({ params }: Props): Promise<RankingPageData> => {
+  const { slug } = await params;
+  const country = (slug && slug.length > 1 && (slug[0] as string).toUpperCase()) || undefined; // The country query
+  const page = (slug && parseInt(slug[country != undefined ? 1 : 0])) || 1; // The page number
+
+  const cacheId = `${country === undefined ? "global" : country}-${page}`;
+  if (rankingCache.has(cacheId)) {
+    return rankingCache.get(cacheId) as RankingPageData;
+  }
+
+  const players =
+    country == undefined
+      ? await scoresaberService.lookupPlayers(page)
+      : await scoresaberService.lookupPlayersByCountry(page, country);
+  const rankingData = {
+    players: players && players.players.length > 0 ? players : undefined,
+    page,
+    country,
+  };
+  rankingCache.set(cacheId, rankingData);
+  return rankingData;
+};
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const { players, page, country } = await getRankingData(props);
+  if (players === undefined) {
+    return {
+      title: UNKNOWN_PAGE.title,
+      description: UNKNOWN_PAGE.description,
+      openGraph: {
+        title: UNKNOWN_PAGE.title,
+        description: UNKNOWN_PAGE.description,
+      },
+    };
+  }
+
+  const title = `ScoreSaber Reloaded - Ranking Page (${page} - ${country === undefined ? "Global" : country})`;
+  return {
+    title: title,
+    openGraph: {
+      title: title,
+      description: `
+      Page: ${page}
+      ${country != undefined ? `Country: ${country}` : ""}
+      
+      View the scores for the ranking page!`,
+      images: [
+        {
+          // Show the profile picture of the first player
+          url: players.players[0].profilePicture,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary",
+    },
+  };
+}
+
+export default async function RankingPage(props: Props) {
+  const { players, page, country } = await getRankingData(props);
+
+  return (
+    <Card className="h-full w-full gap-2">
+      <div className="flex items-center gap-2 font-semibold">
+        {country && <CountryFlag code={country} size={16} />}
+        <p>
+          You are viewing {country ? "players from " + normalizedRegionName(country.toUpperCase()) : "Global players"}
+        </p>
+      </div>
+
+      <RankingData initialPage={page} initialPageData={players} country={country} />
+    </Card>
+  );
+}