Popover telling user they've unlocked Items Store

src/app/index.coffee

@@ -95,12 +95,24 @@ ready (model) ->
       else
         user.set 'stats.hp', stats.hp
   
-    # level up & carry-over exp
     if stats.exp?
+      # level up & carry-over exp
       tnl = model.get '_tnl'
       if stats.exp >= tnl
         stats.exp -= tnl
         user.set 'stats.lvl', user.get('stats.lvl') + 1
+      if !user.get('items.itemsEnabled') and stats.exp >=50
+        user.set 'items.itemsEnabled', true
+        $('ul.items').popover
+          title: "Item Store Unlocked"
+          placement: 'left'
+          html: true
+          content: "<div class='item-store-popover'>\
+            <img src='/img/BrowserQuest/chest.png' />\
+            Congradulations, you have unlocked the Item Store! You can now buy weapons, armor, potions, etc. Read each item's comment for more information. \
+            <a href='#' onClick=\"$('ul.items').popover('hide');return false;\">[Close]</a></div>"
+        $('ul.items').popover 'show'
+
       user.set 'stats.exp', stats.exp
       
     if stats.money?

styles/app/index.styl

@@ -115,7 +115,9 @@ footer.footer
   right: 10px
   
 /* ----- Items, Weapons, Armor -----*/
+.item-store-popover img
+  float:left
+  padding-right:7px;
+
 .item .task-text img
   max-height: 16px
-
-

views/app/index.html

@@ -102,9 +102,13 @@
         <ul class='rewards'>
           {#each _rewardList as :task}<app:task />{/}
         </ul>
-        <ul class='items'>
-          {#each _items as :item}<app:item />{/}  
-        </ul>
+        
+        {#if _user.items.itemsEnabled}        
+          <ul class='items'>
+            {#each _items as :item}<app:item />{/}  
+          </ul>
+        {/}
+        
         <app:newTask type=reward><input value={_newReward} type="text" /></app:newTask>
       </app:taskColumn>