[WIP] New client userpages (#8868)

* Added background page

* Added stats

* Added achievements

* Added profile

website/client/components/appMenu.vue

@@ -47,8 +47,10 @@ div
             h3 {{ user.profile.name }}
             span.small-text {{ $t('editAvatar') }}
           a.nav-link.dropdown-item(@click.prevent='showInbox()') {{ $t('inbox') }}
+          router-link.dropdown-item(:to="{name: 'backgrounds'}") {{ $t('backgrounds') }}
           router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
           router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
+          router-link.dropdown-item(:to="{name: 'profile'}") {{ $t('profile') }}
           router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
           a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
 </template>

website/client/components/userMenu/achievements.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+  .standard-page
+    h1 Achievements
+    .row
+      .col-12(v-for='(category, key) in achievements')
+        h2 {{ $t(key+'Achievs') }}
+        .row
+          .col-1(v-for='achievment in category.achievements')
+            div.achievement-container(:data-popover-html='achievment.title + achievment.text',
+              popover-placement='achievPopoverPlacement',
+              popover-append-to-body='achievAppendToBody')
+            div(popover-trigger='mouseenter',
+              :data-popover-html='achievment.title + achievment.text',
+              popover-placement='achievPopoverPlacement',
+              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')
+
+      .col-12(:class="{ muted: !user.achievements.challenges.length }")
+        h2(v-once) {{ $t('challengeWinner') }}
+        div(v-for='chal in user.achievements.challenges')
+          span {{chal}}
+
+      .col-12(:class="{ muted: !user.achievements.quests }")
+        h2(v-once) {{ $t('completedQuests') }}
+        div(v-for='(value, key) in user.achievements.quests')
+          span {{ content.quests[k].text() }}
+          span {{ value }}
+</template>
+
+<style lang='scss' scoped>
+  h2 {
+    margin-top: 2em;
+  }
+
+  .achievement-container {
+    margin-bottom: 1em;
+  }
+
+  .counter.badge {
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 44px;
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+
+import achievementsLib from '../../../common/script/libs/achievements';
+import Content from '../../../common/script/content';
+
+export default {
+  data () {
+    return {
+      achievements: {},
+      content: Content,
+    };
+  },
+  mounted () {
+    this.achievements = achievementsLib.getAchievementsForProfile(this.user);
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+};
+</script>

website/client/components/userMenu/backgrounds.vue

@@ -0,0 +1,105 @@
+<template lang="pug">
+  .standard-page
+    h1 {{ $t('backgrounds') }}
+    div.customize-menu(v-for='set in backgroundShopSets')
+      h2 {{set.text}}
+      div(v-if='showPlainBackgroundBlurb(set.identifier, set.items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
+      div(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"')
+        //+gemCost(7)
+        button.btn.btn-primary(@click='unlock(setKeys("background", set.items))') {{ $t('unlockSet', {cost: 15}) }}
+         span.Pet_Currency_Gem1x.inline-gems
+      button.customize-option(v-for='bg in set.items',
+        type='button',
+        :class='[`background_${bg.key}`, backgroundLockedStatus(bg.key)]',
+        ng-click='unlock("background." + bg.key)',
+        :popover-title='bg.text',
+        :popover='bg.notes',
+        popover-trigger='mouseenter')
+        i.glyphicon.glyphicon-lock(ng-if='!user.purchased.background[bg.key]')
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .customize-menu {
+    margin-top: 4em;
+    margin-bottom: 4em;
+  }
+</style>
+
+<script>
+import map from 'lodash/map';
+import get from 'lodash/get';
+import { mapState } from 'client/libs/store';
+
+import { getBackgroundShopSets } from '../../../common/script/libs/shops';
+
+export default {
+  data () {
+    let backgroundShopSets = getBackgroundShopSets();
+
+    return {
+      backgroundShopSets,
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    showPlainBackgroundBlurb (identifier, set) {
+      return identifier === 'incentiveBackgrounds' && !this.ownsSet('background', set);
+    },
+    ownsSet (type, set) {
+      let setOwnedByUser = find(set, (value, key) => {
+        if (type === 'background') key = value.key;
+        return this.user.purchased[type][key];
+      });
+
+      return Boolean(setOwnedByUser);
+    },
+    /**
+     * For gem-unlockable preferences, (a) if owned, select preference (b) else, purchase
+     * @param path: User.preferences <-> User.purchased maps like User.preferences.skin=abc <-> User.purchased.skin.abc.
+     *  Pass in this paramater as "skin.abc". Alternatively, pass as an array ["skin.abc", "skin.xyz"] to unlock sets
+     */
+    unlock (path) {
+      let fullSet = path.indexOf(',') !== -1;
+      let isBackground = Boolean(path.indexOf('background.'));
+
+      let cost;
+
+      if (isBackground) {
+        cost = fullSet ? 3.75 : 1.75; // (Backgrounds) 15G per set, 7G per individual
+      } else {
+        cost = fullSet ? 1.25 : 0.5; // (Hair, skin, etc) 5G per set, 2G per individual
+      }
+
+      let loginIncentives = ['background.blue', 'background.green', 'background.red', 'background.purple', 'background.yellow', 'background.violet'];
+      if (!loginIncentives.contains(loginIncentives)) {
+        if (fullSet) {
+          if (confirm(window.env.t('purchaseFor', {cost: cost * 4})) !== true) return;
+          // @TODO: implement gem modal
+          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
+        } else if (!get(this.user, `purchased.${path}`)) {
+          if (confirm(window.env.t('purchaseFor', {cost: cost * 4})) !== true) return;
+          // @TODO: implement gem modal
+          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
+        }
+      }
+      // @TODO: Add when we implment the user calls
+      // User.unlock({ query:{ path: path } });
+    },
+    setKeys (type, _set) {
+      return map(_set, (v, k) => {
+        if (type === 'background') k = v.key;
+        return `${type}.${k}`;
+      }).join(',');
+    },
+    backgroundLockedStatus (bgKey) {
+      let backgroundClass = 'background-locked';
+      if (this.user.purchased.background[bgKey]) backgroundClass = 'background-unlocked';
+      return backgroundClass;
+    },
+  },
+};
+</script>

website/client/components/userMenu/profile.vue

@@ -0,0 +1,136 @@
+<template lang="pug">
+.standard-page
+  h2 Profile
+  .row
+    .col-md-12(v-if='!editing')
+      button.btn.btn-default(@click='editing = true') {{ $t('edit') }}
+      h2 {{ $t('displayName') }}
+      span(v-if='user.profile.name') {{user.profile.name}}
+      p
+        small.muted {{ $t('displayNameDescription1') }}
+          | &nbsp;
+          a(href='/#/options/settings/settings') {{ $t('displayNameDescription2') }}
+          | &nbsp;
+          | {{ $t('displayNameDescription3') }}
+      span.muted(ng-hide='user.profile.name') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+
+      h2 {{ $t('displayPhoto') }}
+      img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
+      span.muted(ng-hide='user.profile.imageUrl') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+
+      h2 {{ $t('displayBlurb') }}
+      markdown(v-if='user.profile.blurb', text='user.profile.blurb')
+      span.muted(ng-hide='user.profile.blurb') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+      //{{user.profile.blurb | linky:'_blank'}}
+    .col-md-12(v-if='editing')
+      .alert.alert-info.alert-sm
+        | {{ $t("communityGuidelinesWarning", managerEmail) }}
+      button.btn.btn-primary(type='submit', @click='save()') {{ $t("save") }}
+      // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+      .form-group
+        label {{ $t('displayName') }}
+        input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
+      .form-group
+        label {{ $t('photoUrl') }}
+        input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
+      .form-group
+        label {{ $t('displayBlurb') }}
+        textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
+        // include ../../shared/formatting-help
+  .row
+    .col-md-6
+      h2 {{ $t('totalCheckinsTitle') }}
+      span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
+    .col-md-6
+      h2
+        | {{getProgressDisplay()}}
+      .progress
+        .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+          span.sr-only {{ incentivesProgress }}% Complete
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  h2 {
+    margin-top: 2em;
+  }
+</style>
+
+<script>
+import each from 'lodash/each';
+import { mapState } from 'client/libs/store';
+
+// @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
+const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
+import Content from '../../../common/script/content';
+
+export default {
+  data () {
+    return {
+      editing: false,
+      editingProfile: {
+        name: '',
+        imageUrl: '',
+        blurb: '',
+      },
+      managerEmail: {
+        hrefBlankCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
+      },
+    };
+  },
+  mounted () {
+    this.editingProfile.name = this.user.profile.name;
+    this.editingProfile.imageUrl = this.user.profile.imageUrl;
+    this.editingProfile.imageUrl = this.user.profile.imageUrl;
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    incentivesProgress () {
+      return this.getIncentivesProgress();
+    },
+  },
+  methods: {
+    getProgressDisplay () {
+      let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
+      if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
+      let nextRewardAt = currentLoginDay.nextRewardAt;
+      if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
+      // if we are on a reward day, let's show progress relative to this
+      if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
+      if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
+
+      let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
+      let end = nextRewardAt - currentLoginDay.prevRewardKey;
+      return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
+    },
+    getIncentivesProgress () {
+      let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
+      if (!currentLoginDay) return 0;
+      let previousRewardDay = currentLoginDay.prevRewardKey;
+      let nextRewardAt = currentLoginDay.nextRewardAt;
+      return (this.user.loginIncentives - previousRewardDay) / (nextRewardAt - previousRewardDay) * 100;
+    },
+    save () {
+      let values = {};
+
+      each(this.editingProfile, (value, key) => {
+        // Using toString because we need to compare two arrays (websites)
+        let curVal = this.user.profile[key];
+        if (!curVal || this.editingProfile[key].toString() !== curVal.toString()) values[`profile.${key}`] = value;
+      });
+
+      // @TODO: dispatch
+      // User.set(values);
+
+      this.editing = false;
+    },
+  },
+};
+</script>

website/client/components/userMenu/stats.vue

@@ -0,0 +1,279 @@
+<template lang="pug">
+  .standard-page
+    h1 Stats
+    .row
+      .col-4
+        div
+          h3 Basics
+          ul
+            li Health: {{user.stats.hp}}/{{user.stats.maxHealth}}
+            li Mana: {{user.stats.mp}}/{{user.stats.maxMP}}
+            li Gold: {{user.stats.gp}}
+            li Level: {{user.stats.lvl}}
+            li Experience: {{user.stats.exp}}
+
+        div(v-if='user.flags.itemsEnabled')
+          h3 Battle Gear
+          ul
+            li(v-for='(key, itemType) in user.items.gear.equipped', v-if='flatGear[key]')
+              strong {{ flatGear[key].text() }}
+              strong(v-if='flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int') :&nbsp;
+                span(v-for='stat in ["str","con","per","int"]', v-if='flatGear[key][stat]') {{flatGear[key][stat]}} {{ $t(stat) }}&nbsp;
+
+        div(v-if='user.preferences.costume')
+          h4(v-once) {{ $t('costume') }}
+          div
+            div(ng-repeat='(key, itemType) in user.items.gear.costume')
+              strong {{flatGear[key].text()}}
+
+        div
+          h3 Background
+          ul
+            li(v-if='!user.preferences.background') None
+            li(v-if='user.preferences.background') {{ user.preferences.background }}
+
+        div(ng-if='user.flags.dropsEnabled')
+          h3(v-once) {{ $t('pets') }}
+          ul
+            li(ng-if='user.items.currentPet')
+              | {{ $t('activePet') }}:
+              | {{ formatAnimal(user.items.currentPet, 'pet') }}
+            li
+              | {{ $t('petsFound') }}:
+              | {{ totalCount(user.items.pets) }}
+            li
+              | {{ $t('beastMasterProgress') }}:
+              | {{ beastMasterProgress(user.items.pets) }}
+
+          h3(v-once) {{ $t('mounts') }}
+          ul
+            li(v-if='user.items.currentMount')
+              | {{ $t('activeMount') }}:
+              | {{ formatAnimal(user.items.currentMount, 'mount') }}
+            li
+              | {{ $t('mountsTamed') }}:
+              | {{ totalCount(user.items.mounts) }}
+            li
+              | {{ $t('mountMasterProgress') }}:
+              | {{ mountMasterProgress(user.items.mounts) }}
+
+      .col-4
+        h3(v-once) {{ $t('attributes') }}
+        .row(v-for="(statInfo, stat) in stats")
+          .col-4
+            span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
+              :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
+              strong {{ $t(statInfo.title) }}
+            strong : {{ statsComputed[stat] }}
+          .col-6
+            ul.bonus-stats
+              li
+                | {{ $t('levelBonus') }}
+                | {{statsComputed.levelBonus[stat]}}
+              li
+                | {{ $t('gearBonus') }}
+                |  {{statsComputed.gearBonus[stat]}}
+              li
+                | {{ $t('classBonus') }}
+                |  {{statsComputed.classBonus[stat]}}
+              li
+                | {{ $t('allocatedPoints') }}
+                |  {{user.stats[stat]}}
+              li
+                | {{ $t('buffs') }}
+                | {{user.stats.buffs[stat]}}
+
+        div(v-if='user.stats.buffs.stealth')
+          strong.hint(:popover-title="$t('stealth')", popover-trigger='mouseenter',
+            popover-placement='right', :popover="$t('stealthNewDay')", v-once)
+            | {{ $t('stealth') }}
+          strong : {{user.stats.buffs.stealth}}&nbsp;
+
+        div(v-if='user.stats.buffs.streaks')
+          div
+            strong.hint(popover-title="$t('streaksFrozen')", popover-trigger='mouseenter',
+              popover-placement='right', :popover="$t('streaksFrozenText')")
+            | {{ $t('streaksFrozen') }}
+
+      .col-4(v-if='user.flags.classSelected && !user.preferences.disableClasses')
+          h3(v-once) {{ $t('characterBuild') }}
+          h4(v-once) {{ $t('class') + ': ' }}
+            span {{ classText }}&nbsp;
+            button.btn.btn-danger.btn-xs(@click='changeClass(null)', v-once) {{ $t('changeClass') }}
+            small.cost 3
+              span.Pet_Currency_Gem1x.inline-gems
+
+          div
+            div
+              p(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
+              p(v-if='user.stats.points || userLevel100Plus')
+                strong.inline
+                  | {{user.stats.points}}&nbsp;
+                strong.hint(popover-trigger='mouseenter',
+                  popover-placement='right', :popover="$t('levelPopover')") {{ $t('unallocated') }}
+            div
+              fieldset.auto-allocate
+                  .checkbox
+                    label
+                      input(type='checkbox', v-model='user.preferences.automaticAllocation',
+                        @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)')
+                | {{ $t(statInfo.title) + user.stats[stat] }}
+              .col-4(v-if='user.stats.points', @click='allocate(stat)')
+                 button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
+                  :popover='$t(statInfo.allocatepop)') +
+</template>
+
+<style lang='scss' scoped>
+
+  .btn-xs {
+    font-size: 12px;
+    padding: .2em;
+  }
+
+</style>
+
+<script>
+import size from 'lodash/size';
+import keys from 'lodash/keys';
+import { mapState } from 'client/libs/store';
+import Content from '../../../common/script/content';
+import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
+import statsComputed from  '../../../common/script/libs/statsComputed';
+import autoAllocate from '../../../common/script/fns/autoAllocate';
+import changeClass from  '../../../common/script/ops/changeClass';
+import allocate from  '../../../common/script/ops/allocate';
+
+const DROP_ANIMALS = keys(Content.pets);
+const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
+
+export default {
+  data () {
+    return {
+      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' },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+      flatGear: 'content.gear.flat',
+    }),
+    statsComputed () {
+      return statsComputed(this.user);
+    },
+    userLevel100Plus () {
+      return this.user.stats.lvl >= 100;
+    },
+    classText () {
+      let classTexts = {
+        warrior: this.$t('warrior'),
+        wizard: this.$t('mage'),
+        rogue: this.$t('rogue'),
+        healer: this.$t('healer'),
+      };
+
+      return classTexts[this.user.stats.class];
+    },
+  },
+  methods: {
+    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 window.env.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;
+    },
+    changeClass () {
+      changeClass(this.user);
+    },
+    allocate (stat) {
+      allocate(this.user, stat);
+    },
+    allocateNow () {
+      autoAllocate(this.user);
+    },
+  },
+};
+</script>

website/client/router.js

@@ -12,7 +12,12 @@ import Page from './components/page';
 const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
 const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
 
+// User Pages
 const CreatorIntro = () => import(/* webpackChunkName: "creator" */'./components/creatorIntro');
+const BackgroundsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/backgrounds');
+const StatsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/stats');
+const AchievementsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/achievements');
+const ProfilePage = () => import(/* webpackChunkName: "user" */'./components/userMenu/profile');
 
 // Except for tasks that are always loaded all the other main level
 // All the main level
@@ -114,8 +119,10 @@ const router = new VueRouter({
             },
           ],
         },
-        { name: 'stats', path: 'stats', component: Page },
-        { name: 'achievements', path: 'achievements', component: Page },
+        { name: 'backgrounds', path: 'backgrounds', component: BackgroundsPage },
+        { name: 'stats', path: 'stats', component: StatsPage },
+        { name: 'achievements', path: 'achievements', component: AchievementsPage },
+        { name: 'profile', path: 'profile', component: ProfilePage },
         { name: 'settings', path: 'settings', component: Page },
       ],
     },