@rpg-engine/long-bow 0.3.44 → 0.3.46

package/src/stories/EquipmentSet.stories.tsx

@@ -9,6 +9,7 @@ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
+import { IPosition } from '../types/eventTypes';
 
 const meta: Meta = {
   title: 'Equipment Set',
@@ -36,6 +37,10 @@ const onSelected = (payload: string) => {
   console.log('dispatch', payload);
 };
 
+const onItemOutsideDrop = (item: IItem, position: IPosition) => {
+  console.log('dropped outside', item, position);
+};
+
 const Template: Story<IEquipmentSetProps> = args => (
   <RPGUIRoot>
     <EquipmentSet
@@ -45,9 +50,14 @@ const Template: Story<IEquipmentSetProps> = args => (
       onMouseOver={onMouseOver}
       onSelected={onSelected}
       onItemClick={onItemClick}
+      onItemDragEnd={_quantity => {}}
+      onItemDragStart={item => console.log('drag start: ', item._id)}
+      onItemPlaceDrop={item => console.log('dropped to: ', item?._id)}
+      checkIfItemCanBeMoved={() => false}
       type={ItemContainerType.Equipment}
       atlasIMG={atlasIMG}
       atlasJSON={atlasJSON}
+      onItemOutsideDrop={onItemOutsideDrop}
     />
   </RPGUIRoot>
 );

package/src/stories/ItemContainer.stories.tsx

@@ -1,6 +1,6 @@
 import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import {
   IItemContainerProps,
   ItemContainer,
@@ -37,19 +37,88 @@ const onItemClick = (
   console.log(item, ItemType, itemContainerType, 'was clicked!');
 };
 
-const Template: Story<IItemContainerProps> = () => (
-  <RPGUIRoot>
-    <ItemContainer
-      itemContainer={itemContainerMock}
-      onClose={() => console.log('closing item container')}
-      onMouseOver={onMouseOver}
-      onSelected={onSelected}
-      onItemClick={onItemClick}
-      type={ItemContainerType.Inventory}
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-    />
-  </RPGUIRoot>
-);
+// 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({});

package/src/stories/ItemQuantitySelector.stories.tsx

@@ -0,0 +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,
+};

package/src/stories/ItemSelector.stories.tsx

@@ -0,0 +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,
+};

package/src/stories/QuickSpells.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { SPELL_SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
+import {
+  QuickSpells,
+  QuickSpellsProps,
+} from '../components/Spellbook/QuickSpells';
+
+const meta: Meta = {
+  title: 'QuickSpells',
+  component: QuickSpells,
+};
+
+export default meta;
+
+const Template: Story<QuickSpellsProps> = args => {
+  return (
+    <RPGUIRoot>
+      <div
+        style={{
+          width: '100%',
+        }}
+      >
+        <QuickSpells {...args} />
+      </div>
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onSpellCast: spellKey => console.log(spellKey),
+  quickSpells: JSON.parse(
+    localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+  ),
+  mana: 100,
+};

package/src/stories/RadioInput.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { RadioInput ,IRadioInput} from '../components/RadioInput/RadioInput';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { Itools } from '../components/RadioInput/instruments';
+
+const meta: Meta = {    
+    component: RadioInput,
+  };
+
+export default meta;
+const Template: Story<IRadioInput> = args => (
+    <RPGUIRoot>
+      <RadioInput {...args} />
+    </RPGUIRoot>
+  );
+  
+  export const RadioInputElement = Template.bind({});
+
+  const onSelectIt = (value:string):void => {
+    console.log('Story package', value);
+  };
+  
+  const onClose = () => {
+    console.log('close');
+  };
+
+  RadioInputElement.args={
+    title:"Harvesting instruments",
+    subtitle:'Use the tool, you need it',
+    onSelect:onSelectIt,
+    onCancel:onClose,
+    items:Itools
+
+  }

package/src/stories/RangeSlider.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import {
   IRangeSliderProps,
   RangeSlider,
@@ -43,11 +43,15 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IRangeSliderProps> = args => (
-  <RPGUIRoot>
-    <RangeSlider {...args} />
-  </RPGUIRoot>
-);
+const Template: Story<IRangeSliderProps> = args => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <RPGUIRoot>
+      <RangeSlider {...args} value={value} onChange={setValue} />
+    </RPGUIRoot>
+  );
+};
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
@@ -57,7 +61,4 @@ Default.args = {
   type: RangeSliderType.Slider,
   valueMin: 0,
   valueMax: 100,
-  onChange: n => {
-    console.log('onChange', n);
-  },
 };

package/src/stories/Spellbook.stories.tsx

@@ -0,0 +1,107 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import {
+  defaultSpellShortcut,
+  SPELL_SHORTCUTS_STORAGE_KEY,
+} from '../components/Spellbook/constants';
+import { mockSpells } from '../components/Spellbook/mockSpells';
+import { ISpellbookProps, Spellbook } from '../components/Spellbook/Spellbook';
+
+const meta: Meta = {
+  title: 'Spellbook',
+  component: Spellbook,
+};
+
+export default meta;
+
+const Template: Story<ISpellbookProps> = args => {
+  const [spellShortcuts, setSpellShortcuts] = useState([]);
+
+  useEffect(() => {
+    const shortcuts = localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY);
+    if (shortcuts) {
+      setSpellShortcuts(JSON.parse(shortcuts));
+    }
+  }, []);
+
+  const setSpellShortcut = (key: string, index: number) => {
+    const spellShortcuts = JSON.parse(
+      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+    );
+
+    const spell = mockSpells.find(s => s.key === key);
+    if (!spell) {
+      return;
+    }
+
+    if (!spellShortcuts) {
+      const newSpellShortcuts = [
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+      ];
+
+      newSpellShortcuts[index] = spell;
+
+      localStorage.setItem(
+        SPELL_SHORTCUTS_STORAGE_KEY,
+        JSON.stringify(newSpellShortcuts)
+      );
+    } else {
+      spellShortcuts[index] = spell;
+
+      localStorage.setItem(
+        SPELL_SHORTCUTS_STORAGE_KEY,
+        JSON.stringify(spellShortcuts)
+      );
+    }
+
+    setSpellShortcuts(spellShortcuts);
+  };
+
+  const removeSpellShortcut = (index: number) => {
+    const spellShortcuts = JSON.parse(
+      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+    );
+
+    if (!spellShortcuts) return;
+
+    spellShortcuts[index] = defaultSpellShortcut;
+
+    localStorage.setItem(
+      SPELL_SHORTCUTS_STORAGE_KEY,
+      JSON.stringify(spellShortcuts)
+    );
+
+    setSpellShortcuts(spellShortcuts);
+  };
+
+  return (
+    <RPGUIRoot>
+      <div
+        style={{
+          width: '50%',
+          height: '75%',
+        }}
+      >
+        <Spellbook
+          {...args}
+          setSpellShortcut={setSpellShortcut}
+          removeSpellShortcut={removeSpellShortcut}
+          spellShortcuts={spellShortcuts}
+        />
+      </div>
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onClose: () => console.log('close'),
+  onSpellClick: spellKey => console.log(spellKey),
+  spells: mockSpells,
+  magicLevel: 3,
+  mana: 5,
+};