mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-03 04:29:40 +00:00
Refactored avatar
This commit is contained in:
Blade Barringer
parent
9f70598d64
commit
3262c2d869
7 changed files with 105 additions and 91 deletions
|
|
@ -23,6 +23,6 @@ html(ng-app="habitrpg")
|
|||
link(href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic', rel='stylesheet', type='text/css')
|
||||
|
||||
body(ng-cloak)
|
||||
include ./shared/header/avatar
|
||||
include ./shared/avatar/index
|
||||
div(ng-controller='StaticAvatarCtrl')
|
||||
+herobox({main:true})
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":a
|
|||
|
||||
body(ng-cloak, ng-controller='GroupsCtrl')
|
||||
include ./shared/mixins
|
||||
include ./shared/header/avatar
|
||||
include ./shared/avatar/index
|
||||
include ./shared/header/menu
|
||||
include ./shared/modals/index
|
||||
include ./shared/header/header
|
||||
|
|
|
|||
30
website/views/shared/avatar/appearance.jade
Normal file
30
website/views/shared/avatar/appearance.jade
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
mixin avatar(opts)
|
||||
.character-sprites
|
||||
.addthis_native_toolbox(ng-if='::profile._id==user._id',
|
||||
data-url="#{env.BASE_URL}/static/front/#?memberId={{::profile._id}}",
|
||||
data-title="Check out my HabitRPG progress!")
|
||||
|
||||
// Mount Body
|
||||
if !opts.minimal
|
||||
span(ng-if='profile.items.currentMount', class='Mount_Body_{{profile.items.currentMount}}')
|
||||
|
||||
// Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
|
||||
- var visualBuffs = { snowball: 'snowman', spookDust: 'spookman', shinySeed: 'avatar_floral_{{profile.stats.class}}' }
|
||||
each klass, item in visualBuffs
|
||||
span(ng-if='profile.stats.buffs.#{item}', class='#{klass}')
|
||||
|
||||
// Show avatar only if not currently affected by visual buff
|
||||
- var buffs = '!profile.stats.buffs'
|
||||
span(ng-if='#{buffs}.snowball && #{buffs}.spookDust && #{buffs}.shinySeed')
|
||||
include generated_avatar
|
||||
|
||||
// Mount Head
|
||||
if !opts.minimal
|
||||
span.current-mount(ng-if='profile.items.currentMount', class='Mount_Head_{{profile.items.currentMount}}')
|
||||
|
||||
// Resting
|
||||
span(ng-class='{zzz:profile.preferences.sleep}')
|
||||
|
||||
// Pet
|
||||
if !opts.minimal
|
||||
span.current-pet(class='Pet-{{profile.items.currentPet}}', ng-show='profile.items.currentPet')
|
||||
42
website/views/shared/avatar/generated_avatar.jade
Normal file
42
website/views/shared/avatar/generated_avatar.jade
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
mixin costumeSetting(type, options)
|
||||
- options = options || {}
|
||||
- var costume = (options.prefix || '') + 'profile.items.gear.costume.' + type + (options.suffix || '')
|
||||
- var equipped = (options.prefix || '') + 'profile.items.gear.equipped.' + type + (options.suffix || '')
|
||||
span(ng-class="profile.preferences.costume ? #{costume} : #{equipped}")
|
||||
|
||||
// Back accessory
|
||||
+costumeSetting('back')
|
||||
|
||||
span(ng-class="profile.preferences.sleep ? 'skin_' + profile.preferences.skin + '_sleep' : 'skin_' + profile.preferences.skin")
|
||||
|
||||
// Shirt
|
||||
span(class='{{profile.preferences.size}}_shirt_{{profile.preferences.shirt}}')
|
||||
|
||||
// Armor
|
||||
+costumeSetting('armor', {prefix: "profile.preferences.size + '_' + "})
|
||||
|
||||
// Cape collar
|
||||
+costumeSetting('back', {suffix: " + '_collar'"})
|
||||
|
||||
// Body
|
||||
+costumeSetting('body')
|
||||
|
||||
// Empty outline of head
|
||||
span(class='head_0')
|
||||
|
||||
// Hair
|
||||
- var hairTypes = ['base', 'bangs', 'mustache', 'beard']
|
||||
each type in hairTypes
|
||||
span(class='hair_#{type}_{{profile.preferences.hair.#{type}}}_{{profile.preferences.hair.color}}')
|
||||
|
||||
// Head
|
||||
+costumeSetting('eyewear')
|
||||
+costumeSetting('head')
|
||||
+costumeSetting('headAccessory')
|
||||
|
||||
// Flower
|
||||
span(class='hair_flower_{{profile.preferences.hair.flower}}')
|
||||
|
||||
// Items held in hands
|
||||
+costumeSetting('shield')
|
||||
+costumeSetting('weapon')
|
||||
30
website/views/shared/avatar/index.jade
Normal file
30
website/views/shared/avatar/index.jade
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
include appearance
|
||||
|
||||
mixin herobox(opts)
|
||||
- if (!opts) {opts = {minimal:false,main:false}}
|
||||
|
||||
- var ngClick = 'spell ? castEnd(profile, "user", $event) : clickMember(profile._id)'
|
||||
|
||||
- var klass = 'background_{{profile.preferences.background}} ' + opts.main + ' ? "isUser" : ""} ' + opts.minimal + ' ? "minimal" : ""}'
|
||||
|
||||
- var hasPet = 'hasPet: (' + !opts.minimal + ' && profile.items.currentPet)'
|
||||
- var hasMount = 'hasMount: (' + !opts.minimal + ' && profile.items.currentMount)'
|
||||
- var noBackgroundImage = 'noBackgroundImage: !profile.preferences.background'
|
||||
- var castTarget = '"cast-target": applyingAction, isLeader: party.leader==profile._id'
|
||||
- var ngKlass = '{' + hasPet + ', ' + hasMount + ', ' + noBackgroundImage + ', ' + castTarget + '}'
|
||||
|
||||
- var name = '{{profile.profile.name}}'
|
||||
- var buffs = 'profile.stats.buffs'
|
||||
|
||||
figure.herobox(ng-click=ngClick, data-name=name, class=klass, ng-class=ngKlass)
|
||||
|
||||
.avatar-name(ng-class='userLevelStyle(profile)')=name
|
||||
|
||||
+avatar(opts)
|
||||
|
||||
.avatar-level(ng-class='userLevelStyle(profile)')
|
||||
span.glyphicon.glyphicon-circle-arrow-up(tooltip=env.t('buffed'), tooltip-append-to-body="true",
|
||||
ng-show='#{buffs}.str || #{buffs}.per || #{buffs}.con || #{buffs}.int || #{buffs}.stealth')
|
||||
span(tooltip=env.t('level'), tooltip-append-to-body="true") {{profile.stats.lvl}}
|
||||
span.glyphicon.glyphicon-plus-sign(ng-show='profile.achievements.rebirths',
|
||||
tooltip=env.t('reborn', {reLevel: "{{profile.achievements.rebirthLevel}}"}), tooltip-append-to-body="true")
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
//- FIXME the commented-out figure.herobox used to have a functioning popover, but angular-ui-bootstrap doesn't support
|
||||
html in popovers. Figure out what to do here. Also, {isUser:..} class seems to bring the user too far down with mounts.
|
||||
Removing it will remove the user's name, but will allow more room for mounts & helms. IMO this is the lesser of two evils, revisit
|
||||
//-figure.herobox(ng-click='clickMember(profile._id)', data-name='{{profile.profile.name}}', ng-class='{isUser: profile.id==user.id, hasPet: profile.items.currentPet}', data-level='{{profile.stats.lvl}}', data-uid='{{profile.id}}', rel='popover', data-placement='bottom', data-trigger='hover', data-html='true', data-content="<div ng-hide='profile.id == user.id'> <div class='progress progress-danger' style='height:5px;'> <div class='bar' style='height: 5px; width: {{percent(profile.stats.hp, 50)}}%;'></div> </div> <div class='progress progress-warning' style='height:5px;'> <div class='bar' style='height: 5px; width: {{percent(profile.stats.exp, tnl(profile.stats.lvl))}}%;'></div> </div> <div>Level: {{profile.stats.lvl}}</div> <div>GP: {{profile.stats.gp | number:0}}</div> <div>{{count(profile.items.pets)}} / 90 Pets Found</div> </div>")
|
||||
|
||||
mixin costumeSetting(pref)
|
||||
span(ng-class="profile.preferences.costume ? profile.items.gear.costume.#{pref} : profile.items.gear.equipped.#{pref}")
|
||||
|
||||
mixin avatar(opts)
|
||||
|
||||
.character-sprites
|
||||
|
||||
.addthis_native_toolbox(ng-if='profile._id==user._id', data-url="#{env.BASE_URL}/static/front/#?memberId={{profile._id}}", data-title="Check out my HabitRPG progress!")
|
||||
|
||||
// Mount Body
|
||||
if !opts.minimal
|
||||
span(ng-if='profile.items.currentMount', class='Mount_Body_{{profile.items.currentMount}}')
|
||||
|
||||
span(ng-if='profile.stats.buffs.snowball')
|
||||
span.snowman
|
||||
span(ng-if='profile.stats.buffs.spookDust')
|
||||
span.spookman
|
||||
span(ng-if='profile.stats.buffs.shinySeed')
|
||||
span(class='avatar_floral_{{profile.stats.class}}')
|
||||
span(ng-if='!profile.stats.buffs.snowball && !profile.stats.buffs.spookDust && !profile.stats.buffs.shinySeed')
|
||||
|
||||
// Back Accessory
|
||||
+costumeSetting('back')
|
||||
|
||||
// Avatar
|
||||
span(ng-class="profile.preferences.sleep ? 'skin_' + profile.preferences.skin + '_sleep' : 'skin_' + profile.preferences.skin")
|
||||
|
||||
// Shirt
|
||||
span(class='{{profile.preferences.size}}_shirt_{{profile.preferences.shirt}}')
|
||||
|
||||
// Armor
|
||||
span(ng-class="profile.preferences.costume ? profile.preferences.size + '_' + profile.items.gear.costume.armor : profile.preferences.size + '_' + profile.items.gear.equipped.armor")
|
||||
|
||||
// Cape collar
|
||||
span(ng-class="profile.preferences.costume ? profile.items.gear.costume.back + '_collar' : profile.items.gear.equipped.back + '_collar'")
|
||||
|
||||
// Body
|
||||
+costumeSetting('body')
|
||||
|
||||
// Hair
|
||||
span(class='head_0')
|
||||
span(class='hair_base_{{profile.preferences.hair.base}}_{{profile.preferences.hair.color}}')
|
||||
span(class='hair_bangs_{{profile.preferences.hair.bangs}}_{{profile.preferences.hair.color}}')
|
||||
span(class='hair_mustache_{{profile.preferences.hair.mustache}}_{{profile.preferences.hair.color}}')
|
||||
span(class='hair_beard_{{profile.preferences.hair.beard}}_{{profile.preferences.hair.color}}')
|
||||
|
||||
// Eyewear
|
||||
+costumeSetting('eyewear')
|
||||
|
||||
// Helm
|
||||
+costumeSetting('head')
|
||||
|
||||
// Head Accessory
|
||||
+costumeSetting('headAccessory')
|
||||
|
||||
// Flower
|
||||
span(class='hair_flower_{{profile.preferences.hair.flower}}')
|
||||
|
||||
// Shield
|
||||
+costumeSetting('shield')
|
||||
|
||||
// Weapon
|
||||
+costumeSetting('weapon')
|
||||
|
||||
// Mount Head
|
||||
if !opts.minimal
|
||||
span.current-mount(ng-if='profile.items.currentMount', class='Mount_Head_{{profile.items.currentMount}}')
|
||||
|
||||
// Resting
|
||||
span(ng-class='{zzz:profile.preferences.sleep}')
|
||||
if !opts.minimal
|
||||
span.current-pet(class='Pet-{{profile.items.currentPet}}', ng-show='profile.items.currentPet')
|
||||
|
||||
mixin herobox(opts)
|
||||
- if (!opts) {opts = {minimal:false,main:false}}
|
||||
figure.herobox(ng-click='spell ? castEnd(profile, "user", $event) : clickMember(profile._id)', data-name='{{profile.profile.name}}', class='background_{{profile.preferences.background}} #{opts.main ? "isUser" : ""} #{opts.minimal ? "minimal" : ""}', ng-class='{hasPet: (#{!opts.minimal} && profile.items.currentPet), hasMount: (#{!opts.minimal} && profile.items.currentMount), noBackgroundImage: !profile.preferences.background, "cast-target": applyingAction, isLeader: party.leader==profile._id}')
|
||||
.avatar-name(ng-class='userLevelStyle(profile)')
|
||||
|{{profile.profile.name}}
|
||||
+avatar(opts)
|
||||
.avatar-level(ng-class='userLevelStyle(profile)')
|
||||
span.glyphicon.glyphicon-circle-arrow-up(ng-show='profile.stats.buffs.str || profile.stats.buffs.per || profile.stats.buffs.con || profile.stats.buffs.int || profile.stats.buffs.stealth', tooltip=env.t('buffed'), tooltip-append-to-body="true")
|
||||
span(tooltip=env.t('level'), tooltip-append-to-body="true") {{profile.stats.lvl}}
|
||||
span.glyphicon.glyphicon-plus-sign(ng-show='profile.achievements.rebirths', tooltip=env.t('reborn', {reLevel: "{{profile.achievements.rebirthLevel}}"}), tooltip-append-to-body="true")
|
||||
|
|
@ -35,7 +35,7 @@ html(ng-app='habitrpg', ng-controller='RootCtrl')
|
|||
|
||||
body(ng-controller='AuthCtrl')
|
||||
include ./login-modal
|
||||
include ../shared/header/avatar
|
||||
include ../shared/avatar/index
|
||||
include ../shared/mixins
|
||||
include ../shared/modals/members
|
||||
.mobile-container
|
||||
|
|
|
|||
Loading…
Reference in a new issue