@rpg-engine/long-bow 0.1.52 → 0.1.54

package/dist/components/DraggableContainer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface IDraggableContainerProps {
+    children: React.ReactNode;
+    width?: string;
+    height?: string;
+    className?: string;
+    title: string;
+    imgSrc?: string;
+    imgWidth: string;
+    onCloseButton: () => void;
+}
+export declare const DraggableContainer: React.FC<IDraggableContainerProps>;

package/dist/components/SimpleProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IProps {
+    value: number;
+    height?: string;
+    bgColor?: string;
+}
+export declare const SimpleProgressBar: React.FC<IProps>;
+export {};

package/dist/components/SkillProgressBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ISkillProgressBarProps {
+    value: number;
+    height: string;
+    bgColor: string;
+    titleName: string;
+    logoSrc?: string;
+}
+export declare const SkillProgressBar: React.FC<ISkillProgressBarProps>;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/Button';
-export * from './components/CheckButton';
 export * from './components/Chat/Chat';
+export * from './components/CheckButton';
+export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/Input';
 export * from './components/ListMenu';
@@ -11,6 +12,7 @@ export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
+export * from './components/SkillProgressBar';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';

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

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var styled = _interopDefault(require('styled-components'));
 var dayjs = _interopDefault(require('dayjs'));
 var reactErrorBoundary = require('react-error-boundary');
+var Draggable = _interopDefault(require('react-draggable'));
 var uuid = require('uuid');
 require('rpgui/rpgui.min.css');
 require('rpgui/rpgui.min.js');
@@ -67,51 +68,6 @@ var ButtonContainer = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-obzd3o-0"
 })(["height:45px;font-size:11.5px;"]);
 
-var CheckButton = function CheckButton(_ref) {
-  var items = _ref.items,
-      onChange = _ref.onChange;
-
-  var generateSelectedValuesList = function generateSelectedValuesList() {
-    var selectedValues = {};
-    items.forEach(function (item) {
-      selectedValues[item.label] = false;
-    });
-    return selectedValues;
-  };
-
-  var _useState = React.useState(generateSelectedValuesList()),
-      selectedValues = _useState[0],
-      setSelectedValues = _useState[1];
-
-  var handleClick = function handleClick(label) {
-    var _extends2;
-
-    setSelectedValues(_extends({}, selectedValues, (_extends2 = {}, _extends2[label] = !selectedValues[label], _extends2)));
-  };
-
-  React.useEffect(function () {
-    if (selectedValues) {
-      onChange(selectedValues);
-    }
-  }, [selectedValues]);
-  return React__default.createElement("div", {
-    id: "elemento-checkbox"
-  }, items == null ? void 0 : items.map(function (element, index) {
-    return React__default.createElement("div", {
-      key: element.label + "_" + index
-    }, React__default.createElement("input", {
-      className: "rpgui-checkbox",
-      type: "checkbox",
-      checked: selectedValues[element.label],
-      onChange: function onChange() {}
-    }), React__default.createElement("label", {
-      onClick: function onClick() {
-        return handleClick(element.label);
-      }
-    }, element.label), React__default.createElement("br", null));
-  }));
-};
-
 var colors = {
   darkGrey: '#3e3e3e'
 };
@@ -285,6 +241,100 @@ var MessageText = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-1bk05n6-5"
 })(["display:block !important;width:100%;font-size:0.7rem !important;overflow-y:auto;margin:0;"]);
 
+var CheckButton = function CheckButton(_ref) {
+  var items = _ref.items,
+      onChange = _ref.onChange;
+
+  var generateSelectedValuesList = function generateSelectedValuesList() {
+    var selectedValues = {};
+    items.forEach(function (item) {
+      selectedValues[item.label] = false;
+    });
+    return selectedValues;
+  };
+
+  var _useState = React.useState(generateSelectedValuesList()),
+      selectedValues = _useState[0],
+      setSelectedValues = _useState[1];
+
+  var handleClick = function handleClick(label) {
+    var _extends2;
+
+    setSelectedValues(_extends({}, selectedValues, (_extends2 = {}, _extends2[label] = !selectedValues[label], _extends2)));
+  };
+
+  React.useEffect(function () {
+    if (selectedValues) {
+      onChange(selectedValues);
+    }
+  }, [selectedValues]);
+  return React__default.createElement("div", {
+    id: "elemento-checkbox"
+  }, items == null ? void 0 : items.map(function (element, index) {
+    return React__default.createElement("div", {
+      key: element.label + "_" + index
+    }, React__default.createElement("input", {
+      className: "rpgui-checkbox",
+      type: "checkbox",
+      checked: selectedValues[element.label],
+      onChange: function onChange() {}
+    }), React__default.createElement("label", {
+      onClick: function onClick() {
+        return handleClick(element.label);
+      }
+    }, element.label), React__default.createElement("br", null));
+  }));
+};
+
+var DraggableContainer = function DraggableContainer(_ref) {
+  var children = _ref.children,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '50%' : _ref$width,
+      height = _ref.height,
+      className = _ref.className,
+      onCloseButton = _ref.onCloseButton,
+      title = _ref.title,
+      imgSrc = _ref.imgSrc,
+      _ref$imgWidth = _ref.imgWidth,
+      imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth;
+  return React__default.createElement(Draggable, null, React__default.createElement(Container$2, {
+    width: width,
+    height: height || 'auto',
+    className: "rpgui-container framed-grey " + className + " rpgui-draggable"
+  }, imgSrc ? React__default.createElement(Icon, {
+    src: imgSrc,
+    width: imgWidth
+  }) : React__default.createElement(Icon, {
+    width: imgWidth
+  }), React__default.createElement(Title, null, title), onCloseButton && React__default.createElement(CloseButton$1, {
+    onClick: onCloseButton,
+    onTouchStart: onCloseButton
+  }, "X"), children));
+};
+var Container$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__Container",
+  componentId: "sc-184mpyl-0"
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
+  return props.height;
+}, function (_ref2) {
+  var width = _ref2.width;
+  return width;
+});
+var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__CloseButton",
+  componentId: "sc-184mpyl-1"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:10px;"]);
+var Title = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__Title",
+  componentId: "sc-184mpyl-2"
+})(["position:absolute;top:3px;right:50%;color:white;z-index:22;font-size:10px;"]);
+var Icon = /*#__PURE__*/styled.img.withConfig({
+  displayName: "DraggableContainer__Icon",
+  componentId: "sc-184mpyl-3"
+})(["position:absolute;top:3px;left:0px;color:white;z-index:22;font-size:10px;width:", ";"], function (props) {
+  return props.width;
+});
+
 var _RPGUI = RPGUI;
 var RPGUIRoot = function RPGUIRoot(_ref) {
   var children = _ref.children;
@@ -339,7 +389,7 @@ var ListMenu = function ListMenu(_ref) {
       y = _ref.y,
       _ref$fontSize = _ref.fontSize,
       fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
-  return React__default.createElement(Container$2, {
+  return React__default.createElement(Container$3, {
     x: x,
     y: y,
     fontSize: fontSize
@@ -357,7 +407,7 @@ var ListMenu = function ListMenu(_ref) {
     }, params.text);
   })));
 };
-var Container$2 = /*#__PURE__*/styled.div.withConfig({
+var Container$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", "em;}"], function (props) {
@@ -453,13 +503,13 @@ var NPCDialogText = function NPCDialogText(_ref) {
       return document.removeEventListener('keydown', onHandleSpacePress);
     };
   }, [chunkIndex]);
-  return React__default.createElement(Container$3, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$4, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
 };
-var Container$3 = /*#__PURE__*/styled.div.withConfig({
+var Container$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -631,7 +681,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     });
   };
 
-  return React__default.createElement(Container$4, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$5, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -641,7 +691,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$4 = /*#__PURE__*/styled.div.withConfig({
+var Container$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -705,7 +755,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$5, null, React__default.createElement(TextContainer$1, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$6, null, React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -727,7 +777,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: img$1
   })));
 };
-var Container$5 = /*#__PURE__*/styled.div.withConfig({
+var Container$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -774,7 +824,7 @@ var ProgressBar = function ProgressBar(_ref) {
     return value * 100 / max;
   };
 
-  return React__default.createElement(Container$6, {
+  return React__default.createElement(Container$7, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -803,7 +853,7 @@ var TextOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
+var Container$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -903,6 +953,76 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
+const img$2 = require('./imgExp.png');
+
+var SimpleProgressBar = function SimpleProgressBar(_ref) {
+  var value = _ref.value,
+      _ref$bgColor = _ref.bgColor,
+      bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor;
+  return React__default.createElement(Container$8, null, React__default.createElement(ProgressBarContainer, null, React__default.createElement(BackgroundBar, null, React__default.createElement(Progress, {
+    value: value,
+    bgColor: bgColor
+  }))));
+};
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleProgressBar__Container",
+  componentId: "sc-mbeil3-0"
+})(["display:flex;justify-content:center;align-items:center;width:100%;"]);
+var BackgroundBar = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleProgressBar__BackgroundBar",
+  componentId: "sc-mbeil3-1"
+})(["background-color:rgba(0,0,0,0.075);"]);
+var Progress = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleProgressBar__Progress",
+  componentId: "sc-mbeil3-2"
+})(["background-color:", ";width:", "%;"], function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.value;
+});
+var ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleProgressBar__ProgressBarContainer",
+  componentId: "sc-mbeil3-3"
+})(["border-radius:60px;border:1px solid #282424;overflow:hidden;width:100%;span{display:block;height:100%;}height:8px;"]);
+
+var SkillProgressBar = function SkillProgressBar(_ref) {
+  var value = _ref.value,
+      bgColor = _ref.bgColor,
+      titleName = _ref.titleName,
+      _ref$logoSrc = _ref.logoSrc,
+      logoSrc = _ref$logoSrc === void 0 ? img$2 : _ref$logoSrc;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, React__default.createElement(TitleName, null, titleName), React__default.createElement(ValueDisplay, null, value)), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, React__default.createElement(Icon$1, {
+    src: logoSrc
+  })), React__default.createElement(SimpleProgressBar, {
+    value: value,
+    bgColor: bgColor
+  })));
+};
+var TitleName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__TitleName",
+  componentId: "sc-5vuroc-0"
+})(["margin-left:5px;"]);
+var ValueDisplay = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__ValueDisplay",
+  componentId: "sc-5vuroc-1"
+})([""]);
+var ProgressIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressIconContainer",
+  componentId: "sc-5vuroc-2"
+})(["display:flex;justify-content:center;align-items:center;"]);
+var ProgressBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressBody",
+  componentId: "sc-5vuroc-3"
+})(["display:flex;flex-direction:row;"]);
+var ProgressTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressTitle",
+  componentId: "sc-5vuroc-4"
+})(["width:100%;display:flex;flex-direction:row;justify-content:space-between;span{font-size:0.6rem;}"]);
+var Icon$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "SkillProgressBar__Icon",
+  componentId: "sc-5vuroc-5"
+})(["margin-right:10px;height:30px;"]);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, _ref);
 
@@ -914,11 +1034,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       children = _ref.children;
-  return React__default.createElement(Container$7, {
+  return React__default.createElement(Container$9, {
     maxLines: maxLines
   }, children);
 };
-var Container$7 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -928,6 +1048,7 @@ var Container$7 = /*#__PURE__*/styled.div.withConfig({
 exports.Button = Button;
 exports.Chat = Chat;
 exports.CheckButton = CheckButton;
+exports.DraggableContainer = DraggableContainer;
 exports.Dropdown = Dropdown;
 exports.DynamicText = DynamicText;
 exports.Input = Input;
@@ -939,6 +1060,7 @@ exports.QuestionDialog = QuestionDialog;
 exports.RPGUIContainer = RPGUIContainer;
 exports.RPGUIRoot = RPGUIRoot;
 exports.RangeSlider = RangeSlider;
+exports.SkillProgressBar = SkillProgressBar;
 exports.TextArea = TextArea;
 exports.Truncate = Truncate;
 exports._RPGUI = _RPGUI;