Sabrecat/glasses chairs (#7182)

* feat(customization): new chairs, eyeglass sprites

* feat(avatar): finish glasses implementation

* fix(test): include glasses in base equipment

common/dist/sprites/spritesmith-largeSprites-0.css

@@ -1,12 +1,12 @@
 .2014_Fall_HealerPROMO2 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -669px -1157px;
+  background-position: -825px -423px;
   width: 90px;
   height: 90px;
 }
 .2014_Fall_Mage_PROMO9 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1096px -760px;
+  background-position: -1466px -1139px;
   width: 120px;
   height: 90px;
 }
@@ -18,7 +18,7 @@
 }
 .2014_Fall_Warrior_PROMO {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -825px -423px;
+  background-position: -669px -1157px;
   width: 90px;
   height: 90px;
 }
@@ -30,25 +30,25 @@
 }
 .promo_backgrounds_armoire_201602 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -306px -220px;
+  background-position: -954px 0px;
   width: 141px;
   height: 294px;
 }
 .promo_backgrounds_armoire_201603 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -954px 0px;
+  background-position: -306px -220px;
   width: 141px;
   height: 294px;
 }
 .promo_backgrounds_armoire_201604 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -452px 0px;
+  background-position: -593px 0px;
   width: 140px;
   height: 441px;
 }
 .promo_backgrounds_armoire_201605 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -593px 0px;
+  background-position: -452px 0px;
   width: 140px;
   height: 441px;
 }
@@ -64,6 +64,12 @@
   width: 219px;
   height: 240px;
 }
+.promo_chairs_glasses {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -954px -569px;
+  width: 51px;
+  height: 210px;
+}
 .promo_classes_fall_2014 {
   background-image: url(spritesmith-largeSprites-0.png);
   background-position: -326px -957px;
@@ -108,7 +114,7 @@
 }
 .promo_enchanted_armoire_201509 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -734px -423px;
+  background-position: -825px -332px;
   width: 90px;
   height: 90px;
 }
@@ -120,7 +126,7 @@
 }
 .promo_enchanted_armoire_201601 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -808px -706px;
+  background-position: -861px -525px;
   width: 90px;
   height: 90px;
 }
@@ -156,7 +162,7 @@
 }
 .promo_mystery_201405 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -942px -1157px;
+  background-position: -760px -1157px;
   width: 90px;
   height: 90px;
 }
@@ -192,7 +198,7 @@
 }
 .promo_mystery_201411 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -578px -1157px;
+  background-position: -1005px -809px;
   width: 90px;
   height: 90px;
 }
@@ -210,13 +216,13 @@
 }
 .promo_mystery_201502 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -734px -241px;
+  background-position: -1033px -1157px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201503 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -825px -241px;
+  background-position: -1124px -1157px;
   width: 90px;
   height: 90px;
 }
@@ -228,7 +234,7 @@
 }
 .promo_mystery_201505 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -825px -332px;
+  background-position: -734px -423px;
   width: 90px;
   height: 90px;
 }
@@ -246,25 +252,25 @@
 }
 .promo_mystery_201508 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -954px -660px;
+  background-position: -828px -241px;
   width: 93px;
   height: 90px;
 }
 .promo_mystery_201509 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -861px -525px;
+  background-position: -808px -706px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201510 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -954px -569px;
+  background-position: -734px -241px;
   width: 93px;
   height: 90px;
 }
 .promo_mystery_201511 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1005px -809px;
+  background-position: -578px -1157px;
   width: 90px;
   height: 90px;
 }
@@ -276,19 +282,19 @@
 }
 .promo_mystery_201601 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1466px -1139px;
+  background-position: -1096px -760px;
   width: 120px;
   height: 90px;
 }
 .promo_mystery_201602 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -760px -1157px;
+  background-position: -851px -1157px;
   width: 90px;
   height: 90px;
 }
 .promo_mystery_201603 {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -851px -1157px;
+  background-position: -942px -1157px;
   width: 90px;
   height: 90px;
 }
@@ -312,19 +318,19 @@
 }
 .promo_partyhats {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -954px -751px;
+  background-position: -593px -442px;
   width: 115px;
   height: 47px;
 }
 .promo_pastel_skin {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -979px -957px;
+  background-position: -648px -957px;
   width: 330px;
   height: 83px;
 }
 .customize-option.promo_pastel_skin {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -1004px -972px;
+  background-position: -673px -972px;
   width: 60px;
   height: 60px;
 }
@@ -348,7 +354,7 @@
 }
 .promo_shimmer_hair {
   background-image: url(spritesmith-largeSprites-0.png);
-  background-position: -648px -957px;
+  background-position: -979px -957px;
   width: 330px;
   height: 83px;
 }

common/locales/en/gear.json

@@ -926,6 +926,21 @@
   "eyewearBase0Text": "No Eyewear",
   "eyewearBase0Notes": "No Eyewear.",
 
+  "eyewearSpecialBlackTopFrameText": "Black Standard Eyeglasses",
+  "eyewearSpecialBlackTopFrameNotes": "Glasses with a black frame above the lenses. Confers no benefit.",
+  "eyewearSpecialBlueTopFrameText": "Blue Standard Eyeglasses",
+  "eyewearSpecialBlueTopFrameNotes": "Glasses with a blue frame above the lenses. Confers no benefit.",
+  "eyewearSpecialGreenTopFrameText": "Green Standard Eyeglasses",
+  "eyewearSpecialGreenTopFrameNotes": "Glasses with a green frame above the lenses. Confers no benefit.",
+  "eyewearSpecialPinkTopFrameText": "Pink Standard Eyeglasses",
+  "eyewearSpecialPinkTopFrameNotes": "Glasses with a pink frame above the lenses. Confers no benefit.",
+  "eyewearSpecialRedTopFrameText": "Red Standard Eyeglasses",
+  "eyewearSpecialRedTopFrameNotes": "Glasses with a red frame above the lenses. Confers no benefit.",
+  "eyewearSpecialWhiteTopFrameText": "White Standard Eyeglasses",
+  "eyewearSpecialWhiteTopFrameNotes": "Glasses with a white frame above the lenses. Confers no benefit.",
+  "eyewearSpecialYellowTopFrameText": "Yellow Standard Eyeglasses",
+  "eyewearSpecialYellowTopFrameNotes": "Glasses with a yellow frame above the lenses. Confers no benefit.",
+
   "eyewearSpecialSummerRogueText": "Roguish Eyepatch",
   "eyewearSpecialSummerRogueNotes": "It doesn't take a scallywag to see how stylish this is! Confers no benefit. Limited Edition 2014 Summer Gear.",
   "eyewearSpecialSummerWarriorText": "Dashing Eyepatch",

common/script/content/appearance/chair.js

@@ -3,4 +3,9 @@ import prefill from './prefill.js';
 export default prefill({
   none: {},
   black: {},
+  blue: {},
+  green: {},
+  pink: {},
+  red: {},
+  yellow: {},
 });

common/script/content/gear/sets/special/index.js

@@ -433,6 +433,48 @@ let eyewear = {
     notes: t('eyewearSpecialSummerWarriorNotes'),
     value: 20,
   },
+  blackTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialBlackTopFrameText'),
+    notes: t('eyewearSpecialBlackTopFrameNotes'),
+    value: 0,
+  },
+  blueTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialBlueTopFrameText'),
+    notes: t('eyewearSpecialBlueTopFrameNotes'),
+    value: 0,
+  },
+  greenTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialGreenTopFrameText'),
+    notes: t('eyewearSpecialGreenTopFrameNotes'),
+    value: 0,
+  },
+  pinkTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialPinkTopFrameText'),
+    notes: t('eyewearSpecialPinkTopFrameNotes'),
+    value: 0,
+  },
+  redTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialRedTopFrameText'),
+    notes: t('eyewearSpecialRedTopFrameNotes'),
+    value: 0,
+  },
+  whiteTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialWhiteTopFrameText'),
+    notes: t('eyewearSpecialWhiteTopFrameNotes'),
+    value: 0,
+  },
+  yellowTopFrame: {
+    gearSet: 'glasses',
+    text: t('eyewearSpecialYellowTopFrameText'),
+    notes: t('eyewearSpecialYellowTopFrameNotes'),
+    value: 0,
+  },
 };
 
 let head = {

tasks/gulp-sprites.js

@@ -127,7 +127,7 @@ function calculateImgDimensions(img, addPadding) {
 }
 
 function checkForSpecialTreatment(name) {
-  let regex = /^hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/;
+  let regex = /^hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears|^eyewear_special_\w+TopFrame/;
   return name.match(regex) || name === 'head_0';
 }
 

test/common/algos.mocha.js

@@ -394,6 +394,13 @@ describe('User', () => {
       expect(user).toHaveHP(50);
       expect(user.items.gear.owned).to.eql({
         weapon_warrior_0: false,
+        eyewear_special_blackTopFrame: true,
+        eyewear_special_blueTopFrame: true,
+        eyewear_special_greenTopFrame: true,
+        eyewear_special_pinkTopFrame: true,
+        eyewear_special_redTopFrame: true,
+        eyewear_special_yellowTopFrame: true,
+        eyewear_special_whiteTopFrame: true,
       });
     });
 

website/src/models/user.js

@@ -208,7 +208,7 @@ var UserSchema = new Schema({
     gear: {
       owned: _.transform(shared.content.gear.flat, function(m,v,k){
         m[v.key] = {type: Boolean};
-        if (v.key.match(/[armor|head|shield]_warrior_0/))
+        if (v.key.match(/[armor|head|shield]_warrior_0/) || v.gearSet === 'glasses')
           m[v.key]['default'] = true;
       }),
 

website/views/options/profile.jade

@@ -56,6 +56,22 @@ mixin customizeProfile(mobile)
             each num in [1,2,3,4,5,6]
               button(class='hair_flower_#{num} customize-option', type='button', ng-click='set({"preferences.hair.flower":#{num}})', ng-class='{selectableInventory: user.preferences.hair.flower == "#{num}"}')
 
+        // Eyeglasses
+        li.customize-menu
+          menu(label=env.t('eyewear'))
+          button.customize-option(ng-repeat='item in ::getGearArray("glasses")', class='{{::item.key}}',
+            ng-class="{selectableInventory: user.preferences.costume ? user.items.gear.costume.eyewear === item.key : user.items.gear.equipped.eyewear === item.key}",
+            popover='{{::item.notes()}}', popover-title='{{::item.text()}}', popover-trigger='mouseenter',
+            popover-placement='right', popover-append-to-body='true',
+            ng-click='equip(item.key)')
+
+        // Wheelchair
+        li.customize-menu
+          menu(label=env.t('wheelchair'))
+            button.customize-option(ng-repeat='item in ::["black","blue","green","pink","red","yellow"]', class='button_chair_{{::item}}',
+              ng-class="{selectableInventory: user.preferences.chair == item}",
+              ng-click='user.preferences.chair != item ? set({"preferences.chair":item}) : set({"preferences.chair":"none"})')
+
         // Animal Ears
         li.customize-menu
           menu(label=env.t('animalEars'))
@@ -68,13 +84,6 @@ mixin customizeProfile(mobile)
             popover-placement='right', popover-append-to-body='true',
             ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
 
-        // Wheelchair
-        li.customize-menu
-          menu(label=env.t('wheelchair'))
-            button.customize-option(ng-repeat='item in ::["black"]', class='button_chair_{{::item}}',
-              ng-class="{selectableInventory: user.preferences.chair == item}",
-              ng-click='user.preferences.chair != item ? set({"preferences.chair":item}) : set({"preferences.chair":"none"})')
-
     .col-md-4
         h3(class=mobile?'item item-divider':'')=env.t('bodyHead')
         menu(type='list')

website/views/shared/new-stuff.jade

@@ -1,33 +1,45 @@
-h2 5/3/2016 - iOS UPDATE, MAY BACKGROUNDS, AND MAY ARMOIRE ITEMS
+h2 5/11/2016 - NEW AVATAR CUSTOMIZATIONS AND CHALLENGE SPOTLIGHT SUBMISSIONS
   hr
   tr
     td
-      h3 iOS Update
-      p We've released <a href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8' target='_blank'>a new iOS update</a> which includes social media sharing and the ability to change your class from the app, as well as some bug fixes. Be sure to download it now for a better Habitica experience!
-      br
-      p If you like the improvements that we’ve been making to our app, please consider reviewing this new version. It really helps us out! Old reviews get hidden, but if you go to the review section you can re-post it again with a single tap. We hope you enjoy the update!
-      p.small.muted by viirus
+      .promo_chairs_glasses.pull-right
+      h3 Glasses and New Wheelchair Colors for Avatars
+      p We have two new sets of free <a href='/#/options/profile/avatar'>avatar customizations</a> available: glasses, and additional wheelchair colors! We hope that Habiticans who wear glasses and/or use wheelchairs will enjoy these options.
+      p.small.muted by Breadstrings and Balduranne
   tr
     td
-      .promo_backgrounds_armoire_201605.pull-right
-      h3 May Backgrounds
-      p There are three new avatar backgrounds in the <a href='https://habitica.com/#/options/profile/backgrounds'>Background Shop!</a> Now your avatar can buzz in a Beehive, explore the Tree Roots, or battle a Gazebo.
-      p.small.muted by James Danger and DialFForFunky
-  tr
-    td
-      h3 May Armoire Items Revealed
-      p There is new equipment in the Enchanted Armoire, a 100 GP Reward in the Rewards Column which unlocks after you've attained Ultimate Gear!
-      br
-      p Click on the Enchanted Armoire for a random chance at special Equipment, including the Graduate Set and the Bouquet of Flowers! It may also give you random XP or food items. We'll be adding new equipment to it during the first week of each month, but even when you've exhausted the current supply, you can keep clicking for a chance at food and XP.
-      br
-      p Now go spend all that accumulated Gold! May the Random Number Generator smile upon you...
-      p.small.muted by Breadstrings
+      h3 Challenge Spotlight Submissions
+      p Do you have a broadly-applicable Challenge that you would like to promote to all of Habitica? Now you can submit Challenges to be featured on our official blog! To qualify, the Challenge must have a fixed end date and a Gem prize of any amount. To submit a Challenge for consideration, just <a href='https://docs.google.com/forms/d/1Wb0TJaZrMA3URdANqoNjnhi_EfFTwfZ0WwteB8IU5E8/viewform' target='_blank'>fill out this form.</a>
+      p.small.muted by redphoenix
 
 if menuItem !== 'oldNews'
   hr
   a(href='/static/old-news', target='_blank') Read older news
 
 mixin oldNews
+  h2 5/3/2016 - iOS UPDATE, MAY BACKGROUNDS, AND MAY ARMOIRE ITEMS
+    tr
+      td
+        h3 iOS Update
+        p We've released <a href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8' target='_blank'>a new iOS update</a> which includes social media sharing and the ability to change your class from the app, as well as some bug fixes. Be sure to download it now for a better Habitica experience!
+        br
+        p If you like the improvements that we’ve been making to our app, please consider reviewing this new version. It really helps us out! Old reviews get hidden, but if you go to the review section you can re-post it again with a single tap. We hope you enjoy the update!
+        p.small.muted by viirus
+    tr
+      td
+        .promo_backgrounds_armoire_201605.pull-right
+        h3 May Backgrounds
+        p There are three new avatar backgrounds in the <a href='https://habitica.com/#/options/profile/backgrounds'>Background Shop!</a> Now your avatar can buzz in a Beehive, explore the Tree Roots, or battle a Gazebo.
+        p.small.muted by James Danger and DialFForFunky
+    tr
+      td
+        h3 May Armoire Items Revealed
+        p There is new equipment in the Enchanted Armoire, a 100 GP Reward in the Rewards Column which unlocks after you've attained Ultimate Gear!
+        br
+        p Click on the Enchanted Armoire for a random chance at special Equipment, including the Graduate Set and the Bouquet of Flowers! It may also give you random XP or food items. We'll be adding new equipment to it during the first week of each month, but even when you've exhausted the current supply, you can keep clicking for a chance at food and XP.
+        br
+        p Now go spend all that accumulated Gold! May the Random Number Generator smile upon you...
+        p.small.muted by Breadstrings
   h2 4/29/2016 - LAST CHANCE FOR APRIL SUBSCRIBER ITEMS AND SPRING FLING ITEMS!
     tr
       td