habitica/views/app/game-pane.html

<main:>
    <div class="module full-width">

        <span class='option-box pull-right wallet'>
            <app:rewards:userTokens />
        </span>

        <ul class="nav nav-tabs game-tabs">
            <li class="active"><a data-toggle='tab' data-target="#profileCustomize"><i class='icon-user'></i> Profile</a></li>
            <li><a data-toggle='tab' data-target="#profileParty" id='party-tab-link'><i class='icon-heart'></i> Party</a></li>
            {#if _user.flags.dropsEnabled}
                <li><a data-toggle='tab' data-target="#profileInventory"><i class='icon-gift'></i> Inventory</a></li>
                <li><a data-toggle='tab' data-target="#profileStable"><i class='icon-leaf'></i> Stable</a></li>
            {/if}
            <li><a data-toggle='tab' data-target="#profileTavern"><i class='icon-glass'></i> Tavern</a></li>
            <li><a data-toggle='tab' data-target="#profileAchievements"><i class='icon-certificate'></i> Achievements</a></li>
            {{#if _loggedIn}}
                <li><a data-toggle='tab' data-target="#profileSettings"><i class='icon-wrench'></i> Settings</a></li>
            {{/}}
        </ul>

        <div class="tab-content">

            <div class="tab-pane active" id="profileCustomize">
                <div class='row-fluid'>
                    <div class='span6 border-right'>
                        <app:avatar:customize />
                    </div>
                    <div class='span6'>
                        <app:avatar:profile-edit />
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="profileParty">
                <app:party:party />
            </div>

            <div class="tab-pane" id="profileAchievements">
                <app:avatar:achievements profile="{{_user}}" />
            </div>

            <div class="tab-pane" id="profileInventory">
                <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="profileStable">
                <app:pets:stable />
            </div>

            <div class="tab-pane" id="profileTavern">
                <app:game-pane:tavern />
            </div>

            <div class="tab-pane" id="profileSettings">
                {{#if _loggedIn}}
                    <app:settings:settings-pane />
                {{/}}
            </div>
        </div>

    </div>

<tavern:>
    <div class='row-fluid'>
        <div class='span6 border-right'>
            <div class='tavern-pane'>
                <img src='/img/npcs/daniel.png' />
                <div class="popover fade right in" style="top: 0px; left: 135px; display: block;">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Daniel Johansson</h3>
                    <div class="popover-content">Welcome to the Tavern! I'm <a target="_blank" href="http://www.kickstarter.com/profile/2014640723">Daniel</a>, the bar keep. If you want to rest a while (going on vacation?), I'll set you up at the inn - dailies won't hurt you while you're resting. The minimum stay is 24h, but you can check out any time. Stay a while & meet the clientele.</div>
                </div>
            </div>
            <button x-bind="click:toggleResting" class='btn btn-large btn-success {#if _user.flags.rest}active{/}'>{#if _user.flags.rest}Check Out of Inn{else}Rest In The Inn{/}</button>
        </div>
        <div class='span6'>
            <h3>Tavern Talk & LFG</h3>
            <form x-bind='submit:tavernSendChat'>
                <textarea x-bind='keyup:tavernMessageKeyup'>{_tavernMessage}</textarea><br/>
                <input class=btn type=submit value=Submit />
            </form>
            <ul class='unstyled tavern-chat'>
                {#each _tavern.chat.messages as :message}
                    <li class="{#if indexOf(:message.text, _user.profile.name)}highlight{/if}">
                        <span class='badge'>{:message.user}</span> {:message.text} {:message.timestamp} - <span class='muted'>{relativeDate(:message.timestamp)}</span>
                    </li>
                {/}
            </ul>
        </div>
    </div>

<market:>

    <!-- pets pane -->
    <div class="tab-pane pet-grid" id="market-tab">
        <img src='/img/npcs/alex.png' />
        <div class="popover fade right in" style="top: 0px; left: 170px; display: block;">
            <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>

        <h4>Eggs</h4>
        {#with _items.pets as :egg}
        <table>
            <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>
            <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>