Merge 4a2a6c0 into 67e6e0b

libs/common/ui/src/hooks/index.ts

@@ -4,5 +4,6 @@ export * from './useIsMount'
 export * from './useOnScreen'
 export * from './useRefOverflow'
 export * from './useRefSize'
+export * from './useScrollRef'
 export * from './useTitle'
 export * from './useWindowScrollPos'

libs/common/ui/src/hooks/useScrollRef.tsx

@@ -0,0 +1,10 @@
+import { useCallback, useRef } from 'react'
+
+export function useScrollRef() {
+  const scrollRef = useRef<HTMLElement>()
+  const onScroll = useCallback(
+    () => scrollRef.current?.scrollIntoView({ behavior: 'smooth' }),
+    [scrollRef]
+  )
+  return [scrollRef, onScroll] as const
+}

libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/index.tsx

@@ -1,4 +1,4 @@
-import { CardThemed } from '@genshin-optimizer/common/ui'
+import { CardThemed, useScrollRef } from '@genshin-optimizer/common/ui'
 import { allArtifactSlotKeys } from '@genshin-optimizer/gi/consts'
 import {
   ArtifactCardNano,
@@ -10,18 +10,14 @@ import {
 } from '@genshin-optimizer/gi/ui'
 import { uiInput as input } from '@genshin-optimizer/gi/wr'
 import { Box, Grid, Stack } from '@mui/material'
-import { useCallback, useContext, useMemo, useRef } from 'react'
+import { useContext, useMemo } from 'react'
 import CharacterProfileCard from '../../../CharProfileCard'
 import useCompareData from '../../../useCompareData'
 import CompareBtn from '../../CompareBtn'
 import EquipmentSection from './EquipmentSection'
 
 export default function TabOverview() {
-  const scrollRef = useRef<HTMLDivElement>()
-  const onScroll = useCallback(
-    () => scrollRef?.current?.scrollIntoView?.({ behavior: 'smooth' }),
-    [scrollRef]
-  )
+  const [scrollRef, onScroll] = useScrollRef()
 
   const data = useContext(DataContext)
   const compareData = useCompareData()

libs/sr/db/src/Database/DataManagers/TeamDataManager.ts

@@ -1,5 +1,6 @@
 import type { IConditionalData } from '@genshin-optimizer/common/formula'
 import {
+  notEmpty,
   objKeyMap,
   pruneOrPadArray,
   range,
@@ -37,14 +38,19 @@ export type TeammateDatum = {
 
   optConfigId?: string
 }
+export type Frame = {
+  tag: Tag
+  multiplier: number
+  description?: string
+}
 export interface Team {
   name: string
   description: string
 
   lastEdit: number
 
   // frames, store data as a "sparse 2d array"
-  frames: Array<Tag>
+  frames: Array<Frame>
   conditionals: Array<{
     sheet: Sheet
     src: Member
@@ -56,7 +62,11 @@ export interface Team {
     tag: Tag
     values: number[] // should be the same length as `frames`
   }>
-  statConstraints: Array<{ tag: Tag; values: number[]; isMaxs: boolean[] }>
+  statConstraints: Array<{
+    tag: Tag
+    values: number[] // should be the same length as `frames`
+    isMaxs: boolean[] // should be the same length as `frames`
+  }>
 
   // TODO enemy base stats
   teamMetadata: Array<TeammateDatum | undefined>
@@ -170,7 +180,17 @@ export class TeamDataManager extends DataManager<string, 'teams', Team, Team> {
     if (typeof lastEdit !== 'number') lastEdit = Date.now()
 
     if (!Array.isArray(frames)) frames = []
-    frames = frames.filter(validateTag)
+    frames = frames
+      .map((f) => {
+        const { tag } = f
+        let { multiplier, description } = f
+        if (!validateTag(tag)) return undefined
+        if (typeof multiplier !== 'number' || multiplier === 0) multiplier = 1
+        if (typeof description !== 'string') description = undefined
+
+        return { tag, multiplier, description }
+      })
+      .filter(notEmpty)
     const framesLength = frames.length
     if (!framesLength) {
       conditionals = []

libs/sr/formula-ui/src/lightCone/util.tsx

@@ -1,13 +1,13 @@
-import { own } from '@genshin-optimizer/sr/formula'
-import { useSrCalcContext } from '@genshin-optimizer/sr/ui'
 import type { ReactNode } from 'react'
 
 export function SuperImposeWrapper({
   children,
 }: {
   children: (superimpose: number) => ReactNode
 }) {
-  const calc = useSrCalcContext()
-  const superimpose = calc?.compute(own.lightCone.superimpose).val ?? 1
+  // const calc = useSrCalcContext()
+
+  // TODO: FIXME: a character without a lightcone will cause an error
+  const superimpose = 1 // calc?.compute(own.lightCone.superimpose).val ?? 1
   return children(superimpose)
 }

libs/sr/page-team/src/BonusStats.tsx

@@ -1,8 +1,6 @@
-import { useBoolState } from '@genshin-optimizer/common/react-util'
 import {
   CardThemed,
   DropdownButton,
-  ModalWrapper,
   NumberInputLazy,
   SqBadge,
 } from '@genshin-optimizer/common/ui'
@@ -13,7 +11,6 @@ import type { Member, Tag } from '@genshin-optimizer/sr/formula'
 import { tagFieldMap } from '@genshin-optimizer/sr/formula-ui'
 import { DeleteForever } from '@mui/icons-material'
 import {
-  Button,
   CardContent,
   CardHeader,
   Divider,
@@ -23,64 +20,47 @@ import {
   Stack,
 } from '@mui/material'
 import { useContext } from 'react'
-import { PresetContext, useTeamContext } from './context'
+import { PresetContext, useTeamContext, useTeammateContext } from './context'
 
-export function BonusStats() {
-  const [open, onOpen, onClose] = useBoolState()
-  return (
-    <>
-      <Button onClick={onOpen}>Bonus Stats</Button>
-      <BonusStatsModal open={open} onClose={onClose} />
-    </>
-  )
-}
-
-function BonusStatsModal({
-  open,
-  onClose,
-}: {
-  open: boolean
-  onClose: () => void
-}) {
+export function BonusStatsSection() {
   const { database } = useDatabaseContext()
   const { presetIndex } = useContext(PresetContext)
   const {
     teamId,
     team: { bonusStats },
-    teammateDatum: { characterKey },
   } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const newTarget = (q: InitialStats) => {
     const tag = newTag(q, characterKey)
     database.teams.setBonusStat(teamId, tag, 0, presetIndex)
   }
+  if (!presetIndex) return null
   return (
-    <ModalWrapper open={open} onClose={onClose}>
-      <CardThemed>
-        <CardHeader title="Bonus Stats" />
-        <Divider />
-        <CardContent>
-          <Stack spacing={1}>
-            {bonusStats.map(({ tag, values }, i) => (
-              <BonusStatDisplay
-                key={JSON.stringify(tag) + i}
-                tag={tag}
-                value={values[presetIndex]}
-                setValue={(value) =>
-                  database.teams.setBonusStat(teamId, tag, value, presetIndex)
-                }
-                onDelete={() =>
-                  database.teams.setBonusStat(teamId, tag, 0, presetIndex)
-                }
-                setTag={(tag) =>
-                  database.teams.setBonusStat(teamId, tag, 0, presetIndex)
-                }
-              />
-            ))}
-            <InitialStatDropdown onSelect={newTarget} />
-          </Stack>
-        </CardContent>
-      </CardThemed>
-    </ModalWrapper>
+    <CardThemed>
+      <CardHeader title="Bonus Stats" />
+      <Divider />
+      <CardContent>
+        <Stack spacing={1}>
+          {bonusStats.map(({ tag, values }, i) => (
+            <BonusStatDisplay
+              key={JSON.stringify(tag) + i}
+              tag={tag}
+              value={values[presetIndex]}
+              setValue={(value) =>
+                database.teams.setBonusStat(teamId, tag, value, presetIndex)
+              }
+              onDelete={() =>
+                database.teams.setBonusStat(teamId, tag, 0, presetIndex)
+              }
+              setTag={(tag) =>
+                database.teams.setBonusStat(teamId, tag, 0, presetIndex)
+              }
+            />
+          ))}
+          <InitialStatDropdown onSelect={newTarget} />
+        </Stack>
+      </CardContent>
+    </CardThemed>
   )
 }
 function newTag(q: Tag['q'], member: Member): Tag {

libs/sr/page-team/src/BuildsDisplay.tsx

@@ -78,12 +78,10 @@ import {
 } from '@mui/material'
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTeamContext } from './context'
+import { useTeamContext, useTeammateContext } from './context'
 export function BuildsDisplay({ onClose }: { onClose?: () => void }) {
   const { database } = useDatabaseContext()
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const [dbDirty, setDbDirty] = useForceUpdate()
   const [dbTCDirty, setDbTCDirty] = useForceUpdate()
   const buildIds = useMemo(
@@ -145,10 +143,8 @@ function useActiveBuildSwap(
   newBuildId = ''
 ) {
   const { database } = useDatabaseContext()
-  const {
-    teamId,
-    teammateDatum: { characterKey, buildType, buildId, buildTcId },
-  } = useTeamContext()
+  const { characterKey, buildType, buildId, buildTcId } = useTeammateContext()
+  const { teamId } = useTeamContext()
 
   return useMemo(
     () => ({