Show max potential titan for every gear in a loadout

package.json

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

pages/_layout.tsx

@@ -16,23 +16,13 @@ export default function Layout({ children }: LayoutProps) {
 
       <Stack mt={5} spacing={1} alignItems="center">
         <RandomSticker />
+        <Changelog />
         <Box textAlign="center">
           <Typography variant="body2">
-            Questions? Find me on discord @apache1123
-          </Typography>
-          <Typography variant="body2">
-            or come hang out at our{' '}
-            <Link
-              href="https://discord.gg/vegemites"
-              target="_blank"
-              rel="noopener"
-            >
-              crew discord
-            </Link>{' '}
-            (Vegemites, APAC crew)
+            Questions? Find me on discord @apache1123, or submit an issue in the
+            Github repo
           </Typography>
         </Box>
-        <Changelog />
         <Link
           href="https://github.com/apache1123/tof-tools"
           target="_blank"

src/constants/changelog.tsx

@@ -135,4 +135,12 @@ export const changelog: Changelog = [
       </>
     ),
   },
+  {
+    semver: '3.4.0',
+    date: new Date(Date.UTC(2024, 0, 8)),
+    title:
+      'Show max potential titan value for every piece of gear in a loadout',
+    description:
+      'This may help you decide which piece of gear in your loadout is the weakest, so that you can farm that piece in Joint Operation',
+  },
 ];

src/features/GearPiece.tsx

@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
+import Image from 'next/image';
 import type { ReactNode } from 'react';
 
 import { GearTypeIcon } from '../components/GearTypeIcon/GearTypeIcon';
@@ -20,6 +21,7 @@ import { GearAttackStatsSummary } from './GearAttackStatsSummary';
 import { GearRollBreakdown } from './GearRollBreakdown';
 import { GearStars } from './GearStars';
 import { EmptyStatEditor, StatEditor } from './StatEditor';
+import { TitanGearMaxStats } from './TitanGearMaxStats';
 
 export interface GearPieceProps {
   gearSnap: Gear;
@@ -30,7 +32,6 @@ export interface GearPieceProps {
   /** External actions such as `Import gear` & `Save gear` that make no sense to be orchestrated by a `Gear` instance, but can be slotted here (for layout purposes) */
   actions?: ReactNode;
   showStatSummary?: CoreElementalType;
-  maxTitanStatsContent?: ReactNode;
   additionalAccordions?: ReactNode;
   ['data-testid']?: string;
 }
@@ -41,14 +42,15 @@ export const GearPiece = ({
   gearTypeSelector,
   actions,
   showStatSummary,
-  maxTitanStatsContent,
   additionalAccordions,
   'data-testid': dataTestId,
 }: GearPieceProps) => {
   const gearType = gearSnap.type;
   const isTitan = gearSnap.isAugmented;
   const possibleRandomStatTypes = getPossibleRandomStatTypes(gearType);
 
+  const maxTitanGear = gearSnap.getMaxTitanGear();
+
   return (
     <Layout
       typeIcon={
@@ -86,7 +88,7 @@ export const GearPiece = ({
         <>
           {showStatSummary && (
             <GearAttackStatsSummary
-              gearSnap={gearSnap as Gear}
+              gearSnap={gearSnap}
               elementalType={showStatSummary}
             />
           )}
@@ -103,26 +105,63 @@ export const GearPiece = ({
                 <GearRollBreakdown gearSnap={gearSnap} />
               </AccordionDetails>
             </Accordion>
-            {maxTitanStatsContent && (
-              <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)
+            <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
+                    </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>
-                    {maxTitanStatsContent}
-                  </>
-                </AccordionDetails>
-              </Accordion>
-            )}
+                  ) : 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.
+                      </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/GearComparer.tsx

@@ -1,15 +1,11 @@
 import { Box, Divider, Link, Paper, Stack, Typography } from '@mui/material';
-import Grid from '@mui/material/Unstable_Grid2';
 
 import { BuffSummary } from './BuffSummary';
 import { GearComparerOptions } from './GearComparerOptions';
-import { LoadoutGear } from './LoadoutGear';
-import { LoadoutGearValue } from './LoadoutGearValue';
+import { GearsSideBySide } from './GearsSideBySide';
 import { LoadoutStats } from './LoadoutStats';
 import { LoadoutTeam } from './LoadoutTeam';
 import { LoadoutTitle } from './LoadoutTitle';
-import { ReplacementGear } from './ReplacementGear';
-import { ReplacementGearValue } from './ReplacementGearValue';
 
 export function GearComparer() {
   return (
@@ -24,24 +20,7 @@ export function GearComparer() {
           <LoadoutTeam />
           <LoadoutStats />
 
-          <Grid container spacing={3}>
-            <Grid xs={12} md={6}>
-              <Typography variant="h5" mb={1}>
-                Current gear in loadout
-              </Typography>
-              <LoadoutGear />
-              <LoadoutGearValue />
-            </Grid>
-            <Grid xs={12} md={6}>
-              <Box display="flex" justifyContent="space-between">
-                <Typography variant="h5" mb={1}>
-                  New gear
-                </Typography>
-              </Box>
-              <ReplacementGear />
-              <ReplacementGearValue />
-            </Grid>
-          </Grid>
+          <GearsSideBySide />
         </Stack>
       </Paper>
 

src/features/gear-comparer/GearsSideBySide.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import { useSnapshot } from 'valtio';
+
+import { gearComparerState } from '../../states/states';
+import { LoadoutGear } from './LoadoutGear';
+import { LoadoutGearValue } from './LoadoutGearValue';
+import { ReplacementGear } from './ReplacementGear';
+import { ReplacementGearValue } from './ReplacementGearValue';
+
+export function GearsSideBySide() {
+  const { selectedLoadoutGear, replacementGear, selectedLoadout } =
+    useSnapshot(gearComparerState);
+
+  const selectedLoadoutGearMaxTitan = selectedLoadoutGear.getMaxTitanGear();
+  const replacementGearMaxTitan = replacementGear.getMaxTitanGear();
+
+  const selectedLoadoutGearMaxTitanValue = selectedLoadoutGearMaxTitan
+    ? selectedLoadout.getSubstituteGearValue(selectedLoadoutGearMaxTitan)
+    : undefined;
+  const replacementGearMaxTitanValue = replacementGearMaxTitan
+    ? selectedLoadout.getSubstituteGearValue(replacementGearMaxTitan)
+    : undefined;
+
+  return (
+    <Grid container spacing={3}>
+      <Grid xs={12} md={6}>
+        <Typography variant="h5" mb={1}>
+          Current gear in loadout
+        </Typography>
+        <LoadoutGear />
+        <LoadoutGearValue
+          maxTitanGearValue={selectedLoadoutGearMaxTitanValue}
+          isMaxTitanGearValueHigher={
+            selectedLoadoutGearMaxTitanValue !== undefined
+              ? selectedLoadoutGearMaxTitanValue >=
+                (replacementGearMaxTitanValue ?? 0)
+              : undefined
+          }
+        />
+      </Grid>
+      <Grid xs={12} md={6}>
+        <Box display="flex" justifyContent="space-between">
+          <Typography variant="h5" mb={1}>
+            New gear
+          </Typography>
+        </Box>
+        <ReplacementGear />
+        <ReplacementGearValue
+          maxTitanGearValue={replacementGearMaxTitanValue}
+          isMaxTitanGearValueHigher={
+            replacementGearMaxTitanValue !== undefined
+              ? replacementGearMaxTitanValue >=
+                (selectedLoadoutGearMaxTitanValue ?? 0)
+              : undefined
+          }
+        />
+      </Grid>
+    </Grid>
+  );
+}

src/features/gear-comparer/LoadoutGear.tsx

@@ -1,15 +1,10 @@
-import { Box, Typography } from '@mui/material';
-import Image from 'next/image';
 import { useSnapshot } from 'valtio';
 
 import { GearTypeSelector } from '../../components/GearTypeSelector/GearTypeSelector';
-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 { TitanGearMaxStats } from '../TitanGearMaxStats';
-import { gearComparerGearMaxTitansState } from './states/derived/gear-comparer-gear-max-titans';
 
 export function LoadoutGear() {
   const {
@@ -18,8 +13,6 @@ export function LoadoutGear() {
   } = useSnapshot(gearComparerState) as GearComparerState;
   const gearState = gearComparerState.selectedLoadoutGear;
 
-  const maxTitansSnap = useSnapshot(gearComparerGearMaxTitansState);
-
   return (
     <GearPiece
       gearSnap={gearSnap}
@@ -45,49 +38,6 @@ export function LoadoutGear() {
         />
       }
       showStatSummary={elementalType}
-      maxTitanStatsContent={
-        gearSnap.stars !== 5 &&
-        (gearSnap as Gear).getPossibleStars().length > 1 ? (
-          <Typography color="info.main" gutterBottom>
-            Can&apos;t determine the number of stars{' '}
-            <strong>
-              (either {(gearSnap as Gear).getPossibleStars().join(' or ')}{' '}
-              stars)
-            </strong>
-            . Select it above to continue
-          </Typography>
-        ) : gearSnap.stars !== 5 &&
-          (gearSnap as Gear).getPossibleStars().length === 1 &&
-          (gearSnap as Gear).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 && maxTitansSnap.titansByReferenceGearId[gearSnap.id] ? (
-          <TitanGearMaxStats
-            maxTitanGearSnap={
-              maxTitansSnap.titansByReferenceGearId[gearSnap.id] as Gear
-            }
-            elementalType={elementalType}
-          />
-        ) : (
-          <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>
-        )
-      }
       data-testid={'loadout-gear'}
     />
   );