Separate stats and achievs pages (#7804)

* separate stats and achievs tabs, move 'enable class system' button to stats

* move stats layout stuff from profile.jade to stats.jade

* shuffle stats page into more columns

* separate stats and achievs in expandable navbar submenus

* add multiple options for stats.jade: col1, col2, all; fixes weirdly crowded members modal

* make stats and achievs strings consistent

* remove mobile checks in profile.jade

* fix merge issue

common/locales/en/character.json

@@ -1,6 +1,5 @@
 {
     "communityGuidelinesWarning": "Please keep in mind that your Display Name, profile photo, and blurb must comply with the <a href='https://habitica.com/static/community-guidelines' target='_blank'>Community Guidelines</a> (e.g. no profanity, no adult topics, no insults, etc). If you have any questions about whether or not something is appropriate, feel free to email <a href='mailto:admin@habitica.com' target='blank'>admin@habitica.com</a>!",
-    "statsAch": "Stats & Achievements",
     "profile": "Profile",
     "avatar": "Customize Avatar",
     "other": "Other",
@@ -83,7 +82,8 @@
     "allocateInt": "Points allocated to Intelligence:",
     "allocateIntPop": "Add a point to Intelligence",
     "noMoreAllocate": "Now that you've hit level 100, you won't gain any more Attribute Points. You can continue leveling up, or start a new adventure at level 1 by using the <a href='http://habitica.wikia.com/wiki/Orb_of_Rebirth' target='_blank'>Orb of Rebirth</a>, now available for free in the Market.",
-    "stats": "Avatar Stats",
+    "stats": "Stats",
+    "achievs": "Achievements",
     "strength": "Strength",
     "strengthText": "Strength increases the chance of random \"critical hits\" and the Gold, Experience, and drop chance boost from them. It also helps deal damage to boss monsters.",
     "constitution": "Constitution",

common/locales/en/generic.json

@@ -7,7 +7,8 @@
     "titleTasks": "Tasks",
     "titleAvatar": "Avatar",
     "titleBackgrounds": "Backgrounds",
-    "titleStats": "Stats & Achievements",
+    "titleStats": "Stats",
+    "titleAchievs": "Achievements",
     "titleProfile": "Profile",
     "titleInbox": "Inbox",
     "titleTavern": "Tavern",

website/client/js/app.js

@@ -84,6 +84,11 @@ window.habitrpg = angular.module('habitrpg',
           templateUrl: "partials/options.profile.stats.html",
           title: env.t('titleStats')
         })
+        .state('options.profile.achievements', {
+          url: "/achievements",
+          templateUrl: "partials/options.profile.achievements.html",
+          title: env.t('titleAchievs')
+        })
         .state('options.profile.profile', {
           url: "/profile",
           templateUrl: "partials/options.profile.profile.html",

website/views/options/profile.jade

@@ -175,64 +175,63 @@ mixin customizeProfile(mobile)
 script(id='partials/options.profile.avatar.html', type='text/ng-template')
   +customizeProfile()
 
-mixin profileStats
+script(id='partials/options.profile.stats.html', type='text/ng-template')
   .container-fluid
-    div(class=mobile?'padding':'row')
+    div(class='row')
-      // FIXME, get this working on mobile
       .border-right(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
-        include ../shared/profiles/stats
+        include ../shared/profiles/stats_col1
-      unless mobile
-        .col-md-4.border-right.allocate-stats(ng-if='user.flags.classSelected && !user.preferences.disableClasses')
-          h3=env.t('characterBuild')
-          h4
-            =env.t('class') + ': '
-            span {{ {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer")}[user.stats.class] }} 
-            a.btn.btn-danger.btn-xs(ng-click='changeClass(null)')=env.t('changeClass')
-            small.cost 3 <span class="Pet_Currency_Gem1x inline-gems"/>
-          table.table.table-striped
-            tr
-              td
-                p(ng-if='::user.stats.lvl >= 100')!=env.t('noMoreAllocate')
-                p(ng-if='user.stats.points || user.stats.lvl < 100')
-                  strong.inline
-                    |{{user.stats.points}}&nbsp;
-                  strong.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('levelPopover'))=env.t('unallocated')
-              td
-            tr
-              td(colspan=2)
-                fieldset.auto-allocate
-                  .checkbox
-                    label
-                      input(type='checkbox', ng-model='user.preferences.automaticAllocation', ng-change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation?true: false})', ng-click='set({"preferences.allocationMode":"taskbased"})')
-                      span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('autoAllocationPop'))=env.t('autoAllocation')
-                  form(ng-show='user.preferences.automaticAllocation',style='margin-left:1em')
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='flat', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "flat"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('evenAllocationPop'))=env.t('evenAllocation')
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='classbased', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "classbased"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('classAllocationPop'))=env.t('classAllocation')
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='taskbased', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "taskbased"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('taskAllocationPop'))=env.t('taskAllocation')
-                  div(ng-show='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)')
-                    a.btn.btn-primary.btn-xs(ng-click='User.allocateNow({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('distributePointsPop'))
-                      span.glyphicon.glyphicon-download
-                      |&nbsp;
-                      =env.t('distributePoints')
-            +statAllocation
-
-
       div(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
         button.btn.btn-default(ng-if='user.preferences.disableClasses', ng-click='User.changeClass({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('enableClassPop'))= env.t('enableClass')
         hr(ng-if='user.preferences.disableClasses')
-        include ../shared/profiles/achievements
+        include ../shared/profiles/stats_col2
+      .col-md-4.border-left.allocate-stats(ng-if='user.flags.classSelected && !user.preferences.disableClasses')
+        h3=env.t('characterBuild')
+        h4
+          =env.t('class') + ': '
+          span {{ {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer")}[user.stats.class] }}&nbsp;
+          a.btn.btn-danger.btn-xs(ng-click='changeClass(null)')=env.t('changeClass')
+          small.cost 3 <span class="Pet_Currency_Gem1x inline-gems"/>
+        table.table.table-striped
+          tr
+            td
+              p(ng-if='::user.stats.lvl >= 100')!=env.t('noMoreAllocate')
+              p(ng-if='user.stats.points || user.stats.lvl < 100')
+                strong.inline
+                  |{{user.stats.points}}&nbsp;
+                strong.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('levelPopover'))=env.t('unallocated')
+            td
+          tr
+            td(colspan=2)
+              fieldset.auto-allocate
+                .checkbox
+                  label
+                    input(type='checkbox', ng-model='user.preferences.automaticAllocation', ng-change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation?true: false})', ng-click='set({"preferences.allocationMode":"taskbased"})')
+                    span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('autoAllocationPop'))=env.t('autoAllocation')
+                form(ng-show='user.preferences.automaticAllocation',style='margin-left:1em')
+                  .radio
+                    label
+                      input(type='radio', name='allocationMode', value='flat', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "flat"})')
+                      span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('evenAllocationPop'))=env.t('evenAllocation')
+                  .radio
+                    label
+                      input(type='radio', name='allocationMode', value='classbased', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "classbased"})')
+                      span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('classAllocationPop'))=env.t('classAllocation')
+                  .radio
+                    label
+                      input(type='radio', name='allocationMode', value='taskbased', ng-model='user.preferences.allocationMode', ng-change='set({"preferences.allocationMode": "taskbased"})')
+                      span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('taskAllocationPop'))=env.t('taskAllocation')
+                div(ng-show='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)')
+                  a.btn.btn-primary.btn-xs(ng-click='User.allocateNow({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('distributePointsPop'))
+                    span.glyphicon.glyphicon-download
+                    |&nbsp;
+                    =env.t('distributePoints')
+          +statAllocation()
 
-script(id='partials/options.profile.stats.html', type='text/ng-template')
+script(id='partials/options.profile.achievements.html', type='text/ng-template')
-  +profileStats()
+  .container-fluid
+    div(class='row')
+      div(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
+        include ../shared/profiles/achievements
 
 script(id='partials/options.profile.profile.html', type='text/ng-template')
   .container-fluid
@@ -310,7 +309,10 @@ script(id='partials/options.profile.html', type="text/ng-template")
         =env.t('backgrounds')
     li(ng-class="{ active: $state.includes('options.profile.stats') }")
       a(ui-sref='options.profile.stats')
-        =env.t('statsAch')
+        =env.t('stats')
+    li(ng-class="{ active: $state.includes('options.profile.achievements') }")
+      a(ui-sref='options.profile.achievements')
+        =env.t('achievs')
     li(ng-class="{ active: $state.includes('options.profile.profile') }")
       a(ui-sref='options.profile.profile')
         =env.t('profile')

website/views/shared/header/menu.jade

@@ -17,6 +17,8 @@ nav.toolbar(ng-controller='MenuCtrl')
                 a(ui-sref='options.profile.backgrounds')=env.t('backgrounds')
               li
                 a(ui-sref='options.profile.stats')=env.t('stats')
+              li
+                a(ui-sref='options.profile.achievements')=env.t('achievs')
               li
                 a(ui-sref='options.profile.profile')=env.t('profile')
             ul.toolbar-submenu
@@ -91,6 +93,8 @@ nav.toolbar(ng-controller='MenuCtrl')
               a(ui-sref='options.profile.backgrounds')=env.t('backgrounds')
             li
               a(ui-sref='options.profile.stats')=env.t('stats')
+            li
+              a(ui-sref='options.profile.achievements')=env.t('achievs')
             li
               a(ui-sref='options.profile.profile')=env.t('profile')
       li.toolbar-button-dropdown

website/views/shared/modals/members.jade

@@ -24,7 +24,7 @@ script(type='text/ng-template', id='modals/member.html')
           h3=env.t('stats')
           // @TODO: Figure out why this isn't showing up in front page
           .label.label-info {{:: {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer")}[profile.stats.class] }}
-          include ../profiles/stats
+          include ../profiles/stats_all
         .col-md-6
           .row
             +herobox()

website/views/shared/profiles/stats/mixins.jade

@@ -11,8 +11,3 @@ mixin statList(calculatedStat, popover, text, useOneTimeBinding)
       popover-placement='top', popover=env.t('#{popover}Text'))
       =env.t(text)
     =': {{' + binding + calculatedStat + '}}'
-
-include ./stats/basic-stats
-include ./stats/equipment
-include ./stats/attributes
-include ./stats/pets-and-mounts

website/views/shared/profiles/stats_all.jade

@@ -0,0 +1,6 @@
+include ./stats/mixins
+
+include ./stats/basic-stats
+include ./stats/equipment
+include ./stats/attributes
+include ./stats/pets-and-mounts

website/views/shared/profiles/stats_col1.jade

@@ -0,0 +1,5 @@
+include ./stats/mixins
+
+include ./stats/basic-stats
+include ./stats/equipment
+include ./stats/pets-and-mounts

website/views/shared/profiles/stats_col2.jade

@@ -0,0 +1,3 @@
+include ./stats/mixins
+
+include ./stats/attributes