Merge pull request #120 from dragoni7/optimize-permutation-and-filtering

Optimize permutation and filtering. Layout improvements. Code cleanup

Author: dragoni7

src/app/routes/Dashboard.tsx

@@ -0,0 +1,26 @@
+import { TooltipProps, Tooltip, tooltipClasses, styled } from '@mui/material';
+
+interface D2LTooltipProps extends TooltipProps {
+  maxWidth?: number;
+}
+
+export const D2LTooltip = styled(({ className, ...props }: D2LTooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme, maxWidth = 120 }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    maxWidth: maxWidth,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    borderRadius: '0px',
+    boxShadow: 10,
+    fontFamily: 'Arial, sans-serif',
+    color: '#ffffff',
+    fontWeight: 'bold',
+    fontSize: 14,
+    [theme.breakpoints.down('lg')]: {
+      fontSize: 12,
+    },
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'black',
+  },
+}));

src/components/D2LTooltip.tsx

@@ -3,12 +3,10 @@ import { Box, Stack, Typography } from '@mui/material';
 import LogoutButton from '@/features/auth/components/LogoutButton';
 import RefreshCharacters from './RefreshCharacters';
 import CoffeeButton from './CoffeeButton';
+import useSelectedCharacter from '@/hooks/use-selected-character';
 
-interface FooterProps {
-  emblemUrl: string;
-}
-
-const Footer: React.FC<FooterProps> = ({ emblemUrl }) => {
+const Footer: React.FC = () => {
+  const selectedcharacter = useSelectedCharacter();
   return (
     <Box
       sx={{
@@ -17,7 +15,7 @@ const Footer: React.FC<FooterProps> = ({ emblemUrl }) => {
         left: 0,
         right: 0,
         height: '5.4%',
-        backgroundImage: `url(${emblemUrl})`,
+        backgroundImage: `url(${selectedcharacter?.emblem?.secondarySpecial})`,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         display: 'flex',

src/components/Footer.tsx

@@ -1,43 +1,39 @@
+import useSelectedCharacter from '@/hooks/use-selected-character';
+import { RootState } from '@/store';
 import React from 'react';
-import { Character } from '../types/d2l-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { updateSelectedCharacter } from '../store/DashboardReducer';
 import {
-  HeaderOverlayImage,
-  HeaderDisplayName,
+  Header,
   HeaderBottomContainer,
   HeaderButtonContainer,
   HeaderCharacterText,
-  Header,
+  HeaderDisplayName,
+  HeaderOverlayImage,
 } from '../styled';
 
 interface HeaderComponentProps {
-  emblemUrl: string;
-  overlayUrl: string;
-  displayName: string;
-  characters: Character[];
-  selectedCharacter: Character | null;
   onCharacterClick: (index: number) => void;
 }
 
-const HeaderComponent: React.FC<HeaderComponentProps> = ({
-  emblemUrl,
-  overlayUrl,
-  displayName,
-  characters,
-  selectedCharacter,
-  onCharacterClick,
-}) => {
+const HeaderComponent: React.FC<HeaderComponentProps> = ({ onCharacterClick }) => {
   const dispatch = useDispatch();
 
+  const selectedCharacter = useSelectedCharacter();
+
+  const characters = useSelector((root: RootState) => root.profile.characters);
+  const displayName = useSelector(
+    (root: RootState) => root.destinyMembership.membership.bungieGlobalDisplayName
+  );
+
   const handleCharacterClick = (index: number) => {
     onCharacterClick(index);
     dispatch(updateSelectedCharacter(index));
   };
 
   return (
-    <Header emblemUrl={emblemUrl}>
-      <HeaderOverlayImage src={overlayUrl} alt="Overlay" />
+    <Header emblemUrl={selectedCharacter?.emblem?.secondarySpecial!}>
+      <HeaderOverlayImage src={selectedCharacter?.emblem?.secondaryOverlay!} alt="Overlay" />
       <HeaderDisplayName>{displayName}</HeaderDisplayName>
       <HeaderBottomContainer>
         <HeaderButtonContainer>

src/components/HeaderComponent.tsx

@@ -1,7 +1,7 @@
 import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
 import { Refresh } from '@mui/icons-material';
 import { useDispatch } from 'react-redux';
-import { refreshProfileCharacters } from '../util/profile-characters';
+import { refreshProfileCharacters } from '../features/profile/profile-data';
 import { useState } from 'react';
 
 export default function RefreshCharacters() {

src/components/RefreshCharacters.tsx

@@ -49,10 +49,9 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
     config: { duration: morphDuration },
   }));
 
-  // Swap animation adjustments
   const [{ x }, swapApi] = useSpring(() => ({
     x: 0,
-    config: { tension: 220, friction: 26 }, // Adjusted for smoother animation
+    config: { tension: 220, friction: 26 },
   }));
 
   const morph = useCallback(() => {
@@ -138,16 +137,7 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
     onSubclassSelect(subclass);
   };
 
-  const handleReset = () => {
-    if (lastNonPrismaticSubclass) {
-      setIsPrismaticActive(false);
-      setCurrentSubclass(lastNonPrismaticSubclass);
-      onSubclassSelect(lastNonPrismaticSubclass);
-      swapApi.start({ x: 0 });
-    }
-  };
-
-  const handleRightClick = (event: React.MouseEvent, subclass: SubclassConfig) => {
+  const handleOpenSubclass = (event: React.MouseEvent, subclass: SubclassConfig) => {
     event.preventDefault();
     onSubclassRightClick(subclass);
   };
@@ -170,7 +160,6 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
     <animated.div
       className={`single-diamond-wrapper ${isPrismaticActive ? 'prismatic-active' : ''}`}
       style={{
-        // Adjusted swap animation for smoother transition
         transform: x.to((x) => `translateX(${x * 40}px)`),
       }}
     >
@@ -194,7 +183,7 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
                   }}
                   onContextMenu={(event) => {
                     if (damageType in subclasses && selectedSubclass?.damageType === damageType)
-                      handleRightClick(event, subclasses[Number(damageType)]!);
+                      handleOpenSubclass(event, subclasses[Number(damageType)]!);
                   }}
                 >
                   <img
@@ -211,10 +200,9 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
         <>
           <div
             className="prismatic-button diamond-shape"
-            onClick={handleReset}
-            onContextMenu={(event) => {
+            onClick={(event) => {
               if (selectedSubclass?.damageType === DAMAGE_TYPE.KINETIC)
-                handleRightClick(event, currentSubclass!);
+                handleOpenSubclass(event, currentSubclass!);
             }}
           >
             <div className="prismatic-glow diamond-shape"></div>
@@ -233,10 +221,6 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
               transform: x.to((x) => `scale(${1 - x * 0.4})`),
             }}
             onClick={() => handleSelect(lastNonPrismaticSubclass!)}
-            onContextMenu={(event) => {
-              if (selectedSubclass?.damageType !== DAMAGE_TYPE.KINETIC)
-                handleRightClick(event, lastNonPrismaticSubclass!);
-            }}
           >
             <img
               src={lastNonPrismaticSubclass!.subclass.icon}
@@ -252,9 +236,9 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
             style={{
               transform: x.to((x) => `scale(${1 - x * 0.4})`),
             }}
-            onContextMenu={(event) => {
+            onClick={(event) => {
               if (selectedSubclass?.damageType !== DAMAGE_TYPE.KINETIC)
-                handleRightClick(event, currentSubclass!);
+                handleOpenSubclass(event, currentSubclass!);
             }}
           >
             {currentSubclass && (
@@ -269,10 +253,6 @@ const SingleDiamondButton: React.FC<SingleDiamondButtonProps> = ({
             <div
               className="prismatic-button"
               onClick={() => handleSelect(subclasses[DAMAGE_TYPE.KINETIC]!)}
-              onContextMenu={(event) => {
-                if (selectedSubclass?.damageType === DAMAGE_TYPE.KINETIC)
-                  handleRightClick(event, subclasses[DAMAGE_TYPE.KINETIC]!);
-              }}
             >
               <div className="prismatic-glow"></div>
               <RotatingShape />

src/components/SubclassSelector.tsx

@@ -2,6 +2,7 @@ import { ManifestArmorStatMod } from '../../../types/manifest-types';
 import { Tooltip, styled } from '@mui/material';
 import { autoEquipStatMod } from '../mod-utils';
 import { useDispatch } from 'react-redux';
+import { D2LTooltip } from '@/components/D2LTooltip';
 
 interface RequiredModProps {
   required: { mod: ManifestArmorStatMod; equipped: boolean };
@@ -23,7 +24,7 @@ export default function RequiredMod({ required }: RequiredModProps) {
   }
 
   return (
-    <Tooltip title={required.mod.name}>
+    <D2LTooltip maxWidth={300} title={required.mod.name} arrow>
       <RequiredModImg
         src={required.mod.icon}
         onClick={handleOnClick}
@@ -32,6 +33,6 @@ export default function RequiredMod({ required }: RequiredModProps) {
           '&:hover': { scale: 1.07 },
         }}
       />
-    </Tooltip>
+    </D2LTooltip>
   );
 }

src/features/armor-mods/components/RequiredMod.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Autocomplete, TextField, Popper } from '@mui/material';
+import { Autocomplete, TextField } from '@mui/material';
 import { db } from '../../../store/db';
 import { ArmorSlot, Character, ExoticClassCombo } from '../../../types/d2l-types';
 import {
   updateSelectedExoticClassCombo,
   updateSelectedExoticItemHash,
+  updateSelectedValues,
 } from '../../../store/DashboardReducer';
 import { useDispatch } from 'react-redux';
 import { ManifestExoticArmor } from '../../../types/manifest-types';
 import { ARMOR } from '../../../lib/bungie_api/constants';
 import {
-  SelectExotic,
   StyledPopper,
   ExoticIcon,
   ComboOption,
@@ -20,29 +19,30 @@ import {
   ArrowButton,
   ArrowIcon,
 } from '../styled';
-
-interface ExoticSelectorProps {
-  selectedCharacter: Character | undefined;
-  selectedExoticItemHash: number | null;
-}
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
+import useSelectedCharacter from '@/hooks/use-selected-character';
 
 interface IntrinsicMod {
   itemHash: number;
   name: string;
   icon: string;
 }
 
-const ExoticSelector: React.FC<ExoticSelectorProps> = ({
-  selectedCharacter,
-  selectedExoticItemHash,
-}) => {
+const ExoticSelector: React.FC = () => {
   const dispatch = useDispatch();
   const [exotics, setExotics] = useState<ManifestExoticArmor[]>([]);
   const [comboInput, setComboInput] = useState('');
   const [selectedExotic, setSelectedExotic] = useState<ManifestExoticArmor | null>(null);
   const [selectedCombo, setSelectedCombo] = useState<ExoticClassCombo | null>(null);
   const [inputValue, setInputValue] = React.useState('');
   const [intrinsicMods, setIntrinsicMods] = useState<{ [key: number]: IntrinsicMod }>({});
+  const selectedExoticItemHash = useSelector(
+    (state: RootState) => state.dashboard.selectedExotic.itemHash
+  );
+
+  const selectedCharacter = useSelectedCharacter();
+
   const exoticClassCombos = selectedCharacter?.exoticClassCombos;
 
   const fetchExoticData = async () => {
@@ -81,6 +81,8 @@ const ExoticSelector: React.FC<ExoticSelectorProps> = ({
   useEffect(() => {
     fetchExoticData();
     fetchIntrinsicModData();
+    setSelectedExotic(null);
+    setInputValue('');
   }, [selectedCharacter]);
 
   useEffect(() => {
@@ -92,11 +94,6 @@ const ExoticSelector: React.FC<ExoticSelectorProps> = ({
     }
   }, [selectedExoticItemHash, exotics]);
 
-  useEffect(() => {
-    setSelectedExotic(null);
-    setInputValue('');
-  }, [selectedCharacter]);
-
   const handleExoticSelect = (newValue: ManifestExoticArmor | null) => {
     setSelectedExotic(newValue);
 
@@ -117,6 +114,7 @@ const ExoticSelector: React.FC<ExoticSelectorProps> = ({
     setSelectedExotic(null);
     setSelectedCombo(null);
     dispatch(updateSelectedExoticItemHash({ itemHash: null, slot: null }));
+    dispatch(updateSelectedValues({}));
   };
 
   return (

src/features/armor-optimization/components/ExoticSelector.tsx

@@ -0,0 +1,39 @@
+import { RootState } from '@/store';
+import { updateAssumeMasterwork, updateAssumeExoticArtifice } from '@/store/DashboardReducer';
+import { FormGroup, FormControlLabel, Switch } from '@mui/material';
+import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+
+export default function Filters() {
+  const { assumeMasterwork, assumeExoticArtifice } = useSelector(
+    (state: RootState) => state.dashboard
+  );
+
+  const dispatch = useDispatch();
+  return (
+    <FormGroup
+      sx={{
+        padding: 2,
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: 'blur(5px)',
+        border: '1px solid rgba(255, 255, 255, 0.3)',
+      }}
+    >
+      <FormControlLabel
+        control={
+          <Switch checked={assumeMasterwork} onChange={() => dispatch(updateAssumeMasterwork())} />
+        }
+        label="Assume Armor Masterworked"
+      />
+      <FormControlLabel
+        control={
+          <Switch
+            checked={assumeExoticArtifice}
+            onChange={() => dispatch(updateAssumeExoticArtifice())}
+          />
+        }
+        label="Assume Exotics are Artifice"
+      />
+    </FormGroup>
+  );
+}