@rpg-engine/long-bow 0.8.13 → 0.8.14
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.
- package/dist/long-bow.cjs.development.js +8 -7
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +8 -7
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/shared/SpriteFromAtlas.tsx +53 -14
- package/src/mocks/itemContainer.mocks.ts +46 -38
|
@@ -631,6 +631,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
|
|
|
631
631
|
return null;
|
|
632
632
|
}
|
|
633
633
|
var normalizedTintColor = toUppercaseHexColor(tintColor);
|
|
634
|
+
// For white tint, we'll use a very light gray instead
|
|
635
|
+
var effectiveTintColor = normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
|
|
634
636
|
return React__default.createElement(Container$1, {
|
|
635
637
|
width: width,
|
|
636
638
|
height: height,
|
|
@@ -647,7 +649,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
|
|
|
647
649
|
style: imgStyle,
|
|
648
650
|
centered: centered,
|
|
649
651
|
borderRadius: borderRadius,
|
|
650
|
-
tintColor:
|
|
652
|
+
tintColor: effectiveTintColor
|
|
651
653
|
}));
|
|
652
654
|
};
|
|
653
655
|
var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
|
|
@@ -663,7 +665,7 @@ var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
663
665
|
var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
|
|
664
666
|
displayName: "SpriteFromAtlas__ImgSprite",
|
|
665
667
|
componentId: "sc-1lpani8-1"
|
|
666
|
-
})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";
|
|
668
|
+
})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";opacity:", ";border-radius:", ";overflow:hidden;", " ", ""], function (props) {
|
|
667
669
|
return props.frame.w;
|
|
668
670
|
}, function (props) {
|
|
669
671
|
return props.frame.h;
|
|
@@ -679,15 +681,14 @@ var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
679
681
|
return props.centered ? '0' : '8px';
|
|
680
682
|
}, function (props) {
|
|
681
683
|
return props.centered ? '0' : '8px';
|
|
682
|
-
}, function (props) {
|
|
683
|
-
var filters = [];
|
|
684
|
-
if (props.grayScale) filters.push('grayscale(100%)');
|
|
685
|
-
if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
|
|
686
|
-
return filters.length ? filters.join(' ') : 'none';
|
|
687
684
|
}, function (props) {
|
|
688
685
|
return props.opacity;
|
|
689
686
|
}, function (props) {
|
|
690
687
|
return props.borderRadius || '0';
|
|
688
|
+
}, function (props) {
|
|
689
|
+
return props.grayScale && styled.css(["filter:grayscale(100%);"]);
|
|
690
|
+
}, function (props) {
|
|
691
|
+
return props.tintColor && styled.css(["&::before{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:multiply;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}&::after{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:soft-light;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}"], props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y, props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y);
|
|
691
692
|
});
|
|
692
693
|
|
|
693
694
|
var frames = {
|