@rpg-engine/long-bow 0.2.16 → 0.2.18

package/dist/components/RPGUIForceRenderStart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IProps {
+    elementDOMId: string;
+    elementRenderedDOMKey: string;
+    children: React.ReactNode;
+    RPGUICreateFunction: 'dropdown' | 'slider' | 'checkbox' | 'draggable' | 'progress' | 'radio' | 'list';
+}
+export declare const RPGUIForceRenderStart: React.FC<IProps>;
+export {};

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
 export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
+export * from './components/QuestList';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';

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

@@ -20841,6 +20841,36 @@ var RPGUIRoot = function RPGUIRoot(_ref) {
   }, children);
 };
 
+var RPGUIForceRenderStart = function RPGUIForceRenderStart(_ref) {
+  var children = _ref.children,
+      elementDOMId = _ref.elementDOMId,
+      elementRenderedDOMKey = _ref.elementRenderedDOMKey,
+      RPGUICreateFunction = _ref.RPGUICreateFunction;
+
+  var _useState = React.useState(false),
+      isRendered = _useState[0],
+      setIsRendered = _useState[1];
+
+  React.useEffect(function () {
+    if (_RPGUI) {
+      var element = document.getElementById(elementDOMId); // create an interval to wait for the element to be rendered
+      // if it's not, trigger the rendering forcefully
+
+      var interval = setInterval(function () {
+        var dropdown = document.querySelector(elementRenderedDOMKey);
+
+        if (!dropdown && !isRendered) {
+          _RPGUI.__create_funcs[RPGUICreateFunction](element);
+
+          setIsRendered(true);
+          clearInterval(interval);
+        }
+      }, 10);
+    }
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, children);
+};
+
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,
       width = _ref.width,
@@ -20866,7 +20896,11 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement("select", {
+  return React__default.createElement(RPGUIForceRenderStart, {
+    elementDOMId: "rpgui-dropdown-" + dropdownId,
+    elementRenderedDOMKey: '[data-rpguitype="dropdown"]',
+    RPGUICreateFunction: "dropdown"
+  }, React__default.createElement("select", {
     id: "rpgui-dropdown-" + dropdownId,
     style: {
       width: width
@@ -20877,7 +20911,7 @@ var Dropdown = function Dropdown(_ref) {
       key: option.id,
       value: option.value
     }, option.option);
-  }));
+  })));
 };
 
 var frames$1 = {
@@ -27441,7 +27475,7 @@ var EquipmentSlotSpriteByType = {
   Feet: 'boots/iron-boots.png',
   Inventory: 'containers/bag.png',
   RightHand: 'shields/plate-shield.png',
-  Accessory: 'gloves/plate-gloves.png'
+  Accessory: 'ranged-weapons/arrow.png'
 };
 var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
   var slotIndex = _ref.slotIndex,
@@ -28366,6 +28400,49 @@ var RightArrow$1 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15s2boc-10"
 })(["background-image:url(", ");right:0;position:absolute;width:40px;background-size:100% 100%;height:42px;:active{background-image:url(", ");}"], img$4, img$3);
 
+var QuestList = function QuestList(_ref) {
+  var quests = _ref.quests,
+      onClose = _ref.onClose;
+  return React__default.createElement(QuestDraggableContainer$1, {
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "520px"
+  }, React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement(Title$2, null, "Quests"), React__default.createElement("hr", {
+    className: "golden"
+  }), React__default.createElement(QuestListContainer, null, quests.map(function (quest, i) {
+    return React__default.createElement("div", {
+      className: "quest-item",
+      key: i
+    }, React__default.createElement("span", {
+      className: "quest-number"
+    }, i + 1), React__default.createElement("div", {
+      className: "quest-detail"
+    }, React__default.createElement("p", {
+      className: "quest-detail__title"
+    }, quest.title), React__default.createElement("p", {
+      className: "quest-detail__description"
+    }, quest.description)));
+  }))));
+};
+var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConfig({
+  displayName: "QuestList__QuestDraggableContainer",
+  componentId: "sc-1a2vx6q-0"
+})([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
+var Title$2 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "QuestList__Title",
+  componentId: "sc-1a2vx6q-1"
+})(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
+var QuestListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestList__QuestListContainer",
+  componentId: "sc-1a2vx6q-2"
+})(["margin-top:20px;margin-bottom:40px;overflow-y:auto;max-height:400px;.quest-item{display:flex;align-items:flex-start;margin-bottom:12px;}.quest-number{border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:16px;background-color:brown;flex-shrink:0;}.quest-number.completed{background-color:yellow;}p{margin:0;}.quest-detail__title{color:yellow;}.quest-detail__description{margin-top:5px;}"]);
+
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
       items = _ref.items,
@@ -28414,18 +28491,6 @@ var RangeSlider = function RangeSlider(_ref) {
       onChange = _ref.onChange;
   var sliderId = uuid.v4();
 
-  var _useState = React.useState(false),
-      wasMouseDownFirst = _useState[0],
-      setWasMouseDownFirst = _useState[1];
-
-  useEventListener('mouseup', function () {
-    if (wasMouseDownFirst) {
-      onHandleMouseUp();
-    }
-
-    setWasMouseDownFirst(false);
-  });
-
   var onHandleMouseUp = function onHandleMouseUp() {
     var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
 
@@ -28434,11 +28499,12 @@ var RangeSlider = function RangeSlider(_ref) {
     onChange(Number(value));
   };
 
-  return React__default.createElement("div", {
-    onMouseUp: onHandleMouseUp,
-    onMouseDown: function onMouseDown() {
-      return setWasMouseDownFirst(true);
-    }
+  return React__default.createElement(RPGUIForceRenderStart, {
+    elementDOMId: "rpgui-slider-" + sliderId,
+    elementRenderedDOMKey: "[data-rpguitype='slider']",
+    RPGUICreateFunction: "slider"
+  }, React__default.createElement("div", {
+    onMouseUp: onHandleMouseUp
   }, React__default.createElement(Input$1, {
     className: type === exports.RangeSliderType.Slider ? exports.RangeSliderType.Slider : exports.RangeSliderType.GoldSlider,
     type: "range",
@@ -28448,7 +28514,7 @@ var RangeSlider = function RangeSlider(_ref) {
     min: valueMin,
     max: valueMax,
     id: "rpgui-slider-" + sliderId
-  }));
+  })));
 };
 var Input$1 = /*#__PURE__*/styled.input.withConfig({
   displayName: "RangeSlider__Input",
@@ -28846,6 +28912,7 @@ exports.NPCMultiDialog = NPCMultiDialog;
 exports.ProgressBar = ProgressBar;
 exports.PropertySelect = PropertySelect;
 exports.QuestInfo = QuestInfo;
+exports.QuestList = QuestList;
 exports.QuestionDialog = QuestionDialog;
 exports.RPGUIContainer = RPGUIContainer;
 exports.RPGUIRoot = RPGUIRoot;