feat(avatar): popovers for customization

website/client/src/components/avatarModal/customize-options.vue

@@ -6,6 +6,7 @@
     <div
       v-for="option in items"
       :key="option.key"
+      :id="option.class"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -14,6 +15,14 @@
         hide: option.hide }"
       @click="option.click(option)"
     >
+      <b-popover
+        :target="option.class"
+        triggers="hover focus"
+        placement="bottom"
+        :prevent-overflow="false"
+      >
+        <strong> {{ option.text }} </strong>
+      </b-popover>
       <div class="option">
         <div
           class="sprite customize-option"

website/client/src/components/avatarModal/extra-settings.vue

@@ -75,6 +75,7 @@
 
 <script>
 import appearance from '@/../../common/script/content/appearance';
+import upperFirst from 'lodash/upperFirst';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
@@ -82,9 +83,6 @@ import customizeBanner from './customize-banner';
 import customizeOptions from './customize-options';
 import subMenu from './sub-menu';
 
-const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
-const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
-
 export default {
   components: {
     customizeBanner,
@@ -106,17 +104,6 @@ export default {
         headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
       },
       chairKeys: ['none', 'black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
-      specialShirtKeys,
-      items: [
-        {
-          id: 'size',
-          label: this.$t('size'),
-        },
-        {
-          id: 'shirt',
-          label: this.$t('shirt'),
-        },
-      ],
     };
   },
   computed: {
@@ -167,6 +154,7 @@ export default {
       ];
       const noneOption = this.createGearItem(0, 'eyewear', 'base');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -184,24 +172,17 @@ export default {
 
           return this.equip(newKey, type);
         };
+        option.text = this.$t(`eyewearSpecial${upperFirst(key)}Text`);
         options.push(option);
       }
 
       return options;
     },
-    freeShirts () {
-      return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
-    },
-    specialShirts () {
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      const keys = this.specialShirtKeys;
-      const options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
-      return options;
-    },
     headbands () {
       const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
       const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -213,7 +194,7 @@ export default {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
           return this.equip(newKey, type);
         };
-
+        option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
         options.push(option);
       }
 
@@ -229,6 +210,7 @@ export default {
         option.active = this.user.preferences.chair === key;
         option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
         option.click = () => this.set({ 'preferences.chair': key });
+        option.text = appearance.chair[key].text();
         return option;
       });
       return options;
@@ -244,6 +226,7 @@ export default {
         option.active = this.user.preferences.hair.flower === key;
         option.class = `icon_hair_flower_${key} flower`;
         option.click = () => this.set({ 'preferences.hair.flower': key });
+        option.text = appearance.hair.flower[key].text();
         return option;
       });
       return options;
@@ -271,6 +254,7 @@ export default {
 
       const noneOption = this.createGearItem(0, category, 'base', category);
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -284,9 +268,13 @@ export default {
           option.active = this.user.preferences.costume
             ? this.user.items.gear.costume[category] === newKey
             : this.user.items.gear.equipped[category] === newKey;
-          option.class = `headAccessory_special_${option.key} ${category}`;
+
           if (category === 'back') {
+            option.text = this.$t(`back${upperFirst(key)}Text`);
             option.class = `icon_back_special_${option.key} back`;
+          } else {
+            option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
+            option.class = `headAccessory_special_${option.key} ${category}`;
           }
           option.click = () => {
             const type = this.user.preferences.costume ? 'costume' : 'equipped';

website/client/src/mixins/avatarEditUtilities.js

@@ -5,6 +5,7 @@ import unlock from '@/../../common/script/ops/unlock';
 import buy from '@/../../common/script/ops/buy/buy';
 
 import appearanceSets from '@/../../common/script/content/appearance/sets';
+import appearances from '@/../../common/script/content/appearance';
 import { getScheduleMatchingGroup } from '@/../../common/script/content/constants/schedule';
 
 import { userStateMixin } from './userState';
@@ -33,6 +34,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
       option.active = userPreference === key;
       option.class = this.createClass(type, subType, key);
       option.click = optionParam => (option.gemLocked ? this.unlock(`${optionParam.pathKey}.${key}`) : this.set({ [`preferences.${optionParam.pathKey}`]: optionParam.key }));
+      option.text = subType ? appearances[type][subType][key].text()
+        : appearances[type][key].text();
+
       return option;
     },
     mapKeysToOption (key, type, subType, set) {

website/common/locales/en/customizations.json

@@ -3,25 +3,35 @@
   "2b43f6": "Blue",
   "6bd049": "Green",
   "800ed0": "Purple",
-  "98461a": "Skin Tone 6",
   "915533": "Skin Tone 1",
+  "98461a": "Skin Tone 6",
+  "allCustomizationsOwned": "You own all of these items. You can try them on by <a href=''>customizing your avatar</a>.",
+  "allEquipmentOwned": "You own all of these items. You can find them in your <a href='/inventory/equipment'>Equipment</a>. Be sure to check back later for next month's options!",
   "aurora": "Aurora",
   "bear": "Bear",
   "black": "Black",
   "blond": "Blond",
   "blue": "Blue",
+  "blueEarrings": "Blue Earrings",
+  "blueFlower": "Blue Flower",
+  "blunt": "Blunt",
   "braid": "Braid",
+  "broad": "Broad",
   "brown": "Brown",
   "c06534": "Skin Tone 5",
   "c3e1dc": "Cyan",
   "cactus": "Cactus",
   "candycane": "Candy Cane",
   "candycorn": "Candy Corn",
+  "checkNextMonth": "Be sure to check back later for next month's options!",
+  "checkNextSeason": "Be sure to check back later for next season's options!",
   "clownfish": "Clownfish",
   "convict": "Referee",
   "cross": "Cross",
+  "curly": "Curly",
   "curlyLong": "Curly Long",
   "curlyShort": "Curly Short",
+  "customizationsNPC": "Felicitus Fennec",
   "d7a9f7": "Lavender",
   "dapper": "Dapper",
   "ddc994": "Skin Tone 2",
@@ -43,18 +53,31 @@
   "ghost": "Ghost",
   "ghostwhite": "Ghost White",
   "goatee": "Goatee",
+  "goldEarringLeft": "Gold Earring Left",
+  "goldEarringRight": "Gold Earring Right",
+  "goldEarrings": "Gold Earrings",
   "green": "Green",
+  "greenEarrings": "Green Earrings",
+  "greenFlower": "Green Flower",
   "halloween": "Halloween",
+  "handleless_black": "Black Handleless",
+  "handleless_blue": "Blue Handleless",
+  "handleless_green": "Green Handleless",
+  "handleless_pink": "Pink Handleless",
+  "handleless_red": "Red Handleless",
+  "handleless_yellow": "Yellow Handleless",
   "highPonytailLeft": "High Ponytail Left",
   "highPonytailRight": "High Ponytail Right",
   "holly": "Holly",
   "hollygreen": "Holly Green",
+  "hoopEarrings": "Hoop Earrings",
   "horizon": "Horizon",
   "largeMustache": "Large Mustache",
   "lava": "Lava",
   "leftBun": "Left Bun",
   "lion": "Lion",
   "longBeard": "Long Beard",
+  "lookingForMore": "Looking for more?",
   "merblue": "Merblue",
   "mergold": "Mergold",
   "mergreen": "Mergreen",
@@ -63,8 +86,10 @@
   "midnight": "Midnight",
   "mohawk": "Mohawk",
   "monster": "Monster",
+  "noItemsOwned": "You don't own any of these items",
   "ocean": "Ocean",
   "ogre": "Ogre",
+  "orangeFlower": "Orange Flower",
   "orchid": "Orchid",
   "panda": "Panda",
   "pastelBlue": "Pastel Blue",
@@ -81,6 +106,9 @@
   "pgreen": "Special Pastel Green",
   "pgreen2": "Pastel Green",
   "pig": "Pig",
+  "pink": "Pink",
+  "pinkEarrings": "Pink Earrings",
+  "pinkFlower": "Pink Flower",
   "polar": "Polar",
   "ponytail": "Ponytail",
   "porange": "Special Pastel Orange",
@@ -92,11 +120,14 @@
   "pumpkin": "Pumpkin",
   "pumpkin2": "Jack O' Lantern",
   "purple": "Purple",
+  "purpleEarrings": "Purple Earrings",
+  "purpleFlower": "Purple Flower",
   "pyellow": "Special Pastel Yellow",
   "pyellow2": "Pastel Yellow",
   "rainbow": "Rainbow",
   "red": "Red",
   "redblue": "Red and Blue",
+  "redEarrings": "Red Earrings",
   "reptile": "Reptile",
   "rightBun": "Right Bun",
   "sandnsea": "Sand 'n' Sea",
@@ -105,8 +136,10 @@
   "shadow2": "Shade",
   "shark": "Shark",
   "shortBeard": "Short Beard",
+  "sideswept": "Sideswept",
   "skeleton": "Skeleton",
   "skeleton2": "Bones",
+  "slim": "Slim",
   "smallMustache": "Small Mustache",
   "snowy": "Snowy",
   "straightLong": "Straight Long",
@@ -121,21 +154,17 @@
   "tropicalwater": "Tropical Water",
   "TRUred": "Crimson",
   "updo": "Updo",
+  "visitCustomizationsShop": "Head over to the <a href='/shops/customizations'>Customizations Shop</a> to browse the many ways you can customize your avatar!",
   "wavyLong": "Wavy Long",
   "wavyShort": "Wavy Short",
   "white": "White",
+  "whiteEarrings": "White Earrings",
   "winternight": "Winter Night",
   "winterstar": "Winter Star",
+  "wispy": "Wispy",
   "wolf": "Wolf",
   "yellow": "Yellow",
+  "yellowFlower": "Yellow Flower",
   "zombie": "Zombie",
-  "zombie2": "Undead",
+  "zombie2": "Undead"
-  "allCustomizationsOwned": "You own all of these items. You can try them on by <a href=''>customizing your avatar</a>.",
-  "checkNextMonth": "Be sure to check back later for next month's options!",
-  "checkNextSeason": "Be sure to check back later for next season's options!",
-  "noItemsOwned": "You don't own any of these items",
-  "visitCustomizationsShop": "Head over to the <a href='/shops/customizations'>Customizations Shop</a> to browse the many ways you can customize your avatar!",
-  "lookingForMore": "Looking for more?",
-  "allEquipmentOwned": "You own all of these items. You can find them in your <a href='/inventory/equipment'>Equipment</a>. Be sure to check back later for next month's options!",
-  "customizationsNPC": "Felicitus Fennec"
 }

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

@@ -1,9 +1,10 @@
 import prefill from '../prefill';
+import t from '../../translation';
 
 export default prefill({
-  0: {},
+  0: { text: t('none') },
-  1: {},
+  1: { text: t('sideswept') },
-  2: {},
+  2: { text: t('blunt') },
-  3: {},
+  3: { text: t('wispy') },
-  4: {},
+  4: { text: t('curly') },
 });

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

@@ -3,7 +3,7 @@ import sets from '../sets';
 import t from '../../translation';
 
 export default prefill({
-  0: {},
+  0: { text: t('none') },
   1: { text: t('ponytail') },
   2: { text: t('doublePonytail'), price: 2, set: sets.baseHair1 },
   3: { text: t('braid') },

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

@@ -3,7 +3,7 @@ import sets from '../sets';
 import t from '../../translation';
 
 export default prefill({
-  0: {},
+  0: { text: t('none') },
   1: { text: t('goatee'), price: 2, set: sets.facialHair },
   2: { text: t('shortBeard'), price: 2, set: sets.facialHair },
   3: { text: t('longBeard'), price: 2, set: sets.facialHair },

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

@@ -1,21 +1,22 @@
 import prefill from '../prefill';
+import t from '../../translation';
 
 export default prefill({
-  0: {},
+  0: { text: t('none') },
-  1: {},
+  1: { text: t('blueFlower') },
-  2: {},
+  2: { text: t('greenFlower') },
-  3: {},
+  3: { text: t('pinkFlower') },
-  4: {},
+  4: { text: t('purpleFlower') },
-  5: {},
+  5: { text: t('orangeFlower') },
-  6: {},
+  6: { text: t('yellowFlower') },
-  7: {},
+  7: { text: t('hoopEarrings') },
-  8: {},
+  8: { text: t('goldEarringLeft') },
-  9: {},
+  9: { text: t('goldEarringRight') },
-  10: {},
+  10: { text: t('goldEarrings') },
-  11: {},
+  11: { text: t('whiteEarrings') },
-  12: {},
+  12: { text: t('blueEarrings') },
-  13: {},
+  13: { text: t('greenEarrings') },
-  14: {},
+  14: { text: t('redEarrings') },
-  15: {},
+  15: { text: t('pinkEarrings') },
-  16: {},
+  16: { text: t('purpleEarrings') },
 });

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

@@ -3,7 +3,7 @@ import sets from '../sets';
 import t from '../../translation';
 
 export default prefill({
-  0: {},
+  0: { text: t('none') },
   1: { text: t('smallMustache'), price: 2, set: sets.facialHair },
   2: { text: t('largeMustache'), price: 2, set: sets.facialHair },
 });