Merge branch 'develop' into sabrecat/usernames-master

website/client/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,114 +1,120 @@
 .achievement-costumeContest6x {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1013px -819px;
+  background-position: -958px -455px;
   width: 144px;
   height: 156px;
 }
 .promo_alligator {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px 0px;
+  background-position: -477px 0px;
   width: 480px;
   height: 360px;
 }
 .promo_animal_tails {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1013px -208px;
+  background-position: -1325px -422px;
   width: 141px;
   height: 441px;
 }
 .promo_armoire_backgrounds_201810 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -1157px;
+  background-position: 0px -1147px;
   width: 423px;
   height: 147px;
 }
 .promo_fall_avatar_customizations {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1013px 0px;
+  background-position: -1325px -214px;
   width: 336px;
   height: 207px;
 }
 .promo_fall_festival_2017 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -481px -453px;
+  background-position: 0px -936px;
   width: 414px;
   height: 210px;
 }
 .promo_fall_festival_2018 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -367px -723px;
+  background-position: -1325px 0px;
   width: 393px;
   height: 213px;
 }
 .promo_forest_friends_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -1009px;
+  background-position: -415px -936px;
   width: 423px;
   height: 147px;
 }
 .promo_ghost_potions {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -848px -1009px;
+  background-position: -839px -936px;
   width: 423px;
   height: 147px;
 }
 .promo_ios {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -361px;
+  background-position: 0px -365px;
   width: 375px;
   height: 361px;
 }
 .promo_jackolanterns {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -1009px;
+  background-position: -513px -727px;
   width: 423px;
   height: 147px;
 }
 .promo_mystery_201810 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1013px -650px;
+  background-position: -958px -286px;
   width: 294px;
   height: 168px;
 }
+.promo_seaserpent {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px 0px;
+  width: 476px;
+  height: 364px;
+}
 .promo_seasonal_shop {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1155px -503px;
+  background-position: -1467px -717px;
   width: 162px;
   height: 138px;
 }
 .promo_spooky_sparkles {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1155px -208px;
+  background-position: -1467px -422px;
   width: 140px;
   height: 294px;
 }
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1158px -819px;
+  background-position: -1608px -422px;
   width: 96px;
   height: 69px;
 }
 .promo_veteran_pets {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -1157px;
+  background-position: -1325px -864px;
   width: 363px;
   height: 141px;
 }
 .scene_nametag {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -481px -244px;
+  background-position: 0px -727px;
   width: 512px;
   height: 208px;
 }
 .scene_positivity {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -481px 0px;
+  background-position: -376px -365px;
   width: 531px;
   height: 243px;
 }
 .scene_tools {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -723px;
+  background-position: -958px 0px;
   width: 366px;
   height: 285px;
 }

website/client/assets/scss/variables.scss

@@ -2,8 +2,8 @@
 // possible values are: normal, fall, habitoween, thanksgiving, winter, nye, birthday, valentines, spring, summer
 // more to be added on future seasons
 
-$npc_market_flavor: 'habitoween';
-$npc_quests_flavor: 'habitoween';
-$npc_seasonal_flavor: 'habitoween';
-$npc_timetravelers_flavor: 'fall';
-$npc_tavern_flavor: 'habitoween';
+$npc_market_flavor: 'normal';
+$npc_quests_flavor: 'normal';
+$npc_seasonal_flavor: 'normal';
+$npc_timetravelers_flavor: 'normal';
+$npc_tavern_flavor: 'normal';

website/client/components/inventory/items/index.vue

@@ -207,7 +207,7 @@ import startQuestModal from '../../groups/startQuestModal';
 import QuestInfo from '../../shops/quests/questInfo.vue';
 
 import { mapState } from 'client/libs/store';
-import createAnimal from 'client/libs/createAnimal';
+import { createAnimal } from 'client/libs/createAnimal';
 
 import notifications from 'client/mixins/notifications';
 import DragDropDirective from 'client/directives/dragdrop.directive';

website/client/components/inventory/stable/hatchingModal.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-b-modal#hatching-modal(@change="resetHatchablePet($event)")
+b-modal#hatching-modal()
   div.content(v-if="hatchablePet")
     div.potionEggGroup
       div.potionEggBackground
@@ -73,12 +73,5 @@ export default {
       }),
     };
   },
-  methods: {
-    resetHatchablePet ($event) {
-      if (!$event) {
-        this.hatchablePet = null;
-      }
-    },
-  },
 };
 </script>

website/client/components/inventory/stable/index.vue

@@ -86,27 +86,13 @@
         )
           petItem(
             :item="item",
-            :itemContentClass="getPetItemClass(item)",
             :popoverPosition="'top'",
-            :progress="item.progress",
-            :emptyItem="!item.isOwned()",
             :showPopover="currentDraggingFood == null",
             :highlightBorder="highlightPet == item.key",
             @click="petClicked(item)"
           )
-            span(slot="popoverContent")
-              div.hatchablePopover(v-if="item.isHatchable()")
-                h4.popover-content-title {{ item.name }}
-                div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
-                div.potionEggGroup
-                  div.potionEggBackground
-                    div(:class="'Pet_HatchingPotion_'+item.potionKey")
-                  div.potionEggBackground
-                    div(:class="'Pet_Egg_'+item.eggKey")
-              div(v-else)
-                h4.popover-content-title {{ item.name }}
             template(slot="itemBadge", slot-scope="context")
-              starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
+              starBadge(:selected="item.key === currentPet", :show="isOwned('pet', item)", @click="selectPet(item)")
 
       .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
         | {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
@@ -126,10 +112,10 @@
         .pet-group(v-for='item in group')
           mountItem(
             :item="item",
-            :itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
+            :itemContentClass="isOwned('mount', item) ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
             :key="item.key",
             :popoverPosition="'top'",
-            :emptyItem="!item.isOwned()",
+            :emptyItem="!isOwned('mount', item)",
             :showPopover="true",
             @click="selectMount(item)"
           )
@@ -138,7 +124,7 @@
             template(slot="itemBadge", slot-scope="context")
               starBadge(
                 :selected="item.key === currentMount",
-                :show="item.isOwned()",
+                :show="isOwned('mount', item)",
                 @click="selectMount(item)",
               )
 
@@ -335,7 +321,6 @@
   import _each from 'lodash/each';
   import _sortBy from 'lodash/sortBy';
   import _filter from 'lodash/filter';
-  import _flatMap from 'lodash/flatMap';
   import _throttle from 'lodash/throttle';
   import groupBy from 'lodash/groupBy';
 
@@ -359,7 +344,7 @@
   import DragDropDirective from 'client/directives/dragdrop.directive';
   import MouseMoveDirective from 'client/directives/mouseposition.directive';
 
-  import createAnimal from 'client/libs/createAnimal';
+  import { createAnimal } from 'client/libs/createAnimal';
 
   import svgInformation from 'assets/svg/information.svg';
 
@@ -368,6 +353,7 @@
   import petMixin from 'client/mixins/petMixin';
 
   import { CONSTANTS, setLocalSetting, getLocalSetting } from 'client/libs/userlocalManager';
+  import {isOwned} from '../../../libs/createAnimal';
 
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
@@ -583,10 +569,10 @@
                 potionKey,
                 name: this.content[`${type}Info`][specialKey].text(),
                 isOwned ()  {
-                  return userItems[`${type}s`][this.key] > 0;
+                  return isOwned(type, this, userItems);
                 },
                 mountOwned () {
-                  return userItems.mounts[this.key] > 0;
+                  return isOwned('mount', this, userItems);
                 },
                 isAllowedToFeed () {
                   return type === 'pet' && this.isOwned() && !this.mountOwned();
@@ -615,7 +601,6 @@
       listAnimals (animalGroup, type, hideMissing, sort, searchText) {
         let animals = this.getAnimalList(animalGroup, type);
         let isPetList = type === 'pet';
-        let withProgress = isPetList && animalGroup.key !== 'specialPets';
 
         // 1. Filter
         if (hideMissing) {
@@ -652,18 +637,9 @@
           }
         }
 
-        let animalRows = withProgress ? _flatMap(animals, (a) => {
-          let progress = this.userItems[`${type}s`][a.key];
-
-          return {
-            ...a,
-            progress,
-          };
-        }) : animals;
-
         this.viewOptions[animalGroup.key].animalCount = animals.length;
 
-        return animalRows;
+        return animals;
       },
       countOwnedAnimals (animalGroup, type) {
         let animals = this.getAnimalList(animalGroup, type);
@@ -710,21 +686,6 @@
 
         return groupBy(mounts, groupKey);
       },
-      getPetItemClass (pet) {
-        if (pet.isOwned()) {
-          return `Pet Pet-${pet.key} ${pet.eggKey}`;
-        }
-
-        if (pet.isHatchable()) {
-          return 'PixelPaw';
-        }
-
-        if (pet.mountOwned()) {
-          return `GreyedOut Pet Pet-${pet.key} ${pet.eggKey}`;
-        }
-
-        return 'GreyedOut PixelPaw';
-      },
       hasDrawerTabItems (index) {
         return this.drawerTabs && this.drawerTabs[index].items.length !== 0;
       },
@@ -767,6 +728,9 @@
       onDragLeave () {
         this.highlightPet = '';
       },
+      isOwned (type, pet) {
+        return isOwned(type, pet, this.userItems);
+      },
       petClicked (pet) {
         if (this.currentDraggingFood !== null) {
           if (pet.isAllowedToFeed()) {

website/client/components/inventory/stable/petItem.vue

@@ -2,11 +2,14 @@
 div
   .item-wrapper(@click="click()", :id="itemId")
     .item.pet-slot(
-      :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
+      :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemContentClass")
-      span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
+      span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
+        span.egg(:class="eggClass")
+        span.potion(:class="potionClass")
+      span.item-content(v-else, :class="getPetItemClass()")
+      span.pet-progress-background(v-if="isAllowedToFeed() && progress > 0")
         div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
     span.item-label(v-if="label") {{ label }}
 
@@ -15,7 +18,17 @@ div
     :triggers="showPopover ? 'hover' : ''",
     :placement="popoverPosition",
   )
-    slot(name="popoverContent", :item="item")
+    div.hatchablePopover(v-if="item.isHatchable()")
+      h4.popover-content-title {{ item.name }}
+      div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
+      div.potionEggGroup
+        div.potionEggBackground
+          div(:class="potionClass")
+        div.potionEggBackground
+          div(:class="eggClass")
+    div(v-else)
+      h4.popover-content-title {{ item.name }}
+
 </template>
 
 <style lang="scss">
@@ -32,30 +45,44 @@ div
     height: 4px;
     background-color: #24cc8f;
   }
+
+  .hatchAgain {
+    display: inline-flex;
+    align-items: center;
+
+    width: 94px;
+    height: 94px;
+
+    .egg {
+      position: absolute;
+      left: 4px;
+      top: 14px;
+      z-index: 1;
+      transform: scale(1.2);
+    }
+
+    .potion {
+      position: absolute;
+      right: 4px;
+      top: 14px;
+      transform: scale(1.2);
+    }
+  }
 </style>
 
 <script>
   import uuid from 'uuid';
+  import { mapState } from 'client/libs/store';
+  import {isAllowedToFeed, isHatchable, isOwned} from '../../../libs/createAnimal';
 
   export default {
     props: {
       item: {
         type: Object,
       },
-      itemContentClass: {
-        type: String,
-      },
       label: {
         type: String,
       },
-      progress: {
-        type: Number,
-        default: -1,
-      },
-      emptyItem: {
-        type: Boolean,
-        default: false,
-      },
       highlightBorder: {
         type: Boolean,
         default: false,
@@ -78,6 +105,48 @@ div
       click () {
         this.$emit('click', {});
       },
+      isOwned () {
+        return isOwned('pet', this.item, this.userItems);
+      },
+      isAllowedToFeed () {
+        return isAllowedToFeed(this.item, this.userItems);
+      },
+      getPetItemClass () {
+        if (this.isOwned() || this.mountOwned && this.isHatchable) {
+          return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        }
+
+        if (this.isHatchable) {
+          return 'PixelPaw';
+        }
+
+        if (this.mountOwned) {
+          return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        }
+
+        // Can't hatch
+        return 'GreyedOut PixelPaw';
+      },
+    },
+    computed: {
+      ...mapState({
+        userItems: 'user.data.items',
+      }),
+      potionClass () {
+        return `Pet_HatchingPotion_${this.item.potionKey}`;
+      },
+      eggClass () {
+        return `Pet_Egg_${this.item.eggKey}`;
+      },
+      isHatchable () {
+        return isHatchable(this.item, this.userItems);
+      },
+      mountOwned () {
+        return isOwned('mount', this.item, this.userItems);
+      },
+      progress () {
+        return this.userItems.pets[this.item.key];
+      },
     },
   };
 </script>

website/client/components/settings/notifications.vue

@@ -62,6 +62,7 @@ export default {
       ]),
       // list of email-only notifications
       onlyEmailsIds: Object.freeze([
+        'kickedGroup',
         'importantAnnouncements',
         'weeklyRecaps',
         'onboarding',

website/client/components/shops/seasonal/index.vue

@@ -7,13 +7,13 @@
       .form
         h2(v-once) {{ $t('filter') }}
         .form-group
-          .form-check(
+          checkbox(
             v-for="category in filterCategories",
             :key="category.key",
+            :id="`category-${category.key}`",
+            :checked.sync="viewOptions[category.key].selected",
+            :text="category.value"
           )
-            .custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="viewOptions[category.key].selected", :id="`category-${category.identifier}`")
-              label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.value }}
 
         div.form-group.clearfix
           h3.float-left(v-once) {{ $t('hidePinned') }}
@@ -290,6 +290,7 @@
   import Item from 'client/components/inventory/item';
   import CountBadge from 'client/components/ui/countBadge';
   import ItemRows from 'client/components/ui/itemRows';
+  import Checkbox from 'client/components/ui/checkbox';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import Avatar from 'client/components/avatar';
   import buyMixin from 'client/mixins/buy';
@@ -326,6 +327,7 @@
       CountBadge,
       ItemRows,
       toggleSwitch,
+      Checkbox,
 
       Avatar,
     },

website/client/libs/createAnimal.js

@@ -7,8 +7,21 @@ function getText (textOrFunction) {
   }
 }
 
+export function isOwned (type, animal, userItems) {
+  return userItems[`${type}s`][animal.key] > 0;
+}
 
-export default function createAnimal (egg, potion, type, content, userItems) {
+export function isHatchable (animal, userItems) {
+  return !isOwned('pet', animal, userItems) &&
+    userItems.eggs[animal.eggKey] &&
+    userItems.hatchingPotions[animal.potionKey];
+}
+
+export function isAllowedToFeed (animal, userItems) {
+  return isOwned('pet', animal, userItems) && !isOwned('mount', animal, userItems);
+}
+
+export function createAnimal (egg, potion, type, content, userItems) {
   let animalKey = `${egg.key}-${potion.key}`;
 
   return {
@@ -20,16 +33,16 @@ export default function createAnimal (egg, potion, type, content, userItems) {
     potionName: getText(potion.text),
     name: content[`${type}Info`][animalKey].text(),
     isOwned () {
-      return userItems[`${type}s`][animalKey] > 0;
+      return isOwned(type, this, userItems);
     },
     mountOwned () {
-      return userItems.mounts[this.key] > 0;
+      return isOwned('mount', this, userItems);
     },
     isAllowedToFeed () {
-      return type === 'pet' && this.isOwned() && !this.mountOwned();
+      return isAllowedToFeed(this, userItems);
     },
     isHatchable () {
-      return !this.isOwned() & userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
+      return isHatchable(this, userItems);
     },
   };
 }

website/client/mixins/petMixin.js

@@ -1,4 +1,7 @@
+import notifications from './notifications';
+
 export default {
+  mixins: [notifications],
   methods: {
     closeHatchPetDialog () {
       this.$root.$emit('bv::hide::modal', 'hatching-modal');