@rpg-engine/long-bow 0.3.57 → 0.3.59

package/src/stories/ItemContainer.stories.tsx

@@ -1,124 +1,198 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { Meta, Story } from '@storybook/react';
-import React, { useState } from 'react';
-import {
-  IItemContainerProps,
-  ItemContainer,
-} from '../../src/components/Item/Inventory/ItemContainer';
-import { RPGUIRoot } from '../../src/components/RPGUIRoot';
-import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-const meta: Meta = {
-  title: 'Item Container',
-  component: ItemContainer,
-};
-
-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;
-let allowedToDrop = false;
-let dragSlot = -1;
-let dropSlot = -1;
-
-const Template: Story<IItemContainerProps> = () => {
-  const [itemContainer, setItemContainer] = useState(itemContainerMock);
-
-  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] = {
-                ...dragItem,
-                stackQty: quantity + (dropItem?.stackQty || 0),
-              };
-
-              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);
-          }
-
-          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}
-      />
-    </RPGUIRoot>
-  );
-};
-
-export const Default = Template.bind({});
+import {
+  IItem,
+  IShortcut,
+  ItemContainerType,
+  ItemType,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import {
+  IItemContainerProps,
+  ItemContainer,
+} from '../../src/components/Item/Inventory/ItemContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
+import {
+  defaultShortcut,
+  SHORTCUTS_STORAGE_KEY,
+} from '../components/Spellbook/constants';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Item Container',
+  component: ItemContainer,
+};
+
+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;
+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] = {
+                ...dragItem,
+                stackQty: quantity + (dropItem?.stackQty || 0),
+              };
+
+              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);
+          }
+
+          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}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});

package/src/stories/ItemQuantitySelector.stories.tsx

@@ -1,26 +1,26 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import {
-  IItemQuantitySelectorProps,
-  ItemQuantitySelector,
-} from '../components/Item/Inventory/ItemQuantitySelector';
-
-const meta: Meta = {
-  title: 'Item Quantity Selector',
-  component: ItemQuantitySelector,
-};
-
-export default meta;
-
-const Template: Story<IItemQuantitySelectorProps> = args => (
-  <RPGUIRoot>
-    <ItemQuantitySelector {...args} />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  quantity: 10,
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IItemQuantitySelectorProps,
+  ItemQuantitySelector,
+} from '../components/Item/Inventory/ItemQuantitySelector';
+
+const meta: Meta = {
+  title: 'Item Quantity Selector',
+  component: ItemQuantitySelector,
+};
+
+export default meta;
+
+const Template: Story<IItemQuantitySelectorProps> = args => (
+  <RPGUIRoot>
+    <ItemQuantitySelector {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  quantity: 10,
+};

package/src/stories/ItemSelector.stories.tsx

@@ -1,77 +1,77 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import {
-  IOptionsItemSelectorProps,
-  ItemSelector,
-} from '../components/itemSelector/ItemSelector';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-const meta: Meta = {
-  title: 'Item Selector',
-  component: ItemSelector,
-};
-
-export default meta;
-
-const Template: Story = args => (
-  <RPGUIRoot>
-    <ItemSelector
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-      options={options}
-      onSelect={onSelect}
-      onClose={() => console.log('closing Equipment Set Container')}
-      {...args}
-    />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-const onSelect = (value: string): void => {
-  console.log('Story package', value);
-};
-
-const options: IOptionsItemSelectorProps[] = [
-  {
-    name: 'Human',
-    description: 'Human',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human',
-    description: 'Human',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human2',
-    description: 'Human2',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human3',
-    description: 'Human3',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human4',
-    description: 'Human4',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human5',
-    description: 'Human5',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human6',
-    description: 'Human6',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-];
-
-Default.args = {
-  options,
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IOptionsItemSelectorProps,
+  ItemSelector,
+} from '../components/itemSelector/ItemSelector';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Item Selector',
+  component: ItemSelector,
+};
+
+export default meta;
+
+const Template: Story = args => (
+  <RPGUIRoot>
+    <ItemSelector
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      options={options}
+      onSelect={onSelect}
+      onClose={() => console.log('closing Equipment Set Container')}
+      {...args}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const onSelect = (value: string): void => {
+  console.log('Story package', value);
+};
+
+const options: IOptionsItemSelectorProps[] = [
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human2',
+    description: 'Human2',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human3',
+    description: 'Human3',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human4',
+    description: 'Human4',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human5',
+    description: 'Human5',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human6',
+    description: 'Human6',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+];
+
+Default.args = {
+  options,
+};

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,35 +1,35 @@
-import { ITradeResponseItem } from '@rpg-engine/shared';
-import { Meta } from '@storybook/react';
-import React, { useState } from 'react';
-import { RPGUIRoot } from '../components/RPGUIRoot';
-import { itemMock } from '../components/TradingMenu/items.mock';
-import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-const meta: Meta = {
-  title: 'Trading Item',
-  component: TradingItemRow,
-};
-export default meta;
-
-export const Default = () => {
-  const [selectedQty, setSelectedQty] = useState(0);
-
-  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
-    console.log(item);
-    setSelectedQty(qty);
-  };
-
-  return (
-    <RPGUIRoot>
-      <TradingItemRow
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        onQuantityChange={handleOnChange}
-        selectedQty={selectedQty}
-        traderItem={itemMock[0]}
-      />
-    </RPGUIRoot>
-  );
-};
+import { ITradeResponseItem } from '@rpg-engine/shared';
+import { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
+import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Trading Item',
+  component: TradingItemRow,
+};
+export default meta;
+
+export const Default = () => {
+  const [selectedQty, setSelectedQty] = useState(0);
+
+  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
+    console.log(item);
+    setSelectedQty(qty);
+  };
+
+  return (
+    <RPGUIRoot>
+      <TradingItemRow
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        onQuantityChange={handleOnChange}
+        selectedQty={selectedQty}
+        traderItem={itemMock[0]}
+      />
+    </RPGUIRoot>
+  );
+};