feat(backgrounds): use nested backgrounds as {set:{bg1,bg2,bg3}} for

easier "purchase set". Refactor twoGem()

public/js/controllers/userCtrl.js

@@ -65,5 +65,16 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
       User.user.ops.unlock({query:{path:path}})
     }
 
+    $scope.ownsSet = function(type,_set) {
+      return !_.find(_set,function(v,k){
+        return !User.user.purchased[type][k];
+      });
+    }
+    $scope.setKeys = function(type,_set){
+      return _.map(_set, function(v,k){
+        return type+'.'+k;
+      }).join(',');
+    }
+
   }
 ]);

views/options/profile.jade

@@ -1,6 +1,6 @@
-mixin twoGem
+mixin gemCost(cost)
   small.cost
-    | 2 <span class="Pet_Currency_Gem1x inline-gems"></span> /
+    | #{cost} <span class="Pet_Currency_Gem1x inline-gems"></span> /
     = ' ' + env.t('locked')
     block
 
@@ -24,8 +24,8 @@ mixin customizeProfile(mobile)
               button.customize-option(class='{{user.preferences.size}}_shirt_'+shirt, type='button', ng-click='set({"preferences.shirt":"'+shirt+'"})')
 
           menu(label=env.t('specialShirts'))
-            +twoGem()
-              button.btn.btn-xs(ng-hide="user.purchased.shirt.convict && user.purchased.shirt.cross && user.purchased.shirt.fire && user.purchased.shirt.horizon && user.purchased.shirt.ocean && user.purchased.shirt.purple && user.purchased.shirt.rainbow && user.purchased.shirt.redblue && user.purchased.shirt.thunder && user.purchased.shirt.tropical && user.purchased.shirt.zombie", ng-click='unlock("shirt.convict,shirt.cross,shirt.fire,shirt.horizon,shirt.ocean,shirt.purple,shirt.rainbow,shirt.redblue,shirt.thunder,shirt.tropical,shirt.zombie")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+            +gemCost(2)
+              button.btn.btn-xs(ng-hide="user.purchased.shirt.convict && user.purchased.shirt.cross && user.purchased.shirt.fire && user.purchased.shirt.horizon && user.purchased.shirt.ocean && user.purchased.shirt.purple && user.purchased.shirt.rainbow && user.purchased.shirt.redblue && user.purchased.shirt.thunder && user.purchased.shirt.tropical && user.purchased.shirt.zombie", ng-click='unlock("shirt.convict,shirt.cross,shirt.fire,shirt.horizon,shirt.ocean,shirt.purple,shirt.rainbow,shirt.redblue,shirt.thunder,shirt.tropical,shirt.zombie")')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
             each shirt in ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie']
               button.customize-option(type='button', class='{{user.preferences.size}}_shirt_'+shirt, ng-class='{locked: !user.purchased.shirt.'+shirt+'}', ng-click='unlock("shirt.'+shirt+'")')
 
@@ -41,8 +41,8 @@ mixin customizeProfile(mobile)
               if limited
                 .label.label-info.pull-right.hint(popover=limited, popover-title=env.t('limitedEdition'), popover-placement='right', popover-trigger='mouseenter')=env.t('limitedEdition')
               menu(label=title)
-                +twoGem()
-                  button.btn.btn-xs(ng-hide='user.purchased.hair.color.#{colors.join(" && user.purchased.hair.color.")}', ng-click='unlock("hair.color.#{colors.join(",hair.color.")}")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+                +gemCost(2)
+                  button.btn.btn-xs(ng-hide='user.purchased.hair.color.#{colors.join(" && user.purchased.hair.color.")}', ng-click='unlock("hair.color.#{colors.join(",hair.color.")}")')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
                 each color in colors
                   button(type='button', ng-class='{locked: !user.purchased.hair.color.#{color}}', class='customize-option hair hair_bangs_1_#{color}', ng-click='unlock("hair.color.#{color}")')
 
@@ -67,8 +67,8 @@ mixin customizeProfile(mobile)
 
             // Base
             menu(label=env.t('hairBase'))
-              +twoGem()
-                button.btn.btn-xs(ng-hide='user.purchased.hair.base.2 && user.purchased.hair.base.4 && user.purchased.hair.base.5 && user.purchased.hair.base.6 && user.purchased.hair.base.7 && user.purchased.hair.base.8', ng-click='unlock("hair.base.2,hair.base.4,hair.base.5,hair.base.6,hair.base.7,hair.base.8")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+              +gemCost(2)
+                button.btn.btn-xs(ng-hide='user.purchased.hair.base.2 && user.purchased.hair.base.4 && user.purchased.hair.base.5 && user.purchased.hair.base.6 && user.purchased.hair.base.7 && user.purchased.hair.base.8', ng-click='unlock("hair.base.2,hair.base.4,hair.base.5,hair.base.6,hair.base.7,hair.base.8")')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
               button(class='head_0 customize-option', type='button', ng-click='set({"preferences.hair.base":0})')
               each v,k in {1:true,2:false,3:true,4:false,5:false,6:false,7:false,8:false}
                 case v
@@ -85,8 +85,8 @@ mixin customizeProfile(mobile)
           li.customize-menu
             h5=env.t('bodyFacialHair')
 
-            +twoGem()
-              button.btn.btn-xs(ng-hide='user.purchased.hair.mustache.1 && user.purchased.hair.mustache.2 && user.purchased.hair.beard.1 && user.purchased.hair.beard.2 && user.purchased.hair.beard.3', ng-click='unlock("hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+            +gemCost(2)
+              button.btn.btn-xs(ng-hide='user.purchased.hair.mustache.1 && user.purchased.hair.mustache.2 && user.purchased.hair.beard.1 && user.purchased.hair.beard.2 && user.purchased.hair.beard.3', ng-click='unlock("hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3")')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
 
             // Beard
             menu(label=env.t('beard'))
@@ -110,8 +110,8 @@ mixin customizeProfile(mobile)
 
           // Rainbow Skin
           menu(label=env.t('rainbowSkins'))
-            +twoGem()
-              button.btn.btn-xs(ng-hide='user.purchased.skin.eb052b && user.purchased.skin.f69922 && user.purchased.skin.f5d70f && user.purchased.skin.0ff591 && user.purchased.skin.2b43f6 && user.purchased.skin.d7a9f7 && user.purchased.skin.800ed0 && user.purchased.skin.rainbow', ng-click='unlock("skin.eb052b,skin.f69922,skin.f5d70f,skin.0ff591,skin.2b43f6,skin.d7a9f7,skin.800ed0,skin.rainbow")')!= env.t('unlockSet5') + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+            +gemCost(2)
+              button.btn.btn-xs(ng-hide='user.purchased.skin.eb052b && user.purchased.skin.f69922 && user.purchased.skin.f5d70f && user.purchased.skin.0ff591 && user.purchased.skin.2b43f6 && user.purchased.skin.d7a9f7 && user.purchased.skin.800ed0 && user.purchased.skin.rainbow', ng-click='unlock("skin.eb052b,skin.f69922,skin.f5d70f,skin.0ff591,skin.2b43f6,skin.d7a9f7,skin.800ed0,skin.rainbow")')!= env.t('unlockSet',{cost:5}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
             each color in ['eb052b','f69922','f5d70f','0ff591','2b43f6','d7a9f7','800ed0','rainbow']
               button.customize-option(type='button', class='skin_#{color}', ng-class='{locked: !user.purchased.skin.#{color}}', ng-click='unlock("skin.#{color}")')
 
@@ -238,9 +238,12 @@ script(type='text/ng-template', id='partials/options.profile.backgrounds.html')
   .container-fluid
     .row
       menu(type='list')
-        li.customize-menu
-            menu
-              button.customize-option(type='button',ng-repeat='(k,bg) in Content.backgrounds',class='background_{{k}}',ng-click='unlock("background."+k)',popover-title='{{bg.text()}}',popover='{{bg.notes()}}',popover-trigger='mouseenter')
+        li.customize-menu(ng-repeat='(k,bgs) in Content.backgrounds')
+          menu(label='{{k}}')
+            +gemCost(7)
+              button.btn.btn-xs(ng-hide="ownsSet('background',bgs)", ng-click='unlock(setKeys("background",bgs))')!= env.t('unlockSet',{cost:15}) + ' <span class="Pet_Currency_Gem1x inline-gems"/>'
+            //-menu(label='{{k | date : "short"}}')
+            button.customize-option(type='button',ng-repeat='(k,bg) in bgs',class='background_{{k}}',ng-click='unlock("background."+k)',popover-title='{{bg.text()}}',popover='{{bg.notes()}}',popover-trigger='mouseenter')
 
 script(id='partials/options.profile.html', type="text/ng-template")
   ul.options-menu