@rpg-engine/long-bow 0.5.23 → 0.5.26

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,12 @@
+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;
+    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.23",
+  "version": "0.5.26",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Equipment/EquipmentSet.tsx

@@ -162,7 +162,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
 
   return (
     <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
       <DraggableContainer
         title={'Equipments'}
         type={RPGUIContainerTypes.Framed}

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';
@@ -12,14 +12,18 @@ const OFFSET = CONTAINER_SIZE / 2;
 interface IProps {
   atlasJSON: any;
   atlasIMG: any;
+  scale?: number;
 }
 
 export const DraggedItem = ({
   atlasJSON,
   atlasIMG,
+  scale,
 }: IProps): JSX.Element | null => {
   const { item } = useDragging();
-  const { x, y } = useCursorPosition();
+  const { x, y } = useCursorPosition({
+    scale,
+  });
 
   if (!item) {
     return null;

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

@@ -159,7 +159,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
   return (
     <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
       <SlotsContainer
         title={itemContainer.name || 'Container'}
         onClose={onClose}

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/components/Spellbook/constants.ts

@@ -5,4 +5,4 @@ export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
 export const defaultShortcut: IShortcut = {
   type: ShortcutType.None,
   payload: null,
-};
+};

package/src/components/shared/ScalableContainer.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
+
+interface IScalableContainerProps {
+  scale?: number;
+  centralize?: boolean;
+  breakPoint?: string;
+}
+
+export const ScalableContainer = styled.div<IScalableContainerProps>`
+  ${({ centralize = true }) =>
+    centralize &&
+    css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `}
+
+  @media (max-width: ${({ breakPoint }) => breakPoint ?? UI_BREAKPOINT_MOBILE}) {
+    transform: scale(${({ scale }) => scale ?? 0.75});
+  }
+`;

package/src/constants/uiBreakpoints.ts

@@ -0,0 +1,3 @@
+
+export const UI_BREAKPOINT_MOBILE = '950px';
+export const UI_BREAKPOINT_SMALL_LAPTOP = '1400px';

package/src/hooks/useCursorPosition.ts

@@ -0,0 +1,46 @@
+import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
+import { useEffect, useState } from 'react';
+import { IPosition } from '../types/eventTypes';
+
+interface ICursorPositionProps {
+  scale?: number;
+}
+
+export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPosition => {
+  const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 });
+
+  const setFromEvent = (e: MouseEvent | TouchEvent) => {
+    let x, y;
+    const viewportCenterX = window.innerWidth / 2 - GRID_WIDTH;
+    const viewportCenterY = window.innerHeight / - GRID_HEIGHT;
+
+    if ('touches' in e) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    } else {
+      x = e.clientX;
+      y = e.clientY;
+    }
+
+    // Adjusting for the global scale
+    // Assuming the element is centrally located
+    setPosition({
+      x: (x - viewportCenterX) / scale + viewportCenterX,
+      y: (y - viewportCenterY) / scale + viewportCenterY
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('mousemove', setFromEvent);
+    window.addEventListener('touchmove', setFromEvent);
+
+    console.log("SCALE IS ", scale)
+
+    return () => {
+      window.removeEventListener('mousemove', setFromEvent);
+      window.removeEventListener('touchmove', setFromEvent);
+    };
+  }, [scale]);
+
+  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,9 @@ 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 { ScalableContainer } from '../components/shared/ScalableContainer';
+import { UI_BREAKPOINT_SMALL_LAPTOP } from '../constants/uiBreakpoints';
+import { useShortcuts } from '../hooks/useShortcuts';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
@@ -55,147 +48,126 @@ 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,
-      };
-
-      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(newShortcuts));
-    } else {
-      shortcuts[index] = {
-        type: ShortcutType.Item,
-        payload: item,
-      };
-
-      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
-    }
-
-    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);
-  };
-
-  return (
-    <RPGUIRoot>
-      <ItemContainer
-        itemContainer={itemContainer}
-        onClose={() => console.log('closing item container')}
-        onMouseOver={onMouseOver}
-        onSelected={onSelected}
-        onItemClick={onItemClick}
-        checkIfItemCanBeMoved={() => allowedToDrop}
-        onItemDragEnd={quantity => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (quantity === 0) {
-            setItemContainer({ ...itemContainer });
-          } else if (allowedToDrop && dropSlot !== -1) {
-            const newContainer = { ...itemContainer };
-
-            if (quantity && dragItem && dragItem.stackQty) {
-              newContainer.slots[dropSlot] = {
+interface ITemplateProps {
+  type: ItemContainerType;
+  scale?: number;
+}
+
+const Template: Story<IItemContainerProps & ITemplateProps> = ({
+  type,
+  scale,
+}) => {
+  const mock = itemContainerMock({ name: type });
+
+  const [itemContainer, setItemContainer] = useState(mock);
+
+  const { shortcuts, setItemShortcut, removeShortcut } = useShortcuts({
+    itemContainer: mock,
+  });
+
+  const coreItemContainer = (
+    <ItemContainer
+      itemContainer={itemContainer}
+      onClose={() => console.log('closing item container')}
+      onMouseOver={onMouseOver}
+      onSelected={onSelected}
+      onItemClick={onItemClick}
+      checkIfItemCanBeMoved={() => allowedToDrop}
+      onItemDragEnd={quantity => {
+        // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+        if (quantity === 0) {
+          setItemContainer({ ...itemContainer });
+        } else if (allowedToDrop && dropSlot !== -1) {
+          const newContainer = { ...itemContainer };
+
+          if (quantity && dragItem && dragItem.stackQty) {
+            newContainer.slots[dropSlot] = {
+              ...dragItem,
+              stackQty: quantity + (dropItem?.stackQty || 0),
+            };
+
+            if (dragItem.stackQty - quantity === 0)
+              newContainer.slots[dragSlot] = null;
+            else
+              newContainer.slots[dragSlot] = {
                 ...dragItem,
-                stackQty: quantity + (dropItem?.stackQty || 0),
+                stackQty: dragItem.stackQty - quantity,
               };
-
-              if (dragItem.stackQty - quantity === 0)
-                newContainer.slots[dragSlot] = null;
-              else
-                newContainer.slots[dragSlot] = {
-                  ...dragItem,
-                  stackQty: dragItem.stackQty - quantity,
-                };
-            } else {
-              newContainer.slots[dropSlot] = dragItem;
-              newContainer.slots[dragSlot] = null;
-            }
-            setTimeout(() => {
-              setItemContainer(newContainer);
-            }, 100);
+          } else {
+            newContainer.slots[dropSlot] = dragItem;
+            newContainer.slots[dragSlot] = null;
           }
-
+          setTimeout(() => {
+            setItemContainer(newContainer);
+          }, 100);
+        }
+
+        allowedToDrop = false;
+        dropSlot = -1;
+        dropItem = null;
+        dragItem = null;
+      }}
+      onItemDragStart={(item, slotIndex) => {
+        dragItem = item;
+        dragSlot = slotIndex;
+      }}
+      onItemPlaceDrop={(item, slotIndex) => {
+        // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+        if (!item || (dragItem?.key === item?.key && dragSlot !== slotIndex)) {
+          console.log('allow');
+          allowedToDrop = true;
+          dropSlot = slotIndex;
+          dropItem = item ? item : null;
+        } else {
           allowedToDrop = false;
           dropSlot = -1;
           dropItem = null;
-          dragItem = null;
-        }}
-        onItemDragStart={(item, slotIndex) => {
-          dragItem = item;
-          dragSlot = slotIndex;
-        }}
-        onItemPlaceDrop={(item, slotIndex) => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (
-            !item ||
-            (dragItem?.key === item?.key && dragSlot !== slotIndex)
-          ) {
-            console.log('allow');
-            allowedToDrop = true;
-            dropSlot = slotIndex;
-            dropItem = item ? item : null;
-          } else {
-            allowedToDrop = false;
-            dropSlot = -1;
-            dropItem = null;
-          }
-        }}
-        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
-        type={ItemContainerType.Inventory}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        shortcuts={shortcuts}
-        setItemShortcut={setItemShortcut}
-        removeShortcut={removeShortcut}
-        equipmentSet={equipmentSetMock}
-        isDepotSystem
-      />
+        }
+      }}
+      onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
+      type={type}
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      shortcuts={shortcuts}
+      setItemShortcut={setItemShortcut}
+      removeShortcut={removeShortcut}
+      equipmentSet={equipmentSetMock}
+      isDepotSystem
+      scale={scale}
+    />
+  );
+
+  return (
+    <RPGUIRoot>
+      {scale ? (
+        <ScalableContainer
+          scale={scale}
+          centralize={false}
+          breakPoint={UI_BREAKPOINT_SMALL_LAPTOP}
+        >
+          {coreItemContainer}
+        </ScalableContainer>
+      ) : (
+        coreItemContainer
+      )}
     </RPGUIRoot>
   );
 };
 
-export const Default = Template.bind({});
+export const Inventory = Template.bind({});
+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,
+};

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;
-};