@rpg-engine/long-bow 0.2.86 → 0.2.87

package/src/components/RangeSlider.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
   Slider = 'rpgui-slider',
@@ -14,6 +13,7 @@ export interface IRangeSliderProps {
   valueMax: number;
   width: string;
   onChange: (value: number) => void;
+  value: number;
 }
 
 export const RangeSlider: React.FC<IRangeSliderProps> = ({
@@ -22,29 +22,46 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   valueMax,
   width,
   onChange,
+  value,
 }) => {
   const sliderId = uuidv4();
 
-  const onHandleMouseUp = () => {
-    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
-    const value = _RPGUI.get_value(rpguiSlider);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [left, setLeft] = useState(0);
 
-    onChange(Number(value));
-  };
+  useEffect(() => {
+    const calculatedWidth = containerRef.current?.clientWidth || 0;
+    setLeft(
+      Math.max(
+        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
+          10
+      )
+    );
+  }, [value, valueMin, valueMax]);
+
+  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
 
   return (
-    <div onMouseUp={onHandleMouseUp}>
+    <div
+      style={{ width: width, position: 'relative' }}
+      className={`rpgui-slider-container ${typeClass}`}
+      id={`rpgui-slider-${sliderId}`}
+      ref={containerRef}
+    >
+      <div style={{ pointerEvents: 'none' }}>
+        <div className={`rpgui-slider-track ${typeClass}`} />
+        <div className={`rpgui-slider-left-edge ${typeClass}`} />
+        <div className={`rpgui-slider-right-edge ${typeClass}`} />
+        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
+      </div>
       <Input
-        className={
-          type === RangeSliderType.Slider
-            ? RangeSliderType.Slider
-            : RangeSliderType.GoldSlider
-        }
         type="range"
         style={{ width: width }}
         min={valueMin}
         max={valueMax}
-        id={`rpgui-slider-${sliderId}`}
+        onChange={e => onChange(Number(e.target.value))}
+        value={value}
+        className="rpgui-cursor-point"
       />
     </div>
   );
@@ -52,4 +69,10 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
 
 const Input = styled.input`
   opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin-top: -5px;
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -242,7 +242,7 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
   },
   {
-    _id: '392acek4j7c8e80d2ff60404',
+    _id: '392acek4j7c8e80d2fs60404',
     hasUseWith: false,
     type: ItemType.Accessory,
     subType: ItemSubType.Ranged,

package/src/stories/EquipmentSet.stories.tsx

@@ -45,6 +45,10 @@ 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}

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,86 @@ 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;
+            }
+
+            setItemContainer(newContainer);
+          }
+
+          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;
+          }
+        }}
+        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/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);
-  },
 };