-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Builder gems 7 contribution viz on card (#4898)
* Update builder card activity script * Gems activity viz * Fixed gems viz circle * Fixed issue with mobile screen * Added script to prefixx builder card activities * Added points map tooltip * Show builder activity map tooltip and dialog * Resolved reviews * Fixed update builder card activity script * Update circiles to fit on mobile screen * Fixed heading for mobile * Prefilled builder card activities
- Loading branch information
Showing
19 changed files
with
429 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
.../scoutgame/components/common/Card/BuilderCard/BuilderCardActivity/BuilderCardActivity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| 'use client'; | ||
|
|
||
| import type { Theme } from '@mui/material'; | ||
| import { Stack, Tooltip, useMediaQuery } from '@mui/material'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import { Dialog } from 'components/common/Dialog'; | ||
|
|
||
| import { BuilderCardActivityTooltip } from './BuilderCardActivityTooltip'; | ||
|
|
||
| export function BuilderCardActivity({ | ||
| size, | ||
| last7DaysGems | ||
| }: { | ||
| size: 'x-small' | 'small' | 'medium' | 'large'; | ||
| last7DaysGems: number[]; | ||
| }) { | ||
| const [isDialogOpen, setIsDialogOpen] = useState(false); | ||
| const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'), { noSsr: true }); | ||
| let gemHeight = size === 'x-small' ? 12 : size === 'small' ? 13.5 : size === 'medium' ? 14.5 : 16; | ||
| if (isMobile) { | ||
| gemHeight *= 0.75; | ||
| } | ||
| return ( | ||
| <> | ||
| <Tooltip title={<BuilderCardActivityTooltip />}> | ||
| <Stack | ||
| flexDirection='row' | ||
| gap={{ | ||
| xs: 0.75, | ||
| md: 1.25 | ||
| }} | ||
| width='100%' | ||
| height={gemHeight} | ||
| px={1} | ||
| mt={0.5} | ||
| alignItems='center' | ||
| onClick={(e) => { | ||
| if (isMobile) { | ||
| e.preventDefault(); | ||
| setIsDialogOpen(true); | ||
| } | ||
| }} | ||
| > | ||
| {last7DaysGems?.map((gem, index) => { | ||
| const height = gem === 0 ? gemHeight * 0.35 : gem <= 29 ? gemHeight * 0.65 : gemHeight; | ||
|
|
||
| return ( | ||
| <Stack | ||
| key={`${index.toString()}-${gem}`} | ||
| sx={{ | ||
| flex: 1, | ||
| flexDirection: 'row', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: '100%' | ||
| }} | ||
| > | ||
| <Stack | ||
| sx={{ | ||
| borderRadius: '50%', | ||
| width: height, | ||
| height, | ||
| backgroundColor: 'text.secondary' | ||
| }} | ||
| /> | ||
| </Stack> | ||
| ); | ||
| })} | ||
| </Stack> | ||
| </Tooltip> | ||
| <Dialog | ||
| open={isDialogOpen} | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| }} | ||
| onClose={() => setIsDialogOpen(false)} | ||
| title='Builder Activity Map' | ||
| > | ||
| <BuilderCardActivityTooltip /> | ||
| </Dialog> | ||
| </> | ||
| ); | ||
| } |
65 changes: 65 additions & 0 deletions
65
...ame/components/common/Card/BuilderCard/BuilderCardActivity/BuilderCardActivityTooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Stack, Typography } from '@mui/material'; | ||
|
|
||
| import { GemsIcon } from 'components/common/Icons'; | ||
|
|
||
| export function BuilderCardActivityTooltip() { | ||
| return ( | ||
| <Stack flexDirection='column' gap={0.5} py={1} width='fit-content'> | ||
| <Stack flexDirection='row' gap={2} justifyContent='space-between' alignItems='center'> | ||
| <Stack width={50} alignItems='center'> | ||
| <Stack | ||
| sx={{ | ||
| width: 20, | ||
| height: 20, | ||
| borderRadius: '50%', | ||
| backgroundColor: 'text.secondary' | ||
| }} | ||
| /> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={0.5} flex={1} alignItems='center'> | ||
| <Typography>= Scored 30+ </Typography> | ||
| <GemsIcon size={16} /> | ||
| </Stack> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={2} justifyContent='space-between' alignItems='center'> | ||
| <Stack width={50} alignItems='center'> | ||
| <Stack | ||
| sx={{ | ||
| width: 10, | ||
| height: 10, | ||
| borderRadius: '50%', | ||
| backgroundColor: 'text.secondary' | ||
| }} | ||
| /> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={0.5} flex={1} alignItems='center'> | ||
| <Typography>= Scored 1 to 29 </Typography> | ||
| <GemsIcon size={16} /> | ||
| </Stack> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={2} justifyContent='space-between' alignItems='center'> | ||
| <Stack width={50} alignItems='center'> | ||
| <Stack | ||
| sx={{ | ||
| width: 5, | ||
| height: 5, | ||
| borderRadius: '50%', | ||
| backgroundColor: 'text.secondary' | ||
| }} | ||
| /> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={0.5} flex={1} alignItems='center'> | ||
| <Typography>= No activity </Typography> | ||
| </Stack> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={2} justifyContent='space-between' alignItems='center'> | ||
| <Stack width={50} alignItems='center'> | ||
| <Typography color='text.secondary'>Empty</Typography> | ||
| </Stack> | ||
| <Stack flexDirection='row' gap={0.5} flex={1} alignItems='center'> | ||
| <Typography>= No data </Typography> | ||
| </Stack> | ||
| </Stack> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.