From fc82a512f3760d87ad319e8589e49c4e4b6108fd Mon Sep 17 00:00:00 2001 From: frzyc Date: Fri, 15 Nov 2024 23:02:22 -0500 Subject: [PATCH 1/6] move combo editor, refactor context --- libs/sr/page-team/src/BonusStats.tsx | 4 +- libs/sr/page-team/src/BuildsDisplay.tsx | 12 +- libs/sr/page-team/src/ComboEditor.tsx | 67 +++---- .../src/Optimize/GeneratedBuildsDisplay.tsx | 8 +- libs/sr/page-team/src/Optimize/index.tsx | 11 +- libs/sr/page-team/src/TalentContent.tsx | 14 +- .../page-team/src/TeamCharacterSelector.tsx | 173 +++--------------- libs/sr/page-team/src/TeamNameCardHeader.tsx | 116 ++++++++++++ libs/sr/page-team/src/TeammateDisplay.tsx | 14 +- libs/sr/page-team/src/context/TeamContext.ts | 4 +- .../page-team/src/context/TeammateContext.ts | 11 ++ libs/sr/page-team/src/context/index.ts | 1 + libs/sr/page-team/src/index.tsx | 112 ++++++------ 13 files changed, 262 insertions(+), 285 deletions(-) create mode 100644 libs/sr/page-team/src/TeamNameCardHeader.tsx create mode 100644 libs/sr/page-team/src/context/TeammateContext.ts diff --git a/libs/sr/page-team/src/BonusStats.tsx b/libs/sr/page-team/src/BonusStats.tsx index 8b72b3fa55..259ca0ddbc 100644 --- a/libs/sr/page-team/src/BonusStats.tsx +++ b/libs/sr/page-team/src/BonusStats.tsx @@ -23,7 +23,7 @@ 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() @@ -47,8 +47,8 @@ function BonusStatsModal({ 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) diff --git a/libs/sr/page-team/src/BuildsDisplay.tsx b/libs/sr/page-team/src/BuildsDisplay.tsx index fa5c32f6af..fbde7bb64e 100644 --- a/libs/sr/page-team/src/BuildsDisplay.tsx +++ b/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( () => ({ diff --git a/libs/sr/page-team/src/ComboEditor.tsx b/libs/sr/page-team/src/ComboEditor.tsx index bb81a82b31..12b0c44978 100644 --- a/libs/sr/page-team/src/ComboEditor.tsx +++ b/libs/sr/page-team/src/ComboEditor.tsx @@ -26,50 +26,39 @@ export function ComboEditor() { const { database } = useDatabaseContext() const { team, teamId } = useTeamContext() return ( - - - - - {team.frames.map((frame, i) => ( - - database.teams.set(teamId, (team) => { - team.frames = [...team.frames] - team.frames[i] = read - }) - } - /> - ))} - - - database.teams.set(teamId, (team) => { - team.frames = [...team.frames, tag] - }) - } - /> - - - + {team.frames.map((frame, i) => ( + + database.teams.set(teamId, (team) => { + team.frames = [...team.frames] + team.frames[i] = read + }) + } + /> + ))} + + + database.teams.set(teamId, (team) => { + team.frames = [...team.frames, tag] + }) + } + /> + + ) } -function Team({ +function Combo({ tag, index, setTarget, diff --git a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx index 63fd2a2f72..8381c9704c 100644 --- a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx +++ b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx @@ -22,7 +22,7 @@ import type { FormEventHandler } from 'react' import { memo, useContext, useState } from 'react' import { useTranslation } from 'react-i18next' import { EquipRow } from '../BuildsDisplay' -import { useTeamContext } from '../context' +import { useTeamContext, useTeammateContext } from '../context' import { OptConfigContext } from './OptConfigWrapper' function useGeneratedBuildList(listId: string) { @@ -81,10 +81,8 @@ function NewBuildButton({ const [toTCBuild, setToTCBuild] = useState(false) const { database } = useDatabaseContext() - const { - teamId, - teammateDatum: { characterKey }, - } = useTeamContext() + const { teamId } = useTeamContext() + const { characterKey } = useTeammateContext() const toNewBuild: FormEventHandler = (e) => { e.preventDefault() diff --git a/libs/sr/page-team/src/Optimize/index.tsx b/libs/sr/page-team/src/Optimize/index.tsx index 343581f4fb..806c038051 100644 --- a/libs/sr/page-team/src/Optimize/index.tsx +++ b/libs/sr/page-team/src/Optimize/index.tsx @@ -30,7 +30,7 @@ import { useState, } from 'react' import { useTranslation } from 'react-i18next' -import { TeamContext } from '../context' +import { TeamContext, useTeammateContext } from '../context' import GeneratedBuildsDisplay from './GeneratedBuildsDisplay' import OptConfigProvider, { OptConfigContext } from './OptConfigWrapper' import { StatFilterCard } from './StatFilterCard' @@ -38,7 +38,8 @@ import { WorkerSelector } from './WorkerSelector' export default function Optimize() { const { database } = useDatabaseContext() - const { teammateDatum, teamId } = useContext(TeamContext) + const { teamId } = useContext(TeamContext) + const teammateDatum = useTeammateContext() const optConfigId = teammateDatum.optConfigId const createOptConfig = useCallback(() => { if (optConfigId) return @@ -79,10 +80,8 @@ function OptimizeWrapper() { const { database } = useDatabaseContext() const calc = useSrCalcContext() - const { - team, - teammateDatum: { characterKey }, - } = useContext(TeamContext) + const { team } = useContext(TeamContext) + const { characterKey } = useTeammateContext() const [numWorkers, setNumWorkers] = useState(8) const [progress, setProgress] = useState( undefined diff --git a/libs/sr/page-team/src/TalentContent.tsx b/libs/sr/page-team/src/TalentContent.tsx index cc9598b2bd..fcdae725a4 100644 --- a/libs/sr/page-team/src/TalentContent.tsx +++ b/libs/sr/page-team/src/TalentContent.tsx @@ -33,7 +33,7 @@ import { import type { ReactNode } from 'react' import { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' -import { useTeamContext } from './context' +import { useTeammateContext } from './context' const talentSpacing = { xs: 12, @@ -42,9 +42,7 @@ const talentSpacing = { } export default function CharacterTalentPane() { - const { - teammateDatum: { characterKey }, - } = useTeamContext() + const { characterKey } = useTeammateContext() const calc = useSrCalcContext() const { database } = useDatabaseContext() // TODO: for TC overrides @@ -241,9 +239,7 @@ function SkillDisplayCard({ talentKey, onClickTitle, }: SkillDisplayCardProps) { - const { - teammateDatum: { characterKey }, - } = useTeamContext() + const { characterKey } = useTeammateContext() const actionWrapperFunc = useCallback( (children: ReactNode) => ( {children} @@ -333,9 +329,7 @@ function SkillDisplayCard({ export function EidolonDropdown({ eidolon }: { eidolon: number }) { const { t } = useTranslation('characters_gen') - const { - teammateDatum: { characterKey }, - } = useTeamContext() + const { characterKey } = useTeammateContext() const { database } = useDatabaseContext() return ( { - database.teams.set(teamId, { name: teamName }) - } - - const handleDesc = (teamDesc: string): void => { - database.teams.set(teamId, { description: teamDesc }) - } + const team = useTeam(teamId) + if (!team) return null return ( - { return { borderBottom: '1px rgb(200,200,200,0.3) solid', @@ -72,111 +41,29 @@ export function TeamCharacterSelector({ } }} > - setEditMode(true)}> - - - - - {t('team.editNameDesc')} - - - {!!team.description && ( - {team.description} - )} - - } - > - - - - {team.name} - - - - - setEditMode(false)}> - - } - titleTypographyProps={{ variant: 'h6' }} - action={ - setEditMode(false)}> - - + {team.teamMetadata.map((teammateDatum, ind) => { + const characterKey = teammateDatum?.characterKey + return ( + } + iconPosition="start" + value={characterKey ?? ind} + key={ind} + disabled={!teammateDatum} + label={ + characterKey ? ( + {t(`charNames_gen:${characterKey}`)} + ) : ( + `Character ${ind + 1}` // TODO: Translation + ) + } + onClick={() => + // conserve the current tab when switching to another character + characterKey && navigate(`/teams/${teamId}/${characterKey}`) } /> - - - - handleName(teamName)} - autoFocus - /> - handleDesc(teamDesc)} - multiline - minRows={4} - /> - - - - - - - - {team.teamMetadata.map((teammateDatum, ind) => { - const characterKey = teammateDatum?.characterKey - return ( - } - iconPosition="start" - value={characterKey ?? ind} - key={ind} - disabled={!teammateDatum} - label={ - characterKey ? ( - {t(`charNames_gen:${characterKey}`)} - ) : ( - `Character ${ind + 1}` // TODO: Translation - ) - } - onClick={() => - // conserve the current tab when switching to another character - characterKey && navigate(`/teams/${teamId}/${characterKey}`) - } - /> - ) - })} - - + ) + })} + ) } diff --git a/libs/sr/page-team/src/TeamNameCardHeader.tsx b/libs/sr/page-team/src/TeamNameCardHeader.tsx new file mode 100644 index 0000000000..80bf2e7ab7 --- /dev/null +++ b/libs/sr/page-team/src/TeamNameCardHeader.tsx @@ -0,0 +1,116 @@ +import { + BootstrapTooltip, + CardThemed, + ModalWrapper, + TextFieldLazy, +} from '@genshin-optimizer/common/ui' +import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui' +import BorderColorIcon from '@mui/icons-material/BorderColor' +import CloseIcon from '@mui/icons-material/Close' +import GroupsIcon from '@mui/icons-material/Groups' +import { + Box, + CardActionArea, + CardContent, + CardHeader, + Divider, + IconButton, + Typography, +} from '@mui/material' +import { useState } from 'react' +import { useTranslation } from 'react-i18next' +import TeamSelectors from './TeamSelectors' +import { useTeamContext } from './context' +export default function TeamNameCardHeader() { + const { t } = useTranslation('page_team') + const { teamId, team } = useTeamContext() + const { database } = useDatabaseContext() + const [editMode, setEditMode] = useState(false) + + const handleName = (teamName: string): void => { + database.teams.set(teamId, { name: teamName }) + } + + const handleDesc = (teamDesc: string): void => { + database.teams.set(teamId, { description: teamDesc }) + } + return ( + <> + setEditMode(true)}> + + + + + {t('team.editNameDesc')} + + + {!!team.description && ( + {team.description} + )} + + } + > + + + + {team.name} + + + + + setEditMode(false)}> + + } + titleTypographyProps={{ variant: 'h6' }} + action={ + setEditMode(false)}> + + + } + /> + + + + handleName(teamName)} + autoFocus + /> + handleDesc(teamDesc)} + multiline + minRows={4} + /> + + + + + + + ) +} diff --git a/libs/sr/page-team/src/TeammateDisplay.tsx b/libs/sr/page-team/src/TeammateDisplay.tsx index 1a9825772e..fac83ec0ae 100644 --- a/libs/sr/page-team/src/TeammateDisplay.tsx +++ b/libs/sr/page-team/src/TeammateDisplay.tsx @@ -29,15 +29,12 @@ import { } from '@mui/material' import { useEffect, useMemo, useState } from 'react' import { BuildsDisplay, EquipRow, EquipRowTC } from './BuildsDisplay' -import { ComboEditor } from './ComboEditor' -import { useTeamContext } from './context' +import { useTeammateContext } from './context' import Optimize from './Optimize' import CharacterTalentPane from './TalentContent' export default function TeammateDisplay() { - const { - teammateDatum: { characterKey, buildType }, - } = useTeamContext() + const { characterKey, buildType } = useTeammateContext() const character = useCharacterContext() const [editorKey, setCharacterKey] = useState( undefined @@ -62,7 +59,6 @@ export default function TeammateDisplay() { - {buildType !== 'tc' && } @@ -70,7 +66,7 @@ export default function TeammateDisplay() { ) } function CurrentBuildDisplay() { - const { teammateDatum } = useTeamContext() + const teammateDatum = useTeammateContext() const { database } = useDatabaseContext() const { buildType, buildId, buildTcId } = teammateDatum const [dbDirty, setDbDirty] = useForceUpdate() @@ -107,7 +103,7 @@ function CurrentBuildDisplay() { ) } function BuildDisplay() { - const { teammateDatum } = useTeamContext() + const teammateDatum = useTeammateContext() const { database } = useDatabaseContext() const { relicIds, lightConeId } = useMemo( () => database.teams.getTeamActiveBuild(teammateDatum), @@ -116,7 +112,7 @@ function BuildDisplay() { return } function BuildTCDisplay() { - const { teammateDatum } = useTeamContext() + const teammateDatum = useTeammateContext() if (teammateDatum.buildType !== 'tc') return null return } diff --git a/libs/sr/page-team/src/context/TeamContext.ts b/libs/sr/page-team/src/context/TeamContext.ts index 5f301d5f74..a3d47ac0ee 100644 --- a/libs/sr/page-team/src/context/TeamContext.ts +++ b/libs/sr/page-team/src/context/TeamContext.ts @@ -1,16 +1,14 @@ -import type { Team, TeammateDatum } from '@genshin-optimizer/sr/db' +import type { Team } from '@genshin-optimizer/sr/db' import { createContext, useContext } from 'react' export type TeamContextObj = { teamId: string team: Team - teammateDatum: TeammateDatum } export const TeamContext = createContext({ teamId: '', team: {}, - teammateDatum: { buildType: 'equipped', buildId: '' }, } as TeamContextObj) export function useTeamContext() { diff --git a/libs/sr/page-team/src/context/TeammateContext.ts b/libs/sr/page-team/src/context/TeammateContext.ts new file mode 100644 index 0000000000..3ba2cfcb89 --- /dev/null +++ b/libs/sr/page-team/src/context/TeammateContext.ts @@ -0,0 +1,11 @@ +import type { TeammateDatum } from '@genshin-optimizer/sr/db' +import { createContext, useContext } from 'react' + +export const TeammateContext = createContext({ + buildType: 'equipped', + buildId: '', +} as TeammateDatum) + +export function useTeammateContext() { + return useContext(TeammateContext) +} diff --git a/libs/sr/page-team/src/context/index.ts b/libs/sr/page-team/src/context/index.ts index f760c4e8c0..d1613bf3a7 100644 --- a/libs/sr/page-team/src/context/index.ts +++ b/libs/sr/page-team/src/context/index.ts @@ -1,2 +1,3 @@ export * from './PresetContext' export * from './TeamContext' +export * from './TeammateContext' diff --git a/libs/sr/page-team/src/index.tsx b/libs/sr/page-team/src/index.tsx index 2274b524c9..210b1504be 100644 --- a/libs/sr/page-team/src/index.tsx +++ b/libs/sr/page-team/src/index.tsx @@ -27,7 +27,7 @@ import { type Tag, } from '@genshin-optimizer/sr/formula' import { CharacterName } from '@genshin-optimizer/sr/ui' -import { Box, Skeleton } from '@mui/material' +import { Box, Divider, Skeleton } from '@mui/material' import { Suspense, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { @@ -38,11 +38,14 @@ import { useNavigate, useParams, } from 'react-router-dom' +import { ComboEditor } from './ComboEditor' +import type { PresetContextObj } from './context' +import { PresetContext, TeamContext } from './context' +import { TeammateContext, useTeammateContext } from './context/TeammateContext' import { TeamCalcProvider } from './TeamCalcProvider' import { TeamCharacterSelector } from './TeamCharacterSelector' import TeammateDisplay from './TeammateDisplay' -import type { PresetContextObj, TeamContextObj } from './context' -import { PresetContext, TeamContext, useTeamContext } from './context' +import TeamNameCardHeader from './TeamNameCardHeader' const fallback = @@ -120,14 +123,13 @@ function Page({ teamId }: { teamId: string }) { }, [characterKey, t, team.name]) ) - const teamContextObj: TeamContextObj | undefined = useMemo(() => { - if (!teamId || !team || !teammateDatum) return undefined - return { + const teamContextObj = useMemo( + () => ({ teamId, team, - teammateDatum, - } - }, [teammateDatum, team, teamId]) + }), + [team, teamId] + ) const srcDstDisplayContextValue = useMemo(() => { const charList = team.teamMetadata .filter(notEmpty) @@ -182,67 +184,57 @@ function Page({ teamId }: { teamId: string }) { [characterKey, presetIndex] ) return ( - - - - - - - - + + + + + + + - - - { - // const elementKey = characterKey && allStats.char[characterKey] - // if (!elementKey) return {} - // const hex = theme.palette[elementKey].main as string - // const color = hexToColor(hex) - // if (!color) return {} - // const rgba = colorToRgbaString(color, 0.1) - // return { - // background: `linear-gradient(to bottom, ${rgba} 0%, rgba(0,0,0,0)) 25%`, - // } - // }} - > - {teamContextObj && ( - + + + + + + + + {teammateDatum && ( + - + )} - - - - - - - + + + + + + + ) } function TeammateDisplayWrapper() { - const { - teammateDatum: { characterKey }, - } = useTeamContext() + const { characterKey } = useTeammateContext() const character = useCharacter(characterKey) if (!character) return From 640e0d9a66f0b60744a9f7a1e2f96717d7022d4c Mon Sep 17 00:00:00 2001 From: frzyc Date: Mon, 25 Nov 2024 19:41:43 -0500 Subject: [PATCH 2/6] combo editor modal --- libs/sr/page-team/src/ComboEditor.tsx | 104 ++++++++++++++++++-------- 1 file changed, 73 insertions(+), 31 deletions(-) diff --git a/libs/sr/page-team/src/ComboEditor.tsx b/libs/sr/page-team/src/ComboEditor.tsx index 12b0c44978..c96578e781 100644 --- a/libs/sr/page-team/src/ComboEditor.tsx +++ b/libs/sr/page-team/src/ComboEditor.tsx @@ -1,11 +1,11 @@ import { useBoolState } from '@genshin-optimizer/common/react-util' -import { - CardThemed, - ConditionalWrapper, - ModalWrapper, -} from '@genshin-optimizer/common/ui' +import { CardThemed, ModalWrapper } from '@genshin-optimizer/common/ui' +import { getUnitStr, valueString } from '@genshin-optimizer/common/util' +import { TagContext } from '@genshin-optimizer/pando/ui-sheet' import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui' -import { type Tag } from '@genshin-optimizer/sr/formula' +import { Read, type Tag } from '@genshin-optimizer/sr/formula' +import { useSrCalcContext } from '@genshin-optimizer/sr/ui' +import CloseIcon from '@mui/icons-material/Close' import { Box, Button, @@ -13,12 +13,13 @@ import { CardContent, CardHeader, Divider, - Stack, + IconButton, + Typography, } from '@mui/material' -import { useContext } from 'react' -import { BonusStats } from './BonusStats' +import { useCallback, useContext } from 'react' import { PresetContext, useTeamContext } from './context' import { LightConeSheetsDisplay } from './LightConeSheetsDisplay' +import { OptimizationTargetDisplay } from './Optimize/OptimizationTargetDisplay' import { OptimizationTargetSelector } from './Optimize/OptimizationTargetSelector' import { RelicSheetsDisplay } from './RelicSheetsDisplay' @@ -68,6 +69,20 @@ function Combo({ setTarget(tag: Tag): void }) { const { presetIndex, setPresetIndex } = useContext(PresetContext) + const calc = useSrCalcContext() + const tagcontext = useContext(TagContext) + const value = calc?.withTag(tagcontext).compute(new Read(tag, 'sum')).val ?? 0 + const unit = getUnitStr(tag.q ?? '') + const [open, onOpen, onClose] = useBoolState() + + const handleClick = useCallback(() => { + if (presetIndex === index) { + onOpen() + } else { + onClose() + setPresetIndex(index) + } + }, [index, onClose, onOpen, presetIndex, setPresetIndex]) return ( - ( - setPresetIndex(index)}> - {children} - - )} - > - - - - - - - - - - - + + + + {index + 1} + + + + + + + + + X x {valueString(value, unit)} + + ) } @@ -129,3 +137,37 @@ function LightConeConditionals() { ) } +function ComboEditorModal({ + index, + show, + onClose, +}: { + index: number + show: boolean + onClose: () => void +}) { + return ( + + + {/* TODO: translation */} + + + + } + /> + + + + + + + + ) +} From 0d4a07ef2689121d9df952fbf8cf64ce047378f0 Mon Sep 17 00:00:00 2001 From: frzyc Date: Tue, 26 Nov 2024 21:52:25 -0500 Subject: [PATCH 3/6] update combo editor --- .../Database/DataManagers/TeamDataManager.ts | 26 +++- libs/sr/page-team/src/ComboEditor.tsx | 143 ++++++++++++------ .../page-team/src/LightConeSheetsDisplay.tsx | 19 +-- libs/sr/page-team/src/RelicSheetsDisplay.tsx | 19 +-- libs/sr/solver/src/solver.ts | 7 +- 5 files changed, 141 insertions(+), 73 deletions(-) diff --git a/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts b/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts index e3f62086c3..07443797e1 100644 --- a/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts +++ b/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,6 +38,11 @@ export type TeammateDatum = { optConfigId?: string } +export type Frame = { + tag: Tag + multiplier: number + description?: string +} export interface Team { name: string description: string @@ -44,7 +50,7 @@ export interface Team { lastEdit: number // frames, store data as a "sparse 2d array" - frames: Array + frames: Array 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 @@ -170,7 +180,17 @@ export class TeamDataManager extends DataManager { 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 = [] diff --git a/libs/sr/page-team/src/ComboEditor.tsx b/libs/sr/page-team/src/ComboEditor.tsx index c96578e781..797e7b9e24 100644 --- a/libs/sr/page-team/src/ComboEditor.tsx +++ b/libs/sr/page-team/src/ComboEditor.tsx @@ -1,11 +1,17 @@ import { useBoolState } from '@genshin-optimizer/common/react-util' -import { CardThemed, ModalWrapper } from '@genshin-optimizer/common/ui' +import { + CardThemed, + ModalWrapper, + NumberInputLazy, +} from '@genshin-optimizer/common/ui' import { getUnitStr, valueString } from '@genshin-optimizer/common/util' import { TagContext } from '@genshin-optimizer/pando/ui-sheet' +import type { Frame } from '@genshin-optimizer/sr/db' import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui' -import { Read, type Tag } from '@genshin-optimizer/sr/formula' +import { Read } from '@genshin-optimizer/sr/formula' import { useSrCalcContext } from '@genshin-optimizer/sr/ui' import CloseIcon from '@mui/icons-material/Close' +import Delete from '@mui/icons-material/Delete' import { Box, Button, @@ -14,9 +20,11 @@ import { CardHeader, Divider, IconButton, + InputAdornment, + Stack, Typography, } from '@mui/material' -import { useCallback, useContext } from 'react' +import { useCallback, useContext, useMemo } from 'react' import { PresetContext, useTeamContext } from './context' import { LightConeSheetsDisplay } from './LightConeSheetsDisplay' import { OptimizationTargetDisplay } from './Optimize/OptimizationTargetDisplay' @@ -36,13 +44,21 @@ export function ComboEditor() { > {team.frames.map((frame, i) => ( + setFrame={(frame) => database.teams.set(teamId, (team) => { team.frames = [...team.frames] - team.frames[i] = read + team.frames[i] = { + ...team.frames[i], + ...frame, + } + }) + } + removeFrame={() => + database.teams.set(teamId, (team) => { + team.frames = team.frames.filter((_, index) => index !== i) }) } /> @@ -51,7 +67,13 @@ export function ComboEditor() { database.teams.set(teamId, (team) => { - team.frames = [...team.frames, tag] + team.frames = [ + ...team.frames, + { + multiplier: 1, + tag, + }, + ] }) } /> @@ -60,19 +82,25 @@ export function ComboEditor() { ) } function Combo({ - tag, + frame, index, - setTarget, + setFrame, + removeFrame, }: { - tag: Tag + frame: Frame index: number - setTarget(tag: Tag): void + setFrame(frame: Partial): void + removeFrame(): void }) { const { presetIndex, setPresetIndex } = useContext(PresetContext) const calc = useSrCalcContext() const tagcontext = useContext(TagContext) - const value = calc?.withTag(tagcontext).compute(new Read(tag, 'sum')).val ?? 0 - const unit = getUnitStr(tag.q ?? '') + const value = useMemo( + () => + calc?.withTag(tagcontext).compute(new Read(frame.tag, 'sum')).val ?? 0, + [calc, frame.tag, tagcontext] + ) + const unit = getUnitStr(frame.tag.q ?? '') const [open, onOpen, onClose] = useBoolState() const handleClick = useCallback(() => { @@ -94,55 +122,46 @@ function Combo({ : undefined, })} > - + {index + 1} - + - X x {valueString(value, unit)} + + {frame.multiplier} x {valueString(value, unit)} + ) } -function RelicConditionals() { - const [show, onShow, onHide] = useBoolState() - return ( - <> - {/* TODO: translation */} - - - - - - ) -} -function LightConeConditionals() { - const [show, onShow, onHide] = useBoolState() - return ( - <> - {/* TODO: translation */} - - - - - - ) -} function ComboEditorModal({ index, + frame, + setFrame, + removeFrame, show, onClose, }: { + frame: Frame index: number + setFrame(frame: Partial): void + removeFrame(): void show: boolean onClose: () => void }) { @@ -152,7 +171,7 @@ function ComboEditorModal({ onClose={onClose} containerProps={{ maxWidth: 'xl' }} > - + {/* TODO: translation */} - - + + + setFrame({ multiplier: v })} + size="small" + InputProps={{ + startAdornment: ( + Multi x + ), + }} + /> + + setFrame({ + tag, + }) + } + /> + + + + Relic Conditionals + + + + Lightcone Conditionals + + + diff --git a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx b/libs/sr/page-team/src/LightConeSheetsDisplay.tsx index d3be76a4c5..8cd2978a4a 100644 --- a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx +++ b/libs/sr/page-team/src/LightConeSheetsDisplay.tsx @@ -1,22 +1,17 @@ -import { CardThemed } from '@genshin-optimizer/common/ui' import type { LightConeKey } from '@genshin-optimizer/sr/consts' -import { CardContent, Grid } from '@mui/material' +import { Grid } from '@mui/material' import { LightConeSheetDisplay } from './LightConeSheetDisplay' // TODO: hardcoded to LightConeSheetsDisplay.tsx for now. Can be expanded to all lightcones with sheets const cones: LightConeKey[] = ['PastSelfInMirror'] as const export function LightConeSheetsDisplay() { return ( - - - - {cones.map((lcKey) => ( - - - - ))} + + {cones.map((lcKey) => ( + + - - + ))} + ) } diff --git a/libs/sr/page-team/src/RelicSheetsDisplay.tsx b/libs/sr/page-team/src/RelicSheetsDisplay.tsx index 4346a81698..78816d2c19 100644 --- a/libs/sr/page-team/src/RelicSheetsDisplay.tsx +++ b/libs/sr/page-team/src/RelicSheetsDisplay.tsx @@ -1,22 +1,17 @@ -import { CardThemed } from '@genshin-optimizer/common/ui' import type { RelicSetKey } from '@genshin-optimizer/sr/consts' -import { CardContent, Grid } from '@mui/material' +import { Grid } from '@mui/material' import { RelicSheetDisplay } from './RelicSheetDisplay' // TODO: hardcoded to RelicSheetsDisplay.tsx for now. Can be expanded to all relic sets with sheets const sets: RelicSetKey[] = ['WatchmakerMasterOfDreamMachinations'] as const export function RelicSheetsDisplay() { return ( - - - - {sets.map((setKey) => ( - - - - ))} + + {sets.map((setKey) => ( + + - - + ))} + ) } diff --git a/libs/sr/solver/src/solver.ts b/libs/sr/solver/src/solver.ts index dac0a10c84..c16b1dedcb 100644 --- a/libs/sr/solver/src/solver.ts +++ b/libs/sr/solver/src/solver.ts @@ -1,4 +1,4 @@ -import { detach, sum } from '@genshin-optimizer/pando/engine' +import { detach, prod, sum } from '@genshin-optimizer/pando/engine' import type { CharacterKey, RelicSlotKey } from '@genshin-optimizer/sr/consts' import { allLightConeKeys, allRelicSetKeys } from '@genshin-optimizer/sr/consts' import type { @@ -134,7 +134,10 @@ export class Solver { // team sum( ...this.frames.map((frame, i) => - new Read(frame, 'sum').with('preset', `preset${i}` as Preset) + prod( + frame.multiplier, + new Read(frame.tag, 'sum').with('preset', `preset${i}` as Preset) + ) ) ), // stat filters From 9c445b628026a196a2ea8d492490fb12c310aef5 Mon Sep 17 00:00:00 2001 From: frzyc Date: Wed, 27 Nov 2024 04:24:47 -0500 Subject: [PATCH 4/6] split up combo editor into the teammate view --- libs/common/ui/src/hooks/index.ts | 1 + libs/common/ui/src/hooks/useScrollRef.tsx | 10 ++ .../Tabs/TabOverview/index.tsx | 10 +- libs/sr/formula-ui/src/lightCone/util.tsx | 8 +- libs/sr/page-team/src/BonusStats.tsx | 74 +++----- libs/sr/page-team/src/ComboEditor.tsx | 157 ++--------------- .../page-team/src/LightConeSheetDisplay.tsx | 3 +- .../page-team/src/TeamCharacterSelector.tsx | 21 ++- libs/sr/page-team/src/TeamHeader.tsx | 41 +++++ libs/sr/page-team/src/TeamNameCardHeader.tsx | 1 + libs/sr/page-team/src/TeammateDisplay.tsx | 161 +++++++++++++++++- libs/sr/page-team/src/index.tsx | 50 +++--- 12 files changed, 295 insertions(+), 242 deletions(-) create mode 100644 libs/common/ui/src/hooks/useScrollRef.tsx create mode 100644 libs/sr/page-team/src/TeamHeader.tsx diff --git a/libs/common/ui/src/hooks/index.ts b/libs/common/ui/src/hooks/index.ts index 71019af6c2..35a2b955b6 100644 --- a/libs/common/ui/src/hooks/index.ts +++ b/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' diff --git a/libs/common/ui/src/hooks/useScrollRef.tsx b/libs/common/ui/src/hooks/useScrollRef.tsx new file mode 100644 index 0000000000..ee1e478b00 --- /dev/null +++ b/libs/common/ui/src/hooks/useScrollRef.tsx @@ -0,0 +1,10 @@ +import { useCallback, useRef } from 'react' + +export function useScrollRef() { + const scrollRef = useRef() + const onScroll = useCallback( + () => scrollRef.current?.scrollIntoView({ behavior: 'smooth' }), + [scrollRef] + ) + return [scrollRef, onScroll] as const +} diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/index.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/index.tsx index 69c2cedfd6..3e4ced6a81 100644 --- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/index.tsx +++ b/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() - const onScroll = useCallback( - () => scrollRef?.current?.scrollIntoView?.({ behavior: 'smooth' }), - [scrollRef] - ) + const [scrollRef, onScroll] = useScrollRef() const data = useContext(DataContext) const compareData = useCompareData() diff --git a/libs/sr/formula-ui/src/lightCone/util.tsx b/libs/sr/formula-ui/src/lightCone/util.tsx index afcd3d2f6c..7f33e822ac 100644 --- a/libs/sr/formula-ui/src/lightCone/util.tsx +++ b/libs/sr/formula-ui/src/lightCone/util.tsx @@ -1,5 +1,3 @@ -import { own } from '@genshin-optimizer/sr/formula' -import { useSrCalcContext } from '@genshin-optimizer/sr/ui' import type { ReactNode } from 'react' export function SuperImposeWrapper({ @@ -7,7 +5,9 @@ export function SuperImposeWrapper({ }: { 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) } diff --git a/libs/sr/page-team/src/BonusStats.tsx b/libs/sr/page-team/src/BonusStats.tsx index 259ca0ddbc..e9eaac3b6a 100644 --- a/libs/sr/page-team/src/BonusStats.tsx +++ b/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, @@ -25,23 +22,7 @@ import { import { useContext } from 'react' import { PresetContext, useTeamContext, useTeammateContext } from './context' -export function BonusStats() { - const [open, onOpen, onClose] = useBoolState() - return ( - <> - - - - ) -} - -function BonusStatsModal({ - open, - onClose, -}: { - open: boolean - onClose: () => void -}) { +export function BonusStatsSection() { const { database } = useDatabaseContext() const { presetIndex } = useContext(PresetContext) const { @@ -53,34 +34,33 @@ function BonusStatsModal({ const tag = newTag(q, characterKey) database.teams.setBonusStat(teamId, tag, 0, presetIndex) } + if (!presetIndex) return null return ( - - - - - - - {bonusStats.map(({ tag, values }, i) => ( - - database.teams.setBonusStat(teamId, tag, value, presetIndex) - } - onDelete={() => - database.teams.setBonusStat(teamId, tag, 0, presetIndex) - } - setTag={(tag) => - database.teams.setBonusStat(teamId, tag, 0, presetIndex) - } - /> - ))} - - - - - + + + + + + {bonusStats.map(({ tag, values }, i) => ( + + database.teams.setBonusStat(teamId, tag, value, presetIndex) + } + onDelete={() => + database.teams.setBonusStat(teamId, tag, 0, presetIndex) + } + setTag={(tag) => + database.teams.setBonusStat(teamId, tag, 0, presetIndex) + } + /> + ))} + + + + ) } function newTag(q: Tag['q'], member: Member): Tag { diff --git a/libs/sr/page-team/src/ComboEditor.tsx b/libs/sr/page-team/src/ComboEditor.tsx index 797e7b9e24..056e7ff9eb 100644 --- a/libs/sr/page-team/src/ComboEditor.tsx +++ b/libs/sr/page-team/src/ComboEditor.tsx @@ -1,67 +1,31 @@ -import { useBoolState } from '@genshin-optimizer/common/react-util' -import { - CardThemed, - ModalWrapper, - NumberInputLazy, -} from '@genshin-optimizer/common/ui' +import { CardThemed } from '@genshin-optimizer/common/ui' import { getUnitStr, valueString } from '@genshin-optimizer/common/util' import { TagContext } from '@genshin-optimizer/pando/ui-sheet' import type { Frame } from '@genshin-optimizer/sr/db' import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui' import { Read } from '@genshin-optimizer/sr/formula' import { useSrCalcContext } from '@genshin-optimizer/sr/ui' -import CloseIcon from '@mui/icons-material/Close' -import Delete from '@mui/icons-material/Delete' -import { - Box, - Button, - CardActionArea, - CardContent, - CardHeader, - Divider, - IconButton, - InputAdornment, - Stack, - Typography, -} from '@mui/material' +import { Box, CardActionArea, Divider, Typography } from '@mui/material' import { useCallback, useContext, useMemo } from 'react' import { PresetContext, useTeamContext } from './context' -import { LightConeSheetsDisplay } from './LightConeSheetsDisplay' import { OptimizationTargetDisplay } from './Optimize/OptimizationTargetDisplay' import { OptimizationTargetSelector } from './Optimize/OptimizationTargetSelector' -import { RelicSheetsDisplay } from './RelicSheetsDisplay' export function ComboEditor() { const { database } = useDatabaseContext() const { team, teamId } = useTeamContext() return ( - {team.frames.map((frame, i) => ( - - database.teams.set(teamId, (team) => { - team.frames = [...team.frames] - team.frames[i] = { - ...team.frames[i], - ...frame, - } - }) - } - removeFrame={() => - database.teams.set(teamId, (team) => { - team.frames = team.frames.filter((_, index) => index !== i) - }) - } - /> + ))} - + ) } -function Combo({ - frame, - index, - setFrame, - removeFrame, -}: { - frame: Frame - index: number - setFrame(frame: Partial): void - removeFrame(): void -}) { +function Combo({ frame, index }: { frame: Frame; index: number }) { const { presetIndex, setPresetIndex } = useContext(PresetContext) const calc = useSrCalcContext() const tagcontext = useContext(TagContext) @@ -101,16 +55,10 @@ function Combo({ [calc, frame.tag, tagcontext] ) const unit = getUnitStr(frame.tag.q ?? '') - const [open, onOpen, onClose] = useBoolState() const handleClick = useCallback(() => { - if (presetIndex === index) { - onOpen() - } else { - onClose() - setPresetIndex(index) - } - }, [index, onClose, onOpen, presetIndex, setPresetIndex]) + setPresetIndex(index) + }, [index, setPresetIndex]) return ( - {index + 1} @@ -149,80 +89,3 @@ function Combo({ ) } - -function ComboEditorModal({ - index, - frame, - setFrame, - removeFrame, - show, - onClose, -}: { - frame: Frame - index: number - setFrame(frame: Partial): void - removeFrame(): void - show: boolean - onClose: () => void -}) { - return ( - - - {/* TODO: translation */} - - - - } - /> - - - - - setFrame({ multiplier: v })} - size="small" - InputProps={{ - startAdornment: ( - Multi x - ), - }} - /> - - setFrame({ - tag, - }) - } - /> - - - - Relic Conditionals - - - - Lightcone Conditionals - - - - - - - ) -} diff --git a/libs/sr/page-team/src/LightConeSheetDisplay.tsx b/libs/sr/page-team/src/LightConeSheetDisplay.tsx index 6f37befd52..10c0b65364 100644 --- a/libs/sr/page-team/src/LightConeSheetDisplay.tsx +++ b/libs/sr/page-team/src/LightConeSheetDisplay.tsx @@ -1,6 +1,5 @@ import { CardThemed, NextImage } from '@genshin-optimizer/common/ui' -import type { UISheetElement } from '@genshin-optimizer/pando/ui-sheet' -import { DocumentDisplay } from '@genshin-optimizer/pando/ui-sheet' +import { DocumentDisplay, type UISheetElement } from '@genshin-optimizer/pando/ui-sheet' import { lightConeAsset } from '@genshin-optimizer/sr/assets' import type { LightConeKey } from '@genshin-optimizer/sr/consts' import { lightConeUiSheets } from '@genshin-optimizer/sr/formula-ui' diff --git a/libs/sr/page-team/src/TeamCharacterSelector.tsx b/libs/sr/page-team/src/TeamCharacterSelector.tsx index 7c3c2e7480..d9503934b3 100644 --- a/libs/sr/page-team/src/TeamCharacterSelector.tsx +++ b/libs/sr/page-team/src/TeamCharacterSelector.tsx @@ -1,3 +1,8 @@ +import { ImgIcon } from '@genshin-optimizer/common/ui' +import { + characterAsset, + characterKeyToGenderedKey, +} from '@genshin-optimizer/sr/assets' import type { CharacterKey } from '@genshin-optimizer/sr/consts' import { useTeam } from '@genshin-optimizer/sr/db-ui' import PersonIcon from '@mui/icons-material/Person' @@ -38,6 +43,7 @@ export function TeamCharacterSelector({ height: '4px', backgroundColor: 'rgb(200,200,200,0.5)', //team settings }, + minHeight: '1em', } }} > @@ -45,7 +51,19 @@ export function TeamCharacterSelector({ const characterKey = teammateDatum?.characterKey return ( } + icon={ + characterKey ? ( + + ) : ( + + ) + } iconPosition="start" value={characterKey ?? ind} key={ind} @@ -61,6 +79,7 @@ export function TeamCharacterSelector({ // conserve the current tab when switching to another character characterKey && navigate(`/teams/${teamId}/${characterKey}`) } + sx={{ p: 1, minHeight: '1em' }} /> ) })} diff --git a/libs/sr/page-team/src/TeamHeader.tsx b/libs/sr/page-team/src/TeamHeader.tsx new file mode 100644 index 0000000000..e66104b504 --- /dev/null +++ b/libs/sr/page-team/src/TeamHeader.tsx @@ -0,0 +1,41 @@ +import { CardThemed } from '@genshin-optimizer/common/ui' +import type { CharacterKey } from '@genshin-optimizer/sr/consts' +import { Box, Divider } from '@mui/material' +import { createContext, type MutableRefObject } from 'react' +import { ComboEditor } from './ComboEditor' +import { TeamCharacterSelector } from './TeamCharacterSelector' +import TeamNameCardHeader from './TeamNameCardHeader' +export const DEFAULT_HEADER_HEIGHT_PX = 210 +export const HEADER_TOP_PX = 2 +export const TeamHeaderHeightContext = createContext(DEFAULT_HEADER_HEIGHT_PX) +export function TeamHeader({ + teamId, + characterKey, + headerRef, +}: { + teamId: string + characterKey?: CharacterKey + headerRef: MutableRefObject +}) { + return ( + + ({ outline: `solid ${theme.palette.secondary.main}` })} + > + + + + + + + + ) +} diff --git a/libs/sr/page-team/src/TeamNameCardHeader.tsx b/libs/sr/page-team/src/TeamNameCardHeader.tsx index 80bf2e7ab7..20917828b1 100644 --- a/libs/sr/page-team/src/TeamNameCardHeader.tsx +++ b/libs/sr/page-team/src/TeamNameCardHeader.tsx @@ -60,6 +60,7 @@ export default function TeamNameCardHeader() { '&:hover': { color: 'info.light', }, + py: 1, }} > = + useMemo(() => { + const frame = team.frames[presetIndex] + if (!frame) return [['char', 'Character', ]] + return [ + ['combo', `Edit Combo ${presetIndex + 1}`, ], + ['char', 'Character', ], + ['talent', 'Talent', ], + ['relicCond', 'Relic Conditionals', ], + [ + 'lightConeCond', + 'Light Cone Conditionals', + , + ], + ['opt', 'Optimize', ], + ] as const + }, [team, presetIndex]) + + return ( + + + {sections.map(([key, title, content], i) => ( +
+ {content} +
+ ))} + + + ) +} +function Section({ + index, + title, + children, +}: { + index: number + title: React.ReactNode + children: React.ReactNode +}) { + const [charScrollRef, onScroll] = useScrollRef() + const numSections = useContext(SectionNumContext) + const headerHeight = useContext(TeamHeaderHeightContext) + return ( + <> + ({ + outline: `solid ${theme.palette.secondary.main}`, + position: 'sticky', + top: headerHeight + index * SECTION_SPACING_PX, + bottom: BOT_PX + (numSections - 1 - index) * SECTION_SPACING_PX, + zIndex: 100, + })} + > + + {title} + + + + {children} + + + ) +} +function ComboEditorSection() { + const { database } = useDatabaseContext() + const { presetIndex } = useContext(PresetContext) + const { team, teamId } = useTeamContext() + const frame = useMemo(() => team.frames[presetIndex], [team, presetIndex]) + const setFrame = (frame: Partial) => { + database.teams.set(teamId, (team) => { + team.frames = [...team.frames] + team.frames[presetIndex] = { + ...team.frames[presetIndex], + ...frame, + } + }) + } + const removeFrame = () => { + database.teams.set(teamId, (team) => { + team.frames = team.frames.filter((_, index) => index !== presetIndex) + }) + } + if (!frame) return null + return ( + + setFrame({ multiplier: v })} + size="small" + InputProps={{ + startAdornment: ( + Multi x + ), + }} + /> + + setFrame({ + tag, + }) + } + /> + + + ) +} +function CharacterSection() { + const { characterKey } = useTeammateContext() const character = useCharacterContext() const [editorKey, setCharacterKey] = useState( undefined ) - return ( - + @@ -59,12 +198,18 @@ export default function TeammateDisplay() { + - - {buildType !== 'tc' && } ) } + +function OptimizeSection() { + const { buildType } = useTeammateContext() + if (buildType === 'tc') return null + + return +} function CurrentBuildDisplay() { const teammateDatum = useTeammateContext() const { database } = useDatabaseContext() diff --git a/libs/sr/page-team/src/index.tsx b/libs/sr/page-team/src/index.tsx index 210b1504be..17cf822638 100644 --- a/libs/sr/page-team/src/index.tsx +++ b/libs/sr/page-team/src/index.tsx @@ -1,4 +1,4 @@ -import { CardThemed, useTitle } from '@genshin-optimizer/common/ui' +import { useRefSize, useTitle } from '@genshin-optimizer/common/ui' import { moveToFront, notEmpty, @@ -27,7 +27,7 @@ import { type Tag, } from '@genshin-optimizer/sr/formula' import { CharacterName } from '@genshin-optimizer/sr/ui' -import { Box, Divider, Skeleton } from '@mui/material' +import { Box, Skeleton } from '@mui/material' import { Suspense, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { @@ -38,14 +38,17 @@ import { useNavigate, useParams, } from 'react-router-dom' -import { ComboEditor } from './ComboEditor' import type { PresetContextObj } from './context' import { PresetContext, TeamContext } from './context' import { TeammateContext, useTeammateContext } from './context/TeammateContext' import { TeamCalcProvider } from './TeamCalcProvider' -import { TeamCharacterSelector } from './TeamCharacterSelector' +import { + DEFAULT_HEADER_HEIGHT_PX, + HEADER_TOP_PX, + TeamHeader, + TeamHeaderHeightContext, +} from './TeamHeader' import TeammateDisplay from './TeammateDisplay' -import TeamNameCardHeader from './TeamNameCardHeader' const fallback = @@ -183,6 +186,7 @@ function Page({ teamId }: { teamId: string }) { }), [characterKey, presetIndex] ) + const { height, ref } = useRefSize() return ( @@ -200,28 +204,22 @@ function Page({ teamId }: { teamId: string }) { mt: 2, }} > - + - - - - - - - {teammateDatum && ( - - - - )} + {teammateDatum && ( + + + + )} + From a03795e152c308595450b5c75bde25d3a01c9b70 Mon Sep 17 00:00:00 2001 From: frzyc Date: Wed, 27 Nov 2024 04:35:37 -0500 Subject: [PATCH 5/6] format --- libs/sr/page-team/src/LightConeSheetDisplay.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/sr/page-team/src/LightConeSheetDisplay.tsx b/libs/sr/page-team/src/LightConeSheetDisplay.tsx index 10c0b65364..6968e02f5f 100644 --- a/libs/sr/page-team/src/LightConeSheetDisplay.tsx +++ b/libs/sr/page-team/src/LightConeSheetDisplay.tsx @@ -1,5 +1,8 @@ import { CardThemed, NextImage } from '@genshin-optimizer/common/ui' -import { DocumentDisplay, type UISheetElement } from '@genshin-optimizer/pando/ui-sheet' +import { + DocumentDisplay, + type UISheetElement, +} from '@genshin-optimizer/pando/ui-sheet' import { lightConeAsset } from '@genshin-optimizer/sr/assets' import type { LightConeKey } from '@genshin-optimizer/sr/consts' import { lightConeUiSheets } from '@genshin-optimizer/sr/formula-ui' From 4a2a6c0fd6d131dc294652085c546d1e07a484a3 Mon Sep 17 00:00:00 2001 From: frzyc Date: Wed, 27 Nov 2024 13:33:08 -0500 Subject: [PATCH 6/6] Update libs/sr/page-team/src/TeammateDisplay.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- libs/sr/page-team/src/TeammateDisplay.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/libs/sr/page-team/src/TeammateDisplay.tsx b/libs/sr/page-team/src/TeammateDisplay.tsx index f3b0e35766..a21bdc7bda 100644 --- a/libs/sr/page-team/src/TeammateDisplay.tsx +++ b/libs/sr/page-team/src/TeammateDisplay.tsx @@ -59,16 +59,16 @@ export default function TeammateDisplay() { const frame = team.frames[presetIndex] if (!frame) return [['char', 'Character', ]] return [ - ['combo', `Edit Combo ${presetIndex + 1}`, ], - ['char', 'Character', ], - ['talent', 'Talent', ], - ['relicCond', 'Relic Conditionals', ], + ['combo', `Edit Combo ${presetIndex + 1}`, ], + ['char', 'Character', ], + ['talent', 'Talent', ], + ['relicCond', 'Relic Conditionals', ], [ 'lightConeCond', 'Light Cone Conditionals', - , + , ], - ['opt', 'Optimize', ], + ['opt', 'Optimize', ], ] as const }, [team, presetIndex])