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

fix: remove shadows, remove membership step, rename stuff

Browse Source
This commit is contained in:
vidvidvid
2022-03-20 10:25:35 +01:00
committed by vidvidvid
parent f5796a9345
commit 97ae0a5e6a
10 changed files with 17 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/components/Player/Section/PlayerColorDisposition.tsx → packages/web/components/Player/Section/PlayerPersonalityType.tsx
View File

@@ -10,12 +10,12 @@ import { useProfileField } from 'lib/hooks';
import React, { useEffect, useState } from 'react';
import { BoxTypes } from 'utils/boxTypes';
export type ColorDispositionProps = {
export type PersonalityTypeProps = {
player: Player;
editing?: boolean;
};
export const PlayerColorDisposition: React.FC<ColorDispositionProps> = ({
export const PlayerPersonalityType: React.FC<PersonalityTypeProps> = ({
player,
editing = false,
}) => {

4
packages/web/components/Profile/PlayerSection.tsx
View File

@@ -1,10 +1,10 @@
import { Flex, IconButton } from '@metafam/ds';
import { PlayerAchievements } from 'components/Player/Section/PlayerAchievements';
import { PlayerColorDisposition } from 'components/Player/Section/PlayerColorDisposition';
import { PlayerCompletedQuests } from 'components/Player/Section/PlayerCompletedQuests';
import { PlayerGallery } from 'components/Player/Section/PlayerGallery';
import { PlayerHero } from 'components/Player/Section/PlayerHero';
import { PlayerMemberships } from 'components/Player/Section/PlayerMemberships';
import { PlayerPersonalityType } from 'components/Player/Section/PlayerPersonalityType';
import { PlayerRoles } from 'components/Player/Section/PlayerRoles';
import { PlayerSkills } from 'components/Player/Section/PlayerSkills';
import { PlayerType } from 'components/Player/Section/PlayerType';
@@ -40,7 +40,7 @@ const PlayerSectionInner: React.FC<Props> = ({
case BoxTypes.PLAYER_DAO_MEMBERSHIPS:
return <PlayerMemberships {...{ player, isOwnProfile, editing }} />;
case BoxTypes.PLAYER_COLOR_DISPOSITION:
return <PlayerColorDisposition {...{ player, editing }} />;
return <PlayerPersonalityType {...{ player, editing }} />;
case BoxTypes.PLAYER_TYPE:
return <PlayerType {...{ player, editing }} />;
case BoxTypes.PLAYER_ROLES:

4
packages/web/components/Profile/ProfileSection.tsx
View File

@@ -17,7 +17,7 @@ import {
} from '@metafam/ds';
import { Maybe } from '@metafam/utils';
import BackgroundImage from 'assets/main-background.jpg';
import { SetupColorDisposition } from 'components/Setup/SetupColorDisposition';
import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType';
import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
import { SetupRoles } from 'components/Setup/SetupRoles';
import { SetupSkills } from 'components/Setup/SetupSkills';
@@ -207,7 +207,7 @@ const EditSection = ({
return <SetupPlayerType {...{ onClose, buttonLabel }} />;
}
case BoxTypes.PLAYER_COLOR_DISPOSITION: {
return <SetupColorDisposition {...{ onClose, buttonLabel }} />;
return <SetupPersonalityType {...{ onClose, buttonLabel }} />;
}
case BoxTypes.PLAYER_SKILLS: {
return <SetupSkills {...{ onClose, buttonLabel }} />;

154
packages/web/components/Setup/SetupMemberships.tsx
View File

@@ -1,154 +0,0 @@
import {
Box,
ChainIcon,
Flex,
Heading,
Image,
MetaButton,
MetaHeading,
Spinner,
Text,
Wrap,
WrapItem,
} from '@metafam/ds';
import { Maybe, Optional } from '@metafam/utils';
import { FlexContainer } from 'components/Container';
import { useSetupFlow } from 'contexts/SetupContext';
import { Membership } from 'graphql/types';
import React, { useState } from 'react';
import { getDAOLink } from 'utils/daoHelpers';
import { useMounted, useWeb3 } from '../../lib/hooks';
import { ExternalDaoLink } from '../Player/PlayerGuild';
export type SetupMembershipsProps = {
memberships: Array<Membership> | null | undefined;
setMemberships: React.Dispatch<
React.SetStateAction<Optional<Maybe<Array<Membership>>>>
>;
};
export const SetupMemberships: React.FC<SetupMembershipsProps> = ({
memberships,
}) => {
const { connecting, connected } = useWeb3();
const { onNextPress, nextButtonLabel } = useSetupFlow();
const [loading, setLoading] = useState(false);
const mounted = useMounted();
return (
<FlexContainer mb={8}>
<MetaHeading mb={5} textAlign="center">
Member&shy;ships
</MetaHeading>
{(() => {
if (!memberships) {
return (
<Flex>
<Spinner mr={4} />
<Text mb={10} maxW="50rem">
{!mounted || connecting || connected
? 'Loading…'
: 'Account Not Connected'}
</Text>
</Flex>
);
}
if (memberships.length === 0) {
return (
<Text mb={10} maxW="50rem">
We did not find any guilds associated with your account.
</Text>
);
}
return (
<Box maxW="50rem">
<Text mb={10} textAlign="center">
We found the following guilds associated with your account and
automatically added them to your profile.
</Text>
<Wrap columns={2} spacing={4} justify="center">
{memberships?.map((member) => (
<WrapItem key={member.id}>
<MembershipListing {...{ member }} />
</WrapItem>
))}
</Wrap>
</Box>
);
})()}
<MetaButton
onClick={() => {
setLoading(true);
onNextPress();
}}
mt={10}
isLoading={loading}
>
{nextButtonLabel}
</MetaButton>
</FlexContainer>
);
};
type MembershipListingProps = {
member: Membership;
};
const MembershipListing: React.FC<MembershipListingProps> = ({
member: { moloch },
}) => {
const { id: molochId, avatarURL, chain, title } = moloch;
const daoURL = getDAOLink(chain, molochId);
return (
<ExternalDaoLink
daoURL={daoURL}
bg="rgba(0, 0, 0, 0.2)"
border="2px transparent solid"
_hover={{ borderColor: 'purpleBoxLight' }}
>
<Flex align="center" p={2}>
<Flex align="center">
<Box bg="purpleBoxLight" minW={16} h={16} borderRadius={8}>
{avatarURL ? (
<Image
src={avatarURL}
w={14}
h={14}
mx="auto"
my={1}
borderRadius={4}
/>
) : (
<ChainIcon {...{ chain }} boxSize={16} p={2} />
)}
</Box>
<ChainIcon {...{ chain }} mx={2} boxSize="1.5em" />
</Flex>
<Heading
fontWeight="bold"
style={{ fontVariant: 'small-caps' }}
fontSize="xs"
color="cyanText"
ml={[0, '1em']}
sx={{ textIndent: [0, '-1em'] }}
textAlign={['center', 'left']}
flexGrow={1}
>
{title ?? (
<Text as={React.Fragment}>
Unknown{' '}
<Text as="span" textTransform="capitalize">
{chain}
</Text>{' '}
DAO
</Text>
)}
</Heading>
</Flex>
</ExternalDaoLink>
);
};

13
packages/web/components/Setup/SetupColorDisposition.tsx → packages/web/components/Setup/SetupPersonalityType.tsx
View File

@@ -109,14 +109,7 @@ export const ColorButtons: React.FC<ColorButtonsProps> = ({
>
{/* <Flex > */}
<Box w="30%">
<Image
w={16}
h={16}
mr={2}
src={image}
alt={name}
filter="drop-shadow(0px 0px 3px black)"
/>
<Image w={16} h={16} mr={2} src={image} alt={name} />
</Box>
<Stack w="70%">
<Text color="white" casing="uppercase">
@@ -138,7 +131,7 @@ export const ColorButtons: React.FC<ColorButtonsProps> = ({
</Wrap>
);
export const SetupColorDisposition: React.FC<MaybeModalProps> = ({
export const SetupPersonalityType: React.FC<MaybeModalProps> = ({
buttonLabel,
onClose,
}) => {
@@ -158,7 +151,7 @@ export const SetupColorDisposition: React.FC<MaybeModalProps> = ({
return (
<ProfileWizardPane
{...{ field, buttonLabel, onClose }}
title="Color Dis&#xAD;po&#xAD;sit&#xAD;ion"
title="Personality Type"
prompt={
<Text textAlign="center" maxW="30rem">
<Text as="span">Please select what defines you. </Text>

2
packages/web/next.config.js
View File

@@ -22,7 +22,7 @@ module.exports = withTM(
},
{
source: '/profile/setup',
destination: '/profile/setup/username',
destination: '/profile/setup/name',
permanent: false,
},
{

4
packages/web/pages/profile/setup/description.tsx
View File

@@ -12,7 +12,7 @@ export const getStaticProps = async () => ({
export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
const UsernameSetup: React.FC<DefaultSetupProps> = () => (
const DescriptionSetup: React.FC<DefaultSetupProps> = () => (
<SetupContextProvider>
<SetupProfile>
<SetupDescription />
@@ -20,4 +20,4 @@ const UsernameSetup: React.FC<DefaultSetupProps> = () => (
</SetupContextProvider>
);
export default UsernameSetup;
export default DescriptionSetup;

39
packages/web/pages/profile/setup/memberships.tsx
View File

@@ -1,39 +0,0 @@
import { SetupMemberships } from 'components/Setup/SetupMemberships';
import { SetupProfile } from 'components/Setup/SetupProfile';
import { SetupContextProvider } from 'contexts/SetupContext';
import { getDaoMemberships } from 'graphql/getMemberships';
import { Membership } from 'graphql/types';
import { useWeb3 } from 'lib/hooks';
import { InferGetStaticPropsType } from 'next';
import React, { useState } from 'react';
export const getStaticProps = async () => ({
props: {
hideTopMenu: true,
},
});
export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
const MembershipsSetup: React.FC<DefaultSetupProps> = () => {
const [memberships, setMemberships] = useState<
Array<Membership> | null | undefined
>();
const { address } = useWeb3();
getDaoMemberships(address).then((data) => {
setMemberships(data);
});
return (
<SetupContextProvider>
<SetupProfile>
<SetupMemberships
memberships={memberships}
setMemberships={setMemberships}
/>
</SetupProfile>
</SetupContextProvider>
);
};
export default MembershipsSetup;

8
packages/web/pages/profile/setup/colorDisposition.tsx → packages/web/pages/profile/setup/personalityType.tsx
View File

@@ -1,4 +1,4 @@
import { SetupColorDisposition } from 'components/Setup/SetupColorDisposition';
import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType';
import { SetupProfile } from 'components/Setup/SetupProfile';
import { SetupContextProvider } from 'contexts/SetupContext';
import { InferGetStaticPropsType } from 'next';
@@ -12,12 +12,12 @@ export const getStaticProps = async () => ({
export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;
const ColorDispositionSetup: React.FC<DefaultSetupProps> = () => (
const PersonalityTypeSetup: React.FC<DefaultSetupProps> = () => (
<SetupContextProvider>
<SetupProfile>
<SetupColorDisposition />
<SetupPersonalityType />
</SetupProfile>
</SetupContextProvider>
);
export default ColorDispositionSetup;
export default PersonalityTypeSetup;

7
packages/web/utils/setupOptions.tsx
View File

@@ -51,7 +51,7 @@ export class SetupOptions {
},
{
label: 'Personality Type',
slug: 'colorDisposition',
slug: 'personalityType',
sectionIndex: 0,
},
{
@@ -74,11 +74,6 @@ export class SetupOptions {
slug: 'roles',
sectionIndex: 2,
},
{
label: 'Memberships',
slug: 'memberships',
sectionIndex: 2,
},
{
label: 'Start Playing',
slug: 'complete',