@rpg-engine/long-bow 0.5.23 → 0.5.24

package/dist/mocks/itemContainer.mocks.d.ts

@@ -1,3 +1,3 @@
 import { IItem, IItemContainer } from '@rpg-engine/shared';
 export declare const items: IItem[];
-export declare const itemContainerMock: IItemContainer;
+export declare const itemContainerMock: (props?: Record<string, unknown> | undefined) => IItemContainer;

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

@@ -1,5 +1,10 @@
+import { ItemContainerType } from '@rpg-engine/shared';
 import { Meta } from '@storybook/react';
 import { IItemContainerProps } from '../../src/components/Item/Inventory/ItemContainer';
 declare const meta: Meta;
 export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps>;
+interface ITemplateProps {
+    type: ItemContainerType;
+}
+export declare const Inventory: 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.23",
+  "version": "0.5.24",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -1,7 +1,7 @@
 import { getItemTextureKeyPath } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
-import { useCursorPosition } from '../../../hooks/useMousePosition';
+import { useCursorPosition } from '../../../hooks/useCursorPosition';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
 import { useDragging } from './context/DraggingContext';

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

@@ -83,6 +83,8 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
         return renderEquipment(itemToRender);
       case ItemContainerType.Inventory:
         return renderItem(itemToRender);
+      case ItemContainerType.Depot:
+        return renderItem(itemToRender);
       default:
         return null;
     }

package/src/hooks/useCursorPosition.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+type CursorPosition = {
+  x: number;
+  y: number;
+};
+
+export const useCursorPosition = (): CursorPosition => {
+  const [position, setPosition] = useState<CursorPosition>({ x: 0, y: 0 });
+
+  const setFromEvent = (e: MouseEvent | TouchEvent) => {
+    if ('touches' in e) {
+      setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+    } else {
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('mousemove', setFromEvent);
+    window.addEventListener('touchmove', setFromEvent);
+
+    return () => {
+      window.removeEventListener('mousemove', setFromEvent);
+      window.removeEventListener('touchmove', setFromEvent);
+    };
+  }, []);
+
+  return position;
+};

package/src/hooks/useShortcuts.ts

@@ -0,0 +1,50 @@
+import { IItem, IShortcut, ShortcutType } from '@rpg-engine/shared';
+import { useCallback, useEffect, useState } from 'react';
+import { SHORTCUTS_STORAGE_KEY, defaultShortcut } from '../components/Spellbook/constants';
+
+interface IUseShortcuts {
+  itemContainer: { slots: Record<number, IItem | null | undefined>; };
+}
+
+export const useShortcuts = ({ itemContainer }: IUseShortcuts) => {
+  const [shortcuts, setShortcuts] = useState<IShortcut[]>([]);
+
+  useEffect(() => {
+    const storedShortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
+    if (storedShortcuts) {
+      setShortcuts(JSON.parse(storedShortcuts));
+    }
+  }, []);
+
+  const setItemShortcut = useCallback((key: string, index: number): void => {
+    const storedShortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
+    let updatedShortcuts = storedShortcuts ? JSON.parse(storedShortcuts) as IShortcut[] : [];
+
+    let item: IItem | null = null;
+    Object.keys(itemContainer.slots).forEach(slot => {
+      const slotItem = itemContainer.slots[parseInt(slot)];
+      if (slotItem && slotItem.key === key) {
+        item = slotItem;
+      }
+    });
+
+    if (!item) return;
+
+    updatedShortcuts[index] = { type: ShortcutType.Item, payload: item };
+    localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(updatedShortcuts));
+    setShortcuts(updatedShortcuts);
+  }, [itemContainer]);
+
+  const removeShortcut = useCallback((index: number): void => {
+    const storedShortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
+    let updatedShortcuts = storedShortcuts ? JSON.parse(storedShortcuts) as IShortcut[] : [];
+
+    if (updatedShortcuts[index]) {
+      updatedShortcuts[index] = defaultShortcut;
+      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(updatedShortcuts));
+      setShortcuts(updatedShortcuts);
+    }
+  }, []);
+
+  return { shortcuts, setItemShortcut, removeShortcut };
+};

package/src/mocks/itemContainer.mocks.ts

@@ -5,7 +5,7 @@ import {
   ItemSlotType,
   ItemSubType,
   ItemType,
-  UserAccountTypes,
+  UserAccountTypes
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -578,33 +578,40 @@ export const items: IItem[] = [
   },
 ];
 
-export const itemContainerMock: IItemContainer = {
-  _id: '629ba0b6fe3f43002f58f23b',
-  name: 'Item Container',
-  owner: '629ba0b6fe3f43002f58f23b',
-  slotQty: 60,
-  slots: {
-    0: items[0],
-    1: items[1],
-    2: items[2],
-    3: items[3],
-    4: items[4],
-    5: items[5],
-    6: items[6],
-    7: items[7],
-    8: items[8],
-    9: items[9],
-    10: items[10],
-    11: items[11],
-    12: items[12],
-    13: items[13],
-    14: items[14],
-    15: items[15],
-    //remaining slots are considered null by default
-  },
-  allowedItemTypes: [],
-  parentItem: '629ba0b6fe3f43002f58f239',
-  isEmpty: false,
-  createdAt: '2022-06-04T18:13:10.581Z',
-  updatedAt: '2022-06-04T18:13:10.581Z',
-};
+export const itemContainerMock = (
+  props?: Record<string, unknown>
+): IItemContainer => {
+  {
+    return {
+      _id: '629ba0b6fe3f43002f58f23b',
+      name: 'Item Container',
+      owner: '629ba0b6fe3f43002f58f23b',
+      slotQty: 60,
+      slots: {
+        0: items[0],
+        1: items[1],
+        2: items[2],
+        3: items[3],
+        4: items[4],
+        5: items[5],
+        6: items[6],
+        7: items[7],
+        8: items[8],
+        9: items[9],
+        10: items[10],
+        11: items[11],
+        12: items[12],
+        13: items[13],
+        14: items[14],
+        15: items[15],
+        //remaining slots are considered null by default
+      },
+      allowedItemTypes: [],
+      parentItem: '629ba0b6fe3f43002f58f239',
+      isEmpty: false,
+      createdAt: '2022-06-04T18:13:10.581Z',
+      updatedAt: '2022-06-04T18:13:10.581Z',
+      ...props,
+    };
+  }
+}

package/src/stories/ItemContainer.stories.tsx

@@ -1,12 +1,6 @@
-import {
-  IItem,
-  IShortcut,
-  ItemContainerType,
-  ItemType,
-  ShortcutType,
-} from '@rpg-engine/shared';
+import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   IItemContainerProps,
   ItemContainer,
@@ -14,10 +8,7 @@ import {
 import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
 import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
-import {
-  defaultShortcut,
-  SHORTCUTS_STORAGE_KEY,
-} from '../components/Spellbook/constants';
+import { useShortcuts } from '../hooks/useShortcuts';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
@@ -55,69 +46,18 @@ let allowedToDrop = false;
 let dragSlot = -1;
 let dropSlot = -1;
 
-const Template: Story<IItemContainerProps> = () => {
-  const [itemContainer, setItemContainer] = useState(itemContainerMock);
-  const [shortcuts, setShortcuts] = useState<IShortcut[]>([]);
-
-  useEffect(() => {
-    const shortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
-    if (shortcuts) {
-      setShortcuts(JSON.parse(shortcuts));
-    }
-  }, []);
-
-  const setItemShortcut = (key: string, index: number) => {
-    const shortcuts = JSON.parse(
-      localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
-    ) as IShortcut[];
-
-    let item: IItem | null = null;
-
-    Object.keys(itemContainer.slots).forEach(slot => {
-      const slotItem = itemContainer.slots?.[parseInt(slot)];
-      if (slotItem && slotItem.key === key) {
-        item = slotItem;
-      }
-    });
-
-    if (!item) {
-      return;
-    }
-
-    if (!shortcuts) {
-      const newShortcuts: IShortcut[] = Array(6).fill(defaultShortcut);
-
-      newShortcuts[index] = {
-        type: ShortcutType.Item,
-        payload: item,
-      };
+interface ITemplateProps {
+  type: ItemContainerType;
+}
 
-      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(newShortcuts));
-    } else {
-      shortcuts[index] = {
-        type: ShortcutType.Item,
-        payload: item,
-      };
+const Template: Story<IItemContainerProps & ITemplateProps> = ({ type }) => {
+  const mock = itemContainerMock({ name: type });
 
-      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
-    }
+  const [itemContainer, setItemContainer] = useState(mock);
 
-    setShortcuts(shortcuts);
-  };
-
-  const removeShortcut = (index: number) => {
-    const shortcuts = JSON.parse(
-      localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
-    );
-
-    if (!shortcuts) return;
-
-    shortcuts[index] = defaultShortcut;
-
-    localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
-
-    setShortcuts(shortcuts);
-  };
+  const { shortcuts, setItemShortcut, removeShortcut } = useShortcuts({
+    itemContainer: mock,
+  });
 
   return (
     <RPGUIRoot>
@@ -185,7 +125,7 @@ const Template: Story<IItemContainerProps> = () => {
           }
         }}
         onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
-        type={ItemContainerType.Inventory}
+        type={type}
         atlasIMG={atlasIMG}
         atlasJSON={atlasJSON}
         shortcuts={shortcuts}
@@ -198,4 +138,12 @@ const Template: Story<IItemContainerProps> = () => {
   );
 };
 
-export const Default = Template.bind({});
+export const Inventory = Template.bind({});
+Inventory.args = {
+  type: ItemContainerType.Inventory,
+};
+
+export const Depot = Template.bind({});
+Depot.args = {
+  type: ItemContainerType.Depot,
+};

package/dist/hooks/useMousePosition.d.ts

@@ -1,6 +0,0 @@
-interface ICursorPosition {
-    x: number;
-    y: number;
-}
-export declare const useCursorPosition: () => ICursorPosition;
-export {};

package/src/hooks/useMousePosition.ts

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-
-interface ICursorPosition {
-  x: number;
-  y: number;
-}
-
-export const useCursorPosition = (): ICursorPosition => {
-  const [cursorPosition, setCursorPosition] = useState<ICursorPosition>({ x: 0, y: 0 });
-
-  useEffect(() => {
-    let animationFrameId: number;
-
-    const updateCursorPosition = (x: number, y: number) => {
-      // Cancel the previous frame request
-      cancelAnimationFrame(animationFrameId);
-
-      // Request a new frame
-      animationFrameId = requestAnimationFrame(() => {
-        setCursorPosition({ x, y });
-      });
-    };
-
-    const handleMouseMove = (event: MouseEvent) => {
-      updateCursorPosition(event.clientX, event.clientY);
-    };
-
-    const handleTouchMove = (event: TouchEvent) => {
-      // Prevent default touch behavior (like scrolling)
-      event.preventDefault();
-      if (event.touches.length > 0) {
-        const touch = event.touches[0];
-        updateCursorPosition(touch.clientX, touch.clientY);
-      }
-    };
-
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('touchmove', handleTouchMove, { passive: false });
-
-    // Cleanup function
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('touchmove', handleTouchMove);
-      cancelAnimationFrame(animationFrameId);
-    };
-  }, []);
-
-  return cursorPosition;
-};