@rpg-engine/long-bow 0.8.71 → 0.8.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.71",
+  "version": "0.8.73",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.123",
+    "@rpg-engine/shared": "^0.10.14",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Store/CartView.tsx

@@ -1,4 +1,4 @@
-import { IStoreItem, MetadataType } from '@rpg-engine/shared';
+import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -9,12 +9,15 @@ import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 
 
+// Local cart item interface
+interface ICartItem {
+  item: IProductBlueprint;
+  quantity: number;
+  metadata?: Record<string, any>;
+}
+
 interface ICartViewProps {
-  cartItems: { 
-    item: IStoreItem; 
-    quantity: number;
-    metadata?: Record<string, any>;
-  }[];
+  cartItems: ICartItem[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
   onPurchase: () => Promise<boolean>;

package/src/components/Store/Store.tsx

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -19,7 +19,7 @@ type TabId = 'premium' | 'packs' | 'items';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
-  items: IStoreItem[];
+  items: IProductBlueprint[];
   packs?: IItemPack[];
   atlasJSON: any;
   atlasIMG: string;
@@ -71,41 +71,33 @@ export const Store: React.FC<IStoreProps> = ({
     isCartOpen,
   } = useStoreCart();
   const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
-  const [currentMetadataItem, setCurrentMetadataItem] = useState<IStoreItem | null>(null);
+  const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
 
   const handleAddPackToCart = (pack: IItemPack) => {
-    const packItem: IStoreItem = {
-      _id: pack.key,
+    const packItem: IProductBlueprint = {
       key: pack.key,
       name: pack.title,
+      description: pack.description || '',
       price: pack.priceUSD,
+      currency: PaymentCurrency.USD,
       texturePath: pack.image.default || pack.image.src,
-      textureKey: pack.image.default || pack.image.src,
-      type: ItemType.Consumable,
-      subType: ItemSubType.Other,
-      description: pack.description || '',
-      fullDescription: pack.description || '',
-      textureAtlas: 'items',
-      weight: 0,
+      type: PurchaseType.Pack,
+      onPurchase: async () => {},
+      itemType: ItemType.Consumable,
+      itemSubType: ItemSubType.Other,
       rarity: ItemRarities.Common,
-      allowedEquipSlotType: [],
-      isEquipable: false,
+      weight: 0,
       isStackable: false,
-      isTwoHanded: false,
-      hasUseWith: false,
       maxStackSize: 1,
       isUsable: false,
-      isStorable: true,
-      isSolid: false,
-      isItemContainer: false,
     };
     handleAddToCart(packItem, 1);
   };
 
   const filterItems = (
-    itemsToFilter: IStoreItem[],
+    itemsToFilter: IProductBlueprint[],
     type: 'items' | 'premium'
-  ): IStoreItem[] => {
+  ): IProductBlueprint[] => {
     return itemsToFilter.filter(item => {
       if (type === 'premium') {
         return item.requiredAccountType?.length ?? 0 > 0;

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -1,17 +1,26 @@
-import { IStoreItem, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import {
+  IProductBlueprint,
+  MetadataType,
+  UserAccountTypes,
+} from '@rpg-engine/shared';
+import React from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { useCharacterSkinNavigation } from '../../hooks/useCharacterSkinNavigation';
 
 interface IStoreCharacterSkinRowProps {
-  item: IStoreItem;
+  item: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (
+    item: IProductBlueprint,
+    quantity: number,
+    metadata?: Record<string, any>
+  ) => void;
   userAccountType: UserAccountTypes;
 }
 
@@ -22,33 +31,21 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   onAddToCart,
   userAccountType,
 }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  
   // Get available characters from metadata
-  const availableCharacters: ICharacterProps[] = 
-    item.metadataType === MetadataType.CharacterSkin && 
-    item.metadataConfig?.availableCharacters || [];
-  
+  const availableCharacters: ICharacterProps[] =
+    (item.metadataType === MetadataType.CharacterSkin &&
+      item.metadataConfig?.availableCharacters) ||
+    [];
+
   // Get the active character entity atlas info
   const entityAtlasJSON = item.metadataConfig?.atlasJSON;
   const entityAtlasIMG = item.metadataConfig?.atlasIMG;
-  
-  // Effect to reset currentIndex when switching items
-  useEffect(() => {
-    setCurrentIndex(0);
-  }, [item._id]);
-  
-  const handlePreviousSkin = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
-    );
-  };
 
-  const handleNextSkin = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
-    );
-  };
+  const {
+    currentCharacter,
+    handlePreviousSkin,
+    handleNextSkin,
+  } = useCharacterSkinNavigation(availableCharacters, item.key);
 
   const hasRequiredAccount =
     !item.requiredAccountType?.length ||
@@ -56,26 +53,24 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
 
   const handleAddToCart = () => {
     if (!hasRequiredAccount) return;
-    
+
     // Always use a quantity of 1
     if (availableCharacters.length > 0 && currentCharacter) {
-      onAddToCart(item, 1, { 
+      onAddToCart(item, 1, {
         selectedSkinName: currentCharacter.name,
-        selectedSkinTextureKey: currentCharacter.textureKey 
+        selectedSkinTextureKey: currentCharacter.textureKey,
       });
     } else {
       onAddToCart(item, 1);
     }
   };
-  
+
   const getSpriteKey = (textureKey: string) => {
     return textureKey + '/down/standing/0.png';
   };
-  
-  const currentCharacter = availableCharacters[currentIndex];
 
   return (
-    <ItemWrapper>
+    <ItemWrapper $isHighlighted={item.store?.isHighlighted || false}>
       <ItemIconContainer>
         {entityAtlasJSON && entityAtlasIMG && currentCharacter ? (
           <SpriteFromAtlas
@@ -87,7 +82,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
             imgScale={2}
             centered
           />
-        ) : (
+        ) : item.texturePath ? (
           <SpriteFromAtlas
             atlasJSON={atlasJSON}
             atlasIMG={atlasIMG}
@@ -97,19 +92,29 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
             imgScale={2}
             centered
           />
+        ) : (
+          <DefaultIcon>👤</DefaultIcon>
         )}
       </ItemIconContainer>
 
       <ItemDetails>
         <Header>
-          <ItemName>{item.name}</ItemName>         
+          <ItemName>{item.name}</ItemName>
         </Header>
         {availableCharacters.length > 0 && currentCharacter && (
           <SelectedSkinNav>
             <SelectedSkin>Selected:</SelectedSkin>
-            <SkinNavArrow direction="left" onPointerDown={handlePreviousSkin} size={24} />
+            <SkinNavArrow
+              direction="left"
+              onPointerDown={handlePreviousSkin}
+              size={24}
+            />
             <SelectedSkin>{currentCharacter.name}</SelectedSkin>
-            <SkinNavArrow direction="right" onPointerDown={handleNextSkin} size={24} />
+            <SkinNavArrow
+              direction="right"
+              onPointerDown={handleNextSkin}
+              size={24}
+            />
           </SelectedSkinNav>
         )}
         <ItemPrice>${item.price}</ItemPrice>
@@ -126,12 +131,16 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   );
 };
 
-const ItemWrapper = styled.div`
+const ItemWrapper = styled.div<{ $isHighlighted: boolean }>`
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background: ${props =>
+    props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent'};
+  border-left: ${props =>
+    props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent'};
 
   &:last-child {
     border-bottom: none;
@@ -152,31 +161,31 @@ const ItemDetails = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 `;
 
 const ItemName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   color: #ffffff;
 `;
 
 const SelectedSkin = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.65rem;
+  font-size: 0.5rem;
   color: #fef08a;
 `;
 
 const ItemPrice = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   color: #fef08a;
 `;
 
 const Controls = styled.div`
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
   min-width: fit-content;
 `;
 
@@ -195,4 +204,13 @@ const SelectedSkinNav = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
-`; 
+`;
+
+const DefaultIcon = styled.div`
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+`;

package/src/components/Store/StoreItemDetails.tsx

@@ -1,14 +1,14 @@
-import { IItemPack, IStoreItem } from '@rpg-engine/shared';
+import { IItemPack, IProductBlueprint } from '@rpg-engine/shared';
 import React from 'react';
 import { FaArrowLeft, FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 
 interface IStoreItemDetailsProps {
-  item: IStoreItem | (IItemPack & { name: string; texturePath: string });
+  item: IProductBlueprint | (IItemPack & { name: string; texturePath: string });
   imageUrl: string | { src: string; default?: string };
   onBack: () => void;
-  onAddToCart: (item: IStoreItem) => void;
+  onAddToCart: (item: IProductBlueprint) => void;
 }
 
 export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
@@ -53,7 +53,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
           <CTAButton
             icon={<FaCartPlus />}
             label="Add to Cart"
-            onClick={() => onAddToCart(item as IStoreItem)}
+            onClick={() => onAddToCart(item as IProductBlueprint)}
             fullWidth
           />
         </Actions>

package/src/components/Store/StoreItemRow.tsx

@@ -1,18 +1,24 @@
-import { IStoreItem, UserAccountTypes } from '@rpg-engine/shared';
+import { IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { useQuantityControl } from '../../hooks/useQuantityControl';
 
 interface IStoreItemRowProps {
-  item: IStoreItem;
+  item: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (
+    item: IProductBlueprint,
+    quantity: number,
+    metadata?: Record<string, any>
+  ) => void;
   userAccountType: UserAccountTypes;
   showTextInput?: boolean;
+  textInputPlaceholder?: string;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -22,27 +28,17 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   onAddToCart,
   userAccountType,
   showTextInput = false,
+  textInputPlaceholder = item.inputPlaceholder,
 }) => {
-  const [quantity, setQuantity] = useState(1);
   const [textInputValue, setTextInputValue] = useState('');
-
-  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value) || 1;
-    setQuantity(Math.min(Math.max(1, value), 99));
-  };
-
-  const handleBlur = () => {
-    if (quantity < 1) setQuantity(1);
-    if (quantity > 99) setQuantity(99);
-  };
-
-  const incrementQuantity = () => {
-    setQuantity(prev => Math.min(prev + 1, 99));
-  };
-
-  const decrementQuantity = () => {
-    setQuantity(prev => Math.max(1, prev - 1));
-  };
+  const {
+    quantity,
+    handleQuantityChange,
+    handleBlur,
+    incrementQuantity,
+    decrementQuantity,
+    resetQuantity,
+  } = useQuantityControl();
 
   const hasRequiredAccount =
     !item.requiredAccountType?.length ||
@@ -54,13 +50,13 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       onAddToCart(item, 1, { inputValue: textInputValue });
       setTextInputValue('');
     } else {
-    onAddToCart(item, quantity);
-      setQuantity(1);
+      onAddToCart(item, quantity);
+      resetQuantity();
     }
   };
 
   return (
-    <ItemWrapper>
+    <ItemWrapper $isHighlighted={item.store?.isHighlighted || false}>
       <ItemIconContainer>
         <SpriteFromAtlas
           atlasJSON={atlasJSON}
@@ -76,6 +72,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
         <ItemPrice>${item.price}</ItemPrice>
+        <ItemDescription>{item.description}</ItemDescription>
       </ItemDetails>
 
       <Controls>
@@ -84,34 +81,34 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           <TextInput
             type="text"
             value={textInputValue}
-            placeholder="Enter value"
+            placeholder={textInputPlaceholder}
             onChange={e => setTextInputValue(e.target.value)}
             className="rpgui-input"
           />
         ) : item.isStackable ? (
-        <ArrowsContainer>
-          <SelectArrow
-            direction="left"
-            onPointerDown={decrementQuantity}
-            size={24}
-          />
-
-          <QuantityInput
-            type="number"
-            value={quantity}
-            onChange={handleQuantityChange}
-            onBlur={handleBlur}
-            min={1}
-            max={99}
-            className="rpgui-input"
-          />
-
-          <SelectArrow
-            direction="right"
-            onPointerDown={incrementQuantity}
-            size={24}
-          />
-        </ArrowsContainer>
+          <ArrowsContainer>
+            <SelectArrow
+              direction="left"
+              onPointerDown={decrementQuantity}
+              size={24}
+            />
+
+            <QuantityInput
+              type="number"
+              value={quantity}
+              onChange={handleQuantityChange}
+              onBlur={handleBlur}
+              min={1}
+              max={99}
+              className="rpgui-input"
+            />
+
+            <SelectArrow
+              direction="right"
+              onPointerDown={incrementQuantity}
+              size={24}
+            />
+          </ArrowsContainer>
         ) : null}
 
         <CTAButton
@@ -125,12 +122,16 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   );
 };
 
-const ItemWrapper = styled.div`
+const ItemWrapper = styled.div<{ $isHighlighted: boolean }>`
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background: ${props =>
+    props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent'};
+  border-left: ${props =>
+    props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent'};
 
   &:last-child {
     border-bottom: none;
@@ -151,25 +152,32 @@ const ItemDetails = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 `;
 
 const ItemName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   color: #ffffff;
 `;
 
 const ItemPrice = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   color: #fef08a;
 `;
 
+const ItemDescription = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.625rem;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.4;
+`;
+
 const Controls = styled.div`
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
   min-width: fit-content;
 `;
 

package/src/components/Store/hooks/useStoreCart.ts

@@ -1,23 +1,24 @@
 import {
-  ICartItem as IBaseCartItem,
   IPurchase,
   IPurchaseUnit,
-  IStoreItem,
+  IProductBlueprint,
   MetadataType,
   PurchaseType
 } from '@rpg-engine/shared';
 import { useEffect, useRef, useState } from 'react';
 import { useStoreMetadata } from './useStoreMetadata';
 
-// Extend the base cart item to include metadata
-interface ICartItem extends IBaseCartItem {
+// Create local cart item interface that uses IProductBlueprint
+interface ICartItem {
+  item: IProductBlueprint;
+  quantity: number;
   metadata?: Record<string, any>;
 }
 
 interface IUseStoreCart {
   cartItems: ICartItem[];
   isCartOpen: boolean;
-  handleAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  handleAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   handleRemoveFromCart: (itemKey: string) => void;
   handlePurchase: (onPurchase: (purchase: IPurchase) => void) => void;
   openCart: () => void;
@@ -40,7 +41,7 @@ export const useStoreCart = (): IUseStoreCart => {
 
   const { collectMetadata, isCollectingMetadata } = useStoreMetadata();
 
-  const handleAddToCart = async (item: IStoreItem, quantity: number, preselectedMetadata?: Record<string, any>) => {
+  const handleAddToCart = async (item: IProductBlueprint, quantity: number, preselectedMetadata?: Record<string, any>) => {
     // If metadata is already provided (from inline selection), use it directly
     if (preselectedMetadata) {
       setCartItems(prevItems => {
@@ -57,7 +58,7 @@ export const useStoreCart = (): IUseStoreCart => {
     }
     
     // If item requires metadata but none was provided, collect it before adding to cart
-    if (item.metadataType && item.metadataType !== MetadataType.None) {
+    if (item.metadataType === MetadataType.CharacterSkin) {
       const metadata = await collectMetadata(item);
       if (!metadata) return; // User cancelled
 
@@ -156,8 +157,12 @@ export const useStoreCart = (): IUseStoreCart => {
 };
 
 // Helper functions
-function getPurchaseType(item: IStoreItem): PurchaseType {
-  // Check if the item comes from a pack based on naming convention or other property
+function getPurchaseType(item: IProductBlueprint): PurchaseType {
+  // Use the type from IProductBlueprint if available, otherwise infer
+  if (item.type) {
+    return item.type;
+  }
+  // Fallback logic for backward compatibility
   if (item.key.startsWith('pack_')) {
     return PurchaseType.Pack;
   } else {

package/src/components/Store/hooks/useStoreMetadata.ts

@@ -1,16 +1,16 @@
-import { IStoreItem, MetadataType } from "@rpg-engine/shared";
+import { IProductBlueprint, MetadataType } from "@rpg-engine/shared";
 import { useState } from "react";
 
 interface IUseStoreMetadata {
-    collectMetadata: (item: IStoreItem) => Promise<Record<string, any> | null>;
+    collectMetadata: (item: IProductBlueprint) => Promise<Record<string, any> | null>;
     isCollectingMetadata: boolean;
 }
 
 export const useStoreMetadata = (): IUseStoreMetadata => {
     const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
     
-    const collectMetadata = async (item: IStoreItem): Promise<Record<string, any> | null> => {
-        if (!item.metadataType || item.metadataType === MetadataType.None) {
+    const collectMetadata = async (item: IProductBlueprint): Promise<Record<string, any> | null> => {
+        if (!item.metadataType || item.metadataType !== MetadataType.CharacterSkin) {
             return null;
         }
 
@@ -49,7 +49,7 @@ declare global {
     interface Window {
         __metadataResolvers?: {
             resolve: (metadata: Record<string, any> | null) => void;
-            item: IStoreItem;
+            item: IProductBlueprint;
         };
     }
 }