WIP(shops): shirts vs skins

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

@@ -143,9 +143,20 @@
       opacity: 0.5;
     }
 
-   .hair {
+    .hair, .facial-hair, .shirt, .skin {
       height: 68px;
-      margin-left: -24px;
+    }
+
+    .hair {
+      background-position: -24px -2px;
+    }
+
+    .facial-hair, .skin {
+      background-position: -24px -10px;
+    }
+
+    .shirt {
+      background-position: -23px -32px;
     }
   }
 

website/common/script/libs/getItemInfo.js

@@ -400,7 +400,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
     case 'mustache': {
       itemInfo = {
         key: `mustache-${item.key}`,
-        class: `hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
+        class: `facial-hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
         value: item.price,
         currency: 'gems',
       };
@@ -409,7 +409,25 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
     case 'beard': {
       itemInfo = {
         key: `beard-${item.key}`,
-        class: `hair hair_beard_${item.key}_${user.preferences.hair.color}`,
+        class: `facial-hair hair_beard_${item.key}_${user.preferences.hair.color}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
+    case 'skin': {
+      itemInfo = {
+        key: item.key,
+        class: `skin skin_${item.key}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
+    case 'shirt': {
+      itemInfo = {
+        key: item.key,
+        class: `shirt ${user.preferences.size}_shirt_${item.key}`,
         value: item.price,
         currency: 'gems',
       };

website/common/script/libs/shops.js

@@ -653,8 +653,25 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   const skinsCategory = {
     identifier: 'skins',
     text: i18n.t('skins', language),
-    items: [],
   };
+  skinsCategory.items = values(content.appearances.skin)
+    .filter(color => {
+      const { skin } = user.purchased;
+      if (skin && skin[color.key]) {
+        return false;
+      }
+      if (color.set) {
+        if (color.set.availableFrom) {
+          return moment().isBetween(color.set.availableFrom, color.set.availableUntil);
+        }
+        if (color.set.availableUntil) {
+          return moment().isBefore(color.set.availableUntil);
+        }
+        return true;
+      }
+      return false;
+    })
+    .map(color => getItemInfo(user, 'skin', color, officialPinnedItems, language));
   categories.push(skinsCategory);
 
   const animalEarsCategory = {
@@ -674,8 +691,25 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   const shirtsCategory = {
     identifier: 'shirts',
     text: i18n.t('shirts', language),
-    items: [],
   };
+  shirtsCategory.items = values(content.appearances.shirt)
+    .filter(color => {
+      const { shirt } = user.purchased;
+      if (shirt && shirt[color.key]) {
+        return false;
+      }
+      if (color.set) {
+        if (color.set.availableFrom) {
+          return moment().isBetween(color.set.availableFrom, color.set.availableUntil);
+        }
+        if (color.set.availableUntil) {
+          return moment().isBefore(color.set.availableUntil);
+        }
+        return true;
+      }
+      return false;
+    })
+    .map(color => getItemInfo(user, 'shirt', color, officialPinnedItems, language));
   categories.push(shirtsCategory);
 
   return categories;