Merge branch 'develop'

styles/app/alerts.styl

@@ -83,18 +83,4 @@ borderDarken = 20%
   z-index: 3000
   position:absolute
   left:5px
-  top:5px
-
-// Bailey
-
-.rewards-module
-  z-index:2000
-
-.hiding-bailey
-  cursor: pointer
-  position:absolute
-  right: 50px
-  top: 117px //FIXME this isn't a good method, but i suck at css - tyler
-
-.new-stuff-word-bubble-container
-  height: 90px
+  top:5px

styles/app/header.styl

@@ -8,6 +8,7 @@
   border-bottom: 1px solid rgba(0,0,0,0.2)
   // margin-top: -1px
   overflow: hidden
+  position relative
 
 /* login/menu buttons
 --------------------- */

styles/app/index.styl

@@ -25,6 +25,7 @@
 @import "./achievements.styl";
 @import "./game-pane.styl";
 @import "./backer.styl";
+@import "./npcs.styl";
 
 // fix exploding to very wide for some reason
 .datepicker
@@ -151,10 +152,6 @@ hr
 .modal-body
     margin: 10px
 
-.static-popover
-    z-index 0
-    display block
-
 
 // TODO this is supposed to go in avatar.styl, but stylus is breaking if I even touch that file
 .profile-modal-header

styles/app/npcs.styl

@@ -0,0 +1,27 @@
+.NPC-Alex, .NPC-Bailey, .NPC-Bailey-Head, .NPC-Daniel, .NPC-Justin, .NPC-Justin-Head, .NPC-Matt {background: url("/img/npcs/NPC-SpriteSheet.png") no-repeat}
+
+.NPC-Alex {background-position: 0 0; width: 162px; height: 138px}
+.NPC-Daniel {background-position: -222px 0; width: 135px; height: 123px}
+.NPC-Justin {background-position: -357px 0; width: 84px; height: 119px}
+.NPC-Justin-Head {background-position: -396px 0; width: 36px; height: 96px}
+.NPC-Matt {background-position: -441px 0; width: 198px; height: 144px}
+
+// Bailey
+.NPC-Bailey
+    background-position: -162px -42px
+    width: 60px
+    height: 72px
+    float:left
+.NPC-Bailey-Head
+    background-position: -168px -42px
+    width: 54px
+    height: 30px
+    position: absolute
+    bottom: 0px
+    right: 50px
+    cursor: pointer
+
+.static-popover
+    z-index 0
+    display block
+    position:relative

views/app/alerts.html

@@ -1,14 +1,15 @@
 <modals:>
     <app:modals:modal modalId='new-stuff-modal' header="New Stuff">
-        <p class='new-stuff-word-bubble-container'>
-            <img src="/img/npcs/bailey.png" />
-
-            <div class="popover fade right in" style="top: 0px; left: 100px; display: block;">
-                <div class="arrow"></div>
-                <h3 class="popover-title">Bailey</h3>
-                <div class="popover-content"><a target="_blank" href="http://www.kickstarter.com/profile/mihakuu">Bailey</a> the Crier here! Announcing new stuff!</div>
-            </div>
-        </p>
+        <table><tr>
+            <td><div class=NPC-Bailey></div></td>
+            <td>
+                <div class="popover static-popover fade right in">
+                    <div class="arrow"></div>
+                    <h3 class="popover-title">Bailey</h3>
+                    <div class="popover-content"><a target="_blank" href="http://www.kickstarter.com/profile/mihakuu">Bailey</a> the Crier here! Announcing new stuff!</div>
+                </div>
+            </td>
+        </tr></table>
 
         <hr/>
 
@@ -85,10 +86,10 @@
 
 <hiding-bailey:>
     {#if equal(_user.flags.newStuff,'show')}
-        <img class='hiding-bailey' src="/img/npcs/bailey-face.png"
+        <div class='NPC-Bailey-Head'
              rel=tooltip title=Psst data-placement=top
              data-toggle=modal data-target='#new-stuff-modal'
-             />
+             ></div>
     {/}
 
 <flash:>

views/app/game-pane.html

@@ -77,15 +77,19 @@
     <div class='row-fluid'>
         <div class='span4 border-right'>
             <div class='tavern-pane'>
-                <img src='/img/npcs/daniel.png' />
-                <div class="popover static-popover fade right in" style="top: 0px; left: 135px;">
-                    <div class="arrow"></div>
-                    <h3 class="popover-title">Daniel Johansson</h3>
-                    <div class="popover-content">
-                        Welcome to the Tavern! I'm <a target="_blank" href="http://www.kickstarter.com/profile/2014640723">Daniel</a>, the bar keep. If you want to rest a while (going on vacation? sudden illness?), I'll set you up at the inn - dailies won't hurt you while you're resting. Stay a while & meet the locals.
-                        <div><button x-bind="click:toggleResting" class='btn btn-large btn-success {#if _user.flags.rest}active{/}'>{#if _user.flags.rest}Check Out of Inn{else}Rest In The Inn{/}</button></div>
-                    </div>
-                </div>
+                <table><tr>
+                    <td><div class='NPC-Daniel'></div></td>
+                    <td>
+                        <div class="popover static-popover fade right in">
+                            <div class="arrow"></div>
+                            <h3 class="popover-title">Daniel Johansson</h3>
+                            <div class="popover-content">
+                                Welcome to the Tavern! I'm <a target="_blank" href="http://www.kickstarter.com/profile/2014640723">Daniel</a>, the bar keep. If you want to rest a while (going on vacation? sudden illness?), I'll set you up at the inn - dailies won't hurt you while you're resting. Stay a while & meet the locals.
+                                <div><button x-bind="click:toggleResting" class='btn btn-large btn-success {#if _user.flags.rest}active{/}'>{#if _user.flags.rest}Check Out of Inn{else}Rest In The Inn{/}</button></div>
+                            </div>
+                        </div>
+                    </td>
+                </tr></table>
             </div>
 
             <div class='alert alert-info {#unless _user.flags.rest}hidden{/}'>Whilst resting your dailies are saved and aren't effected by day turn-over. Whether you check out tomorrow or in a weeks time you'll continue in the same state as when you checked in.</div>
@@ -120,17 +124,21 @@
 <market:>
 
     <!-- pets pane -->
-    <div class="tab-pane pet-grid" id="market-tab">
-        <img src='/img/npcs/alex.png' />
-        <div class="popover static-popover fade right in" style="top: 0px; left: 170px;">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Alexander Augustin</h3>
-            <div class="popover-content">Welcome to the Market! I'm the merchant, <a target="_blank" href="http://www.kickstarter.com/profile/523661924">Alexander</a>. Dying to get that particular pet you're after, but don't want to wait for it to drop? Buy it here!</div>
-        </div>
+    <div id="market-tab">
+        <table><tr>
+            <td><div class="NPC-Alex pull-left"></div></td>
+            <td>
+                <div class="popover static-popover fade right in">
+                    <div class="arrow"></div>
+                    <h3 class="popover-title">Alexander Augustin</h3>
+                    <div class="popover-content">Welcome to the Market! I'm the merchant, <a target="_blank" href="http://www.kickstarter.com/profile/523661924">Alexander</a>. Dying to get that particular pet you're after, but don't want to wait for it to drop? Buy it here!</div>
+                </div>
+            </td>
+        </tr></table>
 
         <h4>Eggs</h4>
         {#with _items.pets as :egg}
-        <table>
+        <table class="tab-pane pet-grid">
             <tr>
                 {#with :egg[0]}<app:pets:egg />{/}
                 {#with :egg[1]}<app:pets:egg />{/}

views/app/header.html

@@ -39,5 +39,7 @@
                 </div>
             {{/}}
 
+            <app:alerts:hiding-bailey />
+
         </header>
     {/}

views/app/index.html

@@ -30,7 +30,6 @@
 
     <app:settings:menu />
     <app:header:header />
-    <app:alerts:hiding-bailey />
   </div>
   <span class='{#if _gamePane}hidden{/}'><app:filters:filters /></span>
 

views/app/pets.html

@@ -97,12 +97,12 @@
 <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 static-popover fade right in" style="position:relative;max-width:550px;margin-left:10px">
+        <td><div class=NPC-Matt></div></td>
+        <td><div class="popover static-popover fade right in" style="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.
+                <p>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.</p>
                 <h4>{count(_user.items.pets)} / 90 Pets Found</h4>
             </div>
         </div></td>