Merge pull request #96 from dragoni7/hover-armor-mods

Rorschach7552 · web-flow · commit ca7f154d6655 · 2024-09-17T14:51:50.000-07:00
Hover armor mods
diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx
@@ -6,13 +6,17 @@ import {
   ManifestAspect,
   ManifestStatPlug,
   ManifestPlug,
+  ManifestArmorMod,
+  ManifestArmorStatMod,
 } from '../types/manifest-types';
 
 type HoverCardItem =
   | ManifestSubclass
   | ManifestAspect
   | ManifestStatPlug
   | ManifestPlug
+  | ManifestArmorMod
+  | ManifestArmorStatMod
   | undefined
   | null;
 
@@ -27,19 +31,19 @@ const HoverCardContainer = styled('div')(({ theme }) => ({
   right: '100%',
   zIndex: 1600,
   padding: theme.spacing(1.5),
-  backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  backgroundColor: 'rgba(0, 0, 0, 0.9)',
   borderRadius: '0px',
   boxShadow: theme.shadows[10],
-  width: '250px',
+  width: '300px',
   pointerEvents: 'none',
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),
-  fontFamily: 'Helvetica, Arial, sans-serif',
+  fontFamily: 'Arial, sans-serif',
 }));
 
 const HoverCardTitle = styled(Typography)({
-  fontFamily: 'Helvetica, Arial, sans-serif',
+  fontFamily: 'Arial, sans-serif',
   fontWeight: 'bold',
   fontSize: '16px',
   textAlign: 'center',
@@ -54,7 +58,7 @@ const HoverCardIcon = styled('img')({
 });
 
 const HoverCardDescription = styled(Typography)({
-  fontFamily: 'Helvetica, Arial, sans-serif',
+  fontFamily: 'Arial, sans-serif',
   fontSize: '14px',
   color: '#cccccc',
 });
@@ -74,6 +78,64 @@ const EnergyCapacitySquare = styled('div')(({ theme }) => ({
   marginRight: '2px',
 }));
 
+const ModHoverCardHeader = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: '8px',
+});
+
+const ModHoverCardTitleRow = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const ModHoverCardIcon = styled('img')({
+  width: '32px',
+  height: '32px',
+  marginRight: '8px',
+});
+
+const ModHoverCardTitle = styled(Typography)({
+  fontFamily: 'Arial, sans-serif',
+  fontWeight: 'bold',
+  fontSize: '18px',
+  color: '#ffffff',
+  flexGrow: 1,
+});
+
+const EnergyCostChip = styled(Box)(({ theme }) => ({
+  color: '#ffffff',
+  padding: '2px 6px',
+  fontSize: '24px',
+  fontWeight: 'bold',
+}));
+
+const ModTypeLabel = styled(Typography)({
+  fontSize: '12px',
+  color: '#aaaaaa',
+  marginTop: '4px',
+});
+
+const Divider = styled('div')({
+  width: '100%',
+  height: '1px',
+  background:
+    'linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0))',
+  margin: '8px 0',
+});
+
+const ModDescriptionContainer = styled(Box)({
+  display: 'flex',
+  alignItems: 'flex-start',
+});
+
+const ModDescription = styled(Typography)({
+  fontSize: '14px',
+  color: '#cccccc',
+  flexGrow: 1,
+});
+
 const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
   const [hoverData, setHoverData] = useState<any | null>(null);
 
@@ -103,7 +165,6 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
 
       fullData = await db.manifestSubclassFragmentsDef.where('itemHash').equals(itemHash).first();
       if (fullData) {
-        // Fetch the description from manifestSandboxPerkDef
         const sandboxPerk = await db.manifestSandboxPerkDef
           .where('name')
           .equals(fullData.name)
@@ -122,6 +183,34 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
         return;
       }
 
+      fullData = await db.manifestArmorModDef.where('itemHash').equals(itemHash).first();
+      if (fullData) {
+        const sandboxPerk =
+          fullData.perks && fullData.perks.length > 0
+            ? await db.manifestSandboxPerkDef.where('itemHash').equals(fullData.perks[0]).first()
+            : null;
+        setHoverData({
+          ...fullData,
+          type: 'armorMod',
+          description: sandboxPerk ? sandboxPerk.description : 'No description available',
+        });
+        return;
+      }
+
+      fullData = await db.manifestArmorStatModDef.where('itemHash').equals(itemHash).first();
+      if (fullData) {
+        const sandboxPerk =
+          fullData.perks && fullData.perks.length > 0
+            ? await db.manifestSandboxPerkDef.where('itemHash').equals(fullData.perks[0]).first()
+            : null;
+        setHoverData({
+          ...fullData,
+          type: 'armorStatMod',
+          description: sandboxPerk ? sandboxPerk.description : 'No description available',
+        });
+        return;
+      }
+
       console.log('Item not found in any table');
     } catch (error) {
       console.error('Error fetching item data:', error);
@@ -142,6 +231,25 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
     );
   };
 
+  const renderModContent = (data: any) => {
+    return (
+      <>
+        <ModHoverCardHeader>
+          <ModHoverCardTitleRow>
+            <ModHoverCardTitle>{data.name}</ModHoverCardTitle>
+            <EnergyCostChip>{data.energyCost}</EnergyCostChip>
+          </ModHoverCardTitleRow>
+          <ModTypeLabel>{data.type === 'armorMod' ? 'Armor Mod' : 'Armor Stat Mod'}</ModTypeLabel>
+        </ModHoverCardHeader>
+        <Divider />
+        <ModDescriptionContainer>
+          <ModHoverCardIcon src={data.icon} alt={data.name} />
+          <ModDescription>{data.description}</ModDescription>
+        </ModDescriptionContainer>
+      </>
+    );
+  };
+
   const renderDescription = () => {
     if (!hoverData) return null;
 
@@ -179,6 +287,10 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
           </>
         );
 
+      case 'armorMod':
+      case 'armorStatMod':
+        return renderModContent(hoverData);
+
       default:
         return <HoverCardDescription></HoverCardDescription>;
     }
@@ -193,9 +305,15 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
       {children}
       {hoverData && (
         <HoverCardContainer>
-          <HoverCardTitle variant="h6">{hoverData.name}</HoverCardTitle>
-          <HoverCardIcon src={hoverData.secondaryIcon || hoverData.icon} alt={hoverData.name} />
-          {renderDescription()}
+          {hoverData.type === 'armorMod' || hoverData.type === 'armorStatMod' ? (
+            renderDescription()
+          ) : (
+            <>
+              <HoverCardTitle variant="h6">{hoverData.name}</HoverCardTitle>
+              <HoverCardIcon src={hoverData.secondaryIcon || hoverData.icon} alt={hoverData.name} />
+              {renderDescription()}
+            </>
+          )}
         </HoverCardContainer>
       )}
     </div>
diff --git a/src/features/armor-mods/components/ArmorConfig.tsx b/src/features/armor-mods/components/ArmorConfig.tsx
@@ -1,21 +1,12 @@
 import { useState, useEffect, SyntheticEvent } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ArmorIcon from '../../../components/ArmorIcon';
 import { updateLoadoutArmorMods, updateRequiredStatMods } from '../../../store/LoadoutReducer';
 import { armorMods, DestinyArmor } from '../../../types/d2l-types';
 import ArmorModSelector from './ArmorModSelector';
 import { getModsBySlot } from '../mod-utils';
 import { ManifestArmorMod, ManifestArmorStatMod } from '../../../types/manifest-types';
-import {
-  Alert,
-  Grid,
-  Fade,
-  Snackbar,
-  SnackbarCloseReason,
-  LinearProgress,
-  CircularProgress,
-} from '@mui/material';
-import { useSelector } from 'react-redux';
+import { Alert, Grid, Fade, Snackbar, SnackbarCloseReason, CircularProgress } from '@mui/material';
 import { RootState, store } from '../../../store';
 import { PLUG_CATEGORY_HASH } from '../../../lib/bungie_api/constants';
 
@@ -52,9 +43,14 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
     );
   };
 
-  const onSelectMod = async (mod: ManifestArmorMod | ManifestArmorStatMod, slot: number) => {
-    let totalCost = mod.energyCost;
+  const calculateAvailableEnergy = (currentSlot: number) => {
+    const totalEnergyCost = selectedMods.reduce((total, mod, index) => {
+      return index !== currentSlot ? total + mod.energyCost : total;
+    }, 0);
+    return 10 - totalEnergyCost; // Assuming max energy is 10
+  };
 
+  const onSelectMod = async (mod: ManifestArmorMod | ManifestArmorStatMod, slot: number) => {
     if (selectedMods[slot].itemHash === mod.itemHash) return;
 
     if (!mod.isOwned) {
@@ -73,21 +69,13 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
       return;
     }
 
-    for (const key in selectedMods) {
-      if (Number(key) !== slot) {
-        let statEnergyCost = armorMods.find(
-          (mod) => mod.itemHash === selectedMods[key].itemHash
-        )?.energyCost;
-        let armorEnergyCost = statMods.find(
-          (mod) => mod.itemHash === selectedMods[key].itemHash
-        )?.energyCost;
-
-        totalCost += statEnergyCost ? statEnergyCost : armorEnergyCost ? armorEnergyCost : 0;
-      }
-
-      if (totalCost > 10) {
-        return;
-      }
+    const availableEnergy = calculateAvailableEnergy(slot);
+    if (mod.energyCost > availableEnergy) {
+      setSnackPack((prev) => [
+        ...prev,
+        { message: 'Not enough energy to equip ' + mod.name, key: new Date().getTime() },
+      ]);
+      return;
     }
 
     dispatch(
@@ -114,7 +102,6 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
 
   function handleSnackbarClose(event: SyntheticEvent | Event, reason?: SnackbarCloseReason) {
     if (reason === 'clickaway') return;
-
     setSnackbarOpen(false);
   }
 
@@ -167,46 +154,43 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
               <ArmorModSelector
                 selected={selectedMods[0]}
                 mods={statMods}
-                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => {
-                  onSelectMod(mod, 0);
-                }}
+                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => onSelectMod(mod, 0)}
+                availableEnergy={calculateAvailableEnergy(0)}
               />
             </Grid>
             <Grid item md={1}>
               <ArmorModSelector
                 selected={selectedMods[1]}
                 mods={armorMods}
-                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => {
-                  onSelectMod(mod, 1);
-                }}
+                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => onSelectMod(mod, 1)}
+                availableEnergy={calculateAvailableEnergy(1)}
               />
             </Grid>
             <Grid item md={1}>
               <ArmorModSelector
                 selected={selectedMods[2]}
                 mods={armorMods}
-                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => {
-                  onSelectMod(mod, 2);
-                }}
+                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => onSelectMod(mod, 2)}
+                availableEnergy={calculateAvailableEnergy(2)}
               />
             </Grid>
             <Grid item md={1}>
               <ArmorModSelector
                 selected={selectedMods[3]}
                 mods={armorMods}
-                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => {
-                  onSelectMod(mod, 3);
-                }}
+                onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => onSelectMod(mod, 3)}
+                availableEnergy={calculateAvailableEnergy(3)}
               />
             </Grid>
             {armor.artifice === true ? (
               <Grid item md={1}>
                 <ArmorModSelector
                   selected={selectedMods[4]}
                   mods={artificeMods}
-                  onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) => {
-                    onSelectMod(mod, 4);
-                  }}
+                  onSelectMod={(mod: ManifestArmorMod | ManifestArmorStatMod) =>
+                    onSelectMod(mod, 4)
+                  }
+                  availableEnergy={calculateAvailableEnergy(4)}
                 />
               </Grid>
             ) : (
@@ -215,7 +199,7 @@ const ArmorConfig: React.FC<ArmorConfigProps> = ({ armor, statMods, artificeMods
           </>
         ) : (
           [...Array(5).keys()].map((i) => (
-            <Grid item md={1}>
+            <Grid item md={1} key={i}>
               <CircularProgress />
             </Grid>
           ))
diff --git a/src/features/armor-mods/components/ArmorModSelector.tsx b/src/features/armor-mods/components/ArmorModSelector.tsx
