refactor animal methods / vue methods

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/index.vue

@@ -87,13 +87,12 @@
           petItem(
             :item="item",
             :popoverPosition="'top'",
-            :progress="item.progress",
             :showPopover="currentDraggingFood == null",
             :highlightBorder="highlightPet == item.key",
             @click="petClicked(item)"
           )
             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') }}
@@ -113,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)"
           )
@@ -125,7 +124,7 @@
             template(slot="itemBadge", slot-scope="context")
               starBadge(
                 :selected="item.key === currentMount",
-                :show="item.isOwned()",
+                :show="isOwned('mount', item)",
                 @click="selectMount(item)",
               )
 
@@ -346,7 +345,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';
 
@@ -355,6 +354,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';
@@ -570,10 +570,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();
@@ -602,7 +602,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) {
@@ -639,18 +638,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);
@@ -739,6 +729,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,14 +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.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="item.isAllowedToFeed() && progress > 0")
+      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 }}
 
@@ -72,6 +72,8 @@ div
 
 <script>
   import uuid from 'uuid';
+  import { mapState } from 'client/libs/store';
+  import {isAllowedToFeed, isHatchable, isOwned} from '../../../libs/createAnimal';
 
   export default {
     props: {
@@ -81,10 +83,6 @@ div
       label: {
         type: String,
       },
-      progress: {
-        type: Number,
-        default: -1,
-      },
       highlightBorder: {
         type: Boolean,
         default: false,
@@ -107,16 +105,14 @@ div
       click () {
         this.$emit('click', {});
       },
-    },
-    computed: {
-      potionClass () {
-        return `Pet_HatchingPotion_${this.item.potionKey}`;
+      isOwned () {
+        return isOwned('pet', this.item, this.userItems);
       },
-      eggClass () {
-        return `Pet_Egg_${this.item.eggKey}`;
+      isAllowedToFeed () {
+        return isAllowedToFeed(this.item, this.userItems);
       },
       getPetItemClass () {
-        if (this.item.isOwned() || this.mountOwned && this.isHatchable) {
+        if (this.isOwned() || this.mountOwned && this.isHatchable) {
           return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
@@ -131,14 +127,25 @@ div
         // 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 this.item.isHatchable();
+        return isHatchable(this.item, this.userItems);
       },
       mountOwned () {
-        return this.item.mountOwned();
+        return isOwned('mount', this.item, this.userItems);
       },
-      emptyItem () {
-        return !this.item.isOwned();
+      progress () {
+        return this.userItems.pets[this.item.key];
       },
     },
   };

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);
     },
   };
 }