WIP(shop): more CSS, add hair styles

website/client/src/assets/scss/button.scss

@@ -217,9 +217,7 @@
 
 .btn-show-more {
   display: block;
-  width: 50%;
+  width: 100%;
-  max-width: 448px;
-  margin: 0 auto;
   margin-top: 12px;
   padding: 8px;
   font-size: 14px;

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

@@ -87,6 +87,14 @@
     height: 216px;
   }
 
+  .item-rows {
+    max-width: 920px;
+
+    .items > div:nth-of-type(8n) {
+      margin-right: 0px;
+    }
+  }
+
   .npc {
     background-repeat: no-repeat;
   }

website/common/script/libs/getItemInfo.js

@@ -388,6 +388,33 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
       };
       break;
     }
+    case 'hairBase': {
+      itemInfo = {
+        key: `hair-base-${item.key}`,
+        class: `hair hair_base_${item.key}_${user.preferences.hair.color}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
+    case 'mustache': {
+      itemInfo = {
+        key: `mustache-${item.key}`,
+        class: `hair hair_mustache_${item.key}_${user.preferences.hair.color}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
+    case 'beard': {
+      itemInfo = {
+        key: `beard-${item.key}`,
+        class: `hair hair_beard_${item.key}_${user.preferences.hair.color}`,
+        value: item.price,
+        currency: 'gems',
+      };
+      break;
+    }
   }
 
   if (itemInfo) {

website/common/script/libs/shops.js

@@ -573,7 +573,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
           return moment().isBetween(color.set.availableFrom, color.set.availableUntil);
         }
         if (color.set.availableUntil) {
-          return moment().isBefore(color.set.availableTo);
+          return moment().isBefore(color.set.availableUntil);
         }
         return true;
       }
@@ -585,10 +585,71 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   const hairStylesCategory = {
     identifier: 'hairStyles',
     text: i18n.t('hairStyles', language),
-    items: [],
   };
+  hairStylesCategory.items = values(content.appearances.hair.base)
+    .filter(style => {
+      const { hair } = user.purchased;
+      if (hair && hair.base && hair.base[style.key]) {
+        return false;
+      }
+      if (style.set) {
+        if (style.set.availableFrom) {
+          return moment().isBetween(style.set.availableFrom, style.set.availableUntil);
+        }
+        if (style.set.availableUntil) {
+          return moment().isBefore(style.set.availableUntil);
+        }
+        return true;
+      }
+      return false;
+    })
+    .map(style => getItemInfo(user, 'hairBase', style, officialPinnedItems, language));
   categories.push(hairStylesCategory);
 
+  const facialHairCategory = {
+    identifier: 'facialHair',
+    text: i18n.t('facialHairs', language),
+  };
+  facialHairCategory.items = values(content.appearances.hair.mustache)
+    .filter(style => {
+      const { hair } = user.purchased;
+      if (hair && hair.mustache && hair.mustache[style.key]) {
+        return false;
+      }
+      if (style.set) {
+        if (style.set.availableFrom) {
+          return moment().isBetween(style.set.availableFrom, style.set.availableUntil);
+        }
+        if (style.set.availableUntil) {
+          return moment().isBefore(style.set.availableUntil);
+        }
+        return true;
+      }
+      return false;
+    })
+    .map(style => getItemInfo(user, 'mustache', style, officialPinnedItems, language))
+    .concat(
+      values(content.appearances.hair.beard)
+        .filter(style => {
+          const { hair } = user.purchased;
+          if (hair && hair.beard && hair.beard[style.key]) {
+            return false;
+          }
+          if (style.set) {
+            if (style.set.availableFrom) {
+              return moment().isBetween(style.set.availableFrom, style.set.availableUntil);
+            }
+            if (style.set.availableUntil) {
+              return moment().isBefore(style.set.availableUntil);
+            }
+            return true;
+          }
+          return false;
+        })
+        .map(style => getItemInfo(user, 'beard', style, officialPinnedItems, language)),
+    );
+  categories.push(facialHairCategory);
+
   const skinsCategory = {
     identifier: 'skins',
     text: i18n.t('skins', language),
@@ -617,13 +678,6 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
   };
   categories.push(shirtsCategory);
 
-  const facialHairCategory = {
-    identifier: 'facialHair',
-    text: i18n.t('facialHairs', language),
-    items: [],
-  };
-  categories.push(facialHairCategory);
-
   return categories;
 };