Merge pull request HabitRPG#3184 from denis-sokolov/avatar-unlocks-3175

improve(profile): clarify the cost of unlocks, fix HabitRPG#3175
shuosuo · Mar 31, 2014 · f659206 · f659206
2 parents 301bebe + 41ae15c
commit f659206
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/public/css/customizer.styl b/public/css/customizer.styl
@@ -21,6 +21,10 @@ menu
     font-weight: bold;
     line-height: 2
 
+  .cost
+    display: block
+    line-height: 2
+
 .customize-option
   border: 0px solid grey
   background-color: hsl(0, 0%, 93%)

diff --git a/views/options/profile.jade b/views/options/profile.jade
@@ -2,9 +2,6 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
   .row
     .col-md-4
       h3=env.t('bodyBody')
-      small
-        | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
-        = ' ' + env.t('locked')
 
       h5=env.t('bodySize')
       .btn-group
@@ -18,6 +15,9 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
               button.customize-option(class='{{user.preferences.size}}_shirt_'+shirt, type='button', ng-click='set({"preferences.shirt":"'+shirt+'"})')
 
           menu(label=env.t('specialShirts'))
+            small.cost
+              | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+              = ' ' + env.t('locked')
             each shirt in ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie']
               button.customize-option(type='button', class='{{user.preferences.size}}_shirt_'+shirt, ng-class='{locked: !user.purchased.shirt.'+shirt+'}', ng-click='unlock("shirt.'+shirt+'")')
           menu
@@ -26,9 +26,6 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
 
     .col-md-4
         h3=env.t('bodyHead')
-        small
-          | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
-          = ' ' + env.t('locked')
         menu(type='list')
           // For special events code, see commit dfa27b3
 
@@ -42,6 +39,9 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
 
           li.customize-menu
             menu(label=env.t('rainbowColors'))
+              small.cost
+                | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+                = ' ' + env.t('locked')
               each color in ['rainbow','yellow','green','purple','blue','TRUred']
                 button(type='button', ng-class='{locked: !user.purchased.hair.color.#{color}}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")')
           button.btn.btn-sm.btn-primary(ng-hide='user.purchased.hair.color.rainbow && user.purchased.hair.color.yellow && user.purchased.hair.color.green && user.purchased.hair.color.purple && user.purchased.hair.color.blue && user.purchased.hair.color.TRUred', ng-click='unlock("hair.color.rainbow,hair.color.yellow,hair.color.green,hair.color.purple,hair.color.blue,hair.color.TRUred")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
@@ -77,13 +77,19 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
           // Beard
           li.customize-menu
             menu(label=env.t('beard'))
+              small.cost
+                | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+                = ' ' + env.t('locked')
               button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.beard":0})')
               each num in [1,2,3]
                 button(class='hair_beard_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.beard.#{num}}', ng-click='unlock("hair.beard.#{num}")')
 
           // Mustache
           li.customize-menu
             menu(label=env.t('mustache'))
+              small.cost
+                | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+                = ' ' + env.t('locked')
               button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.mustache":0})')
               each num in [1,2]
                 button(class='hair_mustache_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.mustache.#{num}}', ng-click='unlock("hair.mustache.#{num}")')
@@ -92,9 +98,6 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
 
     .col-md-4
         h3=env.t('bodySkin')
-        small
-          | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
-          = ' ' + env.t('locked')
         // skin
         li.customize-menu
           menu(label=env.t('basicSkins'))
@@ -103,6 +106,9 @@ script(id='partials/options.profile.avatar.html', type='text/ng-template')
 
           // Rainbow Skin
           h5=env.t('rainbowSkins')
+          small.cost
+            | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+            = ' ' + env.t('locked')
           //menu(label='Rainbow Skins (2G / skin)')
           menu
             each color in ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow']
@@ -128,7 +134,7 @@ script(id='partials/options.profile.stats.html', type='text/ng-template')
           =env.t('class') + ': '
           span {{ {warrior:'Warrior',wizard:'Mage',healer:'Healer',rogue:'Rogue'}[user.stats.class] }}&nbsp;
           a.btn.btn-danger.btn-xs(ng-click='changeClass(null)')=env.t('changeClass')
-          small 3 <span class="Pet_Currency_Gem1x inline-gems"/>
+          small.cost 3 <span class="Pet_Currency_Gem1x inline-gems"/>
         table.table.table-striped
           tr
             td