github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-01-23 05:08:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

add features section

Browse Source
This commit is contained in:
Kris Urbas
2020-08-21 15:21:32 +02:00
committed by Hammad Jutt
parent 67a83d9064
commit 37547cf025
6 changed files with 103 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/design-system/src/index.ts
View File

@@ -1,11 +1,13 @@
export {
Avatar,
Badge,
Box,
Button,
ButtonGroup,
CSSReset,
ChakraProvider,
Center,
Container,
Divider,
Flex,
Grid,
@@ -25,7 +27,6 @@ export {
Wrap,
HStack,
VStack,
Container,
useTheme,
useToast,
} from '@chakra-ui/core';

2
packages/web/components/PageHeader.tsx
View File

@@ -7,7 +7,7 @@ import MetaGameImage from '../public/images/metagame.png';
export const PageHeader: React.FC = () => (
<Flex align="center" pt="1rem" pb="2rem" px="2rem">
<MetaLink as="/" href="/" display="block" mr="2rem">
<Image src={MetaGameImage} />
<Image src={MetaGameImage} alt="MetaGame" />
</MetaLink>
<ButtonGroup spacing="3rem">
<Button variant="link" color="offwhite">

22
packages/web/components/Player/PlayerFeature.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Box, Text } from '@metafam/ds';
import React from 'react';
type Props = { title: string; value?: string | null | undefined };
export const PlayerFeature: React.FC<Props> = ({ title, value, children }) => (
<Box>
<Text
fontFamily="body"
fontSize="sm"
fontWeight="bold"
color="blueLight"
textTransform="uppercase"
mb="0.5rem"
>
{title}
</Text>
<Text fontFamily="body" fontSize="md" fontWeight="bold">
{value || children}
</Text>
</Box>
);

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

@@ -0,0 +1,36 @@
import { Badge, Divider, Wrap } from '@metafam/ds';
import { MaxWidthContainer } from 'components/Container';
import { PlayerFeature } from 'components/Player/PlayerFeature';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
type Props = { player: PlayerFragmentFragment };
export const PlayerFeatures: React.FC<Props> = ({ player }) => {
return (
<MaxWidthContainer>
<Wrap
spacing="2rem"
ml={[0, 0, 0, '15rem']}
pt={['3rem', '3rem', '3rem', 0]}
>
<PlayerFeature
title="XP"
value={Math.floor(player.totalXp).toString()}
/>
<Divider orientation="vertical" color="#554671" />
<PlayerFeature title="Level">
<Badge backgroundColor={player.rank?.toLowerCase()} fontSize="sm">
{player.rank}
</Badge>
</PlayerFeature>
<Divider orientation="vertical" color="#554671" />
<PlayerFeature title="Role" value="Define your role" />
<Divider orientation="vertical" color="#554671" />
<PlayerFeature title="Timezone" value="Define your timezone" />
<Divider orientation="vertical" color="#554671" />
<PlayerFeature title="Availability" value="20h / week" />
</Wrap>
</MaxWidthContainer>
);
};

35
packages/web/components/Player/PlayerHero.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Avatar, Box, Flex, Text } from '@metafam/ds';
import { MaxWidthContainer } from 'components/Container';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import BackgroundImage from 'public/images/login-background.jpg';
import React from 'react';
import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
type Props = { player: PlayerFragmentFragment };
export const PlayerHero: React.FC<Props> = ({ player }) => {
return (
<Box bgImage={`url(${BackgroundImage})`} h="230px" mb="1.5rem">
<MaxWidthContainer>
<Flex pos="relative" top="4.5rem" align="center">
<Avatar
size="3xl"
w="12.5rem"
h="12.5rem"
src={getPlayerImage(player)}
name={getPlayerName(player)}
/>
<Box pl="2.5rem" mt="-2rem">
<Text fontSize="xl" fontFamily="heading" mb="0.25rem">
{getPlayerName(player)}
</Text>
<Text fontFamily="body" fontSize="md" textTransform="uppercase">
Personality type
</Text>
</Box>
</Flex>
</MaxWidthContainer>
</Box>
);
};

54
packages/web/pages/player/[username].tsx
View File

@@ -1,14 +1,10 @@
import {
Avatar,
Box,
Flex,
MetaBox,
MetaTag,
SimpleGrid,
Text,
} from '@metafam/ds';
import { MetaBox, SimpleGrid, Text } from '@metafam/ds';
import { MaxWidthContainer } from 'components/Container';
import { PageHeader } from 'components/PageHeader';
import { PlayerFeatures } from 'components/Player/PlayerFeatures';
import { PlayerHero } from 'components/Player/PlayerHero';
import { getPlayer } from 'graphql/getPlayer';
import { getPlayers } from 'graphql/getPlayers';
import {
GetStaticPaths,
GetStaticPropsContext,
@@ -17,11 +13,6 @@ import {
import Error from 'next/error';
import React from 'react';
import { getPlayer } from '../../graphql/getPlayer';
import { getPlayers } from '../../graphql/getPlayers';
import BackgroundImage from '../../public/images/login-background.jpg';
import { getPlayerImage, getPlayerName } from '../../utils/playerHelpers';
type Props = InferGetStaticPropsType<typeof getStaticProps>;
const PlayerPage: React.FC<Props> = ({ player }) => {
@@ -32,39 +23,8 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
return (
<>
<PageHeader />
<Box bgImage={`url(${BackgroundImage})`} h="230px" mb="1.5rem">
<MaxWidthContainer>
<Flex pos="relative" top="4.5rem" align="center">
<Avatar
size="3xl"
w="12.5rem"
h="12.5rem"
src={getPlayerImage(player)}
name={getPlayerName(player)}
/>
<Box pl="2.5rem" mt="-2rem">
<Text fontSize="xl" fontFamily="heading" mb="0.25rem">
{getPlayerName(player)}
</Text>
<Text fontFamily="body" fontSize="md" textTransform="uppercase">
Personality type
</Text>
<Box mt="4">
<MetaTag
backgroundColor={player.rank?.toLowerCase()}
mr="3"
size="md"
color="blackAlpha.600"
>
{player.rank}
</MetaTag>
<MetaTag size="md">XP: {Math.floor(player.totalXp)}</MetaTag>
</Box>
</Box>
</Flex>
</MaxWidthContainer>
</Box>
<PlayerHero player={player} />
<PlayerFeatures player={player} />
<MaxWidthContainer>
<SimpleGrid columns={[1, 1, 2, 3]} spacing="2rem" pt="3rem">
<MetaBox title="About me">