"unlock all the pets" style stable layout

src/app/helpers.coffee

@@ -149,4 +149,6 @@ viewHelpers = (view) ->
       classes += ' color-best'
     return classes
 
+  view.fn 'ownsPet', (pet, userPets) -> userPets?.indexOf(pet) != -1
+
 module.exports = { viewHelpers, removeWhitespace, randomVal, daysBetween, dayMapping, username }

styles/app/inventory.styl

@@ -48,3 +48,17 @@
     float:left
 .hatchingPotions-menu > div
     float:left
+
+.pet-button
+    border: none
+    background: none white
+.pet-not-owned
+    width: 81px;
+    height: 99px;
+    /* Would use css3 filters and just display the original pet image with a black hue,
+       but doesn't seem to work in Firefox or Opera */
+    /*filter: brightness(0%)
+    -webkit-filter: brightness(0%)
+    -moz-filter: brightness(0%)
+    -o-filter: brightness(0%)
+    -ms-filter: brightness(0%)*/

views/app/pets.html

@@ -86,16 +86,30 @@
     </div>
 
 <stable:>
-    {#if _user.items.pets}
-        <menu type="list">
+    <table>
+        {{#each _items.pets as :pet}}
+            <tr>
+                {{#each _items.hatchingPotions as :potion}}
+                    <td>
+                        <app:pets:stable-pet string="{{:pet.name}}-{{:potion.name}}" />
+                    </td>
+                {{/}}
+            </tr>
+        {{/}}
+    </table>
+    <!--<menu type="list">
         <li class="customize-menu">
             <menu>
-                    {#each _user.items.pets as :pet}
-                        <button type="button" class="customize-option Pet-{:pet} {#if equal(_user.items.currentPet.name, :pet)}active{/if}" rel="tooltip" title="{:pet}" data-pet="{:pet}" x-bind="click:choosePet"></button>
-                    {/}
+
             </menu>
         </li>
-        </menu>
-    {else}
-        <p>You don't have any pets yet.</p>
-    {/}
+    </menu>-->
+
+<stable-pet:>
+    <div rel="tooltip" title="{{:potion.text}} {{:pet.text}}">
+        {{#if ownsPet(@string, _user.items.pets)}}
+            <button class="pet-button Pet-{{@string}} {#if equal(_user.items.currentPet.name, @string)}active{/if}" data-pet="{{@string}}" x-bind="click:choosePet"></button>
+        {{else}}
+            <button class="pet-button pet-not-owned" data-pet="{{@string}}"><img src="/img/paw.png"/></button>
+        {{/}}
+    </div>