preliminary text display for formula using UI sheets

libs/pando/engine/src/tag/dedup.ts

@@ -15,7 +15,7 @@ export class DedupTags<V = never> {
   }
 
   /** Object associated with `tag` */
-  at(tag: Tag): DedupTag<V> {
+  at(tag: Tag): Leaf<V> {
     const id = this.keys.get(tag)
     const cur = id.reduce((cur, id) => cur.child(id), this.root)
     if (!cur.leaf) cur.leaf = new Leaf(tag, id, this.keys, cur)

libs/pando/ui-sheet/src/types/field.ts

@@ -20,3 +20,7 @@ export type TextField = {
 }
 
 export type Field = TagField | TextField
+
+export function isTagField(field: Field): field is TagField {
+  return 'fieldRef' in field
+}

libs/sr/consts/src/relic.ts

@@ -75,7 +75,15 @@ export const allRelicSubStatKeys = [
   'brEffect_',
 ] as const
 export type RelicSubStatKey = (typeof allRelicSubStatKeys)[number]
-
+export const allElementalDmgMainStatKeys = [
+  'physical_dmg_',
+  'fire_dmg_',
+  'ice_dmg_',
+  'lightning_dmg_',
+  'wind_dmg_',
+  'quantum_dmg_',
+  'imaginary_dmg_',
+] as const
 export const allRelicMainStatKeys = [
   'hp',
   'atk',
@@ -87,16 +95,11 @@ export const allRelicMainStatKeys = [
   'heal_',
   'eff_',
   'spd',
-  'physical_dmg_',
-  'fire_dmg_',
-  'ice_dmg_',
-  'lightning_dmg_',
-  'wind_dmg_',
-  'quantum_dmg_',
-  'imaginary_dmg_',
+  ...allElementalDmgMainStatKeys,
   'brEffect_',
   'enerRegen_',
 ] as const
+
 export type RelicMainStatKey = (typeof allRelicMainStatKeys)[number]
 
 export const allRelicRarityKeys = [2, 3, 4, 5] as const
@@ -142,3 +145,8 @@ export const relicSlotToMainStatKeys: Record<RelicSlotKey, RelicMainStatKey[]> =
     ],
     rope: ['hp_', 'atk_', 'def_', 'brEffect_', 'enerRegen_'],
   }
+
+export const allRelicMainSubStatKeys = Array.from(
+  new Set([...allRelicSubStatKeys, ...allRelicMainStatKeys] as const)
+)
+export type RelicMainSubStatKey = (typeof allRelicMainSubStatKeys)[number]

libs/sr/formula-ui/src/char/index.ts

@@ -1,2 +1,4 @@
 export * from './consts'
 export * from './sheets'
+export * from './tagFieldMap'
+export * from './util'

libs/sr/formula-ui/src/char/sheets/CharBase.tsx

@@ -0,0 +1,33 @@
+import type { TagField } from '@genshin-optimizer/pando/ui-sheet'
+import type { ElementalTypeKey } from '@genshin-optimizer/sr/consts'
+import {
+  allElementalDmgMainStatKeys,
+  allRelicMainSubStatKeys,
+} from '@genshin-optimizer/sr/consts'
+import type { Tag } from '@genshin-optimizer/sr/formula'
+import { own } from '@genshin-optimizer/sr/formula'
+import { RelicStatWithUnit } from '@genshin-optimizer/sr/ui'
+
+export const charBaseUiSheet: TagField[] = allRelicMainSubStatKeys.map(
+  (statKey) => {
+    if (
+      allElementalDmgMainStatKeys.includes(
+        statKey as (typeof allElementalDmgMainStatKeys)[number]
+      )
+    ) {
+      const tag = {
+        ...own.final.dmg_,
+        elementalType: statKey.slice(0, -5) as ElementalTypeKey,
+      } as Tag
+      return {
+        title: <RelicStatWithUnit statKey={statKey} />,
+        fieldRef: tag,
+      } as TagField
+    }
+    console.log({ statKey })
+    return {
+      fieldRef: own.final[statKey as keyof typeof own.final].tag as Tag,
+      title: <RelicStatWithUnit statKey={statKey} />,
+    }
+  }
+)

libs/sr/formula-ui/src/char/tagFieldMap.ts

@@ -0,0 +1,31 @@
+import {
+  compileTagMapValues,
+  TagMapSubset,
+} from '@genshin-optimizer/pando/engine'
+import type { TagField } from '@genshin-optimizer/pando/ui-sheet'
+import { isTagField } from '@genshin-optimizer/pando/ui-sheet'
+import type { Tag } from '@genshin-optimizer/sr/formula'
+import { keys } from '@genshin-optimizer/sr/formula'
+import { uiSheets } from './sheets'
+
+const tagValue: Array<{ tag: Tag; value: TagField }> = []
+Object.values(uiSheets).forEach((sheet) => {
+  Object.values(sheet).forEach(({ documents }) => {
+    documents.forEach((document) => {
+      if (document.type === 'fields')
+        document.fields.forEach((field) => {
+          if (!isTagField(field)) return
+          tagValue.push({ tag: field.fieldRef, value: field })
+        })
+    })
+  })
+})
+
+//TODO: This breaks? wtf?
+// charBaseUiSheet.forEach((field) => {
+//   tagValue.push({ tag: field.fieldRef, value: field })
+// })
+export const tagFieldMap = new TagMapSubset(
+  keys,
+  compileTagMapValues(keys, tagValue)
+)

libs/sr/formula-ui/src/char/util.ts

@@ -0,0 +1,23 @@
+import type { DamageType, Tag } from '@genshin-optimizer/sr/formula'
+
+export function getVariant(tag: Tag) {
+  const { qt, q, elementalType } = tag
+  if (qt === 'prep' && q === 'heal') return 'heal'
+  else if (isDmg(tag)) {
+    if (elementalType) return elementalType
+  }
+  return
+}
+export function isDmg(tag: Tag) {
+  const { q } = tag
+  return q === 'dmg'
+}
+
+export function getDmgType(tag: Tag) {
+  const { damageType1, damageType2 } = tag
+  const dmgType: Array<DamageType> = []
+  if (!isDmg(tag)) return []
+  if (damageType1) dmgType.push(damageType1)
+  if (damageType2) dmgType.push(damageType2)
+  return dmgType
+}

libs/sr/formula/src/index.ts

@@ -11,6 +11,7 @@ export type { SrcCondInfo } from './calculator'
 export * from './data/util'
 export * from './meta'
 export * from './util'
+export { keys }
 
 export function srCalculatorWithValues(extras: TagMapEntries<number>) {
   return srCalculatorWithEntries(

libs/sr/ui/src/Optimization/OptimizationTargetSelector.tsx → libs/sr/page-team/src/TeammateDisplay/Tabs/Optimize/OptimizationTargetSelector.tsx

@@ -1,8 +1,17 @@
-import { DropdownButton } from '@genshin-optimizer/common/ui'
+import {
+  ColorText,
+  DropdownButton,
+  SqBadge,
+} from '@genshin-optimizer/common/ui'
 import type { Read } from '@genshin-optimizer/sr/formula'
 import { own } from '@genshin-optimizer/sr/formula'
-import { useSrCalcContext } from '@genshin-optimizer/sr/formula-ui'
-import { MenuItem } from '@mui/material'
+import {
+  getDmgType,
+  getVariant,
+  tagFieldMap,
+  useSrCalcContext,
+} from '@genshin-optimizer/sr/formula-ui'
+import { Box, ListItemText, MenuItem } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
 export function OptimizationTargetSelector({
@@ -25,7 +34,19 @@ export function OptimizationTargetSelector({
           key={`${index}_${read.tag.name || read.tag.q}`}
           onClick={() => setOptTarget(read)}
         >
-          {read.tag.name || read.tag.q}
+          <ListItemText>
+            <ColorText color={getVariant(read.tag)}>
+              {tagFieldMap.subset(read.tag)[0]?.title ||
+                read.tag.name ||
+                read.tag.q}
+            </ColorText>
+          </ListItemText>
+          {/* Show DMG type */}
+          <Box sx={{ display: 'flex', gap: 1, ml: 1 }}>
+            {getDmgType(read.tag).map((dmgType) => (
+              <SqBadge>{dmgType}</SqBadge>
+            ))}
+          </Box>
         </MenuItem>
       ))}
     </DropdownButton>

libs/sr/page-team/src/TeammateDisplay/Tabs/Optimize/index.tsx

@@ -5,13 +5,7 @@ import type { Read } from '@genshin-optimizer/sr/formula'
 import { useSrCalcContext } from '@genshin-optimizer/sr/formula-ui'
 import type { BuildResult, ProgressResult } from '@genshin-optimizer/sr/solver'
 import { MAX_BUILDS, Solver } from '@genshin-optimizer/sr/solver'
-import {
-  BuildDisplay,
-  OptimizationTargetSelector,
-  StatFilterCard,
-  WorkerSelector,
-  useDatabaseContext,
-} from '@genshin-optimizer/sr/ui'
+import { BuildDisplay, useDatabaseContext } from '@genshin-optimizer/sr/ui'
 import CloseIcon from '@mui/icons-material/Close'
 import TrendingUpIcon from '@mui/icons-material/TrendingUp'
 import {
@@ -24,6 +18,9 @@ import {
 } from '@mui/material'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { OptimizationTargetSelector } from './OptimizationTargetSelector'
+import { StatFilterCard } from './StatFilterCard'
+import { WorkerSelector } from './WorkerSelector'
 
 export default function Optimize() {
   const { t } = useTranslation('optimize')

libs/sr/theme/src/Theme.tsx

@@ -12,6 +12,7 @@ declare module '@mui/material/styles' {
     quantum: Palette['primary']
     wind: Palette['primary']
     orange: Palette['primary']
+    heal: Palette['primary']
   }
 
   interface PaletteOptions {
@@ -23,6 +24,7 @@ declare module '@mui/material/styles' {
     quantum?: PaletteOptions['primary']
     wind?: PaletteOptions['primary']
     orange?: Palette['primary']
+    heal?: Palette['primary']
   }
 }
 
@@ -35,6 +37,7 @@ declare module '@mui/material/Button' {
     physical: true
     quantum: true
     wind: true
+    heal: true
   }
 }
 
@@ -47,6 +50,7 @@ declare module '@mui/material/Chip' {
     physical: true
     quantum: true
     wind: true
+    heal: true
   }
 }
 
@@ -59,6 +63,7 @@ declare module '@mui/material/InputBase' {
     physical: true
     quantum: true
     wind: true
+    heal: true
   }
 }
 
@@ -110,5 +115,9 @@ export const theme = createTheme({
       color: { main: '#f29e38', contrastText: '#fff' },
       name: 'orange',
     }),
+    heal: commonTheme.palette.augmentColor({
+      color: { main: '#c0e86c' },
+      name: 'heal',
+    }),
   },
 })

libs/sr/ui/src/Relic/RelicEditor/index.tsx

@@ -1 +1,2 @@
 export * from './RelicEditor'
+export * from './RelicStatKeyDisplay'

libs/sr/ui/src/index.tsx

@@ -2,7 +2,6 @@ export * from './Character'
 export * from './Context'
 export * from './Hook'
 export * from './LightCone'
-export * from './Optimization'
 export * from './Provider'
 export * from './Relic'
 export * from './Settings'