@rpg-engine/long-bow 0.8.70 → 0.8.71

package/package.json

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

package/src/components/Store/CartView.tsx

@@ -111,6 +111,9 @@ export const CartView: React.FC<ICartViewProps> = ({
                 </ItemIconContainer>
                 <ItemDetails>
                   <ItemName>{cartItem.item.name}</ItemName>
+                  {cartItem.metadata?.inputValue && (
+                    <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
+                  )}
                   <ItemInfo>
                     <span>${formatPrice(cartItem.item.price)}</span>
                     <span>×</span>
@@ -339,3 +342,11 @@ const MetadataValue = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+
+const CartMeta = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #ffffff;
+  opacity: 0.8;
+  margin-top: 0.25rem;
+`;

package/src/components/Store/Store.tsx

@@ -32,6 +32,7 @@ export interface IStoreProps {
   hidePremiumTab?: boolean;
   tabOrder?: TabId[];
   defaultActiveTab?: TabId;
+  textInputItemKeys?: string[];
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -48,6 +49,7 @@ export const Store: React.FC<IStoreProps> = ({
   hidePremiumTab = false,
   tabOrder,
   defaultActiveTab,
+  textInputItemKeys = [],
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -188,6 +190,7 @@ export const Store: React.FC<IStoreProps> = ({
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
+          textInputItemKeys={textInputItemKeys}
         />
       ),
     },

package/src/components/Store/StoreItemRow.tsx

@@ -12,6 +12,7 @@ interface IStoreItemRowProps {
   atlasIMG: string;
   onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
   userAccountType: UserAccountTypes;
+  showTextInput?: boolean;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -20,8 +21,10 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   atlasIMG,
   onAddToCart,
   userAccountType,
+  showTextInput = false,
 }) => {
   const [quantity, setQuantity] = useState(1);
+  const [textInputValue, setTextInputValue] = useState('');
 
   const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(e.target.value) || 1;
@@ -45,10 +48,15 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
     !item.requiredAccountType?.length ||
     item.requiredAccountType.includes(userAccountType);
 
-  const handleAddToCart = () => {
+  const handleAddToCartInternal = () => {
     if (!hasRequiredAccount) return;
+    if (showTextInput) {
+      onAddToCart(item, 1, { inputValue: textInputValue });
+      setTextInputValue('');
+    } else {
     onAddToCart(item, quantity);
-    setQuantity(1); // Reset quantity after adding to cart
+      setQuantity(1);
+    }
   };
 
   return (
@@ -71,6 +79,16 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       </ItemDetails>
 
       <Controls>
+        {/* Show text input if configured, else show arrows only for stackable items */}
+        {showTextInput ? (
+          <TextInput
+            type="text"
+            value={textInputValue}
+            placeholder="Enter value"
+            onChange={e => setTextInputValue(e.target.value)}
+            className="rpgui-input"
+          />
+        ) : item.isStackable ? (
         <ArrowsContainer>
           <SelectArrow
             direction="left"
@@ -94,11 +112,12 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
             size={24}
           />
         </ArrowsContainer>
+        ) : null}
 
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
-          onClick={handleAddToCart}
+          onClick={handleAddToCartInternal}
           disabled={!hasRequiredAccount}
         />
       </Controls>
@@ -179,3 +198,14 @@ const QuantityInput = styled.input`
     margin: 0;
   }
 `;
+
+const TextInput = styled.input`
+  width: 120px;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 0.875rem;
+  background: rgba(0, 0, 0, 0.2);
+  color: #ffffff;
+  border: none;
+  padding: 0.25rem;
+`;

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -11,6 +11,7 @@ interface IStoreItemsSectionProps {
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
+  textInputItemKeys?: string[];
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
@@ -19,6 +20,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   atlasJSON,
   atlasIMG,
   userAccountType,
+  textInputItemKeys = [],
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -27,7 +29,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   );
 
   const renderStoreItem = (item: IStoreItem) => {
-    // Use the specialized character skin row for items with character skin metadata
+    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
         <StoreCharacterSkinRow
@@ -40,8 +42,21 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         />
       );
     }
-    
-    // Use the standard item row for all other items
+    // Render text input row when configured for this item key
+    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+      return (
+        <StoreItemRow
+          key={item._id}
+          item={item}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onAddToCart={onAddToCart}
+          userAccountType={userAccountType || UserAccountTypes.Free}
+          showTextInput
+        />
+      );
+    }
+    // Fallback to standard arrow-based row
     return (
       <StoreItemRow
         key={item._id}

package/src/stories/Features/store/Store.stories.tsx

@@ -249,6 +249,7 @@ export const Default: Story = {
       hidePremiumTab={true}
       tabOrder={['items', 'packs']}
       defaultActiveTab="items"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1']}
     />
   ),
 };