@rpg-engine/long-bow 0.6.1 → 0.6.3

package/dist/components/Item/Inventory/ItemGem.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
+import { IItem } from '@rpg-engine/shared';
 interface IProps {
-    itemId: string;
-    gemQty: number;
-    qtyClassName: string;
+    item: IItem;
 }
-export declare const onRenderGems: (itemId: string, gemQty: number) => JSX.Element | undefined;
-export declare const ItemSlotQty: ({ itemId, gemQty, qtyClassName, }: IProps) => JSX.Element;
-export {};
+export declare const onRenderGems: (item: IItem) => JSX.Element | undefined;
+export declare const ItemSlotQty: ({ item }: IProps) => JSX.Element;
+export default ItemSlotQty;

package/dist/components/Stepper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IStep {
+    component: React.ReactNode;
+    id: number;
+}
+interface IStepperProps {
+    steps: IStep[];
+    finalCTAButton?: {
+        label: string;
+        onClick: (() => void) | (() => Promise<void>) | ((e: any) => Promise<void>);
+    };
+}
+export declare const Stepper: React.FC<IStepperProps>;
+export {};

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from './components/Shortcuts/Shortcuts';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/Spellbook/Spellbook';
+export * from './components/Stepper';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';

package/dist/long-bow.cjs.development.js

@@ -13665,47 +13665,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__default.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__default.createElement(ItemQtyContainer, {
     key: "qty-" + itemId,
     className: "item-slot-qty"
-  }, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "48px"
-  }, React__default.createElement(ItemQty, {
-    className: qtyClassName
-  }, gemArray.join(''))));
+  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
+    return React__default.createElement(Gem, {
+      key: itemId + "-gem-" + index,
+      color: gemColors[gem.key] || defaultColor
+    });
+  }));
 };
 var ItemQtyContainer = /*#__PURE__*/styled__default.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__default.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__default.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:", ";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 "radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 1), transparent 20%), \n     linear-gradient(45deg, " + color + ", " + color + " 40%, rgba(255, 255, 255, 0.2))";
+}, 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;
@@ -13732,7 +13746,7 @@ var ItemSlotQty$1 = function ItemSlotQty(_ref) {
   }, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "48px"
-  }, React__default.createElement(ItemQty$1, {
+  }, React__default.createElement(ItemQty, {
     className: qtyClassName
   }, Math.round(stackQty * 100) / 100, ' ')));
 };
@@ -13740,7 +13754,7 @@ var ItemQtyContainer$1 = /*#__PURE__*/styled__default.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__default.span.withConfig({
+var ItemQty = /*#__PURE__*/styled__default.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);
@@ -13755,7 +13769,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)) {
@@ -19009,6 +19023,74 @@ var SpellList = /*#__PURE__*/styled__default.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 = React.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__default.createElement(StepperContainer, {
+    className: "stepper-container"
+  }, React__default.createElement(StepperTop, null, Array.from({
+    length: totalSteps
+  }, function (_, i) {
+    return React__default.createElement(ProgressIndicator, {
+      key: i,
+      isActive: i <= currentStep,
+      onClick: function onClick() {
+        return onStepChange(i);
+      }
+    });
+  })), React__default.createElement(StepperBody, null, currentComponent), React__default.createElement(StepperFooter, null, currentStep > 0 && React__default.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.max(0, currentStep - 1));
+    }
+  }), currentStep < totalSteps - 1 && React__default.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
+    }
+  }), currentStep === totalSteps - 1 && finalCTAButton && React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      return finalCTAButton.onClick;
+    }
+  }, finalCTAButton.label)));
+};
+var StepperContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperContainer",
+  componentId: "sc-13obf1-0"
+})(["display:flex;flex-direction:column;height:100%;"]);
+var StepperTop = /*#__PURE__*/styled__default.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__default.div.withConfig({
+  displayName: "Stepper__StepperBody",
+  componentId: "sc-13obf1-2"
+})(["flex:8;"]);
+var StepperFooter = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperFooter",
+  componentId: "sc-13obf1-3"
+})(["margin-top:1rem;flex:1;display:flex;justify-content:flex-end;"]);
+var ProgressIndicator = /*#__PURE__*/styled__default.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__default.createElement("textarea", Object.assign({}, props));
@@ -19299,7 +19381,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     }));
-  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
+  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2))), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -19495,6 +19577,7 @@ exports.SkillProgressBar = SkillProgressBar;
 exports.SkillsContainer = SkillsContainer;
 exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
+exports.Stepper = Stepper;
 exports.TextArea = TextArea;
 exports.TimeWidget = TimeWidget;
 exports.TradingMenu = TradingMenu;