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,5 +1,23 @@
-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
+      .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
+      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
@@ -22,12 +40,6 @@ h2 5/3/2016 - iOS UPDATE, MAY BACKGROUNDS, AND MAY ARMOIRE ITEMS
         br
         p Now go spend all that accumulated Gold! May the Random Number Generator smile upon you...
         p.small.muted by Breadstrings
-
-if menuItem !== 'oldNews'
-  hr
-  a(href='/static/old-news', target='_blank') Read older news
-
-mixin oldNews
   h2 4/29/2016 - LAST CHANCE FOR APRIL SUBSCRIBER ITEMS AND SPRING FLING ITEMS!
     tr
       td