@rpg-engine/long-bow 0.3.91 → 0.3.93

package/dist/components/Dropdown.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export interface IOptionsProps {
     id: number;
     value: string;
-    option: string;
+    option: string | JSX.Element;
 }
 export interface IDropdownProps {
     options: IOptionsProps[];

package/dist/components/Marketplace/Marketplace.d.ts

@@ -0,0 +1,20 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { ChangeEvent } from 'react';
+import { IOptionsProps } from '../Dropdown';
+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 declare const Marketplace: React.FC<IMarketPlaceProps>;

package/dist/components/Marketplace/MarketplaceRows.d.ts

@@ -0,0 +1,12 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React from 'react';
+export interface IMarketPlaceRowsPropos {
+    atlasJSON: any;
+    atlasIMG: any;
+    item: IItem;
+    itemPrice: number;
+    equipmentSet?: IEquipmentSet | null;
+    scale?: number;
+    onHandleClick: (value: string) => void;
+}
+export declare const MarketplaceRows: React.FC<IMarketPlaceRowsPropos>;

package/dist/components/Marketplace/__mocks__/index.d.ts

@@ -0,0 +1,10 @@
+import { IOptionsProps } from '../../Dropdown';
+export declare enum OrderByType {
+    Name = "Name",
+    Rarity = "Rarity",
+    Price = "Price",
+    DateAdded = "Date Added"
+}
+export declare const itemTypeOptions: IOptionsProps[];
+export declare const itemRarityOptions: IOptionsProps[];
+export declare const orderByOptions: IOptionsProps[];

package/dist/index.d.ts

@@ -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/dist/long-bow.cjs.development.js

@@ -12358,14 +12358,20 @@ var Ellipsis = function Ellipsis(_ref) {
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";", "}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}"], function (props) {
+})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}"], function (props) {
   return props.maxWidth;
+}, function (props) {
+  return props.fontSize;
 }, function (props) {
   return props.center && "margin: 0 auto;";
 }, function (props) {
   return props.maxWidth;
+}, function (props) {
+  return props.fontSize;
 }, function (props) {
   return props.maxWidth;
+}, function (props) {
+  return props.fontSize;
 });
 
 var PropertySelect = function PropertySelect(_ref) {
@@ -14165,6 +14171,7 @@ var CraftBook = function CraftBook(_ref) {
   }), React__default.createElement(RadioInputScroller, {
     className: "inputRadioCraftBook"
   }, craftablesItems == null ? void 0 : craftablesItems.map(function (option, index) {
+    var _option$levelIsOk, _option$minCraftingRe, _option$minCraftingRe2, _option$minCraftingRe3, _option$minCraftingRe4;
     return React__default.createElement(RadioOptionsWrapper, {
       key: index
     }, React__default.createElement(SpriteAtlasWrapper, null, React__default.createElement(ItemInfoWrapper, {
@@ -14228,7 +14235,9 @@ var CraftBook = function CraftBook(_ref) {
         spriteKey: option.texturePath,
         imgScale: 1
       }), React__default.createElement(StyledItem, null, modifyString(option.key), " (", option.qty, "x)"));
-    })));
+    }), isShown && isShown.index === index && React__default.createElement(MinCraftingRequirementsText, {
+      levelIsOk: (_option$levelIsOk = option == null ? void 0 : option.levelIsOk) != null ? _option$levelIsOk : false
+    }, modifyString(((_option$minCraftingRe = option == null ? void 0 : (_option$minCraftingRe2 = option.minCraftingRequirements) == null ? void 0 : _option$minCraftingRe2[0]) != null ? _option$minCraftingRe : '') + " " + ((_option$minCraftingRe3 = option == null ? void 0 : (_option$minCraftingRe4 = option.minCraftingRequirements) == null ? void 0 : _option$minCraftingRe4[1]) != null ? _option$minCraftingRe3 : '')))));
   })), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: onClose
@@ -14271,6 +14280,13 @@ var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__ButtonWrapper",
   componentId: "sc-19q95ue-7"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;button{padding:0px 50px;}"]);
+var MinCraftingRequirementsText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__MinCraftingRequirementsText",
+  componentId: "sc-19q95ue-8"
+})(["font-size:0.6rem;font-weight:bold;color:", ";"], function (_ref2) {
+  var levelIsOk = _ref2.levelIsOk;
+  return levelIsOk ? '#72f100' : 'gray';
+});
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
@@ -15472,6 +15488,160 @@ var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
 
+var MarketplaceRows = function MarketplaceRows(_ref) {
+  var atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    item = _ref.item,
+    itemPrice = _ref.itemPrice,
+    equipmentSet = _ref.equipmentSet,
+    scale = _ref.scale,
+    onHandleClick = _ref.onHandleClick;
+  return React__default.createElement(MarketPlaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(ItemInfoWrapper, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    scale: scale
+  }, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: shared.getItemTextureKeyPath({
+      key: item.key,
+      stackQty: item.stackQty || 1,
+      texturePath: item.texturePath,
+      isStackable: item.isStackable
+    }, atlasJSON),
+    imgScale: 2
+  }))), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.name)))), React__default.createElement(QuantityContainer, null, React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$1, null, React__default.createElement(Item$1, null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.rarity))))), React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: 'others/gold-coin-qty-4.png',
+    imgScale: 2
+  })), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: function onClick() {
+      return onHandleClick(item.name);
+    }
+  }, "Buy")));
+};
+var MarketPlaceWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__MarketPlaceWrapper",
+  componentId: "sc-wmpr1o-0"
+})(["margin:auto;display:grid;grid-template-columns:35% 20% 20% 25%;&:hover{background-color:", ";}padding:0.5rem;p{font-size:0.8rem;}"], uiColors.darkGray);
+var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__ItemIconContainer",
+  componentId: "sc-wmpr1o-1"
+})(["display:flex;justify-content:flex-start;align-items:center;"]);
+var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__SpriteContainer",
+  componentId: "sc-wmpr1o-2"
+})(["position:relative;top:-0.5rem;left:0.5rem;"]);
+var Item$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MarketplaceRows__Item",
+  componentId: "sc-wmpr1o-3"
+})(["color:white;text-align:center;z-index:1;width:100%;"]);
+var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__TextOverlay",
+  componentId: "sc-wmpr1o-4"
+})(["width:100%;position:relative;"]);
+var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__QuantityContainer",
+  componentId: "sc-wmpr1o-5"
+})(["position:relative;display:flex;min-width:100px;justify-content:center;align-items:center;"]);
+var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__QuantityDisplay",
+  componentId: "sc-wmpr1o-6"
+})(["font-size:", ";"], uiFonts.size.small);
+var PriceValue = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__PriceValue",
+  componentId: "sc-wmpr1o-7"
+})(["margin-left:40px;"]);
+var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__ButtonContainer",
+  componentId: "sc-wmpr1o-8"
+})(["margin:auto;"]);
+
+var Marketplace = function Marketplace(_ref) {
+  var items = _ref.items,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    onClose = _ref.onClose,
+    optionsType = _ref.optionsType,
+    optionsRarity = _ref.optionsRarity,
+    optionsPrice = _ref.optionsPrice,
+    onChangeType = _ref.onChangeType,
+    onChangeRarity = _ref.onChangeRarity,
+    onChangeOrder = _ref.onChangeOrder,
+    onChangeNameInput = _ref.onChangeNameInput,
+    scale = _ref.scale,
+    equipmentSet = _ref.equipmentSet,
+    onHandleClick = _ref.onHandleClick;
+  return React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "800px",
+    cancelDrag: "#MarketContainer",
+    scale: scale
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(InputWrapper, null, React__default.createElement("p", null, " Search By Name"), React__default.createElement(Input, {
+    onChange: onChangeNameInput,
+    placeholder: 'Search...'
+  })), React__default.createElement(WrapperContainer, null, React__default.createElement(StyledDropdown, {
+    options: optionsType,
+    onChange: onChangeType,
+    width: '220px'
+  }), React__default.createElement(StyledDropdown, {
+    options: optionsRarity,
+    onChange: onChangeRarity,
+    width: '220px'
+  }), React__default.createElement(StyledDropdown, {
+    options: optionsPrice,
+    onChange: onChangeOrder,
+    width: '220px'
+  })), React__default.createElement(ItemComponentScrollWrapper, {
+    id: "MarketContainer"
+  }, items == null ? void 0 : items.map(function (item, index) {
+    return React__default.createElement(MarketplaceRows, {
+      key: item.key + "_" + index,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      item: item,
+      itemPrice: 10,
+      equipmentSet: equipmentSet,
+      onHandleClick: onHandleClick
+    });
+  }))));
+};
+var InputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__InputWrapper",
+  componentId: "sc-h904b1-0"
+})(["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;}"]);
+var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__WrapperContainer",
+  componentId: "sc-h904b1-1"
+})(["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;}"]);
+var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__ItemComponentScrollWrapper",
+  componentId: "sc-h904b1-2"
+})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;"]);
+var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+  displayName: "Marketplace__StyledDropdown",
+  componentId: "sc-h904b1-3"
+})(["margin:3px !important;width:170px !important;"]);
+
 var ProgressBar = function ProgressBar(_ref) {
   var max = _ref.max,
     value = _ref.value,
@@ -15496,7 +15666,7 @@ var ProgressBar = function ProgressBar(_ref) {
     percentageWidth: percentageWidth,
     minWidth: minWidth,
     style: style
-  }, displayText && React__default.createElement(TextOverlay$1, null, React__default.createElement(ProgressBarText, null, value, "/", max)), React__default.createElement("div", {
+  }, displayText && React__default.createElement(TextOverlay$2, null, React__default.createElement(ProgressBarText, null, value, "/", max)), React__default.createElement("div", {
     className: " rpgui-progress-track"
   }, React__default.createElement("div", {
     className: "rpgui-progress-fill " + color + " ",
@@ -15514,7 +15684,7 @@ var ProgressBarText = /*#__PURE__*/styled.span.withConfig({
   displayName: "ProgressBar__ProgressBarText",
   componentId: "sc-qa6fzh-0"
 })(["font-size:", " !important;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"], uiFonts.size.small);
-var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
+var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
@@ -15892,7 +16062,7 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
   }
   var nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
   var ratio = skillPoints / nextLevelSPWillbe * 100;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", level)), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", level)), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$1, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -15908,7 +16078,7 @@ var ProgressBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressBarContainer",
   componentId: "sc-5vuroc-0"
 })(["position:relative;top:8px;width:100%;height:auto;"]);
-var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__SpriteContainer",
   componentId: "sc-5vuroc-1"
 })(["position:relative;top:-3px;left:0;"]);
@@ -16303,7 +16473,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
   };
-  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer$1, null, React__default.createElement(ItemInfoWrapper, {
+  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$1, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -16322,7 +16492,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
   })))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "250px"
-  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer, null, React__default.createElement(SelectArrow, {
+  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
@@ -16332,7 +16502,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     className: "arrow-selector",
     direction: "left",
     onPointerDown: onLeftClick
-  }), React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$2, null, React__default.createElement(Item$1, null, selectedQty))), React__default.createElement(StyledArrow, {
+  }), React__default.createElement(QuantityDisplay$1, null, React__default.createElement(TextOverlay$3, null, React__default.createElement(Item$2, null, selectedQty))), React__default.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "right",
@@ -16356,11 +16526,11 @@ var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
   componentId: "sc-mja0b5-2"
 })(["flex:60%;"]);
-var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
+var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
   componentId: "sc-mja0b5-3"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
-var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
   componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
@@ -16368,19 +16538,19 @@ var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
   componentId: "sc-mja0b5-5"
 })(["p{font-size:0.75rem;margin:0;}"]);
-var Item$1 = /*#__PURE__*/styled.span.withConfig({
+var Item$2 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
   componentId: "sc-mja0b5-6"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
-var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
+var TextOverlay$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
   componentId: "sc-mja0b5-7"
 })(["width:100%;position:relative;"]);
-var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
+var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
   componentId: "sc-mja0b5-8"
 })(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
-var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
+var QuantityDisplay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityDisplay",
   componentId: "sc-mja0b5-9"
 })(["font-size:", ";"], uiFonts.size.small);
@@ -16549,6 +16719,8 @@ exports.ItemContainer = ItemContainer$1;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;
 exports.ListMenu = ListMenu;
+exports.Marketplace = Marketplace;
+exports.MarketplaceRows = MarketplaceRows;
 exports.NPCDialog = NPCDialog;
 exports.NPCMultiDialog = NPCMultiDialog;
 exports.ProgressBar = ProgressBar;