@rpg-engine/long-bow 0.8.8 → 0.8.9

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.
Files changed (8) hide show
  1. package/dist/long-bow.cjs.development.js +7 -2
  2. package/dist/long-bow.cjs.development.js.map +1 -1
  3. package/dist/long-bow.cjs.production.min.js +1 -1
  4. package/dist/long-bow.cjs.production.min.js.map +1 -1
  5. package/dist/long-bow.esm.js +7 -2
  6. package/dist/long-bow.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/shared/SpriteFromAtlas.tsx +50 -56
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpg-engine/long-bow",
3
- "version": "0.8.8",
3
+ "version": "0.8.9",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/shared/SpriteFromAtlas.tsx CHANGED
@@ -37,42 +37,43 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
37
37
  centered,
38
38
  borderRadius,
39
39
  }) => {
40
- //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
41
- //!Due to React's limitations, we cannot import it from the public folder directly!
42
- const spriteData =
43
- atlasJSON?.frames?.[spriteKey] ||
44
- atlasJSON?.frames?.['others/no-image.png'];
40
+ //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
41
+ //!Due to React's limitations, we cannot import it from the public folder directly!
45
42
 
46
- if (!spriteData) {
47
- console.error(
48
- `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
49
- );
50
- return null;
51
- }
43
+ const spriteData =
44
+ atlasJSON?.frames?.[spriteKey] ||
45
+ atlasJSON?.frames?.['others/no-image.png'];
52
46
 
53
- return (
54
- <Container
55
- width={width}
56
- height={height}
57
- hasHover={grayScale}
58
- onPointerDown={onPointerDown}
59
- style={containerStyle}
60
- >
61
- <ImgSprite
62
- className={`sprite-from-atlas-img ${imgClassname || ''}`}
63
- atlasIMG={atlasIMG}
64
- frame={spriteData.frame}
65
- scale={imgScale}
66
- grayScale={grayScale}
67
- opacity={opacity}
68
- style={imgStyle}
69
- centered={centered}
70
- borderRadius={borderRadius}
71
- tintColor={tintColor}
72
- />
73
- </Container>
74
- );
75
- };
47
+ if (!spriteData) {
48
+ console.error(
49
+ `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
50
+ );
51
+ return null;
52
+ }
53
+
54
+ return (
55
+ <Container
56
+ width={width}
57
+ height={height}
58
+ hasHover={grayScale}
59
+ onPointerDown={onPointerDown}
60
+ style={containerStyle}
61
+ >
62
+ <ImgSprite
63
+ className={`sprite-from-atlas-img ${imgClassname || ''}`}
64
+ atlasIMG={atlasIMG}
65
+ frame={spriteData.frame}
66
+ scale={imgScale}
67
+ grayScale={grayScale}
68
+ opacity={opacity}
69
+ style={imgStyle}
70
+ centered={centered}
71
+ borderRadius={borderRadius}
72
+ tintColor={tintColor}
73
+ />
74
+ </Container>
75
+ );
76
+ };
76
77
 
77
78
  interface IImgSpriteProps {
78
79
  atlasIMG: any;
@@ -111,30 +112,23 @@ const ImgSprite = styled.div<IImgSpriteProps>`
111
112
  width: ${props => props.frame.w}px;
112
113
  height: ${props => props.frame.h}px;
113
114
  background-image: url(${props => props.atlasIMG});
114
- background-position: -${props => props.frame.x}px -${props =>
115
- props.frame.y}px;
115
+ background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
116
116
  transform: scale(${props => props.scale});
117
117
  position: relative;
118
118
  top: ${props => (props.centered ? '0' : '8px')};
119
119
  left: ${props => (props.centered ? '0' : '8px')};
120
- ${props =>
121
- props.tintColor &&
122
- `
123
- &::after {
124
- content: '';
125
- position: absolute;
126
- top: 0;
127
- left: 0;
128
- width: ${props.frame.w}px;
129
- height: ${props.frame.h}px;
130
- background-color: ${props.tintColor};
131
- mask-image: url(${props.atlasIMG});
132
- mask-position: -${props.frame.x}px -${props.frame.y}px;
133
- -webkit-mask-image: url(${props.atlasIMG});
134
- -webkit-mask-position: -${props.frame.x}px -${props.frame.y}px;
135
- mix-blend-mode: color;
136
- ${props.grayScale ? 'filter: grayscale(100%);' : 'none'}
137
- }
138
- `}
120
+ filter: ${props => {
121
+ const filters = [];
122
+ if (props.grayScale) filters.push('grayscale(100%)');
123
+ if (props.tintColor)
124
+ filters.push(
125
+ `brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(${
126
+ props.tintColor === '#FFD700' ? '40deg' : '210deg'
127
+ }) saturate(400%)`
128
+ );
129
+ return filters.length ? filters.join(' ') : 'none';
130
+ }};
139
131
  opacity: ${props => props.opacity};
140
- `;
132
+ border-radius: ${props => props.borderRadius || '0'};
133
+ overflow: hidden;
134
+ `;