@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.
@@ -7,6 +7,7 @@ interface IProps {
7
7
  height?: number;
8
8
  grayScale?: boolean;
9
9
  opacity?: number;
10
+ tintColor?: string;
10
11
  onPointerDown?: () => void;
11
12
  containerStyle?: any;
12
13
  imgStyle?: any;
@@ -610,6 +610,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
610
610
  grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
611
611
  _ref$opacity = _ref.opacity,
612
612
  opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
613
+ tintColor = _ref.tintColor,
613
614
  imgClassname = _ref.imgClassname,
614
615
  centered = _ref.centered,
615
616
  borderRadius = _ref.borderRadius;
@@ -635,7 +636,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
635
636
  opacity: opacity,
636
637
  style: imgStyle,
637
638
  centered: centered,
638
- borderRadius: borderRadius
639
+ borderRadius: borderRadius,
640
+ tintColor: tintColor
639
641
  }));
640
642
  };
641
643
  var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
@@ -651,7 +653,7 @@ var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
651
653
  var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
652
654
  displayName: "SpriteFromAtlas__ImgSprite",
653
655
  componentId: "sc-1lpani8-1"
654
- })(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";"], function (props) {
656
+ })(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";"], function (props) {
655
657
  return props.frame.w;
656
658
  }, function (props) {
657
659
  return props.frame.h;
@@ -668,11 +670,12 @@ var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
668
670
  }, function (props) {
669
671
  return props.centered ? '0' : '8px';
670
672
  }, function (props) {
671
- return props.grayScale ? 'grayscale(100%)' : 'none';
673
+ var filters = [];
674
+ if (props.grayScale) filters.push('grayscale(100%)');
675
+ if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
676
+ return filters.length ? filters.join(' ') : 'none';
672
677
  }, function (props) {
673
678
  return props.opacity;
674
- }, function (props) {
675
- return props.borderRadius ? props.borderRadius : '0';
676
679
  });
677
680
 
678
681
  var frames = {
@@ -27643,7 +27646,8 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
27643
27646
  isStackable: item.isStackable
27644
27647
  }, atlasJSON),
27645
27648
  imgScale: 3,
27646
- imgClassname: "sprite-from-atlas-img--item"
27649
+ imgClassname: "sprite-from-atlas-img--item",
27650
+ tintColor: item.tintColor
27647
27651
  }), renderStackInfo(item), renderGems(item));
27648
27652
  };
27649
27653
  var renderEquipment = function renderEquipment(itemToRender) {