@rpg-engine/long-bow 0.5.28 → 0.5.30

package/dist/stories/ItemContainer.stories.d.ts

@@ -8,5 +8,4 @@ interface ITemplateProps {
     scale?: number;
 }
 export declare const Inventory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
-export declare const InventoryScaledDown: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
 export declare const Depot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;

package/package.json

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

package/src/components/Item/Cards/ItemInfo.tsx

@@ -5,7 +5,8 @@ import { uiColors } from '../../../constants/uiColors';
 import { uiFonts } from '../../../constants/uiFonts';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from '../Inventory/ErrorBoundary';
-import { EquipmentSlotSpriteByType, rarityColor } from '../Inventory/ItemSlot';
+import { EquipmentSlotSpriteByType } from '../Inventory/ItemSlot';
+import { rarityColor } from '../Inventory/ItemSlotRarity';
 
 interface IItemInfoProps {
   item: IItem;

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

@@ -3,16 +3,16 @@ import {
   IItem,
   IItemContainer,
   ItemContainerType,
-  ItemRarities,
   ItemSlotType,
   ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef, useState } from 'react';
-import Draggable from 'react-draggable';
+import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
+import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
 import { ItemSlotToolTips } from './ItemSlotTooltips';
 import { useDragging } from './context/DraggingContext';
@@ -156,6 +156,107 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     };
 
+    const onDraggableStop: DraggableEventHandler = (e, data) => {
+      setDraggingItem(null);
+
+      const target = e.target as HTMLElement;
+      if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
+        const index = parseInt(target.id.split('_')[1]);
+        if (!isNaN(index)) {
+          setItemShortcut(item, index);
+        }
+      }
+
+      if (wasDragged && item && !isSelectingShortcut) {
+        //@ts-ignore
+        const classes: string[] = Array.from(e.target?.classList);
+
+        const isOutsideDrop =
+          classes.some(elm => {
+            return elm.includes('rpgui-content');
+          }) || classes.length === 0;
+
+        if (isOutsideDrop) {
+          setDropPosition({
+            x: data.x,
+            y: data.y,
+          });
+        }
+
+        setWasDragged(false);
+
+        const target = dragContainer.current;
+        if (!target || !wasDragged) return;
+
+        const style = window.getComputedStyle(target);
+        const matrix = new DOMMatrixReadOnly(style.transform);
+        const x = matrix.m41;
+        const y = matrix.m42;
+
+        setDragPosition({ x, y });
+
+        setTimeout(() => {
+          if (checkIfItemCanBeMoved?.()) {
+            if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+
+            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector)
+              openQuantitySelector(item.stackQty, onSuccessfulDrag);
+            else onSuccessfulDrag(item.stackQty);
+          } else {
+            resetItem();
+            setIsFocused(false);
+            setDragPosition({ x: 0, y: 0 });
+          }
+        }, 50);
+      } else if (item) {
+        let isTouch = false;
+        if (
+          !isContextMenuDisabled &&
+          e.type === 'touchend' &&
+          !isSelectingShortcut
+        ) {
+          isTouch = true;
+          setIsTooltipMobileVisible(true);
+        }
+
+        if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+          setIsContextMenuVisible(!isContextMenuVisible);
+          const event = e as MouseEvent;
+
+          if (event.clientX && event.clientY) {
+            setContextMenuPosition({
+              x: event.clientX - 10,
+              y: event.clientY - 5,
+            });
+          }
+        }
+
+        onPointerDown(item.type, containerType ?? null, item);
+      }
+    };
+
+    const onDraggableStart: DraggableEventHandler = () => {
+      if (!item || isSelectingShortcut) {
+        return;
+      }
+
+      if (onDragStart && containerType) {
+        setDraggingItem(item);
+
+        onDragStart(item, slotIndex, containerType);
+      }
+    };
+
+    const onDraggableProgress: DraggableEventHandler = (_e, data) => {
+      if (
+        Math.abs(data.x - dragPosition.x) > 5 ||
+        Math.abs(data.y - dragPosition.y) > 5
+      ) {
+        setWasDragged(true);
+        setIsFocused(true);
+      }
+    };
+
     return (
       <Container
         item={item}
@@ -194,113 +295,9 @@ export const ItemSlot: React.FC<IProps> = observer(
           defaultClassName={item ? 'draggable' : 'empty-slot'}
           scale={dragScale}
           disabled={onDragStart === undefined || onDragEnd === undefined}
-          onStop={(e, data) => {
-            setDraggingItem(null);
-
-            const target = e.target as HTMLElement;
-            if (
-              target?.id.includes('shortcutSetter') &&
-              setItemShortcut &&
-              item
-            ) {
-              const index = parseInt(target.id.split('_')[1]);
-              if (!isNaN(index)) {
-                setItemShortcut(item, index);
-              }
-            }
-
-            if (wasDragged && item && !isSelectingShortcut) {
-              //@ts-ignore
-              const classes: string[] = Array.from(e.target?.classList);
-
-              const isOutsideDrop =
-                classes.some(elm => {
-                  return elm.includes('rpgui-content');
-                }) || classes.length === 0;
-
-              if (isOutsideDrop) {
-                setDropPosition({
-                  x: data.x,
-                  y: data.y,
-                });
-              }
-
-              setWasDragged(false);
-
-              const target = dragContainer.current;
-              if (!target || !wasDragged) return;
-
-              const style = window.getComputedStyle(target);
-              const matrix = new DOMMatrixReadOnly(style.transform);
-              const x = matrix.m41;
-              const y = matrix.m42;
-
-              setDragPosition({ x, y });
-
-              setTimeout(() => {
-                if (checkIfItemCanBeMoved?.()) {
-                  if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
-                    return;
-
-                  if (
-                    item.stackQty &&
-                    item.stackQty !== 1 &&
-                    openQuantitySelector
-                  )
-                    openQuantitySelector(item.stackQty, onSuccessfulDrag);
-                  else onSuccessfulDrag(item.stackQty);
-                } else {
-                  resetItem();
-                  setIsFocused(false);
-                  setDragPosition({ x: 0, y: 0 });
-                }
-              }, 50);
-            } else if (item) {
-              let isTouch = false;
-              if (
-                !isContextMenuDisabled &&
-                e.type === 'touchend' &&
-                !isSelectingShortcut
-              ) {
-                isTouch = true;
-                setIsTooltipMobileVisible(true);
-              }
-
-              if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-                setIsContextMenuVisible(!isContextMenuVisible);
-                const event = e as MouseEvent;
-
-                if (event.clientX && event.clientY) {
-                  setContextMenuPosition({
-                    x: event.clientX - 10,
-                    y: event.clientY - 5,
-                  });
-                }
-              }
-
-              onPointerDown(item.type, containerType ?? null, item);
-            }
-          }}
-          onStart={() => {
-            if (!item || isSelectingShortcut) {
-              return;
-            }
-
-            if (onDragStart && containerType) {
-              setDraggingItem(item);
-
-              onDragStart(item, slotIndex, containerType);
-            }
-          }}
-          onDrag={(_e, data) => {
-            if (
-              Math.abs(data.x - dragPosition.x) > 5 ||
-              Math.abs(data.y - dragPosition.y) > 5
-            ) {
-              setWasDragged(true);
-              setIsFocused(true);
-            }
-          }}
+          onStop={onDraggableStop}
+          onStart={onDraggableStart}
+          onDrag={onDraggableProgress}
           position={dragPosition}
           cancel=".empty-slot"
         >
@@ -362,21 +359,6 @@ export const ItemSlot: React.FC<IProps> = observer(
   }
 );
 
-export const rarityColor = (item: IItem | null) => {
-  switch (item?.rarity) {
-    case ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
-
 interface ContainerTypes {
   item: IItem | null;
   containerType?: ItemContainerType | null;
@@ -387,10 +369,11 @@ const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    display: none; 
+    opacity: 0;
   }
-  
-  
+
+  position: relative;
+
   .sprite-from-atlas-img--item {
     position: relative;
     top: 1.5rem;
@@ -401,7 +384,6 @@ const Container = styled.div<ContainerTypes>`
 }) => `0 0 4px 3px ${rarityColor(item)}`};
     //background-color: ${({ item }) => rarityColor(item)};
   }
-  position: relative;
 
   &::before {
     content: '';

package/src/components/Item/Inventory/ItemSlotRarity.ts

@@ -0,0 +1,17 @@
+import { IItem, ItemRarities } from '@rpg-engine/shared';
+
+
+export const rarityColor = (item: IItem | null) => {
+  switch (item?.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};

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

@@ -26,29 +26,29 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
   slotSpriteMask,
   item,
 }) => {
-  const renderItem = (itemToRender: IItem | null) => {
-    if (!itemToRender?.texturePath) {
+  const renderItem = (item: IItem | null) => {
+    if (!item?.texturePath) {
       return null;
     }
 
     return (
-      <ErrorBoundary key={itemToRender._id}>
+      <ErrorBoundary key={item._id}>
         <SpriteFromAtlas
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={getItemTextureKeyPath(
             {
-              key: itemToRender.texturePath,
-              texturePath: itemToRender.texturePath,
-              stackQty: itemToRender.stackQty || 1,
-              isStackable: itemToRender.isStackable,
+              key: item.texturePath,
+              texturePath: item.texturePath,
+              stackQty: item.stackQty || 1,
+              isStackable: item.isStackable,
             },
             atlasJSON
           )}
           imgScale={3}
           imgClassname="sprite-from-atlas-img--item"
         />
-        {onRenderStackInfo(itemToRender._id, itemToRender.stackQty ?? 0)}
+        {onRenderStackInfo(item._id, item.stackQty ?? 0)}
       </ErrorBoundary>
     );
   };

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -9,7 +9,7 @@ import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { Button, ButtonTypes } from '../Button';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
-import { rarityColor } from '../Item/Inventory/ItemSlot';
+import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 

package/src/hooks/useTapAndHold.ts

@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react';
+
+interface ITapAndHoldProps {
+  onHoldFn: (...args: any[]) => void;
+  holdTime?: number;
+}
+
+export const useTapAndHold = ({ onHoldFn: onHold, holdTime = 500 }: ITapAndHoldProps) => {
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+
+  const start = useCallback(() => {
+    const timeout = setTimeout(onHold, holdTime);
+    setTimer(timeout);
+  }, [onHold, holdTime]);
+
+  const clear = useCallback(() => {
+    if (timer) {
+      clearTimeout(timer);
+      setTimer(null);
+    }
+  }, [timer]);
+
+  const bind = {
+    onTouchStart: start,
+    onTouchEnd: clear,
+    onTouchCancel: clear,
+  };
+
+  return bind;
+};

package/src/stories/ItemContainer.stories.tsx

@@ -161,12 +161,6 @@ Inventory.args = {
   type: ItemContainerType.Inventory,
 };
 
-export const InventoryScaledDown = Template.bind({});
-InventoryScaledDown.args = {
-  type: ItemContainerType.Inventory,
-  scale: 0.8,
-};
-
 export const Depot = Template.bind({});
 Depot.args = {
   type: ItemContainerType.Depot,