Pando conditional UI (#2422)

* rudimentary conditional UI

* setConditional

* todo go-next

* minor refactor

apps/gi-frontend/src/app/teams/[teamId]/TalentContent.tsx

@@ -305,6 +305,7 @@ function SkillDisplayCard({
             document={doc}
             collapse
             // hideHeader={hideHeader}
+            setConditional={() => {}} // TODO: frzyc setConditional
           />
         ))}
       </CardContent>

libs/pando/ui-sheet/src/components/DocumentDisplay.tsx

@@ -2,21 +2,39 @@
 import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
 import { CardHeaderCustom, CardThemed } from '@genshin-optimizer/common/ui'
 import { evalIfFunc } from '@genshin-optimizer/common/util'
+import { read } from '@genshin-optimizer/pando/engine'
+import CheckBoxIcon from '@mui/icons-material/CheckBox'
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { Box, Collapse, Divider } from '@mui/material'
+import { Box, Button, Collapse, Divider } from '@mui/material'
 import { useContext, useState } from 'react'
 import { CalcContext } from '../context'
-import type { Document, FieldsDocument, Header, TextDocument } from '../types'
+import type {
+  Conditional,
+  Document,
+  FieldsDocument,
+  Header,
+  TextDocument,
+} from '../types'
 import { FieldsDisplay } from './FieldDisplay'
 
+type SetConditionalFunc = (
+  srcKey: string,
+  sheetKey: string,
+  condKey: string,
+  value: number
+) => void
+
 export function DocumentDisplay({
   document,
   bgt = 'normal',
   collapse = false,
+  setConditional,
 }: {
   document: Document
   bgt?: CardBackgroundColor
   collapse?: boolean
+  setConditional: SetConditionalFunc
 }) {
   switch (document.type) {
     case 'fields':
@@ -28,16 +46,16 @@ export function DocumentDisplay({
         <TextSectionDisplay textDocument={document} />
       )
     case 'conditional':
-      return null //TODO:
-    // return (
-    //   <ConditionalDisplay
-    //     conditional={document}
-    //     hideDesc={hideDesc}
-    //     hideHeader={hideHeader}
-    //     disabled={disabled}
-    //     bgt={bgt}
-    //   />
-    // )
+      return (
+        <ConditionalDisplay
+          conditional={document.conditional}
+          setConditional={setConditional}
+          // hideDesc={hideDesc}
+          // hideHeader={hideHeader}
+          // disabled={disabled}
+          bgt={bgt}
+        />
+      )
     default:
       return null
   }
@@ -136,3 +154,88 @@ export function HeaderDisplay({
     </>
   )
 }
+
+function ConditionalDisplay({
+  conditional,
+  bgt = 'normal',
+  setConditional,
+}: {
+  conditional: Conditional
+  bgt?: CardBackgroundColor
+  setConditional: SetConditionalFunc
+}) {
+  const { header, fields } = conditional
+  return (
+    <CardThemed bgt={bgt}>
+      {!!header && <HeaderDisplay header={header} />}
+      <ConditionalSelector
+        conditional={conditional}
+        setConditional={setConditional}
+      />
+      {!!fields && <FieldsDisplay bgt={bgt} fields={fields} />}
+    </CardThemed>
+  )
+}
+function ConditionalSelector({
+  conditional,
+  setConditional,
+}: {
+  conditional: Conditional
+  setConditional: SetConditionalFunc
+}) {
+  switch (conditional.metadata.type) {
+    case 'bool':
+      return (
+        <BoolConditional
+          conditional={conditional}
+          setConditional={setConditional}
+        />
+      )
+    //TODO: case 'list' and 'num'
+    default:
+      return null
+  }
+}
+function BoolConditional({
+  conditional,
+  setConditional,
+}: {
+  conditional: Conditional
+  setConditional: SetConditionalFunc
+}) {
+  const calc = useContext(CalcContext)
+  const { label, badge } = conditional
+  const { sheet: sheetKey, name: condKey } = conditional.metadata
+  if (!sheetKey || !condKey) throw new Error('metadata missing')
+  const srcKey = 'all'
+  const conditionalValue = calc?.compute(
+    read(
+      {
+        et: 'own',
+        qt: 'cond',
+        sheet: sheetKey,
+        q: condKey,
+        src: srcKey,
+        dst: calc.cache.tag.src,
+      },
+      'max'
+    )
+  ).val
+  return (
+    <Button
+      fullWidth
+      size="small"
+      sx={{ borderRadius: 0 }}
+      color={conditionalValue ? 'success' : 'primary'}
+      onClick={() =>
+        setConditional(srcKey, sheetKey, condKey, +!conditionalValue)
+      }
+      // disabled={disabled}
+      startIcon={
+        conditionalValue ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />
+      }
+    >
+      {label} {badge}
+    </Button>
+  )
+}

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

@@ -1,7 +1,15 @@
-import type { Tag } from '@genshin-optimizer/pando/engine'
+import type { ReactNode } from 'react'
 import type { Field } from './field'
+import type { Header } from './header'
 
 export type Conditional = {
-  tag: Tag
-  fields: Field[]
+  metadata: {
+    // TODO: hoist IConditionalData of gi/sr meta.ts to be accessible here
+    type: 'bool' | 'list' | 'num'
+    [x: string]: string | null
+  }
+  label: ReactNode
+  badge?: ReactNode
+  header?: Header
+  fields?: Field[]
 }

libs/sr/assets/src/index.ts

@@ -8,7 +8,7 @@ import type {
 import chars from './gen/chars'
 import lightCones from './gen/lightCones'
 import relics from './gen/relics'
-type characterAssetKey = 'icon' | 'basic_0'
+type characterAssetKey = 'icon' | 'basic_0' | 'skill_0'
 export function characterAsset(
   ck: NonTrailblazerCharacterKey | TrailblazerGenderedKey,
   asset: characterAssetKey

libs/sr/db/src/Types/conditional.ts

@@ -4,15 +4,15 @@ import type {
   RelicSetKey,
 } from '@genshin-optimizer/sr/consts'
 
-export type CondKey = CharacterKey | RelicSetKey | LightConeKey
+type SheetKey = CharacterKey | RelicSetKey | LightConeKey
 // Stored per-char loadout, so the dst is assumed to be the owning char
-// CharKey is the srcKey
-// CondKey is the SheetKey
-// key is the condKey
+// CharKey|'all' is the srcKey
+// SheetKey is the SheetKey
+// condkey is the condKey
 // value is the condValue
 export type ConditionalValues = Partial<
   Record<
     CharacterKey | 'all',
-    Partial<Record<CondKey, { [key: string]: string }>>
+    Partial<Record<SheetKey, { [condkey: string]: number }>>
   >
 >

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

@@ -1,7 +1,8 @@
+import { ImgIcon, SqBadge } from '@genshin-optimizer/common/ui'
 import type { UISheet } from '@genshin-optimizer/pando/ui-sheet'
 import { characterAsset } from '@genshin-optimizer/sr/assets'
 import type { CharacterKey } from '@genshin-optimizer/sr/consts'
-import { formulas, own } from '@genshin-optimizer/sr/formula'
+import { conditionals, formulas, own } from '@genshin-optimizer/sr/formula'
 import { getInterpolateObject } from '@genshin-optimizer/sr/stats'
 import { trans } from '../../util'
 import type { TalentSheetElementKey } from '../consts'
@@ -33,6 +34,35 @@ const sheet: UISheet<TalentSheetElementKey> = {
       },
     ],
   },
+  skill: {
+    name: chg('abilities.skill.0.name'),
+    img: characterAsset(key, 'skill_0'),
+    documents: [
+      {
+        type: 'text',
+        text: (calculator) => {
+          const basicLevel = calculator.compute(own.char.basic).val
+          return chg(
+            `abilities.skill.0.fullDesc`,
+            getInterpolateObject(key, 'skill', basicLevel)
+          )
+        },
+      },
+      {
+        type: 'conditional',
+        conditional: {
+          header: {
+            icon: <ImgIcon src={characterAsset(key, 'skill_0')} />,
+            text: 'skill active',
+            additional: <SqBadge>Skill</SqBadge>,
+          },
+          metadata: conditionals.RuanMei.skillOvertone,
+          label: 'Overtone',
+          fields: [{ title: 'Duration', fieldValue: 3 }],
+        },
+      },
+    ],
+  },
 }
 
 export default sheet

libs/sr/page-team/src/TeammateDisplay/Tabs/TalentContent.tsx

@@ -4,7 +4,7 @@ import {
   DropdownButton,
   NextImage,
 } from '@genshin-optimizer/common/ui'
-import { range } from '@genshin-optimizer/common/util'
+import { layeredAssignment, range } from '@genshin-optimizer/common/util'
 import type { UISheetElement } from '@genshin-optimizer/pando/ui-sheet'
 import { DocumentDisplay } from '@genshin-optimizer/pando/ui-sheet'
 import { maxEidolonCount } from '@genshin-optimizer/sr/consts'
@@ -14,7 +14,11 @@ import {
   useSrCalcContext,
   type TalentSheetElementKey,
 } from '@genshin-optimizer/sr/formula-ui'
-import { useLoadoutContext } from '@genshin-optimizer/sr/ui'
+import {
+  LoadoutContext,
+  useDatabaseContext,
+  useLoadoutContext,
+} from '@genshin-optimizer/sr/ui'
 import {
   Box,
   CardActionArea,
@@ -26,7 +30,7 @@ import {
   useTheme,
 } from '@mui/material'
 import type { ReactNode } from 'react'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const talentSpacing = {
@@ -86,7 +90,6 @@ export default function CharacterTalentPane() {
   //   ]
   // )
   const characterSheet = uiSheets[characterKey]
-  console.log({ characterSheet, calc })
   if (!characterSheet || !calc) return
   return (
     <>
@@ -278,6 +281,23 @@ function SkillDisplayCard({
   //   return false
   // }
 
+  const { loadoutId } = useContext(LoadoutContext)
+  const { database } = useDatabaseContext()
+  const setConditional = useCallback(
+    (srcKey: string, sheetKey: string, condKey: string, condValue: number) => {
+      database.loadouts.set(loadoutId, (loadout) => {
+        loadout = structuredClone(loadout)
+        layeredAssignment(
+          loadout.conditional,
+          [srcKey, sheetKey, condKey],
+          condValue
+        )
+        return loadout
+      })
+    },
+    [database, loadoutId]
+  )
+
   return (
     <CardThemed bgt="light" sx={{ height: '100%' }}>
       {header}
@@ -307,6 +327,7 @@ function SkillDisplayCard({
             document={doc}
             collapse
             // hideHeader={hideHeader}
+            setConditional={setConditional}
           />
         ))}
       </CardContent>