WIP(shops): fixes and Hall of Heroes update

website/client/src/assets/scss/item.scss

@@ -30,28 +30,6 @@
   margin-bottom: 8px;
 }
 
-.item.pet-slot {
-  // Desktop XL (1440)
-  @media only screen and (min-width: 1440px){
-    margin-right: 1.71em;
-  }
-
-  // Desktop L (1280)
-  @media only screen and (min-width: 1280px) and (max-width: 1439px) {
-    margin-right: 0.43em;
-  }
-
-  // Desktop M (1024)
-  @media only screen and (min-width: 1024px) and (max-width: 1279px) {
-    margin-right: 0.86em;
-  }
-
-  // Tablets and mobile
-  @media only screen and (max-width: 1023px) {
-    margin-right: 1.71em;
-  }
-}
-
 .item {
   position: relative;
   width: 94px;

website/client/src/assets/scss/shops.scss

@@ -83,7 +83,7 @@
         position: absolute;
         bottom: -14px;
         margin: 0;
-        left: 78px;
+        left: 79px;
       }
     }
   }

website/client/src/components/admin-panel/user-support/itemsOwned.vue

@@ -282,20 +282,16 @@ export default {
       item.modified = true;
 
       // for non-integer items, toggle through the allowed values:
-      if (item.itemType === 'gear') {
+      if (item.itemType === 'gear' || item.itemType === 'mounts') {
-        // Allowed starting values are true, false, and '' (never owned)
+        // Allowed starting values are true, false, and undefined (never owned)
-        // Allowed values to switch to are true and false
+        if (item.value && item.value !== '') {
-        item.value = !item.value;
+          item.value = false;
-      } else if (item.itemType === 'mounts') {
+        } else if (typeof item.value === 'boolean') {
-        // Allowed starting values are true, null, and "never owned"
+          item.value = '';
-        // Allowed values to switch to are true and null
-        if (item.value === true) {
-          item.value = null;
         } else {
           item.value = true;
         }
       }
-      // @TODO add a delete option
     },
   },
 };

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

@@ -144,7 +144,7 @@
           v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
           v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
           :key="key"
-          class="pet-row d-flex"
+          class="pet-row d-inline-flex"
         >
           <!-- eslint-enable vue/no-use-v-if-with-v-for -->
           <div
@@ -177,13 +177,13 @@
               </template>
             </petItem>
           </div>
+          <show-more-button
+            v-if="petRowCount[petGroup.key] > 1 && petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
+            :show-all="$_openedItemRows_isToggled(petGroup.key)"
+            class="show-more-button"
+            @click="setShowMore(petGroup.key)"
+          />
         </div>
-        <show-more-button
-          v-if="petRowCount[petGroup.key] > 1 && petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
-          :show-all="$_openedItemRows_isToggled(petGroup.key)"
-          class="show-more-button"
-          @click="setShowMore(petGroup.key)"
-        />
       </div>
       <h2>
         {{ $t('mounts') }}
@@ -309,15 +309,6 @@
     height: 130px;
     overflow: hidden;
   }
-
-  .pet-row {
-    max-width: 100%;
-    flex-wrap: wrap;
-
-    .item {
-      margin-right: .5em;
-    }
-  }
 </style>
 
 <style lang="scss">
@@ -330,6 +321,15 @@
     display: inline-block;
   }
 
+  .pet-row {
+    max-width: 100%;
+    flex-wrap: wrap;
+
+    .item-wrapper {
+      margin-right: 24px;
+    }
+  }
+
   .GreyedOut {
     opacity: 0.3;
   }

website/client/src/components/shops/market/index.vue

@@ -138,7 +138,7 @@
           position: absolute;
           bottom: -14px;
           margin: 0;
-          left: 80px;
+          left: 75px;
         }
       }
     }

website/client/src/components/shops/quests/index.vue

@@ -389,7 +389,7 @@
           position: absolute;
           bottom: -14px;
           margin: 0;
-          left: 70px;
+          left: 62px;
         }
       }
     }

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

@@ -305,7 +305,7 @@
           position: absolute;
           bottom: -14px;
           margin: 0;
-          left: 60px;
+          left: 32px;
         }
       }
 

website/common/script/libs/getItemInfo.js

@@ -379,7 +379,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
     case 'haircolor': {
       itemInfo = {
         key: item.key,
-        class: `icon_color_hair_bangs_${user.preferences.hair.bangs || 1}_${item.key}`,
+        class: `icon_hair_bangs_${user.preferences.hair.bangs || 1}_${item.key}`,
         currency: 'gems',
         locked: false,
         notes: '',

website/server/controllers/api-v3/hall.js

@@ -383,7 +383,7 @@ api.updateHero = {
       hero.items.pets['Dragon-Hydra'] = 5;
       hero.markModified('items.pets');
     }
-    if (updateData.itemPath && updateData.itemVal && validateItemPath(updateData.itemPath)) {
+    if (updateData.itemPath && (updateData.itemVal || updateData.itemVal === '') && validateItemPath(updateData.itemPath)) {
       // Sanitization at 5c30944 (deemed unnecessary)
       _.set(hero, updateData.itemPath, castItemVal(updateData.itemPath, updateData.itemVal));
       hero.markModified('items');

website/server/libs/items/utils.js

@@ -88,7 +88,8 @@ export function castItemVal (itemPath, itemVal) {
   if (itemPath.indexOf('items.mounts') === 0) {
     // Mounts are true when you own them and null when you have used Keys to the Kennel
     // to release them.
-    // They are never false but allow 'false' to be null in case of user error.
+    // Empty string or undefined means "unset" i.e. never owned.
+    if (['', 'undefined'].includes(itemVal)) return undefined;
     if (itemVal === 'null' || itemVal === 'false') return null;
     if (itemVal) return true; // any truthy value
     return null; // any false value
@@ -96,8 +97,8 @@ export function castItemVal (itemPath, itemVal) {
 
   if (itemPath.indexOf('items.gear.owned') === 0) {
     // Gear is true when you own it and false if you previously owned it but lost it (e.g., Death)
-    // It is never null but allow 'null' to be false in case of user error.
+    // Null, empty string, or undefined are taken to mean "unset" i.e. never owned.
-    if (itemVal === 'false' || itemVal === 'null') return false;
+    if (['null', '', 'undefined'].includes(itemVal)) return undefined;
     return Boolean(itemVal);
   }