@rpg-engine/long-bow 0.8.72 → 0.8.73

package/package.json

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

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -1,17 +1,26 @@
-import { IProductBlueprint, 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: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IProductBlueprint, 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.key]);
-  
-  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/StoreItemRow.tsx

@@ -5,12 +5,17 @@ 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: IProductBlueprint;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (
+    item: IProductBlueprint,
+    quantity: number,
+    metadata?: Record<string, any>
+  ) => void;
   userAccountType: UserAccountTypes;
   showTextInput?: boolean;
   textInputPlaceholder?: string;
@@ -25,26 +30,15 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   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 ||
@@ -56,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}
@@ -92,29 +86,29 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
             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
@@ -128,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;
@@ -154,18 +152,18 @@ 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;
 `;
 
@@ -179,7 +177,7 @@ const ItemDescription = styled.div`
 const Controls = styled.div`
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
   min-width: fit-content;
 `;
 

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -1,13 +1,25 @@
-import { IProductBlueprint, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import {
+  IProductBlueprint,
+  MetadataType,
+  UserAccountTypes,
+  ItemType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
 import { StoreItemRow } from '../StoreItemRow';
-
+import { Dropdown } from '../../Dropdown';
+import { SearchBar } from '../../shared/SearchBar/SearchBar';
+import { useStoreFiltering } from '../../../hooks/useStoreFiltering';
 
 interface IStoreItemsSectionProps {
   items: IProductBlueprint[];
-  onAddToCart: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
+  onAddToCart: (
+    item: IProductBlueprint,
+    quantity: number,
+    metadata?: Record<string, any>
+  ) => void;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
@@ -22,11 +34,13 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   userAccountType,
   textInputItemKeys = [],
 }) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const filteredItems = items.filter(item =>
-    item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const {
+    searchQuery,
+    setSearchQuery,
+    setSelectedCategory,
+    categoryOptions,
+    filteredItems,
+  } = useStoreFiltering(items);
 
   const renderStoreItem = (item: IProductBlueprint) => {
     // Prefer a specialized character skin row when needed
@@ -70,17 +84,54 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   };
 
   return (
-    <ScrollableContent
-      items={filteredItems}
-      renderItem={renderStoreItem}
-      emptyMessage="No items available."
-      searchOptions={{
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: 'Search items...',
-      }}
-      layout="list"
-      maxHeight="400px"
-    />
+    <StoreContainer>
+      <SearchHeader>
+        <SearchBarContainer>
+          <SearchBar
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder="Search items..."
+          />
+        </SearchBarContainer>
+        <DropdownContainer>
+          <Dropdown
+            options={categoryOptions}
+            onChange={value => setSelectedCategory(value as ItemType | 'all')}
+            width="100%"
+          />
+        </DropdownContainer>
+      </SearchHeader>
+
+      <ScrollableContent
+        items={filteredItems}
+        renderItem={renderStoreItem}
+        emptyMessage="No items match your filters."
+        layout="list"
+        maxHeight="350px"
+      />
+    </StoreContainer>
   );
 };
+
+const StoreContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0.5rem;
+`;
+
+const SearchHeader = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 0.25rem;
+`;
+
+const SearchBarContainer = styled.div`
+  flex: 0.75;
+`;
+
+const DropdownContainer = styled.div`
+  flex: 0.25;
+  min-width: 140px;
+`;

package/src/components/Store/sections/StorePacksSection.tsx

@@ -1,10 +1,11 @@
 import { IItemPack } from '@rpg-engine/shared';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { ShoppingCardHorizontal } from '../../shared/ShoppingCart/CartCardHorizontal';
+import { usePackFiltering } from '../../../hooks/usePackFiltering';
 
 interface IStorePacksSectionProps {
   packs: IItemPack[];
@@ -17,7 +18,9 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   onAddToCart,
   onSelectPack,
 }) => {
-  const [searchQuery, setSearchQuery] = useState('');
+  const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(
+    packs
+  );
 
   const renderPackFooter = useCallback(
     (pack: IItemPack) => (
@@ -50,14 +53,6 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
     [onSelectPack, renderPackFooter]
   );
 
-  const filteredPacks = useMemo(
-    () =>
-      packs.filter(pack =>
-        pack.title.toLowerCase().includes(searchQuery.toLowerCase())
-      ),
-    [packs, searchQuery]
-  );
-
   return (
     <ScrollableContent
       items={filteredPacks}

package/src/hooks/useCharacterSkinNavigation.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { ICharacterProps } from '../components/Character/CharacterSelection';
+
+export const useCharacterSkinNavigation = (
+  availableCharacters: ICharacterProps[],
+  itemKey: string
+) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [itemKey]);
+
+  const handlePreviousSkin = () => {
+    setCurrentIndex(prevIndex =>
+      prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNextSkin = () => {
+    setCurrentIndex(prevIndex =>
+      prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const currentCharacter = availableCharacters[currentIndex];
+
+  return {
+    currentIndex,
+    currentCharacter,
+    handlePreviousSkin,
+    handleNextSkin,
+  };
+};

package/src/hooks/usePackFiltering.ts

@@ -0,0 +1,20 @@
+import { useMemo, useState } from 'react';
+import { IItemPack } from '@rpg-engine/shared';
+
+export const usePackFiltering = (packs: IItemPack[]) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredPacks = useMemo(
+    () =>
+      packs.filter(pack =>
+        pack.title.toLowerCase().includes(searchQuery.toLowerCase())
+      ),
+    [packs, searchQuery]
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    filteredPacks,
+  };
+};

package/src/hooks/useQuantityControl.ts

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+export const useQuantityControl = (
+  initialQuantity: number = 1,
+  min: number = 1,
+  max: number = 99
+) => {
+  const [quantity, setQuantity] = useState(initialQuantity);
+
+  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || min;
+    setQuantity(Math.min(Math.max(min, value), max));
+  };
+
+  const handleBlur = () => {
+    if (quantity < min) setQuantity(min);
+    if (quantity > max) setQuantity(max);
+  };
+
+  const incrementQuantity = () => {
+    setQuantity(prev => Math.min(prev + 1, max));
+  };
+
+  const decrementQuantity = () => {
+    setQuantity(prev => Math.max(min, prev - 1));
+  };
+
+  const resetQuantity = () => {
+    setQuantity(initialQuantity);
+  };
+
+  return {
+    quantity,
+    setQuantity,
+    handleQuantityChange,
+    handleBlur,
+    incrementQuantity,
+    decrementQuantity,
+    resetQuantity,
+  };
+};