From c7f8370e6d0798c8a520d5f68e6d0bc30cfa244d Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Thu, 8 Aug 2024 01:50:36 -0700 Subject: [PATCH 1/4] Add setting to show each class's armor on separate lines in vault --- config/i18n.json | 3 ++- src/app/inventory-page/StoreBucket.tsx | 21 +++++++++++++++------ src/app/inventory-page/StoreBuckets.tsx | 5 ----- src/app/settings/SettingsPage.tsx | 11 +++++++++++ src/app/shell/item-comparators.ts | 2 +- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/config/i18n.json b/config/i18n.json index e7fa0b2707..36a96f0cc0 100644 --- a/config/i18n.json +++ b/config/i18n.json @@ -1193,7 +1193,8 @@ "ReverseSort": "Toggle forward/reverse sort", "SetSort": "Sort items by:", "SetVaultWeaponGrouping": "Group vault weapons by:", - "VaultWeaponGroupingStyle": "Separate groups on different lines", + "VaultArmorGroupingStyle": "Separate each class's armor on different lines", + "VaultWeaponGroupingStyle": "Separate weapon groups on different lines", "Settings": "Settings", "ShowNewItems": "Show a red dot on new items", "ExpandSingleCharacter": "Show all characters", diff --git a/src/app/inventory-page/StoreBucket.tsx b/src/app/inventory-page/StoreBucket.tsx index d65da104cc..3638440ed6 100644 --- a/src/app/inventory-page/StoreBucket.tsx +++ b/src/app/inventory-page/StoreBucket.tsx @@ -1,4 +1,5 @@ -import { DestinyVersion } from '@destinyitemmanager/dim-api-types'; +import { DestinyVersion, VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types'; +import { settingSelector } from 'app/dim-api/selectors'; import ClassIcon from 'app/dim-ui/ClassIcon'; import WeaponGroupingIcon from 'app/dim-ui/WeaponGroupingIcon'; import { t } from 'app/i18next-t'; @@ -28,7 +29,7 @@ import { BucketHashes } from 'data/d2/generated-enums'; import emptyEngram from 'destiny-icons/general/empty-engram.svg'; import { shallowEqual } from 'fast-equals'; import _ from 'lodash'; -import React, { memo, useCallback, useRef } from 'react'; +import { memo, useCallback, useRef } from 'react'; import { useSelector } from 'react-redux'; import { createSelector } from 'reselect'; import './StoreBucket.scss'; @@ -80,6 +81,7 @@ const StoreBucketInner = memo(function StoreBucketInner({ const sortItems = useSelector(itemSorterSelector); const groupWeapons = useSelector(vaultWeaponGroupingSelector); const vaultWeaponGroupingEnabled = useSelector(vaultWeaponGroupingEnabledSelector); + const weaponGroupingStyle = useSelector(settingSelector('vaultWeaponGroupingStyle')); const showItemPicker = useItemPicker(); const pickEquipItem = useCallback(() => { @@ -131,7 +133,10 @@ const StoreBucketInner = memo(function StoreBucketInner({ storeId={storeId} storeClassType={storeClassType} // class representing a *character* bucket area that's not equippable - className={clsx({ 'not-equippable': !isVault && !isEquippable })} + className={clsx({ + 'not-equippable': !isVault && !isEquippable, + inlineGroups: weaponGroupingStyle === VaultWeaponGroupingStyle.Inline, + })} > {unequippedItems.map((groupOrItem) => 'id' in groupOrItem ? ( @@ -195,6 +200,7 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({ const storeClassList = useSelector(storeClassListSelector); const characterOrder = useSelector(characterOrderSelector); const sortItems = useSelector(itemSorterSelector); + const armorGroupingStyle = useSelector(settingSelector('vaultArmorGroupingStyle')); // The vault divides armor by class const itemsByClass = Map.groupBy(items, (item) => item.classType); @@ -205,19 +211,22 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({ return ( {classTypeOrder.map((classType) => ( - +
{sortItems(itemsByClass.get(classType)!).map((item) => ( ))} - +
))} ); diff --git a/src/app/inventory-page/StoreBuckets.tsx b/src/app/inventory-page/StoreBuckets.tsx index b7dbf93b0a..0e46e379ce 100644 --- a/src/app/inventory-page/StoreBuckets.tsx +++ b/src/app/inventory-page/StoreBuckets.tsx @@ -1,5 +1,3 @@ -import { VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types'; -import { settingSelector } from 'app/dim-api/selectors'; import { PullFromPostmaster } from 'app/inventory/PullFromPostmaster'; import { InventoryBucket } from 'app/inventory/inventory-buckets'; import { DimStore } from 'app/inventory/store-types'; @@ -12,7 +10,6 @@ import { import clsx from 'clsx'; import { BucketHashes } from 'data/d2/generated-enums'; import React from 'react'; -import { useSelector } from 'react-redux'; import StoreBucket from '../inventory-page/StoreBucket'; import styles from './StoreBuckets.m.scss'; @@ -32,7 +29,6 @@ export function StoreBuckets({ labels?: boolean; singleCharacter: boolean; }) { - const vaultWeaponGroupingStyle = useSelector(settingSelector('vaultWeaponGroupingStyle')); let content: React.ReactNode; // Don't show buckets with no items @@ -87,7 +83,6 @@ export function StoreBuckets({
{labels && ( diff --git a/src/app/settings/SettingsPage.tsx b/src/app/settings/SettingsPage.tsx index 43fd45b6b3..4adebb5118 100644 --- a/src/app/settings/SettingsPage.tsx +++ b/src/app/settings/SettingsPage.tsx @@ -368,6 +368,17 @@ export default function SettingsPage() { } /> )} + + setSetting( + setting, + checked ? VaultWeaponGroupingStyle.Lines : VaultWeaponGroupingStyle.Inline, + ) + } + />
diff --git a/src/app/shell/item-comparators.ts b/src/app/shell/item-comparators.ts index 9ffbd62e3a..1a9290f1f3 100644 --- a/src/app/shell/item-comparators.ts +++ b/src/app/shell/item-comparators.ts @@ -372,7 +372,7 @@ export function groupItems( ): readonly VaultGroup[] { const comparatorsAndGetters = GROUP_BY_GETTERS_AND_COMPARATORS[vaultGrouping]; - // If there are no items, or the grouping is not suppored, return all items in a single group + // If there are no items, or the grouping is not supported, return all items in a single group if (!items.length || !comparatorsAndGetters) { return [{ groupingValue: undefined, icon: { type: 'none' }, items: [...items] }]; } From 52245d3b81720066f848bc5ebcd27740509ebaff Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Thu, 8 Aug 2024 02:10:17 -0700 Subject: [PATCH 2/4] Move groupingStyle selectors into vault-grouping --- src/app/inventory-page/StoreBucket.tsx | 7 ++++--- src/app/settings/vault-grouping.ts | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/app/inventory-page/StoreBucket.tsx b/src/app/inventory-page/StoreBucket.tsx index 3638440ed6..9e0ea515f6 100644 --- a/src/app/inventory-page/StoreBucket.tsx +++ b/src/app/inventory-page/StoreBucket.tsx @@ -1,5 +1,4 @@ import { DestinyVersion, VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types'; -import { settingSelector } from 'app/dim-api/selectors'; import ClassIcon from 'app/dim-ui/ClassIcon'; import WeaponGroupingIcon from 'app/dim-ui/WeaponGroupingIcon'; import { t } from 'app/i18next-t'; @@ -17,8 +16,10 @@ import { useItemPicker } from 'app/item-picker/item-picker'; import { characterOrderSelector } from 'app/settings/character-sort'; import { itemSorterSelector } from 'app/settings/item-sort'; import { + vaultArmorGroupingStyleSelector, vaultWeaponGroupingEnabledSelector, vaultWeaponGroupingSelector, + vaultWeaponGroupingStyleSelector, } from 'app/settings/vault-grouping'; import { AppIcon, addIcon } from 'app/shell/icons'; import { vaultGroupingValueWithType } from 'app/shell/item-comparators'; @@ -81,7 +82,7 @@ const StoreBucketInner = memo(function StoreBucketInner({ const sortItems = useSelector(itemSorterSelector); const groupWeapons = useSelector(vaultWeaponGroupingSelector); const vaultWeaponGroupingEnabled = useSelector(vaultWeaponGroupingEnabledSelector); - const weaponGroupingStyle = useSelector(settingSelector('vaultWeaponGroupingStyle')); + const weaponGroupingStyle = useSelector(vaultWeaponGroupingStyleSelector); const showItemPicker = useItemPicker(); const pickEquipItem = useCallback(() => { @@ -200,7 +201,7 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({ const storeClassList = useSelector(storeClassListSelector); const characterOrder = useSelector(characterOrderSelector); const sortItems = useSelector(itemSorterSelector); - const armorGroupingStyle = useSelector(settingSelector('vaultArmorGroupingStyle')); + const armorGroupingStyle = useSelector(vaultArmorGroupingStyleSelector); // The vault divides armor by class const itemsByClass = Map.groupBy(items, (item) => item.classType); diff --git a/src/app/settings/vault-grouping.ts b/src/app/settings/vault-grouping.ts index 9da91fa749..ca1512c4a0 100644 --- a/src/app/settings/vault-grouping.ts +++ b/src/app/settings/vault-grouping.ts @@ -13,6 +13,12 @@ export const vaultWeaponGroupingEnabledSelector = createSelector( (state) => Boolean(state), ); +export const vaultWeaponGroupingStyleSelector = (state: RootState) => + settingsSelector(state).vaultWeaponGroupingStyle; + +export const vaultArmorGroupingStyleSelector = (state: RootState) => + settingsSelector(state).vaultArmorGroupingStyle; + /** * Get a function that will group items according to the user's preferences. */ From 47142f7ff237210a09f9cf6b87e30c03cd86b0a7 Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Thu, 8 Aug 2024 14:22:12 -0700 Subject: [PATCH 3/4] Add vaultArmorGroupingStyle to initial-settings --- src/app/settings/initial-settings.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/settings/initial-settings.ts b/src/app/settings/initial-settings.ts index 2904fd6cfe..97e76f4c0b 100644 --- a/src/app/settings/initial-settings.ts +++ b/src/app/settings/initial-settings.ts @@ -1,4 +1,8 @@ -import { defaultSettings, Settings as DimApiSettings } from '@destinyitemmanager/dim-api-types'; +import { + defaultSettings, + Settings as DimApiSettings, + VaultWeaponGroupingStyle, +} from '@destinyitemmanager/dim-api-types'; import { defaultLanguage, DimLanguage } from 'app/i18n'; /** @@ -6,11 +10,13 @@ import { defaultLanguage, DimLanguage } from 'app/i18n'; */ export interface Settings extends DimApiSettings { language: DimLanguage; + vaultArmorGroupingStyle: VaultWeaponGroupingStyle; } export const initialSettingsState: Settings = { ...defaultSettings, language: defaultLanguage(), + vaultArmorGroupingStyle: VaultWeaponGroupingStyle.Inline, organizerColumnsWeapons: [ 'icon', 'name', From 4e32506885c65906c4fae9c586b5ce5de445f2a7 Mon Sep 17 00:00:00 2001 From: FlaminSarge Date: Fri, 9 Aug 2024 01:46:43 -0700 Subject: [PATCH 4/4] Update config/i18n.json Co-authored-by: Ben Hollis --- config/i18n.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/i18n.json b/config/i18n.json index 36a96f0cc0..f4b3bbce5c 100644 --- a/config/i18n.json +++ b/config/i18n.json @@ -1193,7 +1193,7 @@ "ReverseSort": "Toggle forward/reverse sort", "SetSort": "Sort items by:", "SetVaultWeaponGrouping": "Group vault weapons by:", - "VaultArmorGroupingStyle": "Separate each class's armor on different lines", + "VaultArmorGroupingStyle": "Separate armor on different lines by class", "VaultWeaponGroupingStyle": "Separate weapon groups on different lines", "Settings": "Settings", "ShowNewItems": "Show a red dot on new items",