@rpg-engine/long-bow 0.6.0 → 0.6.2

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

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

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

@@ -13665,6 +13665,62 @@ var rarityColor = function rarityColor(item) {
   }
 };
 
+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, {
+      item: item
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty = function ItemSlotQty(_ref) {
+  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"
+  }, (_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: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"
+})(["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;
   var isLargerThan999 = stackQty > 999;
@@ -13672,7 +13728,7 @@ var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
   if (isLargerThan999) qtyClassName = 'small';
   if (isFractionalStackQty) qtyClassName = 'xsmall';
   if (stackQty > 1) {
-    return React__default.createElement(ItemSlotQty, {
+    return React__default.createElement(ItemSlotQty$1, {
       itemId: itemId,
       stackQty: stackQty,
       qtyClassName: qtyClassName
@@ -13680,11 +13736,11 @@ var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
   }
   return undefined;
 };
-var ItemSlotQty = function ItemSlotQty(_ref) {
+var ItemSlotQty$1 = function ItemSlotQty(_ref) {
   var itemId = _ref.itemId,
     stackQty = _ref.stackQty,
     qtyClassName = _ref.qtyClassName;
-  return React__default.createElement(ItemQtyContainer, {
+  return React__default.createElement(ItemQtyContainer$1, {
     key: "qty-" + itemId,
     className: "item-slot-qty"
   }, React__default.createElement(Ellipsis, {
@@ -13694,7 +13750,7 @@ var ItemSlotQty = function ItemSlotQty(_ref) {
     className: qtyClassName
   }, Math.round(stackQty * 100) / 100, ' ')));
 };
-var ItemQtyContainer = /*#__PURE__*/styled__default.div.withConfig({
+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;"]);
@@ -13709,8 +13765,13 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
     atlasIMG = _ref.atlasIMG,
     slotSpriteMask = _ref.slotSpriteMask,
     item = _ref.item;
+  var renderStackInfo = function renderStackInfo(item) {
+    return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
+  };
+  var renderGems = function renderGems(item) {
+    return item.attachedGems && onRenderGems(item);
+  };
   var renderItem = function renderItem(item) {
-    var _item$stackQty;
     if (!(item != null && item.texturePath)) {
       return null;
     }
@@ -13727,7 +13788,7 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
       }, atlasJSON),
       imgScale: 3,
       imgClassname: "sprite-from-atlas-img--item"
-    }), onRenderStackInfo(item._id, (_item$stackQty = item.stackQty) != null ? _item$stackQty : 0));
+    }), renderStackInfo(item), renderGems(item));
   };
   var renderEquipment = function renderEquipment(itemToRender) {
     var _itemToRender$allowed;