habitica/views/app/pets.html

<modals:>

  <app:modals:modal modalId='drops-enabled-modal' header="Drops Enabled!">
    <p><span class="Pet_Egg_{_user.items.eggs.0.name} item-drop-icon"></span> You've unlocked the Drop System! Now when you complete tasks, you have a small chance of finding an item. And guess what, you just found a <strong>{_user.items.eggs.0.text} egg</strong>! {_user.items.eggs.0.notes}</p>
    <@footer>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </@footer>
  </app:modals:modal>

  <app:modals:modal modalId='item-dropped-modal' header="An item has dropped!">
    <p><span class="Pet_{_drop.type}_{_drop.name} item-drop-icon"></span>{_drop.dialog}</p>


    <@footer>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </@footer>
  </app:modals:modal>

    <app:modals:modal modalId='beastmaster-achievement-modal' header="Achievement Unlocked!">
        <p>
            <div class='achievement achievement-rat'></div>You have earned the "Beast Master" Achievement for collecting all the pets!
        </p>
        <@footer>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </@footer>
    </app:modals:modal>

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

<hatchingPotion:>
    <td class="active-hatchingPotion" x-bind="click:buyHatchingPotion" data-hatchingPotion='{.name}'>
        <div class="Pet_HatchingPotion_{.name}"></div>
        {.text}<br/><small>{.value} Gems<small>
    </td>

<egg:>
    <td class="active-egg" x-bind="click:buyEgg" data-egg='{.name}'>
        <div rel=tooltip class="Pet_Egg_{.name}"></div>
        {.text}<br/><small>{.value} Gems<small>
    </td>

<inventory:>
    <div class='row-fluid'>
        <div class='{#if _hatchEgg}span6{/}'>
            <menu type="list" class="inventory-list">
                <li class="customize-menu">
                    <menu label="Eggs" class='pets-menu'>
                        {#if not(_user.items.eggs)}
                            <p>You don't have any eggs yet.</p>
                        {/if}
                        {#each _user.items.eggs as :egg}
                            <div>
                                <button rel=tooltip title="{:egg.text}" class="customize-option Pet_Egg_{{:egg.name}}" x-bind="click: chooseEgg"></button>
                                <p>{:egg.text}</p>
                            </div>
                        {/each}
                    </menu>
                </li>
                <li class="customize-menu">
                    <menu label="Hatching Potions" class='hatchingPotion-menu'>
                        {#if not(_user.items.hatchingPotions)}
                            <p>You don't have any hatching potions yet.</p>
                        {/if}
                        {#each _user.items.hatchingPotions as :hatchingPotion}
                            <div>
                                <button rel=tooltip title="{:hatchingPotion}" class="customize-option Pet_HatchingPotion_{{:hatchingPotion}}" x-bind="click: chooseHatching Potion"></button>
                                <p>{:hatchingPotion}</p>
                            </div>
                        {/each}
                    </menu>
                </li>
            </menu>
        </div>
        {#if _hatchEgg}
        <div class='span6'>
            <h3>Hatch Your Egg</h3>
            {#if not(_user.items.hatchingPotions)}
            <p>You don't have any hatching potions yet.</p>
            {else}
            <p>Which hatching potion will you pour on your {_hatchEgg.text} egg?</p>
            <form x-bind="submit:hatchEgg">
                <select>
                    {#each _user.items.hatchingPotions as :hatchingPotion}
                        <option>{:hatchingPotion}</option>
                    {/each}
                </select>
                <button type=submit>Pour</button>
            </form>
            {/if}
        </div>
        {/if}
    </div>

<stable:>
    <!-- tables, I know - I spent a good 1h here with divs & row-fluid and can't get it working, so screw it -->
    <table><tr>
        <td><img src='/img/npcs/matt.png' /></td>
        <td><div class="popover fade right in" style="position:relative;display:block;max-width:550px;margin-left:10px">
            <div class="arrow"></div>
            <h3 class="popover-title">Matt Boch</h3>
            <div class="popover-content">
                Welcome to the Stable! I'm <a target="_blank" href="http://www.kickstarter.com/profile/mattboch">Matt</a>, the beast master. Choose a pet here to adventure at your side - they aren't much help yet, but I forsee a time when they're able to <a href="_target" href="https://trello.com/card/mounts/50e5d3684fe3a7266b0036d6/221">grow into powerful steeds</a>! Until that day, <a target="_blank" href="https://f.cloud.github.com/assets/2374703/164631/3ed5fa6c-78cd-11e2-8743-f65ac477b55e.png">have a look-see</a> at all the pets you can collect.
                <h4>{count(_user.items.pets)} / 90 Pets Found</h4>
            </div>
        </div></td>
    </tr></table>
    <!--<menu type="list">
        <li class="customize-menu">
            <menu>
            </menu>
        </li>
    </menu>-->
    <table>
        {{#each _items.pets as :pet}}
            <tr>
                {{#each _items.hatchingPotions as :potion}}
                    <td>
                        <app:pets:stable-pet tooltip="{{:potion.text}} {{:pet.text}}" pet="{{:pet.name}}-{{:potion.name}}" />
                    </td>
                {{/}}
            </tr>
        {{/}}
    </table>
    <h4>Rare Pets</h4>
    <table>
        <tr>
            <td><app:pets:stable-pet potion='Veteran Wolf' pet="Wolf-Veteran" /></td>
            {{#if gt(_user.backer.tier,79)}}<td><app:pets:stable-pet potion='Cerberus Pup' pet="Wolf-Cerberus" /></td>{{/}}
        </tr>
    </table>

<stable-pet:>
    <div rel="tooltip" title="{{@tooltip}}">
        {#if ownsPet(@pet, _user.items.pets)}
            <button class="pet-button Pet-{{@pet}} {#if equal(_user.items.currentPet.name, @string)}active{/if}" data-pet="{{@pet}}" x-bind="click:choosePet"></button>
        {else}
            <button class="pet-button pet-not-owned" data-pet="{{@pet}}"><img src="/img/PixelPaw.png"/></button>
        {/}
    </div>