@rpg-engine/long-bow 0.8.8 → 0.8.10

package/dist/long-bow.esm.js

@@ -646,7 +646,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";", " opacity:", ";"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";overflow:hidden;"], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -663,9 +663,14 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.centered ? '0' : '8px';
 }, function (props) {
-  return props.tintColor && "\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: " + props.frame.w + "px;\n      height: " + props.frame.h + "px;\n      background-color: " + props.tintColor + ";\n      mask-image: url(" + props.atlasIMG + ");\n      mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      -webkit-mask-image: url(" + props.atlasIMG + ");\n      -webkit-mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      mix-blend-mode: color; \n      " + (props.grayScale ? 'filter: grayscale(100%);' : 'none') + "\n      }\n    ";
+  var filters = [];
+  if (props.grayScale) filters.push('grayscale(100%)');
+  if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
+  return filters.length ? filters.join(' ') : 'none';
 }, function (props) {
   return props.opacity;
+}, function (props) {
+  return props.borderRadius || '0';
 });
 
 var frames = {
@@ -31172,7 +31177,7 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     onItemDragEnd = _ref.onItemDragEnd,
     onItemDragStart = _ref.onItemDragStart,
     onItemPlaceDrop = _ref.onItemPlaceDrop,
-    _onOutsideDrop = _ref.onOutsideDrop,
+    onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
@@ -31237,12 +31242,49 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     }
     onDragEndScrollingEvents();
   }, [onItemDragEnd, onDragEndScrollingEvents]);
-  // Memoize handleSetShortcut to prevent unnecessary re-renders
-  var memoizedHandleSetShortcut = useCallback(function (item, index) {
-    handleSetShortcut(item, index);
-  }, [handleSetShortcut]);
-  // Memoize onRenderSlots to prevent re-creating the slots array on every render
-  var onRenderSlots = useMemo(function () {
+  var handleItemClick = useCallback(function (itemType, containerType, item) {
+    if (settingShortcutIndex !== -1) {
+      setSettingShortcutIndex(-1);
+      handleSetShortcut(item, settingShortcutIndex);
+    } else if (onItemClick) {
+      onItemClick(item, itemType, containerType);
+    }
+  }, [settingShortcutIndex, handleSetShortcut, onItemClick]);
+  var handlePlaceDrop = useCallback(function (item, slotIndex, itemContainerType) {
+    if (onItemPlaceDrop) {
+      onItemPlaceDrop(item, slotIndex, itemContainerType);
+    }
+    onDragEndScrollingEvents();
+  }, [onItemPlaceDrop, onDragEndScrollingEvents]);
+  var handleOutsideDrop = useCallback(function (item, position) {
+    if (onOutsideDrop) {
+      onOutsideDrop(item, position);
+    }
+    onDragEndScrollingEvents();
+  }, [onOutsideDrop, onDragEndScrollingEvents]);
+  var handleQuantitySelect = useCallback(function (maxQuantity, callback) {
+    setQuantitySelect({
+      isOpen: true,
+      maxQuantity: maxQuantity,
+      callback: callback
+    });
+  }, []);
+  // Memoize slot rendering configuration
+  var slotConfig = useMemo(function () {
+    return {
+      type: type,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      scale: scale,
+      equipmentSet: equipmentSet,
+      isDepotSystem: isDepotSystem,
+      isSelectingShortcut: settingShortcutIndex !== -1,
+      checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+      checkIfItemShouldDragEnd: checkIfItemShouldDragEnd
+    };
+  }, [type, atlasIMG, atlasJSON, scale, equipmentSet, isDepotSystem, settingShortcutIndex, checkIfItemCanBeMoved, checkIfItemShouldDragEnd]);
+  // Memoize slots rendering
+  var renderSlots = useMemo(function () {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
@@ -31251,55 +31293,27 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
         key: i,
         slotIndex: i,
         item: currentItem,
-        itemContainerType: type,
-        onMouseOver: onMouseOver ? function (event, slotIndex, item) {
-          return onMouseOver(event, slotIndex, item);
-        } : undefined,
-        onMouseOut: undefined,
-        onPointerDown: function onPointerDown(itemType, containerType, item) {
-          if (settingShortcutIndex !== -1) {
-            setSettingShortcutIndex(-1);
-            memoizedHandleSetShortcut(item, settingShortcutIndex);
-          } else if (onItemClick) {
-            onItemClick(item, itemType, containerType);
-          }
-        },
+        itemContainerType: slotConfig.type,
+        onMouseOver: onMouseOver,
+        onPointerDown: handleItemClick,
         onDragStart: onDragStartHandler,
         onDragEnd: onDragEndHandler,
-        dragScale: scale,
-        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
-        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
-          setQuantitySelect({
-            isOpen: true,
-            maxQuantity: maxQuantity,
-            callback: callback
-          });
-        },
-        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
-          if (onItemPlaceDrop) {
-            onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }
-          console.log('PLACE DROP');
-          onDragEndScrollingEvents();
-        },
-        onOutsideDrop: function onOutsideDrop(item, position) {
-          if (_onOutsideDrop) {
-            _onOutsideDrop(item, position);
-          }
-          console.log('OUTSIDE DROP');
-          onDragEndScrollingEvents();
-        },
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        isSelectingShortcut: settingShortcutIndex !== -1,
-        equipmentSet: equipmentSet,
-        setItemShortcut: type === ItemContainerType.Inventory ? memoizedHandleSetShortcut : undefined,
-        isDepotSystem: isDepotSystem
+        dragScale: slotConfig.scale,
+        checkIfItemCanBeMoved: slotConfig.checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: slotConfig.checkIfItemShouldDragEnd,
+        openQuantitySelector: handleQuantitySelect,
+        onPlaceDrop: handlePlaceDrop,
+        onOutsideDrop: handleOutsideDrop,
+        atlasIMG: slotConfig.atlasIMG,
+        atlasJSON: slotConfig.atlasJSON,
+        isSelectingShortcut: slotConfig.isSelectingShortcut,
+        equipmentSet: slotConfig.equipmentSet,
+        setItemShortcut: type === ItemContainerType.Inventory ? handleSetShortcut : undefined,
+        isDepotSystem: slotConfig.isDepotSystem
       }));
     }
     return slots;
-  }, [itemContainer.slotQty, itemContainer.slots, type, onMouseOver, settingShortcutIndex, memoizedHandleSetShortcut, onItemClick, onDragStartHandler, onDragEndHandler, scale, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, onItemPlaceDrop, _onOutsideDrop, atlasIMG, atlasJSON, equipmentSet, isDepotSystem, onDragEndScrollingEvents]);
+  }, [itemContainer.slotQty, itemContainer.slots, slotConfig, onMouseOver, handleItemClick, onDragStartHandler, onDragEndHandler, handleQuantitySelect, handlePlaceDrop, handleOutsideDrop, handleSetShortcut, type]);
   return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotDetailsProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -31325,7 +31339,7 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots)), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+  }, renderSlots)), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
   }), React.createElement(ItemSlotToolTips, {