@rpg-engine/long-bow 0.2.90 → 0.2.92

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.90",
+  "version": "0.2.92",
   "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/CraftBook/CraftBook.tsx

@@ -5,7 +5,6 @@ import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { Dropdown, IOptionsProps } from '../Dropdown';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { RPGUIForceRenderStart } from '../RPGUIForceRenderStart';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface IItemCraftSelectorProps {
@@ -71,101 +70,92 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     return name;
   };
 
-  const handleClick = () => {
-    let element = document.querySelector(
-      `input[name='test']:checked`
-    ) as HTMLInputElement;
-    const elementValue = element.value;
-    setCraftItem(elementValue);
+  const handleClick = (value: string) => {
+    setCraftItem(value);
   };
 
   return (
-    <RPGUIForceRenderStart
-      elementDOMId="radioInput"
-      elementRenderedDOMKey="rpgui-radio"
-      RPGUICreateFunction="radio"
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
     >
-      <DraggableContainer
-        type={RPGUIContainerTypes.Framed}
-        width="500px"
-        cancelDrag=".equipment-container-body .arrow-selector"
-        onCloseButton={() => {
-          if (onClose) {
-            onClose();
-          }
-        }}
-      >
-        <div style={{ width: '100%' }}>
-          <Title>{'Craftbook'}</Title>
-          <Subtitle>{'Select an item to craft'}</Subtitle>
-          <hr className="golden" />
-        </div>
-        <Dropdown
-          options={getDropdownOptions()}
-          onChange={value => onSelect(value)}
-        />
-        <RadioInputScroller>
-          {craftablesItems?.map((option, index) => (
-            <RadioOptionsWrapper key={index}>
-              <SpriteAtlasWrapper>
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={option.texturePath}
-                  imgScale={3}
-                  grayScale={!option.canCraft}
-                />
-              </SpriteAtlasWrapper>
-              <div>
-                <input
-                  className="rpgui-radio"
-                  type="radio"
-                  value={option.name}
-                  name="test"
-                  disabled={!option.canCraft}
-                  id="radioInput"
-                />
-                <label
-                  onClick={handleClick}
-                  style={{ display: 'flex', alignItems: 'center' }}
-                  onMouseEnter={() => setIsShown({ show: true, index: index })}
-                  onMouseLeave={() => setIsShown({ show: false, index: index })}
-                >
-                  {modifyString(option.name)}
-                </label>
-
-                {isShown &&
-                  isShown.index === index &&
-                  option.ingredients.map((option, index) => (
-                    <Recipes key={index}>
-                      <SpriteFromAtlas
-                        atlasIMG={atlasIMG}
-                        atlasJSON={atlasJSON}
-                        spriteKey={option.texturePath}
-                        imgScale={1}
-                      />
-                      <StyledItem>
-                        {modifyString(option.key)} ({option.qty}x)
-                      </StyledItem>
-                    </Recipes>
-                  ))}
-              </div>
-            </RadioOptionsWrapper>
-          ))}
-        </RadioInputScroller>
-        <ButtonWrapper>
-          <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            onClick={() => onCraftItem(craftItem)}
-          >
-            Craft
-          </Button>
-        </ButtonWrapper>
-      </DraggableContainer>
-    </RPGUIForceRenderStart>
+      <div style={{ width: '100%' }}>
+        <Title>{'Craftbook'}</Title>
+        <Subtitle>{'Select an item to craft'}</Subtitle>
+        <hr className="golden" />
+      </div>
+      <Dropdown
+        options={getDropdownOptions()}
+        onChange={value => onSelect(value)}
+      />
+      <RadioInputScroller>
+        {craftablesItems?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.texturePath}
+                imgScale={3}
+                grayScale={!option.canCraft}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+                disabled={!option.canCraft}
+                checked={craftItem === option.key}
+                onChange={() => handleClick(option.key)}
+              />
+              <label
+                onClick={() => handleClick(option.key)}
+                style={{ display: 'flex', alignItems: 'center' }}
+                onMouseEnter={() => setIsShown({ show: true, index: index })}
+                onMouseLeave={() => setIsShown({ show: false, index: index })}
+              >
+                {modifyString(option.name)}
+              </label>
+
+              {isShown &&
+                isShown.index === index &&
+                option.ingredients.map((option, index) => (
+                  <Recipes key={index}>
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey={option.texturePath}
+                      imgScale={1}
+                    />
+                    <StyledItem>
+                      {modifyString(option.key)} ({option.qty}x)
+                    </StyledItem>
+                  </Recipes>
+                ))}
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => onCraftItem(craftItem)}
+        >
+          Craft
+        </Button>
+      </ButtonWrapper>
+    </DraggableContainer>
   );
 };
 

package/src/components/CraftBook/MockItems.ts

@@ -6,38 +6,41 @@ export const craftableItems: ICraftableItem[] = [
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
   {
-    key: 'bandana',
+    key: 'bandana1',
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
   {
-    key: 'bandana',
+    key: 'bandana2',
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
 ];

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

@@ -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,19 @@ 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;
+  checkIfItemCanBeMoved: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
@@ -36,6 +50,11 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemClick,
   atlasIMG,
   atlasJSON,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onItemOutsideDrop,
+  checkIfItemCanBeMoved,
 }) => {
   const {
     neck,
@@ -102,6 +121,25 @@ 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);
+          }}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -134,6 +172,7 @@ const EquipmentSetContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
+  touch-action: none;
 `;
 
 const EquipmentColumn = styled.div`
@@ -141,4 +180,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,26 @@ 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;
+  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 +47,19 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   atlasJSON,
   atlasIMG,
   disableContextMenu = false,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onOutsideDrop,
+  checkIfItemCanBeMoved,
+  initialPosition,
 }) => {
+  const [quantitySelect, setQuantitySelect] = useState({
+    isOpen: false,
+    maxQuantity: 1,
+    callback: (_quantity: number) => {},
+  });
+
   const onRenderSlots = () => {
     const slots = [];
 
@@ -52,6 +80,28 @@ 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);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onOutsideDrop) onOutsideDrop(item, position);
+          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -61,11 +111,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 +154,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);
+`;