diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue index 3be2a2a672..f2c1d3734d 100644 --- a/website/client/src/components/shops/shopItem.vue +++ b/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; } } diff --git a/website/common/script/libs/getItemInfo.js b/website/common/script/libs/getItemInfo.js index 586c700eb7..2f1cf56fe7 100644 --- a/website/common/script/libs/getItemInfo.js +++ b/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', }; diff --git a/website/common/script/libs/shops.js b/website/common/script/libs/shops.js index f5b91cd752..caf951ee96 100644 --- a/website/common/script/libs/shops.js +++ b/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;