@rpg-engine/long-bow 0.8.68 → 0.8.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.68",
+  "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/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/types/index.d.ts

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