feat(sharing): More achievements

website/public/js/controllers/inventoryCtrl.js

@@ -128,7 +128,7 @@ habitrpg.controller("InventoryCtrl",
       if(!user.achievements.beastMaster
           && $scope.petCount >= 90) {
         User.user.achievements.beastMaster = true;
-        $rootScope.openModal('achievements/beastMaster');
+        $rootScope.openModal('achievements/beastMaster', {controller:'UserCtrl'});
       }
 
       // Checks if Triad Bingo has been reached for the first time

website/public/js/controllers/notificationCtrl.js

@@ -62,15 +62,20 @@ habitrpg.controller('NotificationCtrl',
 
     $rootScope.$watch('user.stats.lvl', function(after, before) {
       if (after <= before) return; 
+      Notification.lvl();
+      $rootScope.playSound('Level_Up');
       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'});
-      Notification.lvl();
-      $rootScope.playSound('Level_Up');
       if (!User.user.preferences.suppressModals.levelUp) $rootScope.openModal('levelUp', {controller:'UserCtrl', size:'sm'});
     });
 
+    $rootScope.$watch('!user.flags.classSelected && user.stats.lvl >= 10', function(after, before){
+      if(after){
+        $rootScope.openModal('chooseClass', {controller:'UserCtrl', keyboard:false, backdrop:'static'});
+      }
+    });
+
     $rootScope.$watch('user._tmp.crit', function(after, before){
        if (after == before || !after) return;
        var amount = User.user._tmp.crit * 100 - 100;
@@ -139,7 +144,7 @@ habitrpg.controller('NotificationCtrl',
 
     $rootScope.$watch('user.achievements.ultimateGearSets', function(after, before){
       if (_.isEqual(after,before) || !_.contains(User.user.achievements.ultimateGearSets, true)) return;
-      $rootScope.openModal('achievements/ultimateGear');
+      $rootScope.openModal('achievements/ultimateGear', {controller:'UserCtrl'});
     }, true);
 
     $rootScope.$watch('user.flags.armoireEmpty', function(after,before){

website/views/shared/modals/achievements.jade

@@ -2,29 +2,32 @@ include ../avatar/generated_avatar
 mixin achievementFooter
   .modal-footer(style='margin-top:0', ng-init='loadWidgets()')
     .container-fluid
-      .row
+      .row.text-center
-        .col-xs-3
+        .col-xs-4
           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')
+        .col-xs-4
           .fb-share-button(data-href='https://habitrpg-gamma.herokuapp.com/social/achievement', data-layout='button')
-        .col-xs-4(style='margin-left:.8em')
+        .col-xs-4
           a.tumblr-share-button(data-href='https://habitrpg-gamma.herokuapp.com/social/achievement', data-notes='none')
 
+mixin achievementAvatar(badge,margin)
+  .container-fluid
+    .row
+      .col-xs-4(style='padding:0')
+        div(class='achievement-#{badge}2x' style='margin: 2em auto')
+      .col-xs-4(style='padding:0')
+        .herobox(style='padding:0; width:0; height:7em; margin:auto #{margin}em')
+          .character-sprites(style='width:0')
+            +generatedAvatar
+      .col-xs-4(style='padding:0')
+        div(class='achievement-#{badge}2x' style='margin: 2em auto')
+
 // Streak
 script(id='modals/achievements/streak.html', type='text/ng-template')
   .modal-content(style='min-width:28em')
     .modal-body.text-center
       h3(style='margin-bottom: 0')=env.t('streakAchievement')
-      .container-fluid
+      +achievementAvatar('thermometer',2.5)
-        .row
-          .col-xs-4(style='padding:0')
-            .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')
@@ -38,44 +41,46 @@ script(id='modals/achievements/streak.html', type='text/ng-template')
 
 // Max Gear
 script(id='modals/achievements/ultimateGear.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('modalAchievement')
-    .achievement.achievement-armor
+      +achievementAvatar('armor',2.5)
       p=env.t('gearAchievement')
       br
       table.multi-achievement
         tr
           td(ng-if='::user.achievements.ultimateGearSets.healer').multi-achievement
-          .achievement-ultimate-healer.multi-achievement
+            .achievement-ultimate-healer2x.multi-achievement
             =env.t('healer')
           td(ng-if='::user.achievements.ultimateGearSets.wizard').multi-achievement
-          .achievement-ultimate-mage.multi-achievement
+            .achievement-ultimate-mage2x.multi-achievement
             =env.t('mage')
           td(ng-if='::user.achievements.ultimateGearSets.rogue').multi-achievement
-          .achievement-ultimate-rogue.multi-achievement
+            .achievement-ultimate-rogue2x.multi-achievement
             =env.t('rogue')
           td(ng-if='::user.achievements.ultimateGearSets.warrior').multi-achievement
-          .achievement-ultimate-warrior.multi-achievement
+            .achievement-ultimate-warrior2x.multi-achievement
             =env.t('warrior')
       br
-    p(ng-if='!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)')!=env.t('moreGearAchievements')
+      div(ng-if='!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)')
+        p!=env.t('moreGearAchievements')
         br
       .shop_armoire.pull-right
       p!=env.t("armoireUnlocked")
-  .modal-footer
+      br
-    button.btn.btn-default(ng-click='$close()')=env.t('ok')
+      button.btn.btn-primary(ng-click='$close()')=env.t('ok')
+    +achievementFooter
 
 // Beast Master
 script(id='modals/achievements/beastMaster.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('modalAchievement')
-    p
+      +achievementAvatar('rat',0)
-      .achievement.achievement-rat
+      p=env.t('beastAchievement')
-      =env.t('beastAchievement')
+      br
-  .modal-footer
+      button.btn.btn-primary(ng-click='$close()')=env.t('ok')
-    button.btn.btn-default(ng-click='$close()')=env.t('ok')
+    +achievementFooter
 
 
 // Mount Master

website/views/social/achievement.jade

@@ -3,7 +3,7 @@ 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.'
+  - var socialDescription = 'I earned a new Achievement on Habitica for working to improve my life!'
 
 block content
   include ./landing-page