cleanup

projects/common/src/types/player/impl/scoresaber-player.ts

@@ -3,6 +3,7 @@ import ky from "ky";
 import { PlayerHistory } from "../player-history";
 import ScoreSaberPlayerToken from "../../token/scoresaber/score-saber-player-token";
 import { formatDateMinimal, getDaysAgoDate, getMidnightAlignedDate } from "../../../utils/time-utils";
+import { getPageFromRank } from "@ssr/utils/utils";
 
 /**
  * A ScoreSaber player.
@@ -202,10 +203,6 @@ export async function getScoreSaberPlayerFromToken(
     return (statToday - statOther) * (statType == "pp" ? 1 : -1);
   };
 
-  const getRankPosition = (rank: number): number => {
-    return Math.floor(rank / 50) + 1;
-  };
-
   return {
     id: token.id,
     name: token.name,
@@ -238,8 +235,8 @@ export async function getScoreSaberPlayerFromToken(
     statisticHistory: statisticHistory,
     statistics: token.scoreStats,
     rankPages: {
-      global: getRankPosition(token.rank),
-      country: getRankPosition(token.countryRank),
+      global: getPageFromRank(token.rank, 50),
+      country: getPageFromRank(token.countryRank, 50),
     },
     permissions: token.permissions,
     banned: token.banned,

projects/common/src/utils/utils.ts

@@ -13,3 +13,14 @@ export function isProduction() {
 export function delay(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+/**
+ * Gets the page from a rank.
+ *
+ * @param rank the rank
+ * @param itemsPerPage the items per page
+ * @returns the page
+ */
+export function getPageFromRank(rank: number, itemsPerPage: number) {
+  return Math.floor(rank / itemsPerPage) + 1;
+}

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

@@ -26,7 +26,7 @@ export default function LeaderboardScore({ player, score, leaderboard }: Props)
   return (
     <div className="py-1.5">
       <div className="grid items-center w-full gap-2 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
-        <ScoreRankInfo score={score} />
+        <ScoreRankInfo score={score} leaderboard={leaderboard} />
         <LeaderboardPlayer player={player} score={score} />
         <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
       </div>

projects/website/src/components/ranking/mini.tsx

@@ -11,6 +11,7 @@ import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
 import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
+import { getPageFromRank } from "@ssr/common/utils/utils";
 
 const PLAYER_NAME_MAX_LENGTH = 18;
 
@@ -46,7 +47,7 @@ const miniVariants: Variants = {
     itemsPerPage: 50,
     icon: () => <GlobeAmericasIcon className="w-6 h-6" />,
     getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
-      return Math.floor((player.rank - 1) / itemsPerPage) + 1;
+      return getPageFromRank(player.rank - 1, itemsPerPage);
     },
     getRank: (player: ScoreSaberPlayer) => {
       return player.rank;
@@ -61,7 +62,7 @@ const miniVariants: Variants = {
       return <CountryFlag code={player.country} size={12} />;
     },
     getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
-      return Math.floor((player.countryRank - 1) / itemsPerPage) + 1;
+      return getPageFromRank(player.countryRank - 1, itemsPerPage);
     },
     getRank: (player: ScoreSaberPlayer) => {
       return player.countryRank;

projects/website/src/components/score/score-rank-info.tsx

@@ -4,19 +4,28 @@ import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
 import Tooltip from "../tooltip";
 import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
 import { timeAgo } from "@ssr/common/utils/time-utils";
+import Link from "next/link";
+import { getPageFromRank } from "@ssr/common/utils/utils";
+import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
 
 type Props = {
   score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
 };
 
-export default function ScoreRankInfo({ score }: Props) {
+export default function ScoreRankInfo({ score, leaderboard }: Props) {
   return (
     <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
-        <p className="text-pp cursor-default">#{formatNumberWithCommas(score.rank)}</p>
+        <Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
+          <p className="text-pp cursor-default hover:brightness-75 transition-all transform-gpu cursor-pointer">
+            #{formatNumberWithCommas(score.rank)}
+          </p>
+        </Link>
       </div>
       <Tooltip
+        side="bottom"
         display={
           <p>
             {format({

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

@@ -11,6 +11,7 @@ import { motion } from "framer-motion";
 import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
 import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token";
 import { lookupBeatSaverMap } from "@/common/beatsaver-utils";
+import { getPageFromRank } from "@ssr/common/utils/utils";
 
 type Props = {
   /**
@@ -38,13 +39,12 @@ export default function Score({ player, playerScore }: Props) {
     fetchBeatSaverData();
   }, [fetchBeatSaverData]);
 
-  const page = Math.floor(score.rank / 12) + 1;
   return (
     <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.5fr_4fr_1fr_300px]`}
       >
-        <ScoreRankInfo score={score} />
+        <ScoreRankInfo score={score} leaderboard={leaderboard} />
         <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
         <ScoreButtons
           leaderboard={leaderboard}
@@ -61,7 +61,7 @@ export default function Score({ player, playerScore }: Props) {
           animate={{ opacity: 1, y: 0 }}
           className="w-full mt-2"
         >
-          <LeaderboardScores initialPage={page} player={player} leaderboard={leaderboard} />
+          <LeaderboardScores initialPage={getPageFromRank(score.rank, 12)} player={player} leaderboard={leaderboard} />
         </motion.div>
       )}
     </div>