From 53c610236b483a5d296ef4db274b637f0b783026 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Sat, 1 Jul 2017 17:46:24 +0200
Subject: [PATCH] Client/stable fixes - part 1 (#8840)

* fixes: show ten pets in a row - show pet / no feeding progress if mount already owned

* fixes: disabled filter instead of hiding them

* fixes: don't hide special pets - same item style for mounts

* fixes: avatar changes of pet / mount

* fixes: unfocus first dropdown-item by css

* fixes: unfocus first dropdown-item by css (remove :focus style)- added "What does my pet like to eat?" popover
---
 website/client/assets/scss/dropdown.scss      |  3 +-
 website/client/components/avatar.vue          |  6 +-
 .../components/inventory/stable/index.vue     | 91 +++++++++++++++----
 .../components/inventory/stable/mountItem.vue | 45 +++++++++
 .../components/inventory/stable/petItem.vue   |  8 +-
 website/common/locales/en/newClient.json      |  7 +-
 6 files changed, 129 insertions(+), 31 deletions(-)
 create mode 100644 website/client/components/inventory/stable/mountItem.vue

diff --git a/website/client/assets/scss/dropdown.scss b/website/client/assets/scss/dropdown.scss
index 5e267b6391..4fa36b5473 100644
--- a/website/client/assets/scss/dropdown.scss
+++ b/website/client/assets/scss/dropdown.scss
@@ -38,9 +38,10 @@
 
   &:focus {
     outline: none;
+    background-color: inherit;
   }
 
-  &:active, &:hover, &:focus, &.active {
+  &:active, &:hover, &.active {
     background-color: rgba(#d5c8ff, 0.32);
     color: $purple-200;
   }
diff --git a/website/client/components/avatar.vue b/website/client/components/avatar.vue
index ce5ff5c483..a7baa9bec7 100644
--- a/website/client/components/avatar.vue
+++ b/website/client/components/avatar.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
   .character-sprites
-    template(v-if="!avatarOnly" v-once)
+    template(v-if="!avatarOnly")
       // Mount Body
       span(v-if="member.items.currentMount", :class="'Mount_Body_' + member.items.currentMount")
 
@@ -35,7 +35,7 @@
     // Resting
     span.zzz(v-if="member.preferences.sleep")
 
-    template(v-if="!avatarOnly" v-once)
+    template(v-if="!avatarOnly")
       // Mount Head
       span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
       // Pet
@@ -168,4 +168,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index fc9743d064..26250e1010 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -21,22 +21,28 @@
         .form-group
           .form-check(
             v-for="petGroup in petGroups",
-            v-if="viewOptions[petGroup.key].animalCount != 0",
             :key="petGroup.key"
           )
             label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="viewOptions[petGroup.key].selected")
+              input.custom-control-input(
+                type="checkbox",
+                v-model="viewOptions[petGroup.key].selected",
+                :disabled="viewOptions[petGroup.key].animalCount == 0"
+              )
               span.custom-control-indicator
               span.custom-control-description(v-once) {{ petGroup.label }}
         h3(v-once) {{ $t('mounts') }}
         .form-group
           .form-check(
             v-for="mountGroup in mountGroups",
-            v-if="viewOptions[mountGroup.key].animalCount != 0",
             :key="mountGroup.key"
           )
             label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="viewOptions[mountGroup.key].selected")
+              input.custom-control-input(
+                type="checkbox",
+                v-model="viewOptions[mountGroup.key].selected",
+                :disabled="viewOptions[mountGroup.key].animalCount == 0"
+              )
               span.custom-control-indicator
               span.custom-control-description(v-once) {{ mountGroup.label }}
 
@@ -81,6 +87,7 @@
             v-drag.drop.food="pet.key",
             @dragover="onDragOver($event, pet)",
             @dropped="onDrop($event, pet)",
+            :class="pet.isLastInRow ? 'last' : ''"
           )
             petItem(
               :item="pet",
@@ -128,12 +135,14 @@
         h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
 
         div.items
-          item(
+          mountItem(
             v-for="mount in mounts(mountGroup, viewOptions[mountGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
             :item="mount",
-            :itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw greyedOut'",
+            :itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw GreyedOut'",
             :key="mount.key",
-            :popoverPosition="'top'"
+            :popoverPosition="'top'",
+            :emptyItem="!mount.isOwned()",
+            :showPopover="mount.isOwned()",
           )
             span(slot="popoverContent")
               h4.popover-content-title {{ mount.name }}
@@ -168,13 +177,15 @@
                 )  {{ drawerTabs[1].label }}
 
               b-popover(
-                :triggers="['hover']",
+                :triggers="['click']",
                 :placement="'top'"
               )
                 span(slot="content")
-                  .popover-content-text Test Popover
+                  .popover-content-text(v-html="$t('petLikeToEatText')", v-once)
 
-                div.float-right What does my pet like to eat?
+                div.float-right(v-once)
+                  | {{ $t('petLikeToEat') + ' ' }}
+                  .svg-icon(v-html="icons.information")
 
 
         drawer-slider(
@@ -207,6 +218,10 @@
 
   @import '~client/assets/scss/colors.scss';
 
+  .standard-page .clearfix .float-right {
+    margin-right: 24px;
+  }
+
   .inventory-item-container {
     padding: 20px;
     border: 1px solid;
@@ -267,6 +282,7 @@
 
     .standard-page {
       flex: 1;
+      padding-right:0;
     }
 
     .drawer-container {
@@ -320,6 +336,19 @@
     background-color: $purple-50;
     opacity: 0.9;
   }
+
+  .last {
+    margin-right: 0 !important;
+  }
+
+  .no-focus:focus {
+    background-color: inherit;
+    color: inherit;
+  }
+
+  .popover-content-text {
+    margin-bottom: 0;
+  }
 </style>
 
 <script>
@@ -337,9 +366,11 @@
   import _drop from 'lodash/drop';
   import _flatMap from 'lodash/flatMap';
   import _throttle from 'lodash/throttle';
+  import _last from 'lodash/last';
 
   import Item from '../item';
   import PetItem from './petItem';
+  import MountItem from './mountItem.vue';
   import FoodItem from './foodItem';
   import Drawer from 'client/components/inventory/drawer';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
@@ -350,6 +381,8 @@
   import ResizeDirective from 'client/directives/resize.directive';
   import DragDropDirective from 'client/directives/dragdrop.directive';
 
+  import information from 'assets/svg/information.svg';
+
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
   // import deepFreeze from 'client/libs/deepFreeze';
@@ -360,6 +393,7 @@
       PetItem,
       Item,
       FoodItem,
+      MountItem,
       Drawer,
       bDropdown,
       bDropdownItem,
@@ -391,6 +425,10 @@
           'sortByHatchable',
         ],
 
+        icons: Object.freeze({
+          information,
+        }),
+
         selectedDrawerTab: 0,
         availableContentWidth: 0,
       };
@@ -443,7 +481,6 @@
             petSource: {
               special: this.content.specialPets,
             },
-            alwaysHideMissing: true,
           },
         ];
 
@@ -490,7 +527,6 @@
             petSource: {
               special: this.content.specialMounts,
             },
-            alwaysHideMissing: true,
           },
         ];
 
@@ -547,9 +583,15 @@
                 key: specialKey,
                 eggKey,
                 potionKey,
-                pet: this.content[`${type}Info`][specialKey].text(),
+                name: this.content[`${type}Info`][specialKey].text(),
                 isOwned ()  {
-                  return [`${type}s`][this.key] > 0;
+                  return userItems[`${type}s`][this.key] > 0;
+                },
+                mountOwned () {
+                  return userItems.mounts[this.key] > 0;
+                },
+                isAllowedToFeed () {
+                  return type === 'pet' && !this.mountOwned();
                 },
                 isHatchable () {
                   return false;
@@ -574,6 +616,12 @@
                   isOwned ()  {
                     return userItems[`${type}s`][animalKey] > 0;
                   },
+                  mountOwned () {
+                    return userItems.mounts[this.key] > 0;
+                  },
+                  isAllowedToFeed () {
+                    return type === 'pet' && !this.mountOwned();
+                  },
                   isHatchable () {
                     return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
                   },
@@ -594,7 +642,7 @@
         let withProgress = isPetList && animalGroup.key !== 'specialPets';
 
         // 1. Filter
-        if (hideMissing || animalGroup.alwaysHideMissing) {
+        if (hideMissing) {
           animals = _filter(animals, (a) => {
             return a.isOwned();
           });
@@ -630,7 +678,7 @@
 
         let animalRows = [];
 
-        let itemsPerRow = Math.floor(availableSpace / (94 + 24));
+        let itemsPerRow = Math.floor(availableSpace / (94 + 20));
 
         let rowsToShow = isOpen ? Math.ceil(animals.length / itemsPerRow) : 1;
 
@@ -647,6 +695,11 @@
             };
           }) : row;
 
+          let lastRowItem = _last(rowWithProgressData);
+          if (lastRowItem) {
+            lastRowItem.isLastInRow = true;
+          }
+
           animalRows.push(...rowWithProgressData);
         }
 
@@ -679,6 +732,10 @@
           return `Pet Pet-${pet.key}`;
         }
 
+        if (pet.mountOwned()) {
+          return `GreyedOut Pet Pet-${pet.key}`;
+        }
+
         if (pet.isHatchable()) {
           return 'PixelPaw';
         }
@@ -708,7 +765,7 @@
       },
 
       onDragOver (ev, pet) {
-        if (this.userItems.mounts[pet.key]) {
+        if (!pet.isAllowedToFeed()) {
           ev.dropable = false;
         }
       },
diff --git a/website/client/components/inventory/stable/mountItem.vue b/website/client/components/inventory/stable/mountItem.vue
new file mode 100644
index 0000000000..4b73e27c54
--- /dev/null
+++ b/website/client/components/inventory/stable/mountItem.vue
@@ -0,0 +1,45 @@
+<template lang="pug">
+b-popover(
+  :triggers="[showPopover?'hover':'']",
+  :placement="popoverPosition",
+)
+  span(slot="content")
+    slot(name="popoverContent", :item="item")
+
+  .item-wrapper
+    .item(
+      :class="{'item-empty': emptyItem}",
+    )
+      slot(name="itemBadge", :item="item")
+      span.item-content(:class="itemContentClass")
+</template>
+
+<script>
+  import bPopover from 'bootstrap-vue/lib/components/popover';
+
+  export default {
+    components: {
+      bPopover,
+    },
+    props: {
+      item: {
+        type: Object,
+      },
+      itemContentClass: {
+        type: String,
+      },
+      emptyItem: {
+        type: Boolean,
+        default: false,
+      },
+      popoverPosition: {
+        type: String,
+        default: 'bottom',
+      },
+      showPopover: {
+        type: Boolean,
+        default: true,
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/inventory/stable/petItem.vue b/website/client/components/inventory/stable/petItem.vue
index 9d071bf959..fcce0c7544 100644
--- a/website/client/components/inventory/stable/petItem.vue
+++ b/website/client/components/inventory/stable/petItem.vue
@@ -15,7 +15,7 @@ b-popover(
     )
       slot(name="itemBadge", :item="item")
       span.item-content(:class="itemContentClass")
-      span.pet-progress-background(v-if="progress > 0")
+      span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
         div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
       span.pet-progress-background(v-if="holdProgress > 0")
         div.pet-progress-bar.hold(v-bind:style="{width: 100 * holdProgress/5 + '%' }")
@@ -44,7 +44,6 @@ b-popover(
 
 <script>
   import bPopover from 'bootstrap-vue/lib/components/popover';
-  import {mapState} from 'client/libs/store';
 
   export default {
     components: {
@@ -82,11 +81,6 @@ b-popover(
         holdProgress: -1,
       };
     },
-    computed: {
-      ...mapState({
-        ATTRIBUTES: 'constants.ATTRIBUTES',
-      }),
-    },
     methods: {
       holdStart () {
         let pet = this.item;
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 35fe7fbb17..8cf0f08bb6 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -35,9 +35,8 @@
   "groupBy2": "Group By",
   "quantity": "Quantity",
   "AZ": "A-Z",
-  "costumeDisabled": "You have disabled your costume.",
   "filterByStandard": "Standard",
-  "filterByMagicPotion": "Magin Potion",
+  "filterByMagicPotion": "Magic Potion",
   "filterByQuest": "Quest",
   "standard": "Standard",
   "sortByColor": "Color",
@@ -127,5 +126,7 @@
   "noFoodAvailable": "You don't have any food.",
   "gotIt": "Got it!",
   "welcomeStable": "Welcome to the Stable!",
-  "welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts."
+  "welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts.",
+  "petLikeToEatText": "Pets will grow no matter what you feed them, but they'll grow faster if you feed them the one food that they like best. Experiment to find out the pattern, or see the answers here: <br/> <a href=\"http://habitica.wikia.com/wiki/Food_Preferences\" target=\"_blank\">http://habitica.wikia.com/wiki/Food_Preferences</a>",
+  "petLikeToEat": "What does my pet like to eat?"
 }