@rpg-engine/long-bow 0.2.90 → 0.2.92

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

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../../Button';
+import { Input } from '../../Input';
+import { RPGUIContainer, RPGUIContainerTypes } from '../../RPGUIContainer';
+import { RangeSlider, RangeSliderType } from '../../RangeSlider';
+
+export interface IItemQuantitySelectorProps {
+  quantity: number;
+  onConfirm: (quantity: number) => void;
+  onClose: () => void;
+}
+
+export const ItemQuantitySelector: React.FC<IItemQuantitySelectorProps> = ({
+  quantity,
+  onConfirm,
+  onClose,
+}) => {
+  const [value, setValue] = useState(quantity);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+
+      const closeSelector = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+
+      document.addEventListener('keydown', closeSelector);
+
+      return () => {
+        document.removeEventListener('keydown', closeSelector);
+      };
+    }
+
+    return () => {};
+  }, []);
+
+  return (
+    <StyledContainer type={RPGUIContainerTypes.Framed} width="25rem">
+      <CloseButton
+        className="container-close"
+        onClick={onClose}
+        onTouchStart={onClose}
+      >
+        X
+      </CloseButton>
+      <h2>Select quantity to move</h2>
+      <StyledForm
+        style={{ width: '100%' }}
+        onSubmit={e => {
+          e.preventDefault();
+
+          const numberValue = Number(value);
+
+          if (Number.isNaN(numberValue)) {
+            return;
+          }
+
+          onConfirm(Math.max(1, Math.min(quantity, numberValue)));
+        }}
+        noValidate
+      >
+        <StyledInput
+          innerRef={inputRef}
+          placeholder="Enter quantity"
+          type="number"
+          min={1}
+          max={quantity}
+          value={value}
+          onChange={e => {
+            if (Number(e.target.value) >= quantity) {
+              setValue(quantity);
+              return;
+            }
+
+            setValue((e.target.value as unknown) as number);
+          }}
+          onBlur={e => {
+            const newValue = Math.max(
+              1,
+              Math.min(quantity, Number(e.target.value))
+            );
+
+            setValue(newValue);
+          }}
+        />
+        <RangeSlider
+          type={RangeSliderType.Slider}
+          valueMin={1}
+          valueMax={quantity}
+          width="100%"
+          onChange={setValue}
+          value={value}
+        />
+        <Button buttonType={ButtonTypes.RPGUIButton} type="submit">
+          Confirm
+        </Button>
+      </StyledForm>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled(RPGUIContainer)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+const StyledInput = styled(Input)`
+  text-align: center;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 3px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.8rem;
+`;

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

@@ -4,14 +4,16 @@ import {
   IItemContainer,
   ItemContainerType,
   ItemSlotType,
-  ItemType
+  ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { uiFonts } from '../../../constants/uiFonts';
+import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { Ellipsis } from '../../shared/Ellipsis';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
@@ -52,6 +54,20 @@ interface IProps {
     itemContainerType: ItemContainerType | null,
     item: IItem
   ) => void;
+  onDragStart: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onDragEnd: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  checkIfItemCanBeMoved: () => boolean;
+  openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
+  onPlaceDrop: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
   atlasJSON: any;
   atlasIMG: any;
   isContextMenuDisabled?: boolean;
@@ -70,21 +86,41 @@ export const ItemSlot: React.FC<IProps> = observer(
     atlasJSON,
     atlasIMG,
     isContextMenuDisabled = false,
+    onDragEnd,
+    onDragStart,
+    onPlaceDrop,
+    onOutsideDrop: onDrop,
+    checkIfItemCanBeMoved,
+    openQuantitySelector,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
     const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
 
+    const [isFocused, setIsFocused] = useState(false);
+    const [wasDragged, setWasDragged] = useState(false);
+    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
+    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
+    const dragContainer = useRef<HTMLDivElement>(null);
+
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
 
     useEffect(() => {
+      setDragPosition({ x: 0, y: 0 });
+
       if (item) {
         setContextActions(generateContextMenu(item, containerType));
       }
     }, [item]);
 
+    useEffect(() => {
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
+      }
+    }, [dropPosition]);
+
     const getStackInfo = (itemId: string, stackQty: number) => {
       // if (itemToRender?.isStackable && itemToRender?.stackQty) {
 
@@ -112,7 +148,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const renderItem = (itemToRender: IItem | null) => {
       const element = [];
- 
+
       if (itemToRender?.texturePath) {
         element.push(
           <ErrorBoundary key={itemToRender._id}>
@@ -150,7 +186,7 @@ export const ItemSlot: React.FC<IProps> = observer(
         itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
       ) {
         const element = [];
-     
+
         element.push(
           <ErrorBoundary key={itemToRender._id}>
             <SpriteFromAtlas
@@ -205,29 +241,135 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     };
 
+    const resetItem = () => {
+      setTooltipVisible(false);
+      setIsFocused(false);
+      setWasDragged(false);
+    };
+
+    const onSuccesfulDrag = (quantity?: number) => {
+      resetItem();
+
+      if (quantity === -1) setDragPosition({ x: 0, y: 0 });
+      else if (item) {
+        onDragEnd(quantity);
+        resetItem();
+      }
+    };
+
     return (
       <Container
         className="rpgui-icon empty-slot"
-        onMouseOver={event =>
-          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
-        }
-        onMouseOut={() => {
-          if (onMouseOut) onMouseOut();
+        onMouseUp={() => {
+          const data = item ? item : null;
+          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
         }}
-        onMouseEnter={() => setTooltipVisible(true)}
-        onMouseLeave={() => setTooltipVisible(false)}
-        onClick={() => {
-          setTooltipVisible(false);
-
-          if (item) {
-            if (!isContextMenuDisabled) {
-              setIsContextMenuVisible(!isContextMenuVisible);
-            }
+        onTouchEnd={e => {
+          const { clientX, clientY } = e.changedTouches[0];
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX,
+            clientY,
+            bubbles: true,
+          });
 
-            onClick(item.type, containerType, item);
-          }
+          document
+            .elementFromPoint(clientX, clientY)
+            ?.dispatchEvent(simulatedEvent);
         }}
       >
+        <Draggable
+          defaultClassName={item ? 'draggable' : 'empty-slot'}
+          onStop={(e, data) => {
+            if (wasDragged && item) {
+              //@ts-ignore
+              const classes: string[] = Array.from(e.target?.classList);
+
+              console.log(classes);
+
+              const isOutsideDrop = classes.some(elm => {
+                //elm matches ItemContainer string
+
+                return elm.includes('rpgui-content');
+              });
+
+              if (isOutsideDrop) {
+                setDropPosition({
+                  x: data.x,
+                  y: data.y,
+                });
+              }
+
+              setWasDragged(false);
+
+              const target = dragContainer.current;
+              if (!target || !wasDragged) return;
+
+              const style = window.getComputedStyle(target);
+              const matrix = new DOMMatrixReadOnly(style.transform);
+              const x = matrix.m41;
+              const y = matrix.m42;
+
+              setDragPosition({ x, y });
+
+              setTimeout(() => {
+                if (checkIfItemCanBeMoved()) {
+                  if (
+                    item.stackQty &&
+                    item.stackQty !== 1 &&
+                    openQuantitySelector
+                  )
+                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
+                  else onSuccesfulDrag(item.stackQty);
+                } else {
+                  resetItem();
+                  setDragPosition({ x: 0, y: 0 });
+                }
+              }, 100);
+            } else if (item) {
+              if (!isContextMenuDisabled)
+                setIsContextMenuVisible(!isContextMenuVisible);
+
+              onClick(item.type, containerType, item);
+            }
+          }}
+          onStart={() => {
+            if (!item) {
+              return;
+            }
+
+            if (onDragStart) {
+              onDragStart(item, slotIndex, containerType);
+            }
+          }}
+          onDrag={() => {
+            setWasDragged(true);
+            setIsFocused(true);
+          }}
+          position={dragPosition}
+          cancel=".empty-slot"
+        >
+          <ItemContainer
+            ref={dragContainer}
+            isFocused={isFocused}
+            onMouseOver={event => {
+              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+            }}
+            onMouseOut={() => {
+              if (onMouseOut) onMouseOut();
+            }}
+            onMouseEnter={() => {
+              setTooltipVisible(true);
+            }}
+            onMouseLeave={() => {
+              setTooltipVisible(false);
+            }}
+          >
+            {onRenderSlot(item)}
+          </ItemContainer>
+        </Draggable>
+
+        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+
         {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
           <RelativeListMenu
             options={contextActions}
@@ -242,10 +384,6 @@ export const ItemSlot: React.FC<IProps> = observer(
             }}
           />
         )}
-
-        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
-
-        {onRenderSlot(item)}
       </Container>
     );
   }
@@ -261,12 +399,21 @@ const Container = styled.div`
   position: relative;
 `;
 
+const ItemContainer = styled.div<{ isFocused?: boolean }>`
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'}
+`;
+
 const ItemQtyContainer = styled.div`
   position: relative;
   width: 85%;
   height: 16px;
   top: 25px;
   left: 2px;
+  pointer-events: none;
 
   display: flex;
   justify-content: flex-end;

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/index.tsx

@@ -12,7 +12,6 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
-export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -21,17 +20,17 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RadioButton';
-export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
-export * from './components/RPGUIForceRenderStart';
 export * from './components/RPGUIRoot';
-export * from './components/shared/SpriteFromAtlas';
+export * from './components/RadioButton';
+export * from './components/RangeSlider';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
+export * from './components/itemSelector/ItemSelector';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

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

@@ -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,87 @@ 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;
+          }
+        }}
+        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
+        type={ItemContainerType.Inventory}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+      />
+    </RPGUIRoot>
+  );
+};
 
 export const Default = Template.bind({});