@rpg-engine/long-bow 0.3.91 → 0.3.93

package/dist/stories/Marketplace.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/MarketplaceRows.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+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.3.91",
+  "version": "0.3.93",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.7.40",
+    "@rpg-engine/shared": "^0.7.51",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/CraftBook/CraftBook.tsx

@@ -165,6 +165,16 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
                     </StyledItem>
                   </Recipes>
                 ))}
+              {isShown && isShown.index === index && (
+                <MinCraftingRequirementsText
+                  levelIsOk={option?.levelIsOk ?? false}
+                >
+                  {modifyString(
+                    `${option?.minCraftingRequirements?.[0] ?? ''} ${option
+                      ?.minCraftingRequirements?.[1] ?? ''}`
+                  )}
+                </MinCraftingRequirementsText>
+              )}
             </div>
           </RadioOptionsWrapper>
         ))}
@@ -242,3 +252,9 @@ const ButtonWrapper = styled.div`
     padding: 0px 50px;
   }
 `;
+
+const MinCraftingRequirementsText = styled.div<{ levelIsOk: boolean }>`
+  font-size: 0.6rem;
+  font-weight: bold;
+  color: ${({ levelIsOk }) => (levelIsOk ? '#72f100' : 'gray')};
+`;

package/src/components/CraftBook/MockItems.ts

@@ -4,7 +4,7 @@ import { items } from '../../mocks/itemContainer.mocks';
 export const craftableItems: ICraftableItem[] = [
   {
     ...items[0],
-    canCraft: true,
+    canCraft: false,
     ingredients: [
       {
         key: 'leather',
@@ -13,6 +13,8 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 4],
+    levelIsOk: true,
   },
   {
     ...items[1],
@@ -25,6 +27,8 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 4],
+    levelIsOk: false,
   },
   {
     ...items[2],
@@ -37,6 +41,8 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 4],
+    levelIsOk: false,
   },
   {
     ...items[0],
@@ -49,6 +55,8 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 4],
+    levelIsOk: false,
   },
   {
     ...items[1],
@@ -61,6 +69,8 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 1],
+    levelIsOk: true,
   },
   {
     ...items[2],
@@ -73,5 +83,7 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
+    minCraftingRequirements: ['Blacksmithing', 4],
+    levelIsOk: true,
   },
 ];

package/src/components/Dropdown.tsx

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 export interface IOptionsProps {
   id: number;
   value: string;
-  option: string;
+  option: string | JSX.Element;
 }
 
 export interface IDropdownProps {
@@ -22,7 +22,9 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   const dropdownId = uuidv4();
 
   const [selectedValue, setSelectedValue] = useState<string>('');
-  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
+    ''
+  );
   const [opened, setOpened] = useState<boolean>(false);
 
   useEffect(() => {

package/src/components/Marketplace/Marketplace.tsx

@@ -0,0 +1,132 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { Input } from '../Input';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { MarketplaceRows } from './MarketplaceRows';
+
+export interface IMarketPlaceProps {
+  items: IItem[] | null;
+  atlasJSON: any;
+  atlasIMG: any;
+  optionsType: IOptionsProps[];
+  optionsRarity: IOptionsProps[];
+  optionsPrice: IOptionsProps[];
+  onClose: () => void;
+  onChangeType: (value: string) => void;
+  onChangeRarity: (value: string) => void;
+  onChangeOrder: (value: string) => void;
+  onChangeNameInput: (event: ChangeEvent<HTMLInputElement>) => void;
+  scale?: number;
+  equipmentSet?: IEquipmentSet | null;
+  onHandleClick: (value: string) => void;
+}
+
+export const Marketplace: React.FC<IMarketPlaceProps> = ({
+  items,
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  optionsType,
+  optionsRarity,
+  optionsPrice,
+  onChangeType,
+  onChangeRarity,
+  onChangeOrder,
+  onChangeNameInput,
+  scale,
+  equipmentSet,
+  onHandleClick,
+}) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="800px"
+      cancelDrag="#MarketContainer"
+      scale={scale}
+    >
+      <>
+        <InputWrapper>
+          <p> Search By Name</p>
+          <Input onChange={onChangeNameInput} placeholder={'Search...'} />
+        </InputWrapper>
+
+        <WrapperContainer>
+          <StyledDropdown
+            options={optionsType}
+            onChange={onChangeType}
+            width={'220px'}
+          />
+          <StyledDropdown
+            options={optionsRarity}
+            onChange={onChangeRarity}
+            width={'220px'}
+          />
+          <StyledDropdown
+            options={optionsPrice}
+            onChange={onChangeOrder}
+            width={'220px'}
+          />
+        </WrapperContainer>
+        <ItemComponentScrollWrapper id="MarketContainer">
+          {items?.map((item, index) => (
+            <MarketplaceRows
+              key={`${item.key}_${index}`}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              item={item}
+              itemPrice={10}
+              equipmentSet={equipmentSet}
+              onHandleClick={onHandleClick}
+            />
+          ))}
+        </ItemComponentScrollWrapper>
+      </>
+    </DraggableContainer>
+  );
+};
+
+const InputWrapper = styled.div`
+  width: 95%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: auto;
+  margin-bottom: 10px;
+  p {
+    width: auto;
+    margin-right: 20px;
+  }
+  input {
+    width: 68%;
+    height: 10px;
+  }
+`;
+
+const WrapperContainer = styled.div`
+  display: grid;
+  grid-template-columns: 30% 30% 30%;
+  justify-content: space-between;
+  width: 90%;
+  margin-left: 10px;
+  .rpgui-content .rpgui-dropdown-imp-header {
+    padding: 0px 10px 0 !important;
+  }
+`;
+
+const ItemComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 3px !important;
+  width: 170px !important;
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -0,0 +1,171 @@
+import {
+  getItemTextureKeyPath,
+  IEquipmentSet,
+  IItem,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { Button, ButtonTypes } from '../Button';
+import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IMarketPlaceRowsPropos {
+  atlasJSON: any;
+  atlasIMG: any;
+  item: IItem;
+  itemPrice: number;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+  onHandleClick: (value: string) => void;
+}
+
+export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
+  atlasJSON,
+  atlasIMG,
+  item,
+  itemPrice,
+  equipmentSet,
+  scale,
+  onHandleClick,
+}) => {
+  return (
+    <MarketPlaceWrapper>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <ItemInfoWrapper
+            item={item}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            equipmentSet={equipmentSet}
+            scale={scale}
+          >
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: item.key,
+                  stackQty: item.stackQty || 1,
+                  texturePath: item.texturePath,
+                  isStackable: item.isStackable,
+                },
+                atlasJSON
+              )}
+              imgScale={2}
+            />
+          </ItemInfoWrapper>
+        </SpriteContainer>
+        <PriceValue>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+              {item.name}
+            </Ellipsis>
+          </p>
+        </PriceValue>
+      </ItemIconContainer>
+      <QuantityContainer>
+        <QuantityDisplay>
+          <TextOverlay>
+            <Item>
+              <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+                {item.rarity}
+              </Ellipsis>
+            </Item>
+          </TextOverlay>
+        </QuantityDisplay>
+      </QuantityContainer>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={'others/gold-coin-qty-4.png'}
+            imgScale={2}
+          />
+        </SpriteContainer>
+        <PriceValue>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+              ${itemPrice}
+            </Ellipsis>
+          </p>
+        </PriceValue>
+      </ItemIconContainer>
+      <ButtonContainer>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => onHandleClick(item.name)}
+        >
+          Buy
+        </Button>
+      </ButtonContainer>
+    </MarketPlaceWrapper>
+  );
+};
+
+const MarketPlaceWrapper = styled.div`
+  margin: auto;
+  display: grid;
+  grid-template-columns: 35% 20% 20% 25%;
+
+  &:hover {
+    background-color: ${uiColors.darkGray};
+  }
+  padding: 0.5rem;
+  p {
+    font-size: 0.8rem;
+  }
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const Item = styled.span`
+  color: white;
+  text-align: center;
+  z-index: 1;
+  width: 100%;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const QuantityContainer = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+  min-width: 100px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const QuantityDisplay = styled.div`
+  font-size: ${uiFonts.size.small};
+`;
+
+const PriceValue = styled.div`
+  margin-left: 40px;
+`;
+
+const ButtonContainer = styled.div`
+  margin: auto;
+`;

package/src/components/Marketplace/__mocks__/index.tsx

@@ -0,0 +1,65 @@
+import { ItemRarities, ItemType } from '@rpg-engine/shared';
+import React from 'react';
+import { IOptionsProps } from '../../Dropdown';
+
+export enum OrderByType {
+  Name = 'Name',
+  Rarity = 'Rarity',
+  Price = 'Price',
+  DateAdded = 'Date Added',
+}
+
+export const itemTypeOptions: IOptionsProps[] = Object.values(ItemType).map(
+  (itemType, index) => ({
+    id: index + 1,
+    value: itemType,
+    option: itemType,
+  })
+);
+
+export const itemRarityOptions: IOptionsProps[] = Object.values(
+  ItemRarities
+).map((itemRarity, index) => ({
+  id: index + 1,
+  value: itemRarity,
+  option: itemRarity,
+}));
+
+export const orderByOptions: IOptionsProps[] = Object.values(
+  OrderByType
+).flatMap((orderBy, index) => [
+  {
+    id: index * 2 + 1,
+    value: orderBy,
+    option: (
+      <>
+        {orderBy}{' '}
+        <span
+          style={{
+            transform: 'translateY(-2px)',
+            display: 'inline-block',
+          }}
+        >
+          ↓
+        </span>
+      </>
+    ),
+  },
+  {
+    id: index * 2 + 2,
+    value: '-' + orderBy.toLowerCase(),
+    option: (
+      <>
+        {orderBy}{' '}
+        <span
+          style={{
+            transform: 'translateY(-2px)',
+            display: 'inline-block',
+          }}
+        >
+          ↑
+        </span>
+      </>
+    ),
+  },
+]);

package/src/components/shared/Ellipsis.tsx

@@ -35,6 +35,7 @@ const Container = styled.div<IContainerProps>`
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: ${props => props.maxWidth};
+    font-size: ${props => props.fontSize};
 
     ${props => props.center && `margin: 0 auto;`}
   }
@@ -49,6 +50,7 @@ const Container = styled.div<IContainerProps>`
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-size: ${props => props.fontSize};
   }
   .ellipsis-3-lines {
     display: -webkit-box;
@@ -61,5 +63,6 @@ const Container = styled.div<IContainerProps>`
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-size: ${props => props.fontSize};
   }
 `;

package/src/index.tsx

@@ -16,6 +16,8 @@ export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
+export * from './components/Marketplace/Marketplace';
+export * from './components/Marketplace/MarketplaceRows';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';

package/src/stories/Marketplace.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { Marketplace } from '../components/Marketplace/Marketplace';
+import {
+  itemRarityOptions,
+  itemTypeOptions,
+  orderByOptions,
+} from '../components/Marketplace/__mocks__';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { equipmentSetMock } from '../mocks/equipmentSet.mocks';
+import { items } from '../mocks/itemContainer.mocks';
+
+const meta: Meta = {
+  title: 'Marketplace',
+  component: Marketplace,
+};
+
+export default meta;
+
+const Template: Story = () => (
+  <RPGUIRoot>
+    <Marketplace
+      onChangeOrder={value => console.log(value)}
+      onChangeRarity={value => console.log(value)}
+      onChangeType={value => console.log(value)}
+      onChangeNameInput={event => console.log(event.target.value)}
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      onClose={() => console.log('close')}
+      items={items}
+      optionsPrice={orderByOptions}
+      optionsRarity={itemRarityOptions}
+      optionsType={itemTypeOptions}
+      equipmentSet={equipmentSetMock}
+      onHandleClick={value => console.log(value)}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/MarketplaceRows.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { MarketplaceRows } from '../components/Marketplace/MarketplaceRows';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { items } from '../mocks/itemContainer.mocks';
+
+const meta: Meta = {
+  title: 'MarketplaceRows',
+  component: MarketplaceRows,
+};
+
+export default meta;
+
+const Template: Story = () => (
+  <RPGUIRoot>
+    <MarketplaceRows
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      itemPrice={10}
+      onHandleClick={value => console.log(value)}
+      item={items[0]}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});