@rpg-engine/long-bow 0.5.27 → 0.5.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.27",
+  "version": "0.5.29",
   "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,14 +3,13 @@ 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 { ItemSlotRenderer } from './ItemSlotRenderer';
@@ -156,6 +155,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 +294,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 +358,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,20 +368,9 @@ const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    display: none; 
-  }
-  
-  
-  .sprite-from-atlas-img--item {
-    position: relative;
-    top: 1.5rem;
-    left: 1.5rem;
-    border-color: ${({ item }) => rarityColor(item)};
-    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
-  item,
-}) => `0 0 4px 3px ${rarityColor(item)}`};
-    //background-color: ${({ item }) => rarityColor(item)};
+    opacity: 0;
   }
+
   position: relative;
 
   &::before {
@@ -433,7 +403,7 @@ const Container = styled.div<ContainerTypes>`
 const ItemContainer = styled.div<{ isFocused?: boolean }>`
   width: 64px;
   height: 64px;
-  // This fixes an issue where if you drag an item inside of a scrollable container (overflow), its cut out
+
   position: relative;
   ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
 `;

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

@@ -0,0 +1,46 @@
+import { IItem, ItemRarities } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  item: IItem | null;
+  children: React.ReactNode;
+}
+
+export const ItemSlotRarity = ({ children, item }: IProps) => {
+  if (!item) return <>{children}</>;
+
+  return <Container item={item}>{children}</Container>;
+};
+
+interface IContainer {
+  item: IItem | null;
+}
+
+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;
+  }
+};
+const Container = styled.div<IContainer>`
+  .sprite-from-atlas-img--item {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+    border-color: ${({ item }) => rarityColor(item)};
+    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
+  item,
+}) => `0 0 4px 3px ${rarityColor(item)}`};
+    //background-color: ${({ item }) => rarityColor(item)};
+  }
+
+`;

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

@@ -10,6 +10,7 @@ import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from './ErrorBoundary';
 import { EquipmentSlotSpriteByType } from './ItemSlot';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
+import { ItemSlotRarity } from './ItemSlotRarity';
 
 interface IProps {
   containerType: ItemContainerType | null | undefined;
@@ -26,29 +27,31 @@ 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}>
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={getItemTextureKeyPath(
-            {
-              key: itemToRender.texturePath,
-              texturePath: itemToRender.texturePath,
-              stackQty: itemToRender.stackQty || 1,
-              isStackable: itemToRender.isStackable,
-            },
-            atlasJSON
-          )}
-          imgScale={3}
-          imgClassname="sprite-from-atlas-img--item"
-        />
-        {onRenderStackInfo(itemToRender._id, itemToRender.stackQty ?? 0)}
+      <ErrorBoundary key={item._id}>
+        <ItemSlotRarity item={item}>
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={getItemTextureKeyPath(
+              {
+                key: item.texturePath,
+                texturePath: item.texturePath,
+                stackQty: item.stackQty || 1,
+                isStackable: item.isStackable,
+              },
+              atlasJSON
+            )}
+            imgScale={3}
+            imgClassname="sprite-from-atlas-img--item"
+          />
+          {onRenderStackInfo(item._id, item.stackQty ?? 0)}
+        </ItemSlotRarity>
       </ErrorBoundary>
     );
   };
@@ -81,12 +84,8 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
     switch (containerType) {
       case ItemContainerType.Equipment:
         return renderEquipment(itemToRender);
-      case ItemContainerType.Inventory:
-        return renderItem(itemToRender);
-      case ItemContainerType.Depot:
-        return renderItem(itemToRender);
       default:
-        return null;
+        return renderItem(itemToRender);
     }
   };
 

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/CircullarController.stories.tsx

@@ -31,7 +31,7 @@ Default.args = {
   onActionClick: () => console.log('action'),
   onCancelClick: () => console.log('cancel attack'),
   mana: 100,
-  inventory: itemContainerMock,
+  inventory: itemContainerMock(),
   atlasJSON,
   atlasIMG,
 };

package/src/stories/Shortcuts.stories.tsx

@@ -35,5 +35,5 @@ Default.args = {
   mana: 100,
   atlasIMG,
   atlasJSON,
-  inventory: itemContainerMock,
+  inventory: itemContainerMock(),
 };