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

restructure and reorganize components (#119)

Browse Source
This commit is contained in:
Kris Urbas
2020-09-21 18:22:42 +10:00
committed by GitHub
parent 8eca8568c4
commit 689cb4d231
17 changed files with 187 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,9 @@
import { Box, Button, Flex, Image, Stack } from '@metafam/ds';
import { MetaLink } from 'components/Link';
import { LoginButton } from 'components/LoginButton';
import MetaGameImage from 'public/images/metagame.png';
import React from 'react';
import MetaGameImage from '../public/images/metagame.png';
const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
children,
href,

82
packages/web/components/PlayerList.tsx Normal file
View File

@@ -0,0 +1,82 @@
import {
Avatar,
Heading,
HStack,
MetaTag,
SimpleGrid,
Text,
VStack,
Wrap,
} from '@metafam/ds';
import { MetaLink } from 'components/Link';
import { PlayerContacts } from 'components/Player/PlayerContacts';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
type Props = {
players: PlayerFragmentFragment[];
};
export const PlayerList: React.FC<Props> = ({ players }) => (
<SimpleGrid columns={[1, null, 2, 3]} spacing="8">
{players.map((p) => (
<VStack
key={p.id}
bg="whiteAlpha.200"
style={{ backdropFilter: 'blur(7px)' }}
rounded="lg"
py="6"
px="4"
spacing="6"
>
<MetaLink
as={`/player/${p.username}`}
href="player/[username]"
key={p.id}
>
<VStack>
<Avatar size="xl" src={getPlayerImage(p)} name={getPlayerName(p)} />
<Heading size="xs">{getPlayerName(p)}</Heading>
</VStack>
</MetaLink>
<Wrap>
<MetaTag
backgroundColor={p.rank?.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{p.rank}
</MetaTag>
<MetaTag size="md">XP: {Math.floor(p.totalXp)}</MetaTag>
</Wrap>
{p.daohausMemberships.length ? (
<VStack spacing={2}>
<Text fontFamily="mono" fontSize="sm" color="blueLight">
MEMBER OF
</Text>
<Wrap justify="center">
{p.daohausMemberships.map((member) => (
<MetaTag key={member.id} size="md" fontWeight="normal">
{member.moloch.title}
</MetaTag>
))}
</Wrap>
</VStack>
) : null}
{p.Accounts.length ? (
<VStack spacing={2}>
<Text fontFamily="mono" fontSize="sm" color="blueLight">
CONTACT
</Text>
<HStack mt="2">
<PlayerContacts player={p} />
</HStack>
</VStack>
) : null}
</VStack>
))}
</SimpleGrid>
);

3
packages/web/components/SetupDone.tsx → packages/web/components/Setup/SetupDone.tsx
View File

@@ -1,9 +1,8 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { useRouter } from 'next/router';
import React from 'react';
import { FlexContainer } from './Container';
export const SetupDone: React.FC = () => {
const router = useRouter();
return (

11
packages/web/components/SetupHeader.tsx → packages/web/components/Setup/SetupHeader.tsx
View File

@@ -1,12 +1,11 @@
import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import AvatarImage from 'public/images/avatar.png';
import BackImage from 'public/images/Back.svg';
import SkipImage from 'public/images/Skip.svg';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import AvatarImage from '../public/images/avatar.png';
import BackImage from '../public/images/Back.svg';
import SkipImage from '../public/images/Skip.svg';
import { FlexContainer } from './Container';
export const SetupHeader: React.FC = () => {
const { step, progress, setStep, numTotalSteps } = useContext(SetupContext);
return (

5
packages/web/components/SetupPersonality.tsx → packages/web/components/Setup/SetupPersonality.tsx
View File

@@ -1,9 +1,8 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import { FlexContainer } from './Container';
export const SetupPersonality: React.FC = () => {
const { useProgress } = useContext(SetupContext);
const numProgressSteps = 2;

5
packages/web/components/SetupProfession.tsx → packages/web/components/Setup/SetupProfession.tsx
View File

@@ -1,9 +1,8 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { SetupContext } from 'contexts/SetupContext';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import { FlexContainer } from './Container';
export const SetupProfession: React.FC = () => {
const { useProgress } = useContext(SetupContext);
const numProgressSteps = 3;

7
packages/web/components/SuccessPlayer.tsx
View File

@@ -1,11 +1,10 @@
import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { MetaLink } from 'components/Link';
import { useRouter } from 'next/router';
import AvatarImage from 'public/images/avatar.png';
import React from 'react';
import AvatarImage from '../public/images/avatar.png';
import { FlexContainer } from './Container';
import { MetaLink } from './Link';
export const SuccessPlayer: React.FC = () => {
const router = useRouter();
return (

3
packages/web/components/RegisterPlayer.tsx → packages/web/components/Welcome/RegisterPlayer.tsx
View File

@@ -1,10 +1,9 @@
import { Button, ButtonGroup, MetaHeading } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { Web3Context } from 'contexts/Web3Context';
import { useRouter } from 'next/router';
import React, { useContext } from 'react';
import { FlexContainer } from './Container';
export const RegisterPlayer: React.FC = () => {
return (
<FlexContainer flex={1}>

20
packages/web/components/Welcome/WelcomeHeader.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
import { MetaLink } from 'components/Link';
import MetaGameImage from 'public/images/metagame.png';
import React from 'react';
export const WelcomeHeader: React.FC = () => {
return (
<SimpleGrid columns={3} alignItems="center" width="100%" fontFamily="mono">
<MetaLink href="">How to play MetaGame</MetaLink>
<Flex justify="center" align="center">
<Image src={MetaGameImage} />
</Flex>
<Flex align="center" justify="flex-end">
<Text color="offwhite">
Already a Player? <MetaLink href="">Sign in</MetaLink>
</Text>
</Flex>
</SimpleGrid>
);
};

23
packages/web/components/WelcomePlayer.tsx → packages/web/components/Welcome/WelcomePlayer.tsx
View File

@@ -1,14 +1,10 @@
import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
import { FlexContainer } from 'components/Container';
import { MetaLink } from 'components/Link';
import PlayersImage from 'public/images/players.png';
import React from 'react';
import PlayersImage from '../public/images/players.png';
import { FlexContainer } from './Container';
type Props = {
next: () => void;
};
export const WelcomePlayer: React.FC<Props> = ({ next }) => {
export const WelcomePlayer: React.FC = () => {
return (
<FlexContainer flex={1} maxWidth="45rem">
<Image src={PlayersImage} />
@@ -19,14 +15,9 @@ export const WelcomePlayer: React.FC<Props> = ({ next }) => {
self-interest is better aligned with the common good & the ones creating
value are more directly rewarded.
</Text>
<MetaButton
onClick={() => {
next();
}}
mt={10}
>
Register
</MetaButton>
<MetaLink href="/register" _hover={{ textDecoration: 'none' }}>
<MetaButton mt={10}>Register</MetaButton>
</MetaLink>
</FlexContainer>
);
};

4
packages/web/pages/_app.tsx
View File

@@ -1,16 +1,16 @@
import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
import { PageHeader } from 'components/PageHeader';
import { Web3ContextProvider } from 'contexts/Web3Context';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { Web3ContextProvider } from '../contexts/Web3Context';
const app: React.FC<AppProps> = ({ pageProps, Component }) => {
return (
<ChakraProvider theme={MetaTheme}>
<CSSReset />
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MetaGame</title>
</Head>
<Web3ContextProvider>
{!pageProps.hidePageHeader && <PageHeader />}

82
packages/web/pages/index.tsx
View File

@@ -1,23 +1,10 @@
import {
Avatar,
Heading,
HStack,
MetaTag,
SimpleGrid,
Text,
VStack,
Wrap,
} from '@metafam/ds';
import { PageContainer } from 'components/Container';
import { MetaLink } from 'components/Link';
import { PlayerList } from 'components/PlayerList';
import { getPlayers } from 'graphql/getPlayers';
import { InferGetStaticPropsType } from 'next';
import BackgroundImage from 'public/images/login-background.jpg';
import React from 'react';
import { PlayerContacts } from '../components/Player/PlayerContacts';
import BackgroundImage from '../public/images/login-background.jpg';
import { getPlayerImage, getPlayerName } from '../utils/playerHelpers';
type Props = InferGetStaticPropsType<typeof getStaticProps>;
export const getStaticProps = async () => {
@@ -31,70 +18,7 @@ export const getStaticProps = async () => {
const Home: React.FC<Props> = ({ players }) => (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<SimpleGrid columns={[1, null, 2, 3]} spacing="8">
{players.map((p) => (
<VStack
key={p.id}
bg="whiteAlpha.200"
style={{ backdropFilter: 'blur(7px)' }}
rounded="lg"
py="6"
px="4"
spacing="6"
>
<MetaLink
as={`/player/${p.username}`}
href="player/[username]"
key={p.id}
>
<VStack>
<Avatar
size="xl"
src={getPlayerImage(p)}
name={getPlayerName(p)}
/>
<Heading size="xs">{getPlayerName(p)}</Heading>
</VStack>
</MetaLink>
<Wrap>
<MetaTag
backgroundColor={p.rank?.toLowerCase()}
size="md"
color="blackAlpha.600"
>
{p.rank}
</MetaTag>
<MetaTag size="md">XP: {Math.floor(p.totalXp)}</MetaTag>
</Wrap>
{p.daohausMemberships.length ? (
<VStack spacing={2}>
<Text fontFamily="mono" fontSize="sm" color="blueLight">
MEMBER OF
</Text>
<Wrap justify="center">
{p.daohausMemberships.map((member) => (
<MetaTag key={member.id} size="md" fontWeight="normal">
{member.moloch.title}
</MetaTag>
))}
</Wrap>
</VStack>
) : null}
{p.Accounts.length ? (
<VStack spacing={2}>
<Text fontFamily="mono" fontSize="sm" color="blueLight">
CONTACT
</Text>
<HStack mt="2">
<PlayerContacts player={p} />
</HStack>
</VStack>
) : null}
</VStack>
))}
</SimpleGrid>
<PlayerList players={players} />
</PageContainer>
);

51
packages/web/pages/login.tsx
View File

@@ -1,51 +0,0 @@
import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
import React, { useState } from 'react';
import { PageContainer } from '../components/Container';
import { MetaLink } from '../components/Link';
import { RegisterPlayer } from '../components/RegisterPlayer';
import { WelcomePlayer } from '../components/WelcomePlayer';
import BackgroundImage from '../public/images/login-background.jpg';
import MetaGameImage from '../public/images/metagame.png';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const Login: React.FC = () => {
const [step, setStep] = useState(0);
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<SimpleGrid
columns={3}
alignItems="center"
width="100%"
fontFamily="mono"
>
<MetaLink href="">How to play MetaGame</MetaLink>
<Flex justify="center" align="center">
<Image src={MetaGameImage} />
</Flex>
<Flex align="center" justify="flex-end">
<Text color="offwhite">
Already a Player? <MetaLink href="">Sign in</MetaLink>
</Text>
</Flex>
</SimpleGrid>
{step === 0 && (
<WelcomePlayer
next={() => {
setStep(1);
}}
/>
)}
{step === 1 && <RegisterPlayer />}
</PageContainer>
);
};
export default Login;

18
packages/web/pages/profile/setup.tsx
View File

@@ -1,16 +1,12 @@
import { PageContainer } from 'components/Container';
import { SetupDone } from 'components/Setup/SetupDone';
import { SetupHeader } from 'components/Setup/SetupHeader';
import { SetupPersonality } from 'components/Setup/SetupPersonality';
import { SetupProfession } from 'components/Setup/SetupProfession';
import { SetupContext, SetupContextProvider } from 'contexts/SetupContext';
import BackgroundImage from 'public/images/profile-background.jpg';
import React, { useContext } from 'react';
import { PageContainer } from '../../components/Container';
import { SetupDone } from '../../components/SetupDone';
import { SetupHeader } from '../../components/SetupHeader';
import { SetupPersonality } from '../../components/SetupPersonality';
import { SetupProfession } from '../../components/SetupProfession';
import {
SetupContext,
SetupContextProvider,
} from '../../contexts/SetupContext';
import BackgroundImage from '../../public/images/profile-background.jpg';
export const getStaticProps = async () => {
return {
props: {

7
packages/web/pages/profile/success.tsx
View File

@@ -1,9 +1,8 @@
import { PageContainer } from 'components/Container';
import { SuccessPlayer } from 'components/SuccessPlayer';
import BackgroundImage from 'public/images/profile-background.jpg';
import React from 'react';
import { PageContainer } from '../../components/Container';
import { SuccessPlayer } from '../../components/SuccessPlayer';
import BackgroundImage from '../../public/images/profile-background.jpg';
export const getStaticProps = async () => {
return {
props: {

24
packages/web/pages/register.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { PageContainer } from 'components/Container';
import { RegisterPlayer } from 'components/Welcome/RegisterPlayer';
import { WelcomeHeader } from 'components/Welcome/WelcomeHeader';
import BackgroundImage from 'public/images/login-background.jpg';
import React from 'react';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const Register: React.FC = () => {
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<WelcomeHeader />
<RegisterPlayer />
</PageContainer>
);
};
export default Register;

24
packages/web/pages/welcome.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { PageContainer } from 'components/Container';
import { WelcomeHeader } from 'components/Welcome/WelcomeHeader';
import { WelcomePlayer } from 'components/Welcome/WelcomePlayer';
import BackgroundImage from 'public/images/login-background.jpg';
import React from 'react';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const Welcome: React.FC = () => {
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
<WelcomeHeader />
<WelcomePlayer />
</PageContainer>
);
};
export default Welcome;