@rpg-engine/long-bow 0.7.81 → 0.7.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.81",
+  "version": "0.7.83",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
+import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
@@ -151,6 +152,8 @@ export const ItemSlot: React.FC<IProps> = observer(
       setContextActions,
     } = useItemSlotDetails();
 
+    const getTouchTarget = useTouchTarget();
+
     const {
       isContextMenuVisible,
       clearDetailsState,
@@ -231,7 +234,12 @@ export const ItemSlot: React.FC<IProps> = observer(
           item: null,
         });
 
-        const target = e.target as HTMLElement;
+        let target = e.target as HTMLElement;
+
+        if (isMobile()) {
+          target = getTouchTarget(e as MouseEvent);
+        }
+
         handleShortcutSetter(target);
         removeDraggingClass(target);
 

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -9,6 +9,7 @@ import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { Button, ButtonTypes } from '../Button';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { onRenderGems } from '../Item/Inventory/ItemGem';
 import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
@@ -36,6 +37,10 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   onMarketPlaceItemRemove,
   disabled,
 }) => {
+  const renderGems = (item: IItem) => {
+    return item.attachedGems && onRenderGems(item);
+  };
+
   return (
     <MarketplaceWrapper>
       <ItemIconContainer>
@@ -47,6 +52,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
             equipmentSet={equipmentSet}
             scale={scale}
           >
+            <GemContainer>{renderGems(item)}</GemContainer>
             <RarityContainer item={item}>
               <SpriteFromAtlas
                 atlasIMG={atlasIMG}
@@ -61,8 +67,10 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
                   atlasJSON
                 )}
                 imgScale={2}
+                imgClassname="sprite-from-atlas-img--item"
               />
             </RarityContainer>
+
             <QuantityContainer>
               {item.stackQty &&
                 item.stackQty > 1 &&
@@ -139,6 +147,14 @@ const QuantityContainer = styled.p`
   font-size: ${uiFonts.size.xsmall} !important;
 `;
 
+const GemContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: -5px;
+  left: -10px;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;
+
 const Flex = styled.div`
   display: flex;
   gap: 24px;

package/src/hooks/useTouchTarget.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+interface IEventWithTarget {
+  target: EventTarget | null;
+}
+
+interface ITouchEvent extends IEventWithTarget {
+  changedTouches?: TouchList;
+
+  touches?: TouchList;
+}
+
+export function useTouchTarget() {
+  const getTouchTarget = useCallback(
+    (e: MouseEvent | TouchEvent | IEventWithTarget): HTMLElement => {
+      // Check if it's a touch event
+      if ('changedTouches' in e || 'touches' in e) {
+        const touchEvent = e as ITouchEvent;
+        const touch = touchEvent.changedTouches?.[0] || touchEvent.touches?.[0];
+
+        if (touch) {
+          return document.elementFromPoint(
+            touch.clientX,
+            touch.clientY
+          ) as HTMLElement;
+        }
+      }
+
+      // If it's not a touch event or touch is not available, fallback to target
+      return (e.target as HTMLElement) || document.body;
+    },
+    []
+  );
+
+  return getTouchTarget;
+}
+
+export default useTouchTarget;