habitica/views/app/avatar.html

<modals:>
    {{#each _partyMembers as :profile}}
        <app:modals:modal modalId="avatar-modal-{{:profile.id}}">
            <app:avatar:profile profile={{:profile}} />
            <@footer>
                <button data-dismiss="modal" class="btn btn-success">Ok</button>
            </@footer>
        </app:modals:modal>
    {{/}}

<avatar:>
    <figure class="herobox"
                data-name="{username(@profile.auth, @profile.profile.name)} - lvl {@profile.stats.lvl}"
                data-level="{@profile.stats.lvl}"
                data-checkpet="{#if @profile.items.pet}hasPet{/}"
                data-checkuser="{{#if @main}}isUser{{/}}"
                data-uid="{{@profile.id}}" x-bind="click:clickAvatar"
                rel="popover" data-placement="bottom" data-trigger="hover" data-html="true" data-content="{{#unless @main}}
                             <div>
                                <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: {floor(@profile.stats.gp)}</div>
                                <div>{count(@profile.items.pets)} / 90 Pets Found</div>
                            </div>
                        {{/}}">
        <div class='character-sprites'>
            {#with @profile.preferences as :p}
                <span class='{#if @profile.flags.rest}zzz{/}'></span>
                <span class='{:p.gender}_skin_{:p.skin}'></span>
                <span class='{:p.gender}_hair_{:p.hair}'></span>
                <span class="{equipped('armor', @profile.items.armor, @profile.preferences, @profile.backer.tier)}"></span>
                {#if :p.showHelm}
                    <span class="{equipped('head', @profile.items.head, @profile.preferences, @profile.backer.tier)}"></span>
                {else}
                    <span class="{:p.gender}_head_0"></span>
                {/}
                <span class="{equipped('shield', @profile.items.shield, @profile.preferences, @profile.backer.tier)}"></span>
                <span class="{equipped('weapon', @profile.items.weapon, @profile.preferences, @profile.backer.tier)}"></span>
            {/}
            {#if and(@profile.items.currentPet, not(@minimal))}
                <span class="Pet-{@profile.items.currentPet.name}-{@profile.items.currentPet.modifier} current-pet" ></span>
            {/}
        </div>
    </figure>

<profile-stats:>
    <h3>Items</h3>
    <p><strong>{itemText('weapon',_user.items.weapon)}</strong> - {itemStat('weapon',_user.items.weapon)}% Exp gain</p>
    <p><strong>{itemText('armor',_user.items.armor)}</strong> - {itemStat('armor',_user.items.armor)}% Defense</p>
    <p><strong>{itemText('head',_user.items.head)}</strong> - {itemStat('head',_user.items.head)}% Defense</p>
    <p><strong>{itemText('shield',_user.items.shield)}</strong> - {itemStat('shield',_user.items.shield)}% Defense</p>

    <h3>Stats</h3>
    <p><strong>HP</strong> - {_user.stats.hp} / 50</p>
    <p><strong>GP</strong> - {_user.stats.gp}</p>
    <p><strong>Lvl</strong> - {_user.stats.lvl}</p>
    <p><strong>Exp</strong> - {_user.stats.exp} / {tnl(_user.stats.lvl)}</p>
    <p><strong>Strength</strong> - {userStr(_user.stats.lvl)}</p>
    <p><strong>Defense</strong> - {userDef(_user.stats.lvl)}</p>
    <p><strong>Pets Found</strong> - {count(_user.items.pets)}</p>
    <hr/>
    <p><strong>Total Strength</strong> - {totalStr(_user.stats.lvl, _user.items.weapon)} %</p>
    <p><strong>Total Defense</strong> - {totalDef(_user.stats.lvl, _user.items.armor, _user.items.head, _user.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:>
    <div class='row-fluid'>
        <div class='span6'>
            <h3>{{username(@profile.auth, @profile.profile.name)}}</h3>
            {{#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>
            {{/}}
        </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>

    </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/>