Merge pull request #10200 from mjlemay/seasonal-artifact-improvements

added seasonal artifact display enhancements

config/i18n.json

@@ -1043,6 +1043,8 @@
     "Items": "Quest Items",
     "Milestones": "Milestones & Challenges",
     "PercentPrestige": "{{pct}}% to reset",
+    "PointsUsed": "1 point used",
+    "PointsUsed_plural": "{{count}} points used",
     "PowerBonusHeader": "+{{powerBonus}} Power Rewards",
     "PowerBonusHeaderUndefined": "Other Rewards",
     "Progress": "Progress",

src/app/vendors/single-vendor/ArtifactUnlocks.m.scss

@@ -1,26 +1,74 @@
 .tiers {
-  display: flex;
+  display: inline-flex;
   flex-flow: row nowrap;
-  gap: 12px;
+  box-shadow: 0 6px 12px 0 #061a1f;
 }
 
 .tier {
   display: flex;
+  flex-shrink: 1;
+  padding: 6px;
   flex-flow: column nowrap;
-  gap: 6px;
+  gap: var(--item-margin);
+  opacity: 0.6;
+  background-color: hsla(189, 65%, 15%, 0.25);
+  border-right: 1px solid hsla(182, 85%, 29%, 0.5);
+}
+
+.stat {
+  text-transform: uppercase;
+  max-width: 305px;
+  margin: 0 0 8px;
+  color: var(--theme-header-characters-txt);
+  line-height: 11px;
+  font-size: 11px;
+  font-weight: 300;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
+  display: flex;
+  place-content: start space-between;
+  align-items: auto;
+}
+
+.unlockedTier {
+  opacity: 1;
+  background-color: #0d373e;
+  border-right: 1px solid #0af3f3;
 }
 
 .item {
-  background-size: 100%;
-  border: 1px solid var(--theme-item-socket-border);
+  background-size: 84%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 4px;
+  background-blend-mode: hard-light;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
   cursor: pointer;
 }
 
+.item:hover {
+  border: 1px solid white;
+}
+
 .unlocked {
-  background-color: #0a3b40;
+  background-color: #0b878b;
+  border: 1px solid #0b878b;
+  border-top: 1px solid #0af3f3;
 }
 
 .locked {
-  background-color: #020808;
-  filter: brightness(0.6);
+  background-color: #061a1f;
+  border: 1px solid #061a1f;
+  border-top: 1px solid #0a1a1e;
+  background-blend-mode: hard-light;
+}
+
+@media screen and (max-width: 540px) {
+  .item {
+    /* smaller since double width tier column margins */
+    max-width: 15vw;
+    max-height: 15vw;
+  }
+  .stat {
+    max-width: 100%;
+  }
 }

src/app/vendors/single-vendor/ArtifactUnlocks.tsx

@@ -1,4 +1,5 @@
 import { bungieBackgroundStyle } from 'app/dim-ui/BungieImage';
+import { t } from 'app/i18next-t';
 import ItemPopupTrigger from 'app/inventory/ItemPopupTrigger';
 import { createItemContextSelector, profileResponseSelector } from 'app/inventory/selectors';
 import { makeFakeItem } from 'app/inventory/store/d2-item-factory';
@@ -29,32 +30,44 @@ export default function ArtifactUnlocks({ characterId }: { characterId: string }
       .filter((i) => i.isVisible)
       .map((i) => ({ item: makeFakeItem(context, i.itemHash), isActive: i.isActive })),
   }));
+  const { resetCount = 0, pointsUsed = 0 } = artifactUnlockData;
 
   return (
-    <div className={styles.tiers}>
-      {tiers.map((tier) => (
-        <div key={tier.tierHash} className={styles.tier}>
-          {tier.items.map(
-            (item) =>
-              item.item && (
-                <ItemPopupTrigger key={item.item.index} item={item.item}>
-                  {(ref, onClick) => (
-                    <div
-                      ref={ref}
-                      onClick={onClick}
-                      title={item.item!.name}
-                      style={bungieBackgroundStyle(item.item!.icon)}
-                      className={clsx('item', styles.item, {
-                        [styles.unlocked]: item.isActive,
-                        [styles.locked]: !item.isActive,
-                      })}
-                    />
-                  )}
-                </ItemPopupTrigger>
-              ),
-          )}
-        </div>
-      ))}
-    </div>
+    <>
+      <div className={styles.stat}>
+        <div>{t('Progress.PointsUsed', { count: pointsUsed })}</div>
+        <div>{t('Progress.Resets', { count: resetCount })}</div>
+      </div>
+      <div className={styles.tiers}>
+        {tiers.map((tier) => (
+          <div
+            key={tier.tierHash}
+            className={clsx(styles.tier, {
+              [styles.unlockedTier]: tier.isUnlocked,
+            })}
+          >
+            {tier.items.map(
+              (item) =>
+                item.item && (
+                  <ItemPopupTrigger key={item.item.index} item={item.item}>
+                    {(ref, onClick) => (
+                      <div
+                        ref={ref}
+                        onClick={onClick}
+                        title={item.item!.name}
+                        style={bungieBackgroundStyle(item.item!.icon)}
+                        className={clsx('item', styles.item, {
+                          [styles.unlocked]: item.isActive,
+                          [styles.locked]: !item.isActive,
+                        })}
+                      />
+                    )}
+                  </ItemPopupTrigger>
+                ),
+            )}
+          </div>
+        ))}
+      </div>
+    </>
   );
 }

src/locale/en.json

@@ -1035,6 +1035,8 @@
     "NoEventChallenges": "You have completed all event challenges",
     "NoTrackedTriumph": "You have no tracked triumphs. Track as many as you like in DIM.",
     "PercentPrestige": "{{pct}}% to reset",
+    "PointsUsed": "1 point used",
+    "PointsUsed_plural": "{{count}} points used",
     "PowerBonusHeader": "+{{powerBonus}} Power Rewards",
     "PowerBonusHeaderUndefined": "Other Rewards",
     "Progress": "Progress",