diff --git a/apps/frontend/src/app/Components/Character/StatDisplayComponent.tsx b/apps/frontend/src/app/Components/Character/StatDisplayComponent.tsx
index 6737fba4..212da9a7 100644
--- a/apps/frontend/src/app/Components/Character/StatDisplayComponent.tsx
+++ b/apps/frontend/src/app/Components/Character/StatDisplayComponent.tsx
@@ -15,7 +15,13 @@ import { FieldDisplayList, NodeFieldDisplay } from '../FieldDisplay'
import ImgIcon from '../Image/ImgIcon'
import SqBadge from '../SqBadge'
-export default function StatDisplayComponent() {
+export default function StatDisplayComponent({
+ index,
+ sortOptions,
+}: {
+ index?: number
+ sortOptions?: { sortBase: string[]; ascending: boolean }
+}) {
const { data } = useContext(DataContext)
const sections = useMemo(
() =>
@@ -24,6 +30,20 @@ export default function StatDisplayComponent() {
),
[data]
)
+ if (sortOptions) {
+ const sortValues = JSON.parse(localStorage.getItem('sortValues') || '{}')
+ for (const [sectionKey, displayNs] of sections) {
+ for (const [nodeKey, n] of Object.entries(displayNs)) {
+ if (
+ JSON.stringify(sortOptions.sortBase) ===
+ JSON.stringify([sectionKey, nodeKey])
+ ) {
+ sortValues[index.toString()] = n.value
+ localStorage.setItem('sortValues', JSON.stringify(sortValues))
+ }
+ }
+ }
+ }
return (
diff --git a/apps/frontend/src/app/Database/DataManagers/BuildSettingData.ts b/apps/frontend/src/app/Database/DataManagers/BuildSettingData.ts
index d42e700b..7185ae78 100644
--- a/apps/frontend/src/app/Database/DataManagers/BuildSettingData.ts
+++ b/apps/frontend/src/app/Database/DataManagers/BuildSettingData.ts
@@ -75,6 +75,8 @@ export interface BuildSetting {
compareBuild: boolean
levelLow: number
levelHigh: number
+ sortBase?: string[]
+ sortAsc?: boolean
}
export class BuildSettingDataManager extends DataManager<
@@ -115,6 +117,8 @@ export class BuildSettingDataManager extends DataManager<
compareBuild,
levelLow,
levelHigh,
+ sortBase,
+ sortAsc,
} = obj as BuildSetting
if (typeof statFilters !== 'object') statFilters = {}
@@ -166,6 +170,8 @@ export class BuildSettingDataManager extends DataManager<
)
maxBuildsToShow = maxBuildsToShowDefault
if (!plotBase || !Array.isArray(plotBase)) plotBase = undefined
+ if (!sortBase || !Array.isArray(sortBase)) sortBase = undefined
+ if (sortAsc === undefined) sortAsc = false
if (compareBuild === undefined) compareBuild = false
if (levelLow === undefined) levelLow = 0
if (levelHigh === undefined) levelHigh = 20
@@ -193,6 +199,8 @@ export class BuildSettingDataManager extends DataManager<
compareBuild,
levelLow,
levelHigh,
+ sortBase,
+ sortAsc,
}
}
override get(key: CharacterKey) {
@@ -220,6 +228,8 @@ const initialBuildSettings: BuildSetting = deepFreeze({
compareBuild: true,
levelLow: 0,
levelHigh: 20,
+ sortBase: undefined,
+ sortAsc: false,
})
export function handleArtSetExclusion(
diff --git a/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/BuildDisplayItem.tsx b/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/BuildDisplayItem.tsx
index 98dc4af6..75be5073 100644
--- a/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/BuildDisplayItem.tsx
+++ b/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/BuildDisplayItem.tsx
@@ -56,6 +56,8 @@ type BuildDisplayItemProps = {
disabled?: boolean
extraButtonsRight?: JSX.Element
extraButtonsLeft?: JSX.Element
+ index?: number
+ sortOptions?: { sortBase: string[]; ascending: boolean }
}
//for displaying each artifact build
export default function BuildDisplayItem({
@@ -64,6 +66,8 @@ export default function BuildDisplayItem({
extraButtonsRight,
extraButtonsLeft,
disabled,
+ index,
+ sortOptions,
}: BuildDisplayItemProps) {
const {
character: { key: characterKey, equippedArtifacts },
@@ -213,7 +217,7 @@ export default function BuildDisplayItem({
{artNanos}
-
+
diff --git a/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/SortCard/index.tsx b/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/SortCard/index.tsx
index 22af8b69..aa030fab 100644
--- a/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/SortCard/index.tsx
+++ b/apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/SortCard/index.tsx
@@ -5,23 +5,17 @@ import BootstrapTooltip from '../../../../../../Components/BootstrapTooltip'
import CardLight from '../../../../../../Components/Card/CardLight'
import SortIcon from '@mui/icons-material/Sort'
import OptimizationTargetSelector from '../OptimizationTargetSelector'
+import { useContext } from 'react'
+import { CharacterContext } from '../../../../../../Context/CharacterContext'
+import useBuildSetting from '../../useBuildSetting'
-type SortCardProps = {
- sortBase?: string[]
- setSortBase: (path: string[] | undefined) => void
- ascending: boolean
- setAscending: (ascending: boolean) => void
- optimizationTarget?: string[]
-}
-
-export default function SortCard({
- sortBase,
- setSortBase,
- ascending,
- setAscending,
- optimizationTarget,
-}: SortCardProps) {
+export default function SortCard() {
const { t } = useTranslation(['page_character_optimize', 'ui'])
+ const {
+ character: { key: characterKey },
+ } = useContext(CharacterContext)
+ const { buildSetting, buildSettingDispatch } = useBuildSetting(characterKey)
+ const { optimizationTarget, sortBase, sortAsc } = buildSetting
return (
@@ -34,7 +28,9 @@ export default function SortCard({
setSortBase(target)}
+ setTarget={(target) => {
+ buildSettingDispatch({ sortBase: target })
+ }}
defaultText={'Select a Sort Target'}
disabled={false}
/>
@@ -42,14 +38,18 @@ export default function SortCard({
@@ -61,8 +61,11 @@ export default function SortCard({
-
+
@@ -789,6 +786,10 @@ export default function TabBuild() {
onClick={() => {
setGraphBuilds(undefined)
buildResultDispatch({ builds: [], buildDate: 0 })
+ buildSettingDispatch({
+ sortBase: optimizationTarget,
+ sortAsc: false,
+ })
}}
>
Clear Builds
@@ -831,8 +832,6 @@ export default function TabBuild() {
disabled={!!generatingBuilds}
getLabel={getGraphBuildLabel}
setBuilds={setGraphBuilds}
- sortBase={sortBase}
- ascending={ascending}
/>
)}
@@ -860,20 +858,17 @@ function BuildList({
compareData,
disabled,
getLabel,
- sortBase,
- ascending,
+ sortOptions,
}: {
builds: string[][]
setBuilds?: (builds: string[][] | undefined) => void
- characterKey?: '' | CharacterKey
+ characterKey?: CharacterKey
data?: UIData
compareData: boolean
disabled: boolean
getLabel: (index: number) => Displayable
- sortBase: string[]
- ascending: boolean
+ sortOptions?: { sortBase: string[]; ascending: boolean }
}) {
- if (ascending) builds = [...builds].reverse()
const deleteBuild = useCallback(
(index: number) => {
if (setBuilds) {
@@ -891,7 +886,6 @@ function BuildList({
fallback={}
>
{builds?.map((build, index) => {
- index = ascending ? builds.length - 1 - index : index
return (
characterKey &&
data && (
@@ -908,6 +902,7 @@ function BuildList({
compareData={compareData}
disabled={disabled}
deleteBuild={setBuilds ? deleteBuild : undefined}
+ sortOptions={sortOptions}
/>
)
@@ -919,15 +914,19 @@ function BuildList({
builds,
characterKey,
data,
+ getLabel,
compareData,
disabled,
- getLabel,
- deleteBuild,
setBuilds,
- ascending,
+ deleteBuild,
+ sortOptions,
]
)
- return list
+ const sortedList = useMemo(
+ () => SortList(list, sortOptions),
+ [list, sortOptions]
+ )
+ return sortedList
}
function BuildItemWrapper({
index,
@@ -936,6 +935,7 @@ function BuildItemWrapper({
compareData,
disabled,
deleteBuild,
+ sortOptions,
}: {
index: number
label: Displayable
@@ -943,6 +943,7 @@ function BuildItemWrapper({
compareData: boolean
disabled: boolean
deleteBuild?: (index: number) => void
+ sortOptions?: { sortBase: string[]; ascending: boolean }
}) {
const { t } = useTranslation('page_character_optimize')
const location = useLocation()
@@ -980,6 +981,8 @@ function BuildItemWrapper({
)}
>
}
+ index={index}
+ sortOptions={sortOptions}
/>
)
}
@@ -1026,3 +1029,23 @@ function DataContextWrapper({ children, characterKey, build, oldData }: Prop) {
)
}
+
+function SortList(
+ list: React.JSX.Element,
+ sortOptions: { sortBase: string[]; ascending: boolean }
+) {
+ const sortValues = JSON.parse(localStorage.getItem('sortValues') || '{}')
+
+ const sortedBuildsWithValues = {}
+ list.props.children.map((child: JSX.Element, index: number) => {
+ sortedBuildsWithValues[child.key] = sortValues[index.toString()]
+ })
+
+ list.props.children.sort((a, b) => {
+ const valueA = sortedBuildsWithValues[a.key] || 0
+ const valueB = sortedBuildsWithValues[b.key] || 0
+ return sortOptions.ascending ? valueA - valueB : valueB - valueA
+ })
+
+ return list
+}