Merge pull request #5325 from HabitRPG/mystery-presents

Mystery presents

common/dist/sprites/spritesmith0.css

@@ -1866,25 +1866,25 @@
 }
 .hair_mustache_1_pumpkin {
   background-image: url(spritesmith0.png);
-  background-position: -848px -592px;
+  background-position: -1444px -1001px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_mustache_1_pumpkin {
   background-image: url(spritesmith0.png);
-  background-position: -873px -607px;
+  background-position: -1469px -1016px;
   width: 60px;
   height: 60px;
 }
 .hair_mustache_1_purple {
   background-image: url(spritesmith0.png);
-  background-position: -1444px -1092px;
+  background-position: -848px -592px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_mustache_1_purple {
   background-image: url(spritesmith0.png);
-  background-position: -1469px -1107px;
+  background-position: -873px -607px;
   width: 60px;
   height: 60px;
 }
@@ -3762,395 +3762,407 @@
 }
 .hair_bangs_3_pyellow2 {
   background-image: url(spritesmith0.png);
-  background-position: -1444px -1001px;
+  background-position: -1274px -1798px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_pyellow2 {
   background-image: url(spritesmith0.png);
-  background-position: -1469px -1016px;
+  background-position: -1299px -1813px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_rainbow {
   background-image: url(spritesmith0.png);
-  background-position: 0px -979px;
+  background-position: -1444px -1092px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_rainbow {
   background-image: url(spritesmith0.png);
-  background-position: -25px -994px;
+  background-position: -1469px -1107px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_red {
   background-image: url(spritesmith0.png);
-  background-position: -989px -819px;
+  background-position: 0px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_red {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -834px;
+  background-position: -25px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_snowy {
   background-image: url(spritesmith0.png);
-  background-position: -989px -728px;
+  background-position: -989px -819px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_snowy {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -743px;
+  background-position: -1014px -834px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_white {
   background-image: url(spritesmith0.png);
-  background-position: -989px -637px;
+  background-position: -989px -728px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_white {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -652px;
+  background-position: -1014px -743px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_winternight {
   background-image: url(spritesmith0.png);
-  background-position: -989px -546px;
+  background-position: -989px -637px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_winternight {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -561px;
+  background-position: -1014px -652px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_winterstar {
   background-image: url(spritesmith0.png);
-  background-position: -989px -455px;
+  background-position: -989px -546px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_winterstar {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -470px;
+  background-position: -1014px -561px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_yellow {
   background-image: url(spritesmith0.png);
-  background-position: -989px -364px;
+  background-position: -989px -455px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_yellow {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -379px;
+  background-position: -1014px -470px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_zombie {
   background-image: url(spritesmith0.png);
-  background-position: -989px -273px;
+  background-position: -989px -364px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_zombie {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -288px;
+  background-position: -1014px -379px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_TRUred {
   background-image: url(spritesmith0.png);
-  background-position: -989px -182px;
+  background-position: -989px -273px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_TRUred {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -197px;
+  background-position: -1014px -288px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_aurora {
   background-image: url(spritesmith0.png);
-  background-position: -989px -91px;
+  background-position: -989px -182px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_aurora {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -106px;
+  background-position: -1014px -197px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_black {
   background-image: url(spritesmith0.png);
-  background-position: -989px 0px;
+  background-position: -989px -91px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_black {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -15px;
+  background-position: -1014px -106px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_blond {
   background-image: url(spritesmith0.png);
-  background-position: -819px -888px;
+  background-position: -989px 0px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_blond {
   background-image: url(spritesmith0.png);
-  background-position: -844px -903px;
+  background-position: -1014px -15px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_blue {
   background-image: url(spritesmith0.png);
-  background-position: -728px -888px;
+  background-position: -819px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_blue {
   background-image: url(spritesmith0.png);
-  background-position: -753px -903px;
+  background-position: -844px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_brown {
   background-image: url(spritesmith0.png);
-  background-position: -637px -888px;
+  background-position: -728px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_brown {
   background-image: url(spritesmith0.png);
-  background-position: -662px -903px;
+  background-position: -753px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_candycane {
   background-image: url(spritesmith0.png);
-  background-position: -546px -888px;
+  background-position: -637px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_candycane {
   background-image: url(spritesmith0.png);
-  background-position: -571px -903px;
+  background-position: -662px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_candycorn {
   background-image: url(spritesmith0.png);
-  background-position: -455px -888px;
+  background-position: -546px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_candycorn {
   background-image: url(spritesmith0.png);
-  background-position: -480px -903px;
+  background-position: -571px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_festive {
   background-image: url(spritesmith0.png);
-  background-position: -364px -888px;
+  background-position: -455px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_festive {
   background-image: url(spritesmith0.png);
-  background-position: -389px -903px;
+  background-position: -480px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_frost {
   background-image: url(spritesmith0.png);
-  background-position: -273px -888px;
+  background-position: -364px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_frost {
   background-image: url(spritesmith0.png);
-  background-position: -298px -903px;
+  background-position: -389px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_ghostwhite {
   background-image: url(spritesmith0.png);
-  background-position: -182px -888px;
+  background-position: -273px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_ghostwhite {
   background-image: url(spritesmith0.png);
-  background-position: -207px -903px;
+  background-position: -298px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_green {
   background-image: url(spritesmith0.png);
-  background-position: -91px -888px;
+  background-position: -182px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_green {
   background-image: url(spritesmith0.png);
-  background-position: -116px -903px;
+  background-position: -207px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_halloween {
   background-image: url(spritesmith0.png);
-  background-position: 0px -888px;
+  background-position: -91px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_halloween {
   background-image: url(spritesmith0.png);
-  background-position: -25px -903px;
+  background-position: -116px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_holly {
   background-image: url(spritesmith0.png);
-  background-position: -830px -740px;
+  background-position: 0px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_holly {
   background-image: url(spritesmith0.png);
-  background-position: -855px -755px;
+  background-position: -25px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_hollygreen {
   background-image: url(spritesmith0.png);
-  background-position: -739px -740px;
+  background-position: -830px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_hollygreen {
   background-image: url(spritesmith0.png);
-  background-position: -764px -755px;
+  background-position: -855px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_midnight {
   background-image: url(spritesmith0.png);
-  background-position: -648px -740px;
+  background-position: -739px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_midnight {
   background-image: url(spritesmith0.png);
-  background-position: -673px -755px;
+  background-position: -764px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pblue {
   background-image: url(spritesmith0.png);
-  background-position: -557px -740px;
+  background-position: -648px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pblue {
   background-image: url(spritesmith0.png);
-  background-position: -582px -755px;
+  background-position: -673px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pblue2 {
   background-image: url(spritesmith0.png);
-  background-position: -466px -740px;
+  background-position: -557px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pblue2 {
   background-image: url(spritesmith0.png);
-  background-position: -491px -755px;
+  background-position: -582px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_peppermint {
   background-image: url(spritesmith0.png);
-  background-position: -375px -740px;
+  background-position: -466px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_peppermint {
   background-image: url(spritesmith0.png);
-  background-position: -400px -755px;
+  background-position: -491px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pgreen {
   background-image: url(spritesmith0.png);
-  background-position: -284px -740px;
+  background-position: -375px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pgreen {
   background-image: url(spritesmith0.png);
-  background-position: -309px -755px;
+  background-position: -400px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pgreen2 {
   background-image: url(spritesmith0.png);
-  background-position: -364px -979px;
+  background-position: -284px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pgreen2 {
   background-image: url(spritesmith0.png);
-  background-position: -389px -994px;
+  background-position: -309px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_porange {
   background-image: url(spritesmith0.png);
-  background-position: -273px -979px;
+  background-position: -364px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_porange {
   background-image: url(spritesmith0.png);
-  background-position: -298px -994px;
+  background-position: -389px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_porange2 {
   background-image: url(spritesmith0.png);
-  background-position: -182px -979px;
+  background-position: -273px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_porange2 {
   background-image: url(spritesmith0.png);
-  background-position: -207px -994px;
+  background-position: -298px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_ppink {
   background-image: url(spritesmith0.png);
-  background-position: -91px -979px;
+  background-position: -182px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_ppink {
+  background-image: url(spritesmith0.png);
+  background-position: -207px -994px;
+  width: 60px;
+  height: 60px;
+}
+.hair_base_10_ppink2 {
+  background-image: url(spritesmith0.png);
+  background-position: -91px -979px;
+  width: 90px;
+  height: 90px;
+}
+.customize-option.hair_base_10_ppink2 {
   background-image: url(spritesmith0.png);
   background-position: -116px -994px;
   width: 60px;

website/views/options/inventory/inventory.jade

@@ -155,7 +155,7 @@ script(type='text/ng-template', id='partials/options.inventory.drops.html')
                   .badge.badge-info.stack-count {{user.items.special.valentineReceived.length}}
 
               div(ng-if='user.purchased.plan.customerId || user.purchased.plan.mysteryItems.length')
-                button.customize-option(popover=env.t('subscriberItemText'), popover-trigger='mouseenter', popover-placement='right', popover-append-to-body='true', class='inventory_present', ng-click="user.ops.openMysteryItem({})")
+                button.customize-option(popover=env.t('subscriberItemText'), popover-trigger='mouseenter', popover-placement='right', popover-append-to-body='true', class='inventory_present inventory_present_{{moment().format("MM")}}', ng-click="user.ops.openMysteryItem({})")
                   .badge.badge-info.stack-count {{user.purchased.plan.mysteryItems.length}}
 
               div(ng-if='user.purchased.plan.consecutive.trinkets')

website/views/shared/new-stuff.jade

@@ -1,5 +1,17 @@
-h5 5/31/2015 - PUSH NOTIFICATIONS FOR ANDROID, AND LAST CHANCE FOR GREEN KNIGHT SUBSCRIBER ITEMS!
+h5 6/1/2015 - JUNE MYSTERY ITEM!
   hr
+  tr
+    td
+      .inventory_present_06.pull-right
+      h5 June Mystery Item!
+      p Ooh, how mysterious! All Habiticans who are <a href='/#/options/settings/subscription' target='_blank'>subscribed</a> during the month of June will receive the June Mystery Item Set, as well as the ability to buy Gems with Gold! The June Item Set will be revealed on the 25th, so keep your eyes peeled. Thanks for supporting the site <3
+
+hr
+a(href='/static/old-news', target='_blank') Read older news
+
+mixin oldNews
+
+  h5 5/31/2015 - PUSH NOTIFICATIONS FOR ANDROID, AND LAST CHANCE FOR GREEN KNIGHT SUBSCRIBER ITEMS!
     tr
       td
         .promo_mystery_201505.pull-right
@@ -11,12 +23,6 @@ h5 5/31/2015 - PUSH NOTIFICATIONS FOR ANDROID, AND LAST CHANCE FOR GREEN KNIGHT
         h5 Push Notifications for Android
         p We've released an update to the Android app that includes new types of push notification! Now it's easier than ever to remember to stay productive. Get the Android update <a href='https://play.google.com/store/apps/details?id=com.ocdevel.habitrpg' target='_blank'>here</a>!
         p.small.muted by Negue
-
-hr
-a(href='/static/old-news', target='_blank') Read older news
-
-mixin oldNews
-
   h5 5/25/2015 - MAY SUBSCRIBER ITEM SET: GREEN KNIGHT!
     tr
       td