Skip to content

Commit 106c964

Browse files
dragoni7dragoni7
authored
Merge pull request #128 from dragoni7/clear-all-fragments
Clear all fragments & tooltips
2 parents 5c8007e + 6760d6f commit 106c964

File tree

8 files changed

+117
-67
lines changed

8 files changed

+117
-67
lines changed

‎src/app/routes/Dashboard.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -460,25 +460,12 @@ export const Dashboard: React.FC = () => {
460460
<NumberBoxes maxReachableValues={maxReachableValues} />
461461
</Stack>
462462
</Grid>
463-
<Grid
464-
item
465-
container
466-
md={4}
467-
spacing={3}
468-
direction="column"
469-
justifyContent={'start'}
470-
alignItems={'center'}
471-
sx={{ marginTop: '1%' }}
472-
>
473-
<Grid item>
463+
<Grid item md={4} sx={{ marginTop: '2%' }}>
464+
<Stack spacing={2} alignItems="center">
474465
<ExoticSelector />
475-
</Grid>
476-
<Grid item height="20%">
477466
<Filters />
478-
</Grid>
479-
<Grid item alignSelf="flex-start">
480467
<FragmentStats />
481-
</Grid>
468+
</Stack>
482469
</Grid>
483470
<Grid item md={4} sx={{ marginTop: '1%' }}>
484471
{filteredPermutations ? (

‎src/components/BuildStats.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo } from 'react';
22
import { useSelector } from 'react-redux';
3-
import { Box, Typography, Grid } from '@mui/material';
3+
import { Box, Typography, Grid, Stack } from '@mui/material';
44
import { ARMOR_ARRAY, STATS } from '../lib/bungie_api/constants';
55
import { RootState } from '../store';
66
import { StatName, ArmorModKeys } from '../types/d2l-types';
@@ -49,27 +49,27 @@ const BuildStats: React.FC = () => {
4949
}, [loadout]);
5050

5151
return (
52-
<Box
52+
<Stack
53+
padding={1}
54+
direction="row"
55+
spacing={2}
5356
alignItems="center"
5457
justifyContent="center"
5558
sx={{
59+
border: '1px solid rgba(255, 255, 255, 0.3)',
5660
backgroundColor: 'rgba(255, 255, 255, 0.1)',
5761
backdropFilter: 'blur(10px)',
5862
}}
5963
>
60-
<Grid container justifyContent="center" spacing={2}>
61-
{(STATS as StatName[]).map((stat) => (
62-
<Grid item key={stat}>
63-
<Box alignItems="center" margin={1}>
64-
<img width={22} height={22} src={statIcons[stat]} alt={stat} />
65-
<Typography color="white" fontWeight="bold" variant="body2">
66-
{totalStats[stat]}
67-
</Typography>
68-
</Box>
69-
</Grid>
70-
))}
71-
</Grid>
72-
</Box>
64+
{(STATS as StatName[]).map((stat) => (
65+
<Stack alignItems="center" spacing={1}>
66+
<img width="60%" height="60%" src={statIcons[stat]} alt={stat} />
67+
<Typography color="white" fontWeight="bold" variant="body2">
68+
{totalStats[stat]}
69+
</Typography>
70+
</Stack>
71+
))}
72+
</Stack>
7373
);
7474
};
7575

‎src/components/D2LTooltip.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const D2LTooltip = styled(({ className, ...props }: D2LTooltipProps) => (
1414
boxShadow: 10,
1515
fontFamily: 'Arial, sans-serif',
1616
color: '#ffffff',
17+
whiteSpace: 'pre-wrap',
1718
fontWeight: 'bold',
1819
fontSize: 14,
1920
[theme.breakpoints.down('lg')]: {

‎src/components/LoadoutCustomization.tsx

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Container, Grid } from '@mui/material';
2+
import { Box, Container, Grid, styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
33
import ModCustomization from '../features/armor-mods/components/ModCustomization';
44
import EquipLoadout from '../features/loadouts/components/EquipLoadout';
55
import AbilitiesModification from '../features/subclass/components/AbilitiesModification';
@@ -9,6 +9,27 @@ import { BackButton } from './BackButton';
99
import BuildStats from './BuildStats';
1010
import FadeIn from './FadeIn';
1111

12+
export const WarningTooltip = styled(({ className, ...props }: TooltipProps) => (
13+
<Tooltip {...props} classes={{ popper: className }} />
14+
))(({ theme }) => ({
15+
[`& .${tooltipClasses.tooltip}`]: {
16+
maxWidth: 600,
17+
backgroundColor: 'rgba(0, 0, 0, 0.9)',
18+
borderRadius: '0px',
19+
boxShadow: 10,
20+
fontFamily: 'Arial, sans-serif',
21+
color: 'orange',
22+
fontWeight: 'bold',
23+
fontSize: 18,
24+
[theme.breakpoints.down('lg')]: {
25+
fontSize: 16,
26+
},
27+
},
28+
[`& .${tooltipClasses.arrow}`]: {
29+
color: 'black',
30+
},
31+
}));
32+
1233
interface LoadoutCustomizationProps {
1334
onBackClick: () => void;
1435
screenshot: string;
@@ -99,10 +120,17 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
99120
>
100121
<BuildStats />
101122
</Grid>
102-
<Grid item md={1} sx={{ textAlign: 'center', alignContent: 'end', marginBottom: 5 }}>
103-
<EquipLoadout />
104-
<ShareLoadout />
105-
</Grid>
123+
<WarningTooltip
124+
title={'⚠️ You must be in orbit for equipping to occur properly ⚠️'}
125+
placement="top"
126+
slotProps={{ popper: { modifiers: [{ name: 'offset', options: { offset: [0, -30] } }] } }}
127+
arrow
128+
>
129+
<Grid item md={1} sx={{ textAlign: 'center', alignContent: 'end', marginBottom: 5 }}>
130+
<EquipLoadout />
131+
<ShareLoadout />
132+
</Grid>
133+
</WarningTooltip>
106134
</Grid>
107135
</Box>
108136
);

‎src/features/armor-optimization/components/PermutationsList.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,9 @@ const PermutationsList: React.FC<PermutationsListProps> = ({
181181
{perm.permutation.map((item, idx) => (
182182
<Grid item md={2} key={idx}>
183183
<D2LTooltip
184+
maxWidth={300}
184185
TransitionComponent={Fade}
185-
title={`${item.name}\n${formatArmorStats(item)}`}
186+
title={`${item.name}\n\n${formatArmorStats(item)}`}
186187
placement="left"
187188
arrow
188189
followCursor

‎src/features/subclass/components/ClearFragments.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { D2LButton } from '@/components/D2LButton';
2+
import { EMPTY_FRAGMENT } from '@/lib/bungie_api/constants';
3+
import { RootState } from '@/store';
4+
import { updateSubclassMods } from '@/store/LoadoutReducer';
5+
import { useDispatch } from 'react-redux';
6+
import { useSelector } from 'react-redux';
7+
8+
export default function ClearFragments() {
9+
const dispatch = useDispatch();
10+
const fragments = useSelector(
11+
(state: RootState) => state.loadoutConfig.loadout.subclassConfig.fragments
12+
);
13+
14+
return (
15+
<D2LButton
16+
onClick={() =>
17+
dispatch(updateSubclassMods({ category: 'FRAGMENTS', mods: Array(5).fill(EMPTY_FRAGMENT) }))
18+
}
19+
>
20+
Clear Fragments
21+
</D2LButton>
22+
);
23+
}

‎src/features/subclass/components/FragmentStats.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react';
2-
import { Box, styled, Typography } from '@mui/material';
2+
import { Stack, styled, Typography } from '@mui/material';
33
import { useSelector } from 'react-redux';
44
import { createSelector } from '@reduxjs/toolkit';
55
import { RootState } from '../../../store';
66
import { ManifestStatPlug } from '../../../types/manifest-types';
77
import { statIcons } from '../../../util/constants';
8+
import ClearFragments from './ClearFragments';
89

9-
const StatModificationsContainer = styled(Box)(({ theme }) => ({
10-
padding: theme.spacing(2),
10+
const FragmentStatsContainer = styled(Stack)(({ theme }) => ({
11+
padding: theme.spacing(1),
1112
backgroundColor: 'rgba(0, 0, 0, 0.2)',
1213
backdropFilter: 'blur(5px)',
1314
border: '1px solid rgba(255, 255, 255, 0.3)',
14-
width: '100%',
15-
height: '100%',
15+
width: '50%',
1616
}));
1717

18-
const StatModificationItem = styled('div')(({ theme }) => ({
18+
const FragmentStatsItem = styled('div')(({ theme }) => ({
1919
display: 'flex',
2020
alignItems: 'center',
2121
fontFamily: 'Helvetica, Arial, sans-serif',
@@ -51,19 +51,15 @@ const selectFragmentStatModifications = createSelector(
5151
const FragmentStats: React.FC = () => {
5252
const modifications = useSelector(selectFragmentStatModifications);
5353

54-
if (modifications.length === 0) {
55-
return null;
56-
}
57-
5854
return (
59-
<StatModificationsContainer>
55+
<FragmentStatsContainer justifyContent="space-between" spacing={2}>
6056
<Typography
6157
sx={{
6258
opacity: 0.8,
6359
borderBottom: '2px solid rgba(255, 255, 255, 0.5)',
6460
paddingBottom: 1,
6561
marginBottom: 2,
66-
width: '60%',
62+
width: '100%',
6763
}}
6864
>
6965
FRAGMENT STATS
@@ -72,7 +68,7 @@ const FragmentStats: React.FC = () => {
7268
const color = value > 0 ? 'green' : 'red';
7369
const sign = value > 0 ? '+' : '';
7470
return (
75-
<StatModificationItem key={`${stat}-${index}`}>
71+
<FragmentStatsItem key={`${stat}-${index}`}>
7672
<StatIcon
7773
src={statIcons[stat]}
7874
alt={stat}
@@ -82,10 +78,11 @@ const FragmentStats: React.FC = () => {
8278
{sign}
8379
{value} {name}
8480
</span>
85-
</StatModificationItem>
81+
</FragmentStatsItem>
8682
);
8783
})}
88-
</StatModificationsContainer>
84+
{modifications.length > 0 && <ClearFragments />}
85+
</FragmentStatsContainer>
8986
);
9087
};
9188

‎src/features/subclass/components/SubclassCustomizationWrapper.tsx

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import AbilitiesModification from './AbilitiesModification';
3-
import { Box, Stack } from '@mui/material';
3+
import { Box, Grid, Stack } from '@mui/material';
44
import { SubclassConfig } from '../../../types/d2l-types';
55
import { BackButton } from '../../../components/BackButton';
66
import FragmentStats from './FragmentStats';
@@ -18,34 +18,47 @@ const SubclassCustomizationWrapper: React.FC<SubclassCustomizationWrapperProps>
1818
screenshot,
1919
}) => {
2020
return (
21-
<Box
21+
<Grid
22+
container
23+
alignItems="center"
24+
justifyContent="flex-start"
2225
sx={{
2326
backgroundImage: `url(${screenshot})`,
24-
position: 'fixed',
25-
top: 0,
26-
left: 0,
2727
width: '100vw',
2828
height: '100vh',
2929
backgroundSize: 'cover',
3030
backgroundPosition: 'center',
3131
overflow: 'auto',
3232
}}
3333
>
34-
<Box position="absolute" top={16} left={16} zIndex={1000}>
34+
<Box
35+
sx={{
36+
position: 'fixed',
37+
top: 0,
38+
left: 0,
39+
right: 0,
40+
bottom: 0,
41+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
42+
zIndex: 0,
43+
}}
44+
/>
45+
<Grid item md={12}>
3546
<BackButton onClick={onBackClick} startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}>
3647
Back
3748
</BackButton>
38-
</Box>
39-
<Box sx={{ marginTop: '7vh' }}>
40-
<AbilitiesModification subclass={subclass} />
41-
</Box>
42-
<Box position="absolute" bottom={50} left={16} zIndex={1000}>
43-
<Stack spacing={5}>
44-
<BuildStats />
49+
</Grid>
50+
<Grid item md={4}>
51+
<Stack spacing={2} alignItems="flex-start" justifyContent="center" marginLeft={2}>
52+
<Box width="53%">
53+
<BuildStats />
54+
</Box>
4555
<FragmentStats />
4656
</Stack>
47-
</Box>
48-
</Box>
57+
</Grid>
58+
<Grid item height="95%" marginTop={2} zIndex={1}>
59+
<AbilitiesModification subclass={subclass} />
60+
</Grid>
61+
</Grid>
4962
);
5063
};
5164

0 commit comments

Comments
 (0)