@rpg-engine/long-bow 0.3.44 → 0.3.45

package/src/components/DropdownSelectorContainer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { Dropdown } from './Dropdown';
+
+interface IDropdownSelectorOption {
+  id: string;
+  name: string;
+}
+
+export interface IDropdownSelectorContainer {
+  onChange: (id: string) => void;
+  options: IDropdownSelectorOption[];
+  details?: string;
+  title: string;
+}
+
+export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
+  title,
+  onChange,
+  options,
+  details,
+}) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <Dropdown
+        options={options.map((option, index) => ({
+          option: option.name,
+          value: option.id,
+          id: index,
+        }))}
+        onChange={onChange}
+      />
+      <Details>{details}</Details>
+    </div>
+  );
+};
+
+const Details = styled.p`
+  font-size: ${uiFonts.size.xsmall} !important;
+`;

package/src/components/Equipment/EquipmentSet.tsx

@@ -8,6 +8,7 @@ import {
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
@@ -20,6 +21,21 @@ 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;
+  onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
+  dragScale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
@@ -36,6 +52,13 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemClick,
   atlasIMG,
   atlasJSON,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onItemOutsideDrop,
+  checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
+  dragScale,
 }) => {
   const {
     neck,
@@ -102,6 +125,27 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onSelected={(optionId: string) => {
             if (onSelected) onSelected(optionId);
           }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (!item) {
+              return;
+            }
+
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          dragScale={dragScale}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -134,6 +178,7 @@ const EquipmentSetContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
+  touch-action: none;
 `;
 
 const EquipmentColumn = styled.div`
@@ -141,4 +186,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,8 +1,10 @@
 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 { IPosition } from '../../../types/eventTypes';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -13,12 +15,28 @@ export interface IItemContainerProps {
     ItemType: IItem['type'],
     itemContainerType: ItemContainerType | null
   ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  dragScale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => 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 +49,21 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   atlasJSON,
   atlasIMG,
   disableContextMenu = false,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onOutsideDrop,
+  checkIfItemCanBeMoved,
+  initialPosition,
+  checkIfItemShouldDragEnd,
+  dragScale,
 }) => {
+  const [quantitySelect, setQuantitySelect] = useState({
+    isOpen: false,
+    maxQuantity: 1,
+    callback: (_quantity: number) => {},
+  });
+
   const onRenderSlots = () => {
     const slots = [];
 
@@ -52,6 +84,30 @@ 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);
+          }}
+          dragScale={dragScale}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+          openQuantitySelector={(maxQuantity, callback) => {
+            setQuantitySelect({
+              isOpen: true,
+              maxQuantity,
+              callback,
+            });
+          }}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onOutsideDrop) onOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -61,11 +117,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 +160,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,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;
+`;