fix(customizations): responsive updates

website/client/src/components/creatorIntro.vue

@@ -47,6 +47,7 @@
             class="new-user"
             :member="user"
             :avatar-only="true"
+            :override-top-padding="'0px'"
           />
         </div>
         <avatar
@@ -1096,6 +1097,17 @@ 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;
+    this.$root.$on('buyModal::boughtItem', item => {
+      if (item.path.includes('background')) {
+        const newBackground = this.allBackgrounds[item.path.split('.')[2]];
+        if (newBackground.set === 'timeTravelBackgrounds') {
+          this.timeTravelBackgrounds.push(newBackground);
+        } else {
+          this.monthlyBackgrounds.push(newBackground);
+          this.monthlyBackgrounds = orderBy(this.monthlyBackgrounds, bg => bg.key, 'desc');
+        }
+      }
+    });
   },
   methods: {
     close () {

website/client/src/components/shops/buyModal.vue

@@ -826,6 +826,7 @@ export default {
         if (!buySuccess) return;
         this.sync();
         this.$root.$emit('playSound', 'Reward');
+        this.$root.$emit('buyModal::boughtItem', this.item);
         this.purchased(this.item.text);
       } else {
         const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';

website/client/src/components/shops/customizations/index.vue

@@ -130,6 +130,7 @@ export default {
     return {
       searchText: null,
       searchTextThrottled: null,
+      unfilteredCategories: [],
       viewOptions: {},
     };
   },
@@ -148,23 +149,6 @@ export default {
         npc: 'url(/static/npc/normal/customizations_npc.png)',
       };
     },
-    shop () {
-      return shops.getCustomizationsShop(this.user);
-    },
-    unfilteredCategories () {
-      const apiCategories = this.shop.categories;
-
-      apiCategories.forEach(category => {
-        // do not reset the viewOptions if already set once
-        if (typeof this.viewOptions[category.identifier] === 'undefined') {
-          this.$set(this.viewOptions, category.identifier, {
-            selected: false,
-          });
-        }
-      });
-
-      return apiCategories;
-    },
     categories () {
       const { unfilteredCategories } = this;
 
@@ -183,6 +167,10 @@ export default {
       subSection: this.$t('customizations'),
       section: this.$t('shops'),
     });
+    this.updateShop();
+    this.$root.$on('buyModal::boughtItem', () => {
+      this.updateShop();
+    });
   },
   methods: {
     customizationsItems (options = {}) {
@@ -257,6 +245,20 @@ export default {
     selectItem (item) {
       this.$root.$emit('buyModal::showItem', item);
     },
+    updateShop () {
+      const shop = shops.getCustomizationsShop(this.user);
+
+      shop.categories.forEach(category => {
+        // do not reset the viewOptions if already set once
+        if (typeof this.viewOptions[category.identifier] === 'undefined') {
+          this.$set(this.viewOptions, category.identifier, {
+            selected: false,
+          });
+        }
+      });
+
+      this.unfilteredCategories = shop.categories;
+    },
   },
 };
 </script>