Fix max titan gear not prioritizing loadout elemental type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tof-tools",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/features/GearPiece.tsx

@@ -35,6 +35,7 @@ export interface GearPieceProps {
   actions?: ReactNode;
   showTitanToggle?: boolean;
   showStatSummary?: CoreElementalType;
+  showMaxTitanGear?: { maxTitanGear: Gear | undefined };
   additionalAccordions?: ReactNode;
   ['data-testid']?: string;
 }
@@ -46,15 +47,14 @@ export const GearPiece = ({
   actions,
   showTitanToggle,
   showStatSummary,
+  showMaxTitanGear,
   additionalAccordions,
   'data-testid': dataTestId,
 }: GearPieceProps) => {
   const gearType = gearSnap.type;
   const isTitan = gearSnap.isAugmented;
   const possibleRandomStatTypes = getPossibleRandomStatTypes(gearType);
 
-  const maxTitanGear = gearSnap.getMaxTitanGear();
-
   return (
     <Layout
       typeIcon={
@@ -126,63 +126,65 @@ export const GearPiece = ({
                 <GearRollBreakdown gearSnap={gearSnap} />
               </AccordionDetails>
             </Accordion>
-            <Accordion elevation={3}>
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="max-titan-stats-panel-content"
-                id="max-titan-stats-panel-header"
-              >
-                <Typography>Stat values at max titan</Typography>
-              </AccordionSummary>
-              <AccordionDetails data-testid="max-titan-stats-panel-content">
-                <>
-                  <Typography sx={{ mb: 3 }}>
-                    The max increase amount each stat gets at max potential
-                    titan (120 augmentations)
-                  </Typography>
-                  {gearSnap.stars !== 5 &&
-                  gearSnap.getPossibleStars().length > 1 ? (
-                    <Typography color="info.main" gutterBottom>
-                      Can&apos;t determine the number of stars{' '}
-                      <strong>
-                        (either {gearSnap.getPossibleStars().join(' or ')}{' '}
-                        stars)
-                      </strong>
-                      . Select it above to continue
+            {showMaxTitanGear && (
+              <Accordion elevation={3}>
+                <AccordionSummary
+                  expandIcon={<ExpandMoreIcon />}
+                  aria-controls="max-titan-stats-panel-content"
+                  id="max-titan-stats-panel-header"
+                >
+                  <Typography>Stat values at max titan</Typography>
+                </AccordionSummary>
+                <AccordionDetails data-testid="max-titan-stats-panel-content">
+                  <>
+                    <Typography sx={{ mb: 3 }}>
+                      The max increase amount each stat gets at max potential
+                      titan (120 augmentations)
                     </Typography>
-                  ) : gearSnap.stars !== 5 &&
-                    gearSnap.getPossibleStars().length === 1 &&
-                    gearSnap.getPossibleStars()[0] !== 5 ? (
-                    <Typography color="info.main" gutterBottom>
-                      Can&apos;t calculate max titan stat values if gear is not
-                      at 5 star
-                    </Typography>
-                  ) : gearSnap && maxTitanGear ? (
-                    <TitanGearMaxStats
-                      maxTitanGearSnap={maxTitanGear}
-                      elementalType={showStatSummary}
-                    />
-                  ) : (
-                    <Box>
-                      <Typography color="info.main">
-                        Can&apos;t calculate max titan stat values if gear is
-                        not at 5 star.
+                    {gearSnap.stars !== 5 &&
+                    gearSnap.getPossibleStars().length > 1 ? (
+                      <Typography color="info.main" gutterBottom>
+                        Can&apos;t determine the number of stars{' '}
+                        <strong>
+                          (either {gearSnap.getPossibleStars().join(' or ')}{' '}
+                          stars)
+                        </strong>
+                        . Select it above to continue
                       </Typography>
-                      <Typography color="info.main" mt={2} gutterBottom>
-                        If the gear is already augmented/at titan, use the
-                        original 5 star values (found on the augment screen)
+                    ) : gearSnap.stars !== 5 &&
+                      gearSnap.getPossibleStars().length === 1 &&
+                      gearSnap.getPossibleStars()[0] !== 5 ? (
+                      <Typography color="info.main" gutterBottom>
+                        Can&apos;t calculate max titan stat values if gear is
+                        not at 5 star
                       </Typography>
-                      <Image
-                        src="/stat_original_5_star_value_example.jpg"
-                        alt="stat-original-5-star-value-example"
-                        width={415}
-                        height={230}
+                    ) : gearSnap && showMaxTitanGear.maxTitanGear ? (
+                      <TitanGearMaxStats
+                        maxTitanGearSnap={showMaxTitanGear.maxTitanGear}
+                        elementalType={showStatSummary}
                       />
-                    </Box>
-                  )}
-                </>
-              </AccordionDetails>
-            </Accordion>
+                    ) : (
+                      <Box>
+                        <Typography color="info.main">
+                          Can&apos;t calculate max titan stat values if gear is
+                          not at 5 star.
+                        </Typography>
+                        <Typography color="info.main" mt={2} gutterBottom>
+                          If the gear is already augmented/at titan, use the
+                          original 5 star values (found on the augment screen)
+                        </Typography>
+                        <Image
+                          src="/stat_original_5_star_value_example.jpg"
+                          alt="stat-original-5-star-value-example"
+                          width={415}
+                          height={230}
+                        />
+                      </Box>
+                    )}
+                  </>
+                </AccordionDetails>
+              </Accordion>
+            )}
             {additionalAccordions}
           </Box>
         </>

src/features/gear-comparer/GearsSideBySide.tsx

@@ -15,8 +15,12 @@ export function GearsSideBySide() {
     loadoutsState: { selectedLoadout },
   } = useSnapshot(gearComparerState);
 
-  const selectedLoadoutGearMaxTitan = selectedLoadoutGear.getMaxTitanGear();
-  const replacementGearMaxTitan = replacementGear.getMaxTitanGear();
+  const { elementalType } = selectedLoadout;
+
+  const selectedLoadoutGearMaxTitan =
+    selectedLoadoutGear.getMaxTitanGear(elementalType);
+  const replacementGearMaxTitan =
+    replacementGear.getMaxTitanGear(elementalType);
 
   const selectedLoadoutGearMaxTitanValue = selectedLoadoutGearMaxTitan
     ? selectedLoadout.getSubstituteGearValue(selectedLoadoutGearMaxTitan)
@@ -31,7 +35,7 @@ export function GearsSideBySide() {
         <Typography variant="h5" mb={1}>
           Current gear in loadout
         </Typography>
-        <LoadoutGear />
+        <LoadoutGear maxTitanGear={selectedLoadoutGearMaxTitan} />
         <LoadoutGearValue
           maxTitanGearValue={selectedLoadoutGearMaxTitanValue}
           isMaxTitanGearValueHigher={
@@ -48,7 +52,7 @@ export function GearsSideBySide() {
             New gear
           </Typography>
         </Box>
-        <ReplacementGear />
+        <ReplacementGear maxTitanGear={replacementGearMaxTitan} />
         <ReplacementGearValue
           maxTitanGearValue={replacementGearMaxTitanValue}
           isMaxTitanGearValueHigher={

src/features/gear-comparer/LoadoutGear.tsx

@@ -2,12 +2,17 @@ import { useSnapshot } from 'valtio';
 
 import { GearTypeSelector } from '../../components/GearTypeSelector/GearTypeSelector';
 import { gearTypesLookup } from '../../constants/gear-types';
+import type { Gear } from '../../models/gear';
 import type { GearComparerState } from '../../states/gear-comparer';
 import { gearComparerState } from '../../states/states';
 import { GearOCRModal } from '../GearOCRModal';
 import { GearPiece } from '../GearPiece';
 
-export function LoadoutGear() {
+export function LoadoutGear({
+  maxTitanGear,
+}: {
+  maxTitanGear: Gear | undefined;
+}) {
   const {
     selectedLoadoutGear: gearSnap,
     loadoutsState: {
@@ -46,6 +51,7 @@ export function LoadoutGear() {
       }
       showTitanToggle
       showStatSummary={elementalType}
+      showMaxTitanGear={{ maxTitanGear }}
       data-testid={'loadout-gear'}
     />
   );

src/features/gear-comparer/ReplacementGear.tsx

@@ -2,14 +2,19 @@ import { useSnapshot } from 'valtio';
 
 import { GearTypeSelector } from '../../components/GearTypeSelector/GearTypeSelector';
 import { gearTypesLookup } from '../../constants/gear-types';
+import type { Gear } from '../../models/gear';
 import type { GearComparerState } from '../../states/gear-comparer';
 import { gearComparerState } from '../../states/states';
 import { GearOCRModal } from '../GearOCRModal';
 import { GearPiece } from '../GearPiece';
 import { GearRollSimulator } from './GearRollSimulator';
 import { SaveGearModal } from './SaveGearModal';
 
-export function ReplacementGear() {
+export function ReplacementGear({
+  maxTitanGear,
+}: {
+  maxTitanGear: Gear | undefined;
+}) {
   const {
     replacementGear: gearSnap,
     replacementGearGearSet,
@@ -53,6 +58,7 @@ export function ReplacementGear() {
       }
       showTitanToggle
       showStatSummary={elementalType}
+      showMaxTitanGear={{ maxTitanGear }}
       additionalAccordions={<GearRollSimulator />}
       data-testid={'replacement-gear'}
     />

src/features/loadouts/LoadoutGear.tsx

@@ -19,6 +19,7 @@ export function LoadoutGear({ gearSnap, gearState }: LoadoutGearProps) {
   const { selectedLoadout: loadoutSnap } = useSnapshot(
     loadoutsState
   ) as LoadoutsState;
+  const { elementalType } = loadoutSnap;
 
   const {
     selectedLoadoutItem: {
@@ -29,7 +30,7 @@ export function LoadoutGear({ gearSnap, gearState }: LoadoutGearProps) {
   const gearTypeId = gearSnap.type.id;
   const gearValue = loadoutSnap.getGearValue(gearTypeId);
 
-  const maxTitanGear = gearSnap.getMaxTitanGear();
+  const maxTitanGear = gearSnap.getMaxTitanGear(elementalType);
   const maxTitanGearValue = maxTitanGear
     ? loadoutSnap.getSubstituteGearValue(maxTitanGear)
     : undefined;
@@ -76,6 +77,7 @@ export function LoadoutGear({ gearSnap, gearState }: LoadoutGearProps) {
         }
         showTitanToggle
         showStatSummary={loadoutSnap.elementalType}
+        showMaxTitanGear={{ maxTitanGear }}
         data-testid={gearTypeId}
       />
       <GearValue