@rpg-engine/long-bow 0.8.7 → 0.8.9

package/dist/stories/UI/buttonsAndInputs/CTAButton.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+interface ICTAButtonProps {
+    icon: React.ReactNode;
+    label?: React.ReactNode;
+    onClick?: () => void;
+    fullWidth?: boolean;
+    textColor?: string;
+    iconColor?: string;
+    disabled?: boolean;
+}
+declare const meta: Meta;
+export default meta;
+export declare const CartButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICTAButtonProps>;
+export declare const DeleteButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICTAButtonProps>;
+export declare const AddButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICTAButtonProps>;
+export declare const CheckoutButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICTAButtonProps>;
+export declare const DisabledCheckoutButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICTAButtonProps>;

package/dist/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "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.89",
+    "@rpg-engine/shared": "^0.9.92",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",
@@ -92,6 +92,7 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
+    "react-colorful": "^5.6.1",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^4.7.1",

package/src/components/InformationCenter/InformationCenter.tsx

@@ -6,11 +6,11 @@ import {
   IInformationCenterItem,
   IInformationCenterNPC,
 } from './InformationCenterTypes';
-import { BestiarySection } from './sections/bestiary/BestiarySection';
-import { FaqSection } from './sections/faq/FaqSection';
+import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
+import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
 import { InformationCenterItemDetails } from './sections/items/InformationCenterItemDetails';
-import { ItemsSection } from './sections/items/ItemsSection';
-import { TutorialsSection } from './sections/tutorials/TutorialsSection';
+import { InformationCenterItemsSection } from './sections/items/InformationCenterItemsSection';
+import { InformationCenterTutorialsSection } from './sections/tutorials/InformationCenterTutorialsSection';
 
 export interface IFaqItem {
   id: string;
@@ -73,7 +73,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
       id: 'bestiary',
       title: 'Bestiary',
       content: (
-        <BestiarySection
+        <InformationCenterBestiarySection
           bestiaryItems={bestiaryItems}
           itemsAtlasJSON={itemsAtlasJSON}
           itemsAtlasIMG={itemsAtlasIMG}
@@ -88,7 +88,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
       id: 'items',
       title: 'Items',
       content: (
-        <ItemsSection
+        <InformationCenterItemsSection
           items={items}
           bestiaryItems={bestiaryItems}
           itemsAtlasJSON={itemsAtlasJSON}
@@ -102,7 +102,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
       id: 'faq',
       title: 'FAQ',
       content: (
-        <FaqSection
+        <InformationCenterFAQSection
           faqItems={faqItems}
           initialSearchQuery={initialSearchQuery}
           tabId="faq"
@@ -113,7 +113,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
       id: 'tutorials',
       title: 'Tutorials',
       content: (
-        <TutorialsSection
+        <InformationCenterTutorialsSection
           videoGuides={videoGuides}
           initialSearchQuery={initialSearchQuery}
           tabId="tutorials"

package/src/components/InformationCenter/InformationCenterTabView.tsx

@@ -94,7 +94,6 @@ const HeaderContainer = styled.div`
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
-  padding: 0 1rem;
   margin-top: 1.5rem;
 `;
 

package/src/components/InformationCenter/sections/bestiary/{BestiarySection.tsx → InformationCenterBestiarySection.tsx}

@@ -17,7 +17,7 @@ interface IBestiarySectionProps {
   tabId: string;
 }
 
-export const BestiarySection: React.FC<IBestiarySectionProps> = ({
+export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> = ({
   bestiaryItems,
   itemsAtlasJSON,
   itemsAtlasIMG,
@@ -119,6 +119,7 @@ export const BestiarySection: React.FC<IBestiarySectionProps> = ({
           onChange: setSearchQuery,
           placeholder: 'Search monsters...',
         }}
+        itemHeight="180px"
       />
       {tooltipData && (
         <Portal>

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { Collapsible } from '../../../shared/Collapsible/Collapsible';
+import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
+import { SearchHeader } from '../../../shared/SearchHeader/SearchHeader';
+import { IFaqItem } from '../../InformationCenter';
+
+interface IFaqSectionProps {
+  faqItems: IFaqItem[];
+  initialSearchQuery: string;
+  tabId: string;
+}
+
+export const InformationCenterFAQSection: React.FC<IFaqSectionProps> = ({
+  faqItems,
+  initialSearchQuery,
+  tabId,
+}) => {
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+
+  useEffect(() => {
+    setSearchQuery(initialSearchQuery);
+  }, [initialSearchQuery]);
+
+  const filteredFaqs = useMemo(() => {
+    if (!searchQuery) return faqItems;
+    return faqItems.filter(
+      faq =>
+        faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        faq.answer.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery, faqItems]);
+
+  const renderItem = (item: IFaqItem) => (
+    <StyledCollapsible title={item.question}>
+      <Answer>{item.answer}</Answer>
+    </StyledCollapsible>
+  );
+
+  return (
+    <Container>
+      <SearchHeader
+        searchOptions={{
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: 'Search FAQs...',
+        }}
+      />
+      <PaginatedContent<IFaqItem>
+        items={filteredFaqs}
+        renderItem={renderItem}
+        emptyMessage="No FAQ items found"
+        tabId={tabId}
+        layout="list"
+        itemsPerPage={10}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+`;
+
+const StyledCollapsible = styled(Collapsible)`
+  margin-bottom: 0.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Answer = styled.p`
+  font-size: 0.9rem;
+  color: #ffffff;
+  margin: 0;
+  line-height: 1.5;
+`;

package/src/components/InformationCenter/sections/items/{ItemsSection.tsx → InformationCenterItemsSection.tsx}

@@ -22,7 +22,7 @@ interface IItemsSectionProps {
   tabId: string;
 }
 
-export const ItemsSection: React.FC<IItemsSectionProps> = ({
+export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   items,
   bestiaryItems,
   itemsAtlasJSON,
@@ -142,6 +142,7 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
         dependencies={[selectedItemCategory]}
         tabId={tabId}
         layout="grid"
+        itemHeight="180px"
       />
       {hoveredItem && (
         <TooltipWrapper
@@ -163,15 +164,6 @@ export const ItemsSection: React.FC<IItemsSectionProps> = ({
   );
 };
 
-const StyledPaginatedContent = styled(PaginatedContent)`
-  .PaginatedContent-content {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-    padding: 0 1rem;
-  }
-`;
-
 const TooltipWrapper = styled.div`
   position: fixed;
   z-index: 1000;

package/src/components/InformationCenter/sections/tutorials/InformationCenterTutorialsSection.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../../constants/uiColors';
+import { IOptionsProps } from '../../../Dropdown';
+import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
+import { IVideoGuide } from '../../InformationCenter';
+
+interface ITutorialsSectionProps {
+  videoGuides: IVideoGuide[];
+  initialSearchQuery: string;
+  tabId: string;
+}
+
+export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps> = ({
+  videoGuides,
+  initialSearchQuery,
+  tabId,
+}) => {
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categoryOptions: IOptionsProps[] = [
+    { id: 0, value: 'all', option: 'All' },
+    { id: 1, value: 'Combat', option: 'Combat' },
+    { id: 2, value: 'Crafting', option: 'Crafting' },
+    { id: 3, value: 'Exploration', option: 'Exploration' },
+    { id: 4, value: 'General', option: 'General' },
+  ];
+
+  const renderItem = (guide: IVideoGuide) => (
+    <GuideItem key={guide.id}>
+      <GuideThumbnail>
+        <img
+          src={guide.thumbnailUrl || '/placeholder-thumbnail.png'}
+          alt={guide.title}
+        />
+      </GuideThumbnail>
+      <GuideContent>
+        <GuideTitle>{guide.title}</GuideTitle>
+        <GuideDescription>{guide.description}</GuideDescription>
+        <GuideCategory>{guide.category}</GuideCategory>
+      </GuideContent>
+    </GuideItem>
+  );
+
+  const filteredGuides = videoGuides.filter(
+    guide =>
+      (selectedCategory === 'all' || guide.category === selectedCategory) &&
+      (guide.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        guide.description.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  return (
+    <PaginatedContent<IVideoGuide>
+      items={filteredGuides}
+      renderItem={renderItem}
+      emptyMessage="No guides found"
+      searchOptions={{
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: 'Search guides...',
+      }}
+      filterOptions={{
+        options: categoryOptions,
+        selectedOption: selectedCategory,
+        onOptionChange: setSelectedCategory,
+      }}
+      dependencies={[selectedCategory]}
+      tabId={tabId}
+      layout="grid"
+      gridColumns={3}
+      itemsPerPage={3}
+      itemHeight="400px"
+    />
+  );
+};
+
+const GuideItem = styled.div`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  height: 100%;
+  &:hover {
+    transform: translateY(-2px);
+  }
+`;
+
+const GuideThumbnail = styled.div`
+  width: 100%;
+  height: 168px;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  font-size: 0.8rem;
+  line-height: 1.8;
+`;
+
+const GuideContent = styled.div`
+  padding: 12px;
+`;
+
+const GuideTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const GuideDescription = 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 GuideCategory = 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;
+`;

package/src/components/Item/Inventory/ItemPropertyColorSelector.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../../Button';
+import { DraggableContainer } from '../../DraggableContainer';
+import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
+
+interface Props {
+  selectedColor: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (color: string) => void;
+  onChange: (color: string) => void;
+}
+
+export const ColorSelector: React.FC<Props> = ({
+  selectedColor,
+  isOpen,
+  onClose,
+  onConfirm,
+  onChange,
+}) => {
+  const [currentColor, setCurrentColor] = useState(selectedColor);
+
+  useEffect(() => {
+    if (isOpen) setCurrentColor(selectedColor);
+  }, [isOpen, selectedColor]);
+
+  const handleConfirm = () => {
+    onConfirm(currentColor);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return isOpen ? (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      cancelDrag=".react-colorful"
+      width="20rem"
+      onCloseButton={onClose}
+    >
+      <Container>
+        <Header>Select Color</Header>
+        <HexColorPicker
+          color={currentColor}
+          onChange={color => {
+            setCurrentColor(color);
+            onChange(color);
+          }}
+        />
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          type="button"
+          onClick={handleConfirm}
+        >
+          Confirm
+        </Button>
+      </Container>
+    </DraggableContainer>
+  ) : null;
+};
+
+const Container = styled.div`
+  padding: 2rem;
+  text-align: center;
+  background: inherit;
+`;
+
+const Header = styled.h2`
+  font-family: 'Press Start 2P', cursive;
+  color: white;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+`;

package/src/components/Item/Inventory/ItemPropertySimpleHandler.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ColorSelector } from './ItemPropertyColorSelector';
+
+interface Props {
+  isOpen: boolean;
+  selectedColor: string;
+  onClose: () => void;
+  onConfirm: (color: string) => void;
+  onChange: (color: string) => void;
+}
+
+export const ItemPropertySimpleHandler: React.FC<Props> = ({
+  isOpen,
+  selectedColor,
+  onClose,
+  onConfirm,
+  onChange,
+}) => (
+  <ColorSelector
+    selectedColor={selectedColor}
+    isOpen={isOpen}
+    onClose={onClose}
+    onConfirm={onConfirm}
+    onChange={onChange}
+  />
+);

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

@@ -8,7 +8,7 @@ import {
   ItemContainerType,
   ItemSocketEvents,
   ItemSocketEventsDisplayLabels,
-  ItemType,
+  ItemType
 } from '@rpg-engine/shared';
 
 export interface IContextMenuItem {
@@ -192,6 +192,15 @@ export const generateContextMenu = (
     if (!existInContextAction) {
       contextActionMenu.push({ id: DepotSocketEvents.OpenContainer, text: 'Open' });
     }
+
+    if (itemContainerType === ItemContainerType.Inventory) {
+      if (item.textureAtlas === 'items' && item.type === ItemType.Container) {
+        contextActionMenu.push({
+          id: ItemSocketEvents.ItemPropertyUpdate,
+          text: 'Set Color...'
+        });
+      }
+    }
   }
 
   return contextActionMenu;