habitica-self-host/views/options/profile.jade
2014-05-06 20:05:57 +02:00

252 lines
16 KiB
Text

mixin twoGem
small.cost
| 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
= ' ' + env.t('locked')
block
// Make it a mixin so we can call it from mobile
mixin customizeProfile(mobile)
div(class='#{mobile ? "" : "row"}')
if mobile
.item.item-divider Body
.col-md-4.item
h3=env.t('bodyBody')
menu(type='list')
li.customize-menu
menu(label=env.t('bodySize'))
.btn-group.button-bar
button.button.btn.btn-sm.btn-default(ng-class='{active: user.preferences.size=="slim"}', ng-click='set({"preferences.size":"slim"})')=env.t('bodySlim')
button.button.btn.btn-sm.btn-default(ng-class='{active: user.preferences.size=="broad"}', ng-click='set({"preferences.size":"broad"})')=env.t('bodyBroad')
li.customize-menu
menu(label=env.t('shirts'))
each shirt in ['black', 'blue', 'green', 'pink', 'white', 'yellow']
button.customize-option(class='{{user.preferences.size}}_shirt_'+shirt, type='button', ng-click='set({"preferences.shirt":"'+shirt+'"})')
menu(label=env.t('specialShirts'))
+twoGem()
button.btn.btn-xs(ng-hide="user.purchased.shirt.convict && user.purchased.shirt.cross && user.purchased.shirt.fire && user.purchased.shirt.horizon && user.purchased.shirt.ocean && user.purchased.shirt.purple && user.purchased.shirt.rainbow && user.purchased.shirt.redblue && user.purchased.shirt.thunder && user.purchased.shirt.tropical && user.purchased.shirt.zombie", ng-click='unlock("shirt.convict,shirt.cross,shirt.fire,shirt.horizon,shirt.ocean,shirt.purple,shirt.rainbow,shirt.redblue,shirt.thunder,shirt.tropical,shirt.zombie")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
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+'")')
if mobile
.item.item-divider Head
.col-md-4.item
h3=env.t('bodyHead')
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)
+twoGem()
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('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
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}")')
li.customize-menu
menu(label=env.t('color'))
each v,k in {'c8c8c8':'white','903a00':'brown','cfb853':'blond','ec720f':'red','2e2e2e':'black'}
button(type='button', class='customize-option hair', style='background-color:##{k};', ng-click='set({"preferences.hair.color": "#{v}"})')
each color in ['candycane','frost','winternight','holly']
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'))
li.customize-menu
h5=env.t('bodyHair')
// Bangs
menu(label=env.t('hairBangs'))
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.bangs":0})')
each num in [1,2,3]
button(class='hair_bangs_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.bangs":#{num}})')
// Base
menu(label=env.t('hairBase'))
+twoGem()
button.btn.btn-xs(ng-hide='user.purchased.hair.base.2 && user.purchased.hair.base.4 && user.purchased.hair.base.5 && user.purchased.hair.base.6 && user.purchased.hair.base.7 && user.purchased.hair.base.8', ng-click='unlock("hair.base.2,hair.base.4,hair.base.5,hair.base.6,hair.base.7,hair.base.8")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})')
each v,k in {1:true,2:false,3:true,4:false,5:false,6:false,7:false,8:false}
case v
when true: button(class='hair_base_#{k}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.base":#{k}})')
when false: button(class='hair_base_#{k}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base.#{k}}', ng-click='unlock("hair.base.#{k}")')
// Flower
li.customize-menu
menu(label=env.t('flower'))
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.flower":0})')
each num in [1,2,3,4,5,6]
button(class='hair_flower_#{num} customize-option', type='button', ng-click='set({"preferences.hair.flower":#{num}})')
li.customize-menu
h5=env.t('bodyFacialHair')
+twoGem()
button.btn.btn-xs(ng-hide='user.purchased.hair.mustache.1 && user.purchased.hair.mustache.2 && user.purchased.hair.beard.1 && user.purchased.hair.beard.2 && user.purchased.hair.beard.3', ng-click='unlock("hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
// Beard
menu(label=env.t('beard'))
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
menu(label=env.t('mustache'))
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}")')
if mobile
.item.item-divider Skin
.col-md-4.item
h3=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}"})')
// Rainbow Skin
menu(label=env.t('rainbowSkins'))
+twoGem()
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('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
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}")')
// 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}")')
script(id='partials/options.profile.avatar.html', type='text/ng-template')
+customizeProfile()
script(id='partials/options.profile.stats.html', type='text/ng-template')
.container-fluid
.row
.border-right(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
include ../shared/profiles/stats
.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] }}&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
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.ops.allocateNow({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('distributePointsPop'))
span.glyphicon.glyphicon-download
&nbsp;
=env.t('distributePoints')
tr
td= env.t('allocateCon') + ' {{user.stats.con}}'
td
a.btn.btn-primary(ng-show='user.stats.points', ng-click='allocate("con")', popover-trigger='mouseenter', popover-placement='right', popover=env.t('allocateConPop')) +
tr
td= env.t('allocateInt') + ' {{user.stats.int}}'
td
a.btn.btn-primary(ng-show='user.stats.points', ng-click='allocate("int")', popover-trigger='mouseenter', popover-placement='right', popover=env.t('allocateIntPop')) +
tr
td= env.t('allocatePer') + ' {{user.stats.per}}'
td
a.btn.btn-primary(ng-show='user.stats.points', ng-click='allocate("per")', popover-trigger='mouseenter', popover-placement='right', popover=env.t('allocatePerPop')) +
tr
td= env.t('allocateStr') + ' {{user.stats.str}}'
td
a.btn.btn-primary(ng-show='user.stats.points', ng-click='allocate("str")', popover-trigger='mouseenter', popover-placement='right', popover=env.t('allocateStrPop')) +
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
.row
.col-md-12(ng-show='!_editing.profile')
button.btn.btn-default(ng-click='_editing.profile = true', ng-show='!_editing.profile')= env.t('edit')
h4=env.t('displayName')
span(ng-show='profile.profile.name') {{profile.profile.name}}
span.muted(ng-hide='profile.profile.name') -&nbsp;
=env.t('none')
| &nbsp;-
h4=env.t('displayPhoto')
img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}')
span.muted(ng-hide='profile.profile.imageUrl') -&nbsp;
=env.t('none')
| &nbsp;-
h4=env.t('displayBlurb')
markdown(ng-show='profile.profile.blurb', ng-model='profile.profile.blurb')
span.muted(ng-hide='profile.profile.blurb') -&nbsp;
=env.t('none')
| &nbsp;-
//{{profile.profile.blurb | linky:'_blank'}}
form.col-md-4(ng-show='_editing.profile', ng-submit='save()')
input.btn.btn-primary(type='submit', value=env.t('save'))
// TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
.form-group
label=env.t('displayName')
input.form-control(type='text', placeholder=env.t('fullName'), ng-model='editingProfile.name')
.form-group
label=env.t('photoUrl')
input.form-control(type='url', ng-model='editingProfile.imageUrl', placeholder=env.t('imageUrl'))
.form-group
label=env.t('displayBlurb')
textarea.form-control(rows=5, placeholder=env.t('displayBlurb'), ng-model='editingProfile.blurb')
include ../shared/formatting-help
script(id='partials/options.profile.html', type="text/ng-template")
ul.options-menu
li(ng-class="{ active: $state.includes('options.profile.avatar') }")
a(ui-sref='options.profile.avatar')
=env.t('avatar')
li(ng-class="{ active: $state.includes('options.profile.stats') }")
a(ui-sref='options.profile.stats')
=env.t('statsAch')
li(ng-class="{ active: $state.includes('options.profile.profile') }")
a(ui-sref='options.profile.profile')
=env.t('profile')
.tab-content
.tab-pane.active
div(ui-view)