@rpg-engine/long-bow 0.8.4 → 0.8.5

package/src/components/Store/Store.tsx

@@ -0,0 +1,192 @@
+import { ItemType } from '@rpg-engine/shared';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { DraggableContainer } from '../DraggableContainer';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { SearchBar } from '../shared/SearchBar/SearchBar';
+
+import { StoreTabContent } from './StoreTabContent';
+import { IStoreItem, IStoreProps } from './StoreTypes';
+
+export const Store: React.FC<IStoreProps> = ({
+  items,
+  atlasJSON,
+  atlasIMG,
+  onPurchase,
+  userGold,
+  userAccountType,
+  loading = false,
+  error,
+  initialSearchQuery = '',
+  onClose,
+}) => {
+  const [activeTab, setActiveTab] = useState('all');
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+
+  const filterItems = (
+    itemsToFilter: IStoreItem[],
+    type: ItemType | 'premium' | 'all'
+  ): IStoreItem[] => {
+    return itemsToFilter.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+
+      if (!matchesSearch) return false;
+
+      switch (type) {
+        case ItemType.Weapon:
+          return item.type === ItemType.Weapon;
+        case ItemType.Consumable:
+          return item.type === ItemType.Consumable;
+        case 'premium':
+          return item.requiredAccountType?.length ?? 0 > 0;
+        default:
+          return true;
+      }
+    });
+  };
+
+  // Memoize filtered items for each tab to prevent unnecessary recalculations
+  const filteredItems = useMemo(
+    () => ({
+      all: filterItems(items, 'all'),
+      weapons: filterItems(items, ItemType.Weapon),
+      consumables: filterItems(items, ItemType.Consumable),
+      premium: filterItems(items, 'premium'),
+    }),
+    [items, searchQuery]
+  );
+
+  if (loading) {
+    return <LoadingMessage>Loading...</LoadingMessage>;
+  }
+
+  if (error) {
+    return <ErrorMessage>{error}</ErrorMessage>;
+  }
+
+  const tabs = [
+    {
+      id: 'all',
+      title: 'All',
+      content: (
+        <StoreTabContent
+          items={filteredItems.all}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onPurchase={onPurchase}
+          userGold={userGold}
+          userAccountType={userAccountType}
+          tabId="all"
+        />
+      ),
+    },
+    {
+      id: 'weapons',
+      title: 'Weapons',
+      content: (
+        <StoreTabContent
+          items={filteredItems.weapons}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onPurchase={onPurchase}
+          userGold={userGold}
+          userAccountType={userAccountType}
+          tabId="weapons"
+        />
+      ),
+    },
+    {
+      id: 'consumables',
+      title: 'Consumables',
+      content: (
+        <StoreTabContent
+          items={filteredItems.consumables}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onPurchase={onPurchase}
+          userGold={userGold}
+          userAccountType={userAccountType}
+          tabId="consumables"
+        />
+      ),
+    },
+    {
+      id: 'premium',
+      title: 'Premium',
+      content: (
+        <StoreTabContent
+          items={filteredItems.premium}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onPurchase={onPurchase}
+          userGold={userGold}
+          userAccountType={userAccountType}
+          tabId="premium"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <DraggableContainer
+      title="Store"
+      onCloseButton={onClose}
+      width="800px"
+      minWidth="600px"
+      type={RPGUIContainerTypes.Framed}
+    >
+      <Container>
+        <SearchContainer>
+          <StyledSearchBar
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder="Search items..."
+          />
+        </SearchContainer>
+        <InternalTabs
+          tabs={tabs}
+          activeTextColor="#000000"
+          activeColor="#fef08a"
+          inactiveColor="#6b7280"
+          borderColor="#f59e0b"
+          hoverColor="#fef3c7"
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 400px;
+  gap: 1rem;
+  padding: 1rem;
+`;
+
+const SearchContainer = styled.div`
+  padding: 0 1rem;
+`;
+
+const StyledSearchBar = styled(SearchBar)`
+  width: 100%;
+`;
+
+const LoadingMessage = styled.div`
+  text-align: center;
+  color: ${uiColors.white};
+  padding: 2rem;
+`;
+
+const ErrorMessage = styled.div`
+  text-align: center;
+  color: ${uiColors.red};
+  padding: 2rem;
+`;

package/src/components/Store/StoreItemRow.tsx

@@ -0,0 +1,198 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { SelectArrow } from '../Arrow/SelectArrow';
+import { Button, ButtonTypes } from '../Button';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { IStoreItem } from './StoreTypes';
+
+interface IStoreItemRowProps {
+  item: IStoreItem;
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onPurchase: (item: IStoreItem, quantity: number) => void;
+  userGold: number;
+  userAccountType: UserAccountTypes;
+}
+
+export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
+  item,
+  atlasJSON,
+  atlasIMG,
+  onPurchase,
+  userGold,
+  userAccountType,
+}) => {
+  const [quantity, setQuantity] = useState(1);
+
+  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 1;
+    setQuantity(Math.min(Math.max(1, value), item.stock));
+  };
+
+  const handleBlur = () => {
+    if (quantity < 1) setQuantity(1);
+    if (quantity > item.stock) setQuantity(item.stock);
+  };
+
+  const incrementQuantity = (amount = 1) => {
+    setQuantity(prev => Math.min(prev + amount, item.stock));
+  };
+
+  const decrementQuantity = (amount = 1) => {
+    setQuantity(prev => Math.max(1, prev - amount));
+  };
+
+  const canAfford = userGold >= item.price * quantity;
+  const hasRequiredAccount =
+    !item.requiredAccountType?.length ||
+    item.requiredAccountType.includes(userAccountType);
+
+  const renderAccountTypeIndicator = () => {
+    if (!item.requiredAccountType?.length) return null;
+
+    return (
+      <span>
+        {item.requiredAccountType
+          .map(type => {
+            const typeName = String(type).toLowerCase();
+            return typeName.includes('premium')
+              ? typeName.replace('premium', '')
+              : typeName;
+          })
+          .join('/')}
+      </span>
+    );
+  };
+
+  return (
+    <ItemWrapper>
+      <ItemIconContainer>
+        <SpriteFromAtlas
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          spriteKey={item.texturePath}
+          width={32}
+          height={32}
+          imgScale={2}
+          centered
+        />
+      </ItemIconContainer>
+
+      <ItemDetails>
+        <ItemName>{item.name}</ItemName>
+        <ItemPrice>
+          Price: {item.price} gold {renderAccountTypeIndicator()}
+        </ItemPrice>
+      </ItemDetails>
+
+      <Controls>
+        <ArrowsContainer>
+          <SelectArrow
+            direction="left"
+            onPointerDown={() => decrementQuantity()}
+            size={24}
+          />
+
+          <QuantityInput
+            type="number"
+            value={quantity}
+            onChange={handleQuantityChange}
+            onBlur={handleBlur}
+            min={1}
+            max={item.stock}
+            className="rpgui-input"
+          />
+
+          <SelectArrow
+            direction="right"
+            onPointerDown={() => incrementQuantity()}
+            size={24}
+          />
+        </ArrowsContainer>
+
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          disabled={!canAfford || !hasRequiredAccount}
+          onClick={() => onPurchase(item, quantity)}
+        >
+          Purchase
+        </Button>
+      </Controls>
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const ItemIconContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 4px;
+`;
+
+const ItemDetails = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  color: #ffffff;
+`;
+
+const ItemPrice = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #fef08a;
+`;
+
+const Controls = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: fit-content;
+`;
+
+const ArrowsContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 120px;
+  height: 42px;
+  justify-content: space-between;
+`;
+
+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;
+  }
+`;

package/src/components/Store/StoreTabContent.tsx

@@ -0,0 +1,46 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import React from 'react';
+import { PaginatedContent } from '../shared/PaginatedContent/PaginatedContent';
+import { StoreItemRow } from './StoreItemRow';
+import { IStoreItem } from './StoreTypes';
+
+interface IStoreTabContentProps {
+  items: IStoreItem[];
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onPurchase: (item: IStoreItem, quantity: number) => void;
+  userGold: number;
+  userAccountType: UserAccountTypes;
+  tabId: string;
+}
+
+export const StoreTabContent: React.FC<IStoreTabContentProps> = ({
+  items,
+  atlasJSON,
+  atlasIMG,
+  onPurchase,
+  userGold,
+  userAccountType,
+  tabId,
+}) => {
+  const renderItem = (item: IStoreItem) => (
+    <StoreItemRow
+      key={item._id}
+      item={item}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      onPurchase={onPurchase}
+      userGold={userGold}
+      userAccountType={userAccountType}
+    />
+  );
+
+  return (
+    <PaginatedContent
+      items={items}
+      renderItem={renderItem}
+      emptyMessage="No items found"
+      tabId={tabId}
+    />
+  );
+};

package/src/components/Store/StoreTypes.ts

@@ -0,0 +1,21 @@
+import { IItem, UserAccountTypes } from '@rpg-engine/shared';
+
+export interface IStoreItem extends Omit<IItem, 'canSell'> {
+  price: number;
+  stock: number;
+  requiredAccountType?: UserAccountTypes[];
+  canSell: boolean;
+}
+
+export interface IStoreProps {
+  items: IStoreItem[];
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onPurchase: (item: IStoreItem, quantity: number) => void;
+  userGold: number;
+  userAccountType: UserAccountTypes;
+  loading?: boolean;
+  error?: string;
+  initialSearchQuery?: string;
+  onClose?: () => void;
+}

package/src/components/shared/PaginatedContent/PaginatedContent.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import styled from 'styled-components';
+import { usePagination } from '../../CraftBook/hooks/usePagination';
+import { Dropdown, IOptionsProps } from '../../Dropdown';
+import { Pagination } from '../Pagination/Pagination';
+import { SearchBar } from '../SearchBar/SearchBar';
+
+interface IPaginatedContentProps<T> {
+  items: T[];
+  itemsPerPage?: number;
+  renderItem: (item: T) => React.ReactNode;
+  emptyMessage?: string;
+  className?: string;
+  filterOptions?: {
+    options: IOptionsProps[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+  };
+  searchOptions?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+  };
+  dependencies?: any[];
+  tabId?: string;
+  layout?: 'grid' | 'list';
+}
+
+export const PaginatedContent = <T extends unknown>({
+  items,
+  itemsPerPage = 5,
+  renderItem,
+  emptyMessage = 'No items found',
+  className,
+  filterOptions,
+  searchOptions,
+  dependencies = [],
+  tabId,
+  layout = 'list',
+}: IPaginatedContentProps<T>): React.ReactElement => {
+  const {
+    currentPage,
+    setCurrentPage,
+    paginatedItems,
+    totalPages,
+  } = usePagination({
+    items,
+    itemsPerPage,
+    dependencies: [...dependencies, tabId],
+  });
+
+  if (items.length === 0) {
+    return <EmptyMessage>{emptyMessage}</EmptyMessage>;
+  }
+
+  return (
+    <Container className={className}>
+      {(searchOptions || filterOptions) && (
+        <HeaderContainer>
+          <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>
+      )}
+      <Content className={`PaginatedContent-content ${layout}`}>
+        {paginatedItems.map((item, index) => (
+          <div key={index} className="PaginatedContent-item">
+            {renderItem(item)}
+          </div>
+        ))}
+      </Content>
+      <PaginationContainer className="PaginatedContent-pagination">
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      </PaginationContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 400px;
+  width: 100%;
+`;
+
+const HeaderContainer = styled.div`
+  padding: 0 1rem;
+`;
+
+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 Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  padding: 1rem;
+  min-height: 200px;
+  overflow-y: auto;
+
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1rem;
+
+    .PaginatedContent-item {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+`;
+
+const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+`;
+
+const EmptyMessage = styled.div`
+  text-align: center;
+  color: #9ca3af;
+  padding: 2rem;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  min-width: 150px;
+`;