FeedEgg

public/img/sprites/pet_sprites.css

@@ -90,3 +90,4 @@
 .Pet-BearCub-CottonCandyPink {background-position: -7128px 0; width: 81px; height: 99px}
 .Pet-BearCub-CottonCandyBlue {background-position: -7209px 0; width: 81px; height: 99px}
 .Pet-BearCub-Base {background-position: -7290px 0; width: 81px; height: 99px}
+.Pet-Egg {background: url("/img/sprites/egg.png") no-repeat; width: 39px; height: 42px;}

src/app/character.coffee

@@ -78,6 +78,27 @@ module.exports.app = (appExports, model) ->
   appExports.customizeArmorSet = (e, el) ->
     user.set 'preferences.armorSet', $(el).attr('data-value')
 
+  appExports.chooseEgg = (e, el) ->
+    egg = model.at el
+
+    model.ref '_feedEgg', egg
+
+  appExports.feedEgg = (e, el) ->
+    food = $(el).children('select').val()
+    foods = user.get 'items.food'
+    egg = model.get '_feedEgg'
+    eggs = user.get 'items.eggs'
+
+    foodIdx = foods.indexOf food
+    eggIdx = eggs.indexOf egg
+
+    return alert "You don't own that food :\\" if foodIdx is -1
+    return alert "You don't own that egg :\\" if eggIdx is -1
+
+    user.push 'items.pets', egg.name + '-' + food
+    user.remove 'items.food', foodIdx, 1
+    user.remove 'items.eggs', eggIdx, 1
+
   appExports.restoreSave = (e, el) ->
     batch = new BatchUpdate(model)
     batch.startTransaction()
@@ -99,7 +120,6 @@ module.exports.app = (appExports, model) ->
       content: html
     $('.main-avatar').popover 'show'
 
-
 userSchema =
 # _id
   stats: { gp: 0, exp: 0, lvl: 1, hp: 50 }

src/app/helpers.coffee

@@ -46,3 +46,7 @@ module.exports.viewHelpers = (view) ->
   view.fn "encodeiCalLink", (uid, apiToken) ->
     loc = window?.location.host or process.env.BASE_URL
     encodeURIComponent "http://#{loc}/v1/users/#{uid}/calendar.ics?apiToken=#{apiToken}"
+
+  view.fn 'removeWhitespace', (str) ->
+    return '' unless str
+    str.replace /\s/g, ''

src/app/pets.coffee

@@ -31,7 +31,7 @@ module.exports.app = (appExports, model) ->
       if tokens > pet.value
         r = confirm("Buy this pet with #{pet.value} of your #{tokens} tokens?");
         if r
-          user.push "items.pets", name
+          user.push 'items.pets', name
           user.set 'items.currentPet', pet
           user.set 'balance', (tokens - pet.value)/4
       else

src/app/scoring.coffee

@@ -116,15 +116,15 @@ score = (model, taskId, direction, times, batch, cron) ->
     batch.commit()
 
   # 1% chance of getting a pet or meat
-  if obj.flags.dropsEnabled and Math.random() < .01
+  if obj.flags.dropsEnabled and Math.random() < .50
     if Math.random() < .5
       drop = randomProp(food)
       user.push 'items.food', drop.name
-      drop.type = 'food'
+      drop.type = 'Food'
     else
       drop = randomProp(pets)
       user.push 'items.eggs', drop
-      drop.type = 'egg'
+      drop.type = 'Egg'
 
     model.set '_drop', drop
     $('#item-dropped-modal').modal 'show'

views/app/avatar.html

@@ -189,32 +189,57 @@
 <inventory:>
     <div class='row-fluid'>
         <div class='span6 well'>
-            <h3>Food</h3>
-            {#if not(_user.items.food)}
-                <p>You don't have any food yet.</p>
-            {/if}
-            {#each _user.items.food as :food}
-                {:food}
-            {/each}
-            <h3>Eggs</h3>
-            {#if not(_user.items.eggs)}
-                <p>You don't have any eggs yet.</p>
-            {/if}
-            {#each _user.items.eggs as :egg}
-                <p>{:egg.text}</p>
-            {/each}
+            <menu type="list">
+                <h3>Food</h3>
+                {#if not(_user.items.food)}
+                    <p>You don't have any food yet.</p>
+                {/if}
+                <li class="customize-menu">
+                    {#each _user.items.food as :food}
+                        <button class="customize-option" x-bind="click: chooseFood">{:food}</button>
+                    {/each}
+                </li>
+                <h3>Eggs</h3>
+                {#if not(_user.items.eggs)}
+                    <p>You don't have any eggs yet.</p>
+                {/if}
+                <li class="customize-menu">
+                    {#each _user.items.eggs as :egg}
+                        <button class="customize-option Pet-Egg" x-bind="click: chooseEgg"></button>
+                        <p>{:egg.text}</p>
+                    {/each}
+                </li>
+            </menu>
         </div>
+        {#if _feedEgg}
+            <div class='span6 well'>
+                <h3>Feed Your Egg</h3>
+                {#if not(_user.items.food)}
+                    <p>You don't have any food yet.</p>
+                {else}
+                    <p>What would you like to feed your {_feedEgg.text}?</p>
+                    <form x-bind="submit:feedEgg">
+                        <select>
+                            {#each _user.items.food as :food}
+                                <option>{:food}</option>
+                            {/each}
+                        </select>
+                        <button type=submit>Feed!</button>
+                    </form>
+                {/if}
+            </div>
+        {/if}
     </div>
 
 <stable:>
     <div class='row-fluid'>
-        <div class='span6 well'>
+        <div class='span12 well'>
             <h3>Stable</h3>
             {#if not(_user.items.pets)}
                 <p>You don't have any pets yet.</p>
             {/if}
             {#each _user.items.pets as :pet}
-                <p>{:pet}</p>
+                <div class="Pet-{removeWhitespace(:pet)}">{:pet}</div>
             {/each}
         </div>
     </div>

views/app/pets.html

@@ -9,7 +9,8 @@
   </app:modals:modal>
   <app:modals:modal modalId='item-dropped-modal' header="Item Dropped!">
     <p>An item has dropped!</p>
-    <p>Here's your first {_drop.type} – {_drop.text}!</p>
+    <p>Here's your {_drop.type} – {_drop.text}!</p>
+    <div class="Pet-{_drop.type}"></div>
     <p>{_drop.notes}</p>
     <@footer>
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>