feat(backgrounds): add backgrounds feature

public/css/avatar.styl

@@ -27,6 +27,8 @@ future re: pets and whatnot, this is just temporary.
 	margin: 0 // need this b/c of bootstrap, remove or reset later
 	position: relative
 	cursor: pointer
+// users can have image backgrounds
+.herobox:not(.hasBackground)
 	background: $color-herobox
 	transition: border 0.25s ease-out, background 0.25s ease-out//, padding 0.13s ease-out
 	outline: 1px solid rgba(0,0,0,0.1)
@@ -61,7 +63,7 @@ future re: pets and whatnot, this is just temporary.
         border 1px solid black
 
 // if not user's avatar, remove lines for party unity
-.herobox:not(.isUser)
+.herobox:not(.isUser):not(.hasBackground)
   outline: 0
   background-color: darken($color-herobox, 8%)
 
@@ -75,7 +77,7 @@ future re: pets and whatnot, this is just temporary.
 
 // expose hero info on hover, taking
 // into account the extra pet space
-.herobox:hover, .herobox:focus
+.herobox:hover:not(.hasBackground), .herobox:focus:not(.hasBackground)
 	background: lighten($color-herobox, 30%)
 	&:after
 		opacity: 1
@@ -90,5 +92,5 @@ future re: pets and whatnot, this is just temporary.
 	.character-sprites span, .pet
 		position: absolute
 
-.herobox.isLeader
+.herobox.isLeader:not(.hasBackground)
 	background: lighten($color-herobox, 10%)

public/js/app.js

@@ -56,6 +56,10 @@ window.habitrpg = angular.module('habitrpg',
           url: "/avatar",
           templateUrl: "partials/options.profile.avatar.html"
         })
+        .state('options.profile.backgrounds', {
+          url: '/backgrounds',
+          templateUrl: "partials/options.profile.backgrounds.html"
+        })
         .state('options.profile.stats', {
           url: "/stats",
           templateUrl: "partials/options.profile.stats.html"

public/js/controllers/inventoryCtrl.js

@@ -154,5 +154,12 @@ habitrpg.controller("InventoryCtrl", ['$rootScope', '$scope', '$window', 'User',
       $rootScope.selectedQuest = item;
       $rootScope.openModal('buyQuest', {controller:'InventoryCtrl'});
     }
+
+    $scope.chooseBackground = function(k,bg){
+      //if (!user.purchased.background[bg])
+      if (k===user.preferences.background)
+        User.set({'preferences.background':''});
+      User.set({'preferences.background':k});
+    }
   }
 ]);

public/js/controllers/userCtrl.js

@@ -49,13 +49,17 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
      */
     $scope.unlock = function(path){
       var fullSet = ~path.indexOf(',');
-      var cost = fullSet ? 1.25 : 0.5; // 5G per set, 2G per individual
+      var cost =
+        ~path.indexOf('background.') ?
+          (fullSet ? 3.25 : 1.75) : // (Backgrounds) 15G per set, 7G per individual
+          (fullSet ? 1.25 : 0.5); // (Hair, skin, etc) 5G per set, 2G per individual
+
 
       if (fullSet) {
-        if (confirm(window.env.t('purchaseFor5')) !== true) return;
+        if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return;
         if (User.user.balance < cost) return $rootScope.openModal('buyGems');
       } else if (!User.user.fns.dotGet('purchased.' + path)) {
-        if (confirm(window.env.t('purchaseFor2')) !== true) return;
+        if (confirm(window.env.t('purchaseFor',{cost:cost*4})) !== true) return;
         if (User.user.balance < cost) return $rootScope.openModal('buyGems');
       }
       User.user.ops.unlock({query:{path:path}})

src/models/user.js

@@ -82,6 +82,7 @@ var UserSchema = new Schema({
     skin: {type: Schema.Types.Mixed, 'default': {}}, // eg, {skeleton: true, pumpkin: true, eb052b: true}
     hair: {type: Schema.Types.Mixed, 'default': {}},
     shirt: {type: Schema.Types.Mixed, 'default': {}},
+    background: {type: Schema.Types.Mixed, 'default': {}},
     txnCount: {type: Number, 'default':0},
     mobileChat: Boolean,
     plan: {
@@ -266,7 +267,8 @@ var UserSchema = new Schema({
     newTaskEdit: {type: Boolean, 'default': false},
     tagsCollapsed: {type: Boolean, 'default': false},
     advancedCollapsed: {type: Boolean, 'default': false},
-    toolbarCollapsed: {type:Boolean, 'default':false}
+    toolbarCollapsed: {type:Boolean, 'default':false},
+    background: String
   },
   profile: {
     blurb: String,

views/options/profile.jade

@@ -234,11 +234,23 @@ script(id='partials/options.profile.profile.html', type='text/ng-template')
           textarea.form-control(rows=5, placeholder=env.t('displayBlurb'), ng-model='editingProfile.blurb')
           include ../shared/formatting-help
 
+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')
+
 script(id='partials/options.profile.html', type="text/ng-template")
   ul.options-menu
     li(ng-class="{ active: $state.includes('options.profile.avatar') }")
       a(ui-sref='options.profile.avatar')
         =env.t('avatar')
+    li(ng-class="{ active: $state.includes('options.profile.backgrounds') }")
+      a(ui-sref='options.profile.backgrounds')
+        //-=env.t('profile')
+        | Backgrounds
     li(ng-class="{ active: $state.includes('options.profile.stats') }")
       a(ui-sref='options.profile.stats')
         =env.t('statsAch')
@@ -248,4 +260,4 @@ script(id='partials/options.profile.html', type="text/ng-template")
 
   .tab-content
     .tab-pane.active
-      div(ui-view)
+      div(ui-view)

views/shared/header/avatar.jade

@@ -4,7 +4,9 @@
 //-figure.herobox(ng-click='clickMember(profile._id)', data-name='{{profile.profile.name}}', ng-class='{isUser: profile.id==user.id, hasPet: profile.items.currentPet}', data-level='{{profile.stats.lvl}}', data-uid='{{profile.id}}', rel='popover', data-placement='bottom', data-trigger='hover', data-html='true', data-content="<div ng-hide='profile.id == user.id'> <div class='progress progress-danger' style='height:5px;'> <div class='bar' style='height: 5px; width: {{percent(profile.stats.hp, 50)}}%;'></div> </div> <div class='progress progress-warning' style='height:5px;'> <div class='bar' style='height: 5px; width: {{percent(profile.stats.exp, tnl(profile.stats.lvl))}}%;'></div> </div> <div>Level: {{profile.stats.lvl}}</div> <div>GP: {{profile.stats.gp | number:0}}</div> <div>{{count(profile.items.pets)}} / 90 Pets Found</div> </div>")
 
 mixin avatar(opts)
+
   .character-sprites
+
     // Mount Body
     if !opts.minimal
       span(ng-if='profile.items.currentMount', class='Mount_Body_{{profile.items.currentMount}}')
@@ -71,7 +73,7 @@ mixin avatar(opts)
 
 mixin herobox(opts)
   - if (!opts) {opts = {minimal:false,main:false}}
-  figure.herobox(ng-click='spell ? castEnd(profile, "user", $event) : clickMember(profile._id)', data-name='{{profile.profile.name}}', class='#{opts.main ? "isUser" : ""} #{opts.minimal ? "minimal" : ""}', ng-class='{hasPet: (#{!opts.minimal} && profile.items.currentPet), hasMount: (#{!opts.minimal} && profile.items.currentMount), "cast-target": applyingAction, isLeader: party.leader==profile._id}')
+  figure.herobox(ng-click='spell ? castEnd(profile, "user", $event) : clickMember(profile._id)', data-name='{{profile.profile.name}}', class='background_{{profile.preferences.background}} #{opts.main ? "isUser" : ""} #{opts.minimal ? "minimal" : ""}', ng-class='{hasPet: (#{!opts.minimal} && profile.items.currentPet), hasMount: (#{!opts.minimal} && profile.items.currentMount), hasBackground: profile.preferences.background, "cast-target": applyingAction, isLeader: party.leader==profile._id}')
     +avatar(opts)
     .avatar-level.label.label-default(ng-class='userLevelStyle(profile)')
       span.glyphicon.glyphicon-circle-arrow-up(ng-show='profile.stats.buffs.str || profile.stats.buffs.per || profile.stats.buffs.con || profile.stats.buffs.int || profile.stats.buffs.stealth', tooltip=env.t('buffed'))

views/shared/header/menu.jade

@@ -17,6 +17,8 @@ nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}')
             ul.toolbar-submenu
               li
                 a(ui-sref='options.profile.avatar')=env.t('avatar')
+              li
+                a(ui-sref='options.profile.backgrounds') Backgrounds
               li
                 a(ui-sref='options.profile.stats')=env.t('stats')
               li
@@ -59,6 +61,8 @@ nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}')
           ul.toolbar-submenu(ng-click='expandMenu(null)')
             li
               a(ui-sref='options.profile.avatar')=env.t('avatar')
+            li
+              a(ui-sref='options.profile.backgrounds') Backgrounds
             li
               a(ui-sref='options.profile.stats')=env.t('stats')
             li
@@ -95,7 +99,7 @@ nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}')
               a(ui-sref='options.inventory.mounts')=env.t('mounts')
             li
               a(ui-sref='options.inventory.equipment')=env.t('equipment')
-    ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId')  
+    ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId')
       li.toolbar-subscribe-button
         button(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe')
     ul.toolbar-options