@rpg-engine/long-bow 0.8.27 → 0.8.28

package/dist/long-bow.esm.js

@@ -31156,15 +31156,15 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
 var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
-})(["position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:1000;"]);
+})(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
 var Overlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Overlay",
   componentId: "sc-1vguuz8-1"
-})(["position:absolute;inset:0;background-color:rgba(0,0,0,0.8);"]);
+})(["position:fixed;inset:0;background-color:rgba(0,0,0,0.8);"]);
 var Modal = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
-})(["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);
+})(["position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:90%;max-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);@media (max-width:768px){max-width:100%;max-height:100%;border-radius:0;}&::-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"
@@ -31422,6 +31422,7 @@ 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];
@@ -31463,14 +31464,16 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }) || [];
   };
   var handleMouseEnter = function handleMouseEnter(e, item) {
-    setTooltipPosition({
-      x: e.clientX + TOOLTIP_OFFSET,
-      y: e.clientY
-    });
-    setHoveredItem(item);
+    if (!isMobile) {
+      setTooltipPosition({
+        x: e.clientX + TOOLTIP_OFFSET,
+        y: e.clientY
+      });
+      setHoveredItem(item);
+    }
   };
   var handleMouseMove = function handleMouseMove(e) {
-    if (hoveredItem) {
+    if (!isMobile && hoveredItem) {
       setTooltipPosition({
         x: e.clientX + TOOLTIP_OFFSET,
         y: e.clientY
@@ -31478,15 +31481,13 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    setHoveredItem(null);
+    if (!isMobile) {
+      setHoveredItem(null);
+    }
   };
   var handleTouchStart = function handleTouchStart(e, item) {
-    var touch = e.touches[0];
-    setTooltipPosition({
-      x: touch.clientX + TOOLTIP_OFFSET,
-      y: touch.clientY
-    });
-    setHoveredItem(item);
+    e.preventDefault();
+    setSelectedItem(item);
   };
   var handleItemClick = function handleItemClick(item) {
     setSelectedItem(item);
@@ -31536,14 +31537,14 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     tabId: tabId,
     layout: "grid",
     itemHeight: "180px"
-  }), hoveredItem && React.createElement(TooltipWrapper, {
+  }), !isMobile && hoveredItem && React.createElement(TooltipWrapper, {
     style: {
       top: tooltipPosition.y,
       left: tooltipPosition.x
     }
   }, React.createElement(InformationCenterItemTooltip, {
     item: hoveredItem
-  })), selectedItem && React.createElement(InformationCenterItemDetails, {
+  })), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
     item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -31551,7 +31552,7 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     onBack: function onBack() {
       return setSelectedItem(null);
     }
-  }));
+  })));
 };
 var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterItemsSection__TooltipWrapper",
@@ -31880,6 +31881,7 @@ 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];
@@ -31889,10 +31891,8 @@ 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 (!isTouchDevice && !selectedMonster) {
+    if (!isMobile && !selectedMonster) {
       setTooltipData({
         npc: monster,
         position: {
@@ -31903,12 +31903,12 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    if (!isTouchDevice) {
+    if (!isMobile) {
       setTooltipData(null);
     }
   };
   var handleMouseMove = function handleMouseMove(event) {
-    if (!isTouchDevice && tooltipData) {
+    if (!isMobile && tooltipData) {
       setTooltipData(_extends({}, tooltipData, {
         position: {
           x: event.clientX,
@@ -31918,29 +31918,17 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     }
   };
   var handleTouchStart = function handleTouchStart(monster, event) {
-    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
-          }
-        });
-      }
-    }
+    event.preventDefault();
+    setSelectedMonster(monster);
+    setTooltipData(null);
   };
   var handleMonsterClick = function handleMonsterClick(monster) {
     setSelectedMonster(monster);
     setTooltipData(null);
   };
-  var _useState5 = useState('all'),
-    selectedBestiaryCategory = _useState5[0],
-    setSelectedBestiaryCategory = _useState5[1];
+  var _useState4 = useState('all'),
+    selectedBestiaryCategory = _useState4[0],
+    setSelectedBestiaryCategory = _useState4[1];
   var bestiaryCategoryOptions = [{
     id: 0,
     value: 'all',
@@ -32015,7 +32003,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     },
     dependencies: [selectedBestiaryCategory],
     itemHeight: "180px"
-  }), tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper$1, {
+  }), !isMobile && tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper$1, {
     style: {
       position: 'fixed',
       left: tooltipData.position.x + 10,
@@ -32025,7 +32013,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     npc: tooltipData.npc,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React.createElement(InformationCenterNPCDetails, {
+  }))), selectedMonster && React.createElement(Portal, null, React.createElement(InformationCenterNPCDetails, {
     npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -32036,7 +32024,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     onBack: function onBack() {
       return setSelectedMonster(null);
     }
-  }));
+  })));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterBestiarySection__TooltipWrapper",
@@ -32247,9 +32235,6 @@ 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...");
   }
@@ -32299,7 +32284,8 @@ var InformationCenter = function InformationCenter(_ref) {
     })
   }];
   return React.createElement(DraggableContainer, {
-    title: "Information Center"
+    title: "Information Center",
+    type: RPGUIContainerTypes.Framed
   }, React.createElement(Container$r, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
@@ -32309,19 +32295,6 @@ 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({