Merge pull request #535 from MrConcept/notifications

Notifications

src/app/browser.coffee

@@ -180,7 +180,7 @@ setupGrowlNotifications = (model) ->
     return if user.get('stats.lvl') == 0
     $.bootstrapGrowl html,
       ele: '#notification-area',
-      type: type # (null, 'info', 'error', 'success')
+      type: type # (null, 'info', 'error', 'success', 'gp', 'xp', 'hp', 'lvl')
       top_offset: 20
       align: 'right' # ('left', 'right', or 'center')
       width: 250 # (integer, or 'auto')
@@ -193,7 +193,7 @@ setupGrowlNotifications = (model) ->
     num = captures - args
     rounded = Math.abs(num.toFixed(1))
     if num < 0
-      statsNotification "<i class='icon-heart'></i>HP -#{rounded}", 'error' # lost hp from purchase
+      statsNotification "<i class='icon-heart'></i> -#{rounded} HP", 'hp' # lost hp from purchase
 
   user.on 'set', 'stats.gp', (captures, args) ->
     num = captures - args
@@ -201,12 +201,13 @@ setupGrowlNotifications = (model) ->
     # made purchase
     if num < 0
       # FIXME use 'warning' when unchecking an accidently completed daily/todo, and notify of exp too
-      statsNotification "<i class='icon-star'></i>GP -#{rounded}", 'success'
+      statsNotification "<i class='icon-star'></i> -#{rounded} GP", 'gp'
       # gained gp (and thereby exp)
     else if num > 0
       num = Math.abs(num)
-      statsNotification "<i class='icon-star'></i>Exp,GP +#{rounded}", 'success'
+      statsNotification "<i class='icon-star'></i> +#{rounded} XP", 'xp'
+      statsNotification "<i class='icon-gp'></i> +#{rounded} GP", 'gp'
 
   user.on 'set', 'stats.lvl', (captures, args) ->
     if captures > args
-      statsNotification('<i class="icon-chevron-up"></i> Level Up!', 'info')
+      statsNotification('<i class="icon-chevron-up"></i> Level Up!', 'lvl')

styles/app/alerts.styl

@@ -0,0 +1,42 @@
+// variables
+
+gpColor = #FBEFC0
+gpText = #786938
+hpColor = #f2dede
+hpText = #b94a48
+lvlColor = #d9edf7
+lvlText = #3a87ad
+xpColor = #DCC0FB
+xpText = #635673
+borderDarken = 20%
+
+// alert styles
+
+.alert-gp
+  background-color: gpColor
+  border-color: darken(gpColor,borderDarken)
+  color: gpText
+
+.alert-hp
+  background-color: hpColor
+  border-color: darken(hpColor,borderDarken)
+  color: hpText
+
+.alert-lvl
+  background-color: lvlColor
+  border-color: darken(lvlColor,borderDarken)
+  color: lvlText
+
+.alert-xp
+  background-color: xpColor
+  border-color: darken(xpColor,borderDarken)
+  color: xpText
+
+// alert icons
+
+.icon-gp
+  background: url("img/BrowserQuest/habitrpg_mods/shop_sprites.png") no-repeat
+  background-size: 400px
+  background-position: -386px 0
+  width: 14px
+  height: 14px

styles/app/index.styl

@@ -6,6 +6,7 @@
 @import "./avatar.styl";
 @import "./customizer.styl";
 @import "./items.styl";
+@import "./alerts.styl";
 
 @import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";