Skip to content

Commit

Permalink
Merge pull request #10678 from FlaminSarge/armor-grouping
Browse files Browse the repository at this point in the history
Add setting to show each class's armor on separate lines in vault
  • Loading branch information
bhollis authored Aug 9, 2024
2 parents fab6f0c + 4e32506 commit 5f726d9
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 14 deletions.
3 changes: 2 additions & 1 deletion config/i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 armor on different lines by class",
"VaultWeaponGroupingStyle": "Separate weapon groups on different lines",
"Settings": "Settings",
"ShowNewItems": "Show a red dot on new items",
"ExpandSingleCharacter": "Show all characters",
Expand Down
22 changes: 16 additions & 6 deletions src/app/inventory-page/StoreBucket.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DestinyVersion } from '@destinyitemmanager/dim-api-types';
import { DestinyVersion, VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types';
import ClassIcon from 'app/dim-ui/ClassIcon';
import WeaponGroupingIcon from 'app/dim-ui/WeaponGroupingIcon';
import { t } from 'app/i18next-t';
Expand All @@ -16,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';
Expand All @@ -28,7 +30,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';
Expand Down Expand Up @@ -80,6 +82,7 @@ const StoreBucketInner = memo(function StoreBucketInner({
const sortItems = useSelector(itemSorterSelector);
const groupWeapons = useSelector(vaultWeaponGroupingSelector);
const vaultWeaponGroupingEnabled = useSelector(vaultWeaponGroupingEnabledSelector);
const weaponGroupingStyle = useSelector(vaultWeaponGroupingStyleSelector);

const showItemPicker = useItemPicker();
const pickEquipItem = useCallback(() => {
Expand Down Expand Up @@ -131,7 +134,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 ? (
Expand Down Expand Up @@ -195,6 +201,7 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({
const storeClassList = useSelector(storeClassListSelector);
const characterOrder = useSelector(characterOrderSelector);
const sortItems = useSelector(itemSorterSelector);
const armorGroupingStyle = useSelector(vaultArmorGroupingStyleSelector);

// The vault divides armor by class
const itemsByClass = Map.groupBy(items, (item) => item.classType);
Expand All @@ -205,19 +212,22 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({

return (
<StoreBucketDropTarget
grouped={false}
grouped={true}
equip={false}
bucket={bucket}
storeId={storeId}
storeClassType={storeClassType}
className={clsx({
inlineGroups: armorGroupingStyle === VaultWeaponGroupingStyle.Inline,
})}
>
{classTypeOrder.map((classType) => (
<React.Fragment key={classType}>
<div className="vault-group" key={classType}>
<ClassIcon classType={classType} className="armor-class-icon" />
{sortItems(itemsByClass.get(classType)!).map((item) => (
<StoreInventoryItem key={item.index} item={item} />
))}
</React.Fragment>
</div>
))}
</StoreBucketDropTarget>
);
Expand Down
5 changes: 0 additions & 5 deletions src/app/inventory-page/StoreBuckets.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand All @@ -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
Expand Down Expand Up @@ -87,7 +83,6 @@ export function StoreBuckets({
<div
className={clsx('store-row', `bucket-${bucket.hash}`, {
'account-wide': bucket.accountWide,
inlineGroups: vaultWeaponGroupingStyle === VaultWeaponGroupingStyle.Inline,
})}
>
{labels && (
Expand Down
11 changes: 11 additions & 0 deletions src/app/settings/SettingsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,17 @@ export default function SettingsPage() {
}
/>
)}
<Checkbox
label={t('Settings.VaultArmorGroupingStyle')}
name="vaultArmorGroupingStyle"
value={settings.vaultArmorGroupingStyle !== VaultWeaponGroupingStyle.Inline}
onChange={(checked, setting) =>
setSetting(
setting,
checked ? VaultWeaponGroupingStyle.Lines : VaultWeaponGroupingStyle.Inline,
)
}
/>
</div>

<div className={styles.setting}>
Expand Down
8 changes: 7 additions & 1 deletion src/app/settings/initial-settings.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
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';

/**
* We extend the settings interface so we can try out new settings before committing them to dim-api-types
*/
export interface Settings extends DimApiSettings {
language: DimLanguage;
vaultArmorGroupingStyle: VaultWeaponGroupingStyle;
}

export const initialSettingsState: Settings = {
...defaultSettings,
language: defaultLanguage(),
vaultArmorGroupingStyle: VaultWeaponGroupingStyle.Inline,
organizerColumnsWeapons: [
'icon',
'name',
Expand Down
6 changes: 6 additions & 0 deletions src/app/settings/vault-grouping.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
2 changes: 1 addition & 1 deletion src/app/shell/item-comparators.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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] }];
}
Expand Down

0 comments on commit 5f726d9

Please sign in to comment.