@rpg-engine/long-bow 0.7.81 → 0.7.83

package/dist/hooks/useTouchTarget.d.ts

@@ -0,0 +1,5 @@
+interface IEventWithTarget {
+    target: EventTarget | null;
+}
+export declare function useTouchTarget(): (e: MouseEvent | TouchEvent | IEventWithTarget) => HTMLElement;
+export default useTouchTarget;

package/dist/long-bow.cjs.development.js

@@ -27377,6 +27377,23 @@ var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
+function useTouchTarget() {
+  var getTouchTarget = React.useCallback(function (e) {
+    // Check if it's a touch event
+    if ('changedTouches' in e || 'touches' in e) {
+      var _touchEvent$changedTo, _touchEvent$touches;
+      var touchEvent = e;
+      var touch = ((_touchEvent$changedTo = touchEvent.changedTouches) == null ? void 0 : _touchEvent$changedTo[0]) || ((_touchEvent$touches = touchEvent.touches) == null ? void 0 : _touchEvent$touches[0]);
+      if (touch) {
+        return document.elementFromPoint(touch.clientX, touch.clientY);
+      }
+    }
+    // If it's not a touch event or touch is not available, fallback to target
+    return e.target || document.body;
+  }, []);
+  return getTouchTarget;
+}
+
 var rarityColor = function rarityColor(item) {
   switch (item == null ? void 0 : item.rarity) {
     case shared.ItemRarities.Uncommon:
@@ -27820,6 +27837,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     detailsState = _useItemSlotDetails.detailsState,
     updateDetailsState = _useItemSlotDetails.updateDetailsState,
     setContextActions = _useItemSlotDetails.setContextActions;
+  var getTouchTarget = useTouchTarget();
   var isContextMenuVisible = detailsState.isContextMenuVisible,
     clearDetailsState = detailsState.clearDetailsState,
     clearContextActions = detailsState.clearContextActions;
@@ -27876,6 +27894,9 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         item: null
       });
       var target = e.target;
+      if (shared.isMobile()) {
+        target = getTouchTarget(e);
+      }
       handleShortcutSetter(target);
       removeDraggingClass(target);
       var shouldHandleDraggedItemResult = shouldHandleDraggedItem();
@@ -31118,13 +31139,16 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
     onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
     disabled = _ref.disabled;
+  var renderGems = function renderGems(item) {
+    return item.attachedGems && onRenderGems(item);
+  };
   return React__default.createElement(MarketplaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer$1, null, React__default.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
     scale: scale
-  }, React__default.createElement(RarityContainer, {
+  }, React__default.createElement(GemContainer, null, renderGems(item)), React__default.createElement(RarityContainer, {
     item: item
   }, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -31135,7 +31159,8 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
       texturePath: item.texturePath,
       isStackable: item.isStackable
     }, atlasJSON),
-    imgScale: 2
+    imgScale: 2,
+    imgClassname: "sprite-from-atlas-img--item"
   })), React__default.createElement(QuantityContainer, null, item.stackQty && item.stackQty > 1 && "x" + Math.round(item.stackQty * 10) / 10))), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "200px",
@@ -31167,33 +31192,37 @@ var QuantityContainer = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "MarketplaceRows__QuantityContainer",
   componentId: "sc-wmpr1o-1"
 })(["position:absolute;display:block;top:15px;left:25px;font-size:", " !important;"], uiFonts.size.xsmall);
+var GemContainer = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "MarketplaceRows__GemContainer",
+  componentId: "sc-wmpr1o-2"
+})(["position:absolute;display:block;top:-5px;left:-10px;font-size:", " !important;"], uiFonts.size.xsmall);
 var Flex$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__Flex",
-  componentId: "sc-wmpr1o-2"
+  componentId: "sc-wmpr1o-3"
 })(["display:flex;gap:24px;"]);
 var ItemIconContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ItemIconContainer",
-  componentId: "sc-wmpr1o-3"
+  componentId: "sc-wmpr1o-4"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
 var GoldContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__GoldContainer",
-  componentId: "sc-wmpr1o-4"
+  componentId: "sc-wmpr1o-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var SpriteContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
-  componentId: "sc-wmpr1o-5"
+  componentId: "sc-wmpr1o-6"
 })(["position:relative;left:0.5rem;"]);
 var PriceValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-6"
+  componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
 var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
 var RarityContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-9"
 })(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);