@rpg-engine/long-bow 0.2.85 → 0.2.87

package/dist/stories/ItemQuantitySelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IItemQuantitySelectorProps } from '../components/Item/Inventory/ItemQuantitySelector';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemQuantitySelectorProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.85",
+  "version": "0.2.87",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Abstractions/SlotsContainer.tsx

@@ -9,6 +9,7 @@ interface IProps {
   onClose?: () => void;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
+  initialPosition?: IPosition;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -17,6 +18,7 @@ export const SlotsContainer: React.FC<IProps> = ({
   onClose,
   onPositionChange,
   onOutsideClick,
+  initialPosition,
 }) => {
   return (
     <DraggableContainer
@@ -35,6 +37,7 @@ export const SlotsContainer: React.FC<IProps> = ({
         }
       }}
       onOutsideClick={onOutsideClick}
+      initialPosition={initialPosition}
     >
       {children}
     </DraggableContainer>

package/src/components/DraggableContainer.tsx

@@ -19,6 +19,7 @@ export interface IDraggableContainerProps {
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
+  initialPosition?: IPosition;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -34,6 +35,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   cancelDrag,
   onPositionChange,
   onOutsideClick,
+  initialPosition = { x: 0, y: 0 },
 }) => {
   const draggableRef = useRef(null);
 
@@ -66,6 +68,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
           });
         }
       }}
+      defaultPosition={initialPosition}
     >
       <Container
         ref={draggableRef}

package/src/components/Equipment/EquipmentSet.tsx

@@ -20,6 +20,18 @@ export interface IEquipmentSetProps {
     item: IItem,
     itemContainerType: ItemContainerType | null
   ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  checkIfItemCanBeMoved: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
@@ -36,6 +48,10 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemClick,
   atlasIMG,
   atlasJSON,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  checkIfItemCanBeMoved,
 }) => {
   const {
     neck,
@@ -102,6 +118,18 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onSelected={(optionId: string) => {
             if (onSelected) onSelected(optionId);
           }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -134,6 +162,7 @@ const EquipmentSetContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
+  touch-action: none;
 `;
 
 const EquipmentColumn = styled.div`
@@ -141,4 +170,5 @@ const EquipmentColumn = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: column;
+  touch-action: none;
 `;

package/src/components/Input.tsx

@@ -4,8 +4,12 @@ export interface IInputProps
   extends React.DetailedHTMLProps<
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
-  > {}
+  > {
+  innerRef?: React.Ref<HTMLInputElement>;
+}
 
 export const Input: React.FC<IInputProps> = ({ ...props }) => {
-  return <input {...props} />;
+  const { innerRef, ...rest } = props;
+
+  return <input {...rest} ref={props.innerRef} />;
 };

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

@@ -1,7 +1,8 @@
 import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
+import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { ItemSlot } from './ItemSlot';
 
@@ -13,12 +14,25 @@ export interface IItemContainerProps {
     ItemType: IItem['type'],
     itemContainerType: ItemContainerType | null
   ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  checkIfItemCanBeMoved: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   type: ItemContainerType;
   atlasJSON: any;
   atlasIMG: any;
   disableContextMenu?: boolean;
+  initialPosition?: { x: number; y: number };
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -31,7 +45,18 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   atlasJSON,
   atlasIMG,
   disableContextMenu = false,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  checkIfItemCanBeMoved,
+  initialPosition,
 }) => {
+  const [quantitySelect, setQuantitySelect] = useState({
+    isOpen: false,
+    maxQuantity: 1,
+    callback: (_quantity: number) => {},
+  });
+
   const onRenderSlots = () => {
     const slots = [];
 
@@ -52,6 +77,25 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);
           }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          openQuantitySelector={(maxQuantity, callback) => {
+            setQuantitySelect({
+              isOpen: true,
+              maxQuantity,
+              callback,
+            });
+          }}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -61,11 +105,40 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   return (
-    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>
-      <ItemsContainer className="item-container-body">
-        {onRenderSlots()}
-      </ItemsContainer>
-    </SlotsContainer>
+    <>
+      <SlotsContainer
+        title={itemContainer.name || 'Container'}
+        onClose={onClose}
+        initialPosition={initialPosition}
+      >
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+      </SlotsContainer>
+      {quantitySelect.isOpen && (
+        <QuantitySelectorContainer>
+          <ItemQuantitySelector
+            quantity={quantitySelect.maxQuantity}
+            onConfirm={quantity => {
+              quantitySelect.callback(quantity);
+              setQuantitySelect({
+                isOpen: false,
+                maxQuantity: 1,
+                callback: () => {},
+              });
+            }}
+            onClose={() => {
+              quantitySelect.callback(-1);
+              setQuantitySelect({
+                isOpen: false,
+                maxQuantity: 1,
+                callback: () => {},
+              });
+            }}
+          />
+        </QuantitySelectorContainer>
+      )}
+    </>
   );
 };
 
@@ -75,3 +148,16 @@ const ItemsContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
 `;
+
+const QuantitySelectorContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

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

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../../Button';
+import { Input } from '../../Input';
+import { RangeSlider, RangeSliderType } from '../../RangeSlider';
+import { RPGUIContainer, RPGUIContainerTypes } from '../../RPGUIContainer';
+
+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 => {
+            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,11 +4,12 @@ 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';
@@ -52,6 +53,19 @@ interface IProps {
     itemContainerType: ItemContainerType | null,
     item: IItem
   ) => void;
+  onDragStart: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onDragEnd: (quantity?: number) => 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,16 +84,28 @@ export const ItemSlot: React.FC<IProps> = observer(
     atlasJSON,
     atlasIMG,
     isContextMenuDisabled = false,
+    onDragEnd,
+    onDragStart,
+    onPlaceDrop,
+    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({ x: 0, y: 0 });
+    const dragContainer = useRef<HTMLDivElement>(null);
+
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
 
     useEffect(() => {
+      setDragPosition({ x: 0, y: 0 });
+
       if (item) {
         setContextActions(generateContextMenu(item, containerType));
       }
@@ -112,7 +138,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 +176,7 @@ export const ItemSlot: React.FC<IProps> = observer(
         itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
       ) {
         const element = [];
-     
+
         element.push(
           <ErrorBoundary key={itemToRender._id}>
             <SpriteFromAtlas
@@ -205,29 +231,117 @@ 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);
-            }
-
-            onClick(item.type, containerType, item);
-          }
+        onTouchEnd={e => {
+          const { clientX, clientY } = e.changedTouches[0];
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX,
+            clientY,
+            bubbles: true,
+          });
+
+          document
+            .elementFromPoint(clientX, clientY)
+            ?.dispatchEvent(simulatedEvent);
         }}
       >
+        {item && (
+          <Draggable
+            onStop={() => {
+              if (wasDragged) {
+                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 (onDragStart) onDragStart(item, slotIndex, containerType);
+            }}
+            onDrag={() => {
+              setWasDragged(true);
+              setIsFocused(true);
+            }}
+            position={dragPosition}
+          >
+            <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 +356,6 @@ export const ItemSlot: React.FC<IProps> = observer(
             }}
           />
         )}
-
-        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
-
-        {onRenderSlot(item)}
       </Container>
     );
   }
@@ -261,12 +371,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;