@rpg-engine/long-bow 0.8.6 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -602,6 +602,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
602
602
  grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
603
603
  _ref$opacity = _ref.opacity,
604
604
  opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
605
+ tintColor = _ref.tintColor,
605
606
  imgClassname = _ref.imgClassname,
606
607
  centered = _ref.centered,
607
608
  borderRadius = _ref.borderRadius;
@@ -627,7 +628,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
627
628
  opacity: opacity,
628
629
  style: imgStyle,
629
630
  centered: centered,
630
- borderRadius: borderRadius
631
+ borderRadius: borderRadius,
632
+ tintColor: tintColor
631
633
  }));
632
634
  };
633
635
  var Container$1 = /*#__PURE__*/styled.div.withConfig({
@@ -643,7 +645,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
643
645
  var ImgSprite = /*#__PURE__*/styled.div.withConfig({
644
646
  displayName: "SpriteFromAtlas__ImgSprite",
645
647
  componentId: "sc-1lpani8-1"
646
- })(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";"], function (props) {
648
+ })(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";"], function (props) {
647
649
  return props.frame.w;
648
650
  }, function (props) {
649
651
  return props.frame.h;
@@ -660,11 +662,12 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
660
662
  }, function (props) {
661
663
  return props.centered ? '0' : '8px';
662
664
  }, function (props) {
663
- return props.grayScale ? 'grayscale(100%)' : 'none';
665
+ var filters = [];
666
+ if (props.grayScale) filters.push('grayscale(100%)');
667
+ if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
668
+ return filters.length ? filters.join(' ') : 'none';
664
669
  }, function (props) {
665
670
  return props.opacity;
666
- }, function (props) {
667
- return props.borderRadius ? props.borderRadius : '0';
668
671
  });
669
672
 
670
673
  var frames = {
@@ -27636,7 +27639,8 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
27636
27639
  isStackable: item.isStackable
27637
27640
  }, atlasJSON),
27638
27641
  imgScale: 3,
27639
- imgClassname: "sprite-from-atlas-img--item"
27642
+ imgClassname: "sprite-from-atlas-img--item",
27643
+ tintColor: item.tintColor
27640
27644
  }), renderStackInfo(item), renderGems(item));
27641
27645
  };
27642
27646
  var renderEquipment = function renderEquipment(itemToRender) {