@rpg-engine/long-bow 0.2.61 → 0.2.63

package/dist/long-bow.esm.js

@@ -27264,7 +27264,7 @@ var Dropdown = function Dropdown(_ref) {
     setOpened = _useState3[1];
   useEffect(function () {
     var firstOption = options[0];
-    if (firstOption) {
+    if (firstOption && !selectedValue) {
       setSelectedValue(firstOption.value);
       setSelectedOption(firstOption.option);
     }
@@ -27765,7 +27765,20 @@ var NPCDialogText = function NPCDialogText(_ref) {
     onClose = _ref.onClose,
     onEndStep = _ref.onEndStep,
     onStartStep = _ref.onStartStep;
-  var textChunks = chunkString(text, 85);
+  var windowSize = useRef([window.innerWidth, window.innerHeight]);
+  function maxCharacters(width) {
+    // Set the font size to 16 pixels
+    var fontSize = 11.2;
+    // Calculate the number of characters that can fit in one line
+    var charactersPerLine = Math.floor(width / 2 / fontSize);
+    // Calculate the number of lines that can fit in the div
+    var linesPerDiv = Math.floor(180 / fontSize);
+    // Calculate the maximum number of characters that can fit in the div
+    var maxCharacters = charactersPerLine * linesPerDiv;
+    // Return the maximum number of characters
+    return Math.round(maxCharacters / 5);
+  }
+  var textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
   var _useState = useState(0),
     chunkIndex = _useState[0],
     setChunkIndex = _useState[1];
@@ -28308,6 +28321,92 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15y5p9l-0"
 })(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
 
+var ItemSelector = function ItemSelector(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    options = _ref.options,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useState = useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+  useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$1, null, 'Harvesting instruments'), React.createElement(Subtitle, null, 'Use the tool, you need it'), React.createElement("hr", {
+    className: "golden"
+  })), React.createElement(RadioInputScroller, null, options == null ? void 0 : options.map(function (option, index) {
+    return React.createElement(RadioOptionsWrapper, {
+      key: index
+    }, React.createElement(SpriteAtlasWrapper, null, React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React.createElement("div", null, React.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React.createElement("label", {
+      onClick: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, option.name, " ", React.createElement("br", null), option.description)));
+  })), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Select")));
+};
+var Title$1 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Title",
+  componentId: "sc-gptoxp-0"
+})(["font-size:0.6rem;color:yellow !important;"]);
+var Subtitle = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Subtitle",
+  componentId: "sc-gptoxp-1"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioInputScroller",
+  componentId: "sc-gptoxp-2"
+})(["width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
+var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__SpriteAtlasWrapper",
+  componentId: "sc-gptoxp-3"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioOptionsWrapper",
+  componentId: "sc-gptoxp-4"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__ButtonWrapper",
+  componentId: "sc-gptoxp-5"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -28443,7 +28542,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onTouchStart: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$1, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$2, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -28462,7 +28561,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$1, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$2, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -28509,7 +28608,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-15s2boc-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$1 = /*#__PURE__*/styled.h1.withConfig({
+var Title$2 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -28531,7 +28630,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$2, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$3, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -28552,7 +28651,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
   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({
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -28641,6 +28740,26 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
+var ServerSelection = function ServerSelection(_ref) {
+  var onChange = _ref.onChange,
+    servers = _ref.servers,
+    details = _ref.details;
+  return React.createElement("div", null, React.createElement("p", null, "Select server"), React.createElement(Dropdown, {
+    options: servers.map(function (server, index) {
+      return {
+        option: server.name,
+        value: server.id,
+        id: index
+      };
+    }),
+    onChange: onChange
+  }), React.createElement(Details, null, details));
+};
+var Details = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ServerSelection__Details",
+  componentId: "sc-ee18vv-0"
+})(["font-size:", " !important;"], uiFonts.size.xsmall);
+
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
     _ref$bgColor = _ref.bgColor,
@@ -28884,7 +29003,7 @@ var TimeWidget = function TimeWidget(_ref) {
 var WidgetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__WidgetContainer",
   componentId: "sc-1ja236h-0"
-})(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;"], img$c);
+})(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;height:100px;"], img$c);
 var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
@@ -29041,7 +29160,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$4, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
@@ -29054,7 +29173,7 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
     }));
-  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onClick: function onClick() {
@@ -29067,7 +29186,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -29091,7 +29210,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__AlertWrapper",
   componentId: "sc-1wjsz1l-5"
 })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
-var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
@@ -29112,5 +29231,5 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, ServerSelection, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map