From 5b56bb6721f53dfde9d56c31dce2bfdd1bc89eeb Mon Sep 17 00:00:00 2001
From: Khimesh Dewangan <khimeshdewangan@Mac-mini.local>
Date: Thu, 9 Jul 2026 19:08:08 +0530
Subject: [PATCH] fix(#1136): add rank # number to player & patron card on
 leaderboard

Adds a numeric rank badge (#1, #2, #3...) to the PlayerRank component when an index prop is provided. Passes index through PlayerTile from PlayerList mapping.

Closes MetaFam/TheGame#1136
---
 packages/web/components/Player/PlayerList.tsx |  2 +-
 packages/web/components/Player/PlayerRank.tsx | 13 +++++++++++++
 packages/web/components/Player/PlayerTile.tsx |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/Player/PlayerList.tsx b/packages/web/components/Player/PlayerList.tsx
index e04cf36bf..748ea58f1 100644
--- a/packages/web/components/Player/PlayerList.tsx
+++ b/packages/web/components/Player/PlayerList.tsx
@@ -23,7 +23,7 @@ export const PlayerList: React.FC<Props> = ({
     {players.map((player, idx) => (
       <PlayerTile
         key={player.profile?.username ?? idx}
-        {...{ player, showSeasonalXP }}
+        {...{ player, showSeasonalXP, index: idx }}
       />
     ))}
   </SimpleGrid>
diff --git a/packages/web/components/Player/PlayerRank.tsx b/packages/web/components/Player/PlayerRank.tsx
index e03372d4a..b5b9f9efe 100644
--- a/packages/web/components/Player/PlayerRank.tsx
+++ b/packages/web/components/Player/PlayerRank.tsx
@@ -7,11 +7,14 @@ import { convertToRoman } from '#utils/formatHelpers';
 type PlayerRankProps = {
   player: Player;
   showSeasonalXP?: boolean;
+  /** Optional numeric rank position (#1, #2, #3…) displayed on leaderboard cards */
+  index?: number;
 };
 
 export const PlayerRank: React.FC<PlayerRankProps> = ({
   player,
   showSeasonalXP,
+  index,
 }) => (
   <Flex
     direction="column"
@@ -26,6 +29,16 @@ export const PlayerRank: React.FC<PlayerRankProps> = ({
     zIndex={1}
   >
     <Flex flexDir="column" gap={2} zIndex={2}>
+      {index != null && (
+        <MetaTag
+          size="md"
+          color="white"
+          backgroundColor="purple.500"
+          justifyContent="center"
+        >
+          <TagLabel fontWeight="bold">#{index + 1}</TagLabel>
+        </MetaTag>
+      )}
       {player.rank && (
         <MetaTag
           backgroundColor={player.rank.toLowerCase()}
diff --git a/packages/web/components/Player/PlayerTile.tsx b/packages/web/components/Player/PlayerTile.tsx
index 7c0db0792..0e7dea69d 100644
--- a/packages/web/components/Player/PlayerTile.tsx
+++ b/packages/web/components/Player/PlayerTile.tsx
@@ -80,7 +80,7 @@ export const PlayerTile: React.FC<Props> = ({
           {isPatron && typeof index === 'number' && pSeedPrice ? (
             <PatronRank patron={player as Patron} {...{ pSeedPrice, index }} />
           ) : (
-            <PlayerRank {...{ player, showSeasonalXP }} />
+            <PlayerRank {...{ player, showSeasonalXP, index }} />
           )}
           <PlayerProfilePicture {...{ player }} size="xl" />
           <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>