mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
5f8cae1aea
* removing BrightId *(unused)* and DAOHaus memberships *(loaded separately)* from `Player` retreival 🦷 * setting `max-width` on hamburger menu 🧾 * increasing shown DAOs, shunting remote schemas, & handling missing Discord token 🤐 * triggering recalc on element resize 🚲 * adding copy of ETH address on profile image click 🛹 * adding `@emotion/cache` to try and eliminate unstyled content render ⚓ * cleaning up failed emotion cache experiment 🚓 * updating Ceramic & locking versions to beat a dependency conflict 🤲🏿
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Flex, MetaTag, TagLabel, Text } from '@metafam/ds';
|
|
import { getSeasonNum } from '@metafam/utils';
|
|
import { Player } from 'graphql/autogen/types';
|
|
import React from 'react';
|
|
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>
|
|
);
|