feat(sharing): Streak Achievement

common/dist/sprites/spritesmith-largeSprites-0.css

@@ -1,30 +1,30 @@
 .2014_Fall_HealerPROMO2 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -387px -950px;
+  background-position: -637px -955px;
   width: 90px;
   height: 90px;
 }
 .2014_Fall_Mage_PROMO9 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -483px;
+  background-position: -452px -347px;
   width: 120px;
   height: 90px;
 }
 .2014_Fall_RoguePROMO3 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -680px;
+  background-position: -573px -347px;
   width: 105px;
   height: 90px;
 }
 .2014_Fall_Warrior_PROMO {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -569px -950px;
+  background-position: -590px -461px;
   width: 90px;
   height: 90px;
 }
 .promo_backtoschool {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -220px -220px;
+  background-position: -970px -342px;
   width: 150px;
   height: 150px;
 }
@@ -36,49 +36,49 @@
 }
 .promo_classes_fall_2014 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -326px -664px;
+  background-position: -326px -760px;
   width: 321px;
   height: 100px;
 }
 .promo_classes_fall_2015 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -564px;
+  background-position: 0px -660px;
   width: 377px;
   height: 99px;
 }
 .promo_dilatoryDistress {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -660px -950px;
+  background-position: 0px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_enchanted_armoire {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -378px -564px;
+  background-position: -378px -660px;
   width: 374px;
   height: 76px;
 }
 .promo_enchanted_armoire_201507 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -289px -859px;
+  background-position: -970px -641px;
   width: 217px;
   height: 90px;
 }
 .promo_enchanted_armoire_201508 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -725px -859px;
+  background-position: -723px -342px;
   width: 180px;
   height: 90px;
 }
 .promo_enchanted_armoire_201509 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -933px -950px;
+  background-position: -273px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_enchanted_armoire_201511 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -392px;
+  background-position: -1111px -493px;
   width: 122px;
   height: 90px;
 }
@@ -90,250 +90,256 @@
 }
 .promo_haunted_hair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -148px;
+  background-position: -1127px -194px;
   width: 100px;
   height: 137px;
 }
 .customize-option.promo_haunted_hair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -995px -163px;
+  background-position: -1152px -209px;
   width: 60px;
   height: 60px;
 }
 .promo_item_notif {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -452px -347px;
+  background-position: -970px -91px;
   width: 249px;
   height: 102px;
 }
 .promo_mystery_201405 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -182px;
+  background-position: -546px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201406 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -771px;
+  background-position: -311px -220px;
   width: 90px;
   height: 96px;
 }
 .promo_mystery_201407 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -704px;
+  background-position: -876px -433px;
   width: 42px;
   height: 62px;
 }
 .promo_mystery_201408 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -428px;
+  background-position: -1188px -641px;
   width: 60px;
   height: 71px;
 }
 .promo_mystery_201409 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -842px -950px;
+  background-position: -182px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201410 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -364px;
+  background-position: -1169px -823px;
   width: 72px;
   height: 63px;
 }
 .promo_mystery_201411 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px 0px;
+  background-position: -364px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201412 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1154px -634px;
+  background-position: -904px -342px;
   width: 42px;
   height: 66px;
 }
 .promo_mystery_201501 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -570px;
+  background-position: -899px -166px;
   width: 48px;
   height: 63px;
 }
 .promo_mystery_201502 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -478px -950px;
+  background-position: -499px -461px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201503 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -273px;
+  background-position: -728px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201504 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -500px;
+  background-position: -1188px -732px;
   width: 60px;
   height: 69px;
 }
 .promo_mystery_201505 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -751px -950px;
+  background-position: -91px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201506 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -634px;
+  background-position: -899px -230px;
   width: 42px;
   height: 69px;
 }
 .promo_mystery_201507 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -574px;
+  background-position: -220px -220px;
   width: 90px;
   height: 105px;
 }
 .promo_mystery_201508 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -293px -950px;
+  background-position: -314px -326px;
   width: 93px;
   height: 90px;
 }
 .promo_mystery_201509 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1111px -91px;
+  background-position: -455px -955px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201510 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -199px -950px;
+  background-position: -220px -326px;
   width: 93px;
   height: 90px;
 }
 .promo_mystery_3014 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -507px -859px;
+  background-position: -970px -732px;
   width: 217px;
   height: 90px;
 }
 .promo_orca {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -286px;
+  background-position: -1121px -342px;
   width: 105px;
   height: 105px;
 }
 .promo_partyhats {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px -868px;
+  background-position: -1111px -584px;
   width: 115px;
   height: 47px;
 }
 .promo_pastel_skin {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -775px;
+  background-position: -331px -871px;
   width: 330px;
   height: 83px;
 }
 .customize-option.promo_pastel_skin {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -25px -790px;
+  background-position: -356px -886px;
   width: 60px;
   height: 60px;
 }
 .promo_pet_skins {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -970px 0px;
+  background-position: -970px -493px;
   width: 140px;
   height: 147px;
 }
 .customize-option.promo_pet_skins {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -995px -15px;
+  background-position: -995px -508px;
   width: 60px;
   height: 60px;
 }
 .promo_shimmer_hair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -331px -775px;
+  background-position: 0px -871px;
   width: 330px;
   height: 83px;
 }
 .customize-option.promo_shimmer_hair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -356px -790px;
+  background-position: -25px -886px;
   width: 60px;
   height: 60px;
 }
 .promo_splashyskins {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -950px;
+  background-position: -970px -823px;
   width: 198px;
   height: 91px;
 }
 .customize-option.promo_splashyskins {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -25px -965px;
+  background-position: -995px -838px;
   width: 60px;
   height: 60px;
 }
 .promo_springclasses2014 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -430px -461px;
+  background-position: -970px 0px;
   width: 288px;
   height: 90px;
 }
 .promo_springclasses2015 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -859px;
+  background-position: -430px -557px;
   width: 288px;
   height: 90px;
 }
 .promo_summer_classes_2014 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -461px;
+  background-position: 0px -557px;
   width: 429px;
   height: 102px;
 }
 .promo_summer_classes_2015 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -648px -664px;
+  background-position: -648px -760px;
   width: 300px;
   height: 88px;
 }
 .promo_updos {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -723px -342px;
+  background-position: -970px -194px;
   width: 156px;
   height: 147px;
 }
 .promo_veteran_pets {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -753px -564px;
+  background-position: -723px -509px;
   width: 146px;
   height: 75px;
 }
 .promo_winterclasses2015 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: 0px -664px;
+  background-position: 0px -760px;
   width: 325px;
   height: 110px;
 }
 .promo_winteryhair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -220px -371px;
+  background-position: -723px -433px;
   width: 152px;
   height: 75px;
 }
 .customize-option.promo_winteryhair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -245px -386px;
+  background-position: -748px -448px;
   width: 60px;
   height: 60px;
 }
+.avatar_variety {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -461px;
+  width: 498px;
+  height: 95px;
+}
 .party_preview {
   background-image: url(spritesmith-largeSprites-0.png);
   background-position: 0px 0px;

common/locales/en/generic.json

@@ -134,5 +134,11 @@
     "thankyou2": "Sending you a thousand thanks.",
     "thankyou3": "I'm very grateful - thank you!",
     "thankyouCardAchievementTitle": "Greatly Grateful",
-    "thankyouCardAchievementText": "Thanks for being thankful! Sent or received <%= cards %> Thank-You cards."
+    "thankyouCardAchievementText": "Thanks for being thankful! Sent or received <%= cards %> Thank-You cards.",
+    "streakAchievement": "You earned a streak achievement!",
+    "firstStreakAchievement": "21-Day Streak",
+    "streakAchievementCount": "<%= streaks %> 21-Day Streaks",
+    "twentyOneDays": "You've completed your Daily for 21 days in a row!",
+    "dontBreakStreak": "Amazing job. Don't break the streak!",
+    "dontStop": "Don't Stop Now!"
 }

website/public/js/controllers/notificationCtrl.js

@@ -61,16 +61,14 @@ habitrpg.controller('NotificationCtrl',
     });
 
     $rootScope.$watch('user.stats.lvl', function(after, before) {
-      if (after === before) return; 
+      if (after <= before) return; 
       if (User.user._tmp && User.user._tmp.drop && (User.user._tmp.drop.type === 'Quest')) return;
       if (after === 3) return; // Drop system unlock. FIXME can we do this without hardcoding?
       if (after === 50) return; // Orb of Rebirth unlock FIXME as above
       if (!User.user.flags.classSelected && User.user.stats.lvl >= 10) return $rootScope.openModal('chooseClass', {controller:'UserCtrl', keyboard:false, backdrop:'static'});
-      if (after > before) {
+      Notification.lvl();
-        Notification.lvl();
+      $rootScope.playSound('Level_Up');
-        $rootScope.playSound('Level_Up');
+      if (!User.user.preferences.suppressModals.levelUp) $rootScope.openModal('levelUp', {controller:'UserCtrl', size:'sm'});
-        if (!User.user.preferences.suppressModals.levelUp) $rootScope.openModal('levelUp', {controller:'UserCtrl', size:'sm'});
-      }
     });
 
     $rootScope.$watch('user._tmp.crit', function(after, before){
@@ -131,13 +129,11 @@ habitrpg.controller('NotificationCtrl',
     });
 
     $rootScope.$watch('user.achievements.streak', function(after, before){
-      if(before == undefined || after == before || after < before) return;
+      if(before == undefined || after <= before) return;
-      if (User.user.achievements.streak > 1) {
+      Notification.streak(User.user.achievements.streak);
-        Notification.streak(User.user.achievements.streak);
+      $rootScope.playSound('Achievement_Unlocked');
-        $rootScope.playSound('Achievement_Unlocked');
+      if (!User.user.preferences.suppressModals.streak) {
-      }
+        $rootScope.openModal('achievements/streak', {controller:'UserCtrl'});
-      else {
-        $rootScope.openModal('achievements/streak');
       }
     });
 

website/src/routes/pages.js

@@ -31,7 +31,7 @@ _.each(pages, function(name){
 
 // -------- Social Media Sharing --------
 
-var shareables = ['level-up','hatch-pet','raise-pet','unlock-quest','won-challenge'];
+var shareables = ['level-up','hatch-pet','raise-pet','unlock-quest','won-challenge','achievement'];
 
 _.each(shareables, function(name){
   router.get('/social/' + name, i18n.getUserLanguage, locals, function(req, res) {

website/views/shared/footer.jade

@@ -64,7 +64,7 @@ footer.footer(ng-controller='FooterCtrl')
             table
               tr
                 td
-                  .fb-like(data-href='https://habitica.com/static/front', data-layout='button', data-action='like', data-share='true')
+                  .fb-like(data-href='https://habitica.com/static/front', data-layout='button', data-action='like', data-share='true', data-show-faces='true')
               tr
                 td
                   a.twitter-share-button(href='https://twitter.com/intent/tweet?text=Improve+yourself+in+the+land+of+Habitica!&via=habitica&url=https://habitica.com/&count=none')=env.t('tweet')

website/views/shared/modals/achievements.jade

@@ -1,12 +1,40 @@
+include ../avatar/generated_avatar
+mixin achievementFooter
+  .modal-footer(style='margin-top:0', ng-init='loadWidgets()')
+    .container-fluid
+      .row
+        .col-xs-3
+          a.twitter-share-button(href='https://twitter.com/intent/tweet?text=I earned a new achievement in Habitica!&via=habitica&url=https://habitrpg-gamma.herokuapp.com/social/achievement&count=none')=env.t('tweet')
+        .col-xs-4(style='margin-left:.8em')
+          .fb-share-button(data-href='https://habitrpg-gamma.herokuapp.com/social/achievement', data-layout='button')
+        .col-xs-4(style='margin-left:.8em')
+          a.tumblr-share-button(data-href='https://habitrpg-gamma.herokuapp.com/social/achievement', data-notes='none')
+
 // Streak
 script(id='modals/achievements/streak.html', type='text/ng-template')
-  .modal-header
+  .modal-content(style='min-width:28em')
-    h4=env.t('modalAchievement')
+    .modal-body.text-center
-  .modal-body
+      h3(style='margin-bottom: 0')=env.t('streakAchievement')
-    .achievement.achievement-thermometer
+      .container-fluid
-    =env.t('streakerAchievement')
+        .row
-  .modal-footer
+          .col-xs-4(style='padding:0')
-    button.btn.btn-default(ng-click='$close()')=env.t('ok')
+            .achievement-thermometer2x(style='margin: 2em auto')
+          .col-xs-4(style='padding:0')
+            .herobox(style='padding:0; width:0; height:7em; margin:auto 2.5em')
+              .character-sprites(style='width:0')
+                +generatedAvatar
+          .col-xs-4(style='padding:0')
+            .achievement-thermometer2x(style='margin: 2em auto')
+      h4(ng-if='user.achievements.streak === 1')=env.t('firstStreakAchievement')
+      h4(ng-if='user.achievements.streak > 1')=env.t('streakAchievementCount', {streaks:'{{::user.achievements.streak}}'})
+      p=env.t('twentyOneDays')
+      p=env.t('dontBreakStreak')
+      br
+      button.btn.btn-primary(ng-click='$close()')=env.t('dontStop')
+      .checkbox
+        label(style='display:inline-block')=env.t('dontShowAgain')
+          input(type='checkbox', ng-model='user.preferences.suppressModals.streak', ng-change='set({"preferences.suppressModals.streak": user.preferences.suppressModals.streak?true: false})')
+    +achievementFooter
 
 // Max Gear
 script(id='modals/achievements/ultimateGear.html', type='text/ng-template')

website/views/social/achievement.jade

@@ -0,0 +1,9 @@
+extends ./layout
+
+block extraHead
+  - var socialPage = 'achievement'
+  - var socialTitle = 'Earned an Achievement!'
+  - var socialDescription = 'I earned a new Achievement! In Habitica, badges recognize players for changing their lives for the better.'
+
+block content
+  include ./landing-page

website/views/social/landing-page.jade

@@ -8,7 +8,10 @@
   .mobile-container
     .row
       .col-md-6
-        img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png')
+        .row
+          img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png')
+        .row
+          .avatar_variety.img-rendering-auto.center-block.img-responsive
       .col-md-6
         +registrationForm
         .row