@rpg-engine/long-bow 0.7.68 → 0.7.71

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

@@ -1,21 +1,24 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
 import React from 'react';
+import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
 import { IContextMenuItem } from './itemContainerHelper';
-import type { ContextMenuState, TooltipState } from './ItemSlot';
 
 interface IProps {
-  tooltipState: TooltipState;
-  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
-  contextMenuState: ContextMenuState;
-  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+  isTooltipVisible: boolean;
   isFocused: boolean;
+  isContextMenuVisible: boolean;
   isContextMenuDisabled: boolean;
   item: IItem | null;
+  isTooltipMobileVisible: boolean;
   contextActions: IContextMenuItem[];
+  contextMenuPosition: IPosition;
   dragScale: number | undefined;
+  setIsContextMenuVisible: (visible: boolean) => void;
+  setIsTooltipMobileVisible: (visible: boolean) => void;
+  setIsTooltipVisible: (visible: boolean) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   atlasIMG: any;
   atlasJSON: any;
@@ -23,15 +26,17 @@ interface IProps {
 }
 
 export const ItemSlotToolTips = ({
-  tooltipState,
-  setTooltipState,
-  contextMenuState,
-  setContextMenuState,
+  isTooltipVisible,
   isFocused,
+  isContextMenuVisible,
   isContextMenuDisabled,
   item,
   contextActions,
+  contextMenuPosition,
   dragScale,
+  setIsContextMenuVisible,
+  setIsTooltipMobileVisible,
+  isTooltipMobileVisible,
   onSelected,
   atlasIMG,
   atlasJSON,
@@ -39,7 +44,7 @@ export const ItemSlotToolTips = ({
 }: IProps): JSX.Element => {
   return (
     <>
-      {tooltipState.visible && item && !isFocused && (
+      {isTooltipVisible && item && !isFocused && (
         <ItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -48,19 +53,19 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {tooltipState.mobileVisible && item && (
+      {isTooltipMobileVisible && item && (
         <MobileItemTooltip
           item={item}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           equipmentSet={equipmentSet}
           closeTooltip={() => {
-            setTooltipState(prev => ({ ...prev, mobileVisible: false }));
+            setIsTooltipMobileVisible(false);
           }}
           scale={dragScale}
           options={contextActions}
           onSelected={(optionId: string) => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
+            setIsContextMenuVisible(false);
             if (item) {
               onSelected?.(optionId, item);
             }
@@ -68,20 +73,19 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {!isContextMenuDisabled && contextMenuState.visible && contextActions && (
+      {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
         <RelativeListMenu
           options={contextActions}
           onSelected={(optionId: string) => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
-
+            setIsContextMenuVisible(false);
             if (item) {
               onSelected?.(optionId, item);
             }
           }}
           onOutsideClick={() => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
+            setIsContextMenuVisible(false);
           }}
-          pos={contextMenuState.position}
+          pos={contextMenuPosition}
         />
       )}
     </>

package/src/components/Item/Inventory/context/DraggingContext.tsx

@@ -1,52 +1,26 @@
 import { IItem } from '@rpg-engine/shared';
 import React, { createContext, useContext, useState } from 'react';
 
-export interface DragState {
-  isFocused: boolean;
-  wasDragged: boolean;
-  position: { x: number; y: number };
-  dropPosition: { x: number; y: number } | null;
-}
-
-interface DraggingContextType {
+const DraggingContext = createContext<{
   item: IItem | null;
   setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-  dragState: DragState;
-  setDragState: React.Dispatch<React.SetStateAction<DragState>>;
-}
-
-const DraggingContext = createContext<DraggingContextType>({
+}>({
   item: null,
   setDraggingItem: () => {},
-  dragState: {
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  },
-  setDragState: () => {},
 });
 
+export const useDragging = () => useContext(DraggingContext);
+
 interface IProps {
   children: React.ReactNode;
 }
 
 export const DraggingProvider = ({ children }: IProps) => {
   const [item, setDraggingItem] = useState<IItem | null>(null);
-  const [dragState, setDragState] = useState<DragState>({
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  });
 
   return (
-    <DraggingContext.Provider
-      value={{ item, setDraggingItem, dragState, setDragState }}
-    >
+    <DraggingContext.Provider value={{ item, setDraggingItem }}>
       {children}
     </DraggingContext.Provider>
   );
 };
-
-export const useDragging = () => useContext(DraggingContext);

package/src/mocks/skills.mocks.ts

@@ -5,10 +5,6 @@ import {
   getXPForLevel,
 } from '@rpg-engine/shared';
 
-for (let level = 2; level <= 20; level++) {
-  console.log(`SP for level ${level}: ${getSPForLevel(level)}`);
-}
-
 export const skillMock = {
   _id: '62aebda8785a9f0089a4f757',
   stamina: {

package/src/stories/UI/containers/ItemContainer.stories.tsx

@@ -1,4 +1,4 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
+import { IItem, ItemContainerType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
 import {
@@ -21,26 +21,10 @@ const meta: Meta = {
 
 export default meta;
 
-const onMouseOver = (_event: any, slotIndex: number, item: IItem | null) => {
-  if (!item) {
-    console.log(`Free at ${slotIndex}`);
-    return;
-  }
-  console.log(`${item.name} at ${slotIndex}`);
-};
-
 const onSelected = (payload: string, item: IItem) => {
   console.log('onSelected', payload, item);
 };
 
-const onItemClick = (
-  item: IItem,
-  ItemType: ItemType,
-  itemContainerType: ItemContainerType | null
-) => {
-  console.log(item, ItemType, itemContainerType, 'was clicked!');
-};
-
 // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
 let dragItem: IItem | null = null;
 let dropItem: IItem | null = null;
@@ -69,9 +53,9 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({
     <ItemContainer
       itemContainer={itemContainer}
       onClose={() => console.log('closing item container')}
-      onMouseOver={onMouseOver}
+      onMouseOver={() => {}}
       onSelected={onSelected}
-      onItemClick={onItemClick}
+      onItemClick={() => {}}
       checkIfItemCanBeMoved={() => allowedToDrop}
       onItemDragEnd={quantity => {
         // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
@@ -115,22 +99,11 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({
       onItemPlaceDrop={(item, slotIndex) => {
         // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
 
-        console.log({
-          item: item?.name,
-          sI: slotIndex,
-          dragK: dragItem?.key,
-          itemK: item?.key,
-          dragSlot,
-          slotIndex,
-        });
-
         if (!item || (dragItem?.key === item?.key && dragSlot !== slotIndex)) {
-          console.log('allow');
           allowedToDrop = true;
           dropSlot = slotIndex;
           dropItem = item ? item : null;
         } else {
-          console.log('not allowing drop');
           allowedToDrop = false;
           dropSlot = -1;
           dropItem = null;

package/dist/components/Item/Inventory/hooks/useItemSlotDragAndDrop.d.ts

@@ -1,43 +0,0 @@
-/// <reference types="react" />
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { DraggableEventHandler } from 'react-draggable';
-import { ContextMenuState, TooltipState } from '../ItemSlot';
-interface IUseItemSlotDragAndDrop {
-    isDepotSystem: boolean;
-    item: IItem;
-    onDrop: (item: IItem, dropPosition: {
-        x: number;
-        y: number;
-    }) => void;
-    onDragEnd?: (quantity?: number) => void;
-    checkIfItemCanBeMoved?: () => boolean;
-    checkIfItemShouldDragEnd?: () => boolean;
-    setItemShortcut?: (item: IItem, index: number) => void;
-    isSelectingShortcut?: boolean;
-    onDragStart?: (item: IItem, slotIndex: number, containerType: ItemContainerType) => void;
-    onPointerDown: (ItemType: ItemType, itemContainerType: ItemContainerType | null, item: IItem) => void;
-    containerType: ItemContainerType;
-    slotIndex: number;
-    openQuantitySelector: (quantity: number, onSuccess: (quantity?: number) => void) => void;
-    isContextMenuDisabled: boolean;
-    setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
-    setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
-    contextMenuState: ContextMenuState;
-}
-export declare const useItemSlotDragAndDrop: ({ isDepotSystem, item, onDrop, onDragEnd, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, setItemShortcut, isSelectingShortcut, onDragStart, onPointerDown, containerType, slotIndex, openQuantitySelector, isContextMenuDisabled, setTooltipState, setContextMenuState, }: IUseItemSlotDragAndDrop) => {
-    dragContainer: import("react").RefObject<HTMLDivElement>;
-    dragState: import("../context/DraggingContext").DragState;
-    draggingItem: IItem | null;
-    setDraggingItem: import("react").Dispatch<import("react").SetStateAction<IItem | null>>;
-    getContainerBounds: () => {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-    };
-    onDraggableStart: DraggableEventHandler;
-    onDraggableProgress: DraggableEventHandler;
-    onDraggableStop: DraggableEventHandler;
-    resetItem: () => void;
-};
-export {};

package/src/components/Item/Inventory/hooks/useItemSlotDragAndDrop.ts

@@ -1,228 +0,0 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { useCallback, useEffect, useRef } from 'react';
-import { DraggableEventHandler } from 'react-draggable';
-import { useDragging } from '../context/DraggingContext';
-import { ContextMenuState, TooltipState } from '../ItemSlot';
-
-interface IUseItemSlotDragAndDrop {
-  isDepotSystem: boolean;
-  item: IItem;
-  onDrop: (item: IItem, dropPosition: { x: number; y: number }) => void;
-  onDragEnd?: (quantity?: number) => void;
-  checkIfItemCanBeMoved?: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  setItemShortcut?: (item: IItem, index: number) => void;
-  isSelectingShortcut?: boolean;
-  onDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    containerType: ItemContainerType
-  ) => void;
-  onPointerDown: (
-    ItemType: ItemType,
-    itemContainerType: ItemContainerType | null,
-    item: IItem
-  ) => void;
-  containerType: ItemContainerType;
-  slotIndex: number;
-  openQuantitySelector: (
-    quantity: number,
-    onSuccess: (quantity?: number) => void
-  ) => void;
-  isContextMenuDisabled: boolean;
-  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
-  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
-  contextMenuState: ContextMenuState;
-}
-
-export const useItemSlotDragAndDrop = ({
-  isDepotSystem,
-  item,
-  onDrop,
-  onDragEnd,
-  checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
-  setItemShortcut,
-  isSelectingShortcut,
-  onDragStart,
-  onPointerDown,
-  containerType,
-  slotIndex,
-  openQuantitySelector,
-  isContextMenuDisabled,
-  setTooltipState,
-  setContextMenuState,
-}: IUseItemSlotDragAndDrop) => {
-  const dragContainer = useRef<HTMLDivElement>(null);
-  const {
-    item: draggingItem,
-    setDraggingItem,
-    dragState,
-    setDragState,
-  } = useDragging();
-
-  useEffect(() => {
-    setDragState(prev => ({
-      ...prev,
-      position: { x: 0, y: 0 },
-      isFocused: false,
-    }));
-  }, [item, isDepotSystem, setDragState]);
-
-  useEffect(() => {
-    if (onDrop && item && dragState.dropPosition) {
-      onDrop(item, dragState.dropPosition);
-      setDragState(prev => ({ ...prev, dropPosition: null }));
-    }
-  }, [dragState.dropPosition, item, onDrop]);
-
-  const getContainerBounds = useCallback(() => {
-    const container = dragContainer.current;
-    if (!container) return { left: 0, top: 0, right: 0, bottom: 0 };
-    const rect = container.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.top,
-      right: window.innerWidth - rect.right,
-      bottom: window.innerHeight - rect.bottom,
-    };
-  }, []);
-
-  const resetDragState = useCallback(() => {
-    setDragState(prev => ({
-      ...prev,
-      wasDragged: false,
-      isFocused: false,
-      position: { x: 0, y: 0 },
-    }));
-  }, [setTooltipState, setDragState]);
-
-  const handleSuccessfulDrag = useCallback(
-    (quantity?: number) => {
-      resetDragState();
-      if (quantity !== -1 && item) {
-        onDragEnd?.(quantity);
-      }
-    },
-    [item, onDragEnd, resetDragState]
-  );
-
-  const onDraggableStart: DraggableEventHandler = useCallback(() => {
-    if (!item || isSelectingShortcut) return;
-    if (onDragStart && containerType) {
-      onDragStart(item, slotIndex, containerType);
-    }
-  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
-
-  const onDraggableProgress: DraggableEventHandler = useCallback(
-    (_e, data) => {
-      const { x, y } = dragState.position;
-      if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
-        setDragState(prev => ({ ...prev, wasDragged: true, isFocused: true }));
-      }
-      if (!draggingItem) {
-        setDraggingItem(item);
-      }
-    },
-    [dragState.position, draggingItem, item, setDraggingItem, setDragState]
-  );
-
-  const onDraggableStop: DraggableEventHandler = useCallback(
-    (e, data) => {
-      setTimeout(() => {
-        setDraggingItem(null);
-      }, 50);
-      const target = e.target as HTMLElement;
-      if (!target) return;
-
-      target.classList.remove('react-draggable-dragging');
-
-      if (target?.id.includes('shortcutSetter') && setItemShortcut && item) {
-        const index = parseInt(target.id.split('_')[1]);
-        if (!isNaN(index)) {
-          setItemShortcut(item, index);
-        }
-      }
-
-      if (dragState.wasDragged && item && !isSelectingShortcut) {
-        const classes: string[] = Array.from(target.classList);
-        const isOutsideDrop =
-          classes.some(elm => elm.includes('rpgui-content')) ||
-          classes.length === 0;
-
-        if (isOutsideDrop) {
-          setDragState(prev => ({
-            ...prev,
-            dropPosition: { x: data.x, y: data.y },
-          }));
-        }
-
-        setDragState(prev => ({ ...prev, wasDragged: false }));
-
-        setTimeout(() => {
-          if (
-            checkIfItemCanBeMoved?.() &&
-            (!checkIfItemShouldDragEnd || checkIfItemShouldDragEnd())
-          ) {
-            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-              openQuantitySelector(item.stackQty, handleSuccessfulDrag);
-            } else {
-              handleSuccessfulDrag(item.stackQty);
-            }
-          } else {
-            resetDragState();
-          }
-        }, 50);
-      } else if (item) {
-        const isTouch = e.type === 'touchend';
-        if (
-          !isContextMenuDisabled &&
-          isTouch &&
-          !isSelectingShortcut &&
-          !draggingItem
-        ) {
-          setTooltipState(prev => ({ ...prev, mobileVisible: true }));
-        } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-          const event = e as MouseEvent;
-          setContextMenuState(prev => ({
-            visible: !prev.visible,
-            position: {
-              x: event.clientX - 10,
-              y: event.clientY - 5,
-            },
-          }));
-        }
-
-        onPointerDown?.(item.type, containerType ?? null, item);
-      }
-    },
-    [
-      dragState.wasDragged,
-      item,
-      isSelectingShortcut,
-      checkIfItemCanBeMoved,
-      checkIfItemShouldDragEnd,
-      openQuantitySelector,
-      handleSuccessfulDrag,
-      resetDragState,
-      isContextMenuDisabled,
-      setTooltipState,
-      setContextMenuState,
-      onPointerDown,
-      containerType,
-      setItemShortcut,
-    ]
-  );
-
-  return {
-    dragContainer,
-    dragState,
-    draggingItem,
-    setDraggingItem,
-    getContainerBounds,
-    onDraggableStart,
-    onDraggableProgress,
-    onDraggableStop,
-    resetItem: resetDragState,
-  };
-};