@rpg-engine/long-bow 0.8.6 → 0.8.8

package/src/components/shared/SearchBar/SearchBar.tsx

@@ -1,52 +1,71 @@
 import React from 'react';
+import { FaSearch } from 'react-icons/fa';
 import styled from 'styled-components';
 
-interface SearchBarProps {
+interface ISearchBarProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
   className?: string;
-  autoFocus?: boolean;
 }
 
-export const SearchBar: React.FC<SearchBarProps> = ({
+export const SearchBar: React.FC<ISearchBarProps> = ({
   value,
   onChange,
-  placeholder = 'Search...',
+  placeholder,
   className,
-  autoFocus = false,
 }) => {
   return (
     <Container className={className}>
-      <input
+      <Input
         type="text"
-        className="rpgui-input"
-        placeholder={placeholder}
         value={value}
         onChange={e => onChange(e.target.value)}
-        autoFocus={autoFocus}
+        placeholder={placeholder}
+        className="rpgui-input"
       />
+      <IconContainer>
+        <SearchIcon />
+      </IconContainer>
     </Container>
   );
 };
 
 const Container = styled.div`
-  input {
-    width: 100%;
-    font-size: 0.8rem;
-    padding: 8px 12px;
-    background-color: rgba(0, 0, 0, 0.3);
-    border: none;
-    color: white;
-    border-radius: 4px;
+  position: relative;
+  width: 100%;
+`;
 
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.5);
-    }
+const Input = styled.input`
+  width: 100%;
+  padding-right: 2.5rem !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+  border: 2px solid #f59e0b !important;
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+  color: #ffffff !important;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.875rem !important;
 
-    &:focus {
-      outline: none;
-      background-color: rgba(0, 0, 0, 0.4);
-    }
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
   }
 `;
+
+const IconContainer = styled.div`
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+`;
+
+const SearchIcon = styled(FaSearch)`
+  font-size: 1rem;
+  color: #f59e0b;
+  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
+`;

package/src/components/shared/SearchHeader/SearchHeader.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dropdown, IOptionsProps } from '../../Dropdown';
+import { SearchBar } from '../SearchBar/SearchBar';
+
+interface ISearchHeaderProps {
+  searchOptions?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+  };
+  filterOptions?: {
+    options: IOptionsProps[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+  };
+  className?: string;
+}
+
+export const SearchHeader: React.FC<ISearchHeaderProps> = ({
+  searchOptions,
+  filterOptions,
+  className,
+}) => {
+  if (!searchOptions && !filterOptions) return null;
+
+  return (
+    <HeaderContainer className={className}>
+      <HeaderContent>
+        {searchOptions && (
+          <SearchContainer>
+            <StyledSearchBar
+              value={searchOptions.value}
+              onChange={searchOptions.onChange}
+              placeholder={searchOptions.placeholder || 'Search...'}
+            />
+          </SearchContainer>
+        )}
+        {filterOptions && (
+          <FilterContainer>
+            <StyledDropdown
+              options={filterOptions.options}
+              onChange={filterOptions.onOptionChange}
+              width="200px"
+            />
+          </FilterContainer>
+        )}
+      </HeaderContent>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div``;
+
+const HeaderContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+  border-radius: 4px;
+`;
+
+const SearchContainer = styled.div`
+  flex: 1;
+`;
+
+const FilterContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const StyledSearchBar = styled(SearchBar)`
+  width: 100%;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  min-width: 150px;
+`;

package/src/components/shared/ShoppingCart/CartCard.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Ellipsis } from '../Ellipsis';
+
+export interface ICardProps {
+  title: string;
+  description: string;
+  imageUrl?: string | { src: string; default?: string };
+  category?: string;
+  onClick?: () => void;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const ShoppingCard: React.FC<ICardProps> = ({
+  title,
+  description,
+  imageUrl,
+  category,
+  onClick,
+  footer,
+  className,
+}) => {
+  const getImageSrc = () => {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl.default || imageUrl.src;
+  };
+
+  return (
+    <CardContainer onClick={onClick} className={className}>
+      {imageUrl && (
+        <CardThumbnail>
+          <img src={getImageSrc()} alt={title} />
+        </CardThumbnail>
+      )}
+      <CardContent>
+        <CardTitle>
+          <Ellipsis maxLines={1} maxWidth="100%">
+            {title}
+          </Ellipsis>
+        </CardTitle>
+        <CardDescription>
+          <Ellipsis maxLines={5} maxWidth="100%">
+            {description}
+          </Ellipsis>
+        </CardDescription>
+        {category && <CardCategory>{category}</CardCategory>}
+        {footer && <CardFooter>{footer}</CardFooter>}
+      </CardContent>
+    </CardContainer>
+  );
+};
+
+const CardContainer = styled.div<{ onClick?: () => void }>`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: ${props => (props.onClick ? 'translateY(-2px)' : 'none')};
+  }
+`;
+
+const CardThumbnail = styled.div`
+  width: 100%;
+  height: 168px;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const CardContent = styled.div`
+  padding: 12px;
+`;
+
+const CardTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const CardDescription = styled.p`
+  margin: 0;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+  line-height: 1.4;
+`;
+
+const CardCategory = styled.span`
+  font-size: 0.5rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+`;
+
+const CardFooter = styled.div`
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;

package/src/components/shared/ShoppingCart/CartCardHorizontal.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Ellipsis } from '../Ellipsis';
+
+export interface ICardProps {
+  title: string;
+  description: string;
+  imageUrl?: string | { src: string; default?: string };
+  onClick?: () => void;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const ShoppingCardHorizontal: React.FC<ICardProps> = ({
+  title,
+  description,
+  imageUrl,
+  onClick,
+  footer,
+  className,
+}) => {
+  const getImageSrc = () => {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl.default || imageUrl.src;
+  };
+
+  return (
+    <CardContainer onClick={onClick} className={className}>
+      <LeftSection>
+        {imageUrl && (
+          <CardThumbnail>
+            <img src={getImageSrc()} alt={title} />
+          </CardThumbnail>
+        )}
+      </LeftSection>
+      <RightSection>
+        <CardTitle>
+          <Ellipsis maxLines={1} maxWidth="100%">
+            {title}
+          </Ellipsis>
+        </CardTitle>
+        <CardDescription>
+          <Ellipsis maxLines={3} maxWidth="100%">
+            {description}
+          </Ellipsis>
+        </CardDescription>
+        {footer && (
+          <CardFooter onClick={e => e.stopPropagation()}>{footer}</CardFooter>
+        )}
+      </RightSection>
+    </CardContainer>
+  );
+};
+
+const CardContainer = styled.div<{ onClick?: () => void }>`
+  display: flex;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: ${props => (props.onClick ? 'translateY(-2px)' : 'none')};
+  }
+
+  max-width: 380px;
+`;
+
+const LeftSection = styled.div`
+  width: 120px;
+  flex-shrink: 0;
+`;
+
+const RightSection = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  min-width: 0;
+  max-width: 100%;
+`;
+
+const CardThumbnail = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const CardTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const CardDescription = styled.p`
+  margin: 0;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  line-height: 1.4;
+  margin-bottom: 8px;
+`;
+
+const CardFooter = styled.div`
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;

package/src/components/shared/SpriteFromAtlas.tsx

@@ -10,6 +10,7 @@ interface IProps {
   height?: number;
   grayScale?: boolean;
   opacity?: number;
+  tintColor?: string;
   onPointerDown?: () => void;
   containerStyle?: any;
   imgStyle?: any;
@@ -31,46 +32,47 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   containerStyle,
   grayScale = false,
   opacity = 1,
+  tintColor,
   imgClassname,
   centered,
   borderRadius,
 }) => {
-  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
-  //!Due to React's limitations, we cannot import it from the public folder directly!
+        //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
+        //!Due to React's limitations, we cannot import it from the public folder directly!
+        const spriteData =
+          atlasJSON?.frames?.[spriteKey] ||
+          atlasJSON?.frames?.['others/no-image.png'];
 
-  const spriteData =
-    atlasJSON?.frames?.[spriteKey] ||
-    atlasJSON?.frames?.['others/no-image.png'];
+        if (!spriteData) {
+          console.error(
+            `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
+          );
+          return null;
+        }
 
-  if (!spriteData) {
-    console.error(
-      `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
-    );
-    return null;
-  }
-
-  return (
-    <Container
-      width={width}
-      height={height}
-      hasHover={grayScale}
-      onPointerDown={onPointerDown}
-      style={containerStyle}
-    >
-      <ImgSprite
-        className={`sprite-from-atlas-img ${imgClassname || ''}`}
-        atlasIMG={atlasIMG}
-        frame={spriteData.frame}
-        scale={imgScale}
-        grayScale={grayScale}
-        opacity={opacity}
-        style={imgStyle}
-        centered={centered}
-        borderRadius={borderRadius}
-      />
-    </Container>
-  );
-};
+        return (
+          <Container
+            width={width}
+            height={height}
+            hasHover={grayScale}
+            onPointerDown={onPointerDown}
+            style={containerStyle}
+          >
+            <ImgSprite
+              className={`sprite-from-atlas-img ${imgClassname || ''}`}
+              atlasIMG={atlasIMG}
+              frame={spriteData.frame}
+              scale={imgScale}
+              grayScale={grayScale}
+              opacity={opacity}
+              style={imgStyle}
+              centered={centered}
+              borderRadius={borderRadius}
+              tintColor={tintColor}
+            />
+          </Container>
+        );
+      };
 
 interface IImgSpriteProps {
   atlasIMG: any;
@@ -85,6 +87,7 @@ interface IImgSpriteProps {
   opacity: number;
   centered?: boolean;
   borderRadius?: string;
+  tintColor?: string;
 }
 
 interface IContainerProps {
@@ -108,12 +111,30 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   width: ${props => props.frame.w}px;
   height: ${props => props.frame.h}px;
   background-image: url(${props => props.atlasIMG});
-  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
+  background-position: -${props => props.frame.x}px -${props =>
+  props.frame.y}px;
   transform: scale(${props => props.scale});
   position: relative;
   top: ${props => (props.centered ? '0' : '8px')};
   left: ${props => (props.centered ? '0' : '8px')};
-  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
+  ${props =>
+    props.tintColor &&
+    `
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: ${props.frame.w}px;
+      height: ${props.frame.h}px;
+      background-color: ${props.tintColor};
+      mask-image: url(${props.atlasIMG});
+      mask-position: -${props.frame.x}px -${props.frame.y}px;
+      -webkit-mask-image: url(${props.atlasIMG});
+      -webkit-mask-position: -${props.frame.x}px -${props.frame.y}px;
+      mix-blend-mode: color; 
+      ${props.grayScale ? 'filter: grayscale(100%);' : 'none'}
+      }
+    `}
   opacity: ${props => props.opacity};
-  border-radius: ${props => (props.borderRadius ? props.borderRadius : '0')};
-`;
+  `;

package/src/index.tsx

@@ -22,6 +22,7 @@ export * from './components/Input';
 export * from './components/InternalTabs/InternalTabs';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
+export * from './components/Item/Inventory/ItemPropertySimpleHandler';
 export * from './components/Item/Inventory/ItemQuantitySelectorModal';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/itemSelector/ItemSelector';

package/src/mocks/itemContainer.mocks.ts

@@ -322,6 +322,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
+    tintColor: '#FFD700',
   },
   {
     _id: '392acek4j7c8e80d2fs60404',

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

@@ -2,8 +2,9 @@ import { UserAccountTypes } from '@rpg-engine/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import customSkinImage from '../../../components/Store/sections/images/custom-skin.png';
 import { Store } from '../../../components/Store/Store';
-import { IStoreItem } from '../../../components/Store/StoreTypes';
+import { IItemPack, IPurchase, IStoreItem } from '../../../components/Store/StoreTypes';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
 import { mockItems } from '../../../mocks/informationCenter.mocks';
@@ -85,15 +86,64 @@ const duplicatedItems: IStoreItem[] = [
   })),
 ];
 
+// Mock packs data
+const mockPacks: IItemPack[] = [
+  // Regular Packs
+  {
+    key: 'starter-pack',
+    title: 'Starter Pack',
+    description: 'Perfect for beginners! Get essential items to start your adventure.',
+    priceUSD: 4.99,
+    image: customSkinImage,
+  },
+  {
+    key: 'custom-skin-pack',
+    title: 'Custom Skin Pack',
+    description: 'Get a unique look with this custom skin pack! Stand out from the crowd.',
+    priceUSD: 7.99,
+    image: customSkinImage,
+  },
+
+   {
+    key: 'ultimate-pack',
+    title: '👑 Ultimate Premium Pack',
+    description: 'The most exclusive collection of items, effects, and perks. Includes everything from previous tiers plus legendary items!',
+    priceUSD: 99.99,
+    image: customSkinImage,
+  },
+    {
+    key: 'gold-pack',
+    title: '🥇 Gold Premium Pack',
+    description: 'The ultimate premium experience with rare items, unique effects, and exclusive content. For true champions!',
+    priceUSD: 49.99,
+    image: customSkinImage,
+  },  
+  {
+    key: 'silver-pack',
+    title: '🥈 Silver Premium Pack',
+    description: 'Enhanced premium features with more exclusive items and special effects. For dedicated adventurers.',
+    priceUSD: 24.99,
+    image: customSkinImage,
+  },
+  {
+    key: 'bronze-pack',
+    title: '🥉 Bronze Premium Pack',
+    description: 'Start your premium journey with exclusive items and basic perks. Perfect for casual players.',
+    priceUSD: 14.99,
+    image: customSkinImage,
+  },
+
+];
+
 // Create the story with the static mock data
 export const Default: Story = {
   render: () => (
     <Store
       items={duplicatedItems}
-      userGold={1000}
+      packs={mockPacks}
       userAccountType={UserAccountTypes.Free}
-      onPurchase={(item: IStoreItem, quantity: number) => {
-        console.log('Purchased', quantity, 'x', item.name);
+      onPurchase={(purchase: IPurchase) => {
+        console.log('Purchase details:', purchase);
       }}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}