added number formatting to some values

src/app/player/[id]/page.tsx

@@ -22,10 +22,10 @@ export async function generateMetadata({
   const description = `
     View ${player.name}'s scores, top plays, and more.
     
-    Rank: #${player.rank} (#${formatNumber(
+    Rank: #${formatNumber(player.rank)} (#${formatNumber(
       player.countryRank,
     )} - ${normalizedRegionName(player.country)})
-    PP: ${player.pp}
+    PP: ${formatNumber(player.pp)}
     Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
 
   return {

src/components/player/PlayerInfo.tsx

@@ -171,7 +171,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                   playerData.rank / 50,
                 )}`}
               >
-                <p>#{playerData.rank}</p>
+                <p>#{formatNumber(playerData.rank)}</p>
               </a>
             </div>
 
@@ -188,7 +188,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                   svg
                   className="!h-7 !w-7"
                 />
-                <p>#{playerData.countryRank}</p>
+                <p>#{formatNumber(playerData.countryRank)}</p>
               </a>
             </div>
 

src/components/player/Score.tsx

@@ -26,7 +26,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
       <div className="ml-3 flex flex-col items-start justify-center">
         <div className="hidden w-fit flex-row items-center justify-start gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
-          <p>#{score.rank}</p>
+          <p>#{formatNumber(score.rank)}</p>
         </div>
         <p
           className="hidden text-sm text-gray-200 md:block"
@@ -58,7 +58,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
           {/* Score rank */}
           <div className="flex items-center gap-1">
             <GlobeAsiaAustraliaIcon width={20} height={20} />
-            <p>#{score.rank}</p>
+            <p>#{formatNumber(score.rank)}</p>
           </div>
 
           {/* Time Set (Mobile) */}