@rpg-engine/long-bow 0.8.32 → 0.8.34

package/dist/long-bow.esm.js

@@ -31154,44 +31154,6 @@ var CellName = /*#__PURE__*/styled.h3.withConfig({
   componentId: "sc-w48fdf-2"
 })(["font-size:0.7rem;color:#fef08a;margin:0;text-align:center;font-family:'Press Start 2P',cursive;line-height:1.2;word-break:break-word;max-width:100%;"]);
 
-var Collapsible = function Collapsible(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-    className = _ref.className;
-  var _useState = useState(defaultOpen),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  return React.createElement(Container$o, {
-    className: className
-  }, React.createElement(Header$1, {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
-  }, React.createElement(Title$3, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$1, null, children));
-};
-var Container$o = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Container",
-  componentId: "sc-s4h8ey-0"
-})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
-var Header$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Header",
-  componentId: "sc-s4h8ey-1"
-})(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
-var Title$3 = /*#__PURE__*/styled.h3.withConfig({
-  displayName: "Collapsible__Title",
-  componentId: "sc-s4h8ey-2"
-})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
-var Icon$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Collapsible__Icon",
-  componentId: "sc-s4h8ey-3"
-})(["color:", ";font-size:0.6rem;display:flex;align-items:center;"], uiColors.yellow);
-var Content$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Content",
-  componentId: "sc-s4h8ey-4"
-})(["padding:6px;"]);
-
 var BaseInformationDetails = function BaseInformationDetails(_ref) {
   var name = _ref.name,
     spriteKey = _ref.spriteKey,
@@ -31199,20 +31161,20 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$p, null, React.createElement(Overlay, {
+  return React.createElement(Container$o, null, React.createElement(Overlay, {
     onClick: onBack
   }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
     onClick: onBack
-  }, React.createElement(FaTimes, null)), React.createElement(Header$2, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(FaTimes, null)), React.createElement(Header$1, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: spriteKey,
     width: 32,
     height: 32,
     imgScale: 1
-  })), React.createElement(Title$4, null, name)), React.createElement(Content$2, null, children)));
+  })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__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;"]);
@@ -31223,20 +31185,20 @@ var Overlay = /*#__PURE__*/styled.div.withConfig({
 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;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:90vh;max-width:800px;max-height:800px;@media (max-width:768px){width:100%;height:100%;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);
 var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
 })(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
-var Header$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Header",
   componentId: "sc-1vguuz8-4"
 })(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
-var Content$2 = /*#__PURE__*/styled.div.withConfig({
+var Content$1 = /*#__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;}"]);
-var Title$4 = /*#__PURE__*/styled.h2.withConfig({
+var Title$3 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
 })(["color:", ";font-size:1rem;margin:0;"], uiColors.yellow);
@@ -31245,6 +31207,44 @@ var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1vguuz8-7"
 })(["width:64px;height:64px;background:rgba(0,0,0,0.3);border-radius:4px;display:flex;justify-content:center;align-items:center;position:relative;.sprite-from-atlas-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);transform-origin:center;}"]);
 
+var Collapsible = function Collapsible(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    className = _ref.className;
+  var _useState = useState(defaultOpen),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  return React.createElement(Container$p, {
+    className: className
+  }, React.createElement(Header$2, {
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
+};
+var Container$p = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Container",
+  componentId: "sc-s4h8ey-0"
+})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
+var Header$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Header",
+  componentId: "sc-s4h8ey-1"
+})(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
+var Title$4 = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "Collapsible__Title",
+  componentId: "sc-s4h8ey-2"
+})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
+var Icon$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Collapsible__Icon",
+  componentId: "sc-s4h8ey-3"
+})(["color:", ";font-size:0.6rem;display:flex;align-items:center;"], uiColors.yellow);
+var Content$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Content",
+  componentId: "sc-s4h8ey-4"
+})(["padding:6px;"]);
+
 var InformationCenterItemDetails = function InformationCenterItemDetails(_ref) {
   var item = _ref.item,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
@@ -31756,7 +31756,15 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }
   }, React.createElement(InformationCenterItemTooltip, {
     item: tooltipState.item
-  }))), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
+  }))), selectedItem && React.createElement(Portal, null, React.createElement(BaseInformationDetails, {
+    name: selectedItem.name,
+    spriteKey: selectedItem.texturePath,
+    atlasJSON: itemsAtlasJSON,
+    atlasIMG: itemsAtlasIMG,
+    onBack: function onBack() {
+      return setSelectedItem(null);
+    }
+  }, React.createElement(InformationCenterItemDetails, {
     item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -31764,7 +31772,7 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     onBack: function onBack() {
       return setSelectedItem(null);
     }
-  })));
+  }))));
 };
 var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterItemsSection__TooltipWrapper",
@@ -31871,6 +31879,12 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
   var _useState2 = useState(1),
     currentLootPage = _useState2[0],
     setCurrentLootPage = _useState2[1];
+  var _useState3 = useState(null),
+    selectedItem = _useState3[0],
+    setSelectedItem = _useState3[1];
+  useEffect(function () {
+    setCurrentLootPage(1);
+  }, [lootSearchQuery]);
   var formatText = function formatText(text) {
     if (typeof text === 'number') {
       return text.toString();
@@ -31902,6 +31916,25 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
   })) || [];
   var totalLootPages = Math.ceil(filteredLoots.length / ITEMS_PER_PAGE$1);
   var paginatedLoots = filteredLoots.slice((currentLootPage - 1) * ITEMS_PER_PAGE$1, currentLootPage * ITEMS_PER_PAGE$1);
+  var handleItemClick = function handleItemClick(loot) {
+    var item = {
+      key: loot.itemBlueprintKey,
+      name: formatItemName(loot.itemBlueprintKey),
+      texturePath: loot.itemBlueprintKey,
+      textureAtlas: 'items',
+      type: ItemType.Weapon,
+      subType: ItemSubType.Sword,
+      tier: 1,
+      rarity: ItemRarities.Common,
+      weight: 0,
+      maxStackSize: loot.quantityRange ? loot.quantityRange[1] : 1,
+      canSell: true,
+      description: 'A basic item.',
+      basePrice: 100,
+      allowedEquipSlotType: []
+    };
+    setSelectedItem(item);
+  };
   return React.createElement(BaseInformationDetails, {
     name: npc.name,
     spriteKey: npc.key,
@@ -31916,11 +31949,17 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
     defaultOpen: !isMobile
   }, React.createElement(LootSearchContainer, null, React.createElement(StyledSearchBar$1, {
     value: lootSearchQuery,
-    onChange: setLootSearchQuery,
+    onChange: function onChange(query) {
+      setLootSearchQuery(query);
+      setCurrentLootPage(1);
+    },
     placeholder: "Search loot..."
   })), React.createElement(LootGrid, null, paginatedLoots.map(function (loot, index) {
     return React.createElement(LootItem, {
-      key: index
+      key: loot.itemBlueprintKey + "-" + index,
+      onClick: function onClick() {
+        return handleItemClick(loot);
+      }
     }, React.createElement(SpriteFromAtlas, {
       atlasJSON: itemsAtlasJSON,
       atlasIMG: itemsAtlasIMG,
@@ -31954,7 +31993,15 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
       height: 24,
       imgScale: 1
     })), React.createElement(SpellContent, null, React.createElement(SpellName, null, formatText(spell.spellKey)), React.createElement(SpellDetails, null, "Power: ", React.createElement(SpellValue, null, formatText(spell.power)), React.createElement(Separator, null, "\u2022"), "Chance: ", React.createElement(SpellValue, null, spell.probability, "%"))));
-  }))));
+  }))), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
+    item: selectedItem,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    droppedBy: [npc],
+    onBack: function onBack() {
+      return setSelectedItem(null);
+    }
+  })));
 };
 var InfoSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__InfoSection",
@@ -32039,27 +32086,27 @@ var LootGrid = /*#__PURE__*/styled.div.withConfig({
 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:4px;background:rgba(255,255,255,0.05);padding:4px;border-radius:4px;min-width:0;cursor:pointer;user-select:none;transition:background-color 0.2s ease;&:hover{background:rgba(255,255,255,0.1);}"]);
 var LootDetails = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootDetails",
   componentId: "sc-fdu3xl-21"
-})(["flex:1;display:flex;flex-direction:column;gap:4px;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:4px;user-select:none;"]);
 var LootName = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootName",
   componentId: "sc-fdu3xl-22"
-})(["color:", ";font-size:0.5rem;"], uiColors.white);
+})(["color:", ";font-size:0.5rem;user-select:none;"], uiColors.white);
 var LootInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootInfo",
   componentId: "sc-fdu3xl-23"
-})(["display:flex;align-items:center;gap:8px;"]);
+})(["display:flex;align-items:center;gap:8px;user-select:none;"]);
 var LootChance = /*#__PURE__*/styled.span.withConfig({
   displayName: "InformationCenterNPCDetails__LootChance",
   componentId: "sc-fdu3xl-24"
-})(["color:", ";font-size:0.45rem;"], uiColors.yellow);
+})(["color:", ";font-size:0.45rem;user-select:none;"], uiColors.yellow);
 var LootQuantity = /*#__PURE__*/styled.span.withConfig({
   displayName: "InformationCenterNPCDetails__LootQuantity",
   componentId: "sc-fdu3xl-25"
-})(["color:", ";font-size:0.45rem;"], uiColors.lightGray);
+})(["color:", ";font-size:0.45rem;user-select:none;"], uiColors.lightGray);
 var PaginationContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__PaginationContainer",
   componentId: "sc-fdu3xl-26"
@@ -32311,7 +32358,15 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     npc: tooltipState.item,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React.createElement(Portal, null, React.createElement(InformationCenterNPCDetails, {
+  }))), selectedMonster && React.createElement(Portal, null, React.createElement(BaseInformationDetails, {
+    name: selectedMonster.name,
+    spriteKey: selectedMonster.key,
+    atlasJSON: entitiesAtlasJSON,
+    atlasIMG: entitiesAtlasIMG,
+    onBack: function onBack() {
+      return setSelectedMonster(null);
+    }
+  }, React.createElement(InformationCenterNPCDetails, {
     npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -32322,7 +32377,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     onBack: function onBack() {
       return setSelectedMonster(null);
     }
-  })));
+  }))));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterBestiarySection__TooltipWrapper",