@rpg-engine/long-bow 0.7.16 → 0.7.17

package/package.json

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

package/src/components/Arrow/SelectArrow.tsx

@@ -9,11 +9,13 @@ export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
   direction: 'right' | 'left';
   onPointerDown: () => void;
   size?: number;
+  scale?: number;
 }
 
 export const SelectArrow: React.FC<ArrowBarProps> = ({
   direction = 'left',
   size,
+  scale = 1,
   onPointerDown,
   ...props
 }) => {
@@ -22,12 +24,14 @@ export const SelectArrow: React.FC<ArrowBarProps> = ({
       {direction === 'left' ? (
         <LeftArrow
           size={size}
+          scale={scale}
           onPointerDown={() => onPointerDown()}
           {...props}
         ></LeftArrow>
       ) : (
         <RightArrow
           size={size}
+          scale={scale}
           onPointerDown={() => onPointerDown()}
           {...props}
         ></RightArrow>
@@ -38,6 +42,7 @@ export const SelectArrow: React.FC<ArrowBarProps> = ({
 
 interface IArrowProps {
   size?: number;
+  scale?: number;
 }
 
 const LeftArrow = styled.span<IArrowProps>`
@@ -47,6 +52,7 @@ const LeftArrow = styled.span<IArrowProps>`
   position: absolute;
   width: ${props => props.size || 40}px;
   height: ${props => props.size || 42}px;
+  transform: scale(${props => props.scale || 1});
   :active {
     background-image: url(${LeftArrowClickIcon});
   }
@@ -60,6 +66,7 @@ const RightArrow = styled.span<IArrowProps>`
   width: ${props => props.size || 40}px;
   height: ${props => props.size || 42}px;
   background-size: 100% 100%;
+  transform: scale(${props => props.scale || 1});
   :active {
     background-image: url(${RightArrowClickIcon});
   }

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -5,7 +5,7 @@ import {
   UserAccountTypes,
 } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
@@ -39,6 +39,30 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   scale,
   isBuy,
 }) => {
+  const [inputQty, setInputQty] = useState(selectedQty.toString());
+
+  useEffect(() => {
+    setInputQty(selectedQty.toString());
+  }, [selectedQty]);
+
+  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newQty = parseInt(e.target.value, 10);
+    if (!isNaN(newQty)) {
+      setInputQty(e.target.value);
+      onQuantityChange(
+        traderItem,
+        Math.max(0, Math.min(newQty, traderItem.stackQty ?? 999))
+      );
+    }
+  };
+
+  const handleBlur = () => {
+    const newQty = parseInt(inputQty, 10);
+    if (isNaN(newQty)) {
+      setInputQty(selectedQty.toString());
+    }
+  };
+
   const onLeftClick = (qty = 1) => {
     onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
   };
@@ -136,6 +160,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           className="arrow-selector"
           direction="left"
           onPointerDown={onLeftClick.bind(null, outerQty)}
+          scale={0.8}
         />
         <StyledArrow
           size={32}
@@ -143,11 +168,12 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           direction="left"
           onPointerDown={onLeftClick}
         />
-        <QuantityDisplay>
-          <TextOverlay>
-            <Item>{selectedQty}</Item>
-          </TextOverlay>
-        </QuantityDisplay>
+        <QuantityInput
+          type="text"
+          value={inputQty}
+          onChange={handleQuantityChange}
+          onBlur={handleBlur}
+        />
         <StyledArrow
           size={32}
           className="arrow-selector"
@@ -159,6 +185,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           className="arrow-selector"
           direction="right"
           onPointerDown={onRightClick.bind(null, outerQty)}
+          scale={0.8}
         />
       </QuantityContainer>
     </ItemWrapper>
@@ -221,19 +248,6 @@ const NameValue = styled.div`
   }
 `;
 
-const Item = styled.span`
-  color: white;
-  text-align: center;
-  z-index: 1;
-
-  width: 100%;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
 interface IContainerProps {
   percentageWidth?: number;
   minWidth?: number;
@@ -252,6 +266,13 @@ const QuantityContainer = styled.div<IContainerProps>`
   flex: 40%;
 `;
 
-const QuantityDisplay = styled.div`
+const QuantityInput = styled.input`
+  width: 40px;
+  text-align: center;
+  background-color: ${uiColors.darkGray};
+  color: white;
+  border: 1px solid ${uiColors.lightGray};
+  padding: 2px;
   font-size: ${uiFonts.size.small};
+  border: none;
 `;