@rpg-engine/long-bow 0.8.68 → 0.8.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.68",
+  "version": "0.8.70",
   "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,5 +1,5 @@
 import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -14,6 +14,9 @@ import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
+// Define TabId union type for tab identifiers
+type TabId = 'premium' | 'packs' | 'items';
+
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
   items: IStoreItem[];
@@ -26,6 +29,9 @@ export interface IStoreProps {
   loading?: boolean;
   error?: string;
   onClose?: () => void;
+  hidePremiumTab?: boolean;
+  tabOrder?: TabId[];
+  defaultActiveTab?: TabId;
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -39,9 +45,18 @@ export const Store: React.FC<IStoreProps> = ({
   loading = false,
   error,
   onClose,
+  hidePremiumTab = false,
+  tabOrder,
+  defaultActiveTab,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
-  const [activeTab, setActiveTab] = useState('premium');
+  const [activeTab, setActiveTab] = useState<TabId>(() => {
+    const initialTabs = (tabOrder ?? ['premium', 'packs', 'items']).filter(id => !(hidePremiumTab && id === 'premium'));
+    if (defaultActiveTab && initialTabs.includes(defaultActiveTab)) {
+      return defaultActiveTab;
+    }
+    return hidePremiumTab ? 'items' : 'premium';
+  });
   const {
     cartItems,
     handleAddToCart,
@@ -136,8 +151,12 @@ export const Store: React.FC<IStoreProps> = ({
     return <ErrorMessage>{error}</ErrorMessage>;
   }
 
-  const tabs = [
-    {
+  // Build tabs dynamically based on props
+  const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
+  const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
+
+  const tabsMap: Record<TabId, { id: TabId; title: string; content: ReactNode }> = {
+    premium: {
       id: 'premium',
       title: 'Premium',
       content: (
@@ -148,7 +167,7 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
-    {
+    packs: {
       id: 'packs',
       title: 'Packs',
       content: (
@@ -159,7 +178,7 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
-    {
+    items: {
       id: 'items',
       title: 'Items',
       content: (
@@ -172,7 +191,9 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
-  ];
+  };
+
+  const tabs = availableTabIds.map(id => tabsMap[id]);
 
   return (
     <DraggableContainer
@@ -243,7 +264,7 @@ export const Store: React.FC<IStoreProps> = ({
               borderColor="#f59e0b"
               hoverColor="#fef3c7"
               activeTab={activeTab}
-              onTabChange={setActiveTab}
+              onTabChange={(tabId: string) => setActiveTab(tabId as TabId)}
             />
           </MainContent>
           {cartItems.length > 0 && (

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -4,7 +4,6 @@ import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -23,7 +22,6 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   onAddToCart,
   userAccountType,
 }) => {
-  const [quantity, setQuantity] = useState(1);
   const [currentIndex, setCurrentIndex] = useState(0);
   
   // Get available characters from metadata
@@ -40,32 +38,14 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
     setCurrentIndex(0);
   }, [item._id]);
   
-  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 handlePreviousSkin = () => {
-    setCurrentIndex((prevIndex) => 
+    setCurrentIndex((prevIndex) =>
       prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
     );
   };
 
   const handleNextSkin = () => {
-    setCurrentIndex((prevIndex) => 
+    setCurrentIndex((prevIndex) =>
       prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
     );
   };
@@ -77,17 +57,15 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   const handleAddToCart = () => {
     if (!hasRequiredAccount) return;
     
-    // If we have character skins, add the selected skin to the purchase
-    if (availableCharacters.length > 0) {
-      const selectedCharacter = availableCharacters[currentIndex];
-      onAddToCart(item, quantity, { 
-        selectedSkin: selectedCharacter.textureKey 
+    // Always use a quantity of 1
+    if (availableCharacters.length > 0 && currentCharacter) {
+      onAddToCart(item, 1, { 
+        selectedSkinName: currentCharacter.name,
+        selectedSkinTextureKey: currentCharacter.textureKey 
       });
     } else {
-      onAddToCart(item, quantity);
+      onAddToCart(item, 1);
     }
-    
-    setQuantity(1); // Reset quantity after adding to cart
   };
   
   const getSpriteKey = (textureKey: string) => {
@@ -99,34 +77,16 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   return (
     <ItemWrapper>
       <ItemIconContainer>
-        {availableCharacters.length > 0 && currentCharacter && entityAtlasJSON && entityAtlasIMG ? (
-          <CharacterSkinPreviewContainer>
-            <NavArrow
-              direction="left"
-              onPointerDown={handlePreviousSkin}
-              size={24}
-            />
-            
-            <SpriteContainer>
-              <ErrorBoundary>
-                <SpriteFromAtlas
-                  atlasJSON={entityAtlasJSON}
-                  atlasIMG={entityAtlasIMG}
-                  spriteKey={getSpriteKey(currentCharacter.textureKey)}
-                  width={32}
-                  height={32}
-                  imgScale={2}
-                  centered
-                />
-              </ErrorBoundary>
-            </SpriteContainer>
-            
-            <NavArrow
-              direction="right"
-              onPointerDown={handleNextSkin}
-              size={24}
-            />
-          </CharacterSkinPreviewContainer>
+        {entityAtlasJSON && entityAtlasIMG && currentCharacter ? (
+          <SpriteFromAtlas
+            atlasJSON={entityAtlasJSON}
+            atlasIMG={entityAtlasIMG}
+            spriteKey={getSpriteKey(currentCharacter.textureKey)}
+            width={32}
+            height={32}
+            imgScale={2}
+            centered
+          />
         ) : (
           <SpriteFromAtlas
             atlasJSON={atlasJSON}
@@ -141,38 +101,20 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
       </ItemIconContainer>
 
       <ItemDetails>
-        <ItemName>{item.name}</ItemName>
+        <Header>
+          <ItemName>{item.name}</ItemName>         
+        </Header>
         {availableCharacters.length > 0 && currentCharacter && (
-          <SelectedSkin>Selected: {currentCharacter.name}</SelectedSkin>
+          <SelectedSkinNav>
+            <SelectedSkin>Selected:</SelectedSkin>
+            <SkinNavArrow direction="left" onPointerDown={handlePreviousSkin} size={24} />
+            <SelectedSkin>{currentCharacter.name}</SelectedSkin>
+            <SkinNavArrow direction="right" onPointerDown={handleNextSkin} size={24} />
+          </SelectedSkinNav>
         )}
         <ItemPrice>${item.price}</ItemPrice>
       </ItemDetails>
-
       <Controls>
-        <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>
-
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
@@ -197,7 +139,8 @@ const ItemWrapper = styled.div`
 `;
 
 const ItemIconContainer = styled.div`
-  min-width: 140px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -205,28 +148,6 @@ const ItemIconContainer = styled.div`
   padding: 4px;
 `;
 
-const CharacterSkinPreviewContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 140px;
-  height: 42px;
-  justify-content: space-between;
-`;
-
-const SpriteContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-
-const NavArrow = styled(SelectArrow)`
-  z-index: 2;
-`;
-
 const ItemDetails = styled.div`
   flex: 1;
   display: flex;
@@ -259,28 +180,19 @@ const Controls = styled.div`
   min-width: fit-content;
 `;
 
-const ArrowsContainer = styled.div`
-  position: relative;
+// Styled arrow override for inline nav arrows
+const SkinNavArrow = styled(SelectArrow)`
+  position: static;
+`;
+
+const Header = styled.div`
   display: flex;
   align-items: center;
-  width: 120px;
-  height: 42px;
-  justify-content: space-between;
+  gap: 0.5rem;
 `;
 
-const QuantityInput = styled.input`
-  width: 40px;
-  text-align: center;
-  margin: 0 auto;
-  font-size: 0.875rem;
-  background: rgba(0, 0, 0, 0.2);
-  color: #ffffff;
-  border: none;
-  padding: 0.25rem;
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+const SelectedSkinNav = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 `; 

package/src/components/Store/__test__/MetadataCollector.spec.tsx

@@ -24,9 +24,10 @@ jest.mock('../../Character/CharacterSkinSelectionModal', () => ({
 jest.mock('../MetadataCollector', () => ({
   MetadataCollector: jest.fn(({ metadataType, config, onCollect, onCancel }) => {
     // Set up cleanup function for the useEffect tests
+    const React = require('react');
     React.useEffect(() => {
       return () => {
-        if (window.__metadataResolvers) {
+        if (globalThis.__metadataResolvers) {
           onCancel();
         }
       };

package/src/components/Store/__test__/useStoreMetadata.spec.tsx

@@ -20,15 +20,15 @@ jest.mock('../hooks/useStoreMetadata', () => {
     
     const collectMetadata = async (item) => {
       // If no metadata type or None, return null immediately
-      if (!item.metadataType || item.metadataType === MetadataType.None) {
+      if (!item.metadataType || item.metadataType === 'None') {
         return null;
       }
       
       // Setup for valid metadata types
-      window.__metadataResolvers = {
+      globalThis.__metadataResolvers = {
         resolve: (metadata) => {
           // Clean up
-          window.__metadataResolvers = undefined;
+          globalThis.__metadataResolvers = undefined;
           return metadata;
         },
         item
@@ -36,7 +36,7 @@ jest.mock('../hooks/useStoreMetadata', () => {
       
       // Handle the last test case specifically
       if (item.key === 'item-character-skin-metadata-cancel') {
-        window.__metadataResolvers = undefined; // Make sure it's cleaned up
+        globalThis.__metadataResolvers = undefined; // Make sure it's cleaned up
         return Promise.resolve(null);
       }
       
@@ -139,9 +139,9 @@ describe('useStoreMetadata', () => {
     const metadataPromise = hook.collectMetadata(mockItemWithCharacterSkinMetadata);
     
     // Setup our mock resolver
-    if (window.__metadataResolvers) {
-      const originalResolve = window.__metadataResolvers.resolve;
-      window.__metadataResolvers.resolve = function(metadata) {
+    if (globalThis.__metadataResolvers) {
+      const originalResolve = globalThis.__metadataResolvers.resolve;
+      globalThis.__metadataResolvers.resolve = function(metadata) {
         resolveSpy(metadata);
         return originalResolve(metadata);
       };
@@ -149,8 +149,8 @@ describe('useStoreMetadata', () => {
     
     // Resolve the metadata
     const mockMetadata = { selectedSkin: 'test-skin' };
-    if (window.__metadataResolvers) {
-      window.__metadataResolvers.resolve(mockMetadata);
+    if (globalThis.__metadataResolvers) {
+      globalThis.__metadataResolvers.resolve(mockMetadata);
     }
     
     // Wait for the promise to resolve
@@ -159,7 +159,7 @@ describe('useStoreMetadata', () => {
     // Assertions
     expect(result).toEqual(mockMetadata);
     expect(resolveSpy).toHaveBeenCalledWith(mockMetadata);
-    expect(window.__metadataResolvers).toBeUndefined(); // Should be cleaned up
+    expect(globalThis.__metadataResolvers).toBeUndefined(); // Should be cleaned up
   });
 
   it('should clean up window.__metadataResolvers when collection is cancelled', async () => {

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

@@ -246,6 +246,9 @@ export const Default: Story = {
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
+      hidePremiumTab={true}
+      tabOrder={['items', 'packs']}
+      defaultActiveTab="items"
     />
   ),
 };

package/src/types/index.d.ts

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