WIP(shops): empty states and deselect UX

website/client/src/components/avatarModal/extra-settings.vue

@@ -208,6 +208,11 @@ export default {
 
       for (const key of keys) {
         const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+        const newKey = `headAccessory_special_${key}`;
+        option.click = () => {
+          const type = this.user.preferences.costume ? 'costume' : 'equipped';
+          return this.equip(newKey, type);
+        };
 
         options.push(option);
       }

website/client/src/components/creatorIntro.vue

@@ -176,10 +176,16 @@
             :id="bg.key"
             :key="bg.key"
             class="background-item"
-            :class="{selected: bg.key === user.preferences.background}"
+            :class="{ selected: bg.key === user.preferences.background }"
             @click="unlock('background.' + bg.key)"
           >
             <div
+              v-if="bg.key === ''"
+              class="incentive-background deselect"
+            >
+            </div>
+            <div
+              v-else
               class="incentive-background"
               :class="`background_${bg.key}`"
             >
@@ -264,7 +270,7 @@
           >
             <strong>{{ $t('monthlyBackgrounds') }}</strong>
           </div>
-          <div class="d-flex background-row justify-content-center mx-auto mb-4">
+          <div class="d-flex background-row justify-content-left mx-auto mb-4">
             <div
               v-for="(bg) in monthlyBackgrounds"
               :id="bg.key"
@@ -789,7 +795,7 @@
 
     #backgrounds {
       .background-row {
-        width: 85%;
+        width: 82%;
         flex-wrap: wrap;
       }
 
@@ -803,8 +809,19 @@
           background-position: -4px -4px;
         }
 
-        &:not(:first-of-type):not(:nth-of-type(9n)) {
-          margin-left: 24px;
+        .deselect {
+          height: 4px;
+          display: block;
+          opacity: 0.24;
+          background: red;
+          transform: rotate(-45deg);
+          top: 0;
+          margin-top: 32px;
+          margin-left: -1px;
+        }
+
+        &:not(:nth-of-type(8n)) {
+          margin-right: 24px;
         }
 
         &:nth-of-type(n+9) {
@@ -1009,7 +1026,7 @@ export default {
       allBackgrounds: content.backgroundsFlat,
       monthlyBackgrounds: [],
       standardBackgrounds: [],
-      standardBackgroundMax: 0,
+      standardBackgroundMax: 1,
       timeTravelBackgrounds: [],
 
       icons: Object.freeze({
@@ -1084,6 +1101,7 @@ export default {
       }
     });
     this.monthlyBackgrounds = orderBy(this.monthlyBackgrounds, bg => bg.key, 'desc');
+    this.standardBackgrounds.splice(0, 0, { key: '', notes: () => this.$t('noBackground') });
     if (this.editing) this.modalPage = 2;
   },
   methods: {

website/client/src/components/shops/market/equipmentSection.vue

@@ -42,7 +42,7 @@
       :item-width="94"
       :item-margin="24"
       :type="'gear'"
-      :no-items-label="$t('noGearItemsOfClass')"
+      :no-items-label="noItemsLabel"
     >
       <template
         slot="item"
@@ -77,6 +77,7 @@
 import _filter from 'lodash/filter';
 import _orderBy from 'lodash/orderBy';
 import shops from '@/../../common/script/libs/shops';
+import { remainingGearInSet } from '@/../../common/script/count';
 import { getClassName } from '@/../../common/script/libs/getClassName';
 import { mapState } from '@/libs/store';
 import LayoutSection from '@/components/ui/layoutSection';
@@ -136,6 +137,17 @@ export default {
       userItems: 'user.data.items',
       userStats: 'user.data.stats',
     }),
+    armoireCount () {
+      return remainingGearInSet(this.userItems.gear.owned, 'armoire');
+    },
+    noItemsLabel () {
+      if (this.armoireCount > 0) {
+        return `${this.$t('gearItemsCompleted', { klass: this.$t(this.selectedGroupGearByClass) })}
+          ${this.$t('moreArmoireGearAvailable', { armoireCount: this.armoireCount })}`;
+      }
+      return `${this.$t('gearItemsCompleted', { klass: this.$t(this.selectedGroupGearByClass) })}
+        ${this.$t('moreArmoireComing')}`;
+    },
     marketGearCategories () {
       return shops.getMarketGearCategories(this.user).map(c => {
         c.id = c.identifier;

website/client/src/mixins/avatarEditUtilities.js

@@ -120,6 +120,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
     async unlock (path) {
       const fullSet = path.indexOf(',') !== -1;
       const isBackground = path.indexOf('background.') !== -1;
+      if (isBackground && path === 'background.') {
+        return this.set({ 'preferences.background': '' });
+      }
 
       let cost;
 

website/client/src/store/actions/user.js

@@ -1,3 +1,4 @@
+import getProps from 'lodash/get';
 import setProps from 'lodash/set';
 import axios from 'axios';
 
@@ -47,6 +48,9 @@ export async function set (store, changes) {
           tagsIndexesToRemove.forEach(i => task.tags.splice(i, 1));
         });
       });
+    } else if ((key.startsWith('preferences.hair') || key.startsWith('preferences.chair'))
+      && getProps(user, key) === changes[key]) {
+      setProps(user, key, key.startsWith('preferences.chair') ? 'none' : 0);
     } else {
       setProps(user, key, changes[key]);
     }

website/common/locales/en/gear.json

@@ -9,7 +9,9 @@
   "mysterySets": "Mystery Sets",
   "gearNotOwned": "You do not own this item.",
   "noGearItemsOfType": "You don't own any of these.",
-  "noGearItemsOfClass": "You already have all your class equipment! More will be released during the Grand Galas, near the solstices and equinoxes.",
+  "gearItemsCompleted": "You own all <%= klass %> gear! New gear is released during the seasonal Galas.",
+  "moreArmoireGearAvailable": "Until then, there's <%= armoireCount %> pieces of gear in the Enchanted Armoire to find!",
+  "moreArmoireGearComing": "The Enchanted Armoire gets new stock every month too!",
   "classLockedItem": "This item is only available to a specific class. At level 10 or above, you can change your class under the User icon > Settings > Character Build!",
   "tierLockedItem": "This item is only available once you've purchased the previous items in sequence. Keep working your way up!",