force 2p, refactor disccard, add ATK target

libs/zzz/consts/src/common.ts

@@ -83,6 +83,12 @@ export const statKeyTextMap: Partial<Record<string, string>> = {
   enemyResRed_: 'Enemy Resistance Reduction',
   enemyResIgn_: 'Enemy Resistance Ignore',
 
+  initial_hp: 'Initial HP',
+  initial_def: 'Initial DEF',
+  initial_atk: 'Initial ATK',
+  final_hp: 'Final HP',
+  final_def: 'Final DEF',
+  final_atk: 'Final ATK',
   uncond_hp: 'Unconditional HP',
   uncond_def: 'Unconditional DEF',
   uncond_atk: 'Unconditional ATK',

libs/zzz/page-optimize/src/Optimize.tsx

@@ -293,6 +293,7 @@ function OptimizeTargetSelector({
   )
 }
 const formulaKeyTextMap: Record<FormulaKey, string> = {
+  initial_atk: 'Initial ATK',
   electric_dmg_: 'Electrical Damage',
   fire_dmg_: 'Fire Damage',
   ice_dmg_: 'Ice Damage',
@@ -312,39 +313,76 @@ function Set4Selector({
   constraints: Constraints
   setConstraints: (c: Constraints) => void
 }) {
-  const set = Object.keys(constraints).find((k) =>
-    allDiscSetKeys.includes(k as DiscSetKey)
-  )
+  const set4 = Object.entries(constraints).find(
+    ([k, { value }]) => allDiscSetKeys.includes(k as DiscSetKey) && value === 4
+  )?.[0]
+  const set2 = Object.entries(constraints).find(
+    ([k, { value }]) => allDiscSetKeys.includes(k as DiscSetKey) && value === 2
+  )?.[0]
   return (
-    <DropdownButton
-      title={
-        set ? (
-          <span>
-            Force 4-Set: <strong>{set}</strong>
-          </span>
-        ) : (
-          'Select to force 4-Set'
-        )
-      }
-      sx={{ flexGrow: 1 }}
-    >
-      {allDiscSetKeys.map((d) => (
-        <MenuItem
-          key={d}
-          onClick={() =>
-            setConstraints({
-              ...Object.fromEntries(
-                Object.entries(constraints).filter(
-                  ([k]) => !allDiscSetKeys.includes(k as DiscSetKey)
-                )
-              ),
-              [d]: { value: 4, isMax: false },
-            })
-          }
-        >
-          {d}
-        </MenuItem>
-      ))}
-    </DropdownButton>
+    <>
+      <DropdownButton
+        title={
+          set4 ? (
+            <span>
+              Force 4-Set: <strong>{set4}</strong>
+            </span>
+          ) : (
+            'Select to force 4-Set'
+          )
+        }
+        sx={{ flexGrow: 1 }}
+      >
+        {allDiscSetKeys.map((d) => (
+          <MenuItem
+            key={d}
+            onClick={() =>
+              setConstraints({
+                ...Object.fromEntries(
+                  Object.entries(constraints).filter(
+                    ([k, { value }]) =>
+                      !(allDiscSetKeys.includes(k as DiscSetKey) && value === 4)
+                  )
+                ),
+                [d]: { value: 4, isMax: false },
+              })
+            }
+          >
+            {d}
+          </MenuItem>
+        ))}
+      </DropdownButton>
+      <DropdownButton
+        title={
+          set2 ? (
+            <span>
+              Force 2-Set: <strong>{set2}</strong>
+            </span>
+          ) : (
+            'Select to force 2-Set'
+          )
+        }
+        sx={{ flexGrow: 1 }}
+      >
+        {allDiscSetKeys.map((d) => (
+          <MenuItem
+            key={d}
+            onClick={() =>
+              setConstraints({
+                ...Object.fromEntries(
+                  Object.entries(constraints).filter(
+                    ([k, { value }]) =>
+                      !(allDiscSetKeys.includes(k as DiscSetKey) && value === 2)
+                  )
+                ),
+                [d]: { value: 2, isMax: false },
+              })
+            }
+          >
+            {d}
+          </MenuItem>
+        ))}
+      </DropdownButton>
+    </>
   )
 }

libs/zzz/solver/src/calc.ts

@@ -28,12 +28,12 @@ export function getSum(baseStats: BaseStats, discs: DiscStats[]) {
         sum[k] = s(k) + v
   }
   // Rudimentary Calculations
-  sum['hp'] = s('hp_base') * (1 + s('hp_')) + s('hp')
-  sum['atk'] = s('atk_base') * (1 + s('atk_')) + s('atk')
-  sum['def'] = s('def_base') * (1 + s('def_')) + s('def')
-  sum['hp'] = s('hp') * (1 + s('uncond_hp_')) + s('uncond_hp')
-  sum['atk'] = s('atk') * (1 + s('uncond_atk_')) + s('uncond_atk')
-  sum['def'] = s('def') * (1 + s('uncond_def_')) + s('uncond_def')
+  sum['initial_hp'] = s('hp_base') * (1 + s('hp_')) + s('hp')
+  sum['initial_atk'] = s('atk_base') * (1 + s('atk_')) + s('atk')
+  sum['initial_def'] = s('def_base') * (1 + s('def_')) + s('def')
+  sum['final_hp'] = s('initial_hp') * (1 + s('uncond_hp_')) + s('uncond_hp')
+  sum['final_def'] = s('initial_atk') * (1 + s('uncond_atk_')) + s('uncond_atk')
+  sum['final_atk'] = s('initial_def') * (1 + s('uncond_def_')) + s('uncond_def')
   sum['impact'] = s('impact') + (1 + s('impact_'))
   sum['anomMas'] = s('anomMas') + (1 + s('anomMas_'))
   return sum
@@ -44,19 +44,21 @@ export function calcFormula(sums: Record<string, number>, formula: FormulaKey) {
 }
 
 export const allFormulaKeys = [
+  'initial_atk',
   ...allAttributeDamageKeys,
   ...allAnomalyDmgKeys,
 ] as const
 export type FormulaKey = (typeof allFormulaKeys)[number]
 const formulas: Record<FormulaKey, (sums: Record<string, number>) => number> = {
+  initial_atk: (sums: Record<string, number>) => sums['initial_atk'] || 0,
   ...objKeyMap(
     allAttributeDamageKeys,
     (dmg_) => (sums: Record<string, number>) => {
       const s = (key: string) => sums[key] || 0
 
       return (
         // Base DMG, missing ability MV
-        s('atk') *
+        s('final_atk') *
         // DMG Bonus Multiplier
         (1 + s(dmg_) + s('dmg_')) *
         // Crit Multiplier
@@ -75,7 +77,7 @@ const formulas: Record<FormulaKey, (sums: Record<string, number>) => number> = {
     return (
       // Anomaly Base DMG
       anomalyBaseDmg[dmg_] *
-      s('atk') *
+      s('final_atk') *
       // Anomaly Proficiency Multiplier
       (s('anomProf') * 0.01) *
       // Anomaly Level Multiplier

libs/zzz/ui/src/Disc/DiscCard.tsx

@@ -1,6 +1,7 @@
 import {
   BootstrapTooltip,
   CardThemed,
+  ColorText,
   SqBadge,
 } from '@genshin-optimizer/common/ui'
 import {
@@ -26,13 +27,15 @@ import {
   Button,
   CardContent,
   Chip,
+  Divider,
   IconButton,
   Skeleton,
   SvgIcon,
   Typography,
 } from '@mui/material'
-import { Suspense } from 'react'
+import React, { Suspense } from 'react'
 import { useTranslation } from 'react-i18next'
+import { StatDisplay } from '../Character'
 import { LocationAutocomplete } from '../Character/LocationAutocomplete'
 import { LocationName } from '../Character/LocationName'
 import { DiscSetName } from './DiscTrans'
@@ -97,22 +100,18 @@ export function DiscCard({
     >
       <CardThemed
         bgt="light"
-        sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+        }}
       >
         <Box
           // TODO: rarity color
           className={`grad-${rarity}star`}
           sx={{ position: 'relative', width: '100%' }}
         >
-          {!onClick && !!onLockToggle && (
-            <IconButton
-              color="primary"
-              onClick={onLockToggle}
-              sx={{ position: 'absolute', right: 0, bottom: 0, zIndex: 2 }}
-            >
-              {lock ? <Lock /> : <LockOpen />}
-            </IconButton>
-          )}
           {excluded && (
             <SvgIcon
               color="primary"
@@ -126,13 +125,8 @@ export function DiscCard({
             {/* header */}
             <Box
               component="div"
-              sx={{ display: 'flex', alignItems: 'center', gap: 0.4, mb: 1 }}
+              sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}
             >
-              <Chip
-                size="small"
-                label={<strong>{`+${level}`}</strong>}
-                color={discLevelVariant(level)}
-              />
               {/* TODO: if slotName used again, this needs to be added; otherwise
                   could just remove this since setKey check below already has fallback
                 {!setKey && <Skeleton variant="text" width={100} />} */}
@@ -148,40 +142,52 @@ export function DiscCard({
                 <strong>
                   {(setKey && <DiscSetName setKey={setKey} />) || 'Disc Set'}
                 </strong>
-              </Typography>
+              </Typography>{' '}
+              <SqBadge color="secondary">{slotKey}</SqBadge>
               {/* TODO: requires sheets
                 {!slotDescTooltip ? <Skeleton width={10} /> : slotDescTooltip} */}
             </Box>
-            <Typography
-              color="text.secondary"
-              variant="body2"
-              sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}
-            >
-              {/* <SlotIcon iconProps={{ fontSize: 'inherit' }} slotKey={slotKey} /> */}
-              Slot:{slotKey}
-              {/* {tk(`discs_gen:${slotKey}`)} */}
-            </Typography>
-            <Typography
-              variant="h6"
-              sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
-            >
-              {/* <StatIcon
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              <SqBadge>{rarity}</SqBadge>
+              <Chip
+                size="small"
+                label={<strong>{`+${level}`}</strong>}
+                color={discLevelVariant(level)}
+              />
+              <Box sx={{ flexGrow: 1 }}></Box>
+              {!onClick && !!onLockToggle && (
+                <IconButton size="small" color="primary" onClick={onLockToggle}>
+                  {lock ? <Lock /> : <LockOpen />}
+                </IconButton>
+              )}
+            </Box>
+            <Box display="flex" gap={1} alignItems="center">
+              <Typography
+                variant="h6"
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  flexGrow: 1,
+                }}
+              >
+                {/* <StatIcon
                 statKey={mainStatKey}
                 iconProps={{ sx: { color: `${ele}.main` } }}
               /> */}
-              <span>{tk(`statKey_gen:${mainStatKey}`)}</span>
-            </Typography>
-            <Typography variant="h5">
-              <strong>
-                {toPercent(
-                  getDiscMainStatVal(rarity, mainStatKey, level),
-                  mainStatKey
-                ).toFixed(statKeyToFixed(mainStatKey))}
-                {getUnitStr(mainStatKey)}
-              </strong>
-            </Typography>
-            {/* <StarsDisplay stars={rarity} colored /> */}
-            <SqBadge>{rarity}</SqBadge>
+                <StatDisplay statKey={mainStatKey} />
+              </Typography>
+              <Typography variant="h5">
+                <strong>
+                  {toPercent(
+                    getDiscMainStatVal(rarity, mainStatKey, level),
+                    mainStatKey
+                  ).toFixed(statKeyToFixed(mainStatKey))}
+                  {getUnitStr(mainStatKey)}
+                </strong>
+              </Typography>
+            </Box>
+
             {/* {process.env.NODE_ENV === "development" && <Typography color="common.black">{id || `""`} </Typography>} */}
           </Box>
           {/* <Box sx={{ height: '100%', position: 'absolute', right: 0, top: 0 }}>
@@ -213,11 +219,10 @@ export function DiscCard({
           {substats.map(
             (substat) =>
               substat.key && (
-                <SubstatDisplay
-                  key={substat.key}
-                  substat={substat}
-                  rarity={rarity}
-                />
+                <React.Fragment key={substat.key}>
+                  <Divider />
+                  <SubstatDisplay substat={substat} rarity={rarity} />
+                </React.Fragment>
               )
           )}
           <Box flexGrow={1} />
@@ -305,11 +310,19 @@ function SubstatDisplay({
     key
   ).toFixed(statKeyToFixed(key))
   return (
-    <Typography sx={{ display: 'flex', alignItems: 'center' }}>
-      {/* <StatDisplay statKey={key} /> */}
-      {key}
+    <Typography
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <span>
+        <StatDisplay statKey={key} />{' '}
+        {upgrades > 1 && <ColorText color="warning">+{upgrades}</ColorText>}
+      </span>
       <span>
-        +{displayValue}
+        {displayValue}
         {getUnitStr(key)}
       </span>
     </Typography>