account-wide power level

DestinyItemManager · Jun 13, 2024 · 1c81e96 · 1c81e96
1 parent dc08d21
commit 1c81e96
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 58 deletions.
diff --git a/config/i18n.json b/config/i18n.json
@@ -1233,6 +1233,11 @@
     "Discipline": "Discipline",
     "Intellect": "Intellect",
     "MaxGearPower": "Maximum Power of equippable gear",
+    "DropLevel": "Account Power",
+    "DropLevelExplanation1": "Account Power is the base current level when calculating the increased level of Powerful and Pinnacle rewards.",
+    "DropLevelExplanation2": "Account Power uses the highest level item in each slot, regardless of required Class or the \"One Exotic\" rule.",
+    "EquippableGear": "Equippable Gear",
+    "MaxGearPowerOneExoticRule": "Maximum Power of equippable gear\n(only one Exotic armor piece equipped)",
     "MaxGearPowerAll": "Maximum Power of all gear",
     "PowerModifier": "Power granted by seasonal experience progression",
     "MaxTotalPower": "Maximum total Power",

diff --git a/src/app/character-tile/CharacterTile.m.scss b/src/app/character-tile/CharacterTile.m.scss
@@ -43,14 +43,17 @@
 .vaultTile {
   composes: tileCommon;
   display: grid;
-  grid-template-areas: 'emblem class vaultCapacity' !important;
+  grid-template-areas: 'emblem class power' !important;
   grid-template-columns: 46px 1fr min-content;
   grid-template-rows: 1fr;
   align-items: center;
   box-sizing: border-box;
   gap: 0 6px;
   padding: 0 6px;
 
+  @include phone-portrait {
+    grid-template-areas: 'emblem class vaultCapacity' !important;
+  }
   // The vault needs a little border to stand out against some backgrounds
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-right: none;
@@ -131,8 +134,6 @@
 
 // Current power level
 .powerLevel {
-  composes: bigText;
-  grid-area: power;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Destiny Symbols';
   font-weight: 500;
   color: $power;
@@ -145,6 +146,19 @@
   }
 }
 
+.bigPowerLevel {
+  composes: bigText;
+  grid-area: power;
+}
+
+.smallPowerLevel {
+  text-align: right;
+
+  :global(.app-icon) {
+    font-size: 80%;
+  }
+}
+
 // The max power shown on mobile under the current power
 .maxTotalPower {
   composes: smallText;

diff --git a/src/app/character-tile/CharacterTile.m.scss.d.ts b/src/app/character-tile/CharacterTile.m.scss.d.ts
diff --git a/src/app/character-tile/CharacterTile.tsx b/src/app/character-tile/CharacterTile.tsx
@@ -1,5 +1,6 @@
+import FractionalPowerLevel from 'app/dim-ui/FractionalPowerLevel';
 import type { DimStore, DimTitle } from 'app/inventory/store-types';
-import { powerLevelSelector } from 'app/inventory/store/selectors';
+import { allPowerLevelsSelector, powerLevelSelector } from 'app/inventory/store/selectors';
 import { AppIcon, powerActionIcon } from 'app/shell/icons';
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import VaultCapacity from 'app/store-stats/VaultCapacity';
@@ -44,7 +45,7 @@ export default memo(function CharacterTile({ store }: { store: DimStore }) {
       <div className={styles.bottom}>
         {store.titleInfo ? <Title titleInfo={store.titleInfo} /> : store.race}
       </div>
-      <div className={styles.powerLevel}>
+      <div className={clsx(styles.powerLevel, styles.bigPowerLevel)}>
         <AppIcon icon={powerActionIcon} />
         {store.powerLevel}
       </div>
@@ -55,14 +56,27 @@ export default memo(function CharacterTile({ store }: { store: DimStore }) {
 
 function VaultTile({ store }: { store: DimStore }) {
   const isPhonePortrait = useIsPhonePortrait();
+  const powerLevel = Object.values(useSelector(allPowerLevelsSelector))[0];
 
   return (
     <div className={styles.vaultTile}>
       <img className={styles.vaultEmblem} src={store.icon} height={40} width={40} />
       <div className={styles.vaultName}>{store.className}</div>
+      {!isPhonePortrait && (
+        <div className={clsx(styles.powerLevel, styles.bigPowerLevel)}>
+          <AppIcon icon={powerActionIcon} />
+          <FractionalPowerLevel power={powerLevel.dropPower} />
+        </div>
+      )}
       {isPhonePortrait && (
         <div className={styles.vaultCapacity}>
           <VaultCapacity />
+          <span className={clsx(styles.powerLevel, styles.smallPowerLevel)}>
+            <AppIcon icon={powerActionIcon} />
+          </span>
+          <span className={clsx(styles.powerLevel, styles.smallPowerLevel)}>
+            <FractionalPowerLevel power={powerLevel.dropPower} />
+          </span>
         </div>
       )}
     </div>

diff --git a/src/app/gear-power/GearPower.m.scss b/src/app/gear-power/GearPower.m.scss
@@ -10,6 +10,8 @@
 
   .gearPowerSheetContent {
     margin: 0 20px 20px;
+    width: min-content;
+    white-space: pre-wrap;
   }
 
   .gearPowerHeader {
@@ -32,24 +34,6 @@
   }
 
   .powerLevel {
-    color: $power;
-    display: flex;
-    gap: 1em;
-
-    :global(.app-icon) {
-      font-size: 60%;
-      vertical-align: 45%;
-      margin-right: 2px;
-    }
-    > span {
-      display: flex;
-    }
-    img {
-      height: 1.3em;
-      width: auto;
-    }
-  }
-  .powerLevel2 {
     color: $power;
     font-size: 1.4em;
     :global(.app-icon) {
@@ -66,7 +50,7 @@
     }
   }
   :global(.selected) {
-    .powerLevel2 {
+    .powerLevel {
       color: black;
     }
   }
@@ -186,9 +170,6 @@
     }
   }
 
-  .notes {
-    max-width: 400px;
-  }
   .footNote {
     margin: 10px auto 0;
     color: #999;

diff --git a/src/app/gear-power/GearPower.m.scss.d.ts b/src/app/gear-power/GearPower.m.scss.d.ts
diff --git a/src/app/gear-power/GearPower.tsx b/src/app/gear-power/GearPower.tsx
@@ -2,6 +2,7 @@ import BungieImage from 'app/dim-ui/BungieImage';
 import FractionalPowerLevel from 'app/dim-ui/FractionalPowerLevel';
 import RadioButtons from 'app/dim-ui/RadioButtons';
 import BucketIcon from 'app/dim-ui/svgs/BucketIcon';
+import { t } from 'app/i18next-t';
 import { locateItem } from 'app/inventory/locate-item';
 import { powerLevelSelector } from 'app/inventory/store/selectors';
 import { AppIcon, powerActionIcon } from 'app/shell/icons';
@@ -68,25 +69,27 @@ export default function GearPower() {
           {
             label: (
               <div className={styles.powerToggleButton}>
-                <span>Equippable Gear</span>
-                <span className={styles.powerLevel2}>
+                <span>{t('Stats.EquippableGear')}</span>
+                <span className={styles.powerLevel}>
                   <AppIcon icon={powerActionIcon} />
                   <FractionalPowerLevel power={powerLevel.maxEquippableGearPower} />
                 </span>
               </div>
             ),
+            tooltip: t('Stats.MaxGearPowerOneExoticRule'),
             value: 'equip',
           },
           {
             label: (
               <div className={styles.powerToggleButton}>
-                <span>Drop Level</span>
-                <span className={styles.powerLevel2}>
+                <span>{t('Stats.DropLevel')}</span>
+                <span className={styles.powerLevel}>
                   <BungieImage src={rarityIcons.Legendary} />
                   <FractionalPowerLevel power={powerLevel.dropPower} />
                 </span>
               </div>
             ),
+            tooltip: t('Stats.DropLevelExplanation1'),
             value: 'drop',
           },
         ]}
@@ -120,6 +123,16 @@ export default function GearPower() {
             );
           })}
         </div>
+        <div className={styles.footNote}>
+          {whichGear === 'equip' ? (
+            t('Stats.MaxGearPowerOneExoticRule')
+          ) : (
+            <>
+              <p>{t('Stats.DropLevelExplanation1')}</p>
+              <p>{t('Stats.DropLevelExplanation2')}</p>
+            </>
+          )}
+        </div>
       </div>
     </Sheet>
   );

diff --git a/src/app/inventory/store/selectors.ts b/src/app/inventory/store/selectors.ts
@@ -71,7 +71,7 @@ export interface StorePowerLevel {
   };
 }
 
-const allPowerLevelsSelector = createSelector(
+export const allPowerLevelsSelector = createSelector(
   storesSelector,
   allItemsSelector,
   (stores, allItems) => {

diff --git a/src/app/store-stats/CharacterStats.scss b/src/app/store-stats/CharacterStats.scss
@@ -137,3 +137,7 @@
   vertical-align: top;
   margin-left: 2px;
 }
+.dropLevel {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/app/store-stats/CharacterStats.tsx b/src/app/store-stats/CharacterStats.tsx
@@ -1,4 +1,3 @@
-import { AlertIcon } from 'app/dim-ui/AlertIcon';
 import BungieImage, { bungieNetPath } from 'app/dim-ui/BungieImage';
 import FractionalPowerLevel from 'app/dim-ui/FractionalPowerLevel';
 import { PressTip } from 'app/dim-ui/PressTip';
@@ -41,15 +40,7 @@ function CharacterPower({ stats }: { stats: PowerStat[] }) {
               {stat.richTooltipContent && (
                 <>
                   <hr />
-                  <div className="richTooltipWrapper">
-                    {stat.richTooltipContent()}
-                    {(stat.problems?.notEquippable || stat.problems?.notOnStore) && (
-                      <div className="tooltipFootnote">
-                        {stat.problems.notOnStore ? <AlertIcon /> : '*'}{' '}
-                        {t('General.ClickForDetails')}
-                      </div>
-                    )}
-                  </div>
+                  <div className="richTooltipWrapper">{stat.richTooltipContent()}</div>
                 </>
               )}
             </>
@@ -66,13 +57,7 @@ function CharacterPower({ stats }: { stats: PowerStat[] }) {
               <span className="powerStat">
                 <FractionalPowerLevel power={stat.value} />
               </span>
-              {stat.problems?.notOnStore ? (
-                <AlertIcon className="warningIcon" />
-              ) : (
-                (stat.problems?.hasClassified || stat.problems?.notEquippable) && (
-                  <sup className="asterisk">*</sup>
-                )
-              )}
+              {stat.problems?.hasClassified && <sup className="asterisk">*</sup>}
             </div>
           </div>
         </PressTip>
@@ -109,17 +94,27 @@ export function PowerFormula({ storeId }: { storeId: string }) {
   };
 
   const maxGearPower: PowerStat = {
-    value: powerLevel.maxGearPower,
+    value: powerLevel.maxEquippableGearPower,
     icon: helmetIcon,
-    name: t('Stats.MaxGearPowerAll'),
-    // used to be t('Stats.MaxGearPower'), a translation i don't want to lose yet
+    name: t('Stats.MaxGearPowerOneExoticRule'),
+    // used to be t('Stats.MaxGearPowerAll') or t('Stats.MaxGearPower'), a translation i don't want to lose yet
     problems: powerLevel.problems,
     onClick: () => showGearPower(storeId),
     richTooltipContent: () => (
-      <ItemPowerSet
-        items={powerLevel.highestPowerItems}
-        powerFloor={Math.floor(powerLevel.maxGearPower)}
-      />
+      <>
+        <ItemPowerSet
+          items={powerLevel.highestPowerItems}
+          powerFloor={Math.floor(powerLevel.maxGearPower)}
+        />
+        <hr />
+        <div className="dropLevel">
+          <span>{t('Stats.DropLevel')}*</span>
+          <span>
+            <FractionalPowerLevel power={powerLevel.dropPower} />
+          </span>
+        </div>
+        <div className="tooltipFootnote">* {t('General.ClickForDetails')}</div>
+      </>
     ),
   };
 

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -1221,11 +1221,16 @@
     "CustomDesc": "Custom total of selected base stats, ignoring mods or masterworks. Visit Settings to configure which stats are included.",
     "DamageResistance": "PvE Damage Resist",
     "Discipline": "Discipline",
+    "DropLevel": "Account Power",
+    "DropLevelExplanation1": "Account Power is the base current level when calculating the increased level of Powerful and Pinnacle rewards.",
+    "DropLevelExplanation2": "Account Power uses the highest level item in each slot, regardless of required Class or the \"One Exotic\" rule.",
+    "EquippableGear": "Equippable Gear",
     "FlinchResistance": "Flinch Resist",
     "HP": "HP",
     "Intellect": "Intellect",
     "MaxGearPower": "Maximum Power of equippable gear",
     "MaxGearPowerAll": "Maximum Power of all gear",
+    "MaxGearPowerOneExoticRule": "Maximum Power of equippable gear\n(only one Exotic armor piece equipped)",
     "MaxTotalPower": "Maximum total Power",
     "MetersPerSecond": "m/s",
     "Milliseconds": "ms",