@rpg-engine/long-bow 0.8.65 → 0.8.67

package/dist/stories/Character/SkinSelectionGrid.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Character/character/CharacterSkinSelectionModal.stories.d.ts

@@ -1,5 +1 @@
-import { Meta } from '@storybook/react';
-import { ICharacterSkinSelectionModalProps } from '../../../components/Character/CharacterSkinSelectionModal';
-declare const meta: Meta;
-export default meta;
-export declare const KnightSkins: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;
+export {};

package/dist/stories/Features/store/MetadataCollector.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.65",
+  "version": "0.8.67",
   "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.121",
+    "@rpg-engine/shared": "^0.9.123",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Character/CharacterSkinSelectionModal.tsx

@@ -1,12 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../Button';
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
-import PropertySelect, {
-  IPropertiesProps,
-} from '../PropertySelect/PropertySelect';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { ICharacterProps } from './CharacterSelection';
+import { SkinSelectionGrid } from './SkinSelectionGrid';
 
 export interface ICharacterSkinSelectionModalProps {
   isOpen: boolean;
@@ -27,51 +23,21 @@ export const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalP
   atlasIMG,
   initialSelectedSkin = '',
 }) => {
-  // Convert availableCharacters to the format used by PropertySelect
-  const propertySelectValues = availableCharacters.map(item => ({
-    id: item.textureKey,
-    name: item.name,
-  }));
+  const [selectedSkin, setSelectedSkin] = useState(initialSelectedSkin);
 
-  // State to store the selected skin and the sprite key
-  const [selectedValue, setSelectedValue] = useState<
-    IPropertiesProps | undefined
-  >();
-  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
-
-  // Update sprite when the selected value changes
-  const updateSelectedSpriteKey = () => {
-    const textureKey = selectedValue ? selectedValue.id : '';
-    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-
-    if (spriteKey === selectedSpriteKey) {
-      return;
-    }
-
-    setSelectedSpriteKey(spriteKey);
-  };
-
-  // Update sprite when selectedValue changes
-  useEffect(() => {
-    updateSelectedSpriteKey();
-  }, [selectedValue]);
-
-  // Initialize selectedValue
+  // Initialize selected skin
   useEffect(() => {
     if (initialSelectedSkin) {
-      const initialProperty = propertySelectValues.find(
-        prop => prop.id === initialSelectedSkin
-      );
-      setSelectedValue(initialProperty || propertySelectValues[0]);
-    } else if (propertySelectValues.length > 0) {
-      setSelectedValue(propertySelectValues[0]);
+      setSelectedSkin(initialSelectedSkin);
+    } else if (availableCharacters.length > 0) {
+      setSelectedSkin(availableCharacters[0].textureKey);
     }
   }, [initialSelectedSkin, availableCharacters]);
 
   // Functions to handle confirmation and cancellation
   const handleConfirm = () => {
-    if (selectedValue) {
-      onConfirm(selectedValue.id);
+    if (selectedSkin) {
+      onConfirm(selectedSkin);
       onClose();
     }
   };
@@ -84,32 +50,12 @@ export const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalP
 
   return (
     <Container>
-      {selectedSpriteKey && atlasIMG && atlasJSON && (
-        <ErrorBoundary>
-          <SpriteFromAtlas
-            spriteKey={selectedSpriteKey}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            imgScale={4}
-            height={80}
-            width={64}
-            containerStyle={{
-              display: 'flex',
-              alignItems: 'center',
-              paddingBottom: '15px',
-            }}
-            imgStyle={{
-              left: '22px',
-            }}
-          />
-        </ErrorBoundary>
-      )}
-
-      <PropertySelect
-        availableProperties={propertySelectValues}
-        onChange={value => {
-          setSelectedValue(value);
-        }}
+      <SkinSelectionGrid
+        availableCharacters={availableCharacters}
+        initialSelectedSkin={selectedSkin}
+        onChange={setSelectedSkin}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
       />
 
       <ButtonsContainer>
@@ -119,7 +65,7 @@ export const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalP
         <Button
           buttonType={ButtonTypes.RPGUIButton}
           onClick={handleConfirm}
-          disabled={!selectedValue}
+          disabled={!selectedSkin}
         >
           Confirm
         </Button>
@@ -129,11 +75,12 @@ export const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalP
 };
 
 // Styled components
-
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 400px;
+  max-width: 100%;
   image-rendering: pixelated;
 `;
 
@@ -142,7 +89,7 @@ const ButtonsContainer = styled.div`
   justify-content: center;
   gap: 0.8rem;
   width: 100%;
-  margin: 3rem 0 0.75rem;
+  margin: 2rem 0 0.75rem;
 
   button {
     min-width: 95px;

package/src/components/Character/SkinSelectionGrid.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import SelectArrow from '../Arrow/SelectArrow';
+import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { ICharacterProps } from './CharacterSelection';
+
+export interface ISkinSelectionGridProps {
+  availableCharacters: ICharacterProps[];
+  initialSelectedSkin?: string;
+  onChange: (skinKey: string) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+export const SkinSelectionGrid: React.FC<ISkinSelectionGridProps> = ({
+  availableCharacters,
+  initialSelectedSkin = '',
+  onChange,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  
+  // Find the initial index based on initialSelectedSkin
+  useEffect(() => {
+    if (initialSelectedSkin && availableCharacters.length > 0) {
+      const initialIndex = availableCharacters.findIndex(
+        character => character.textureKey === initialSelectedSkin
+      );
+      if (initialIndex !== -1) {
+        setCurrentIndex(initialIndex);
+      }
+    }
+  }, [initialSelectedSkin, availableCharacters]);
+  
+  // Update the selected skin when currentIndex changes
+  useEffect(() => {
+    if (availableCharacters.length > 0) {
+      const selectedCharacter = availableCharacters[currentIndex];
+      onChange(selectedCharacter.textureKey);
+    }
+  }, [currentIndex, availableCharacters, onChange]);
+
+  const handlePrevious = () => {
+    setCurrentIndex((prevIndex) => 
+      prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => 
+      prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const getSpriteKey = (textureKey: string) => {
+    return textureKey + '/down/standing/0.png';
+  };
+
+  if (availableCharacters.length === 0) {
+    return <Container>No skins available</Container>;
+  }
+
+  const currentCharacter = availableCharacters[currentIndex];
+
+  return (
+    <Container>
+      <Header>Select Your Character Skin</Header>
+      <CarouselContainer>
+        <NavButtonWrapper>
+          <SelectArrow 
+            direction="left" 
+            onPointerDown={handlePrevious}
+          />
+        </NavButtonWrapper>
+        
+        <SkinPreview>
+          {currentCharacter && (
+            <>
+              <ErrorBoundary>
+                <SpriteFromAtlas
+                  spriteKey={getSpriteKey(currentCharacter.textureKey)}
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  imgScale={4}
+                  height={80}
+                  width={64}
+                  containerStyle={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                  imgStyle={{
+                    position: 'relative',
+                    left: 0,
+                  }}
+                />
+              </ErrorBoundary>
+              <SkinName>{currentCharacter.name}</SkinName>
+            </>
+          )}
+        </SkinPreview>
+        
+        <NavButtonWrapper>
+          <SelectArrow 
+            direction="right" 
+            onPointerDown={handleNext}
+          />
+        </NavButtonWrapper>
+      </CarouselContainer>
+      
+      <CounterIndicator>
+        {currentIndex + 1} / {availableCharacters.length}
+      </CounterIndicator>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 1rem;
+  image-rendering: pixelated;
+`;
+
+const Header = styled.h3`
+  margin: 0 0 1rem 0;
+  color: white;
+  text-align: center;
+  font-size: 1.1rem;
+`;
+
+const CarouselContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  position: relative;
+`;
+
+const SkinPreview = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: rgba(245, 158, 11, 0.1);
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  width: 140px;
+  height: 150px;
+  margin: 0 1.5rem;
+`;
+
+const SkinName = styled.span`
+  color: white;
+  font-size: 1rem;
+  margin-top: 0.8rem;
+  text-align: center;
+  font-weight: bold;
+`;
+
+const NavButtonWrapper = styled.div`
+  width: 40px;
+  height: 42px;
+  position: relative;
+`;
+
+const CounterIndicator = styled.div`
+  color: white;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+`;
+
+export default SkinSelectionGrid; 

package/src/components/Store/CartView.tsx

@@ -1,13 +1,17 @@
-import { IStoreItem } from '@rpg-engine/shared';
+import { IStoreItem, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
-import { FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
+import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 
 interface ICartViewProps {
-  cartItems: { item: IStoreItem; quantity: number }[];
+  cartItems: { 
+    item: IStoreItem; 
+    quantity: number;
+    metadata?: Record<string, any>;
+  }[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
   onPurchase: () => Promise<boolean>;
@@ -15,6 +19,26 @@ interface ICartViewProps {
   atlasIMG: string;
 }
 
+const MetadataDisplay: React.FC<{
+  type: MetadataType;
+  metadata: Record<string, any>;
+}> = ({ type, metadata }) => {
+  switch (type) {
+    case MetadataType.CharacterSkin:
+      return (
+        <MetadataInfo>
+          <MetadataLabel>
+            <FaInfoCircle />
+            <span>Skin:</span>
+          </MetadataLabel>
+          <MetadataValue>{metadata.selectedSkin?.name || 'Custom skin'}</MetadataValue>
+        </MetadataInfo>
+      );
+    default:
+      return null;
+  }
+};
+
 export const CartView: React.FC<ICartViewProps> = ({
   cartItems,
   onRemoveFromCart,
@@ -87,6 +111,13 @@ export const CartView: React.FC<ICartViewProps> = ({
                     ${formatPrice(cartItem.item.price * cartItem.quantity)}
                   </span>
                 </ItemInfo>
+                
+                {cartItem.metadata && cartItem.item.metadataType && (
+                  <MetadataDisplay 
+                    type={cartItem.item.metadataType} 
+                    metadata={cartItem.metadata}
+                  />
+                )}
               </ItemDetails>
 
               <CTAButton
@@ -243,19 +274,22 @@ const Footer = styled.div`
   gap: 1.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
 `;
 
 const TotalInfo = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 `;
 
 const TotalRow = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  gap: 1rem;
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: #ffffff;
 
   span:last-child {
@@ -265,8 +299,33 @@ const TotalRow = styled.div`
 
 const ErrorMessage = styled.div`
   color: #ef4444;
+  font-size: 0.875rem;
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
-  margin-top: 0.5rem;
   text-align: center;
 `;
+
+const MetadataInfo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: #a3e635;
+  background: rgba(163, 230, 53, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+`;
+
+const MetadataLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: bold;
+  color: #d9f99d;
+`;
+
+const MetadataValue = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/src/components/Store/MetadataCollector.tsx

@@ -0,0 +1,48 @@
+import { MetadataType } from "@rpg-engine/shared";
+import React, { useEffect } from "react";
+import { CharacterSkinSelectionModal } from "../Character/CharacterSkinSelectionModal";
+
+export interface IMetadataCollectorProps {
+    metadataType: MetadataType;
+    config: Record<string, any>;
+    onCollect: (metadata: Record<string, any>) => void;
+    onCancel: () => void;
+}
+
+export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
+    metadataType,
+    config,
+    onCollect,
+    onCancel,
+}) => {
+    // Make sure we clean up if unmounted without collecting
+    useEffect(() => {
+        return () => {
+            // If we're unmounting without explicitly collecting or canceling,
+            // make sure to call onCancel to prevent any hanging promises
+            if (window.__metadataResolvers) {
+                onCancel();
+            }
+        };
+    }, [onCancel]);
+
+    // Use string comparison instead of direct property access
+    if (metadataType === 'CharacterSkin') {
+        return (
+            <CharacterSkinSelectionModal
+                isOpen={true}
+                onClose={onCancel}
+                onConfirm={(selectedSkin: any) => onCollect({ selectedSkin })}
+                availableCharacters={config.availableCharacters || []}
+                atlasJSON={config.atlasJSON}
+                atlasIMG={config.atlasIMG}
+                initialSelectedSkin={config.initialSelectedSkin}
+            />
+        );
+    } else {
+        console.warn(`No collector implemented for metadata type: ${metadataType}`);
+        // Auto-cancel for unhandled types to prevent hanging promises
+        setTimeout(onCancel, 0);
+        return null;
+    }
+};

package/src/components/Store/Store.tsx

@@ -9,6 +9,7 @@ import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CartView } from './CartView';
 import { useStoreCart } from './hooks/useStoreCart';
+import { MetadataCollector } from './MetadataCollector';
 import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
@@ -37,6 +38,8 @@ export const Store: React.FC<IStoreProps> = ({
     getTotalPrice,
     isCartOpen,
   } = useStoreCart();
+  const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
+  const [currentMetadataItem, setCurrentMetadataItem] = useState<IStoreItem | null>(null);
 
   const handleAddPackToCart = (pack: IItemPack) => {
     const packItem: IStoreItem = {
@@ -87,6 +90,29 @@ export const Store: React.FC<IStoreProps> = ({
     [items]
   );
 
+  const handleMetadataCollected = (metadata: Record<string, any>) => {
+    if (currentMetadataItem && window.__metadataResolvers) {
+      // Resolve the promise in the useStoreMetadata hook
+      window.__metadataResolvers.resolve(metadata);
+      
+      // Reset the metadata collection state
+      setCurrentMetadataItem(null);
+      // Removed unused setPendingMetadataQuantity call
+    }
+  };
+
+  const handleMetadataCancel = () => {
+    if (window.__metadataResolvers) {
+      // Resolve with null to indicate cancellation
+      window.__metadataResolvers.resolve(null);
+    }
+    
+    // Reset the metadata collection state
+    setCurrentMetadataItem(null);
+    // Removed unused setPendingMetadataQuantity call
+    setIsCollectingMetadata(false);
+  };
+
   if (loading) {
     return <LoadingMessage>Loading...</LoadingMessage>;
   }
@@ -141,9 +167,16 @@ export const Store: React.FC<IStoreProps> = ({
       minWidth="600px"
       height="auto"
       type={RPGUIContainerTypes.Framed}
-      cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails']"
+      cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
     >
-      {isCartOpen ? (
+      {isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? (
+        <MetadataCollector
+          metadataType={currentMetadataItem.metadataType}
+          config={currentMetadataItem.metadataConfig || {}}
+          onCollect={handleMetadataCollected}
+          onCancel={handleMetadataCancel}
+        />
+      ) : isCartOpen ? (
         <CartView
           cartItems={cartItems}
           onRemoveFromCart={handleRemoveFromCart}
@@ -172,9 +205,7 @@ export const Store: React.FC<IStoreProps> = ({
             <CartButton>
               <CTAButton
                 icon={<FaShoppingCart />}
-                label={`${getTotalItems()} items ($${getTotalPrice().toFixed(
-                  2
-                )})`}
+                label={`${getTotalItems()} items ($${getTotalPrice().toFixed(2)})`}
                 onClick={openCart}
               />
             </CartButton>
@@ -223,6 +254,7 @@ const Container = styled.div`
   width: 100%;
   height: 100%;
   gap: 1rem;
+  position: relative;
 `;
 
 const TopBar = styled.div`
@@ -232,6 +264,7 @@ const TopBar = styled.div`
   gap: 1rem;
   padding: 0 1rem;
   flex-shrink: 0;
+  margin-top: 0.5rem;
 `;
 
 const CartButton = styled.div`