mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-22 03:34:14 +00:00
291 lines
17 KiB
Text
291 lines
17 KiB
Text
mixin gemCost(cost)
|
|
small.cost
|
|
| #{cost} <span class="Pet_Currency_Gem1x inline-gems"></span> /
|
|
= ' ' + env.t('locked')
|
|
block
|
|
|
|
-var showPath = function(path, items, joiner) { return path+'["'+items.join('"] '+joiner+' '+path+'["')+'"]'; }
|
|
-var unlockPath = function(path, items) { return 'unlock("'+path+'.'+items.join(','+path+'.')+'")'; }
|
|
|
|
// 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" ? showPath("user.purchased."+path, colors, "||") : 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))
|
|
span(ng-hide='#{status=="disabled"} || #{showPath("user.purchased."+path, colors, "&&")}')
|
|
+gemCost(2)
|
|
button.btn.btn-xs(ng-click='#{unlockPath(path, colors)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
|
|
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')
|
|
|
|
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'))
|
|
- var specialShirts = ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie']
|
|
span(ng-hide='#{showPath("user.purchased.shirt", specialShirts, "&&")}')
|
|
+gemCost(2)
|
|
button.btn.btn-xs(ng-click='#{unlockPath("shirt",specialShirts)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
|
|
each shirt in specialShirts
|
|
button.customize-option(type='button', class='{{user.preferences.size}}_shirt_'+shirt, ng-class='{locked: !user.purchased.shirt.'+shirt+'}', ng-click='unlock("shirt.'+shirt+'")')
|
|
|
|
|
|
.col-md-4
|
|
h3(class=mobile?'item item-divider':'')=env.t('bodyHead')
|
|
menu(type='list')
|
|
// For special events code, see commit dfa27b3
|
|
|
|
|
|
// 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}")')
|
|
+buyPref('hair.color', ['rainbow','yellow','green','purple','blue','TRUred'], 'rainbowColors')
|
|
+buyPref('hair.color', ['candycorn','ghostwhite','halloween','midnight','pumpkin','zombie'], 'hauntedColors', 'disabled')
|
|
+buyPref('hair.color', ['aurora','festive','hollygreen','peppermint','snowy','winterstar'], 'winteryColors', 'disabled')
|
|
|
|
li.customize-menu
|
|
menu(label=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 hairstyles (free)
|
|
menu(label=env.t('hairBase'))
|
|
button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})')
|
|
each num in [1,3]
|
|
button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-click='set({"preferences.hair.base":#{num}})')
|
|
|
|
// Purchasable hairstyles
|
|
menu(label=env.t('hairSet1'))
|
|
- var colors = [2,4,5,6,7,8]
|
|
span(ng-hide='#{showPath("user.purchased.hair.base", colors, "&&")}')
|
|
+gemCost(2)
|
|
button.btn.btn-xs(ng-click='#{unlockPath("hair.base",colors)}')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
|
|
each num in colors
|
|
button(class='hair_base_#{num}_{{user.preferences.hair.color}} customize-option', type='button', ng-class='{locked: !user.purchased.hair.base["#{num}"]}', ng-click='unlock("hair.base.#{num}")')
|
|
|
|
// 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
|
|
menu(label=env.t('bodyFacialHair'))
|
|
span(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"]')
|
|
+gemCost(2)
|
|
button.btn.btn-xs(ng-click='unlock("hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3")')!= env.t('unlockSet',{cost:5}) + ' <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}")')
|
|
|
|
.col-md-4
|
|
h3(class=mobile?'item item-divider':'')=env.t('bodySkin')
|
|
// skin
|
|
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
|
|
+buyPref('skin', ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow'], 'rainbowSkins')
|
|
|
|
// Special Events
|
|
+buyPref('skin', ['monster','pumpkin','skeleton','zombie','ghost','shadow'], 'spookySkins', 'disabled')
|
|
+buyPref('skin', ['candycorn','ogre','pumpkin2','reptile','shadow2','skeleton2','transparent','zombie2'], 'supernaturalSkins', 'disabled')
|
|
|
|
|
|
script(id='partials/options.profile.avatar.html', type='text/ng-template')
|
|
+customizeProfile()
|
|
|
|
mixin profileStats
|
|
.container-fluid
|
|
div(class=mobile?'padding':'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
|
|
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
|
|
strong.inline
|
|
|{{user.stats.points}}
|
|
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
|
|
|
|
|
=env.t('distributePoints')
|
|
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')) +
|
|
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('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('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')) +
|
|
|
|
|
|
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.ops.changeClass({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('enableClassPop'))= env.t('enableClass')
|
|
hr(ng-if='user.preferences.disableClasses')
|
|
include ../shared/profiles/achievements
|
|
|
|
script(id='partials/options.profile.stats.html', type='text/ng-template')
|
|
+profileStats()
|
|
|
|
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}}
|
|
p
|
|
small.muted=env.t('displayNameDescription1')
|
|
|
|
|
a(href='/#/options/settings/settings')=env.t('displayNameDescription2')
|
|
|
|
|
=env.t('displayNameDescription3')
|
|
span.muted(ng-hide='profile.profile.name') -
|
|
=env.t('none')
|
|
| -
|
|
|
|
h4=env.t('displayPhoto')
|
|
img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}')
|
|
span.muted(ng-hide='profile.profile.imageUrl') -
|
|
=env.t('none')
|
|
| -
|
|
|
|
h4=env.t('displayBlurb')
|
|
markdown(ng-show='profile.profile.blurb', text='profile.profile.blurb')
|
|
span.muted(ng-hide='profile.profile.blurb') -
|
|
=env.t('none')
|
|
| -
|
|
//{{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
|
|
|
|
mixin backgrounds(mobile)
|
|
div(class=mobile ? 'padding' : 'container-fluid')
|
|
// backgrounds are listed in content file in chronological order, but
|
|
// we want to display them with most recent at top (reversed)
|
|
- var bgsKeys = Object.keys(env.Content.backgrounds);
|
|
- for (var i = bgsKeys.length-1; i >= 0; i--) {
|
|
- var k = bgsKeys[i], bgs = env.Content.backgrounds[k];
|
|
li.customize-menu
|
|
menu(label=env.t(k))
|
|
span(ng-hide="ownsSet('background',#{JSON.stringify(bgs)})")
|
|
+gemCost(7)
|
|
button.btn.btn-xs(ng-click="unlock(setKeys('background',#{JSON.stringify(bgs)}))")!= env.t('unlockSet',{cost:15}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
|
|
each bg,k in bgs
|
|
button.customize-option(type='button', class='background_#{k}', ng-class="user.purchased.background.#{k} ? 'background-unlocked' : 'background-locked'", ng-click='unlock("background.#{k}")', popover-title=bg.text(env.language.code), popover=bg.notes(env.language.code),popover-trigger='mouseenter')
|
|
i.glyphicon.glyphicon-lock(ng-if="!user.purchased.background.#{k}")
|
|
- }
|
|
|
|
script(type='text/ng-template', id='partials/options.profile.backgrounds.html')
|
|
+backgrounds()
|
|
|
|
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.backgrounds') }")
|
|
a(ui-sref='options.profile.backgrounds')
|
|
=env.t('backgrounds')
|
|
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)
|