rewrite2 add customizations options
This commit is contained in:
Tyler Renelle
@@ -4,9 +4,6 @@
|
||||
.border-right
|
||||
border-right 1px solid #ddd
|
||||
|
||||
.game-tabs a
|
||||
cursor pointer
|
||||
|
||||
.tab-notification
|
||||
color #fff
|
||||
background-color #51a351
|
||||
|
||||
@@ -20,9 +20,9 @@ habitrpg.controller("RootCtrl", function($scope, $rootScope, $location, User) {
|
||||
Very simple path-set. `set('preferences.gender','m')` for example. We'll deprecate this once we have a complete API
|
||||
*/
|
||||
$rootScope.set = function(k, v) {
|
||||
var log = { op: 'set' };
|
||||
window.helpers.dotSet(k, v, User.user);
|
||||
log[k] = v;
|
||||
var log = { op: 'set', data: {} };
|
||||
window.habitrpgShared.helpers.dotSet(k, v, User.user);
|
||||
log.data[k] = v;
|
||||
User.log(log);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<achievements:>
|
||||
<div class='achievements-container'>
|
||||
<!--<div class='achievement achievement-sword'></div>-->
|
||||
<!--<div class='achievement achievement-tree'></div>-->
|
||||
<!--<div class='achievement achievement-comment'></div>-->
|
||||
<!--<div class='achievement achievement-cave'></div>-->
|
||||
<!--<div class='achievement achievement-sun'></div>-->
|
||||
<!--<div class='achievement achievement-boot'></div>-->
|
||||
<!--<div class='achievement achievement-coffin'></div>-->
|
||||
<!--<div class='achievement achievement-alien'></div>-->
|
||||
<!--<div class='achievement achievement-ninja'></div>-->
|
||||
<!--<div class='achievement achievement-cactus'></div>-->
|
||||
<!--<div class='achievement achievement-bow'></div>-->
|
||||
<!--<div class='achievement achievement-shield'></div>-->
|
||||
<!--<div class='achievement achievement-karaoke'></div>-->
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.npc}} classes='achievement-helm' unlockable=false profile={{@profile}}>
|
||||
<h5><span class='label label-success'>{{@profile.backer.npc}} NPC</span></h5>
|
||||
<small>Backed the Kickstarter project at the maximum level!</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.contributor}} classes='achievement-firefox' unlockable=true profile={{@profile}}>
|
||||
<h5>
|
||||
{{#if @profile.backer.contributor}}
|
||||
<span class='label label-inverse'>{{@profile.backer.contributor}}</span>
|
||||
{{else}}
|
||||
<span class='label'>Contributor</span>
|
||||
{{/}}
|
||||
</h5>
|
||||
<small>Has contributed to HabitRPG (code, design, pixel art, legal advice, docs, etc). Want this badge? Fix a bug :)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.tier}} classes='achievement-heart' unlockable=false profile={{@profile}}>
|
||||
<h5>Kickstarter Backer - ${{@profile.backer.tier}} Tier</h5>
|
||||
<small>Backed the Kickstarter Project</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.streak} classes='achievement-thermometer' unlockable=true profile={@profile}>
|
||||
<h5>{#if @profile.achievements.streak}{@profile.achievements.streak}{else}0{/} Streak Achievement(s)</h5>
|
||||
<small>Has performed {#if @profile.achievements.streak}{@profile.achievements.streak}{else}0{/} 21-day streaks on Dailies</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.originalUser} classes='achievement-cake' unlockable=false profile={@profile}>
|
||||
<h5>Original User</h5>
|
||||
<small>Goes way back to the Habit's days of yore (bless them for soldiering through bugs!)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.ultimateGear} classes='achievement-armor' unlockable=true profile={@profile}>
|
||||
<h5>Ultimate Gear</h5>
|
||||
<small>Has upgraded to the maximum weapon and armor set</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.beastMaster} classes='achievement-rat' unlockable=true profile={@profile}>
|
||||
<h5>Beast Master</h5>
|
||||
<small>Has found all 90 pets (insanely difficult, give this user props!)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.helpedHabit} classes='achievement-tree' unlockable=true profile={@profile}>
|
||||
<h5>Helped Habit Grow</h5>
|
||||
<small>Has helped HabitRPG grow by filling out <a href="http://community.habitrpg.com/node/290" target="_blank">this survey.</a></small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
</div>
|
||||
|
||||
<achievement: nonvoid>
|
||||
{#if @unlocked}
|
||||
<div class='achievement {{@classes}}'></div>{@content}
|
||||
<hr/>
|
||||
{else if @unlockable} <!-- only show silhouettes on own tab -->
|
||||
{{#if equal(_user.id,@profile.id)}}
|
||||
<span class='muted'>
|
||||
{@content}
|
||||
</span>
|
||||
<hr/>
|
||||
{{/}}
|
||||
{/}
|
||||
|
||||
@@ -1,131 +0,0 @@
|
||||
<main:>
|
||||
<div class="module full-width">
|
||||
|
||||
<span class='option-box pull-right wallet'>
|
||||
<app:rewards:user-gems />
|
||||
</span>
|
||||
|
||||
<ul class="nav nav-tabs game-tabs">
|
||||
<li class="active"><a data-toggle='tab' data-target="#profile-customize"><i class='icon-user'></i> Profile</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profile-groups" id='party-tab-link'><i class='icon-heart'></i> Groups</a></li>
|
||||
<li ng-show="user.flags.dropsEnabled"><a data-toggle='tab' data-target="#profile-inventory"><i class='icon-gift'></i> Inventory</a></li>
|
||||
<li ng-show="user.flags.dropsEnabled"><a data-toggle='tab' data-target="#profile-stable"><i class='icon-leaf'></i> Stable</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profile-tavern"><i class='icon-eye-close'></i> Tavern</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profile-achievements"><i class='icon-certificate'></i> Achievements</a></li>
|
||||
<!--<li><a data-toggle='tab' data-target="#profile-challenges" id='profile-challenges-tab-link' ><i class='icon-bullhorn'></i> Challenges</a></li>-->
|
||||
<li><a data-toggle='tab' data-target="#profile-settings"><i class='icon-wrench'></i> Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="profile-customize">
|
||||
<div class='row-fluid'>
|
||||
<div class='span4 border-right'>
|
||||
<app:avatar:customize />
|
||||
</div>
|
||||
<div class='span4 border-right'>
|
||||
<app:avatar:profile-stats profile={_user} />
|
||||
</div>
|
||||
<div class='span4'>
|
||||
<app:avatar:profile-edit />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-groups">
|
||||
<app:groups:groups-pane />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-achievements">
|
||||
<app:avatar:achievements profile="{{_user}}" />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-inventory">
|
||||
<div class='row-fluid'>
|
||||
<div class='span6 border-right'>
|
||||
<h2>Inventory</h2>
|
||||
<app:avatar:inventory />
|
||||
</div>
|
||||
<div class='span6'>
|
||||
<h2>Market</h2>
|
||||
<app:game-pane:market />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-stable">
|
||||
<app:pets:stable />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-tavern">
|
||||
<app:groups:group group={_habitRPG} />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-challenges">
|
||||
<app:challenges:main />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profile-settings">
|
||||
<app:settings:settings-pane />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<market:>
|
||||
|
||||
<!-- pets pane -->
|
||||
<div id="market-tab">
|
||||
<table><tr>
|
||||
<td><div class="NPC-Alex pull-left"></div></td>
|
||||
<td>
|
||||
<div class="popover static-popover fade right in">
|
||||
<div class="arrow"></div>
|
||||
<h3 class="popover-title">Alexander Augustin</h3>
|
||||
<div class="popover-content">Welcome to the Market! I'm the merchant, <a target="_blank" href="http://www.kickstarter.com/profile/523661924">Alexander</a>. Dying to get that particular pet you're after, but don't want to wait for it to drop? Buy it here!</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr></table>
|
||||
|
||||
<h4>Eggs</h4>
|
||||
{#with _items.pets as :egg}
|
||||
<table class="tab-pane pet-grid">
|
||||
<tr>
|
||||
{#with :egg[0]}<app:pets:egg />{/}
|
||||
{#with :egg[1]}<app:pets:egg />{/}
|
||||
{#with :egg[2]}<app:pets:egg />{/}
|
||||
{#with :egg[3]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :egg[4]}<app:pets:egg />{/}
|
||||
{#with :egg[5]}<app:pets:egg />{/}
|
||||
{#with :egg[6]}<app:pets:egg />{/}
|
||||
{#with :egg[7]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :egg[8]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
<h4>Hatching Potions</h4>
|
||||
{#with _items.hatchingPotions as :hatchingPotion}
|
||||
<table class="tab-pane pet-grid">
|
||||
<tr>
|
||||
{#with :hatchingPotion[0]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[1]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[2]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[3]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :hatchingPotion[4]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[5]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[6]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[7]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :hatchingPotion[8]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[9]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
</div>
|
||||
+37
-44
@@ -1,50 +1,24 @@
|
||||
.module.full-width
|
||||
span.option-box.pull-right.wallet
|
||||
app:rewards:user-gems
|
||||
ul.nav.nav-tabs.game-tabs
|
||||
li.active
|
||||
a(data-toggle='tab', data-target='#profile-customize')
|
||||
|
||||
tabset
|
||||
tab
|
||||
tab-heading
|
||||
i.icon-user
|
||||
| Profile
|
||||
li
|
||||
a#party-tab-link(data-toggle='tab', data-target='#profile-groups')
|
||||
include ./profile
|
||||
|
||||
tab
|
||||
tab-heading
|
||||
i.icon-heart
|
||||
| Groups
|
||||
li(ng-show='user.flags.dropsEnabled')
|
||||
a(data-toggle='tab', data-target='#profile-inventory')
|
||||
app:groups:groups-pane
|
||||
|
||||
tab(ng-show='user.flags.dropsEnabled')
|
||||
tab-heading
|
||||
i.icon-gift
|
||||
| Inventory
|
||||
li(ng-show='user.flags.dropsEnabled')
|
||||
a(data-toggle='tab', data-target='#profile-stable')
|
||||
i.icon-leaf
|
||||
| Stable
|
||||
li
|
||||
a(data-toggle='tab', data-target='#profile-tavern')
|
||||
i.icon-eye-close
|
||||
| Tavern
|
||||
li
|
||||
a(data-toggle='tab', data-target='#profile-achievements')
|
||||
i.icon-certificate
|
||||
| Achievements
|
||||
// <li><a data-toggle='tab' data-target="#profile-challenges" id='profile-challenges-tab-link' ><i class='icon-bullhorn'></i> Challenges</a></li>
|
||||
li
|
||||
a(data-toggle='tab', data-target='#profile-settings')
|
||||
i.icon-wrench
|
||||
| Settings
|
||||
.tab-content
|
||||
#profile-customize.tab-pane.active
|
||||
.row-fluid
|
||||
.span4.border-right
|
||||
app:avatar:customize
|
||||
.span4.border-right
|
||||
app:avatar:profile-stats(profile='{_user}')
|
||||
.span4
|
||||
app:avatar:profile-edit
|
||||
#profile-groups.tab-pane
|
||||
app:groups:groups-pane
|
||||
#profile-achievements.tab-pane
|
||||
app:avatar:achievements(profile='{{_user}}')
|
||||
#profile-inventory.tab-pane
|
||||
.row-fluid
|
||||
.span6.border-right
|
||||
h2 Inventory
|
||||
@@ -52,11 +26,30 @@
|
||||
.span6
|
||||
h2 Market
|
||||
app:game-pane:market
|
||||
#profile-stable.tab-pane
|
||||
|
||||
tab(ng-show='user.flags.dropsEnabled')
|
||||
tab-heading
|
||||
i.icon-leaf
|
||||
| Stable
|
||||
app:pets:stable
|
||||
#profile-tavern.tab-pane
|
||||
|
||||
tab
|
||||
tab-heading
|
||||
i.icon-eye-close
|
||||
| Tavern
|
||||
app:groups:group(group='{_habitRPG}')
|
||||
#profile-challenges.tab-pane
|
||||
app:challenges:main
|
||||
#profile-settings.tab-pane
|
||||
app:settings:settings-pane
|
||||
|
||||
tab
|
||||
tab-heading
|
||||
i.icon-certificate
|
||||
| Achievements
|
||||
app:avatar:achievements(profile='{{_user}}')
|
||||
|
||||
// <li><a data-toggle='tab' data-target="#profile-challenges" id='profile-challenges-tab-link' ><i class='icon-bullhorn'></i> Challenges</a></li>
|
||||
// app:challenges:main
|
||||
|
||||
tab
|
||||
tab-heading
|
||||
i.icon-wrench
|
||||
| Settings
|
||||
app:settings:settings-pane
|
||||
@@ -0,0 +1,57 @@
|
||||
<market:>
|
||||
|
||||
<!-- pets pane -->
|
||||
<div id="market-tab">
|
||||
<table><tr>
|
||||
<td><div class="NPC-Alex pull-left"></div></td>
|
||||
<td>
|
||||
<div class="popover static-popover fade right in">
|
||||
<div class="arrow"></div>
|
||||
<h3 class="popover-title">Alexander Augustin</h3>
|
||||
<div class="popover-content">Welcome to the Market! I'm the merchant, <a target="_blank" href="http://www.kickstarter.com/profile/523661924">Alexander</a>. Dying to get that particular pet you're after, but don't want to wait for it to drop? Buy it here!</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr></table>
|
||||
|
||||
<h4>Eggs</h4>
|
||||
{#with _items.pets as :egg}
|
||||
<table class="tab-pane pet-grid">
|
||||
<tr>
|
||||
{#with :egg[0]}<app:pets:egg />{/}
|
||||
{#with :egg[1]}<app:pets:egg />{/}
|
||||
{#with :egg[2]}<app:pets:egg />{/}
|
||||
{#with :egg[3]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :egg[4]}<app:pets:egg />{/}
|
||||
{#with :egg[5]}<app:pets:egg />{/}
|
||||
{#with :egg[6]}<app:pets:egg />{/}
|
||||
{#with :egg[7]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :egg[8]}<app:pets:egg />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
<h4>Hatching Potions</h4>
|
||||
{#with _items.hatchingPotions as :hatchingPotion}
|
||||
<table class="tab-pane pet-grid">
|
||||
<tr>
|
||||
{#with :hatchingPotion[0]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[1]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[2]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[3]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :hatchingPotion[4]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[5]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[6]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[7]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
<tr>
|
||||
{#with :hatchingPotion[8]}<app:pets:hatchingPotion />{/}
|
||||
{#with :hatchingPotion[9]}<app:pets:hatchingPotion />{/}
|
||||
</tr>
|
||||
</table>
|
||||
{/}
|
||||
</div>
|
||||
@@ -0,0 +1,110 @@
|
||||
.row-fluid
|
||||
|
||||
// ---- Customize -----
|
||||
.span4.border-right
|
||||
menu(type='list')
|
||||
// gender
|
||||
li.customize-menu
|
||||
menu(label='Head')
|
||||
button.m_head_0.customize-option(type='button', ng-click='set("preferences.gender","m")')
|
||||
button.f_head_0.customize-option(type='button', ng-click='set("preferences.gender","f")')
|
||||
label.checkbox
|
||||
input(type='checkbox', checked='{{user.preferences.showHelm}}')
|
||||
| Show Helm
|
||||
// hair
|
||||
li.customize-menu
|
||||
menu(label='Hair')
|
||||
button(class='{{user.preferences.gender}}_hair_blond customize-option', type='button', ng-click='set("preferences.hair","blond")')
|
||||
button(class='{{user.preferences.gender}}_hair_black customize-option', type='button', ng-click='set("preferences.hair","black")')
|
||||
button(class='{{user.preferences.gender}}_hair_brown customize-option', type='button', ng-click='set("preferences.hair","brown")')
|
||||
button(class='{{user.preferences.gender}}_hair_white customize-option', type='button', ng-click='set("preferences.hair","white")')
|
||||
// skin
|
||||
li.customize-menu
|
||||
menu(label='Skin')
|
||||
button.customize-option(class='{{user.preferences.gender}}_skin_dead', type='button', ng-click='set("preferences.skin","dead")')
|
||||
button.customize-option(class='{{user.preferences.gender}}_skin_orc', type='button', ng-click='set("preferences.skin","orc")')
|
||||
button.customize-option(class='{{user.preferences.gender}}_skin_asian', type='button', ng-click='set("preferences.skin","asian")')
|
||||
button.customize-option(class='{{user.preferences.gender}}_skin_black', type='button', ng-click='set("preferences.skin","black")')
|
||||
button.customize-option(class='{{user.preferences.gender}}_skin_white', type='button', ng-click='set("preferences.skin","white")')
|
||||
menu(ng-show='user.preferences.gender=="f"', type='list')
|
||||
li.customize-menu
|
||||
menu(label='Clothing')
|
||||
button.f_armor_0_v1.customize-option(type='button', ng-click='set("preferences.armorSet","v1")')
|
||||
button.f_armor_0_v2.customize-option(type='button', ng-click='set("preferences.armorSet","v2")')
|
||||
|
||||
// ------ Stats ------
|
||||
.span4.border-right
|
||||
// <profile-stats:>
|
||||
h4 Items
|
||||
p
|
||||
strong {{itemText('weapon',profile.items.weapon)}}
|
||||
| : {{itemStat('weapon',profile.items.weapon)}}% Exp gain
|
||||
p
|
||||
strong {{itemText('armor',profile.items.armor)}}
|
||||
| : {{itemStat('armor',profile.items.armor)}}% Defense
|
||||
p
|
||||
strong {{itemText('head',profile.items.head)}}
|
||||
| : {{itemStat('head',profile.items.head)}}% Defense
|
||||
p
|
||||
strong {{itemText('shield',profile.items.shield)}}
|
||||
| : {{itemStat('shield',profile.items.shield)}}% Defense
|
||||
h4 Stats
|
||||
p
|
||||
strong HP
|
||||
| : {{floor(profile.stats.hp)}} / 50
|
||||
p
|
||||
strong GP
|
||||
| : {{floor(profile.stats.gp)}}
|
||||
p
|
||||
strong Lvl
|
||||
| : {{profile.stats.lvl}}
|
||||
p
|
||||
strong Exp
|
||||
| : {{floor(profile.stats.exp)}} / {{tnl(profile.stats.lvl)}}
|
||||
p
|
||||
strong Strength
|
||||
| : {{userStr(profile.stats.lvl)}}
|
||||
p
|
||||
strong Defense
|
||||
| : {{userDef(profile.stats.lvl)}}
|
||||
p
|
||||
strong Pets Found
|
||||
| : {{count(profile.items.pets)}}
|
||||
hr
|
||||
p
|
||||
strong Total Strength
|
||||
| : {{totalStr(profile.stats.lvl, profile.items.weapon)}} %
|
||||
p
|
||||
strong Total Defense
|
||||
| : {{totalDef(profile.stats.lvl, profile.items.armor, profile.items.head, profile.items.shield)}} %
|
||||
|
||||
|
||||
// ------- Edit -------
|
||||
.span4
|
||||
// <profile-edit:>
|
||||
// <a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
||||
// TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
|
||||
img.pull-right(ng-src='{{user.profile.imageUrl}}')
|
||||
.control-group
|
||||
label.control-label(for='profileImageUrl') Photo Url
|
||||
.controls
|
||||
input#profileImageUrl(type='url', value='{{user.profile.imageUrl}}', placeholder='Image Url')
|
||||
.control-group
|
||||
label.control-label(for='profileFullName') Full Name
|
||||
.controls
|
||||
input#profileFullName(type='text', placeholder='Full Name', value='{{user.profile.name}}')
|
||||
.control-group
|
||||
label.control-label(for='profileBlurb') Blurb
|
||||
.controls
|
||||
textarea#profileBlurb(placeholder='Blurb') {{user.profile.blurb}}
|
||||
.control-group
|
||||
label.control-label(for='profileWebsite') Websites
|
||||
.controls
|
||||
form(x-bind='submit:profileAddWebsite')
|
||||
input#profileWebsite(type='url', value='{{_newProfileWebsite}}', placeholder='Add Website')
|
||||
ul
|
||||
// would prefer if there were and index in #each, instead using data-website to search with indexOf
|
||||
li(ng-repeat='website in user.profile.websites')
|
||||
| {{website}}
|
||||
a(data-website='{{website}}', x-bind='click:profileRemoveWebsite')
|
||||
i.icon-remove
|
||||
@@ -0,0 +1,40 @@
|
||||
{{#each _membersArray as :member}}
|
||||
<app:modals:modal modalId="avatar-modal-{{:member.id}}">
|
||||
<app:avatar:profile profile={{_members[:member.id]}} />
|
||||
|
||||
<!-- see above -->
|
||||
<profile:>
|
||||
<h2 class='profile-modal-header'>{{username(@profile.auth, @profile.profile.name)}}</h2>
|
||||
<hr/>
|
||||
<div class='row-fluid'>
|
||||
<div class='span6'>
|
||||
{{#if @profile.profile.imageUrl}}
|
||||
<img src="{{@profile.profile.imageUrl}}" />
|
||||
{{/}}
|
||||
{{#if @profile.profile.blurb}}
|
||||
<p>{{@profile.profile.blurb}}</p>
|
||||
{{/}}
|
||||
{{#if @profile.profile.websites}}
|
||||
<ul>
|
||||
{{#each @profile.profile.websites as :website}}
|
||||
<li>{{:website}}</li>
|
||||
{{/}}
|
||||
</ul>
|
||||
{{/}}
|
||||
<h3>Stats</h3>
|
||||
<app:avatar:profile-stats profile={{@profile}} />
|
||||
</div>
|
||||
<div class='span6'>
|
||||
<h3>Achievements</h3>
|
||||
<app:avatar:achievements profile={{@profile}} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
{{/}}
|
||||
@@ -1,232 +0,0 @@
|
||||
<modals:>
|
||||
{{#each _membersArray as :member}}
|
||||
<app:modals:modal modalId="avatar-modal-{{:member.id}}">
|
||||
<app:avatar:profile profile={{_members[:member.id]}} />
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
{{/}}
|
||||
|
||||
<profile-stats:>
|
||||
<h4>Items</h4>
|
||||
<p><strong>{itemText('weapon',@profile.items.weapon)}</strong>: {itemStat('weapon',@profile.items.weapon)}% Exp gain</p>
|
||||
<p><strong>{itemText('armor',@profile.items.armor)}</strong>: {itemStat('armor',@profile.items.armor)}% Defense</p>
|
||||
<p><strong>{itemText('head',@profile.items.head)}</strong>: {itemStat('head',@profile.items.head)}% Defense</p>
|
||||
<p><strong>{itemText('shield',@profile.items.shield)}</strong>: {itemStat('shield',@profile.items.shield)}% Defense</p>
|
||||
|
||||
<h4>Stats</h4>
|
||||
<p><strong>HP</strong>: {floor(@profile.stats.hp)} / 50</p>
|
||||
<p><strong>GP</strong>: {floor(@profile.stats.gp)}</p>
|
||||
<p><strong>Lvl</strong>: {@profile.stats.lvl}</p>
|
||||
<p><strong>Exp</strong>: {floor(@profile.stats.exp)} / {tnl(@profile.stats.lvl)}</p>
|
||||
<p><strong>Strength</strong>: {userStr(@profile.stats.lvl)}</p>
|
||||
<p><strong>Defense</strong>: {userDef(@profile.stats.lvl)}</p>
|
||||
<p><strong>Pets Found</strong>: {count(@profile.items.pets)}</p>
|
||||
<hr/>
|
||||
<p><strong>Total Strength</strong>: {totalStr(@profile.stats.lvl, @profile.items.weapon)} %</p>
|
||||
<p><strong>Total Defense</strong>: {totalDef(@profile.stats.lvl, @profile.items.armor, @profile.items.head, @profile.items.shield)} %</p>
|
||||
|
||||
|
||||
<customize:>
|
||||
|
||||
<!-- customization options -->
|
||||
{#with _user.preferences as :p}
|
||||
<menu type="list">
|
||||
<!-- gender -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Head">
|
||||
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
||||
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
||||
</menu>
|
||||
<label class="checkbox">
|
||||
<input type=checkbox checked="{_user.preferences.showHelm}" /> Show Helm
|
||||
</label>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- hair -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Hair">
|
||||
<button type="button" class="{:p.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{:p.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{:p.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{:p.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
|
||||
</menu>
|
||||
</li>
|
||||
|
||||
<!-- skin -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Skin">
|
||||
<button type="button" class='{:p.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{:p.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{:p.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{:p.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{:p.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
{#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
|
||||
<menu type="list">
|
||||
<li class="customize-menu">
|
||||
<menu label="Clothing">
|
||||
<button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
|
||||
<button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
{/}
|
||||
{/}
|
||||
|
||||
<profile-edit:>
|
||||
<!--<a class='btn btn-success' x-bind="click:profileSave">Save</a>-->
|
||||
<!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
|
||||
<img class='pull-right' src="{_user.profile.imageUrl}" />
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileImageUrl">Photo Url</label>
|
||||
<div class="controls">
|
||||
<input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileFullName">Full Name</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileBlurb">Blurb</label>
|
||||
<div class="controls">
|
||||
<textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileWebsite">Websites</label>
|
||||
<div class="controls">
|
||||
<form x-bind="submit:profileAddWebsite">
|
||||
<input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
|
||||
</form>
|
||||
</div>
|
||||
<ul>
|
||||
<!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
|
||||
{#each _user.profile.websites as :website}
|
||||
<li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
|
||||
{/}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<profile:>
|
||||
<h2 class='profile-modal-header'>{{username(@profile.auth, @profile.profile.name)}}</h2>
|
||||
<hr/>
|
||||
<div class='row-fluid'>
|
||||
<div class='span6'>
|
||||
{{#if @profile.profile.imageUrl}}
|
||||
<img src="{{@profile.profile.imageUrl}}" />
|
||||
{{/}}
|
||||
{{#if @profile.profile.blurb}}
|
||||
<p>{{@profile.profile.blurb}}</p>
|
||||
{{/}}
|
||||
{{#if @profile.profile.websites}}
|
||||
<ul>
|
||||
{{#each @profile.profile.websites as :website}}
|
||||
<li>{{:website}}</li>
|
||||
{{/}}
|
||||
</ul>
|
||||
{{/}}
|
||||
<h3>Stats</h3>
|
||||
<app:avatar:profile-stats profile={{@profile}} />
|
||||
</div>
|
||||
<div class='span6'>
|
||||
<h3>Achievements</h3>
|
||||
<app:avatar:achievements profile={{@profile}} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<achievements:>
|
||||
<div class='achievements-container'>
|
||||
<!--<div class='achievement achievement-sword'></div>-->
|
||||
<!--<div class='achievement achievement-tree'></div>-->
|
||||
<!--<div class='achievement achievement-comment'></div>-->
|
||||
<!--<div class='achievement achievement-cave'></div>-->
|
||||
<!--<div class='achievement achievement-sun'></div>-->
|
||||
<!--<div class='achievement achievement-boot'></div>-->
|
||||
<!--<div class='achievement achievement-coffin'></div>-->
|
||||
<!--<div class='achievement achievement-alien'></div>-->
|
||||
<!--<div class='achievement achievement-ninja'></div>-->
|
||||
<!--<div class='achievement achievement-cactus'></div>-->
|
||||
<!--<div class='achievement achievement-bow'></div>-->
|
||||
<!--<div class='achievement achievement-shield'></div>-->
|
||||
<!--<div class='achievement achievement-karaoke'></div>-->
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.npc}} classes='achievement-helm' unlockable=false profile={{@profile}}>
|
||||
<h5><span class='label label-success'>{{@profile.backer.npc}} NPC</span></h5>
|
||||
<small>Backed the Kickstarter project at the maximum level!</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.contributor}} classes='achievement-firefox' unlockable=true profile={{@profile}}>
|
||||
<h5>
|
||||
{{#if @profile.backer.contributor}}
|
||||
<span class='label label-inverse'>{{@profile.backer.contributor}}</span>
|
||||
{{else}}
|
||||
<span class='label'>Contributor</span>
|
||||
{{/}}
|
||||
</h5>
|
||||
<small>Has contributed to HabitRPG (code, design, pixel art, legal advice, docs, etc). Want this badge? Fix a bug :)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={{@profile.backer.tier}} classes='achievement-heart' unlockable=false profile={{@profile}}>
|
||||
<h5>Kickstarter Backer - ${{@profile.backer.tier}} Tier</h5>
|
||||
<small>Backed the Kickstarter Project</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.streak} classes='achievement-thermometer' unlockable=true profile={@profile}>
|
||||
<h5>{#if @profile.achievements.streak}{@profile.achievements.streak}{else}0{/} Streak Achievement(s)</h5>
|
||||
<small>Has performed {#if @profile.achievements.streak}{@profile.achievements.streak}{else}0{/} 21-day streaks on Dailies</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.originalUser} classes='achievement-cake' unlockable=false profile={@profile}>
|
||||
<h5>Original User</h5>
|
||||
<small>Goes way back to the Habit's days of yore (bless them for soldiering through bugs!)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.ultimateGear} classes='achievement-armor' unlockable=true profile={@profile}>
|
||||
<h5>Ultimate Gear</h5>
|
||||
<small>Has upgraded to the maximum weapon and armor set</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.beastMaster} classes='achievement-rat' unlockable=true profile={@profile}>
|
||||
<h5>Beast Master</h5>
|
||||
<small>Has found all 90 pets (insanely difficult, give this user props!)</small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
<app:avatar:achievement unlocked={@profile.achievements.helpedHabit} classes='achievement-tree' unlockable=true profile={@profile}>
|
||||
<h5>Helped Habit Grow</h5>
|
||||
<small>Has helped HabitRPG grow by filling out <a href="http://community.habitrpg.com/node/290" target="_blank">this survey.</a></small>
|
||||
</app:avatar:achievement>
|
||||
|
||||
</div>
|
||||
|
||||
<achievement: nonvoid>
|
||||
{#if @unlocked}
|
||||
<div class='achievement {{@classes}}'></div>{@content}
|
||||
<hr/>
|
||||
{else if @unlockable} <!-- only show silhouettes on own tab -->
|
||||
{{#if equal(_user.id,@profile.id)}}
|
||||
<span class='muted'>
|
||||
{@content}
|
||||
</span>
|
||||
<hr/>
|
||||
{{/}}
|
||||
{/}
|
||||
|
||||
|
||||
<inventory:>
|
||||
<!-- we'll have other inventory here later too, like enchantments, quest scrolls, etc -->
|
||||
<app:pets:inventory/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user