@rpg-engine/long-bow 0.3.37 → 0.3.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.37",
+  "version": "0.3.39",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.73",
+    "@rpg-engine/shared": "^0.6.74",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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

@@ -344,9 +344,14 @@ export const ItemSlot: React.FC<IProps> = observer(
               onDragStart(item, slotIndex, containerType);
             }
           }}
-          onDrag={() => {
-            setWasDragged(true);
-            setIsFocused(true);
+          onDrag={(_e, data) => {
+            if (
+              Math.abs(data.x - dragPosition.x) > 5 ||
+              Math.abs(data.y - dragPosition.y) > 5
+            ) {
+              setWasDragged(true);
+              setIsFocused(true);
+            }
           }}
           position={dragPosition}
           cancel=".empty-slot"

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,4 +1,4 @@
-import { ITradeResponseItem, getItemTextureKeyPath } from '@rpg-engine/shared';
+import { getItemTextureKeyPath, ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 import styled from 'styled-components';
@@ -37,6 +37,18 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       onQuantityChange(traderItem, newQuantity);
     }
   };
+  const onLeftOutClick = () => {
+    if (selectedQty >= 10) {
+      const newQuantity = selectedQty - 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
+  const onRightOutClick = () => {
+    if (selectedQty < (traderItem.qty ?? 999)) {
+      const newQuantity = selectedQty + 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
 
   return (
     <ItemWrapper>
@@ -70,29 +82,47 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
 
       <QuantityContainer>
         <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onClick={onLeftOutClick}
+          onTouchStart={onLeftOutClick}
+        />
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="left"
           onClick={onLeftClick}
           onTouchStart={onLeftClick}
-        ></SelectArrow>
+        />
         <QuantityDisplay>
           <TextOverlay>
             <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
-        <SelectArrow
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="right"
           onClick={onRightClick}
           onTouchStart={onRightClick}
-        ></SelectArrow>
+        />
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onClick={onRightOutClick}
+          onTouchStart={onRightOutClick}
+        />
       </QuantityContainer>
     </ItemWrapper>
   );
 };
 
+const StyledArrow = styled(SelectArrow)`
+  margin: 40px;
+`;
+
 const ItemWrapper = styled.div`
   width: 100%;
   margin: auto;
@@ -159,7 +189,7 @@ const QuantityContainer = styled.div<IContainerProps>`
   justify-content: center;
   align-items: center;
 
-  flex: 20%;
+  flex: 40%;
 `;
 
 const QuantityDisplay = styled.div`

package/src/components/TradingMenu/TradingMenu.tsx

@@ -80,7 +80,7 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
       onCloseButton={() => {
         if (onClose) onClose();
       }}
-      width="500px"
+      width="600px"
       cancelDrag=".equipment-container-body .arrow-selector"
     >
       <>