@rpg-engine/long-bow 0.8.67 → 0.8.69

package/package.json

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

package/src/components/Store/CartView.tsx

@@ -2,10 +2,13 @@ import { IStoreItem, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
+import characterAtlasJSON from '../../mocks/atlas/entities/entities.json';
+import characterAtlasIMG from '../../mocks/atlas/entities/entities.png';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 
+
 interface ICartViewProps {
   cartItems: { 
     item: IStoreItem; 
@@ -31,7 +34,7 @@ const MetadataDisplay: React.FC<{
             <FaInfoCircle />
             <span>Skin:</span>
           </MetadataLabel>
-          <MetadataValue>{metadata.selectedSkin?.name || 'Custom skin'}</MetadataValue>
+          <MetadataValue>{metadata.selectedSkinName || 'Custom skin'}</MetadataValue>
         </MetadataInfo>
       );
     default:
@@ -87,48 +90,55 @@ export const CartView: React.FC<ICartViewProps> = ({
         {cartItems.length === 0 ? (
           <EmptyCart>Your cart is empty</EmptyCart>
         ) : (
-          cartItems.map(cartItem => (
-            <CartItemRow key={cartItem.item.key}>
-              <ItemIconContainer>
-                <SpriteFromAtlas
-                  atlasJSON={atlasJSON}
-                  atlasIMG={atlasIMG}
-                  spriteKey={cartItem.item.texturePath}
-                  width={32}
-                  height={32}
-                  imgScale={2}
-                  centered
-                />
-              </ItemIconContainer>
-              <ItemDetails>
-                <ItemName>{cartItem.item.name}</ItemName>
-                <ItemInfo>
-                  <span>${formatPrice(cartItem.item.price)}</span>
-                  <span>×</span>
-                  <span>{cartItem.quantity}</span>
-                  <span>=</span>
-                  <span>
-                    ${formatPrice(cartItem.item.price * cartItem.quantity)}
-                  </span>
-                </ItemInfo>
-                
-                {cartItem.metadata && cartItem.item.metadataType && (
-                  <MetadataDisplay 
-                    type={cartItem.item.metadataType} 
-                    metadata={cartItem.metadata}
+          cartItems.map(cartItem => {
+            console.log('Item metadataType: , texturePath:', cartItem.item.metadataType , cartItem.item.texturePath);
+            const getSpriteKey = (textureKey: string) => {
+              return textureKey + '/down/standing/0.png';
+            };
+
+            return (            
+              <CartItemRow key={cartItem.item.key}>
+                <ItemIconContainer>
+                  <SpriteFromAtlas
+                    atlasJSON={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON}
+                    atlasIMG={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasIMG : atlasIMG}
+                    spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && cartItem.metadata?.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath}
+                    width={32}
+                    height={32}
+                    imgScale={2}
+                    centered
                   />
-                )}
-              </ItemDetails>
-
-              <CTAButton
-                icon={<FaTrash />}
-                onClick={e => {
-                  e.stopPropagation();
-                  onRemoveFromCart(cartItem.item.key);
-                }}
-              />
-            </CartItemRow>
-          ))
+                </ItemIconContainer>
+                <ItemDetails>
+                  <ItemName>{cartItem.item.name}</ItemName>
+                  <ItemInfo>
+                    <span>${formatPrice(cartItem.item.price)}</span>
+                    <span>×</span>
+                    <span>{cartItem.quantity}</span>
+                    <span>=</span>
+                    <span>
+                      ${formatPrice(cartItem.item.price * cartItem.quantity)}
+                    </span>
+                  </ItemInfo>
+                  
+                  {cartItem.metadata && cartItem.item.metadataType && (
+                    <MetadataDisplay 
+                      type={cartItem.item.metadataType} 
+                      metadata={cartItem.metadata}
+                    />
+                  )}
+                </ItemDetails>
+
+                <CTAButton
+                  icon={<FaTrash />}
+                  onClick={e => {
+                    e.stopPropagation();
+                    onRemoveFromCart(cartItem.item.key);
+                  }}
+                />
+              </CartItemRow>
+            );
+          })
         )}
       </CartItems>
 

package/src/components/Store/Store.tsx

@@ -1,6 +1,6 @@
-import { IItemPack, IStoreItem, IStoreProps, ItemRarities, ItemSubType, ItemType } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
-import { FaShoppingCart } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -14,12 +14,27 @@ import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
+// Define IStoreProps locally as a workaround
+export interface IStoreProps {
+  items: IStoreItem[];
+  packs?: IItemPack[];
+  atlasJSON: any;
+  atlasIMG: string;
+  onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
+  onShowHistory?: () => void; // Add the new optional prop
+  userAccountType: UserAccountTypes;
+  loading?: boolean;
+  error?: string;
+  onClose?: () => void;
+}
+
 export const Store: React.FC<IStoreProps> = ({
   items,
   packs = [],
   atlasJSON,
   atlasIMG,
   onPurchase,
+  onShowHistory, // Destructure the new prop
   userAccountType,
   loading = false,
   error,
@@ -202,6 +217,15 @@ export const Store: React.FC<IStoreProps> = ({
       ) : (
         <Container>
           <TopBar>
+            <HistoryButton>
+              {onShowHistory && (
+                <CTAButton
+                  icon={<FaHistory />}
+                  label="History"
+                  onClick={onShowHistory}
+                />
+              )}
+            </HistoryButton>
             <CartButton>
               <CTAButton
                 icon={<FaShoppingCart />}
@@ -267,6 +291,11 @@ const TopBar = styled.div`
   margin-top: 0.5rem;
 `;
 
+const HistoryButton = styled.div`
+  min-width: fit-content;
+  margin-right: auto;
+`;
+
 const CartButton = styled.div`
   min-width: fit-content;
 `;

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -78,10 +78,10 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
     if (!hasRequiredAccount) return;
     
     // If we have character skins, add the selected skin to the purchase
-    if (availableCharacters.length > 0) {
-      const selectedCharacter = availableCharacters[currentIndex];
+    if (availableCharacters.length > 0 && currentCharacter) {
       onAddToCart(item, quantity, { 
-        selectedSkin: selectedCharacter.textureKey 
+        selectedSkinName: currentCharacter.name,
+        selectedSkinTextureKey: currentCharacter.textureKey 
       });
     } else {
       onAddToCart(item, quantity);

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

@@ -238,9 +238,11 @@ export const Default: Story = {
       items={duplicatedItems}
       packs={mockPacks}
       userAccountType={UserAccountTypes.Free}
-      onPurchase={(purchase: IPurchase) => {
+      onPurchase={(purchase: Partial<IPurchase>) => {
         console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
       }}
+      onShowHistory={() => console.log('Show History clicked in story')}
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}

package/src/types/index.d.ts

@@ -1,2 +1,3 @@
 declare module '*.gif';
 declare module '*.png';
+declare module '*.json';