@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
package/dist/long-bow.esm.js
CHANGED
|
@@ -623,6 +623,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
|
|
|
623
623
|
return null;
|
|
624
624
|
}
|
|
625
625
|
var normalizedTintColor = toUppercaseHexColor(tintColor);
|
|
626
|
+
// For white tint, we'll use a very light gray instead
|
|
627
|
+
var effectiveTintColor = normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
|
|
626
628
|
return React.createElement(Container$1, {
|
|
627
629
|
width: width,
|
|
628
630
|
height: height,
|
|
@@ -639,7 +641,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
|
|
|
639
641
|
style: imgStyle,
|
|
640
642
|
centered: centered,
|
|
641
643
|
borderRadius: borderRadius,
|
|
642
|
-
tintColor:
|
|
644
|
+
tintColor: effectiveTintColor
|
|
643
645
|
}));
|
|
644
646
|
};
|
|
645
647
|
var Container$1 = /*#__PURE__*/styled.div.withConfig({
|
|
@@ -655,7 +657,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
|
|
|
655
657
|
var ImgSprite = /*#__PURE__*/styled.div.withConfig({
|
|
656
658
|
displayName: "SpriteFromAtlas__ImgSprite",
|
|
657
659
|
componentId: "sc-1lpani8-1"
|
|
658
|
-
})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";
|
|
660
|
+
})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";opacity:", ";border-radius:", ";overflow:hidden;", " ", ""], function (props) {
|
|
659
661
|
return props.frame.w;
|
|
660
662
|
}, function (props) {
|
|
661
663
|
return props.frame.h;
|
|
@@ -671,15 +673,14 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
|
|
|
671
673
|
return props.centered ? '0' : '8px';
|
|
672
674
|
}, function (props) {
|
|
673
675
|
return props.centered ? '0' : '8px';
|
|
674
|
-
}, function (props) {
|
|
675
|
-
var filters = [];
|
|
676
|
-
if (props.grayScale) filters.push('grayscale(100%)');
|
|
677
|
-
if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
|
|
678
|
-
return filters.length ? filters.join(' ') : 'none';
|
|
679
676
|
}, function (props) {
|
|
680
677
|
return props.opacity;
|
|
681
678
|
}, function (props) {
|
|
682
679
|
return props.borderRadius || '0';
|
|
680
|
+
}, function (props) {
|
|
681
|
+
return props.grayScale && css(["filter:grayscale(100%);"]);
|
|
682
|
+
}, function (props) {
|
|
683
|
+
return props.tintColor && 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);
|
|
683
684
|
});
|
|
684
685
|
|
|
685
686
|
var frames = {
|