WIP(shop): show customs in buy modal

website/client/src/components/avatar.vue

@@ -35,7 +35,7 @@
         <span :class="[skinClass, specialMountClass]"></span>
         <!-- eslint-disable max-len-->
         <span
-          :class="[member.preferences.size + '_shirt_' + member.preferences.shirt, specialMountClass]"
+          :class="[shirtClass, specialMountClass]"
         ></span>
         <!-- eslint-enable max-len-->
         <span :class="['head_0', specialMountClass]"></span>
@@ -46,12 +46,10 @@
         <template
           v-for="type in ['bangs', 'base', 'mustache', 'beard']"
         >
-          <!-- eslint-disable max-len-->
           <span
             :key="type"
-            :class="['hair_' + type + '_' + member.preferences.hair[type] + '_' + member.preferences.hair.color, specialMountClass]"
+            :class="[hairClass(type), specialMountClass]"
           ></span>
-          <!-- eslint-enable max-len-->
         </template>
         <span :class="[getGearClass('body'), specialMountClass]"></span>
         <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
@@ -233,10 +231,20 @@ export default {
     },
     skinClass () {
       if (!this.member) return '';
+      if (this.overrideAvatarGear?.skin) {
+        return `skin_${this.overrideAvatarGear.skin}`;
+      }
       const baseClass = `skin_${this.member.preferences.skin}`;
 
       return `${baseClass}${this.member.preferences.sleep ? '_sleep' : ''}`;
     },
+    shirtClass () {
+      if (!this.member) return '';
+      if (this.overrideAvatarGear?.shirt) {
+        return `${this.member.preferences.size}_shirt_${this.overrideAvatarGear.shirt}`;
+      }
+      return `${this.member.preferences.size}_shirt_${this.member.preferences.shirt}`;
+    },
     costumeClass () {
       return this.member?.preferences.costume ? 'costume' : 'equipped';
     },
@@ -269,6 +277,17 @@ export default {
 
       return result;
     },
+    hairClass (slot) {
+      if (this.overrideAvatarGear?.hair) {
+        if (this.overrideAvatarGear.hair[slot]) {
+          return `hair_${slot}_${this.overrideAvatarGear.hair[slot]}_${this.member.preferences.hair.color}`;
+        }
+        if (this.overrideAvatarGear.hair.color) {
+          return `hair_${slot}_${this.member.preferences.hair[slot]}_${this.overrideAvatarGear.hair.color}`;
+        }
+      }
+      return `hair_${slot}_${this.member.preferences.hair[slot]}_${this.member.preferences.hair.color}`;
+    },
     hideGear (gearType) {
       if (!this.member) return true;
       if (gearType === 'weapon') {

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

@@ -631,7 +631,7 @@ const amountOfDropPotions = size(dropPotions);
 const hideAmountSelectionForPurchaseTypes = [
   'gear', 'backgrounds', 'mystery_set', 'card',
   'rebirth_orb', 'fortify', 'armoire', 'keys',
-  'debuffPotion', 'pets', 'mounts',
+  'debuffPotion', 'pets', 'mounts', 'customization',
 ];
 
 export default {
@@ -684,7 +684,8 @@ export default {
   computed: {
     ...mapState({ user: 'user.data' }),
     showAvatar () {
-      return ['backgrounds', 'gear', 'mystery_set'].includes(this.item.purchaseType);
+      return ['backgrounds', 'gear', 'mystery_set', 'customization']
+        .includes(this.item.purchaseType);
     },
 
     preventHealthPotion () {
@@ -885,6 +886,27 @@ export default {
 
           return gear;
         }
+        case 'customization': {
+          if (item.type === 'skin') {
+            return {
+              skin: item.key,
+            };
+          }
+          if (item.type === 'shirt') {
+            return {
+              shirt: item.key,
+              armor: 'armor_base_0',
+            };
+          }
+          if (['base', 'beard', 'color', 'mustache'].includes(item.type)) {
+            return {
+              hair: {
+                [item.type]: item.option,
+              },
+              head: 'head_base_0',
+            };
+          }
+        }
       }
 
       return {};

website/common/script/libs/getItemInfo.js

@@ -383,8 +383,11 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: item.key,
         class: `hair hair_bangs_${user.preferences.hair.bangs}_${item.key}`,
-        value: item.price,
         currency: 'gems',
+        option: item.key,
+        purchaseType: 'customization',
+        type: 'color',
+        value: item.price,
       };
       break;
     }
@@ -392,8 +395,11 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: `hair-base-${item.key}`,
         class: `hair hair_base_${item.key}_${user.preferences.hair.color}`,
-        value: item.price,
         currency: 'gems',
+        option: item.key,
+        purchaseType: 'customization',
+        type: 'base',
+        value: item.price,
       };
       break;
     }
@@ -401,8 +407,11 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: `mustache-${item.key}`,
         class: `facial-hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
-        value: item.price,
         currency: 'gems',
+        option: item.key,
+        purchaseType: 'customization',
+        type: 'mustache',
+        value: item.price,
       };
       break;
     }
@@ -410,8 +419,11 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: `beard-${item.key}`,
         class: `facial-hair hair_beard_${item.key}_${user.preferences.hair.color}`,
-        value: item.price,
         currency: 'gems',
+        option: item.key,
+        purchaseType: 'customization',
+        type: 'beard',
+        value: item.price,
       };
       break;
     }
@@ -419,8 +431,10 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: item.key,
         class: `skin skin_${item.key}`,
-        value: item.price,
         currency: 'gems',
+        purchaseType: 'customization',
+        type: 'skin',
+        value: item.price,
       };
       break;
     }
@@ -428,8 +442,10 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       itemInfo = {
         key: item.key,
         class: `shirt ${user.preferences.size}_shirt_${item.key}`,
-        value: item.price,
         currency: 'gems',
+        purchaseType: 'customization',
+        type: 'shirt',
+        value: item.price,
       };
       break;
     }