11import { Card , CardContent , Divider , Stack , Typography } from '@mui/material' ;
2- import { cleanUnderscore , msToDate , notateNumber , numberWithCommas , prefix } from '@utility/helpers' ;
2+ import { cleanUnderscore , getTabs , msToDate , notateNumber , numberWithCommas , prefix } from '@utility/helpers' ;
33import { CardTitleAndValue } from '@components/common/styles' ;
44import { IconInfoCircleFilled } from '@tabler/icons-react' ;
55import Tooltip from '@components/Tooltip' ;
6+ import Tabber from '@components/common/Tabber' ;
7+ import { PAGES } from '@components/constants' ;
68
79const TheJars = ( { hole } ) => {
810 return < >
911 < Stack direction = { 'row' } gap = { 2 } flexWrap = { 'wrap' } alignItems = { 'center' } >
1012 { hole ?. caverns ?. theJars ?. rupies ?. map ( ( amount , index ) => < CardTitleAndValue
1113 title = { '' } key = { `rupie-${ index } ` } stackProps icon = { `data/HoleJarR${ index } .png` }
12- value = { amount } /> ) }
14+ value = { numberWithCommas ( Math . floor ( amount ) ) } /> ) }
1315 </ Stack >
1416 < Divider sx = { { mt : 1 } } />
1517 < Stack direction = { 'row' } gap = { 2 } flexWrap = { 'wrap' } alignItems = { 'center' } >
@@ -27,41 +29,64 @@ const TheJars = ({ hole }) => {
2729 value = { `${ numberWithCommas ( Math . floor ( progress ) ) } / ${ numberWithCommas ( Math . floor ( req ) ) } ` } /> ) }
2830 </ Stack >
2931 < Divider sx = { { mb : 2 } } />
30- < Stack direction = { 'row' } gap = { 2 } flexWrap = { 'wrap' } alignItems = { 'center' } >
31- { hole ?. caverns ?. theJars ?. jars ?. map ( ( { name, unlocked, req, effect, perHour } , index ) => {
32- return < Card key = { `jar-${ index } ` } >
32+ < Tabber tabs = { getTabs ( PAGES . ACCOUNT [ 'world 5' ] . categories , 'hole' , 'Explore' , 'The Jars' ) } queryKey = { 'dnt' } >
33+ < Stack direction = { 'row' } gap = { 2 } flexWrap = { 'wrap' } alignItems = { 'center' } >
34+ { hole ?. caverns ?. theJars ?. jars ?. map ( ( { name, unlocked, req, effect } , index ) => {
35+ return < Card key = { `jar-${ index } ` } >
36+ < CardContent sx = { {
37+ width : 350 ,
38+ minHeight : 215 ,
39+ opacity : unlocked ? 1 : .5
40+ } } >
41+ < Stack direction = { 'row' } alignItems = { 'center' } gap = { 1 } >
42+ < img style = { { width : 26 , height : 26 , objectFit : 'contain' } } src = { `${ prefix } etc/Jar_${ index } .png` }
43+ alt = { `jar-${ index } ` } />
44+ < Typography variant = { 'body1' } > { cleanUnderscore ( name ) } </ Typography >
45+ </ Stack >
46+ < Typography sx = { { height : 41 , display : 'flex' , alignItems : 'center' } }
47+ variant = { 'body1' } > { effect } </ Typography >
48+ < Divider sx = { { mt : .5 , mb : 1 } } />
49+ < Stack direction = { 'row' } alignItems = { 'center' } gap = { 1 } >
50+ < Typography variant = { 'body1' } > Jars per
51+ hour: { Math . floor ( hole ?. caverns ?. theJars ?. perHour / req ) } </ Typography >
52+ < Tooltip title = { < Stack >
53+ < Typography variant = { 'body2' } > 2
54+ slots: { Math . floor ( ( hole ?. caverns ?. theJars ?. perHour * 2 ) / req ) } / hr</ Typography >
55+ < Typography variant = { 'body2' } > 3
56+ slots: { Math . floor ( ( hole ?. caverns ?. theJars ?. perHour * 3 ) / req ) } / hr</ Typography >
57+ </ Stack > } >
58+ < IconInfoCircleFilled size = { 18 } />
59+ </ Tooltip >
60+ </ Stack >
61+ < Typography variant = { 'body1' } > Time to
62+ full: { msToDate ( req / hole ?. caverns ?. theJars ?. perHour * 1000 * 3600 ) } </ Typography >
63+ < Typography variant = { 'body1' } > Req: { numberWithCommas ( Math . floor ( req ) ) } </ Typography >
64+ </ CardContent >
65+ </ Card >
66+ } ) }
67+ </ Stack >
68+ < Stack mt = { 2 } direction = { 'row' } gap = { 2 } flexWrap = { 'wrap' } alignItems = { 'center' } >
69+ { hole ?. caverns ?. theJars ?. collectibles ?. map ( ( { name, level, description, doubled } , index ) => < Card
70+ key = { `collectible-${ index } ` } >
3371 < CardContent sx = { {
3472 width : 350 ,
35- minHeight : 215 ,
36- opacity : unlocked ? 1 : .5
73+ opacity : level > 0 ? 1 : .5
3774 } } >
3875 < Stack direction = { 'row' } alignItems = { 'center' } gap = { 1 } >
39- < img style = { { width : 26 , height : 26 , objectFit : 'contain' } } src = { `${ prefix } etc/Jar_ ${ index } .png` }
76+ < img style = { { width : 26 , height : 26 , objectFit : 'contain' } } src = { `${ prefix } data/HoleJarC ${ index } .png` }
4077 alt = { `jar-${ index } ` } />
41- < Typography variant = { 'body1' } > { cleanUnderscore ( name ) } </ Typography >
78+ < Stack sx = { { width : '100%' } } direction = { 'row' } alignItems = { 'center' } justifyContent = { 'space-between' } >
79+ < Typography color = { doubled ? '#c471d2' : 'inherit' }
80+ variant = { 'body1' } > { cleanUnderscore ( name ) } </ Typography >
81+ < Typography variant = { 'body1' } > (Lv. { level } )</ Typography >
82+ </ Stack >
4283 </ Stack >
4384 < Typography sx = { { height : 41 , display : 'flex' , alignItems : 'center' } }
44- variant = { 'body1' } > { effect } </ Typography >
45- < Divider sx = { { mt : .5 , mb : 1 } } />
46- < Stack direction = { 'row' } alignItems = { 'center' } gap = { 1 } >
47- < Typography variant = { 'body1' } > Jars per
48- hour: { Math . floor ( hole ?. caverns ?. theJars ?. perHour / req ) } </ Typography >
49- < Tooltip title = { < Stack >
50- < Typography variant = { 'body2' } > 2
51- slots: { Math . floor ( ( hole ?. caverns ?. theJars ?. perHour * 2 ) / req ) } / hr</ Typography >
52- < Typography variant = { 'body2' } > 3
53- slots: { Math . floor ( ( hole ?. caverns ?. theJars ?. perHour * 3 ) / req ) } / hr</ Typography >
54- </ Stack > } >
55- < IconInfoCircleFilled size = { 18 } />
56- </ Tooltip >
57- </ Stack >
58- < Typography variant = { 'body1' } > Time to
59- full: { msToDate ( req / hole ?. caverns ?. theJars ?. perHour * 1000 * 3600 ) } </ Typography >
60- < Typography variant = { 'body1' } > Req: { numberWithCommas ( Math . floor ( req ) ) } </ Typography >
85+ variant = { 'body1' } > { cleanUnderscore ( description ) } </ Typography >
6186 </ CardContent >
62- </ Card >
63- } ) }
64- </ Stack >
87+ </ Card > ) }
88+ </ Stack >
89+ </ Tabber >
6590 </ >
6691} ;
6792
0 commit comments