feat(modals): Won Challenge

Draft of the modal that appears when a user wins a challenge. Needs better logic for when to display.

common/locales/en/challenge.json

@@ -59,5 +59,7 @@
     "challengeNotEnoughGems": "You do not have enough gems to post this challenge.",
     "noPermissionEditChallenge": "You don't have permissions to edit this challenge",
     "noPermissionDeleteChallenge": "You don't have permissions to delete this challenge",
-    "noPermissionCloseChallenge": "You don't have permissions to close this challenge"
+    "noPermissionCloseChallenge": "You don't have permissions to close this challenge",
+    "congratulations": "Congratulations!",
+    "hurray": "Hurray!"
 }

common/locales/en/settings.json

@@ -89,7 +89,7 @@
     "loginNameDescription2": "User->Profile",
     "loginNameDescription3": "to change the name that appears in your avatar and chat messages.",
     "emailNotifications": "Email Notifications",
-    "wonChallenge": "You Won a Challenge",
+    "wonChallenge": "You won a Challenge!",
     "newPM": "Received Private Message",
     "giftedGems": "Gifted Gems",
     "giftedGemsInfo": "<%= amount %> Gems - by <%= name %>",

website/public/js/controllers/notificationCtrl.js

@@ -27,6 +27,13 @@ habitrpg.controller('NotificationCtrl',
       $rootScope.playSound('Achievement_Unlocked');
     }, true);
 
+    $rootScope.$watch('user.achievements.challenges.length', function(after, before) {
+      if (after === before) return;
+      if (after > before) {
+        $rootScope.openModal('wonChallenge', {controller: 'UserCtrl', size: 'sm'});
+      }
+    });
+
     $rootScope.$watch('user.stats.gp', function(after, before) {
       if (after == before) return;
       if (User.user.stats.lvl == 0) return;

website/views/shared/modals/index.jade

@@ -17,6 +17,7 @@ include ./low-health.jade
 include ./level-up.jade
 include ./hatch-pet.jade
 include ./raise-pet.jade
+include ./won-challenge.jade
 
 //- Settings
 script(type='text/ng-template', id='modals/change-day-start.html')

website/views/shared/modals/won-challenge.jade

@@ -0,0 +1,28 @@
+include ../avatar/generated_avatar
+
+script(type='text/ng-template', id='modals/wonChallenge.html')
+  .modal-content(style='min-width:28em')
+    .modal-body.text-center
+      h3(style='margin-bottom: 0')=env.t('wonChallenge')
+      h4 {{::user.achievements.challenges[user.achievements.challenges.length - 1]}}
+      .container-fluid
+        .row(style='margin-bottom:1em', ng-controller='UserCtrl')
+          .col-xs-4(style='padding:0')
+            .container-fluid
+              .row
+                .col-xs-4(style='padding:0')
+                .col-xs-4(style='padding:0')
+                  .achievement-karaoke-2x(style='margin-top: 2em')
+          .col-xs-4(style='padding:0')
+            .herobox(style='padding:0; width:0; height:7em')
+              .character-sprites(style='width:0')
+                +generatedAvatar
+          .col-xs-4(style='padding:0')
+            .container-fluid
+              .row
+                .col-xs-4(style='padding:0')
+                .col-xs-4(style='padding:0')
+                  .achievement-karaoke-2x(style='margin-top: 2em')
+      p=env.t('congratulations')
+    .modal-footer(style='margin-top:0')
+      button.btn.btn-primary(ng-click='$close()')=env.t('hurray')