split profile and profileStats (#10185)

website/client/components/userMenu/profile.vue

@@ -134,146 +134,11 @@ div
           h2.text-center {{$t('questsCompleted')}}
           div(v-for='(value, key) in user.achievements.quests')
             span {{ content.quests[key].text() }} ({{ value }})
-    #stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
+    profileStats(
-      .row
+      :user='user',
-        .col-12.col-md-6
+      v-show='selectedPage === "stats"',
-          h2.text-center {{$t('equipment')}}
+      :showAllocation='showAllocation()',
-          .well
+      v-if='user.preferences')
-            .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-              .box(
-                :id="key",
-                v-if="label !== 'skip'",
-                :class='{white: equippedItems[key] && equippedItems[key].indexOf("base_0") === -1}'
-              )
-                div(:class="`shop_${equippedItems[key]}`")
-              b-popover(
-                v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1",
-                :target="key",
-                triggers="hover",
-                :placement="'bottom'",
-                :preventOverflow="false",
-              )
-                h4.gearTitle {{ getGearTitle(equippedItems[key]) }}
-                attributesGrid.attributesGrid(
-                  :item="content.gear.flat[equippedItems[key]]",
-                )
-
-              h3(v-if="label !== 'skip'") {{ label }}
-        .col-12.col-md-6
-          h2.text-center {{$t('costume')}}
-          .well
-            // Use similar for loop for costume items, except show background if label is 'skip'.
-            .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-              // Append a "C" to the key name since HTML IDs have to be unique.
-              .box(
-                :id="key + 'C'",
-                v-if="label !== 'skip'",
-                :class='{white: costumeItems[key] && costumeItems[key].indexOf("base_0") === -1}'
-              )
-                div(:class="`shop_${costumeItems[key]}`")
-              // Show background on 8th tile rather than a piece of equipment.
-              .box(v-if="label === 'skip'",
-                :class='{white: user.preferences.background}', style="overflow:hidden"
-              )
-                div(:class="'icon_background_' + user.preferences.background")
-              b-popover(
-                v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1",
-                :target="key + 'C'",
-                triggers="hover",
-                :placement="'bottom'",
-                :preventOverflow="false",
-              )
-                h4.gearTitle {{ getGearTitle(costumeItems[key]) }}
-                attributesGrid.attributesGrid(
-                  :item="content.gear.flat[costumeItems[key]]",
-                )
-
-              h3(v-if="label !== 'skip'") {{ label }}
-              h3(v-else) {{ $t('background') }}
-
-      .row.pet-mount-row
-        .col-12.col-md-6
-          h2.text-center(v-once) {{ $t('pets') }}
-          .well.pet-mount-well
-            .row.col-12
-              .col-12.col-md-4
-                .box(:class='{white: user.items.currentPet}')
-                  .Pet(:class="`Pet-${user.items.currentPet}`")
-              .col-12.col-md-8
-                div
-                  | {{ formatAnimal(user.items.currentPet, 'pet') }}
-                div
-                  strong {{ $t('petsFound') }}:
-                  | {{ totalCount(user.items.pets) }}
-                div
-                  strong {{ $t('beastMasterProgress') }}:
-                  | {{ beastMasterProgress(user.items.pets) }}
-        .col-12.col-md-6
-          h2.text-center(v-once) {{ $t('mounts') }}
-          .well.pet-mount-well
-            .row.col-12
-              .col-12.col-md-4
-                .box(:class='{white: user.items.currentMount}')
-                  .mount(:class="`Mount_Icon_${user.items.currentMount}`")
-              .col-12.col-md-8
-                div
-                  | {{ formatAnimal(user.items.currentMount, 'mount') }}
-                div
-                  strong {{ $t('mountsTamed') }}:
-                  span {{ totalCount(user.items.mounts) }}
-                div
-                  strong {{ $t('mountMasterProgress') }}:
-                  span {{ mountMasterProgress(user.items.mounts) }}
-      #attributes.row
-        hr.col-12
-        h2.col-12 {{$t('attributes')}}
-        .col-12.col-md-6(v-for="(statInfo, stat) in stats")
-          .row.col-12.stats-column
-            .col-12.col-md-4.attribute-label
-              span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
-                :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
-              .stat-title(:class='stat') {{ $t(statInfo.title) }}
-              strong.number {{ statsComputed[stat] | floorWholeNumber }}
-            .col-12.col-md-6
-              ul.bonus-stats
-                li
-                  strong {{$t('level')}}:
-                  | {{statsComputed.levelBonus[stat]}}
-                li
-                  strong {{$t('equipment')}}:
-                  | {{statsComputed.gearBonus[stat]}}
-                li
-                  strong {{$t('class')}}:
-                  | {{statsComputed.classBonus[stat]}}
-                li
-                  strong {{$t('allocated')}}:
-                  | {{user.stats[stat]}}
-                li
-                  strong {{$t('buffs')}}:
-                  | {{user.stats.buffs[stat]}}
-      #allocation(v-if='user._id === userLoggedIn._id && hasClass')
-        .row.title-row
-          .col-12.col-md-6
-            h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
-            h3(v-if='user.stats.points || userLevel100Plus')
-              | {{$t('pointsAvailable')}}
-              .counter.badge(v-if='user.stats.points || userLevel100Plus')
-                | {{user.stats.points}} 
-          .col-12.col-md-6
-            .float-right
-              toggle-switch(:label="$t('autoAllocation')",
-                v-model='user.preferences.automaticAllocation',
-                @change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
-
-        .row
-          .col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
-            .box.white.row.col-12
-              .col-12
-                div(:class='stat') {{ $t(stats[stat].title) }}
-                .number {{ user.stats[stat] }}
-                .points {{$t('pts')}}
-              .col-12.col-md-4
-                .up(v-if='user.stats.points', @click='allocate(stat)')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
@@ -345,15 +210,6 @@ div
     color: #686274;
   }
 
-  .pet-mount-row {
-    margin-top: 2em;
-    margin-bottom: 2em;
-  }
-
-  .mount {
-    margin-top: -0.2em !important;
-  }
-
   .photo img {
     max-width: 100%;
   }
@@ -385,33 +241,6 @@ div
     cursor: pointer;
   }
 
-  #attributes {
-    .number {
-      font-size: 64px;
-      font-weight: bold;
-      color: #686274;
-    }
-
-    .attribute-label {
-      text-align: center;
-    }
-  }
-
-  .well {
-    background-color: #edecee;
-    border-radius: 2px;
-    padding: 0.4em;
-    padding-top: 1em;
-  }
-
-  .well.pet-mount-well {
-    padding-bottom: 1em;
-
-    strong {
-      margin-right: .2em;
-    }
-  }
-
   #achievements {
     .box {
       margin: 0 auto;
@@ -470,107 +299,7 @@ div
     }
   }
 
-  #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: relative;
-      top: -0.25em;
-      left: 0.5em;
-      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: 148px;
-      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>
@@ -578,25 +307,17 @@ import moment from 'moment';
 import axios from 'axios';
 import each from 'lodash/each';
 import { mapState } from 'client/libs/store';
-import size from 'lodash/size';
-import keys from 'lodash/keys';
 import cloneDeep from 'lodash/cloneDeep';
-import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
-import statsComputed from  '../../../common/script/libs/statsComputed';
-import autoAllocate from '../../../common/script/fns/autoAllocate';
-import allocate from  '../../../common/script/ops/stats/allocate';
 
 import MemberDetails from '../memberDetails';
 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';
 import Content from '../../../common/script/content';
-import attributesGrid from 'client/components/inventory/equipment/attributesGrid';
+import profileStats from './profileStats';
-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';
@@ -616,8 +337,7 @@ export default {
   components: {
     sendGemsModal,
     MemberDetails,
-    toggleSwitch,
+    profileStats,
-    attributesGrid,
   },
   data () {
     return {
@@ -649,41 +369,6 @@ export default {
       selectedPage: 'profile',
       achievements: {},
       content: Content,
-      equipTypes: {
-        eyewear: this.$t('eyewear'),
-        head: this.$t('headgearCapitalized'),
-        headAccessory: this.$t('headAccess'),
-        back: this.$t('backAccess'),
-        armor: this.$t('armorCapitalized'),
-        body: this.$t('bodyAccess'),
-        weapon: this.$t('mainHand'),
-        _skip: 'skip',
-        shield: this.$t('offHand'),
-      },
-      stats: {
-        str: {
-          title: 'strength',
-          popover: 'strengthText',
-        },
-        int: {
-          title: 'intelligence',
-          popover: 'intText',
-        },
-        con: {
-          title: 'constitution',
-          popover: 'conText',
-        },
-        per: {
-          title: 'perception',
-          popover: 'perText',
-        },
-      },
-      allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
-        int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
-        con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
-        per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
-      },
     };
   },
   mounted () {
@@ -746,12 +431,7 @@ export default {
     incentivesProgress () {
       return this.getIncentivesProgress();
     },
-    statsComputed () {
+
-      return statsComputed(this.user);
-    },
-    userLevel100Plus () {
-      return this.user.stats.lvl >= 100;
-    },
     classText () {
       let classTexts = {
         warrior: this.$t('warrior'),
@@ -786,9 +466,6 @@ export default {
         userName: this.user.profile.name,
       });
     },
-    getGearTitle (key) {
-      return this.flatGear[key].text();
-    },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
@@ -828,60 +505,6 @@ export default {
 
       this.editing = false;
     },
-    formatAnimal (animalName, type) {
-      if (type === 'pet') {
-        if (Content.petInfo.hasOwnProperty(animalName)) {
-          return Content.petInfo[animalName].text();
-        } else {
-          return this.$t('noActivePet');
-        }
-      } else if (type === 'mount') {
-        if (Content.mountInfo.hasOwnProperty(animalName)) {
-          return Content.mountInfo[animalName].text();
-        } else {
-          return this.$t('noActiveMount');
-        }
-      }
-    },
-    formatBackground (background) {
-      let bg = Content.appearances.background;
-
-      if (bg.hasOwnProperty(background)) {
-        return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
-      }
-
-      return this.$t('noBackground');
-    },
-    totalCount (objectToCount) {
-      let total = size(objectToCount);
-      return total;
-    },
-    beastMasterProgress (pets) {
-      let dropPetsFound = beastMasterProgress(pets);
-      let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
-
-      return display;
-    },
-    mountMasterProgress (mounts) {
-      let dropMountsFound = mountMasterProgress(mounts);
-      let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
-
-      return display;
-    },
-    formatOutOfTotalDisplay (stat, totalStat) {
-      let display = `${stat}/${totalStat}`;
-      return display;
-    },
-    allocate (stat) {
-      allocate(this.user, {query: { 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}`);
@@ -925,6 +548,10 @@ export default {
       this.hero = await this.$store.dispatch('hall:getHero', { uuid: this.user._id });
       this.adminToolsLoaded = true;
     },
+    showAllocation () {
+      return this.user._id === this.userLoggedIn._id && this.hasClass;
+    },
+
   },
 };
 </script>

website/client/components/userMenu/profileStats.vue

@@ -0,0 +1,460 @@
+<template lang="pug">
+  #stats.standard-page
+    .row
+      .col-12.col-md-6
+        h2.text-center {{$t('equipment')}}
+        .well
+          .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
+            .box(
+              :id="key",
+              v-if="label !== 'skip'",
+              :class='{white: equippedItems[key] && equippedItems[key].indexOf("base_0") === -1}'
+            )
+              div(:class="`shop_${equippedItems[key]}`")
+            b-popover(
+              v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1",
+              :target="key",
+              triggers="hover",
+              :placement="'bottom'",
+              :preventOverflow="false",
+            )
+              h4.gearTitle {{ getGearTitle(equippedItems[key]) }}
+              attributesGrid.attributesGrid(
+                :item="content.gear.flat[equippedItems[key]]",
+              )
+
+            h3(v-if="label !== 'skip'") {{ label }}
+      .col-12.col-md-6
+        h2.text-center {{$t('costume')}}
+        .well
+          // Use similar for loop for costume items, except show background if label is 'skip'.
+          .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
+            // Append a "C" to the key name since HTML IDs have to be unique.
+            .box(
+              :id="key + 'C'",
+              v-if="label !== 'skip'",
+              :class='{white: costumeItems[key] && costumeItems[key].indexOf("base_0") === -1}'
+            )
+              div(:class="`shop_${costumeItems[key]}`")
+            // Show background on 8th tile rather than a piece of equipment.
+            .box(v-if="label === 'skip'",
+              :class='{white: user.preferences.background}', style="overflow:hidden"
+            )
+              div(:class="'icon_background_' + user.preferences.background")
+            b-popover(
+              v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1",
+              :target="key + 'C'",
+              triggers="hover",
+              :placement="'bottom'",
+              :preventOverflow="false",
+            )
+              h4.gearTitle {{ getGearTitle(costumeItems[key]) }}
+              attributesGrid.attributesGrid(
+               :item="content.gear.flat[costumeItems[key]]",
+              )
+
+            h3(v-if="label !== 'skip'") {{ label }}
+            h3(v-else) {{ $t('background') }}
+
+    .row.pet-mount-row
+      .col-12.col-md-6
+        h2.text-center(v-once) {{ $t('pets') }}
+        .well.pet-mount-well
+          .row.col-12
+            .col-12.col-md-4
+              .box(:class='{white: user.items.currentPet}')
+                .Pet(:class="`Pet-${user.items.currentPet}`")
+            .col-12.col-md-8
+              div
+                | {{ formatAnimal(user.items.currentPet, 'pet') }}
+              div
+                strong {{ $t('petsFound') }}:
+                | {{ totalCount(user.items.pets) }}
+              div
+                strong {{ $t('beastMasterProgress') }}:
+                | {{ beastMasterProgress(user.items.pets) }}
+      .col-12.col-md-6
+        h2.text-center(v-once) {{ $t('mounts') }}
+        .well.pet-mount-well
+          .row.col-12
+            .col-12.col-md-4
+              .box(:class='{white: user.items.currentMount}')
+                .mount(:class="`Mount_Icon_${user.items.currentMount}`")
+            .col-12.col-md-8
+              div
+                | {{ formatAnimal(user.items.currentMount, 'mount') }}
+              div
+                strong {{ $t('mountsTamed') }}:
+                span {{ totalCount(user.items.mounts) }}
+              div
+                strong {{ $t('mountMasterProgress') }}:
+                span {{ mountMasterProgress(user.items.mounts) }}
+    #attributes.row
+      hr.col-12
+      h2.col-12 {{$t('attributes')}}
+      .col-12.col-md-6(v-for="(statInfo, stat) in stats")
+        .row.col-12.stats-column
+          .col-12.col-md-4.attribute-label
+            span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
+              :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
+            .stat-title(:class='stat') {{ $t(statInfo.title) }}
+            strong.number {{ statsComputed[stat] | floorWholeNumber }}
+          .col-12.col-md-6
+            ul.bonus-stats
+              li
+                strong {{$t('level')}}:
+                | {{statsComputed.levelBonus[stat]}}
+              li
+                strong {{$t('equipment')}}:
+                | {{statsComputed.gearBonus[stat]}}
+              li
+                strong {{$t('class')}}:
+                | {{statsComputed.classBonus[stat]}}
+              li
+                strong {{$t('allocated')}}:
+                | {{user.stats[stat]}}
+              li
+                strong {{$t('buffs')}}:
+                | {{user.stats.buffs[stat]}}
+    #allocation(v-if='showAllocation')
+      .row.title-row
+        .col-12.col-md-6
+          h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
+          h3(v-if='user.stats.points || userLevel100Plus')
+            | {{$t('pointsAvailable')}}
+            .counter.badge(v-if='user.stats.points || userLevel100Plus')
+              | {{user.stats.points}}&nbsp;
+        .col-12.col-md-6
+          .float-right
+            toggle-switch(
+              :label="$t('autoAllocation')",
+              v-model='user.preferences.automaticAllocation',
+              @change='setAutoAllocate()'
+            )
+
+      .row
+        .col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
+          .box.white.row.col-12
+            .col-12
+              div(:class='stat') {{ $t(stats[stat].title) }}
+              .number {{ user.stats[stat] }}
+              .points {{$t('pts')}}
+            .col-12.col-md-4
+              .up(v-if='user.stats.points', @click='allocate(stat)')
+</template>
+
+<script>
+  import toggleSwitch from 'client/components/ui/toggleSwitch';
+  import attributesGrid from 'client/components/inventory/equipment/attributesGrid';
+
+  import { mapState } from 'client/libs/store';
+  import Content from '../../../common/script/content';
+  import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
+  import autoAllocate from '../../../common/script/fns/autoAllocate';
+  import allocate from  '../../../common/script/ops/stats/allocate';
+  import statsComputed from  '../../../common/script/libs/statsComputed';
+
+  import axios from 'axios';
+
+  import size from 'lodash/size';
+  import keys from 'lodash/keys';
+
+  const DROP_ANIMALS = keys(Content.pets);
+  const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
+  export default {
+    props: ['user', 'showAllocation'],
+    components: {
+      toggleSwitch,
+      attributesGrid,
+    },
+    data () {
+      return {
+        equipTypes: {
+          eyewear: this.$t('eyewear'),
+          head: this.$t('headgearCapitalized'),
+          headAccessory: this.$t('headAccess'),
+          back: this.$t('backAccess'),
+          armor: this.$t('armorCapitalized'),
+          body: this.$t('bodyAccess'),
+          weapon: this.$t('mainHand'),
+          _skip: 'skip',
+          shield: this.$t('offHand'),
+        },
+
+        allocateStatsList: {
+          str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
+          int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
+          con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
+          per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
+        },
+
+        stats: {
+          str: {
+            title: 'strength',
+            popover: 'strengthText',
+          },
+          int: {
+            title: 'intelligence',
+            popover: 'intText',
+          },
+          con: {
+            title: 'constitution',
+            popover: 'conText',
+          },
+          per: {
+            title: 'perception',
+            popover: 'perText',
+          },
+        },
+
+        content: Content,
+      };
+    },
+    computed: {
+      ...mapState({
+        flatGear: 'content.gear.flat',
+      }),
+      equippedItems () {
+        return this.user.items.gear.equipped;
+      },
+      costumeItems () {
+        return this.user.items.gear.costume;
+      },
+      statsComputed () {
+        return statsComputed(this.user);
+      },
+      userLevel100Plus () {
+        return this.user.stats.lvl >= 100;
+      },
+    },
+    methods: {
+      getGearTitle (key) {
+        return this.flatGear[key].text();
+      },
+      totalCount (objectToCount) {
+        let total = size(objectToCount);
+        return total;
+      },
+      formatAnimal (animalName, type) {
+        if (type === 'pet') {
+          if (Content.petInfo.hasOwnProperty(animalName)) {
+            return Content.petInfo[animalName].text();
+          } else {
+            return this.$t('noActivePet');
+          }
+        } else if (type === 'mount') {
+          if (Content.mountInfo.hasOwnProperty(animalName)) {
+            return Content.mountInfo[animalName].text();
+          } else {
+            return this.$t('noActiveMount');
+          }
+        }
+      },
+      formatBackground (background) {
+        let bg = Content.appearances.background;
+
+        if (bg.hasOwnProperty(background)) {
+          return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
+        }
+
+        return this.$t('noBackground');
+      },
+      beastMasterProgress (pets) {
+        let dropPetsFound = beastMasterProgress(pets);
+        let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
+
+        return display;
+      },
+      mountMasterProgress (mounts) {
+        let dropMountsFound = mountMasterProgress(mounts);
+        let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
+
+        return display;
+      },
+
+      formatOutOfTotalDisplay (stat, totalStat) {
+        let display = `${stat}/${totalStat}`;
+        return display;
+      },
+      allocate (stat) {
+        allocate(this.user, {query: { stat }});
+        axios.post(`/api/v3/user/allocate?stat=${stat}`);
+      },
+      allocateNow () {
+        autoAllocate(this.user);
+      },
+      setAutoAllocate () {
+        let settings = {
+          'preferences.automaticAllocation': Boolean(this.user.preferences.automaticAllocation),
+          'preferences.allocationMode': 'taskbased',
+        };
+
+        this.$store.dispatch('user:set', settings);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  #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: relative;
+      top: -0.25em;
+      left: 0.5em;
+      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: 148px;
+      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;
+      }
+
+    }
+  }
+
+  #attributes {
+    .number {
+      font-size: 64px;
+      font-weight: bold;
+      color: #686274;
+    }
+
+    .attribute-label {
+      text-align: center;
+    }
+  }
+
+  .well {
+    background-color: #edecee;
+    border-radius: 2px;
+    padding: 0.4em;
+    padding-top: 1em;
+  }
+
+  .well.pet-mount-well {
+    padding-bottom: 1em;
+
+    strong {
+      margin-right: .2em;
+    }
+  }
+
+  .box {
+    width: 94px;
+    height: 92px;
+    border-radius: 2px;
+    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;
+    }
+  }
+
+  .pet-mount-row {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .mount {
+    margin-top: -0.2em !important;
+  }
+
+</style>