@rpg-engine/long-bow 0.8.4 → 0.8.5

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

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

package/dist/utils/itemUtils.d.ts

@@ -0,0 +1,8 @@
+interface IItemSprite {
+    key: string;
+    stackQty?: number;
+    texturePath: string;
+    isStackable?: boolean;
+}
+export declare const getItemTextureKeyPath: (item: IItemSprite, atlasJSON: Record<string, any>) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/InformationCenter/InformationCenter.tsx

@@ -54,6 +54,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   error,
   initialSearchQuery = '',
 }) => {
+  const [activeTab, setActiveTab] = useState('bestiary');
   const [
     selectedItem,
     setSelectedItem,
@@ -79,6 +80,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
           entitiesAtlasJSON={entitiesAtlasJSON}
           entitiesAtlasIMG={entitiesAtlasIMG}
           initialSearchQuery={initialSearchQuery}
+          tabId="bestiary"
         />
       ),
     },
@@ -92,6 +94,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
           itemsAtlasJSON={itemsAtlasJSON}
           itemsAtlasIMG={itemsAtlasIMG}
           initialSearchQuery={initialSearchQuery}
+          tabId="items"
         />
       ),
     },
@@ -102,6 +105,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
         <FaqSection
           faqItems={faqItems}
           initialSearchQuery={initialSearchQuery}
+          tabId="faq"
         />
       ),
     },
@@ -112,6 +116,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
         <TutorialsSection
           videoGuides={videoGuides}
           initialSearchQuery={initialSearchQuery}
+          tabId="tutorials"
         />
       ),
     },
@@ -119,7 +124,16 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
 
   return (
     <Container>
-      <InternalTabs tabs={tabs} activeTextColor="#000000" />
+      <InternalTabs
+        tabs={tabs}
+        activeTextColor="#000000"
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        activeColor="#fef08a"
+        inactiveColor="#6b7280"
+        borderColor="#f59e0b"
+        hoverColor="#fef3c7"
+      />
       {selectedItem && (
         <InformationCenterItemDetails
           item={selectedItem}

package/src/components/InformationCenter/InformationCenterCell.tsx

@@ -56,9 +56,14 @@ const CellContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
   transition: background-color 0.2s ease;
+  width: 100%;
+  height: 100%;
+  min-width: 120px;
   min-height: 120px;
+  box-sizing: border-box;
 
   &:hover {
     background: rgba(0, 0, 0, 0.3);
@@ -75,6 +80,7 @@ const SpriteContainer = styled.div`
   position: relative;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
+  flex-shrink: 0;
 
   .sprite-from-atlas-img {
     position: absolute;
@@ -93,4 +99,5 @@ const CellName = styled.h3`
   font-family: 'Press Start 2P', cursive;
   line-height: 1.2;
   word-break: break-word;
+  max-width: 100%;
 `;

package/src/components/InformationCenter/sections/bestiary/BestiarySection.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
-import { InformationCenterTabView } from '../../InformationCenterTabView';
 import { IInformationCenterNPC } from '../../InformationCenterTypes';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
@@ -14,6 +14,7 @@ interface IBestiarySectionProps {
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
   initialSearchQuery: string;
+  tabId: string;
 }
 
 export const BestiarySection: React.FC<IBestiarySectionProps> = ({
@@ -23,10 +24,9 @@ export const BestiarySection: React.FC<IBestiarySectionProps> = ({
   entitiesAtlasJSON,
   entitiesAtlasIMG,
   initialSearchQuery,
+  tabId,
 }) => {
-  const [bestiarySearchQuery, setBestiarySearchQuery] = useState(
-    initialSearchQuery
-  );
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [tooltipData, setTooltipData] = useState<{
     npc: IInformationCenterNPC;
     position: { x: number; y: number };
@@ -37,12 +37,6 @@ export const BestiarySection: React.FC<IBestiarySectionProps> = ({
   ] = useState<IInformationCenterNPC | null>(null);
   const [isTouchDevice] = useState('ontouchstart' in window);
 
-  const filterItems = (items: IInformationCenterNPC[]) => {
-    return items.filter(item =>
-      item.name.toLowerCase().includes(bestiarySearchQuery.toLowerCase())
-    );
-  };
-
   const handleMouseEnter = (
     monster: IInformationCenterNPC,
     event: React.MouseEvent
@@ -93,35 +87,38 @@ export const BestiarySection: React.FC<IBestiarySectionProps> = ({
     setTooltipData(null);
   };
 
-  const renderContent = (items: IInformationCenterNPC[]) => (
-    <BestiaryGrid>
-      {items.map(item => (
-        <InformationCenterCell
-          key={item.id}
-          name={item.name}
-          spriteKey={item.key}
-          atlasJSON={entitiesAtlasJSON}
-          atlasIMG={entitiesAtlasIMG}
-          onClick={() => handleMonsterClick(item)}
-          onMouseEnter={e => handleMouseEnter(item, e)}
-          onMouseLeave={handleMouseLeave}
-          onMouseMove={handleMouseMove}
-          onTouchStart={e => handleTouchStart(item, e)}
-        />
-      ))}
-    </BestiaryGrid>
+  const renderItem = (item: IInformationCenterNPC) => (
+    <InformationCenterCell
+      key={item.id}
+      name={item.name}
+      spriteKey={item.key}
+      atlasJSON={entitiesAtlasJSON}
+      atlasIMG={entitiesAtlasIMG}
+      onClick={() => handleMonsterClick(item)}
+      onMouseEnter={e => handleMouseEnter(item, e)}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
+      onTouchStart={e => handleTouchStart(item, e)}
+    />
+  );
+
+  const filteredItems = bestiaryItems.filter(item =>
+    item.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   return (
     <>
-      <InformationCenterTabView
-        items={bestiaryItems}
-        searchQuery={bestiarySearchQuery}
-        onSearchChange={setBestiarySearchQuery}
-        filterItems={filterItems}
-        renderContent={renderContent}
-        searchPlaceholder="Search monsters..."
+      <PaginatedContent<IInformationCenterNPC>
+        items={filteredItems}
+        renderItem={renderItem}
         emptyMessage="No monsters found"
+        tabId={tabId}
+        layout="grid"
+        searchOptions={{
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: 'Search monsters...',
+        }}
       />
       {tooltipData && (
         <Portal>
@@ -154,14 +151,6 @@ export const BestiarySection: React.FC<IBestiarySectionProps> = ({
   );
 };
 
-const BestiaryGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
-  padding: 0 1rem;
-  min-height: 300px;
-`;
-
 const TooltipWrapper = styled.div`
   position: fixed;
   z-index: 1000;

package/src/components/InformationCenter/sections/faq/FaqSection.tsx

@@ -1,58 +1,38 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
+import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { IFaqItem } from '../../InformationCenter';
-import { InformationCenterTabView } from '../../InformationCenterTabView';
 
 interface IFaqSectionProps {
   faqItems: IFaqItem[];
   initialSearchQuery: string;
+  tabId: string;
 }
 
 export const FaqSection: React.FC<IFaqSectionProps> = ({
   faqItems,
   initialSearchQuery,
+  tabId,
 }) => {
-  const [faqSearchQuery, setFaqSearchQuery] = useState(initialSearchQuery);
-
-  const filterItems = (items: IFaqItem[]) => {
-    return items.filter(
-      item =>
-        item.question.toLowerCase().includes(faqSearchQuery.toLowerCase()) ||
-        item.answer.toLowerCase().includes(faqSearchQuery.toLowerCase())
-    );
-  };
-
-  const renderContent = (items: IFaqItem[]) => (
-    <FaqContainer>
-      {items.map(item => (
-        <FaqItem key={item.id}>
-          <Question>{item.question}</Question>
-          <Answer>{item.answer}</Answer>
-        </FaqItem>
-      ))}
-    </FaqContainer>
+  const renderItem = (item: IFaqItem) => (
+    <FaqItem>
+      <Question>{item.question}</Question>
+      <Answer>{item.answer}</Answer>
+    </FaqItem>
   );
 
   return (
-    <InformationCenterTabView
+    <PaginatedContent<IFaqItem>
       items={faqItems}
-      searchQuery={faqSearchQuery}
-      onSearchChange={setFaqSearchQuery}
-      filterItems={filterItems}
-      renderContent={renderContent}
-      searchPlaceholder="Search FAQ..."
+      renderItem={renderItem}
       emptyMessage="No FAQ items found"
+      tabId={tabId}
+      layout="list"
+      itemsPerPage={10}
     />
   );
 };
 
-const FaqContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 0 1rem;
-`;
-
 const FaqItem = styled.div`
   background: rgba(0, 0, 0, 0.2);
   padding: 1rem;

package/src/components/InformationCenter/sections/items/ItemsSection.tsx

@@ -2,8 +2,8 @@ import { ItemType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { IOptionsProps } from '../../../Dropdown';
+import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { InformationCenterCell } from '../../InformationCenterCell';
-import { InformationCenterTabView } from '../../InformationCenterTabView';
 import {
   IInformationCenterItem,
   IInformationCenterNPC,
@@ -19,6 +19,7 @@ interface IItemsSectionProps {
   itemsAtlasJSON: Record<string, any>;
   itemsAtlasIMG: string;
   initialSearchQuery: string;
+  tabId: string;
 }
 
 export const ItemsSection: React.FC<IItemsSectionProps> = ({
@@ -27,8 +28,9 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
   itemsAtlasJSON,
   itemsAtlasIMG,
   initialSearchQuery,
+  tabId,
 }) => {
-  const [itemsSearchQuery, setItemsSearchQuery] = useState(initialSearchQuery);
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
     'all'
   );
@@ -48,14 +50,11 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
     { id: 3, value: ItemType.Armor, option: 'Armor' },
   ];
 
-  const filterItems = (items: IInformationCenterItem[]) => {
-    return items.filter(
-      item =>
-        (selectedItemCategory === 'all' ||
-          item.type === selectedItemCategory) &&
-        item.name.toLowerCase().includes(itemsSearchQuery.toLowerCase())
-    );
-  };
+  const filteredItems = items.filter(
+    item =>
+      (selectedItemCategory === 'all' || item.type === selectedItemCategory) &&
+      item.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
   const getDroppedByNPCs = (
     itemId: string,
@@ -109,41 +108,40 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
     setHoveredItem(null);
   };
 
-  const renderContent = (items: IInformationCenterItem[]) => (
-    <ItemsGrid>
-      {items.map(item => (
-        <InformationCenterCell
-          key={item.key}
-          name={item.name}
-          spriteKey={item.texturePath}
-          atlasJSON={itemsAtlasJSON}
-          atlasIMG={itemsAtlasIMG}
-          onMouseEnter={e => handleMouseEnter(e, item)}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
-          onTouchStart={e => handleTouchStart(e, item)}
-          onClick={() => handleItemClick(item)}
-        />
-      ))}
-    </ItemsGrid>
+  const renderItem = (item: IInformationCenterItem) => (
+    <InformationCenterCell
+      key={item.key}
+      name={item.name}
+      spriteKey={item.texturePath}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onMouseEnter={e => handleMouseEnter(e, item)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      onTouchStart={e => handleTouchStart(e, item)}
+      onClick={() => handleItemClick(item)}
+    />
   );
 
   return (
     <>
-      <InformationCenterTabView
-        items={items}
-        searchQuery={itemsSearchQuery}
-        onSearchChange={setItemsSearchQuery}
-        filterItems={filterItems}
-        renderContent={renderContent}
-        searchPlaceholder="Search items..."
+      <PaginatedContent<IInformationCenterItem>
+        items={filteredItems}
+        renderItem={renderItem}
+        emptyMessage="No items found"
         filterOptions={{
           options: itemCategoryOptions,
           selectedOption: selectedItemCategory,
           onOptionChange: setSelectedItemCategory,
         }}
-        emptyMessage="No items found"
+        searchOptions={{
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: 'Search items...',
+        }}
         dependencies={[selectedItemCategory]}
+        tabId={tabId}
+        layout="grid"
       />
       {hoveredItem && (
         <TooltipWrapper
@@ -165,11 +163,13 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
   );
 };
 
-const ItemsGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
-  padding: 0 1rem;
+const StyledPaginatedContent = styled(PaginatedContent)`
+  .PaginatedContent-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+    padding: 0 1rem;
+  }
 `;
 
 const TooltipWrapper = styled.div`

package/src/components/InternalTabs/InternalTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 interface TabItem {
@@ -14,6 +14,8 @@ export interface TableTabProps {
   inactiveColor?: string;
   borderColor?: string;
   hoverColor?: string;
+  onTabChange?: (tabId: string) => void;
+  activeTab?: string;
 }
 
 export const InternalTabs: React.FC<TableTabProps> = ({
@@ -23,8 +25,10 @@ export const InternalTabs: React.FC<TableTabProps> = ({
   inactiveColor = '#6b7280',
   borderColor = '#f59e0b',
   hoverColor = '#fef3c7',
+  onTabChange,
+  activeTab: externalActiveTab,
 }) => {
-  const [activeTab, setActiveTab] = useState(tabs[0].id);
+  const activeTabId = externalActiveTab ?? tabs[0].id;
 
   return (
     <TableWrapper>
@@ -32,20 +36,20 @@ export const InternalTabs: React.FC<TableTabProps> = ({
         {tabs.map(tab => (
           <TabButton
             key={tab.id}
-            active={activeTab === tab.id}
+            active={activeTabId === tab.id}
             activeColor={activeColor}
             activeTextColor={activeTextColor}
             inactiveColor={inactiveColor}
             borderColor={borderColor}
             hoverColor={hoverColor}
-            onClick={() => setActiveTab(tab.id)}
+            onClick={() => onTabChange?.(tab.id)}
           >
             {tab.title}
           </TabButton>
         ))}
       </TabHeader>
       <ContentWrapper>
-        {tabs.find(tab => tab.id === activeTab)?.content}
+        {tabs.find(tab => tab.id === activeTabId)?.content}
       </ContentWrapper>
     </TableWrapper>
   );

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -182,5 +182,18 @@ export const generateContextMenu = (
     ];
   }
 
+  console.log(item.type === ItemType.Container)
+  if (item.type === ItemType.Container) {
+    const existInContextAction = contextActionMenu.some(
+      item => item.text === DepotSocketEvents.OpenContainer
+        || item.id === ItemSocketEvents.ContainerOpen
+        || item.text === 'Open'
+    );
+
+    if (!existInContextAction) {
+      contextActionMenu.push({ id: DepotSocketEvents.OpenContainer, text: 'Open' });
+    }
+  }
+
   return contextActionMenu;
 };

package/src/components/Store/InternalStoreTab.tsx

@@ -0,0 +1,142 @@
+import { ItemType, UserAccountTypes } from '@rpg-engine/shared';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { usePagination } from '../CraftBook/hooks/usePagination';
+import { Pagination } from '../shared/Pagination/Pagination';
+import { SearchBar } from '../shared/SearchBar/SearchBar';
+import { StoreItemRow } from './StoreItemRow';
+import { IStoreItem } from './StoreTypes';
+
+const ITEMS_PER_PAGE = 4;
+
+interface IInternalStoreTabProps {
+  items: IStoreItem[];
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onPurchase: (item: IStoreItem, quantity: number) => void;
+  userGold: number;
+  userAccountType: UserAccountTypes;
+  type?: ItemType | 'premium' | 'all';
+  initialSearchQuery?: string;
+}
+
+export const InternalStoreTab: React.FC<IInternalStoreTabProps> = ({
+  items,
+  atlasJSON,
+  atlasIMG,
+  onPurchase,
+  userGold,
+  userAccountType,
+  type = 'all',
+  initialSearchQuery = '',
+}) => {
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+
+  const filteredItems = useMemo(() => {
+    return items.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 && item.requiredAccountType.length > 0
+          );
+        default:
+          return true;
+      }
+    });
+  }, [items, searchQuery, type]);
+
+  const {
+    currentPage,
+    setCurrentPage,
+    paginatedItems,
+    totalPages,
+  } = usePagination({
+    items: filteredItems,
+    itemsPerPage: ITEMS_PER_PAGE,
+    dependencies: [searchQuery, type],
+  });
+
+  return (
+    <Container>
+      <SearchContainer>
+        <SearchBar
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder="Search items..."
+        />
+      </SearchContainer>
+
+      <StoreContent>
+        {paginatedItems.length > 0 ? (
+          paginatedItems.map(item => (
+            <StoreItemRow
+              key={item._id}
+              item={item}
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              onPurchase={onPurchase}
+              userGold={userGold}
+              userAccountType={userAccountType}
+            />
+          ))
+        ) : (
+          <EmptyMessage>No items found</EmptyMessage>
+        )}
+      </StoreContent>
+
+      <PaginationContainer>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.max(1, totalPages)}
+          onPageChange={setCurrentPage}
+        />
+      </PaginationContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  min-height: 400px;
+`;
+
+const SearchContainer = styled.div`
+  width: 100%;
+`;
+
+const StoreContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+`;
+
+const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;
+
+const EmptyMessage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.8rem;
+`;