github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

extract PlayerRank

Browse Source
This commit is contained in:
vidvidvid
2022-11-08 16:27:22 +01:00
parent c37414d832
commit fe40c16da8
2 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/web/components/Player/PlayerRank.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { Flex, MetaTag, Text, WrapItem } from '@metafam/ds';
import { Player } from 'graphql/autogen/types';
import React from 'react';
type PlayerRankProps = {
player: Player;
};
export const PlayerRank: React.FC<PlayerRankProps> = ({ player }) => (
<Flex
flexDir="column"
gap={1}
pos="absolute"
left={-8}
p={3}
top={-8}
background="rgba(255, 255, 255, 0.1)"
backdropFilter="blur(10.5px)"
borderRadius="8px"
>
{player.rank && (
<WrapItem>
<MetaTag
backgroundColor={player.rank.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{player.rank}
</MetaTag>
</WrapItem>
)}
<Text fontSize="sm" color="blueLight">
XP: {Math.floor(player.totalXP).toLocaleString()}
</Text>
</Flex>
);

30
packages/web/components/Player/PlayerTile.tsx
View File

@@ -5,13 +5,11 @@ import {
Link,
LinkBox,
LoadingState,
MetaTag,
MetaTile,
MetaTileBody,
MetaTileHeader,
Text,
VStack,
WrapItem,
} from '@metafam/ds';
import { PlayerContacts } from 'components/Player/PlayerContacts';
import { PlayerProfilePicture } from 'components/Player/PlayerProfilePicture';
@@ -27,6 +25,7 @@ import {
getPlayerURL,
} from 'utils/playerHelpers';
import { PlayerRank } from './PlayerRank';
import { DAOMembershipSmall } from './Section/PlayerMemberships';
type Props = {
@@ -69,32 +68,7 @@ export const PlayerTile: React.FC<Props> = ({ player }) => {
>
<MetaTileHeader>
<VStack pos="relative">
<Flex
flexDir="column"
gap={1}
pos="absolute"
left={-8}
p={3}
top={-8}
background="rgba(255, 255, 255, 0.1)"
backdropFilter="blur(10.5px)"
borderRadius="8px"
>
{player.rank && (
<WrapItem>
<MetaTag
backgroundColor={player.rank.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{player.rank}
</MetaTag>
</WrapItem>
)}
<Text fontSize="sm" color="blueLight">
XP: {Math.floor(player.totalXP).toLocaleString()}
</Text>
</Flex>
<PlayerRank {...{ player }} />
<PlayerProfilePicture {...{ player }} size="xl" />
<Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
<Heading