halloween: begin adding mechanic for the special skins

public/css/customizer.styl

@@ -132,3 +132,6 @@ menu
     background-position: -2819px -38px;
   .f_armor_0_v1
     background-position: -2909px -38px;
+
+  .locked
+    background-color: #727272

public/js/controllers/userCtrl.js

@@ -1,7 +1,7 @@
 "use strict";
 
-habitrpg.controller("UserCtrl", ['$scope', '$location', 'User',
+habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$http',
-  function($scope, $location, User) {
+  function($rootScope, $scope, $location, User, $http) {
     $scope.profile = User.user;
     $scope.hideUserAvatar = function() {
       $(".userAvatar").hide();
@@ -32,4 +32,21 @@ habitrpg.controller("UserCtrl", ['$scope', '$location', 'User',
     $scope.removeWebsite = function($index){
       $scope.editingProfile.websites.splice($index,1);
     }
-}]);
+
+    /**
+     * For gem-unlockable preferences, (a) if owned, select preference (b) else, purchase
+     * @param path: User.preferences <-> User.purchased maps like User.preferences.skin=abc <-> User.purchased.skin.abc. Pass in this paramater as "skin.abc"
+     */
+    $scope.unlock = function(path){
+      if (window.habitrpgShared.helpers.dotGet('purchased.' + path, User.user)) {
+        var pref = path.split('.')[0],
+          val = path.split('.')[1];
+        window.habitrpgShared.helpers.dotSet('preferences.' + pref, val, User.user);
+      } else {
+        if (confirm("Purchase for 2 Gems?") !== true) return;
+        if (User.user.balance < 0.5) return $rootScope.modals.moreGems = true;
+        User.unlock(path);
+      }
+    }
+  }
+]);

public/js/services/userServices.js

@@ -164,6 +164,17 @@ angular.module('userServices', []).
           userServices.log(log);
         },
 
+        unlock: function(path){
+          var self = this;
+          $http.post(API_URL + '/api/v1/user/unlock?path=' + path)
+            .success(function(data, status, headers, config){
+              self.log({}); // sync new unlocked & preferences
+            }).error(function(data, status, headers, config){
+              alert(status + ': ' + data);
+              //FIXME use method used elsewhere for handling this error, this is temp while developing
+            })
+        },
+
         save: save,
 
         settings: settings

src/controllers/user.js

@@ -564,6 +564,39 @@ api['delete'] = function(req, res) {
   })
 }
 
+/*
+ ------------------------------------------------------------------------
+ Unlock Preferences
+ ------------------------------------------------------------------------
+ */
+
+api.unlock = function(req, res) {
+  var user = res.locals.user;
+  if (user.balance < 0.5)
+    return res.json(401, {err: 'Not enough gems'});
+
+  // Provide deafult values if !user.purchased
+  _.defaults(user, {purchased:{}});
+  _.defaults(user.purchased, {skin:{}, hair:{}, ads: false});
+
+  var path = req.query.path;
+  if (helpers.dotGet('purchased.' + path, user) === true)
+    return res.json(401, {err: 'User already purchased that'});
+  user.balance -= 2;
+  helpers.dotSet('purchased.' + path, true, user);
+  user.__v++;
+  user.save(function(err, saved){
+    if (err) res.json(500, {err:err});
+    res.send(200);
+  })
+}
+
+/*
+ ------------------------------------------------------------------------
+ Buy Gems
+ ------------------------------------------------------------------------
+ */
+
 
 /*
  Setup Stripe response when posting payment

src/models/user.js

@@ -69,6 +69,12 @@ var UserSchema = new Schema({
   rewardIds: Array,
   filters: {type: Schema.Types.Mixed, 'default': {}},
 
+  purchased: {
+    ads: {type: Boolean, 'default': false},
+    skin: Schema.Types.Mixed, // eg, {skeleton: true, pumpkin: true, eb052b: true}
+    hair: Schema.Types.Mixed
+  },
+
   flags: {
     customizationsNotification: {type: Boolean, 'default': false},
     showTour: {type: Boolean, 'default': true},

src/routes/api.js

@@ -48,6 +48,7 @@ router.post('/user/batch-update', auth.auth, cron, user.batchUpdate);
 router.post('/user/reroll', auth.auth, cron, user.reroll);
 router.post('/user/buy-gems', auth.auth, user.buyGems);
 router.post('/user/buy-gems/paypal-ipn', user.buyGemsPaypalIPN);
+router.post('/user/unlock', auth.auth, cron, user.unlock);
 router.post('/user/reset', auth.auth, user.reset);
 router['delete']('/user', auth.auth, user['delete']);
 

views/options/profile.jade

@@ -6,11 +6,14 @@
       // gender
       li.customize-menu
         menu(label='Head')
+        menu
           button.m_head_0.customize-option(type='button', ng-click='set("preferences.gender","m")')
           button.f_head_0.customize-option(type='button', ng-click='set("preferences.gender","f")')
         label.checkbox
           input(type='checkbox', ng-model='user.preferences.showHelm', ng-change='toggleHelm(user.preferences.showHelm)')
           | Show Helm
+      hr
+
       // hair
       li.customize-menu
         menu(label='Hair')
@@ -18,17 +21,40 @@
           button(class='{{user.preferences.gender}}_hair_black customize-option', type='button', ng-click='set("preferences.hair","black")')
           button(class='{{user.preferences.gender}}_hair_brown customize-option', type='button', ng-click='set("preferences.hair","brown")')
           button(class='{{user.preferences.gender}}_hair_white customize-option', type='button', ng-click='set("preferences.hair","white")')
+      hr
+
       // skin
       li.customize-menu
-        menu(label='Skin')
+        menu(label='Basic Skin')
-          button.customize-option(class='{{user.preferences.gender}}_skin_asian', type='button', ng-click='set("preferences.skin","asian")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_asian',  ng-click='set("preferences.skin","asian")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_white', type='button', ng-click='set("preferences.skin","white")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_white',  ng-click='set("preferences.skin","white")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_ea8349', type='button', ng-click='set("preferences.skin","ea8349")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_ea8349', ng-click='set("preferences.skin","ea8349")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_c06534', type='button', ng-click='set("preferences.skin","c06534")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_c06534', ng-click='set("preferences.skin","c06534")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_98461a', type='button', ng-click='set("preferences.skin","98461a")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_98461a', ng-click='set("preferences.skin","98461a")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_black', type='button', ng-click='set("preferences.skin","black")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_black',  ng-click='set("preferences.skin","black")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_dead',  type='button', ng-click='set("preferences.skin","dead")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_dead',   ng-click='set("preferences.skin","dead")')
-          button.customize-option(class='{{user.preferences.gender}}_skin_orc',   type='button', ng-click='set("preferences.skin","orc")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc',    ng-click='set("preferences.skin","orc")')
+
+        // Special Events
+        menu(label='Crazy Skin')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.eb052b}', ng-click='unlock("skin.eb052b")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.f69922}', ng-click='unlock("skin.f69922")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.f5d70f}', ng-click='unlock("skin.f5d70f")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.0ff591}', ng-click='unlock("skin.0ff591")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.2b43f6}', ng-click='unlock("skin.2b43f6")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.d7a9f7}', ng-click='unlock("skin.d7a9f7")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.800ed0}', ng-click='unlock("skin.800ed0")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.rainbow}', ng-click='unlock("skin.rainbow")')
+
+        // Special Events
+        menu(label='Monster Skin (Happy Halloween!)')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.monster}', ng-click='unlock("skin.monster")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.pumpkin}', ng-click='unlock("skin.pumpkin")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.skeleton}', ng-click='unlock("skin.skeleton")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.zombie}', ng-click='unlock("skin.zombie")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.ghost}', ng-click='unlock("skin.ghost")')
+          button.customize-option(type='button', class='{{user.preferences.gender}}_skin_orc', ng-class='{locked: !user.purchased.skin.shadow}', ng-click='unlock("skin.shadow")')
+
       menu(ng-show='user.preferences.gender=="f"', type='list')
         li.customize-menu
           menu(label='Clothing')