WIP(shops): customization categories skeleton

website/client/src/components/header/menu.vue

@@ -134,6 +134,12 @@
               >
                 {{ $t('quests') }}
               </router-link>
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'customizations'}"
+              >
+                {{ $t('customizations') }}
+              </router-link>
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'seasonal'}"

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

@@ -2,7 +2,15 @@
   <div class="row market">
     <div class="standard-sidebar">
       <filter-sidebar>
-        <filter-group />
+        <filter-group>
+          <checkbox
+            v-for="category in unfilteredCategories"
+            :id="`category-${category.identifier}`"
+            :key="category.identifier"
+            :checked.sync="viewOptions[category.identifier].selected"
+            :text="category.text"
+          />
+        </filter-group>
       </filter-sidebar>
     </div>
     <div class="standard-page p-0">
@@ -16,11 +24,39 @@
         >
         </div>
       </div>
+      <div class="p-4">
+        <h1
+          v-once
+          class="mb-4"
+        >
+          {{ $t('customizations') }}
+        </h1>
+        <div
+          v-for="category in categories"
+          :key="category.identifier"
+        >
+          <h2 class="mb-3">
+            {{ category.text }}
+          </h2>
+          <div
+            v-for="item in category.items"
+            :key="item.key"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    color: $purple-200;
+  }
+
   .background, .npc {
     height: 216px;
   }
@@ -31,22 +67,33 @@
 </style>
 
 <script>
+import shops from '@/../../common/script/libs/shops';
 import { mapState } from '@/libs/store';
 
+import Checkbox from '@/components/ui/checkbox';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
 
 export default {
   components: {
+    Checkbox,
     FilterGroup,
     FilterSidebar,
   },
+  data () {
+    return {
+      viewOptions: {},
+    };
+  },
   computed: {
     ...mapState({
       // content: 'content',
-      // user: 'user.data',
+      user: 'user.data',
       currentEventList: 'worldState.data.currentEventList',
     }),
+    anyFilterSelected () {
+      return Object.values(this.viewOptions).some(g => g.selected);
+    },
     imageURLs () {
       const currentEvent = this.currentEventList.find(event => Boolean(event.season));
       if (!currentEvent) {
@@ -60,6 +107,29 @@ export default {
         npc: `url(/static/npc/${currentEvent.season}/market_banner_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;
+
+      return unfilteredCategories.filter(category => !this.anyFilterSelected
+        || this.viewOptions[category.identifier].selected);
+    },
   },
   mounted () {
     this.$store.dispatch('common:setTitle', {

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

@@ -1,7 +1,6 @@
 <template>
   <div class="row timeTravelers">
     <div
-      v-if="!closed"
       class="standard-sidebar d-none d-sm-block"
     >
       <filter-sidebar>
@@ -88,7 +87,7 @@
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
       <div
         v-for="category in categories"
-        v-if="!anyFilterSelected || (!closed && viewOptions[category.identifier].selected)"
+        v-if="!closed && (!anyFilterSelected || viewOptions[category.identifier].selected)"
         :key="category.identifier"
         :class="category.identifier"
       >

website/common/locales/en/character.json

@@ -187,5 +187,10 @@
   "mainHand": "Main-Hand",
   "offHand": "Off-Hand",
   "statPoints": "Stat Points",
-  "pts": "pts"
+  "pts": "pts",
+  "customizations": "Customizations",
+  "hairColors": "Hair Colors",
+  "hairStyles": "Hair Styles",
+  "skins": "Skins",
+  "facialHairs": "Facial Hair"
 }

website/common/locales/en/generic.json

@@ -237,6 +237,5 @@
   "submitQuestion": "Submit Question",
   "whyReportingPlayer": "Why are you reporting this player?",
   "whyReportingPlayerPlaceholder": "Reason for report",
-  "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines.",
-  "customizations": "Customizations"
+  "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines."
 }

website/common/script/libs/shops.js

@@ -543,4 +543,72 @@ shops.getBackgroundShopSets = function getBackgroundShopSets (language) {
   return sets;
 };
 
+shops.getCustomizationsShopCategories = function getCustomizationsShopCategories (user, language) {
+  const categories = [];
+  const officialPinnedItems = getOfficialPinnedItems();
+  const backgroundsCategory = {
+    identifier: 'backgrounds',
+    text: i18n.t('backgrounds', language),
+  };
+
+  backgroundsCategory.items = values(content.backgroundsFlat)
+    .filter(bg => !user.purchased.background[bg.key] && (!bg.currency || bg.currency === 'gems'))
+    .map(bg => getItemInfo(user, 'background', bg, officialPinnedItems, language));
+  categories.push(backgroundsCategory);
+
+  const hairColorsCategory = {
+    identifier: 'hairColors',
+    text: i18n.t('hairColors', language),
+  };
+  categories.push(hairColorsCategory);
+
+  const hairStylesCategory = {
+    identifier: 'hairStyles',
+    text: i18n.t('hairStyles', language),
+  };
+  categories.push(hairStylesCategory);
+
+  const skinsCategory = {
+    identifier: 'skins',
+    text: i18n.t('skins', language),
+  };
+  categories.push(skinsCategory);
+
+  const animalEarsCategory = {
+    identifier: 'animalEars',
+    text: i18n.t('animalEars', language),
+  };
+  categories.push(animalEarsCategory);
+
+  const animalTailsCategory = {
+    identifier: 'animalTails',
+    text: i18n.t('animalTails', language),
+  };
+  categories.push(animalTailsCategory);
+
+  const shirtsCategory = {
+    identifier: 'shirts',
+    text: i18n.t('shirts', language),
+  };
+  categories.push(shirtsCategory);
+
+  const facialHairCategory = {
+    identifier: 'facialHair',
+    text: i18n.t('facialHairs', language),
+  };
+  categories.push(facialHairCategory);
+
+  return categories;
+};
+
+shops.getCustomizationsShop = function getCustomizationsShop (user, language) {
+  return {
+    identifier: 'customizations',
+    text: i18n.t('customizations'),
+    // notes: i18n.t('customizations'),
+    imageName: 'npc_alex',
+    categories: shops.getCustomizationsShopCategories(user, language),
+  };
+};
+
 export default shops;