habitica/views/app/rewards.html

<rewardsColumn:>
    <div class="module">
        <div class="task-column rewards">
            <!-- cash or tokens -->
            <span class='option-box pull-right wallet'>
                {#unless _view.activeTabPets}
                <div class="money">
                    {gold(_user.stats.gp)}
                    <span class='shop_gold' rel='tooltip' title='Gold'></span>
                </div>
                <div class="money">
                    {silver(_user.stats.gp)}
                    <span class='shop_silver' rel='tooltip' title='Silver'></span>
                </div>
                <!-- <div class="money">
                    {copper(_user.stats.gp)}
                    <span class='shop_copper' rel='tooltip' title='Copper'></span>
                </div> -->
                {else}
                <app:rewards:userTokens />
                {/}
            </span>
            <h2 class="task-column_title">Rewards</h2>

            <!-- if pets are enabled, make tabs -->
            {#if equal(_user.flags.dropsEnabled,true)}
            <div class='tabbable tabs-below'>
                <div class="tab-content">
                    <div class="tab-pane active" id="rewards-tab">
                        <app:rewardsTab />
                    </div>

                    <!-- pets pane -->
                    <div class="tab-pane pet-grid" id="market-tab">
                        <h4>Welcome to the market</h4>
                        {#with _view.items.food as :food}
                        <table>
                            <tr>
                                {#with :food[0]}<app:food />{/}
                                {#with :food[1]}<app:food />{/}
                                {#with :food[2]}<app:food />{/}
                                {#with :food[3]}<app:food />{/}
                            </tr>
                            <tr>
                                {#with :food[4]}<app:food />{/}
                                {#with :food[5]}<app:food />{/}
                                {#with :food[6]}<app:food />{/}
                                {#with :food[7]}<app:food />{/}
                            </tr>
                            <tr>
                                {#with :food[8]}<app:food />{/}
                                {#with :food[9]}<app:food />{/}
                            </tr>
                        </table>
                        {/}
                    </div>
                    <!--<div class="tab-pane" id="mounts-tab">...</div>-->
                </div>

                <ul class="nav nav-tabs" id="rewardsTabs">
                    <li class="active"><a href="#rewards-tab" data-toggle="tab" x-bind="click:activateRewardsTab">Rewards</a></li>
                    <li><a href="#market-tab" data-target='#market-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Market</a></li>
                    <!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
                </ul>
            </div>

            <!-- if pets are disabled, just do rewards tab -->
            {else}
            <app:rewards:rewardsTab />
            {/}
        </div>
    </div>


<rewardsTab:>
    <!-- add new reward -->
    <app:tasks:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />

    {#if _rewardList}
    <ul class='rewards'>
        {#each _rewardList as :task}<app:tasks:task />{/}
    </ul>
    {/}


    {#if _user.flags.itemsEnabled}
    <ul class='items'>
        {#with _view.items.weapon as :item}<app:rewards:item />{/}
        {#with _view.items.armor as :item}<app:rewards:item />{/}
        {#with _view.items.head as :item}<app:rewards:item />{/}
        {#with _view.items.shield as :item}<app:rewards:item />{/}
        {#with _view.items.potion as :item}<app:rewards:item />{/}
        {#with _view.items.reroll as :item}<app:rewards:item reroll=true />{/}
    </ul>
    {/}

<pet:>
    <td class="{#if _user.items.pets[.name]}active-pet{/}">
      <img rel=tooltip title="{.text} - {.value} Tokens" x-bind="click:selectPet" data-pet='{.name}' src='img/sprites/{.icon}'/>
    </td>

<food:>
    <td class="active-food">
      <div rel=tooltip class="{.name}" title="{.text} - {.value} Tokens" x-bind="click:buyFood" data-food='{.name}'>{.text}</div>
    </td>

<userTokens:>
  <a class="pull-right token-wallet">
    <span class="task-action-btn tile flush bright add-token-btn">＋</span>
    <span class="task-action-btn tile flush neutral">{tokens(_user.balance)} Tokens</span>
  </a>



<item:>
  <li class="task reward-item {#if :item.hide}hide{/}">
    <!-- right-hand side control buttons -->
    <div class="task-meta-controls">
        <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
    </div>

    <!-- left-hand size commands -->
    <div class="task-controls">
      {#if @reroll}
        <a class="task-action-btn btn-reroll" data-toggle="modal" data-target="#reroll-modal">⟲</a>
      {else}
        <a class="money btn-buy item-btn" x-bind=click:buyItem data-type={:item.type} data-value={:item.value} data-index={:item.index}>
            <span class="reward-cost">{:item.value}</span>
            <span class='shop_gold'></span>
        </a>
      {/}
    </div>
    <!-- main content -->
    <span class="shop_{:item.classes} shop-sprite item-img"></span>
    <p class="task-text">{:item.text}</p>
  </li>