@rpg-engine/long-bow 0.7.51 → 0.7.53

package/package.json

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

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

@@ -142,6 +142,12 @@ export const ItemSlot = React.memo(
       const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
         []
       );
+      const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
+      const [
+        touchStartPosition,
+        setTouchStartPosition,
+      ] = useState<IPosition | null>(null);
+      const [isDragging, setIsDragging] = useState<boolean>(false); // New state to track dragging
 
       useEffect(() => {
         setDragState(prev => ({
@@ -180,8 +186,13 @@ export const ItemSlot = React.memo(
       }, [dragContainer]);
 
       const resetItem = () => {
-        setTooltipState(prev => ({ ...prev, visible: false }));
+        setTooltipState(prev => ({
+          ...prev,
+          visible: false,
+          mobileVisible: false,
+        }));
         setDragState(prev => ({ ...prev, wasDragged: false }));
+        setIsDragging(false); // Reset dragging flag
       };
 
       const onSuccessfulDrag = (quantity?: number) => {
@@ -211,12 +222,40 @@ export const ItemSlot = React.memo(
           }
         }
 
-        // remove the class react-draggable-dragging from the element
+        // Remove the class react-draggable-dragging from the element
         // to prevent the item from being dragged again
         target.classList.remove('react-draggable-dragging');
 
         const isTouch = e.type.startsWith('touch');
 
+        if (isTouch) {
+          const touchEvent = e as TouchEvent;
+          const touch = touchEvent.changedTouches[0];
+          const touchEndTime = new Date().getTime();
+          const touchDuration = touchStartTime
+            ? touchEndTime - touchStartTime
+            : 0;
+
+          // Check if it's a short tap (less than 200ms) and hasn't moved much
+          const isShortTap = touchDuration < 200;
+          const hasMovedSignificantly =
+            touchStartPosition &&
+            (Math.abs(touch.clientX - touchStartPosition.x) > 10 ||
+              Math.abs(touch.clientY - touchStartPosition.y) > 10);
+
+          if (isShortTap && !hasMovedSignificantly) {
+            // Handle as a tap/click
+            if (item) {
+              setTooltipState(prev => ({
+                ...prev,
+                mobileVisible: true,
+              }));
+              onPointerDown(item.type, containerType ?? null, item);
+            }
+            return;
+          }
+        }
+
         // Threshold for considering a tap/click as a drag
         const dragThreshold = 5; // pixels
         const isDrag =
@@ -274,16 +313,22 @@ export const ItemSlot = React.memo(
             }
           }, 50);
         } else if (item) {
-          if (isTouch && !isDrag) {
+          if (isTouch && isDragging) {
+            // If it's a touch and we were dragging, do not show context menu
+            return;
+          } else if (isTouch && !isDrag) {
+            // Handle as a tap/click
             setTooltipState(prev => ({
               ...prev,
               mobileVisible: true,
             }));
+            onPointerDown(item.type, containerType ?? null, item);
           } else if (
             !isTouch &&
             !isContextMenuDisabled &&
             !isSelectingShortcut
           ) {
+            // Handle as context menu for mouse devices
             setContextMenuState(prev => ({
               ...prev,
               visible: !contextMenuState.visible,
@@ -302,7 +347,7 @@ export const ItemSlot = React.memo(
             }
           }
 
-          if (!isDrag || !isTouch) {
+          if (!isDrag && !isTouch) {
             console.log('Calling onPointerDown');
             onPointerDown(item.type, containerType ?? null, item);
           }
@@ -320,6 +365,8 @@ export const ItemSlot = React.memo(
         if (onDragStart && containerType) {
           onDragStart(item, slotIndex, containerType);
         }
+
+        setIsDragging(true); // Set dragging flag on start
       };
 
       const onDraggableProgress: DraggableEventHandler = (_e, data) => {
@@ -339,6 +386,58 @@ export const ItemSlot = React.memo(
         }
       };
 
+      const onTouchStartHandler = (e: React.TouchEvent) => {
+        setTouchStartTime(new Date().getTime());
+        setTouchStartPosition({
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY,
+        });
+      };
+
+      const onTouchEndHandler = (e: React.TouchEvent) => {
+        // Only prevent default if not dragging
+        if (!isDragging) {
+          e.preventDefault();
+        }
+
+        const touch = e.changedTouches[0];
+        const touchEndTime = new Date().getTime();
+        const touchDuration = touchStartTime
+          ? touchEndTime - touchStartTime
+          : 0;
+
+        // Check if it's a short tap (less than 200ms) and hasn't moved much
+        const isShortTap = touchDuration < 200;
+        const hasMovedSignificantly =
+          touchStartPosition &&
+          (Math.abs(touch.clientX - touchStartPosition.x) > 10 ||
+            Math.abs(touch.clientY - touchStartPosition.y) > 10);
+
+        if (isShortTap && !hasMovedSignificantly) {
+          // Handle as a tap/click
+          if (item) {
+            setTooltipState(prev => ({
+              ...prev,
+              mobileVisible: true,
+            }));
+            onPointerDown(item.type, containerType ?? null, item);
+          }
+        } else {
+          // Handle as a drag end
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX: touch.clientX,
+            clientY: touch.clientY,
+            bubbles: true,
+          });
+
+          document
+            .elementFromPoint(touch.clientX, touch.clientY)
+            ?.dispatchEvent(simulatedEvent);
+        }
+
+        setIsDragging(false); // Reset dragging flag on touch end
+      };
+
       const bounds = getContainerBounds();
       return (
         <Container
@@ -351,18 +450,6 @@ export const ItemSlot = React.memo(
               onPlaceDrop(data, slotIndex, containerType);
             }
           }}
-          onTouchEnd={e => {
-            const { clientX, clientY } = e.changedTouches[0];
-            const simulatedEvent = new MouseEvent('mouseup', {
-              clientX,
-              clientY,
-              bubbles: true,
-            });
-
-            document
-              .elementFromPoint(clientX, clientY)
-              ?.dispatchEvent(simulatedEvent);
-          }}
           onPointerDown={
             onDragStart !== undefined && onDragEnd !== undefined
               ? undefined
@@ -377,6 +464,8 @@ export const ItemSlot = React.memo(
               item?.type === ItemType.Tool ||
               item?.subType === ItemSubType.Seed)
           }
+          onTouchStart={onTouchStartHandler}
+          onTouchEnd={onTouchEndHandler}
         >
           <Draggable
             axis={isSelectingShortcut ? 'none' : 'both'}
@@ -506,5 +595,6 @@ const ItemContainer = styled.div<{ isFocused?: boolean }>`
   height: 64px;
 
   position: relative;
-  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
+  ${({ isFocused }) =>
+    isFocused ? 'z-index: 100; pointer-events: none;' : ''};
 `;