mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-01-13 16:37:58 -05:00
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { Flex, MetaTag, TagLabel, Text } from '@metafam/ds';
|
|
import { getSeasonNum } from '@metafam/utils';
|
|
|
|
import { Player } from '#graphql/autogen/hasura-sdk';
|
|
import { convertToRoman } from '#utils/formatHelpers';
|
|
|
|
type PlayerRankProps = {
|
|
player: Player;
|
|
showSeasonalXP?: boolean;
|
|
};
|
|
|
|
export const PlayerRank: React.FC<PlayerRankProps> = ({
|
|
player,
|
|
showSeasonalXP,
|
|
}) => (
|
|
<Flex
|
|
direction="column"
|
|
gap={1}
|
|
pos="absolute"
|
|
left={-8}
|
|
p={3}
|
|
top={-8}
|
|
background="hsl(253deg 65% 11% / 55%)"
|
|
backdropFilter="blur(10.5px)"
|
|
borderRadius="8px"
|
|
zIndex={1}
|
|
>
|
|
<Flex flexDir="column" gap={2} zIndex={2}>
|
|
{player.rank && (
|
|
<MetaTag
|
|
backgroundColor={player.rank.toLowerCase()}
|
|
size="md"
|
|
color="blackAlpha.600"
|
|
justifyContent="center"
|
|
>
|
|
<TagLabel>{player.rank}</TagLabel>
|
|
</MetaTag>
|
|
)}
|
|
<Text fontSize="sm" color="blueLight">
|
|
XP: {Math.floor(player.totalXP).toLocaleString()}
|
|
</Text>
|
|
{showSeasonalXP && (
|
|
<Text fontSize="sm" color="blueLight">
|
|
S{convertToRoman(getSeasonNum())}:{' '}
|
|
{Math.floor(player.seasonXP).toLocaleString()}
|
|
</Text>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
);
|