@rpg-engine/long-bow 0.7.67 → 0.7.70

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

@@ -3,51 +3,62 @@ import React from 'react';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
-import { IContextMenuItem } from './itemContainerHelper';
-import type { ContextMenuState, TooltipState } from './ItemSlot';
+import { useItemSlotTooltip } from './context/ItemSlotTooltipContext';
 
 interface IProps {
-  tooltipState: TooltipState;
-  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
-  contextMenuState: ContextMenuState;
-  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
   isFocused: boolean;
   isContextMenuDisabled: boolean;
-  item: IItem | null;
-  contextActions: IContextMenuItem[];
+
   dragScale: number | undefined;
   onSelected?: (optionId: string, item: IItem) => void;
   atlasIMG: any;
   atlasJSON: any;
   equipmentSet?: IEquipmentSet | null;
-  isDragging: boolean;
-  isSelectingShortcut: boolean;
-  showTooltipDelayed: boolean;
 }
 
 export const ItemSlotToolTips = ({
-  tooltipState,
-  setTooltipState,
-  contextMenuState,
-  setContextMenuState,
   isFocused,
   isContextMenuDisabled,
-  item,
-  contextActions,
+
   dragScale,
   onSelected,
   atlasIMG,
   atlasJSON,
   equipmentSet,
-  isDragging,
-  isSelectingShortcut,
-  showTooltipDelayed,
 }: IProps): JSX.Element => {
-    const canShow = !isDragging || !isSelectingShortcut || showTooltipDelayed;
+  const { itemDetails, updateItemDetails } = useItemSlotTooltip();
+
+  const item = itemDetails.item;
+
+  const handleCloseTooltip = () => {
+    updateItemDetails({
+      item,
+      tooltip: { mobileVisible: false },
+    });
+  };
+
+  const handleContextMenuSelect = (optionId: string) => {
+    updateItemDetails({
+      item,
+      contextMenu: { visible: false },
+    });
+    if (item) {
+      onSelected?.(optionId, item);
+    }
+  };
+
+  const handleOutsideClick = () => {
+    updateItemDetails({
+      item,
+      contextMenu: { visible: false },
+    });
+  };
+
+  // monitor why mobileVisible is not working
 
   return (
     <>
-      {tooltipState.visible && item && !isFocused && canShow && (
+      {itemDetails.tooltip?.visible && item && !isFocused && (
         <ItemTooltip
           item={item}
           atlasIMG={atlasIMG}
@@ -56,42 +67,29 @@ export const ItemSlotToolTips = ({
         />
       )}
 
-      {tooltipState.mobileVisible && item && canShow && (
+      {itemDetails.tooltip?.mobileVisible && item && (
         <MobileItemTooltip
           item={item}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           equipmentSet={equipmentSet}
-          closeTooltip={() => {
-            setTooltipState(prev => ({ ...prev, mobileVisible: false }));
-          }}
+          closeTooltip={handleCloseTooltip}
           scale={dragScale}
-          options={contextActions}
-          onSelected={(optionId: string) => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
-            if (item) {
-              onSelected?.(optionId, item);
-            }
-          }}
+          options={itemDetails.contextMenu?.actions || []}
+          onSelected={handleContextMenuSelect}
         />
       )}
 
-      {!isContextMenuDisabled && contextMenuState.visible && contextActions && canShow && (
-        <RelativeListMenu
-          options={contextActions}
-          onSelected={(optionId: string) => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
-
-            if (item) {
-              onSelected?.(optionId, item);
-            }
-          }}
-          onOutsideClick={() => {
-            setContextMenuState(prev => ({ ...prev, visible: false }));
-          }}
-          pos={contextMenuState.position}
-        />
-      )}
+      {!isContextMenuDisabled &&
+        itemDetails.contextMenu?.visible &&
+        itemDetails.contextMenu.actions && (
+          <RelativeListMenu
+            options={itemDetails.contextMenu.actions}
+            onSelected={handleContextMenuSelect}
+            onOutsideClick={handleOutsideClick}
+            pos={itemDetails.contextMenu.position!}
+          />
+        )}
     </>
   );
 };

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

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

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

@@ -0,0 +1,95 @@
+import { IItem } from '@rpg-engine/shared';
+import React, {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { IPosition } from '../../../../types/eventTypes';
+import { IContextMenuItem } from '../itemContainerHelper';
+
+// Define smaller, focused interfaces for better readability
+interface TooltipState {
+  visible?: boolean;
+  mobileVisible?: boolean;
+}
+
+interface ContextMenuState {
+  visible?: boolean;
+  position?: IPosition;
+  actions?: IContextMenuItem[];
+}
+
+interface ItemDetails {
+  item?: IItem | null;
+  tooltip?: TooltipState;
+  contextMenu?: ContextMenuState;
+}
+
+interface ItemSlotTooltipContextProps {
+  itemDetails: ItemDetails;
+  updateItemDetails: (updates: Partial<ItemDetails>) => void;
+  clearItemDetails: () => void;
+}
+
+// Set default state with clearly defined initial values
+const defaultItemDetails: ItemDetails = {
+  item: null,
+  tooltip: { visible: false, mobileVisible: false },
+  contextMenu: { visible: false, position: { x: 0, y: 0 }, actions: [] },
+};
+
+// Create context with default values
+const ItemSlotTooltipContext = createContext<ItemSlotTooltipContextProps>({
+  itemDetails: defaultItemDetails,
+  updateItemDetails: () => {},
+  clearItemDetails: () => {},
+});
+
+// Provider component
+export const ItemSlotTooltipProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [itemDetails, setItemDetails] = useState<ItemDetails>(
+    defaultItemDetails
+  );
+
+  useEffect(() => {
+    console.log('itemDetails', itemDetails);
+  }, [itemDetails]);
+
+  // Memoize the update function to optimize performance
+  const updateItemDetails = useCallback((updates: Partial<ItemDetails>) => {
+    setItemDetails(prev => ({
+      ...prev,
+      ...updates,
+      tooltip: { ...prev.tooltip, ...updates.tooltip },
+      contextMenu: {
+        ...prev.contextMenu,
+        ...updates.contextMenu,
+        // Ensure actions are properly merged or overridden
+        actions: updates.contextMenu?.actions ?? prev.contextMenu?.actions,
+      },
+    }));
+  }, []);
+
+  const clearItemDetails = useCallback(() => {
+    setItemDetails(defaultItemDetails);
+  }, []);
+
+  return (
+    <ItemSlotTooltipContext.Provider
+      value={{ itemDetails, updateItemDetails, clearItemDetails }}
+    >
+      {children}
+    </ItemSlotTooltipContext.Provider>
+  );
+};
+
+// Custom hook for consuming the context
+export const useItemSlotTooltip = (): ItemSlotTooltipContextProps => {
+  return useContext(ItemSlotTooltipContext);
+};

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

@@ -1,8 +1,8 @@
 import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { DraggableEventHandler } from 'react-draggable';
-import { useDragging } from '../context/DraggingContext';
-import { ContextMenuState, DragState, TooltipState } from '../ItemSlot';
+import { useItemSlotDragging } from '../context/ItemSlotDraggingContext';
+import { useItemSlotTooltip } from '../context/ItemSlotTooltipContext';
 
 interface IUseItemSlotDragAndDrop {
   isDepotSystem: boolean;
@@ -30,9 +30,6 @@ interface IUseItemSlotDragAndDrop {
     onSuccess: (quantity?: number) => void
   ) => void;
   isContextMenuDisabled: boolean;
-  setTooltipState: React.Dispatch<React.SetStateAction<TooltipState>>;
-  setContextMenuState: React.Dispatch<React.SetStateAction<ContextMenuState>>;
-  contextMenuState: ContextMenuState;
 }
 
 export const useItemSlotDragAndDrop = ({
@@ -50,18 +47,16 @@ export const useItemSlotDragAndDrop = ({
   slotIndex,
   openQuantitySelector,
   isContextMenuDisabled,
-  setTooltipState,
-  setContextMenuState,
 }: IUseItemSlotDragAndDrop) => {
   const dragContainer = useRef<HTMLDivElement>(null);
-  const { item: draggingItem, setDraggingItem } = useDragging();
+  const {
+    item: draggingItem,
+    setDraggingItem,
+    dragState,
+    setDragState,
+  } = useItemSlotDragging();
 
-  const [dragState, setDragState] = useState<DragState>({
-    isFocused: false,
-    wasDragged: false,
-    position: { x: 0, y: 0 },
-    dropPosition: null,
-  });
+  const { updateItemDetails, itemDetails } = useItemSlotTooltip();
 
   useEffect(() => {
     setDragState(prev => ({
@@ -69,7 +64,7 @@ export const useItemSlotDragAndDrop = ({
       position: { x: 0, y: 0 },
       isFocused: false,
     }));
-  }, [item, isDepotSystem]);
+  }, [item, isDepotSystem, setDragState]);
 
   useEffect(() => {
     if (onDrop && item && dragState.dropPosition) {
@@ -91,17 +86,24 @@ export const useItemSlotDragAndDrop = ({
   }, []);
 
   const resetDragState = useCallback(() => {
-    setTooltipState(prev => ({ ...prev, visible: false }));
+    console.log('RESET_DRAG_STATE!');
     setDragState(prev => ({
       ...prev,
       wasDragged: false,
       isFocused: false,
       position: { x: 0, y: 0 },
     }));
-  }, [setTooltipState]);
+    setDraggingItem(null);
+
+    // Reset tooltip visibility
+    updateItemDetails({
+      tooltip: { visible: false, mobileVisible: false },
+    });
+  }, [updateItemDetails, setDragState]);
 
   const handleSuccessfulDrag = useCallback(
     (quantity?: number) => {
+      console.log('HANDLE_SUCCESSFUL_DRAG!');
       resetDragState();
       if (quantity !== -1 && item) {
         onDragEnd?.(quantity);
@@ -111,31 +113,35 @@ export const useItemSlotDragAndDrop = ({
   );
 
   const onDraggableStart: DraggableEventHandler = useCallback(() => {
+    console.log('ON_DRAGGABLE_START!');
     if (!item || isSelectingShortcut) return;
     if (onDragStart && containerType) {
       onDragStart(item, slotIndex, containerType);
     }
+
+    if (!draggingItem && item) {
+      console.log('!!! SETTING DRAGGING ITEM ', item._id);
+      setDraggingItem(item);
+    }
   }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
 
   const onDraggableProgress: DraggableEventHandler = useCallback(
     (_e, data) => {
+      console.log('ON_DRAGGABLE_PROGRESS!');
       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]
+    [dragState.position, draggingItem, item, setDraggingItem, setDragState]
   );
 
   const onDraggableStop: DraggableEventHandler = useCallback(
     (e, data) => {
-      setTimeout(() => {
-        setDraggingItem(null);
-      }, 50);
+      console.log('ON_DRAGGABLE_STOP!');
+
       const target = e.target as HTMLElement;
+
       if (!target) return;
 
       target.classList.remove('react-draggable-dragging');
@@ -178,26 +184,39 @@ export const useItemSlotDragAndDrop = ({
         }, 50);
       } else if (item) {
         const isTouch = e.type === 'touchend';
-        if (
-          !isContextMenuDisabled &&
-          isTouch &&
-          !isSelectingShortcut &&
-          !draggingItem
-        ) {
-          setTooltipState(prev => ({ ...prev, mobileVisible: true }));
+
+        console.log(`Debug: 
+          isTouch: ${isTouch},
+          isSelectingShortcut: ${isSelectingShortcut},
+          draggingItem: ${draggingItem},
+          dragginState: ${JSON.stringify(dragState)}
+        `);
+
+        if (!isContextMenuDisabled && isTouch && !isSelectingShortcut) {
+          updateItemDetails({
+            item,
+            tooltip: { 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,
+
+          updateItemDetails({
+            item,
+            contextMenu: {
+              visible: !itemDetails?.contextMenu?.visible,
+              position: {
+                x: event.clientX - 10,
+                y: event.clientY - 5,
+              },
             },
-          }));
+          });
         }
 
         onPointerDown?.(item.type, containerType ?? null, item);
       }
+
+      console.log('setting draggingItem to null');
+      setDraggingItem(null);
     },
     [
       dragState.wasDragged,
@@ -209,8 +228,6 @@ export const useItemSlotDragAndDrop = ({
       handleSuccessfulDrag,
       resetDragState,
       isContextMenuDisabled,
-      setTooltipState,
-      setContextMenuState,
       onPointerDown,
       containerType,
       setItemShortcut,

package/src/hooks/useCursorPosition.ts

@@ -6,37 +6,46 @@ interface ICursorPositionProps {
   scale?: number;
 }
 
-export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPosition => {
+export const useCursorPosition = ({
+  scale = 1,
+}: ICursorPositionProps): IPosition => {
   const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 });
 
-  const scalePosition = useCallback((x: number, y: number): IPosition => {
-    return {
-      x: ((x - GRID_WIDTH / 2) / scale) + GRID_WIDTH / 2,
-      y: ((y - GRID_HEIGHT / 2) / scale) + GRID_HEIGHT / 2,
-    };
-  }, [scale]);
+  const scalePosition = useCallback(
+    (x: number, y: number): IPosition => {
+      return {
+        x: (x - GRID_WIDTH / 2) / scale + GRID_WIDTH / 2,
+        y: (y - GRID_HEIGHT / 2) / scale + GRID_HEIGHT / 2,
+      };
+    },
+    [scale]
+  );
 
-  const setFromEvent = useCallback((e: MouseEvent | TouchEvent) => {
-    let x, y;
+  const setFromEvent = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      let x, y;
 
-    if ('touches' in e) {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
-    } else {
-      x = e.clientX;
-      y = e.clientY;
-    }
+      if ('touches' in e) {
+        x = e.touches[0].clientX;
+        y = e.touches[0].clientY;
+      } else {
+        x = e.clientX;
+        y = e.clientY;
+      }
 
-    const scaledPosition = scalePosition(x, y);
-    setPosition(scaledPosition);
-  }, [scale, scalePosition]);
+      const scaledPosition = scalePosition(x, y);
+      setPosition(scaledPosition);
+    },
+    [scale, scalePosition]
+  );
 
   const cleanup = useCallback(() => {
     setPosition({ x: 0, y: 0 });
   }, []);
 
   useEffect(() => {
-    const handleEvent = (e: Event) => setFromEvent(e as MouseEvent | TouchEvent);
+    const handleEvent = (e: Event) =>
+      setFromEvent(e as MouseEvent | TouchEvent);
 
     window.addEventListener('mousemove', handleEvent);
     window.addEventListener('touchmove', handleEvent);

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/dist/components/Item/Inventory/context/DraggingContext.d.ts

@@ -1,11 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-export declare const useDragging: () => {
-    item: IItem | null;
-    setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-};
-interface IProps {
-    children: React.ReactNode;
-}
-export declare const DraggingProvider: ({ children }: IProps) => JSX.Element;
-export {};

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

@@ -1,26 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React, { createContext, useContext, useState } from 'react';
-
-const DraggingContext = createContext<{
-  item: IItem | null;
-  setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
-}>({
-  item: null,
-  setDraggingItem: () => {},
-});
-
-export const useDragging = () => useContext(DraggingContext);
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-export const DraggingProvider = ({ children }: IProps) => {
-  const [item, setDraggingItem] = useState<IItem | null>(null);
-
-  return (
-    <DraggingContext.Provider value={{ item, setDraggingItem }}>
-      {children}
-    </DraggingContext.Provider>
-  );
-};