@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.
- package/dist/components/DropdownSelectorContainer.d.ts +13 -0
- package/dist/components/RadioInput/RadioButton.d.ts +8 -0
- package/dist/components/RadioInput/RadioInput.d.ts +13 -0
- package/dist/components/RadioInput/instruments.d.ts +4 -0
- package/dist/components/itemSelector/ItemSelector.d.ts +14 -0
- package/dist/index.d.ts +5 -3
- package/dist/long-bow.cjs.development.js +134 -12
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +133 -13
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/DropdownSelectorContainer.stories.d.ts +5 -0
- package/dist/stories/ItemSelector.stories.d.ts +4 -0
- package/dist/stories/RadioInput.stories.d.ts +5 -0
- package/package.json +1 -1
- package/src/components/Dropdown.tsx +1 -1
- package/src/components/DropdownSelectorContainer.tsx +42 -0
- package/src/components/NPCDialog/NPCDialogText.tsx +20 -3
- package/src/components/RadioInput/RadioButton.tsx +98 -0
- package/src/components/RadioInput/RadioInput.tsx +99 -0
- package/src/components/RadioInput/instruments.ts +16 -0
- package/src/components/TimeWidget/TimeWidget.tsx +1 -0
- package/src/components/itemSelector/ItemSelector.tsx +132 -0
- package/src/index.tsx +5 -3
- package/src/stories/DropdownSelectorContainer.stories.tsx +41 -0
- package/src/stories/ItemSelector.stories.tsx +77 -0
- package/src/stories/RadioInput.stories.tsx +35 -0
- package/src/components/NPCDialog/.DS_Store +0 -0
- package/src/components/NPCDialog/img/.DS_Store +0 -0
- package/src/mocks/.DS_Store +0 -0
package/dist/long-bow.esm.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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
|