@rpg-engine/long-bow 0.2.62 → 0.2.64

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.
Files changed (31) hide show
  1. package/dist/components/DropdownSelectorContainer.d.ts +13 -0
  2. package/dist/components/RadioInput/RadioButton.d.ts +8 -0
  3. package/dist/components/RadioInput/RadioInput.d.ts +13 -0
  4. package/dist/components/RadioInput/instruments.d.ts +4 -0
  5. package/dist/components/itemSelector/ItemSelector.d.ts +14 -0
  6. package/dist/index.d.ts +5 -3
  7. package/dist/long-bow.cjs.development.js +134 -12
  8. package/dist/long-bow.cjs.development.js.map +1 -1
  9. package/dist/long-bow.cjs.production.min.js +1 -1
  10. package/dist/long-bow.cjs.production.min.js.map +1 -1
  11. package/dist/long-bow.esm.js +133 -13
  12. package/dist/long-bow.esm.js.map +1 -1
  13. package/dist/stories/DropdownSelectorContainer.stories.d.ts +5 -0
  14. package/dist/stories/ItemSelector.stories.d.ts +4 -0
  15. package/dist/stories/RadioInput.stories.d.ts +5 -0
  16. package/package.json +1 -1
  17. package/src/components/Dropdown.tsx +1 -1
  18. package/src/components/DropdownSelectorContainer.tsx +42 -0
  19. package/src/components/NPCDialog/NPCDialogText.tsx +20 -3
  20. package/src/components/RadioInput/RadioButton.tsx +98 -0
  21. package/src/components/RadioInput/RadioInput.tsx +99 -0
  22. package/src/components/RadioInput/instruments.ts +16 -0
  23. package/src/components/TimeWidget/TimeWidget.tsx +1 -0
  24. package/src/components/itemSelector/ItemSelector.tsx +132 -0
  25. package/src/index.tsx +5 -3
  26. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -0
  27. package/src/stories/ItemSelector.stories.tsx +77 -0
  28. package/src/stories/RadioInput.stories.tsx +35 -0
  29. package/src/components/NPCDialog/.DS_Store +0 -0
  30. package/src/components/NPCDialog/img/.DS_Store +0 -0
  31. package/src/mocks/.DS_Store +0 -0
@@ -27264,7 +27264,7 @@ var Dropdown = function Dropdown(_ref) {
27264
27264
  setOpened = _useState3[1];
27265
27265
  useEffect(function () {
27266
27266
  var firstOption = options[0];
27267
- if (firstOption) {
27267
+ if (firstOption && !selectedValue) {
27268
27268
  setSelectedValue(firstOption.value);
27269
27269
  setSelectedOption(firstOption.option);
27270
27270
  }
@@ -27318,6 +27318,27 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
27318
27318
  return props.opened ? 'block' : 'none';
27319
27319
  });
27320
27320
 
27321
+ var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
27322
+ var title = _ref.title,
27323
+ onChange = _ref.onChange,
27324
+ options = _ref.options,
27325
+ details = _ref.details;
27326
+ return React.createElement("div", null, React.createElement("p", null, title), React.createElement(Dropdown, {
27327
+ options: options.map(function (option, index) {
27328
+ return {
27329
+ option: option.name,
27330
+ value: option.id,
27331
+ id: index
27332
+ };
27333
+ }),
27334
+ onChange: onChange
27335
+ }), React.createElement(Details, null, details));
27336
+ };
27337
+ var Details = /*#__PURE__*/styled.p.withConfig({
27338
+ displayName: "DropdownSelectorContainer__Details",
27339
+ componentId: "sc-kaa0h9-0"
27340
+ })(["font-size:", " !important;"], uiFonts.size.xsmall);
27341
+
27321
27342
  var RelativeListMenu = function RelativeListMenu(_ref) {
27322
27343
  var options = _ref.options,
27323
27344
  onSelected = _ref.onSelected,
@@ -27765,7 +27786,20 @@ var NPCDialogText = function NPCDialogText(_ref) {
27765
27786
  onClose = _ref.onClose,
27766
27787
  onEndStep = _ref.onEndStep,
27767
27788
  onStartStep = _ref.onStartStep;
27768
- var textChunks = chunkString(text, 200);
27789
+ var windowSize = useRef([window.innerWidth, window.innerHeight]);
27790
+ function maxCharacters(width) {
27791
+ // Set the font size to 16 pixels
27792
+ var fontSize = 11.2;
27793
+ // Calculate the number of characters that can fit in one line
27794
+ var charactersPerLine = Math.floor(width / 2 / fontSize);
27795
+ // Calculate the number of lines that can fit in the div
27796
+ var linesPerDiv = Math.floor(180 / fontSize);
27797
+ // Calculate the maximum number of characters that can fit in the div
27798
+ var maxCharacters = charactersPerLine * linesPerDiv;
27799
+ // Return the maximum number of characters
27800
+ return Math.round(maxCharacters / 5);
27801
+ }
27802
+ var textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
27769
27803
  var _useState = useState(0),
27770
27804
  chunkIndex = _useState[0],
27771
27805
  setChunkIndex = _useState[1];
@@ -28565,6 +28599,15 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
28565
28599
  componentId: "sc-1a2vx6q-3"
28566
28600
  })(["text-align:center;p{margin-top:5px;}"]);
28567
28601
 
28602
+ //@ts-ignore
28603
+ var _RPGUI = RPGUI;
28604
+ var RPGUIRoot = function RPGUIRoot(_ref) {
28605
+ var children = _ref.children;
28606
+ return React.createElement("div", {
28607
+ className: "rpgui-content"
28608
+ }, children);
28609
+ };
28610
+
28568
28611
  var InputRadio = function InputRadio(_ref) {
28569
28612
  var name = _ref.name,
28570
28613
  items = _ref.items,
@@ -28597,15 +28640,6 @@ var InputRadio = function InputRadio(_ref) {
28597
28640
  }));
28598
28641
  };
28599
28642
 
28600
- //@ts-ignore
28601
- var _RPGUI = RPGUI;
28602
- var RPGUIRoot = function RPGUIRoot(_ref) {
28603
- var children = _ref.children;
28604
- return React.createElement("div", {
28605
- className: "rpgui-content"
28606
- }, children);
28607
- };
28608
-
28609
28643
  var RangeSliderType;
28610
28644
  (function (RangeSliderType) {
28611
28645
  RangeSliderType["Slider"] = "rpgui-slider";
@@ -28884,7 +28918,7 @@ var TimeWidget = function TimeWidget(_ref) {
28884
28918
  var WidgetContainer = /*#__PURE__*/styled.div.withConfig({
28885
28919
  displayName: "TimeWidget__WidgetContainer",
28886
28920
  componentId: "sc-1ja236h-0"
28887
- })(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;"], img$c);
28921
+ })(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;height:100px;"], img$c);
28888
28922
  var Time = /*#__PURE__*/styled.div.withConfig({
28889
28923
  displayName: "TimeWidget__Time",
28890
28924
  componentId: "sc-1ja236h-1"
@@ -29112,5 +29146,91 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
29112
29146
  return props.maxLines;
29113
29147
  });
29114
29148
 
29115
- 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 };
29149
+ var ItemSelector = function ItemSelector(_ref) {
29150
+ var atlasIMG = _ref.atlasIMG,
29151
+ atlasJSON = _ref.atlasJSON,
29152
+ options = _ref.options,
29153
+ onClose = _ref.onClose,
29154
+ onSelect = _ref.onSelect;
29155
+ var _useState = useState(),
29156
+ selectedValue = _useState[0],
29157
+ setSelectedValue = _useState[1];
29158
+ var handleClick = function handleClick() {
29159
+ var element = document.querySelector("input[name='test']:checked");
29160
+ var elementValue = element.value;
29161
+ setSelectedValue(elementValue);
29162
+ };
29163
+ useEffect(function () {
29164
+ if (selectedValue) {
29165
+ onSelect(selectedValue);
29166
+ }
29167
+ }, [selectedValue]);
29168
+ return React.createElement(DraggableContainer, {
29169
+ type: RPGUIContainerTypes.Framed,
29170
+ width: "500px",
29171
+ cancelDrag: ".equipment-container-body .arrow-selector",
29172
+ onCloseButton: function onCloseButton() {
29173
+ if (onClose) {
29174
+ onClose();
29175
+ }
29176
+ }
29177
+ }, React.createElement("div", {
29178
+ style: {
29179
+ width: '100%'
29180
+ }
29181
+ }, React.createElement(Title$4, null, 'Harvesting instruments'), React.createElement(Subtitle, null, 'Use the tool, you need it'), React.createElement("hr", {
29182
+ className: "golden"
29183
+ })), React.createElement(RadioInputScroller, null, options == null ? void 0 : options.map(function (option, index) {
29184
+ return React.createElement(RadioOptionsWrapper, {
29185
+ key: index
29186
+ }, React.createElement(SpriteAtlasWrapper, null, React.createElement(SpriteFromAtlas, {
29187
+ atlasIMG: atlasIMG,
29188
+ atlasJSON: atlasJSON,
29189
+ spriteKey: option.imageKey,
29190
+ imgScale: 3
29191
+ })), React.createElement("div", null, React.createElement("input", {
29192
+ className: "rpgui-radio",
29193
+ type: "radio",
29194
+ value: option.name,
29195
+ name: "test"
29196
+ }), React.createElement("label", {
29197
+ onClick: handleClick,
29198
+ style: {
29199
+ display: 'flex',
29200
+ alignItems: 'center'
29201
+ }
29202
+ }, option.name, " ", React.createElement("br", null), option.description)));
29203
+ })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
29204
+ buttonType: ButtonTypes.RPGUIButton,
29205
+ onClick: onClose
29206
+ }, "Cancel"), React.createElement(Button, {
29207
+ buttonType: ButtonTypes.RPGUIButton
29208
+ }, "Select")));
29209
+ };
29210
+ var Title$4 = /*#__PURE__*/styled.h1.withConfig({
29211
+ displayName: "ItemSelector__Title",
29212
+ componentId: "sc-gptoxp-0"
29213
+ })(["font-size:0.6rem;color:yellow !important;"]);
29214
+ var Subtitle = /*#__PURE__*/styled.h1.withConfig({
29215
+ displayName: "ItemSelector__Subtitle",
29216
+ componentId: "sc-gptoxp-1"
29217
+ })(["font-size:0.4rem;color:yellow !important;"]);
29218
+ var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
29219
+ displayName: "ItemSelector__RadioInputScroller",
29220
+ componentId: "sc-gptoxp-2"
29221
+ })(["width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
29222
+ var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
29223
+ displayName: "ItemSelector__SpriteAtlasWrapper",
29224
+ componentId: "sc-gptoxp-3"
29225
+ })(["margin-right:40px;"]);
29226
+ var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
29227
+ displayName: "ItemSelector__RadioOptionsWrapper",
29228
+ componentId: "sc-gptoxp-4"
29229
+ })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
29230
+ var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
29231
+ displayName: "ItemSelector__ButtonWrapper",
29232
+ componentId: "sc-gptoxp-5"
29233
+ })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
29234
+
29235
+ export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
29116
29236
  //# sourceMappingURL=long-bow.esm.js.map