ZO add icons, minor fixes

frzyc · Feb 6, 2025 · 4a61d85 · 4a61d85
1 parent aa957f2
commit 4a61d85
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 19 deletions.
diff --git a/libs/zzz/consts/src/common.ts b/libs/zzz/consts/src/common.ts
@@ -87,6 +87,7 @@ export const statKeyTextMap: Partial<Record<string, string>> = {
   crit_dmg_: 'CRIT DMG',
   enerRegen_: 'Energy Regen',
   impact_: 'Impact',
+  anomMas: 'Anomaly Mastery',
   anomMas_: 'Anomaly Mastery',
   anomProf: 'Anomaly Proficiency',
   ...objKeyMap(allAnomalyDmgKeys, (dmg_) => `${dmg_} DMG Bonus`),

diff --git a/libs/zzz/page-optimize/src/BaseStatCard.tsx b/libs/zzz/page-optimize/src/BaseStatCard.tsx
@@ -3,10 +3,10 @@ import { getUnitStr, isPercentStat } from '@genshin-optimizer/common/util'
 import type { LocationKey, StatKey } from '@genshin-optimizer/zzz/consts'
 import {
   allAttributeDamageKeys,
-  statKeyTextMap,
   unCondKeys,
 } from '@genshin-optimizer/zzz/consts'
 import type { Stats } from '@genshin-optimizer/zzz/db'
+import { StatDisplay } from '@genshin-optimizer/zzz/ui'
 import { Box, CardContent, Typography } from '@mui/material'
 const baseKeys = ['hp_base', 'atk_base', 'def_base'] as const
 const statKeys: StatKey[] = [
@@ -46,7 +46,7 @@ export default function BaseStatCard({
     <NumberInputLazy
       disabled={!locationKey}
       key={key}
-      sx={{ flexGrow: 1 }}
+      sx={{ flexGrow: 1, whiteSpace: 'nowrap' }}
       value={baseStats[key] || 0}
       onChange={(v) =>
         setBaseStats({
@@ -57,7 +57,7 @@ export default function BaseStatCard({
       float={isPercentStat(key)}
       inputProps={{ sx: { textAlign: 'right', minWidth: '5em' } }}
       InputProps={{
-        startAdornment: statKeyTextMap[key] ?? key,
+        startAdornment: <StatDisplay statKey={key as StatKey} />,
         endAdornment: getUnitStr(key),
       }}
     />

diff --git a/libs/zzz/page-optimize/src/BuildsDisplay.tsx b/libs/zzz/page-optimize/src/BuildsDisplay.tsx
@@ -6,7 +6,14 @@ import { useDatabaseContext, useDisc } from '@genshin-optimizer/zzz/db-ui'
 import type { BuildResult } from '@genshin-optimizer/zzz/solver'
 import { applyCalc, convertDiscToStats } from '@genshin-optimizer/zzz/solver'
 import { DiscCard } from '@genshin-optimizer/zzz/ui'
-import { Box, Button, CardContent, Stack, Typography } from '@mui/material'
+import {
+  Box,
+  Button,
+  CardContent,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material'
 import { useCallback, useMemo } from 'react'
 import { StatsDisplay } from './StatsDisplay'
 
@@ -78,10 +85,18 @@ function Build({
           </Button>
         </Box>
         <StatsDisplay stats={sum} />
-        <Box display="flex" gap={1}>
-          {Object.values(build.discIds).map((dId) => (
-            <DiscCardWrapper discId={dId} key={dId} />
-          ))}
+        <Box>
+          <Grid
+            container
+            spacing={1}
+            columns={{ xs: 2, sm: 3, md: 3, lg: 4, xl: 6 }}
+          >
+            {Object.values(build.discIds).map((dId) => (
+              <Grid item key={dId} xs={1}>
+                <DiscCardWrapper discId={dId} key={dId} />
+              </Grid>
+            ))}
+          </Grid>
         </Box>
       </CardContent>
     </CardThemed>

diff --git a/libs/zzz/page-optimize/src/Optimize.tsx b/libs/zzz/page-optimize/src/Optimize.tsx
@@ -1,6 +1,10 @@
 import { useForceUpdate } from '@genshin-optimizer/common/react-util'
 import { CardThemed, SqBadge } from '@genshin-optimizer/common/ui'
-import { objMap, toDecimal, toggleInArr } from '@genshin-optimizer/common/util'
+import {
+  handleMultiSelect,
+  objMap,
+  toDecimal,
+} from '@genshin-optimizer/common/util'
 import type {
   DiscMainStatKey,
   FormulaKey,
@@ -161,6 +165,9 @@ export default function OptimizeWrapper({
     </Typography>
   )
   const discSlotBtns = (slotKey: '4' | '5' | '6') => {
+    const mainKeysHandler = handleMultiSelect([
+      ...discSlotToMainStatKeys[slotKey],
+    ])
     const keysMap = {
       '4': character?.slot4 ?? [],
       '5': character?.slot5 ?? [],
@@ -182,7 +189,7 @@ export default function OptimizeWrapper({
             key={key}
             variant={keysMap[slotKey].includes(key) ? 'contained' : 'outlined'}
             onClick={() =>
-              funcMap[slotKey](toggleInArr([...keysMap[slotKey]], key))
+              funcMap[slotKey](mainKeysHandler([...keysMap[slotKey]], key))
             }
           >
             <StatDisplay statKey={key} showPercent />

diff --git a/libs/zzz/page-optimize/src/StatFilterCard.tsx b/libs/zzz/page-optimize/src/StatFilterCard.tsx
@@ -9,9 +9,9 @@ import type { DiscSetKey, StatKey } from '@genshin-optimizer/zzz/consts'
 import {
   allAttributeDamageKeys,
   allDiscSetKeys,
-  statKeyTextMap,
 } from '@genshin-optimizer/zzz/consts'
 import type { Constraints } from '@genshin-optimizer/zzz/db'
+import { StatDisplay } from '@genshin-optimizer/zzz/ui'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import {
   Box,
@@ -83,7 +83,7 @@ export function StatFilterCard({
                     }
                     inputProps={{ sx: { textAlign: 'right' } }}
                     InputProps={{
-                      startAdornment: key,
+                      startAdornment: <StatDisplay statKey={key as StatKey} />,
                       endAdornment: getUnitStr(key),
                     }}
                   />
@@ -122,7 +122,7 @@ export function StatFilterCard({
                       })
                     }
                   >
-                    {statKeyTextMap[key] ?? key}
+                    <StatDisplay statKey={key as StatKey} />
                   </MenuItem>
                 ))}
             </DropdownButton>

diff --git a/libs/zzz/page-optimize/src/StatsDisplay.tsx b/libs/zzz/page-optimize/src/StatsDisplay.tsx
@@ -1,5 +1,6 @@
 import { getUnitStr, valueString } from '@genshin-optimizer/common/util'
-import { statKeyTextMap } from '@genshin-optimizer/zzz/consts'
+import type { StatKey } from '@genshin-optimizer/zzz/consts'
+import { StatDisplay } from '@genshin-optimizer/zzz/ui'
 import { Box, Typography } from '@mui/material'
 
 export function StatsDisplay({
@@ -10,12 +11,16 @@ export function StatsDisplay({
   showBase?: boolean
 }) {
   return (
-    <Box sx={{ columnCount: 2 }}>
+    <Box sx={{ columnCount: { xs: 1, sm: 2, md: 3, lg: 4 } }}>
       {Object.entries(stats)
         .filter(([k]) => showBase || !k.endsWith('_base'))
         .map(([k, v]) => (
-          <Typography key={k}>
-            {statKeyTextMap[k] ?? k}: {valueString(v, getUnitStr(k))}
+          <Typography
+            key={k}
+            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+          >
+            <StatDisplay key={k} statKey={k as StatKey} />{' '}
+            <span>{valueString(v, getUnitStr(k))}</span>
           </Typography>
         ))}
     </Box>

diff --git a/libs/zzz/svgicons/src/components/StatIcon.tsx b/libs/zzz/svgicons/src/components/StatIcon.tsx
@@ -27,21 +27,34 @@ export function StatIcon({
     case 'hp':
     case 'hp_':
     case 'hp_base':
+    case 'cond_hp':
+    case 'cond_hp_':
+    case 'initial_hp':
+    case 'final_hp':
       return <HPIcon {...iconProps} />
     case 'atk':
     case 'atk_':
     case 'atk_base':
+    case 'cond_atk':
+    case 'cond_atk_':
+    case 'initial_atk':
+    case 'final_atk':
       return <AtkIcon {...iconProps} />
     case 'def':
     case 'def_':
     case 'def_base':
+    case 'cond_def':
+    case 'cond_def_':
+    case 'initial_def':
+    case 'final_def':
       return <DefIcon {...iconProps} />
     case 'crit_':
       return <CritIcon {...iconProps} />
     case 'crit_dmg_':
       return <CritDmgIcon {...iconProps} />
     case 'enerRegen_':
       return <EnerRegenIcon {...iconProps} />
+    case 'anomMas':
     case 'anomMas_':
       return <AnomMasIcon {...iconProps} />
     case 'anomProf':

diff --git a/libs/zzz/ui/src/Character/StatDisplay.tsx b/libs/zzz/ui/src/Character/StatDisplay.tsx
@@ -1,5 +1,7 @@
+import { iconInlineProps } from '@genshin-optimizer/common/svgicons'
 import { getUnitStr } from '@genshin-optimizer/common/util'
 import { statKeyTextMap, type StatKey } from '@genshin-optimizer/zzz/consts'
+import { StatIcon } from '@genshin-optimizer/zzz/svgicons'
 import { Box } from '@mui/material'
 
 export function StatDisplay({
@@ -22,9 +24,9 @@ export function StatDisplay({
   if (disableIcon) return text
   return (
     <Box component="span" display="inline-flex" alignItems="center" gap={1}>
-      {/* {!disableIcon && (
+      {!disableIcon && (
         <StatIcon statKey={statKey} iconProps={iconInlineProps} />
-      )} */}
+      )}
       {text}
     </Box>
   )