profile setup - about you flow (#130)

* added data for personality types and refactored images

* setup personality type

* setup player type

* player types descriptions

packages/web/components/Container.tsx

@@ -6,8 +6,9 @@ type Props = React.ComponentProps<typeof Flex>;
 export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
   <Flex
     bgSize="cover"
+    bgAttachment="fixed"
     w="100%"
-    h="100vh"
+    minH="100vh"
     p={[4, 8, 12]}
     direction="column"
     align="center"

packages/web/components/PageHeader.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Flex, Image, Stack } from '@metafam/ds';
+import MetaGameImage from 'assets/metagame.png';
 import { MetaLink } from 'components/Link';
 import { LoginButton } from 'components/LoginButton';
-import MetaGameImage from 'public/images/metagame.png';
 import React from 'react';
 
 const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
@@ -45,7 +45,7 @@ export const PageHeader: React.FC = () => {
       px="8"
     >
       <MetaLink href="/" display="block" mr="10">
-        <Image src={MetaGameImage} alt="MetaGame" mt={-2} />
+        <Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
       </MetaLink>
 
       <Button

packages/web/components/Player/PlayerContacts.tsx

@@ -1,9 +1,8 @@
 import { Button } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 import { FaGithub, FaTwitter } from 'react-icons/fa';
 
-import { PlayerFragmentFragment } from '../../graphql/autogen/types';
-
 type Props = {
   player: PlayerFragmentFragment;
 };

packages/web/components/Player/PlayerHero.tsx

@@ -1,11 +1,10 @@
 import { Avatar, Box, Container, Flex, HStack, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/login-background.jpg';
+import { PlayerContacts } from 'components/Player/PlayerContacts';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
-import BackgroundImage from 'public/images/login-background.jpg';
 import React from 'react';
 import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
 
-import { PlayerContacts } from './PlayerContacts';
-
 type Props = { player: PlayerFragmentFragment };
 
 export const PlayerHero: React.FC<Props> = ({ player }) => {

packages/web/components/Setup/SetupHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
+import AvatarImage from 'assets/avatar.png';
+import BackImage from 'assets/Back.svg';
+import SkipImage from 'assets/Skip.svg';
 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 { options } from 'utils/setupOptions';
 
@@ -12,10 +12,11 @@ export const SetupHeader: React.FC = () => {
   return (
     <Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
       <FlexContainer justify="flex-end" onClick={onBackPress} cursor="pointer">
-        <Image src={BackImage} h="1rem" />
+        <Image src={BackImage} h="1rem" alt="Back" />
       </FlexContainer>
       {options.map((option, id) => (
         <StepProgress
+          key={option.label}
           title={option.title}
           step={id}
           isActive={step === id}
@@ -24,7 +25,7 @@ export const SetupHeader: React.FC = () => {
         />
       ))}
       <FlexContainer justify="flex-end" onClick={onNextPress} cursor="pointer">
-        <Image src={SkipImage} h="1rem" />
+        <Image src={SkipImage} h="1rem" alt="Forward" />
       </FlexContainer>
     </Grid>
   );
@@ -81,6 +82,7 @@ export const StepProgress: React.FC<StepProps> = ({
           src={AvatarImage}
           left={`${progress}%`}
           transform="translateX(-50%)"
+          alt="Avatar"
         />
       )}
     </FlexContainer>

packages/web/components/Setup/SetupPersonalityType.tsx

@@ -1,15 +1,73 @@
-import { MetaButton, MetaHeading } from '@metafam/ds';
+import {
+  HStack,
+  Image,
+  MetaButton,
+  MetaHeading,
+  SimpleGrid,
+  Text,
+} from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
+import { MetaLink } from 'components/Link';
 import { SetupContext } from 'contexts/SetupContext';
 import React, { useContext } from 'react';
+import { PersonalityType, personalityTypes } from 'utils/setupOptions';
 
 export const SetupPersonalityType: React.FC = () => {
-  const { onNextPress, nextButtonLabel } = useContext(SetupContext);
+  const {
+    onNextPress,
+    nextButtonLabel,
+    personalityType,
+    setPersonalityType,
+  } = useContext(SetupContext);
   return (
     <FlexContainer>
-      <MetaHeading mb={10} textAlign="center">
+      <MetaHeading mb={5} textAlign="center">
         Personality Type
       </MetaHeading>
+      <Text color="white" mb={10}>
+        {`Please select your personality type below. Not sure what type you are? `}
+        <MetaLink href="https://enneagramtest.net/" isExternal>
+          Take a quick test.
+        </MetaLink>
+      </Text>
+      <SimpleGrid columns={[1, null, 2, 3]} spacing="8">
+        {personalityTypes.map((p: PersonalityType) => (
+          <HStack
+            key={p.id}
+            p={6}
+            spacing={4}
+            bgColor={
+              personalityType && personalityType.id === p.id
+                ? 'purpleBoxDark'
+                : 'purpleBoxLight'
+            }
+            borderRadius="0.5rem"
+            _hover={{ bgColor: 'purpleBoxDark' }}
+            transition="background 0.25s"
+            cursor="pointer"
+            onClick={() => setPersonalityType(p)}
+            border={
+              personalityType && personalityType.id === p.id
+                ? '2px solid #5a32e6'
+                : 'none'
+            }
+          >
+            <Image
+              w="4rem"
+              src={p.image}
+              alt={p.name}
+              style={{ mixBlendMode: 'color-dodge' }}
+            />
+            <FlexContainer align="stretch">
+              <Text color="white" fontWeight="bold">
+                {p.name}
+              </Text>
+              <Text color="blueLight">{p.description}</Text>
+            </FlexContainer>
+          </HStack>
+        ))}
+      </SimpleGrid>
+
       <MetaButton onClick={onNextPress} mt={10}>
         {nextButtonLabel}
       </MetaButton>

packages/web/components/Setup/SetupPlayerType.tsx

@@ -1,15 +1,55 @@
-import { MetaButton, MetaHeading } from '@metafam/ds';
+import { MetaButton, MetaHeading, SimpleGrid, Text } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { SetupContext } from 'contexts/SetupContext';
 import React, { useContext } from 'react';
+import { PlayerType, playerTypes } from 'utils/setupOptions';
 
 export const SetupPlayerType: React.FC = () => {
-  const { onNextPress, nextButtonLabel } = useContext(SetupContext);
+  const {
+    onNextPress,
+    nextButtonLabel,
+    playerType,
+    setPlayerType,
+  } = useContext(SetupContext);
   return (
     <FlexContainer>
-      <MetaHeading mb={10} textAlign="center">
+      <MetaHeading mb={5} textAlign="center">
         Player Type
       </MetaHeading>
+      <Text color="white" mb={10}>
+        Please read the features of each player type below. And select the one
+        that suits you best.
+      </Text>
+      <SimpleGrid columns={[1, null, 2, 3]} spacing="8">
+        {playerTypes.map((p: PlayerType) => (
+          <FlexContainer
+            key={p.id}
+            p={6}
+            bgColor={
+              playerType && playerType.id === p.id
+                ? 'purpleBoxDark'
+                : 'purpleBoxLight'
+            }
+            borderRadius="0.5rem"
+            _hover={{ bgColor: 'purpleBoxDark' }}
+            transition="background 0.25s"
+            cursor="pointer"
+            onClick={() => setPlayerType(p)}
+            align="stretch"
+            border={
+              playerType && playerType.id === p.id
+                ? '2px solid #5a32e6'
+                : 'none'
+            }
+          >
+            <Text color="white" fontWeight="bold" mb={4}>
+              {p.name}
+            </Text>
+            <Text color="blueLight">{p.description}</Text>
+          </FlexContainer>
+        ))}
+      </SimpleGrid>
+
       <MetaButton onClick={onNextPress} mt={10}>
         {nextButtonLabel}
       </MetaButton>

packages/web/components/SuccessPlayer.tsx

@@ -1,16 +1,16 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import AvatarImage from 'assets/avatar.png';
 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';
 
 export const SuccessPlayer: React.FC = () => {
   const router = useRouter();
   return (
-    <FlexContainer h="100%">
+    <FlexContainer my="auto">
       <MetaHeading m={5}>Success!</MetaHeading>
-      <Image m={10} src={AvatarImage} />
+      <Image m={10} src={AvatarImage} alt="Avatar" w="3.5rem" />
       <MetaButton mt={5} mb={8} onClick={() => router.push('/profile/setup')}>
         Set up your profile
       </MetaButton>

packages/web/components/Welcome/WelcomeHeader.tsx

@@ -1,6 +1,6 @@
 import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
+import MetaGameImage from 'assets/metagame.png';
 import { MetaLink } from 'components/Link';
-import MetaGameImage from 'public/images/metagame.png';
 import React from 'react';
 
 export const WelcomeHeader: React.FC = () => {
@@ -8,7 +8,7 @@ export const WelcomeHeader: React.FC = () => {
     <SimpleGrid columns={3} alignItems="center" width="100%" fontFamily="mono">
       <MetaLink href="">How to play MetaGame</MetaLink>
       <Flex justify="center" align="center">
-        <Image src={MetaGameImage} />
+        <Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
       </Flex>
       <Flex align="center" justify="flex-end">
         <Text color="offwhite">

packages/web/components/Welcome/WelcomePlayer.tsx

@@ -1,13 +1,13 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import PlayersImage from 'assets/players.png';
 import { FlexContainer } from 'components/Container';
 import { MetaLink } from 'components/Link';
-import PlayersImage from 'public/images/players.png';
 import React from 'react';
 
 export const WelcomePlayer: React.FC = () => {
   return (
     <FlexContainer flex={1} maxWidth="45rem">
-      <Image src={PlayersImage} />
+      <Image src={PlayersImage} alt="Player" w="12.5rem" />
       <MetaHeading m={5}>Become a Player</MetaHeading>
       <Text fontSize="lg" textAlign="center">
         MetaGame is an idea we can build a new world, a layer atop of the old

packages/web/contexts/SetupContext.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { options } from 'utils/setupOptions';
+import { options, PersonalityType, PlayerType } from 'utils/setupOptions';
 import { CategoryOption, SkillOption } from 'utils/skillHelpers';
 
 type SetupContextType = {
@@ -12,6 +12,12 @@ type SetupContextType = {
   skills: Array<SkillOption>;
   setSkills: React.Dispatch<React.SetStateAction<Array<SkillOption>>>;
   skillsList: Array<CategoryOption>;
+  personalityType: PersonalityType | undefined;
+  setPersonalityType: React.Dispatch<
+    React.SetStateAction<PersonalityType | undefined>
+  >;
+  playerType: PlayerType | undefined;
+  setPlayerType: React.Dispatch<React.SetStateAction<PlayerType | undefined>>;
 };
 
 export const SetupContext = React.createContext<SetupContextType>({
@@ -24,6 +30,10 @@ export const SetupContext = React.createContext<SetupContextType>({
   skills: [],
   setSkills: () => undefined,
   skillsList: [],
+  personalityType: undefined,
+  setPersonalityType: () => undefined,
+  playerType: undefined,
+  setPlayerType: () => undefined,
 });
 
 type Props = {
@@ -76,6 +86,8 @@ export const SetupContextProvider: React.FC<Props> = ({
   }, [step, screen, setStep, setScreen, numTotalSteps]);
 
   const [skills, setSkills] = useState<Array<SkillOption>>([]);
+  const [personalityType, setPersonalityType] = useState<PersonalityType>();
+  const [playerType, setPlayerType] = useState<PlayerType>();
 
   return (
     <SetupContext.Provider
@@ -86,10 +98,16 @@ export const SetupContextProvider: React.FC<Props> = ({
         onNextPress,
         onBackPress,
         nextButtonLabel,
-        // data
+        // skills
         skills,
         setSkills,
         skillsList,
+        // personality
+        personalityType,
+        setPersonalityType,
+        // player
+        playerType,
+        setPlayerType,
       }}
     >
       {children}

packages/web/pages/index.tsx

@@ -1,8 +1,8 @@
+import BackgroundImage from 'assets/login-background.jpg';
 import { PageContainer } from 'components/Container';
 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';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;

packages/web/pages/profile/setup.tsx

@@ -1,9 +1,9 @@
+import BackgroundImage from 'assets/profile-background.jpg';
 import { FlexContainer, PageContainer } from 'components/Container';
 import { SetupHeader } from 'components/Setup/SetupHeader';
 import { SetupContext, SetupContextProvider } from 'contexts/SetupContext';
 import { getSkills } from 'graphql/getSkills';
 import { InferGetStaticPropsType } from 'next';
-import BackgroundImage from 'public/images/profile-background.jpg';
 import React, { useContext } from 'react';
 import { options } from 'utils/setupOptions';
 import { parseSkills } from 'utils/skillHelpers';
@@ -13,7 +13,7 @@ const ProfileSetup: React.FC = () => {
   return (
     <PageContainer backgroundImage={`url(${BackgroundImage})`}>
       {(step + 1) % numTotalSteps !== 0 && <SetupHeader />}
-      <FlexContainer flex={1}>
+      <FlexContainer flex={1} pt={24}>
         {options[step].screens[screen].component}
       </FlexContainer>
     </PageContainer>

packages/web/pages/profile/success.tsx

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

packages/web/pages/register.tsx

@@ -1,7 +1,7 @@
+import BackgroundImage from 'assets/login-background.jpg';
 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 () => {

packages/web/pages/welcome.tsx

@@ -1,7 +1,7 @@
+import BackgroundImage from 'assets/login-background.jpg';
 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 () => {

packages/web/utils/setupOptions.tsx

@@ -1,3 +1,12 @@
+import AchieverImage from 'assets/achiever.png';
+import ChallengerImage from 'assets/challenger.png';
+import EnthusiastImage from 'assets/enthusiast.png';
+import HelperImage from 'assets/helper.png';
+import IndividualistImage from 'assets/individualist.png';
+import InvestigatorImage from 'assets/investigator.png';
+import LoyalistImage from 'assets/loyalist.png';
+import PeacemakerImage from 'assets/peacemaker.png';
+import ReformerImage from 'assets/reformer.png';
 import { SetupAvailability } from 'components/Setup/SetupAvailability';
 import { SetupDone } from 'components/Setup/SetupDone';
 import { SetupMemberships } from 'components/Setup/SetupMemberships';
@@ -8,7 +17,7 @@ import React from 'react';
 
 export const options = [
   {
-    label: 'Personality',
+    label: 'About You',
     title: { base: 'About You', sm: '1. About You' },
     screens: [
       {
@@ -58,3 +67,94 @@ export const options = [
     ],
   },
 ];
+
+export type PersonalityType = {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+};
+
+export const personalityTypes: Array<PersonalityType> = [
+  {
+    id: '1',
+    name: 'The Reformer',
+    description: 'Principled, Purposeful, Self-Controlled, and Perfectionistic',
+    image: ReformerImage,
+  },
+  {
+    id: '2',
+    name: 'The Helper',
+    description: 'Demonstrative, Generous, People-Pleasing, and Possessive',
+    image: HelperImage,
+  },
+  {
+    id: '3',
+    name: 'The Achiever',
+    description: 'Adaptive, Excelling, Driven, and Image-Conscious',
+    image: AchieverImage,
+  },
+  {
+    id: '4',
+    name: 'The Individualist',
+    description: 'Expressive, Dramatic, Self-Absorbed, and Temperamental',
+    image: IndividualistImage,
+  },
+  {
+    id: '5',
+    name: 'The Investigator',
+    description: 'Perceptive, Innovative, Secretive, and Isolated',
+    image: InvestigatorImage,
+  },
+  {
+    id: '6',
+    name: 'The Loyalist',
+    description: 'Engaging, Responsible, Anxious, and Suspicious',
+    image: LoyalistImage,
+  },
+  {
+    id: '7',
+    name: 'The Enthusiast',
+    description: 'Spontaneous, Versatile, Distractible, and Scattered',
+    image: EnthusiastImage,
+  },
+  {
+    id: '8',
+    name: 'The Challenger',
+    description: 'Self-Confident, Decisive, Willful, and Confrontational',
+    image: ChallengerImage,
+  },
+  {
+    id: '9',
+    name: 'The Peacemaker',
+    description: 'Receptive, Reassuring, Agreeable, and Complacent',
+    image: PeacemakerImage,
+  },
+];
+
+export type PlayerType = {
+  id: string;
+  name: string;
+  description: string;
+};
+
+export const playerTypes = [
+  {
+    id: '1',
+    name: 'Pioneer',
+    description:
+      'Pioneers are the ones out on the frontier, venturing into the unknown with no fear of failure. Working with incomplete tools & buggy software, they start weird new projects & experiments. They thrive in chaos.',
+  },
+  {
+    id: '2',
+    name: 'Settler',
+    description:
+      'Settlers live between chaos & order. They take the things that the pioneers build, build upon them & find them a market fit. They take care of things and help them grow until they are proven to work & taken over by Town Planners.',
+  },
+  {
+    id: '3',
+    name: 'Town Planner',
+    description:
+      'Polar opposite to the Pioneers, Town Planners are the last to arrive at the party. They are the ones concerned with the structure & making things efficient. They want documentation & they thrive in order.',
+  },
+];