show buy more tokens modal if out

src/app/items.coffee

@@ -149,15 +149,15 @@ module.exports.app = (appExports, model) ->
       user.set 'items.pet', pet
     else
       tokens = user.get('balance')*4
-      if tokens < 2
-        alert "Not enough tokens"
-        return
-      r = confirm("Buy this pet with 2 of your #{tokens} tokens?");
-      if r
-        user.set "items.pets.#{name}",true
-        user.set 'items.pet', pet
-        model.set "_view.pets.#{name}.userOwns", true
-        user.set 'balance', (tokens - 2) / 4
+      if tokens > 3
+        r = confirm("Buy this pet with 2 of your #{tokens} tokens?");
+        if r
+          user.set "items.pets.#{name}",true
+          user.set 'items.pet', pet
+          model.set "_view.pets.#{name}.userOwns", true
+          user.set 'balance', (tokens - 2) / 4
+      else
+        $('#more-tokens-modal').modal('show')
 
   appExports.activateRewardsTab = ->
     model.set '_view.activeTabRewards', true

views/app/index.html

@@ -122,6 +122,15 @@ do a find for the string after "→"
       </@footer>
   </app:myModal>
 
+  <!-- Buy more tokens modal -->
+  <app:myModal modalId='more-tokens-modal' header="Out Of Tokens">
+      <app:userTokens/>
+      <p>You're out of tokens, which are used to buy pets and mounts.</p>
+      <@footer>
+      <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
+  </@footer>
+  </app:myModal>
+
   <!-- $customizations-modal -->
   <app:myModal modalId="customizations-modal" header="Customize">
     {#with _user.preferences}