New default background (#8597)

* feat(bgs): new default background

* feat(bgs): backfill migration

* fix(migration): extraneous imports, bad paths

* fix(bgs): address comments

* fix(test): assert equality

test/api/v3/integration/user/auth/POST-register_local.test.js

@@ -71,6 +71,23 @@ describe('POST /user/auth/local/register', () => {
       await expect(getProperty('users', user._id, '_ABtests')).to.eventually.be.a('object');
     });
 
+    it('includes items awarded by default when creating a new user', async () => {
+      let username = generateRandomUserName();
+      let email = `${username}@example.com`;
+      let password = 'password';
+
+      let user = await api.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword: password,
+      });
+
+      expect(user.items.quests.dustbunnies).to.equal(1);
+      expect(user.purchased.background.violet).to.be.ok;
+      expect(user.preferences.background).to.equal('violet');
+    });
+
     it('requires password and confirmPassword to match', async () => {
       let username = generateRandomUserName();
       let email = `${username}@example.com`;

website/client-old/js/controllers/userCtrl.js

@@ -65,7 +65,9 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
           (fullSet ? 3.75 : 1.75) : // (Backgrounds) 15G per set, 7G per individual
           (fullSet ? 1.25 : 0.5); // (Hair, skin, etc) 5G per set, 2G per individual
 
-      if (path.indexOf('background.blue') === -1 && path.indexOf('background.green') === -1 && path.indexOf('background.red') === -1 && path.indexOf('background.purple') === -1 && path.indexOf('background.yellow') === -1) {
+      if (path.indexOf('background.blue') === -1 && path.indexOf('background.green') === -1 &&
+          path.indexOf('background.red') === -1 && path.indexOf('background.purple') === -1 &&
+          path.indexOf('background.yellow') === -1 && path.indexOf('background.violet') === -1) {
         if (fullSet) {
           if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return;
           if (User.user.balance < cost) return $rootScope.openModal('buyGems');
@@ -84,6 +86,10 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
       });
     };
 
+    $scope.showPlainBackgroundBlurb = function(identifier, set) {
+      return identifier === 'incentiveBackgrounds' && !$scope.ownsSet('background', set);
+    };
+
     $scope.setKeys = function(type, _set) {
       return _.map(_set, function(v,k) {
         if (type === 'background') k = v.key;

website/common/locales/en/backgrounds.json

@@ -246,6 +246,8 @@
   "backgroundWindyAutumnNotes": "Chase leaves during a Windy Autumn.",
 
   "incentiveBackgrounds": "Plain Background Set",
+  "backgroundVioletText": "Violet",
+  "backgroundVioletNotes": "A vibrant violet backdrop.",
   "backgroundBlueText": "Blue",
   "backgroundBlueNotes": "A basic blue backdrop.",
   "backgroundGreenText": "Green",

website/common/locales/en/loginIncentives.json

@@ -11,6 +11,6 @@
   "unlockedCheckInReward": "You unlocked a Check-In Prize!",
   "totalCheckinsTitle": "Total Check-Ins",
   "checkinProgressTitle": "Progress until next",
-  "incentiveBackgroundsUnlockedWithCheckins": "These backgrounds will unlock with Daily Check-Ins.",
+  "incentiveBackgroundsUnlockedWithCheckins": "Locked Plain Backgrounds will unlock with Daily Check-Ins.",
   "moreIncentivesComingSoon": "New check-in incentives will be added soon!"
 }

website/common/script/content/appearance/backgrounds.js

@@ -480,6 +480,11 @@ let backgrounds = {
     },
   },
   incentiveBackgrounds: {
+    violet: {
+      text: t('backgroundVioletText'),
+      notes: t('backgroundVioletNotes'),
+      currency: 'loginIncentive',
+    },
     blue: {
       text: t('backgroundBlueText'),
       notes: t('backgroundBlueNotes'),

website/server/models/user/hooks.js

@@ -96,6 +96,8 @@ function _setUpNewUser (user) {
     user._ABtests.checkInModals = '20161221_showCheckInPreviews'; // show 'preview' check-in modals
   }
   user.items.quests.dustbunnies = 1;
+  user.purchased.background.violet = true;
+  user.preferences.background = 'violet';
 
   if (user.registeredThrough === 'habitica-web' || user.registeredThrough === 'habitica-android') {
     taskTypes = ['habit', 'daily', 'todo', 'reward', 'tag'];

website/views/options/profile/backgrounds.jade

@@ -1,13 +1,13 @@
-mixin backgrounds(mobile)
+mixin backgrounds(mobile)
-  div(class=mobile ? 'padding' : 'container-fluid')
+  div(class=mobile ? 'padding' : 'container-fluid')
-    li.customize-menu(ng-repeat='set in backgroundShopSets')
+    li.customize-menu(ng-repeat='set in backgroundShopSets')
-      menu(label='{{set.text}}')
+      menu(label='{{set.text}}')
-      div(ng-if='set.identifier === "incentiveBackgrounds"')=env.t('incentiveBackgroundsUnlockedWithCheckins')
+      div(ng-if='showPlainBackgroundBlurb(set.identifier, set.items)')=env.t('incentiveBackgroundsUnlockedWithCheckins')
-      span(ng-hide='ownsSet("background", set.items) || set.identifier === "incentiveBackgrounds"')
+      span(ng-hide='ownsSet("background", set.items) || set.identifier === "incentiveBackgrounds"')
-        +gemCost(7)
+        +gemCost(7)
-          button.btn.btn-xs(ng-click='unlock(setKeys("background", set.items))')!= env.t('unlockSet',{cost:15}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+          button.btn.btn-xs(ng-click='unlock(setKeys("background", set.items))')!= env.t('unlockSet',{cost:15}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
-      button.customize-option(ng-repeat='bg in set.items', type='button', class='background_{{bg.key}}', ng-class='user.purchased.background.{{bg.key}} ? "background-unlocked" : "background-locked"', ng-click='unlock("background." + bg.key)', popover-title='{{bg.text}}', popover='{{bg.notes}}', popover-trigger='mouseenter')
+      button.customize-option(ng-repeat='bg in set.items', type='button', class='background_{{bg.key}}', ng-class='user.purchased.background.{{bg.key}} ? "background-unlocked" : "background-locked"', ng-click='unlock("background." + bg.key)', popover-title='{{bg.text}}', popover='{{bg.notes}}', popover-trigger='mouseenter')
-        i.glyphicon.glyphicon-lock(ng-if='!user.purchased.background[bg.key]')
+        i.glyphicon.glyphicon-lock(ng-if='!user.purchased.background[bg.key]')
-
+
-script(type='text/ng-template', id='partials/options.profile.backgrounds.html')
+script(type='text/ng-template', id='partials/options.profile.backgrounds.html')
-  +backgrounds()
+  +backgrounds()