@rpg-engine/long-bow 0.6.1 → 0.6.2

package/dist/long-bow.esm.js

@@ -13659,47 +13659,61 @@ var rarityColor = function rarityColor(item) {
   }
 };
 
-var onRenderGems = function onRenderGems(itemId, gemQty) {
-  var qtyClassName = 'small';
-  if (gemQty <= 2) {
-    qtyClassName = 'regular';
-  }
+var gemColors = {
+  'emerald-gem': '#50C878',
+  'topaz-radiance': '#FFC87C',
+  'sapphire-gem': '#0F52BA',
+  'ruby-gem': '#E0115F',
+  'misty-quartz-gem': '#D9D9F3',
+  'coral-reef-gem': '#FF7F50',
+  'jasper-gem': '#D73B3E',
+  'earthstone-gem': '#8B4513',
+  'obsidian-gem': '#0B0C0E',
+  'amethyst-gem': '#9966CC'
+};
+var defaultColor = '#FFFFFF'; // Default color (white)
+var onRenderGems = function onRenderGems(item) {
+  var _item$attachedGems;
+  var gemQty = ((_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.length) || 0;
   if (gemQty > 0) {
     return React.createElement(ItemSlotQty, {
-      itemId: itemId,
-      gemQty: gemQty,
-      qtyClassName: qtyClassName
+      item: item
     });
   }
   return undefined;
 };
 var ItemSlotQty = function ItemSlotQty(_ref) {
-  var itemId = _ref.itemId,
-    gemQty = _ref.gemQty,
-    qtyClassName = _ref.qtyClassName;
-  var gemArray = Array.from({
-    length: gemQty
-  }, function () {
-    return '🔶';
-  });
+  var _item$attachedGems2;
+  var item = _ref.item;
+  console.log(item.attachedGems);
+  var itemId = item._id;
   return React.createElement(ItemQtyContainer, {
     key: "qty-" + itemId,
     className: "item-slot-qty"
-  }, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "48px"
-  }, React.createElement(ItemQty, {
-    className: qtyClassName
-  }, gemArray.join(''))));
+  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
+    return React.createElement(Gem, {
+      key: itemId + "-gem-" + index,
+      color: gemColors[gem.key] || defaultColor
+    });
+  }));
 };
 var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemGem__ItemQtyContainer",
   componentId: "sc-1ekseaq-0"
-})(["position:relative;width:85%;height:16px;top:25px;left:5px;pointer-events:none;display:flex;"]);
-var ItemQty = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ItemGem__ItemQty",
+})(["position:relative;width:85%;height:16px;top:26px;left:-2px;pointer-events:none;transform:scale(0.8);display:flex;align-items:center;justify-content:center;opacity:0.8;"]);
+var Gem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemGem__Gem",
   componentId: "sc-1ekseaq-1"
-})(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
+})(["width:8px;height:8px;background-color:", ";border:1px solid black;transform:rotate(45deg);margin:0 2px;box-shadow:0 0 5px ", ";transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:rotate(45deg) scale(1.2);box-shadow:0 0 10px ", ";}"], function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var color = _ref4.color;
+  return color;
+});
 
 var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
   var isFractionalStackQty = stackQty % 1 !== 0;
@@ -13726,7 +13740,7 @@ var ItemSlotQty$1 = function ItemSlotQty(_ref) {
   }, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "48px"
-  }, React.createElement(ItemQty$1, {
+  }, React.createElement(ItemQty, {
     className: qtyClassName
   }, Math.round(stackQty * 100) / 100, ' ')));
 };
@@ -13734,7 +13748,7 @@ var ItemQtyContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlotQty__ItemQtyContainer",
   componentId: "sc-keb1s5-0"
 })(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
-var ItemQty$1 = /*#__PURE__*/styled.span.withConfig({
+var ItemQty = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemSlotQty__ItemQty",
   componentId: "sc-keb1s5-1"
 })(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
@@ -13749,7 +13763,7 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
     return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
   };
   var renderGems = function renderGems(item) {
-    return item.attachedGems && onRenderGems(item._id, item.attachedGems.length);
+    return item.attachedGems && onRenderGems(item);
   };
   var renderItem = function renderItem(item) {
     if (!(item != null && item.texturePath)) {
@@ -19006,6 +19020,74 @@ var SpellList = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-r02nfq-2"
 })(["width:100%;min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;"]);
 
+var Stepper = function Stepper(_ref) {
+  var _steps$currentStep;
+  var steps = _ref.steps,
+    finalCTAButton = _ref.finalCTAButton;
+  var _useState = useState(0),
+    currentStep = _useState[0],
+    setCurrentStep = _useState[1];
+  var currentComponent = (_steps$currentStep = steps[currentStep]) == null ? void 0 : _steps$currentStep.component;
+  var totalSteps = steps.length;
+  var onStepChange = function onStepChange(step) {
+    setCurrentStep(step);
+  };
+  return React.createElement(StepperContainer, {
+    className: "stepper-container"
+  }, React.createElement(StepperTop, null, Array.from({
+    length: totalSteps
+  }, function (_, i) {
+    return React.createElement(ProgressIndicator, {
+      key: i,
+      isActive: i <= currentStep,
+      onClick: function onClick() {
+        return onStepChange(i);
+      }
+    });
+  })), React.createElement(StepperBody, null, currentComponent), React.createElement(StepperFooter, null, currentStep > 0 && React.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.max(0, currentStep - 1));
+    }
+  }), currentStep < totalSteps - 1 && React.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
+    }
+  }), currentStep === totalSteps - 1 && finalCTAButton && React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      return finalCTAButton.onClick;
+    }
+  }, finalCTAButton.label)));
+};
+var StepperContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__StepperContainer",
+  componentId: "sc-13obf1-0"
+})(["display:flex;flex-direction:column;height:100%;"]);
+var StepperTop = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__StepperTop",
+  componentId: "sc-13obf1-1"
+})(["flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:1rem;"]);
+var StepperBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__StepperBody",
+  componentId: "sc-13obf1-2"
+})(["flex:8;"]);
+var StepperFooter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__StepperFooter",
+  componentId: "sc-13obf1-3"
+})(["margin-top:1rem;flex:1;display:flex;justify-content:flex-end;"]);
+var ProgressIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__ProgressIndicator",
+  componentId: "sc-13obf1-4"
+})(["width:20px;height:20px;border-radius:50%;background-color:", ";margin:0 5px;transition:background-color 0.3s;opacity:", ";border:1px solid ", ";cursor:pointer;"], function (_ref2) {
+  var isActive = _ref2.isActive;
+  return isActive ? uiColors.orange : uiColors.lightGray;
+}, function (_ref3) {
+  var isActive = _ref3.isActive;
+  return isActive ? 1 : 0.25;
+}, uiColors.raisinBlack);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React.createElement("textarea", Object.assign({}, props));
@@ -19296,7 +19378,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     }));
-  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2))), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -19440,5 +19522,5 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map