Merge pull request #39 from dragoni7/36-improve-layout-for-loadout-sc…

…reen

36 improve layout for loadout screen

src/app/App.tsx

@@ -3,18 +3,36 @@ import { useMemo } from 'react';
 import { createRouter } from './routes';
 import { Provider } from 'react-redux';
 import { store } from '../store';
+import { createTheme, ThemeProvider } from '@mui/material';
 
 const AppRouter = () => {
   const router = useMemo(() => createRouter(), []);
 
   return <RouterProvider router={router} />;
 };
 
+const theme = createTheme({
+  typography: {
+    fontFamily: ['Helvetica'].join(','),
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 2000,
+      xl: 3000,
+    },
+  },
+});
+
 function App() {
   return (
-    <Provider store={store}>
-      <AppRouter />
-    </Provider>
+    <ThemeProvider theme={theme}>
+      <Provider store={store}>
+        <AppRouter />
+      </Provider>
+    </ThemeProvider>
   );
 }
 

src/app/routes/Dashboard.tsx

@@ -17,11 +17,11 @@ import HeaderComponent from '../../components/HeaderComponent';
 import ExoticSearch from '../../components/ExoticSearch';
 import greyBackground from '../../assets/grey.png';
 import { db } from '../../store/db';
-import ArmorCustomization from '../../features/armor/components/ArmorCustomization';
 import { resetLoadout, updateLoadoutCharacter, updateSubclass } from '../../store/LoadoutReducer';
 import { ManifestSubclass } from '../../types/manifest-types';
 import SubclassCustomizationWrapper from '../../features/subclass/SubclassCustomizationWrapper';
 import { updateManifest } from '../../lib/bungie_api/manifest';
+import LoadoutCustomization from '../../components/LoadoutCustomization';
 
 const PageContainer = styled('div')({
   display: 'flex',
@@ -205,7 +205,7 @@ export const Dashboard: React.FC = () => {
     setShowArmorCustomization(true);
   };
 
-  const handleArmorCustomizationBackClick = () => {
+  const handleLoadoutCustomizationBackClick = () => {
     setShowArmorCustomization(false);
   };
 
@@ -229,8 +229,8 @@ export const Dashboard: React.FC = () => {
           screenshot={customizingSubclass.screenshot}
         />
       ) : showArmorCustomization ? (
-        <ArmorCustomization
-          onBackClick={handleArmorCustomizationBackClick}
+        <LoadoutCustomization
+          onBackClick={handleLoadoutCustomizationBackClick}
           screenshot={selectedSubclass?.screenshot || ''}
           subclass={selectedSubclass!}
         />

src/components/ArmorIcon.tsx

@@ -5,31 +5,27 @@ const MasterworkedIconContainer = styled('img')({
   border: '2px solid',
   borderImage: 'linear-gradient(to right, #FFD700, #FFFACD, #FFD700) 1',
   borderRadius: '0',
-  padding: '2px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: '5px',
+  maxWidth: '91px',
+  height: 'auto',
 });
 
 const DefaultIconContainer = styled('img')({
   border: '2px solid white',
   borderRadius: '0',
-  padding: '2px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: '5px',
+  maxWidth: '91px',
+  height: 'auto',
 });
 
 interface ArmorIconProps {
   armor: DestinyArmor;
-  size?: number;
+  size?: number | string;
 }
 
-const ArmorIcon: React.FC<ArmorIconProps> = ({ armor, size }) => {
+const ArmorIcon: React.FC<ArmorIconProps> = ({ armor, size = '64%' }) => {
   return armor.masterwork ? (
-    <MasterworkedIconContainer src={armor.icon} alt={armor.name} width={size} height={size} />
+    <MasterworkedIconContainer src={armor.icon} alt={armor.name} width={size} />
   ) : (
-    <DefaultIconContainer src={armor.icon} alt={armor.name} width={size} height={size} />
+    <DefaultIconContainer src={armor.icon} alt={armor.name} width={size} />
   );
 };
 

src/components/LoadoutCustomization.css

@@ -0,0 +1,65 @@
+.back-button {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.submenu-grid {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border-radius: 5px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 480px;
+}
+
+.fragment-slot:hover .submenu-grid,
+.other-slot:hover .submenu-grid,
+.selected-super:hover .submenu-grid,
+.aspect-slot:hover .submenu-grid {
+  display: flex;
+  z-index: 10;
+}
+
+.submenu-item {
+  width: 80px;
+  height: 80px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  opacity: 0.99;
+  z-index: 1000;
+}
+
+.submenu-item:hover::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 1px solid rgba(255, 255, 255, 1);
+  z-index: -1;
+}

src/components/LoadoutCustomization.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import './LoadoutCustomization.css';
+import { Button, Box, Container, Grid } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import ModCustomization from '../features/armor/components/ModCustomization';
+import EquipLoadout from '../features/loadouts/components/EquipLoadout';
+import AbilitiesModification from '../features/subclass/AbilitiesModification';
+import { ManifestSubclass } from '../types/manifest-types';
+
+interface LoadoutCustomizationProps {
+  onBackClick: () => void;
+  screenshot: string;
+  subclass: ManifestSubclass;
+}
+
+const TransparentButton = styled(Button)(({ theme }) => ({
+  zIndex: 1000,
+  background: 'transparent',
+  color: 'white',
+  padding: theme.spacing(1, 2),
+  '&:hover': {
+    background: 'rgba(255, 255, 255, 0.1)',
+  },
+  '& .MuiButton-startIcon': {
+    marginRight: theme.spacing(1),
+  },
+}));
+
+const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
+  onBackClick,
+  screenshot,
+  subclass,
+}) => {
+  return (
+    <Box
+      sx={{
+        width: '100vw',
+        display: 'flex',
+        flexGrow: 1,
+        backgroundImage: `url(${screenshot})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <Grid container columns={2}>
+        <Grid item md={1} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
+          <TransparentButton
+            onClick={onBackClick}
+            startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}
+          >
+            Back
+          </TransparentButton>
+        </Grid>
+        <Grid item md={1} />
+        <Grid
+          item
+          md={1}
+          sx={{
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          <Container maxWidth="lg">
+            <ModCustomization />
+          </Container>
+        </Grid>
+        <Grid item md={1}>
+          <AbilitiesModification subclass={subclass} />
+        </Grid>
+        <Grid item md={1} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', textAlign: 'center' }}>
+          FREE SPACE FOR SOMETHING
+        </Grid>
+        <Grid item md={1} sx={{ textAlign: 'center' }}>
+          <EquipLoadout />
+          SHARE LOADOUT BUTTON ?
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default LoadoutCustomization;

src/features/armor/components/ArmorConfig.tsx

@@ -1,4 +1,3 @@
-import { Stack } from '@mui/system';
 import { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import ArmorIcon from '../../../components/ArmorIcon';
@@ -7,6 +6,7 @@ import { DestinyArmor } from '../../../types/d2l-types';
 import ArmorModSelector from './ArmorModSelector';
 import { getSelectedModsBySlot, getModsBySlot } from '../util';
 import { ManifestArmorMod, ManifestArmorStatMod } from '../../../types/manifest-types';
+import { Grid } from '@mui/material';
 
 interface ArmorConfigProps {
   armor: DestinyArmor;
@@ -67,50 +67,79 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
   }, []);
 
   return (
-    <div key={armor.name} className="armor-slot">
-      <Stack direction="row" spacing={3}>
-        <ArmorIcon armor={armor} size={81} />
+    <Grid
+      item
+      container
+      columns={{ md: 7 }}
+      alignItems="center"
+      justifyContent="center"
+      alignContent="flex-start"
+    >
+      <Grid item md={1} textAlign="end">
+        <ArmorIcon armor={armor} />
+      </Grid>
+      <Grid item md={1}>
+        <hr
+          style={{
+            opacity: 0.7,
+            border: 'none',
+            width: '90%',
+            height: '2px',
+            color: 'rgba(255, 255, 255, 0.5)',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+          }}
+        />
+      </Grid>
+      <Grid item md={1}>
         <ArmorModSelector
           selected={selectedMods[0]}
           mods={statMods}
           onSelectMod={(mod: ManifestArmorMod) => {
             onSelectMod(mod, 0);
           }}
         />
+      </Grid>
+      <Grid item md={1}>
         <ArmorModSelector
           selected={selectedMods[1]}
           mods={armorMods}
           onSelectMod={(mod: ManifestArmorMod) => {
             onSelectMod(mod, 1);
           }}
         />
+      </Grid>
+      <Grid item md={1}>
         <ArmorModSelector
           selected={selectedMods[2]}
           mods={armorMods}
           onSelectMod={(mod: ManifestArmorMod) => {
             onSelectMod(mod, 2);
           }}
         />
+      </Grid>
+      <Grid item md={1}>
         <ArmorModSelector
           selected={selectedMods[3]}
           mods={armorMods}
           onSelectMod={(mod: ManifestArmorMod) => {
             onSelectMod(mod, 3);
           }}
         />
-        {armor.artifice === true ? (
+      </Grid>
+      {armor.artifice === true ? (
+        <Grid item md={1}>
           <ArmorModSelector
             selected={selectedMods[4]}
             mods={artificeMods}
             onSelectMod={(mod: ManifestArmorMod) => {
               onSelectMod(mod, 4);
             }}
           />
-        ) : (
-          false
-        )}
-      </Stack>
-    </div>
+        </Grid>
+      ) : (
+        <Grid item md={1} />
+      )}
+    </Grid>
   );
 };