New client sept 6 (#9020)

* Added flagging to show to admins

* Fixed filters in my guilds

* Fixed login incentives style

* Added inital rage bar

* Added categoires to get group

* Updated profile stats page

* Added stat allocation

* Updated tests to include categoires

* Fixed lint issue

* Added another lint fix

test/api/v3/integration/challenges/GET-challenges_challengeId.test.js

@@ -48,6 +48,7 @@ describe('GET /challenges/:challengeId', () => {
       });
       expect(chal.group).to.eql({
         _id: group._id,
+        categories: [],
         id: group.id,
         name: group.name,
         summary: group.name,
@@ -101,6 +102,7 @@ describe('GET /challenges/:challengeId', () => {
       });
       expect(chal.group).to.eql({
         _id: group._id,
+        categories: [],
         id: group.id,
         name: group.name,
         summary: group.name,
@@ -155,6 +157,7 @@ describe('GET /challenges/:challengeId', () => {
       expect(chal.group).to.eql({
         _id: group._id,
         id: group.id,
+        categories: [],
         name: group.name,
         summary: group.name,
         type: group.type,

test/api/v3/integration/challenges/GET-challenges_user.test.js

@@ -41,6 +41,7 @@ describe('GET challenges/user', () => {
       });
       expect(foundChallenge.group).to.eql({
         _id: publicGuild._id,
+        categories: [],
         id: publicGuild._id,
         type: publicGuild.type,
         privacy: publicGuild.privacy,
@@ -62,6 +63,7 @@ describe('GET challenges/user', () => {
       });
       expect(foundChallenge1.group).to.eql({
         _id: publicGuild._id,
+        categories: [],
         id: publicGuild._id,
         type: publicGuild.type,
         privacy: publicGuild.privacy,
@@ -78,6 +80,7 @@ describe('GET challenges/user', () => {
       });
       expect(foundChallenge2.group).to.eql({
         _id: publicGuild._id,
+        categories: [],
         id: publicGuild._id,
         type: publicGuild.type,
         privacy: publicGuild.privacy,
@@ -99,6 +102,7 @@ describe('GET challenges/user', () => {
       });
       expect(foundChallenge1.group).to.eql({
         _id: publicGuild._id,
+        categories: [],
         id: publicGuild._id,
         type: publicGuild.type,
         privacy: publicGuild.privacy,
@@ -115,6 +119,7 @@ describe('GET challenges/user', () => {
       });
       expect(foundChallenge2.group).to.eql({
         _id: publicGuild._id,
+        categories: [],
         id: publicGuild._id,
         type: publicGuild.type,
         privacy: publicGuild.privacy,

website/client/assets/svg/dots.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16">
+    <path fill="#686274" fill-rule="evenodd" d="M2 12a2 2 0 1 0-.001 3.999A2 2 0 0 0 2 12m0-6a2 2 0 1 0-.001 3.999A2 2 0 0 0 2 6m2-4a2 2 0 1 1-3.999.001A2 2 0 0 1 4 2"/>
+</svg>

website/client/assets/svg/gift.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <path fill="#686274" fill-rule="evenodd" d="M8 8.807h4v-3H8v3zm0 5h4v-3H8v3zm-6-5h4v-3H2v3zm0 5h4v-3H2v3zm10-12h-2V.501a.5.5 0 0 0-.658-.475L7 .807 4.658.027A.5.5 0 0 0 4 .5v1.306H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-10a2 2 0 0 0-2-2z"/>
+</svg>

website/client/components/achievements/login-incentives.vue

@@ -2,11 +2,12 @@
 b-modal#login-incentives(:title="data.message", size='md', :hide-footer="true")
   .modal-body
     .row.reward-row
-      div.text-center.col-6.text-center
+      .col-12
-        avatar(:member='user')
+        avatar.avatar(:member='user', :avatarOnly='true', :withBackground='true')
-      div.text-center.col-6.text-center
+      .text-center.col-12
+        .reward-wrap
           div(v-if="nextReward.rewardKey.length === 1", :class="nextReward.rewardKey[0]")
-        div(v-for="reward in nextReward.rewardKey", v-if="nextReward.rewardKey.length > 1", :class='reward')
+          .reward(v-for="reward in nextReward.rewardKey", v-if="nextReward.rewardKey.length > 1", :class='reward')
         div(v-if="data.nextRewardAt")
           h4 {{ $t('countLeft', {count: data.nextRewardAt - user.loginIncentives}) }}
     .row
@@ -20,10 +21,26 @@ b-modal#login-incentives(:title="data.message", size='md', :hide-footer="true")
 </template>
 
 <style scoped>
+  .avatar {
+    width: 140px;
+  }
+
+  .reward-wrap {
+    width: max-content;
+  }
+
+  .avatar, .reward-wrap {
+    margin: 0 auto;
+  }
+
   .reward-row {
     margin-top: 2em;
     margin-bottom: 2em;
   }
+
+  .reward {
+    float: left;
+  }
 </style>
 
 <script>

website/client/components/chat/chatMessages.vue

@@ -5,7 +5,7 @@
       copy-as-todo-modal(:copying-message='copyingMessage', :group-name='groupName', :group-id='groupId')
       report-flag-modal
 
-  div(v-for="(msg, index) in chat", v-if='chat && (inbox || Object.keys(cachedProfileData).length > 0)')
+  div(v-for="(msg, index) in chat", v-if='chat && (inbox || Object.keys(cachedProfileData).length > 0) && canViewFlag(msg)')
     // @TODO: is there a different way to do these conditionals? This creates an infinite loop
     //.hr(v-if='displayDivider(msg)')
       .hr-middle(v-once) {{ msg.timestamp }}
@@ -15,6 +15,7 @@
           :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
           :hideClassBadge='true')
       .card.col-8
+        .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden
         .card-block
             h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
               | {{msg.user}}
@@ -40,6 +41,7 @@
               | + {{ likeCount(msg) }}
     .row(v-if='user._id === msg.uuid')
       .card.col-8
+        .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden - {{ msg.flagCount }} Flags
         .card-block
             h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
               | {{msg.user}}
@@ -175,6 +177,12 @@
   .action.active, .active .svg-icon {
     color: #46a7d9
   }
+
+  .message-hidden {
+    margin-left: 1.5em;
+    margin-top: 1em;
+    color: red;
+  }
 </style>
 
 <script>
@@ -276,6 +284,11 @@ export default {
     },
   },
   methods: {
+    canViewFlag (message) {
+      if (message.uuid === this.user._id) return true;
+      if (message.flagCount === 0) return true;
+      return this.user.contributor.admin;
+    },
     async loadProfileCache (screenPosition) {
       let promises = [];
 

website/client/components/chat/reportFlagModal.vue

@@ -60,17 +60,19 @@ export default {
       this.$root.$emit('hide::modal', 'report-flag');
     },
     async reportAbuse () {
+      this.notify('Thank you for reporting this violation. The moderators have been notified.');
       await this.$store.dispatch('chat:flag', {
         groupId: this.groupId,
         chatId: this.abuseObject.id,
       });
-      this.notify('Thank you for reporting this violation. The moderators have been notified.');
+      this.close();
     },
     async clearFlagCount () {
       await this.$store.dispatch('chat:clearFlagCount', {
         groupId: this.groupId,
         chatId: this.abuseObject.id,
       });
+      this.close();
     },
   },
 };

website/client/components/groups/discovery.vue

@@ -117,6 +117,11 @@ export default {
       this.queryFilters.search = eventData.searchTerm;
 
       let guilds = await this.$store.dispatch('guilds:getPublicGuilds', this.queryFilters);
+      guilds.forEach((guild) => {
+        guild.categorySlugs = guild.categories.map(cat => {
+          return cat.slug;
+        });
+      });
       this.guilds = guilds;
     },
     async updateFilters (eventData) {
@@ -147,7 +152,6 @@ export default {
         this.queryFilters.leader = true;
       }
 
-
       // Size filters
       if (eventData.guildSize && eventData.guildSize.indexOf('gold_tier') !== -1) {
         this.queryFilters.minMemberCount = 1000;
@@ -165,6 +169,11 @@ export default {
       }
 
       let guilds = await this.$store.dispatch('guilds:getPublicGuilds', this.queryFilters);
+      guilds.forEach((guild) => {
+        guild.categorySlugs = guild.categories.map(cat => {
+          return cat.slug;
+        });
+      });
       this.guilds = guilds;
     },
     async fetchGuilds () {
@@ -177,6 +186,11 @@ export default {
       let guilds = await this.$store.dispatch('guilds:getPublicGuilds', this.queryFilters);
       if (guilds.length === 0) this.hasLoadedAllGuilds = true;
 
+      guilds.forEach((guild) => {
+        guild.categorySlugs = guild.categories.map(cat => {
+          return cat.slug;
+        });
+      });
       this.guilds.push(...guilds);
 
       this.lastPageLoaded++;

website/client/components/groups/group.vue

@@ -105,6 +105,14 @@
                         | {{parseFloat(group.quest.progress.hp).toFixed(2)}} / {{parseFloat(questData.boss.hp).toFixed(2)}}
                     .col-6
                       span.float-right {{group.quest.progress.up || 0}} pending damage
+                .row.rage-bar-row(v-if='questData.boss.rage')
+                  .col-12
+                    .grey-progress-bar
+                      .boss-health-bar.rage-bar(:style="{width: (50 / questData.boss.rage) * 100 + '%'}")
+                .row.boss-details.rage-details(v-if='questData.boss.rage')
+                    .col-6
+                      span.float-left
+                        | Rage {{questData.boss.rage.value}}
             button.btn.btn-secondary(v-once, @click="questAbort()") {{ $t('abort') }}
 
     .section-header
@@ -366,6 +374,15 @@
     margin-bottom: .5em;
   }
 
+  .rage-details {
+    margin-bottom: 1em;
+  }
+
+  .boss-health-bar.rage-bar {
+    margin-top: 1em;
+    background-color: orange;
+  }
+
   .grey-progress-bar {
     width: 100%;
     height: 15px;

website/client/components/groups/myGuilds.vue

@@ -119,6 +119,9 @@ export default {
       let user = this.$store.state.user.data;
       let filterGuild = this.filterGuild;
       return this.guilds.filter((guild) => {
+        guild.categorySlugs = guild.categories.map(cat => {
+          return cat.slug;
+        });
         return filterGuild(guild, filters, search, user);
       });
     },

website/client/components/groups/publicGuildItem.vue

@@ -23,8 +23,8 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
             .col-md-12
-              .category-label(v-for="category in guild.categories")
+              .category-label(v-for="category in guild.categorySlugs")
-                | {{category}}
+                | {{$t(category)}}
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 

website/client/components/userMenu/profile.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
 div
   b-modal#profile(title="Profile", size='lg', :hide-footer="true")
-    .row
+    div(slot='modal-header')
-      .col-6.offset-3
+      .profile-actions
-        button.btn.btn-secondary(@click='sendMessage()') Message
+        button.btn.btn-secondary(@click='sendMessage()')
+          .svg-icon.message-icon(v-html="icons.message")
         button.btn.btn-secondary(v-if='userLoggedIn.inbox.blocks.indexOf(user._id) === -1', :tooltip="$t('unblock')",
           @click="blockUser()", tooltip-placement='right')
           span.glyphicon.glyphicon-plus
@@ -12,7 +13,11 @@ div
           :tooltip="$t('unblock')", @click="unblockUser()", tooltip-placement='right')
           span.glyphicon.glyphicon-ban-circle
           | {{$t('unblock')}}
-        button.btn.btn-secondary(@click='openSendGemsModal()') {{ $t('sendGems') }}
+        button.btn.btn-secondary(@click='openSendGemsModal()')
+          .svg-icon.gift-icon(v-html="icons.gift")
+      .row
+        .col-12
+          member-details(:member="user")
     .row
       .col-6.offset-3.text-center.nav
         .nav-item(@click='selectedPage = "profile"', :class="{active: selectedPage === 'profile'}") Profile
@@ -83,11 +88,11 @@ div
           button.btn.btn-primary(@click='save()') {{ $t("save") }}
           button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
 
-    .standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
+    #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
       .row(v-for='(category, key) in achievements')
-        h2.col-12 {{ $t(key+'Achievs') }}
+        h2.col-12.text-center {{ $t(key+'Achievs') }}
         .col-3.text-center(v-for='achievment in category.achievements')
-          div.achievement-container(:data-popover-html='achievment.title + achievment.text',
+          .box.achievement-container(:class='{"achievement-unearned": !achievment.earned}', :data-popover-html='achievment.title + achievment.text',
             popover-placement='achievPopoverPlacement',
             popover-append-to-body='achievAppendToBody')
             div(popover-trigger='mouseenter',
@@ -96,112 +101,141 @@ div
               popover-append-to-body='achievAppendToBody')
                 .achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
                  .counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
-                .achievement(class='achievement-unearned2x', v-if='!achievment.earned')
+                .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievment.earned')
+      hr.col-12
       .row
         .col-6(v-if='user.achievements.challenges')
-          h2 Challeges Won
+          .achievement-icon.achievement-alien
+          h2.text-center Challeges Won
           div(v-for='chal in user.achievements.challenges')
             span {{chal}}
+            hr
         .col-6(v-if='user.achievements.quests')
-          h2 Quests Completed
+          .achievement-icon.achievement-karaoke
+          h2.text-center Quests Completed
           div(v-for='(value, key) in user.achievements.quests')
             span {{ content.quests[key].text() }}
             span {{ value }}
-    .standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
+
+    #stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
       .row
         .col-6
           h2.text-center Equipment
-          // user.items.gear.equipped
           .well
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.eyewear}')
+                div(:class="`shop_${equippedItems.eyewear}`")
               h3 Eyewear
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.head}')
+                div(:class="`shop_${equippedItems.head}`")
               h3 Head Gear
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.headAccessory}')
+                div(:class="`shop_${equippedItems.headAccessory}`")
               h3 Head Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.backAccessory}')
+                div(:class="`shop_${equippedItems.backAccessory}`")
               h3 Back Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.armor}')
+                div(:class="`shop_${equippedItems.armor}`")
               h3 Armor
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.bodyAccessory}')
+                div(:class="`shop_${equippedItems.bodyAccessory}`")
               h3 Body Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.weapon}')
+                div(:class="`shop_${equippedItems.weapon}`")
               h3 Main-Hand
             .col-4.item-wrapper
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: equippedItems.shield}')
+                div(:class="`shop_${equippedItems.shield}`")
               h3 Off-Hand
         .col-6
           h2.text-center Costume
-          // user.items.gear.costume
           .well
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.eyewear}')
+                div(:class="`shop_${costumeItems.eyewear}`")
               h3 Eyewear
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.head}')
+                div(:class="`shop_${costumeItems.head}`")
               h3 Head Gear
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.headAccessory}')
+                div(:class="`shop_${costumeItems.headAccessory}`")
               h3 Head Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.backAccessory}')
+                div(:class="`shop_${costumeItems.backAccessory}`")
               h3 Back Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.armor}')
+                div(:class="`shop_${costumeItems.armor}`")
               h3 Armor
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.bodyAccessory}')
+                div(:class="`shop_${costumeItems.bodyAccessory}`")
               h3 Body Access.
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.weapon}')
+                div(:class="`shop_${costumeItems.weapon}`")
               h3 Main-Hand
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: user.preferences.background}')
-              h3 Background {{ user.preferences.background }}
+                div(:class="user.preferences.background")
+              h3 Background
             .col-4.item-wrapper
-              .box
+              .box(:class='{white: costumeItems.shield}')
+                div(:class="`shop_${costumeItems.shield}`")
               h3 Off-Hand
-      .row
+      .row.pet-mount-row
         .col-6
           h2.text-center(v-once) {{ $t('pets') }}
-          ul
+          .well.pet-mount-well
-            li(ng-if='user.items.currentPet')
+            .row.col-12
-              | {{ $t('activePet') }}:
+              .col-4
+                .box(:class='{white: user.items.currentPet}')
+                  div(:class="user.items.currentPet")
+              .col-8
+                div
                   | {{ formatAnimal(user.items.currentPet, 'pet') }}
-            li
+                div
-              | {{ $t('petsFound') }}:
+                  strong {{ $t('petsFound') }}:
                   | {{ totalCount(user.items.pets) }}
-            li
+                div
-              | {{ $t('beastMasterProgress') }}:
+                  strong {{ $t('beastMasterProgress') }}:
                   | {{ beastMasterProgress(user.items.pets) }}
         .col-6
           h2.text-center(v-once) {{ $t('mounts') }}
-          ul
+          .well.pet-mount-well
-            li(v-if='user.items.currentMount')
+            .row.col-12
-              | {{ $t('activeMount') }}:
+              .col-4
+                .box(:class='{white: user.items.currentMount}')
+                  div(:class="user.items.currentMount")
+              .col-8
+                div
                   | {{ formatAnimal(user.items.currentMount, 'mount') }}
-            li
+                div
-              | {{ $t('mountsTamed') }}:
+                  strong {{ $t('mountsTamed') }}:
-              | {{ totalCount(user.items.mounts) }}
+                  span {{ totalCount(user.items.mounts) }}
-            li
+                div
-              | {{ $t('mountMasterProgress') }}:
+                  strong {{ $t('mountMasterProgress') }}:
-              | {{ mountMasterProgress(user.items.mounts) }}
+                  span {{ mountMasterProgress(user.items.mounts) }}
-      .row#attributes
+      #attributes.row
         hr.col-12
         h2.col-12 Attributes
-      .row.col-6(v-for="(statInfo, stat) in stats")
+        .col-6(v-for="(statInfo, stat) in stats")
+          .row.col-12.stats-column
             .col-4.attribute-label
               span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
                 :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
-          div {{ $t(statInfo.title) }}
+              .stat-title(:class='stat') {{ $t(statInfo.title) }}
               strong.number {{ statsComputed[stat] }}
             .col-6
               ul.bonus-stats
@@ -220,56 +254,73 @@ div
                 li
                   strong Buffs:
                   | {{user.stats.buffs[stat]}}
-      // @TODO: Implement
+      #allocation(v-if='user._id === userLoggedIn._id')
-          div
+        .row.title-row
-            div
+          .col-6
-              p(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
+            h3(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
-              p(v-if='user.stats.points || userLevel100Plus')
+            h3(v-if='user.stats.points || userLevel100Plus')
-                strong.inline
+              | Points Available
+            .counter.badge(v-if='user.stats.points || userLevel100Plus')
               | {{user.stats.points}}&nbsp;
-                strong.hint(popover-trigger='mouseenter',
+          .col-6
-                  popover-placement='right', :popover="$t('levelPopover')") {{ $t('unallocated') }}
+            .float-right
-            div
+              toggle-switch(:label="$t('autoAllocation')", v-model='user.preferences.automaticAllocation', @change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
-              fieldset.auto-allocate
+
-                  .checkbox
+        .row
-                    label
+          .col-3(v-for='(statInfo, stat) in allocateStatsList')
-                      input(type='checkbox', v-model='user.preferences.automaticAllocation',
+            .box.white.row.col-12
-                        @change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation, "preferences.allocationMode": "taskbased"})')
-                      span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('autoAllocationPop')") {{ $t('autoAllocation') }}
-                  form(v-if='user.preferences.automaticAllocation', style='margin-left:1em')
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='flat', v-model='user.preferences.allocationMode',
-                          @change='set({"preferences.allocationMode": "flat"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('evenAllocationPop')") {{ $t('evenAllocation') }}
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='classbased',
-                          v-model='user.preferences.allocationMode', @change='set({"preferences.allocationMode": "classbased"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('classAllocationPop')") {{ $t('classAllocation') }}
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='taskbased', v-model='user.preferences.allocationMode', @change='set({"preferences.allocationMode": "taskbased"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('taskAllocationPop')") {{ $t('taskAllocation') }}
-                  div(v-if='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)')
-                    button.btn.btn-primary.btn-xs(@click='allocateNow({})', popover-trigger='mouseenter', popover-placement='right', :popover="$t('distributePointsPop')")
-                      span.glyphicon.glyphicon-download
-                      |&nbsp;
-                      | {{ $t('distributePoints') }}
-            .row(v-for='(statInfo, stat) in allocateStatsList')
               .col-8
-                span.hint(popover-trigger='mouseenter', popover-placement='right', :popover='$t(statInfo.popover)')
+                div(:class='stat') {{ $t(stats[stat].title) }}
-                | {{ $t(statInfo.title) + user.stats[stat] }}
+                .number {{ user.stats[stat] }}
-              .col-4(v-if='user.stats.points', @click='allocate(stat)')
+                .points pts
-                 button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
+              .col-4
-                  :popover='$t(statInfo.allocatepop)') +
+                .up(v-if='user.stats.points', @click='allocate(stat)')
   private-message-modal(:userIdToMessage='userIdToMessage')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
+<style lang="scss" >
+  #profile {
+    .member-details {
+      .character-name, small, .small-text {
+        color: #878190
+      }
+    }
+
+    .modal-content {
+      background: #f9f9f9;
+    }
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  .profile-actions {
+    float: right;
+    margin-right: 1em;
+
+    button {
+      width: 40px;
+      height: 40px;
+      padding: .8em;
+      margin-right: .5em;
+    }
+  }
+
+  .message-icon {
+    width: 16px;
+  }
+
+  .gift-icon {
+    width: 14px;
+  }
+
+  .pet-mount-row {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
   .header {
     h1 {
       color: #4f2a93;
@@ -287,8 +338,7 @@ div
 
   .nav-item {
     display: inline-block;
-    margin-right: 2em;
+    margin: 0 auto;
-    margin-left: 1em;
     padding: 1em;
   }
 
@@ -317,7 +367,51 @@ div
     padding-top: 1em;
   }
 
-  .item-wrapper {
+  .well.pet-mount-well {
+    padding-bottom: 1em;
+
+    strong {
+      margin-right: .2em;
+    }
+  }
+
+  #achievements {
+    .box {
+      margin: 0 auto;
+      margin-top: 1em;
+      padding-top: 1.2em;
+      background: #fff;
+    }
+
+    .box.achievement-unearned {
+      background-color: #edecee;
+    }
+
+    h2 {
+      margin-top: 1em;
+    }
+
+    .counter.badge {
+      position: absolute;
+      top: .5em;
+      right: 3em;
+      color: #fff;
+      background-color: #ff944c;
+      box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+    }
+
+    .achievement-icon {
+      margin: 0 auto;
+    }
+  }
+
+  .achievement {
+    margin: 0 auto;
+  }
+
   .box {
     width: 94px;
     height: 92px;
@@ -325,10 +419,120 @@ div
     border: dotted 1px #c3c0c7;
   }
 
+  .white {
+    border-radius: 2px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.15), 0 1px 4px 0 rgba(26, 24, 29, 0.1);
+    border: 1px solid transparent;
+  }
+
+  .item-wrapper {
     h3 {
       text-align: center;
     }
   }
+
+  #stats {
+    .box div {
+      margin: 0 auto;
+      margin-top: 1em;
+    }
+  }
+
+  .stats-column {
+    border-radius: 2px;
+    background-color: #ffffff;
+    padding: .5em;
+    margin-bottom: 1em;
+
+    ul {
+      list-style-type: none;
+
+      li strong {
+        margin-right: .3em;
+      }
+    }
+  }
+
+  .stat-title {
+    text-transform: uppercase;
+  }
+
+  .str {
+    color: #f74e52;
+  }
+
+  .int {
+    color: #2995cd;
+  }
+
+  .con {
+    color: #ffa623;
+  }
+
+  .per {
+    color: #4f2a93;
+  }
+
+  #allocation {
+    .title-row {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    .counter.badge {
+      position: absolute;
+      top: -0.5em;
+      left: 10em;
+      color: #fff;
+      background-color: #ff944c;
+      box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+    }
+
+    .box {
+      width: 141px;
+      height: 84px;
+      padding: .5em;
+      margin: 0 auto;
+
+      div {
+        margin-top: 0;
+      }
+
+      .number {
+        font-size: 40px;
+        text-align: left;
+        color: #686274;
+        display: inline-block;
+      }
+
+      .points {
+        display: inline-block;
+        font-weight: bold;
+        line-height: 1.67;
+        text-align: left;
+        color: #878190;
+        margin-left: .5em;
+      }
+
+      .up {
+        border: solid #a5a1ac;
+        border-width: 0 3px 3px 0;
+        display: inline-block;
+        padding: 3px;
+        transform: rotate(-135deg);
+        -webkit-transform: rotate(-135deg);
+        margin-top: 1em;
+      }
+
+      .up:hover {
+        cursor: pointer;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -343,9 +547,11 @@ import statsComputed from  '../../../common/script/libs/statsComputed';
 import autoAllocate from '../../../common/script/fns/autoAllocate';
 import allocate from  '../../../common/script/ops/allocate';
 
+import MemberDetails from '../memberDetails';
 import privateMessageModal from 'client/components/private-message-modal';
 import sendGemsModal from 'client/components/payments/sendGemsModal';
 import markdown from 'client/directives/markdown';
+import toggleSwitch from 'client/components/ui/toggleSwitch';
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -353,6 +559,10 @@ import Content from '../../../common/script/content';
 const DROP_ANIMALS = keys(Content.pets);
 const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
 
+import message from 'assets/svg/message.svg';
+import gift from 'assets/svg/gift.svg';
+import dots from 'assets/svg/dots.svg';
+
 export default {
   directives: {
     markdown,
@@ -361,9 +571,16 @@ export default {
     bModal,
     privateMessageModal,
     sendGemsModal,
+    MemberDetails,
+    toggleSwitch,
   },
   data () {
     return {
+      icons: Object.freeze({
+        message,
+        gift,
+        dots,
+      }),
       userIdToMessage: '',
       userReceivingGems: '',
       editing: false,
@@ -408,6 +625,8 @@ export default {
     ...mapState({
       userLoggedIn: 'user.data',
       flatGear: 'content.gear.flat',
+      equippedItems: 'user.data.items.gear.equipped',
+      costumeItems: 'user.data.items.gear.costume',
     }),
     user () {
       let user = this.userLoggedIn;
@@ -546,10 +765,14 @@ export default {
     },
     allocate (stat) {
       allocate(this.user, stat);
+      axios.post(`/api/v3/user/allocate?stat=${stat}`);
     },
     allocateNow () {
       autoAllocate(this.user);
     },
+    userset (settings) {
+      this.$store.dispatch('user:set', settings);
+    },
     blockUser () {
       this.userLoggedIn.inbox.blocks.push(this.user._id);
       axios.post(`/api/v3/user/block/${this.user._id}`);

website/client/mixins/groupsUtilities.js

@@ -35,7 +35,7 @@ export default {
       }
 
       if (filters.categories && filters.categories.length > 0) {
-        let intersectingCats = intersection(filters.categories, group.categories);
+        let intersectingCats = intersection(filters.categories, group.categorySlugs);
         hasCategories = intersectingCats.length > 0;
       }
 

website/server/models/group.js

@@ -164,7 +164,7 @@ schema.statics.sanitizeUpdate = function sanitizeUpdate (updateObj) {
 };
 
 // Basic fields to fetch for populating a group info
-export let basicFields = 'name type privacy leader summary';
+export let basicFields = 'name type privacy leader summary categories';
 
 schema.pre('remove', true, async function preRemoveGroup (next, done) {
   next();