@rpg-engine/long-bow 0.4.97 → 0.4.98

package/dist/components/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ITextImageProps {
+    image: string;
+    textPosition?: 'flex-start' | 'flex-end';
+    text: string;
+}
+export interface IImageCarouselProps {
+    textImage: ITextImageProps[];
+    isTextFixed: boolean;
+}
+export declare const ImageCarousel: React.FC<IImageCarouselProps>;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
 export * from './components/HistoryDialog';
+export * from './components/ImageCarousel/ImageCarousel';
 export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';

package/dist/long-bow.cjs.development.js

@@ -15139,6 +15139,92 @@ var DialogContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-u6oe75-1"
 })(["display:flex;justify-content:center;padding-top:200px;"]);
 
+var ImageCarousel = function ImageCarousel(_ref) {
+  var _textImageSelected$te, _textImageSelected$te2;
+  var textImage = _ref.textImage,
+    isTextFixed = _ref.isTextFixed;
+  var _useState = React.useState(textImage[0]),
+    textImageSelected = _useState[0],
+    setTextImageSelected = _useState[1];
+  var goToPreviousImage = function goToPreviousImage() {
+    var currentIndex = textImage.indexOf(textImageSelected);
+    if (currentIndex > 0) {
+      setTextImageSelected(textImage[currentIndex - 1]);
+    }
+  };
+  var goToNextImage = function goToNextImage() {
+    var currentIndex = textImage.indexOf(textImageSelected);
+    if (currentIndex < textImage.length - 1) {
+      setTextImageSelected(textImage[currentIndex + 1]);
+    }
+  };
+  return React__default.createElement(CarouselWrapper, {
+    type: exports.RPGUIContainerTypes.Framed
+  }, isTextFixed ? React__default.createElement(React__default.Fragment, null, React__default.createElement(BackgroundImage, {
+    imagePath: textImageSelected.image,
+    isTextFixed: isTextFixed
+  }, React__default.createElement(ArrowContainer, null, textImageSelected !== textImage[0] && React__default.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      return goToPreviousImage();
+    }
+  }), textImageSelected !== textImage[textImage.length - 1] && React__default.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      return goToNextImage();
+    }
+  }))), React__default.createElement(Description$1, {
+    textPosition: (_textImageSelected$te = textImageSelected.textPosition) != null ? _textImageSelected$te : 'flex-start',
+    isTextFixed: isTextFixed
+  }, React__default.createElement(DynamicText, {
+    text: textImageSelected.text
+  }))) : React__default.createElement(BackgroundImage, {
+    imagePath: textImageSelected.image,
+    isTextFixed: isTextFixed
+  }, React__default.createElement(ArrowContainer, null, textImageSelected !== textImage[0] && React__default.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      return goToPreviousImage();
+    }
+  }), React__default.createElement(Description$1, {
+    textPosition: (_textImageSelected$te2 = textImageSelected.textPosition) != null ? _textImageSelected$te2 : 'flex-start',
+    isTextFixed: isTextFixed
+  }, React__default.createElement(DynamicText, {
+    text: textImageSelected.text
+  })), textImageSelected !== textImage[textImage.length - 1] && React__default.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      return goToNextImage();
+    }
+  }))));
+};
+var CarouselWrapper = /*#__PURE__*/styled(DraggableContainer).withConfig({
+  displayName: "ImageCarousel__CarouselWrapper",
+  componentId: "sc-jl6f8-0"
+})(["width:100%;height:100%;"]);
+var ArrowContainer = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ImageCarousel__ArrowContainer",
+  componentId: "sc-jl6f8-1"
+})(["display:flex;height:100%;align-items:center;"]);
+var BackgroundImage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ImageCarousel__BackgroundImage",
+  componentId: "sc-jl6f8-2"
+})(["background-image:url(", ");background-repeat:no-repeat;background-attachment:fixed;background-size:cover;width:100%;height:", ";"], function (props) {
+  return props.imagePath;
+}, function (props) {
+  return props.isTextFixed ? '80%' : '100%';
+});
+var Description$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ImageCarousel__Description",
+  componentId: "sc-jl6f8-3"
+})(["width:100%;height:", ";display:flex;align-items:", ";p{background-color:", ";border-radius:5px;text-align:justify;height:auto;}"], function (props) {
+  return props.isTextFixed ? 'auto' : '100%';
+}, function (props) {
+  return props.textPosition;
+}, function (props) {
+  return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
+});
+
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -17302,7 +17388,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "label"
   }, "Required Item:"), React__default.createElement("div", {
     className: "value"
-  }, requiredItem))), React__default.createElement(Description$1, null, description));
+  }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
 var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
@@ -17316,7 +17402,7 @@ var Type$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Type",
   componentId: "sc-4hbw3q-2"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
-var Description$1 = /*#__PURE__*/styled.div.withConfig({
+var Description$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
@@ -17492,7 +17578,7 @@ var Spell = function Spell(_ref) {
     return word[0];
   })), React__default.createElement(Info, null, React__default.createElement(Title$a, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React__default.createElement(Description$2, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
+  }, "(", magicWords, ")")), React__default.createElement(Description$3, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
@@ -17515,7 +17601,7 @@ var Title$a = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$2 = /*#__PURE__*/styled.div.withConfig({
+var Description$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -18020,6 +18106,7 @@ exports.EquipmentSet = EquipmentSet;
 exports.EquipmentSlotSpriteByType = EquipmentSlotSpriteByType;
 exports.ErrorBoundary = ErrorBoundary;
 exports.HistoryDialog = HistoryDialog;
+exports.ImageCarousel = ImageCarousel;
 exports.Input = Input;
 exports.InputRadio = InputRadio$1;
 exports.ItemContainer = ItemContainer$1;