@rpg-engine/long-bow 0.5.3 → 0.5.5
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/components/ImageCarousel/ImageCarousel.d.ts +1 -0
- package/dist/long-bow.cjs.development.js +19 -10
- 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 +19 -10
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ImageCarousel/ImageCarousel.tsx +23 -1
- package/src/components/shared/SpriteFromAtlas.tsx +2 -1
package/package.json
CHANGED
|
@@ -14,11 +14,13 @@ export interface ITextImageProps {
|
|
|
14
14
|
export interface IImageCarouselProps {
|
|
15
15
|
textImage: ITextImageProps[];
|
|
16
16
|
isTextFixed: boolean;
|
|
17
|
+
onCloseButton?: () => void;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
export const ImageCarousel: React.FC<IImageCarouselProps> = ({
|
|
20
21
|
textImage,
|
|
21
22
|
isTextFixed,
|
|
23
|
+
onCloseButton,
|
|
22
24
|
}) => {
|
|
23
25
|
const [textImageSelected, setTextImageSelected] = useState(textImage[0]);
|
|
24
26
|
|
|
@@ -94,6 +96,11 @@ export const ImageCarousel: React.FC<IImageCarouselProps> = ({
|
|
|
94
96
|
</ArrowContainer>
|
|
95
97
|
</BackgroundImage>
|
|
96
98
|
)}
|
|
99
|
+
{onCloseButton && (
|
|
100
|
+
<CloseButton className="container-close" onPointerDown={onCloseButton}>
|
|
101
|
+
X
|
|
102
|
+
</CloseButton>
|
|
103
|
+
)}
|
|
97
104
|
</CarouselWrapper>
|
|
98
105
|
);
|
|
99
106
|
};
|
|
@@ -123,10 +130,12 @@ const BackgroundImage = styled.div<IBackgroundImage>`
|
|
|
123
130
|
background-image: url(${props => props.imagePath});
|
|
124
131
|
background-repeat: no-repeat;
|
|
125
132
|
background-attachment: fixed;
|
|
126
|
-
background-size:
|
|
133
|
+
background-size: contain;
|
|
134
|
+
background-position: center;
|
|
127
135
|
width: 100%;
|
|
128
136
|
height: ${props => (props.isTextFixed ? '80%' : '100%')};
|
|
129
137
|
`;
|
|
138
|
+
|
|
130
139
|
const Description = styled.div<ITextDescription>`
|
|
131
140
|
width: 100%;
|
|
132
141
|
height: ${props => (props.isTextFixed ? 'auto' : '100%')};
|
|
@@ -140,3 +149,16 @@ const Description = styled.div<ITextDescription>`
|
|
|
140
149
|
height: auto;
|
|
141
150
|
}
|
|
142
151
|
`;
|
|
152
|
+
|
|
153
|
+
const CloseButton = styled.div`
|
|
154
|
+
position: absolute;
|
|
155
|
+
top: 3px;
|
|
156
|
+
right: 0px;
|
|
157
|
+
color: white;
|
|
158
|
+
z-index: 22;
|
|
159
|
+
font-size: 1.5rem;
|
|
160
|
+
@media (max-width: 950px) {
|
|
161
|
+
font-size: 1.7rem;
|
|
162
|
+
padding: 12px;
|
|
163
|
+
}
|
|
164
|
+
`;
|
|
@@ -39,7 +39,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
|
|
|
39
39
|
//!Due to React's limitations, we cannot import it from the public folder directly!
|
|
40
40
|
|
|
41
41
|
const spriteData =
|
|
42
|
-
atlasJSON
|
|
42
|
+
atlasJSON?.frames?.[spriteKey] ||
|
|
43
|
+
atlasJSON?.frames?.['others/no-image.png'];
|
|
43
44
|
|
|
44
45
|
if (!spriteData) throw new Error(`Sprite ${spriteKey} not found in atlas!`);
|
|
45
46
|
|