@rpg-engine/long-bow 0.8.29 → 0.8.30

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit } from 'react-icons/fa';
@@ -27518,175 +27518,6 @@ function useTouchTarget() {
   return getTouchTarget;
 }
 
-var rarityColor = function rarityColor(item) {
-  switch (item == null ? void 0 : item.rarity) {
-    case ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
-
-var gemColors = {
-  'emerald-gem': '#50C878',
-  'topaz-radiance': '#FFC87C',
-  'sapphire-gem': '#0F52BA',
-  'ruby-gem': '#E0115F',
-  'misty-quartz-gem': '#D9D9F3',
-  'coral-reef-gem': '#FF7F50',
-  'jasper-gem': '#D73B3E',
-  'earthstone-gem': '#8B4513',
-  'obsidian-gem': '#0B0C0E',
-  'amethyst-gem': '#9966CC'
-};
-var defaultColor = '#FFFFFF'; // Default color (white)
-var onRenderGems = function onRenderGems(item) {
-  var _item$attachedGems;
-  var gemQty = ((_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.length) || 0;
-  if (gemQty > 0) {
-    return React.createElement(ItemSlotQty, {
-      item: item
-    });
-  }
-  return undefined;
-};
-var ItemSlotQty = function ItemSlotQty(_ref) {
-  var _item$attachedGems2;
-  var item = _ref.item;
-  var itemId = item._id;
-  return React.createElement(ItemQtyContainer, {
-    key: "qty-" + itemId,
-    className: "item-slot-qty"
-  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
-    return React.createElement(Gem, {
-      key: itemId + "-gem-" + index,
-      color: gemColors[gem.key] || defaultColor
-    });
-  }));
-};
-var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemGem__ItemQtyContainer",
-  componentId: "sc-1ekseaq-0"
-})(["position:relative;width:85%;height:16px;top:28px;left:0px;pointer-events:none;transform:scale(0.8);display:flex;align-items:center;justify-content:flex-start;opacity:0.8;"]);
-var Gem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemGem__Gem",
-  componentId: "sc-1ekseaq-1"
-})(["width:8px;height:8px;background:", ";border:1px solid black;transform:rotate(45deg);margin:0 2px;box-shadow:0 0 5px ", ";transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:rotate(45deg) scale(1.2);box-shadow:0 0 10px ", ";}"], function (_ref2) {
-  var color = _ref2.color;
-  return "radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8), transparent 30%), \n     linear-gradient(45deg, " + color + ", " + color + " 50%, rgba(255, 255, 255, 0.2))";
-}, function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, function (_ref4) {
-  var color = _ref4.color;
-  return color;
-});
-
-var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
-  var isFractionalStackQty = stackQty % 1 !== 0;
-  var isLargerThan999 = stackQty > 999;
-  var qtyClassName = 'regular';
-  if (isLargerThan999) qtyClassName = 'small';
-  if (isFractionalStackQty) qtyClassName = 'xsmall';
-  if (stackQty > 1) {
-    return React.createElement(ItemSlotQty$1, {
-      itemId: itemId,
-      stackQty: stackQty,
-      qtyClassName: qtyClassName
-    });
-  }
-  return undefined;
-};
-var ItemSlotQty$1 = function ItemSlotQty(_ref) {
-  var itemId = _ref.itemId,
-    stackQty = _ref.stackQty,
-    qtyClassName = _ref.qtyClassName;
-  return React.createElement(ItemQtyContainer$1, {
-    key: "qty-" + itemId,
-    className: "item-slot-qty"
-  }, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "48px"
-  }, React.createElement(ItemQty, {
-    className: qtyClassName
-  }, Math.round(stackQty * 100) / 100, ' ')));
-};
-var ItemQtyContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSlotQty__ItemQtyContainer",
-  componentId: "sc-keb1s5-0"
-})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
-var ItemQty = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ItemSlotQty__ItemQty",
-  componentId: "sc-keb1s5-1"
-})(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
-
-var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
-  var containerType = _ref.containerType,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    slotSpriteMask = _ref.slotSpriteMask,
-    item = _ref.item;
-  var renderStackInfo = function renderStackInfo(item) {
-    return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
-  };
-  var renderGems = function renderGems(item) {
-    return item.attachedGems && onRenderGems(item);
-  };
-  var renderItem = function renderItem(item) {
-    if (!(item != null && item.texturePath)) {
-      return null;
-    }
-    return React.createElement(ErrorBoundary, {
-      key: item._id
-    }, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: getItemTextureKeyPath({
-        key: item.texturePath,
-        texturePath: item.texturePath,
-        stackQty: item.stackQty || 1,
-        isStackable: item.isStackable
-      }, atlasJSON),
-      imgScale: 3,
-      imgClassname: "sprite-from-atlas-img--item",
-      tintColor: item.tintColor
-    }), renderStackInfo(item), renderGems(item));
-  };
-  var renderEquipment = function renderEquipment(itemToRender) {
-    var _itemToRender$allowed;
-    if (!(itemToRender != null && itemToRender.texturePath) || !((_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask))) {
-      return React.createElement(ErrorBoundary, {
-        key: v4()
-      }, React.createElement(SpriteFromAtlas, {
-        key: v4(),
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
-        imgScale: 3,
-        grayScale: true,
-        opacity: 0.4,
-        imgClassname: "sprite-from-atlas-img--item"
-      }));
-    }
-    return renderItem(itemToRender);
-  };
-  var onRenderSlot = function onRenderSlot(itemToRender) {
-    switch (containerType) {
-      case ItemContainerType.Equipment:
-        return renderEquipment(itemToRender);
-      default:
-        return renderItem(itemToRender);
-    }
-  };
-  return React.createElement(React.Fragment, null, onRenderSlot(item));
-};
-
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -27948,6 +27779,194 @@ var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
   }, children);
 };
 
+var qualityColorHex = function qualityColorHex(item) {
+  switch (item == null ? void 0 : item.quality) {
+    case ItemQualityLevel.HighQuality:
+      return '#00bfff';
+    case ItemQualityLevel.Exceptional:
+      return '#ff8c00';
+    case ItemQualityLevel.Mastercrafted:
+      return '#ff00ff';
+    case ItemQualityLevel.Ancient:
+      return '#ffd700';
+    case ItemQualityLevel.Mythic:
+      return '#ff0080';
+    default:
+      return 'transparent';
+  }
+};
+
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};
+
+var gemColors = {
+  'emerald-gem': '#50C878',
+  'topaz-radiance': '#FFC87C',
+  'sapphire-gem': '#0F52BA',
+  'ruby-gem': '#E0115F',
+  'misty-quartz-gem': '#D9D9F3',
+  'coral-reef-gem': '#FF7F50',
+  'jasper-gem': '#D73B3E',
+  'earthstone-gem': '#8B4513',
+  'obsidian-gem': '#0B0C0E',
+  'amethyst-gem': '#9966CC'
+};
+var defaultColor = '#FFFFFF'; // Default color (white)
+var onRenderGems = function onRenderGems(item) {
+  var _item$attachedGems;
+  var gemQty = ((_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.length) || 0;
+  if (gemQty > 0) {
+    return React.createElement(ItemSlotQty, {
+      item: item
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty = function ItemSlotQty(_ref) {
+  var _item$attachedGems2;
+  var item = _ref.item;
+  var itemId = item._id;
+  return React.createElement(ItemQtyContainer, {
+    key: "qty-" + itemId,
+    className: "item-slot-qty"
+  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
+    return React.createElement(Gem, {
+      key: itemId + "-gem-" + index,
+      color: gemColors[gem.key] || defaultColor
+    });
+  }));
+};
+var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemGem__ItemQtyContainer",
+  componentId: "sc-1ekseaq-0"
+})(["position:relative;width:85%;height:16px;top:28px;left:0px;pointer-events:none;transform:scale(0.8);display:flex;align-items:center;justify-content:flex-start;opacity:0.8;"]);
+var Gem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemGem__Gem",
+  componentId: "sc-1ekseaq-1"
+})(["width:8px;height:8px;background:", ";border:1px solid black;transform:rotate(45deg);margin:0 2px;box-shadow:0 0 5px ", ";transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:rotate(45deg) scale(1.2);box-shadow:0 0 10px ", ";}"], function (_ref2) {
+  var color = _ref2.color;
+  return "radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8), transparent 30%), \n     linear-gradient(45deg, " + color + ", " + color + " 50%, rgba(255, 255, 255, 0.2))";
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var color = _ref4.color;
+  return color;
+});
+
+var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
+  var isFractionalStackQty = stackQty % 1 !== 0;
+  var isLargerThan999 = stackQty > 999;
+  var qtyClassName = 'regular';
+  if (isLargerThan999) qtyClassName = 'small';
+  if (isFractionalStackQty) qtyClassName = 'xsmall';
+  if (stackQty > 1) {
+    return React.createElement(ItemSlotQty$1, {
+      itemId: itemId,
+      stackQty: stackQty,
+      qtyClassName: qtyClassName
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty$1 = function ItemSlotQty(_ref) {
+  var itemId = _ref.itemId,
+    stackQty = _ref.stackQty,
+    qtyClassName = _ref.qtyClassName;
+  return React.createElement(ItemQtyContainer$1, {
+    key: "qty-" + itemId,
+    className: "item-slot-qty"
+  }, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "48px"
+  }, React.createElement(ItemQty, {
+    className: qtyClassName
+  }, Math.round(stackQty * 100) / 100, ' ')));
+};
+var ItemQtyContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSlotQty__ItemQtyContainer",
+  componentId: "sc-keb1s5-0"
+})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
+var ItemQty = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ItemSlotQty__ItemQty",
+  componentId: "sc-keb1s5-1"
+})(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
+
+var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
+  var containerType = _ref.containerType,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    slotSpriteMask = _ref.slotSpriteMask,
+    item = _ref.item;
+  var renderStackInfo = function renderStackInfo(item) {
+    return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
+  };
+  var renderGems = function renderGems(item) {
+    return item.attachedGems && onRenderGems(item);
+  };
+  var renderItem = function renderItem(item) {
+    if (!(item != null && item.texturePath)) {
+      return null;
+    }
+    return React.createElement(ErrorBoundary, {
+      key: item._id
+    }, item.quality && item.quality !== ItemQualityLevel.Normal && React.createElement("div", {
+      className: "quality-star"
+    }, "\u2605"), React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: getItemTextureKeyPath({
+        key: item.texturePath,
+        texturePath: item.texturePath,
+        stackQty: item.stackQty || 1,
+        isStackable: item.isStackable
+      }, atlasJSON),
+      imgScale: 3,
+      imgClassname: "sprite-from-atlas-img--item",
+      tintColor: item.tintColor
+    }), renderStackInfo(item), renderGems(item));
+  };
+  var renderEquipment = function renderEquipment(itemToRender) {
+    var _itemToRender$allowed;
+    if (!(itemToRender != null && itemToRender.texturePath) || !((_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask))) {
+      return React.createElement(ErrorBoundary, {
+        key: v4()
+      }, React.createElement(SpriteFromAtlas, {
+        key: v4(),
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
+        imgScale: 3,
+        grayScale: true,
+        opacity: 0.4,
+        imgClassname: "sprite-from-atlas-img--item"
+      }));
+    }
+    return renderItem(itemToRender);
+  };
+  var onRenderSlot = function onRenderSlot(itemToRender) {
+    switch (containerType) {
+      case ItemContainerType.Equipment:
+        return renderEquipment(itemToRender);
+      default:
+        return renderItem(itemToRender);
+    }
+  };
+  return onRenderSlot(item);
+};
+
 var EquipmentSlotSpriteByType = {
   Neck: 'accessories/corruption-necklace.png',
   LeftHand: 'swords/broad-sword.png',
@@ -28264,7 +28283,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}.quality-star{position:absolute;top:0.5rem;left:0.5rem;font-size:1.2rem;z-index:2;text-shadow:0 0 3px black;pointer-events:none;color:", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
 }, function (_ref3) {
@@ -28277,7 +28296,10 @@ var Container$a = /*#__PURE__*/styled.div.withConfig({
   var item = _ref5.item;
   return "0 0 4px 3px " + rarityColor(item);
 }, function (_ref6) {
-  var isSelectingShortcut = _ref6.isSelectingShortcut;
+  var item = _ref6.item;
+  return qualityColorHex(item);
+}, function (_ref7) {
+  var isSelectingShortcut = _ref7.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
@@ -28394,10 +28416,16 @@ var ItemInfo = function ItemInfo(_ref) {
 var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
-})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
+})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";box-shadow:", ";height:max-content;width:18rem;position:relative;", " @media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
   var _rarityColor;
   var item = _ref2.item;
   return (_rarityColor = rarityColor(item)) != null ? _rarityColor : uiColors.lightGray;
+}, function (_ref3) {
+  var item = _ref3.item;
+  return "0 0 5px 2px " + rarityColor(item);
+}, function (_ref4) {
+  var item = _ref4.item;
+  return (item == null ? void 0 : item.quality) && item.quality !== ItemQualityLevel.Normal && "\n    &::before {\n      content: '\u2605';\n      position: absolute;\n      top: 0.2rem;\n      left: 0.5rem;\n      font-size: 1.2rem;\n      color: " + qualityColorHex(item) + ";\n      text-shadow: 0 0 3px black;\n    }\n  ";
 });
 var Title$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Title",
@@ -28406,8 +28434,8 @@ var Title$1 = /*#__PURE__*/styled.div.withConfig({
 var Rarity = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Rarity",
   componentId: "sc-1xm4q8k-2"
-})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref3) {
-  var item = _ref3.item;
+})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref5) {
+  var item = _ref5.item;
   return rarityColor(item);
 });
 var Type = /*#__PURE__*/styled.div.withConfig({
@@ -28421,8 +28449,8 @@ var LevelRequirement = /*#__PURE__*/styled.div.withConfig({
 var Statistic = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Statistic",
   componentId: "sc-1xm4q8k-5"
-})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref4) {
-  var $isSpecial = _ref4.$isSpecial;
+})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref6) {
+  var $isSpecial = _ref6.$isSpecial;
   return $isSpecial ? uiColors.darkYellow : 'inherit';
 }, uiColors.lightGreen, uiColors.cardinal);
 var Description = /*#__PURE__*/styled.div.withConfig({
@@ -31131,7 +31159,7 @@ var Icon$1 = /*#__PURE__*/styled.span.withConfig({
 var Content$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Content",
   componentId: "sc-s4h8ey-4"
-})(["padding:6px;"]);
+})(["padding:12px;"]);
 
 var BaseInformationDetails = function BaseInformationDetails(_ref) {
   var name = _ref.name,
@@ -31156,15 +31184,15 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
 var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
-})(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
+})(["position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:1000;"]);
 var Overlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Overlay",
   componentId: "sc-1vguuz8-1"
-})(["position:fixed;inset:0;background-color:rgba(0,0,0,0.8);"]);
+})(["position:absolute;inset:0;background-color:rgba(0,0,0,0.8);"]);
 var Modal = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
-})(["position:fixed;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90%;top:5%;left:5%;max-width:800px;margin:0 auto;@media (max-width:768px){width:100%;height:100%;top:0;left:0;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
+})(["position:relative;width:90%;height:90%;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:16px;overflow-y:auto;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
 var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
@@ -31176,7 +31204,7 @@ var Header$2 = /*#__PURE__*/styled.div.withConfig({
 var Content$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Content",
   componentId: "sc-1vguuz8-5"
-})(["display:flex;flex-direction:column;gap:12px;height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;@media (max-width:768px){height:calc(100% - 64px);gap:8px;padding-right:4px;margin-right:-4px;}"]);
+})(["display:flex;flex-direction:column;gap:16px;height:100%;overflow:auto;"]);
 var Title$4 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
@@ -31422,7 +31450,6 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     itemsAtlasIMG = _ref.itemsAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
-  var isMobile = isMobileOrTablet();
   var _useState = useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -31464,16 +31491,14 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }) || [];
   };
   var handleMouseEnter = function handleMouseEnter(e, item) {
-    if (!isMobile) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY
-      });
-      setHoveredItem(item);
-    }
+    setTooltipPosition({
+      x: e.clientX + TOOLTIP_OFFSET,
+      y: e.clientY
+    });
+    setHoveredItem(item);
   };
   var handleMouseMove = function handleMouseMove(e) {
-    if (!isMobile && hoveredItem) {
+    if (hoveredItem) {
       setTooltipPosition({
         x: e.clientX + TOOLTIP_OFFSET,
         y: e.clientY
@@ -31481,13 +31506,15 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    if (!isMobile) {
-      setHoveredItem(null);
-    }
+    setHoveredItem(null);
   };
   var handleTouchStart = function handleTouchStart(e, item) {
-    e.preventDefault();
-    setSelectedItem(item);
+    var touch = e.touches[0];
+    setTooltipPosition({
+      x: touch.clientX + TOOLTIP_OFFSET,
+      y: touch.clientY
+    });
+    setHoveredItem(item);
   };
   var handleItemClick = function handleItemClick(item) {
     setSelectedItem(item);
@@ -31537,14 +31564,14 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     tabId: tabId,
     layout: "grid",
     itemHeight: "180px"
-  }), !isMobile && hoveredItem && React.createElement(TooltipWrapper, {
+  }), hoveredItem && React.createElement(TooltipWrapper, {
     style: {
       top: tooltipPosition.y,
       left: tooltipPosition.x
     }
   }, React.createElement(InformationCenterItemTooltip, {
     item: hoveredItem
-  })), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
+  })), selectedItem && React.createElement(InformationCenterItemDetails, {
     item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -31552,7 +31579,7 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     onBack: function onBack() {
       return setSelectedItem(null);
     }
-  })));
+  }));
 };
 var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterItemsSection__TooltipWrapper",
@@ -31688,7 +31715,7 @@ var Value$1 = /*#__PURE__*/styled.span.withConfig({
 var StyledCollapsible$1 = /*#__PURE__*/styled(Collapsible).withConfig({
   displayName: "InformationCenterNPCDetails__StyledCollapsible",
   componentId: "sc-fdu3xl-4"
-})(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:visible;scrollbar-width:thin;scrollbar-color:", " transparent;width:100%;box-sizing:border-box;"], uiColors.darkGray);
+})(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:auto;scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray);
 var StatGrid$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__StatGrid",
   componentId: "sc-fdu3xl-5"
@@ -31740,19 +31767,19 @@ var Separator = /*#__PURE__*/styled.span.withConfig({
 var LootSearchContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootSearchContainer",
   componentId: "sc-fdu3xl-17"
-})(["padding:8px;background:rgba(0,0,0,0.2);border-radius:4px;margin:8px 8px 4px;box-sizing:border-box;"]);
+})(["padding:12px 12px 0;"]);
 var StyledSearchBar$1 = /*#__PURE__*/styled(SearchBar).withConfig({
   displayName: "InformationCenterNPCDetails__StyledSearchBar",
   componentId: "sc-fdu3xl-18"
-})(["width:100%;box-sizing:border-box;input{background:rgba(0,0,0,0.2) !important;border:1px solid rgba(255,255,255,0.1) !important;box-sizing:border-box;&:focus{border-color:", " !important;}}"], uiColors.yellow);
+})(["width:100%;"]);
 var LootGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootGrid",
   componentId: "sc-fdu3xl-19"
-})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px;padding:4px 8px;width:100%;max-width:100%;box-sizing:border-box;@media (max-width:768px){grid-template-columns:1fr;padding:4px;}"]);
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:12px;"]);
 var LootItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootItem",
   componentId: "sc-fdu3xl-20"
-})(["display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.05);padding:4px;border-radius:4px;min-width:0;"]);
+})(["display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
 var LootDetails = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootDetails",
   componentId: "sc-fdu3xl-21"
@@ -31881,7 +31908,6 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
-  var isMobile = isMobileOrTablet();
   var _useState = useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -31891,8 +31917,10 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
   var _useState3 = useState(null),
     selectedMonster = _useState3[0],
     setSelectedMonster = _useState3[1];
+  var _useState4 = useState('ontouchstart' in window),
+    isTouchDevice = _useState4[0];
   var handleMouseEnter = function handleMouseEnter(monster, event) {
-    if (!isMobile && !selectedMonster) {
+    if (!isTouchDevice && !selectedMonster) {
       setTooltipData({
         npc: monster,
         position: {
@@ -31903,12 +31931,12 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    if (!isMobile) {
+    if (!isTouchDevice) {
       setTooltipData(null);
     }
   };
   var handleMouseMove = function handleMouseMove(event) {
-    if (!isMobile && tooltipData) {
+    if (!isTouchDevice && tooltipData) {
       setTooltipData(_extends({}, tooltipData, {
         position: {
           x: event.clientX,
@@ -31918,17 +31946,29 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     }
   };
   var handleTouchStart = function handleTouchStart(monster, event) {
-    event.preventDefault();
-    setSelectedMonster(monster);
-    setTooltipData(null);
+    if (isTouchDevice) {
+      event.preventDefault();
+      var touch = event.touches[0];
+      if ((tooltipData == null ? void 0 : tooltipData.npc.id) === monster.id) {
+        setTooltipData(null);
+      } else {
+        setTooltipData({
+          npc: monster,
+          position: {
+            x: touch.clientX,
+            y: touch.clientY
+          }
+        });
+      }
+    }
   };
   var handleMonsterClick = function handleMonsterClick(monster) {
     setSelectedMonster(monster);
     setTooltipData(null);
   };
-  var _useState4 = useState('all'),
-    selectedBestiaryCategory = _useState4[0],
-    setSelectedBestiaryCategory = _useState4[1];
+  var _useState5 = useState('all'),
+    selectedBestiaryCategory = _useState5[0],
+    setSelectedBestiaryCategory = _useState5[1];
   var bestiaryCategoryOptions = [{
     id: 0,
     value: 'all',
@@ -32003,7 +32043,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     },
     dependencies: [selectedBestiaryCategory],
     itemHeight: "180px"
-  }), !isMobile && tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper$1, {
+  }), tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper$1, {
     style: {
       position: 'fixed',
       left: tooltipData.position.x + 10,
@@ -32013,7 +32053,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     npc: tooltipData.npc,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React.createElement(Portal, null, React.createElement(InformationCenterNPCDetails, {
+  }))), selectedMonster && React.createElement(InformationCenterNPCDetails, {
     npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -32024,7 +32064,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     onBack: function onBack() {
       return setSelectedMonster(null);
     }
-  })));
+  }));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterBestiarySection__TooltipWrapper",
@@ -32235,6 +32275,9 @@ var InformationCenter = function InformationCenter(_ref) {
   var _useState = useState('bestiary'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
+  var _useState2 = useState(null),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
   if (loading) {
     return React.createElement(LoadingMessage, null, "Loading...");
   }
@@ -32284,8 +32327,7 @@ var InformationCenter = function InformationCenter(_ref) {
     })
   }];
   return React.createElement(DraggableContainer, {
-    title: "Information Center",
-    type: RPGUIContainerTypes.Framed
+    title: "Information Center"
   }, React.createElement(Container$r, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
@@ -32295,6 +32337,19 @@ var InformationCenter = function InformationCenter(_ref) {
     inactiveColor: "#6b7280",
     borderColor: "#f59e0b",
     hoverColor: "#fef3c7"
+  }), selectedItem && React.createElement(InformationCenterItemDetails, {
+    item: selectedItem,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    droppedBy: bestiaryItems.filter(function (npc) {
+      var _npc$loots;
+      return (_npc$loots = npc.loots) == null ? void 0 : _npc$loots.some(function (loot) {
+        return loot.itemBlueprintKey === selectedItem.key;
+      });
+    }),
+    onBack: function onBack() {
+      return setSelectedItem(null);
+    }
   })));
 };
 var Container$r = /*#__PURE__*/styled.div.withConfig({