feat(customize): earrings and headbands

website/client/components/creatorIntro.vue

@@ -191,11 +191,13 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
         .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
           strong(v-once) {{$t('wheelchair')}}
         .col-3.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
-          strong(v-once) {{$t('flower')}}
+          strong(v-once) {{$t('accent')}}
       .row.sub-menu(v-if='editing')
-        .col-4.offset-4.text-center.sub-menu-item(@click='changeSubPage("ears")' :class='{active: activeSubPage === "ears"}')
+        .col-4.offset-2.text-center.sub-menu-item(@click='changeSubPage("ears")' :class='{active: activeSubPage === "ears"}')
           strong(v-once) {{$t('animalEars')}}
-      .row(v-if='activeSubPage === "glasses"')
+        .col-4.text-center.sub-menu-item(@click='changeSubPage("headband")' :class='{active: activeSubPage === "headband"}')
+          strong(v-once) {{$t('headband')}}
+      #glasses.row(v-if='activeSubPage === "glasses"')
         .col-12.customize-options
           .option(v-for='option in eyewear', :class='{active: option.active}')
             .sprite.customize-option(:class="`eyewear_special_${option.key}`", @click='option.click')
@@ -212,6 +214,10 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
               .svg-icon.gem(v-html='icons.gem')
               span 5
             button.btn.btn-secondary.purchase-all(@click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }}
+      #headband.row(v-if='activeSubPage === "headband"')
+        .col-12.customize-options
+          .option(v-for='option in headbands', :class='{active: option.active}')
+            .sprite.customize-option(:class="`headAccessory_special_${option.key}`", @click='option.click')
       #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
         .col-12.customize-options
           .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
@@ -222,7 +228,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
       #flowers.row(v-if='activeSubPage === "flower"')
         .col-12.customize-options
           .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
-          .option(v-for='option in [1, 2, 3, 4, 5, 6]',
+          .option(v-for='option in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]',
             :class='{active: user.preferences.hair.flower === option}')
             .sprite.customize-option(:class="`hair_flower_${option}`", @click='set({"preferences.hair.flower": option})')
       .row(v-if='activeSubPage === "flower"')
@@ -1038,6 +1044,21 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    headbands () {
+      let keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
+      let options = keys.map(key => {
+        let newKey = `headAccessory_special_${key}`;
+        let option = {};
+        option.key = key;
+        option.active = this.user.preferences.costume ? this.user.items.gear.costume.headAccessory === newKey : this.user.items.gear.equipped.headAccessory === newKey;
+        option.click = () => {
+          let type = this.user.preferences.costume ? 'costume' : 'equipped';
+          return this.equip(newKey, type);
+        };
+        return option;
+      });
+      return options;
+    },
     eyewear () {
       let keys = ['blackTopFrame', 'blueTopFrame', 'greenTopFrame', 'pinkTopFrame', 'redTopFrame', 'whiteTopFrame', 'yellowTopFrame'];
       let options = keys.map(key => {

website/common/locales/en/character.json

@@ -45,6 +45,8 @@
   "beard": "Beard",
   "mustache": "Mustache",
   "flower": "Flower",
+  "accent": "Accent",
+  "headband": "Headband",
   "wheelchair": "Wheelchair",
   "extra": "Extra",
   "basicSkins": "Basic Skins",

website/common/locales/en/gear.json

@@ -1591,6 +1591,20 @@
   "headAccessoryTigerEarsNotes": "These ears make you look like a fierce tiger! Confers no benefit.",
   "headAccessoryWolfEarsText": "Wolf Ears",
   "headAccessoryWolfEarsNotes": "These ears make you look like a loyal wolf! Confers no benefit.",
+  "headAccessoryBlackHeadbandText": "Black Headband",
+  "headAccessoryBlackHeadbandNotes": "A simple black headband. Confers no benefit.",
+  "headAccessoryBlueHeadbandText": "Blue Headband",
+  "headAccessoryBlueHeadbandNotes": "A simple blue headband. Confers no benefit.",
+  "headAccessoryGreenHeadbandText": "Green Headband",
+  "headAccessoryGreenHeadbandNotes": "A simple green headband. Confers no benefit.",
+  "headAccessoryPinkHeadbandText": "Pink Headband",
+  "headAccessoryPinkHeadbandNotes": "A simple pink headband. Confers no benefit.",
+  "headAccessoryRedHeadbandText": "Red Headband",
+  "headAccessoryRedHeadbandNotes": "A simple red headband. Confers no benefit.",
+  "headAccessoryWhiteHeadbandText": "White Headband",
+  "headAccessoryWhiteHeadbandNotes": "A simple white headband. Confers no benefit.",
+  "headAccessoryYellowHeadbandText": "Yellow Headband",
+  "headAccessoryYellowHeadbandNotes": "A simple yellow headband. Confers no benefit.",
 
   "headAccessoryMystery201403Text": "Forest Walker Antlers",
   "headAccessoryMystery201403Notes": "These antlers shimmer with moss and lichen. Confers no benefit. March 2014 Subscriber Item.",

website/common/script/content/appearance/hair/flower.js

@@ -8,4 +8,14 @@ module.exports = prefill({
   4: {},
   5: {},
   6: {},
+  7: {},
+  8: {},
+  9: {},
+  10: {},
+  11: {},
+  12: {},
+  13: {},
+  14: {},
+  15: {},
+  16: {},
 });

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

@@ -8,7 +8,7 @@ import takeThisGear from './special-takeThis';
 import wonderconGear from './special-wondercon';
 import t from '../../../translation';
 
-const CURRENT_SEASON = 'spring';
+const CURRENT_SEASON = '_NONE_';
 
 let armor = {
   0: backerGear.armorSpecial0,
@@ -2361,6 +2361,55 @@ let headAccessory = {
       return CURRENT_SEASON === 'spring';
     },
   },
+  blackHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryBlackHeadbandText'),
+    notes: t('headAccessoryBlackHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_blackHeadband'),
+  },
+  blueHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryBlueHeadbandText'),
+    notes: t('headAccessoryBlueHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_blueHeadband'),
+  },
+  greenHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryGreenHeadbandText'),
+    notes: t('headAccessoryGreenHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_greenHeadband'),
+  },
+  pinkHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryPinkHeadbandText'),
+    notes: t('headAccessoryPinkHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_pinkHeadband'),
+  },
+  redHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryRedHeadbandText'),
+    notes: t('headAccessoryRedHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_redHeadband'),
+  },
+  whiteHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryWhiteHeadbandText'),
+    notes: t('headAccessoryWhiteHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_whiteHeadband'),
+  },
+  yellowHeadband: {
+    gearSet: 'headband',
+    text: t('headAccessoryYellowHeadbandText'),
+    notes: t('headAccessoryYellowHeadbandNotes'),
+    value: 0,
+    canOwn: ownsItem('headAccessory_special_yellowHeadband'),
+  },
 };
 
 let shield = {

website/server/models/user/schema.js

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