diff --git a/views/options/profile.jade b/views/options/profile.jade
index 68b1158dc3..fa1b20bb22 100644
--- a/views/options/profile.jade
+++ b/views/options/profile.jade
@@ -7,6 +7,17 @@ mixin gemCost(cost)
// Make it a mixin so we can call it from mobile
mixin customizeProfile(mobile)
+
+ mixin buyPref(path,colors,title,status)
+ li.customize-menu(ng-if='#{status=="disabled" ? "user.purchased."+path+"."+colors.join(" || user.purchased."+path+".") : true}', class=~["limited","seasonal"].indexOf(status) ? "well limited-edition" : "")
+ if ~['limited','seasonal'].indexOf(status)
+ .label.label-info.pull-right.hint(popover=limited, popover-title=env.t(status+'Edition'), popover-placement='right', popover-trigger='mouseenter')=env.t(status+'Edition')
+ menu(label=env.t(title))
+ +gemCost(2)
+ button.btn.btn-xs(ng-hide='#{status=="disabled"} || user.purchased.#{path}.#{colors.join(" && user.purchased."+path+".")}')!= env.t('unlockSet',{cost:5}) + ' '
+ each color in colors
+ button.customize-option(type='button', class='#{path=="skin" ? "skin_"+color : "customize-option hair hair_bangs_1_"+color}', ng-class='{locked: !user.purchased.#{path}.#{color}}', ng-if='#{status!="disabled"} || user.purchased.#{path}.#{color}', ng-click='unlock("#{path}.#{color}")')
+
div(class=mobile ? 'padding' : 'container-fluid row')
.col-md-4
h3(class=mobile?'item item-divider':'')=env.t('bodyBody')
@@ -35,17 +46,8 @@ mixin customizeProfile(mobile)
menu(type='list')
// For special events code, see commit dfa27b3
- // Color
- mixin colorSelection(colors,title,limited)
- li.customize-menu(class=limited ? "well limited-edition" : "")
- if limited
- .label.label-info.pull-right.hint(popover=limited, popover-title=env.t('limitedEdition'), popover-placement='right', popover-trigger='mouseenter')=env.t('limitedEdition')
- menu(label=title)
- +gemCost(2)
- button.btn.btn-xs(ng-hide='user.purchased.hair.color.#{colors.join(" && user.purchased.hair.color.")}', ng-click='unlock("hair.color.#{colors.join(",hair.color.")}")')!= env.t('unlockSet',{cost:5}) + ' '
- each color in colors
- 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}")')
+ // Color
li.customize-menu
menu(label=env.t('color'))
each v,k in {'c8c8c8':'white','903a00':'brown','cfb853':'blond','ec720f':'red','2e2e2e':'black'}
@@ -54,10 +56,11 @@ mixin customizeProfile(mobile)
button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', style='width: 40px; height: 40px;', ng-click='unlock("hair.color.#{color}")')
each color in ['pblue','pgreen','porange','ppink','ppurple','pyellow']
button(type='button', ng-if='user.purchased.hair.color.#{color}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")')
- +colorSelection(['rainbow','yellow','green','purple','blue','TRUred'],env.t('rainbowColors'))
+ +buyPref('hair.color', ['rainbow','yellow','green','purple','blue','TRUred'], 'rainbowColors')
+ +buyPref('hair.color', ['candycorn','ghostwhite','halloween','midnight','pumpkin','zombie'], 'hauntedColors', 'seasonal')
li.customize-menu
- h5=env.t('bodyHair')
+ menu(label=env.t('bodyHair'))
// Bangs
menu(label=env.t('hairBangs'))
@@ -106,25 +109,19 @@ mixin customizeProfile(mobile)
.col-md-4
h3(class=mobile?'item item-divider':'')=env.t('bodySkin')
// skin
- li.customize-menu
- menu(label=env.t('basicSkins'))
- each color in ['ddc994','f5a76e','ea8349','c06534','98461a','915533','c3e1dc','6bd049']
- button.customize-option(type='button', class='skin_#{color}', ng-click='set({"preferences.skin":"#{color}"})')
+ menu(type='list')
+ li.customize-menu
+ menu(label=env.t('basicSkins'))
+ each color in ['ddc994','f5a76e','ea8349','c06534','98461a','915533','c3e1dc','6bd049']
+ button.customize-option(type='button', class='skin_#{color}', ng-click='set({"preferences.skin":"#{color}"})')
// Rainbow Skin
- menu(label=env.t('rainbowSkins'))
- +gemCost(2)
- button.btn.btn-xs(ng-hide='user.purchased.skin.eb052b && user.purchased.skin.f69922 && user.purchased.skin.f5d70f && user.purchased.skin.0ff591 && user.purchased.skin.2b43f6 && user.purchased.skin.d7a9f7 && user.purchased.skin.800ed0 && user.purchased.skin.rainbow', ng-click='unlock("skin.eb052b,skin.f69922,skin.f5d70f,skin.0ff591,skin.2b43f6,skin.d7a9f7,skin.800ed0,skin.rainbow")')!= env.t('unlockSet',{cost:5}) + ' '
- each color in ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow']
- button.customize-option(type='button', class='skin_#{color}', ng-class='{locked: !user.purchased.skin.#{color}}', ng-click='unlock("skin.#{color}")')
+ +buyPref('skin', ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow'], 'rainbowSkins')
// Special Events
- // restore to d4df481 to see purchasing + "limited edition" code
- div(ng-if='user.purchased.skin.monster || user.purchased.skin.pumpkin || user.purchased.skin.skeleton || user.purchased.skin.zombie || user.purchased.skin.ghost || user.purchased.skin.shadow')
- h5=env.t('spookySkins')
- menu
- each color in ['monster','pumpkin','skeleton','zombie','ghost','shadow']
- button.customize-option(type='button', class='skin_#{color}', ng-if='user.purchased.skin.#{color}', ng-click='unlock("skin.#{color}")')
+ +buyPref('skin', ['monster','pumpkin','skeleton','zombie','ghost','shadow'], 'spookySkins', 'disabled')
+ +buyPref('skin', ['candycorn','ogre','pumpkin2','reptile','shadow2','skeleton2','transparent','zombie2'], 'supernaturalSkins', 'seasonal')
+
script(id='partials/options.profile.avatar.html', type='text/ng-template')
+customizeProfile()