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

improve PlayerTile & GuildTile

Browse Source
This commit is contained in:
vidvidvid
2022-11-09 09:05:19 +01:00
parent e3f02bebd7
commit 2fd55be73d
4 changed files with 46 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/design-system/src/MetaTile.tsx
View File

@@ -11,7 +11,6 @@ export const MetaTileHeader: React.FC<StackProps> = ({
spacing="6"
align="stretch"
position="relative"
height="full"
{...props}
borderTopRadius={10}
bgColor="rgba(255, 255, 255, 0.2)"

35
packages/web/components/Guild/GuildTile.tsx
View File

@@ -4,8 +4,6 @@ import {
Image,
Link,
LinkBox,
MetaButton,
MetaTag,
MetaTile,
MetaTileBody,
MetaTileHeader,
@@ -40,7 +38,7 @@ export const GuildTile: React.FC<Props> = ({ guild }) => (
height="100%"
>
<MetaTileHeader>
<VStack pos="relative" h="full">
<VStack pos="relative" h="22rem" justifyContent="center" p={4}>
{guild.logo ? (
<Image
src={optimizedImage('logoURL', guild.logo)}
@@ -76,24 +74,21 @@ export const GuildTile: React.FC<Props> = ({ guild }) => (
<Text fontSize="sm">{guild.description}</Text>
</VStack>
) : null}
{guild.type ? (
<MetaTag size="md" w="fit-content">
{guild.type}
GUILD
</MetaTag>
) : null}
<VStack spacing={2} align="stretch">
<Text textStyle="caption">Skills</Text>
<Text fontStyle="italic">Coming soon...</Text>
</VStack>
<Flex justifyContent="space-between">
<VStack spacing={2} align="stretch">
<Text textStyle="caption">BARRIER OF ENTRY</Text>
<Text fontStyle="italic">Coming soon...</Text>
</VStack>
<VStack spacing={2} align="stretch">
<Text textStyle="caption">CONTACT</Text>
<GuildLinksSmall {...{ guild }} />
</VStack>
</Flex>
</Flex>
<GuildLinksSmall {...{ guild }} />
{guild.joinButtonUrl ? (
<MetaButton
as="a"
href={guild.joinButtonUrl}
target="_blank"
bottom={0}
>
Join
</MetaButton>
) : null}
</MetaTileBody>
</Link>
</NextLink>

4
packages/web/components/Player/PlayerProfilePicture.tsx
View File

@@ -30,7 +30,9 @@ export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
name: name ?? undefined,
color: 'white',
borderTopRadius: 10,
marginTop: '0 !important',
margin: '0 !important',
width: '100%',
// height: '100%',
...props,
};

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

@@ -77,36 +77,34 @@ export const PlayerTile: React.FC<Props> = ({
}}
>
<MetaTileHeader>
<VStack pos="relative" h="full">
{isPatron && typeof index === 'number' && pSeedPrice ? (
<PatronRank
patron={player as Patron}
pSeedPrice={pSeedPrice}
index={index}
/>
) : (
<PlayerRank player={player} />
)}
<PlayerProfilePicture {...{ player }} size="xl" />
<Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
<Heading
size="lg"
color="white"
bgColor="rgba(255, 255, 255, 0.06)"
style={{ backdropFilter: 'blur(10px)' }}
lineHeight={1.8}
justifyContent="center"
px={3}
width="full"
textAlign="center"
borderRadius={10}
fontFamily="body"
fontWeight={400}
>
{getPlayerName(player)}
</Heading>
</Flex>
</VStack>
{isPatron && typeof index === 'number' && pSeedPrice ? (
<PatronRank
patron={player as Patron}
pSeedPrice={pSeedPrice}
index={index}
/>
) : (
<PlayerRank player={player} />
)}
<PlayerProfilePicture {...{ player }} size="xl" />
<Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
<Heading
size="lg"
color="white"
bgColor="rgba(255, 255, 255, 0.06)"
style={{ backdropFilter: 'blur(10px)' }}
lineHeight={1.8}
justifyContent="center"
px={3}
width="full"
textAlign="center"
borderRadius={10}
fontFamily="body"
fontWeight={400}
>
{getPlayerName(player)}
</Heading>
</Flex>
</MetaTileHeader>
<MetaTileBody pos="relative" height="full">
{displayDescription && (