@rpg-engine/long-bow 0.2.14 → 0.2.16
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/HistoryDialog.d.ts +14 -0
- package/dist/components/NPCDialog/NPCMultiDialog.d.ts +15 -0
- package/dist/components/QuestList.d.ts +3 -7
- package/dist/index.d.ts +2 -0
- package/dist/long-bow.cjs.development.js +157 -1
- 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 +158 -2
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/HistoryDialog.stories.d.ts +5 -0
- package/dist/stories/NPCMultiDialog.stories.d.ts +5 -0
- package/package.json +2 -2
- package/src/components/HistoryDialog.tsx +87 -0
- package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -0
- package/src/components/NPCDialog/img/background.png +0 -0
- package/src/components/QuestList.tsx +12 -26
- package/src/components/SkillsContainer.tsx +1 -1
- package/src/index.tsx +2 -0
- package/src/mocks/itemContainer.mocks.ts +1 -1
- package/src/stories/HistoryDialog.stories.tsx +59 -0
- package/src/stories/NPCMultiDialog.stories.tsx +71 -0
- package/src/stories/QuestList.stories.tsx +62 -34
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
|
|
3
|
+
import { IQuestionDialog, IQuestionDialogAnswer } from './NPCDialog/QuestionDialog/QuestionDialog';
|
|
4
|
+
export interface IHistoryDialogProps {
|
|
5
|
+
backgroundImgPath: string;
|
|
6
|
+
fullCoverBackground: boolean;
|
|
7
|
+
questions?: IQuestionDialog[];
|
|
8
|
+
answers?: IQuestionDialogAnswer[];
|
|
9
|
+
text?: string;
|
|
10
|
+
imagePath?: string;
|
|
11
|
+
textAndTypeArray?: NPCMultiDialogType[];
|
|
12
|
+
onClose: () => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const HistoryDialog: React.FC<IHistoryDialogProps>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare enum ImgSide {
|
|
3
|
+
right = "right",
|
|
4
|
+
left = "left"
|
|
5
|
+
}
|
|
6
|
+
export interface NPCMultiDialogType {
|
|
7
|
+
text: string;
|
|
8
|
+
imagePath?: string;
|
|
9
|
+
imageSide: ImgSide;
|
|
10
|
+
}
|
|
11
|
+
export interface INPCMultiDialogProps {
|
|
12
|
+
onClose: () => void;
|
|
13
|
+
textAndTypeArray: NPCMultiDialogType[];
|
|
14
|
+
}
|
|
15
|
+
export declare const NPCMultiDialog: React.FC<INPCMultiDialogProps>;
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
+
import { IQuest } from '@rpg-engine/shared';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
export interface IQuestListProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
quests: {
|
|
6
|
-
title: string;
|
|
7
|
-
description: string;
|
|
8
|
-
completed: boolean;
|
|
9
|
-
}[];
|
|
4
|
+
quests: IQuest[];
|
|
5
|
+
onClose: () => void;
|
|
10
6
|
}
|
|
11
7
|
export declare const QuestList: React.FC<IQuestListProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -24,4 +24,6 @@ export * from './components/SkillsContainer';
|
|
|
24
24
|
export * from './components/TextArea';
|
|
25
25
|
export * from './components/Truncate';
|
|
26
26
|
export * from './components/typography/DynamicText';
|
|
27
|
+
export * from './components/NPCDialog/NPCMultiDialog';
|
|
28
|
+
export * from './components/HistoryDialog';
|
|
27
29
|
export { useEventListener } from './hooks/useEventListener';
|
|
@@ -28571,7 +28571,7 @@ var skillProps = {
|
|
|
28571
28571
|
club: 'maces/club.png',
|
|
28572
28572
|
sword: 'swords/double-edged-sword.png',
|
|
28573
28573
|
axe: 'axes/double-axe.png',
|
|
28574
|
-
distance: '
|
|
28574
|
+
distance: 'ranged-weapons/horse-bow.png',
|
|
28575
28575
|
shielding: 'shields/studded-shield.png',
|
|
28576
28576
|
dagger: 'daggers/dagger.png'
|
|
28577
28577
|
}
|
|
@@ -28673,6 +28673,160 @@ var Container$f = /*#__PURE__*/styled.div.withConfig({
|
|
|
28673
28673
|
return props.maxLines;
|
|
28674
28674
|
});
|
|
28675
28675
|
|
|
28676
|
+
(function (ImgSide) {
|
|
28677
|
+
ImgSide["right"] = "right";
|
|
28678
|
+
ImgSide["left"] = "left";
|
|
28679
|
+
})(exports.ImgSide || (exports.ImgSide = {}));
|
|
28680
|
+
|
|
28681
|
+
var NPCMultiDialog = function NPCMultiDialog(_ref) {
|
|
28682
|
+
var _textAndTypeArray$sli;
|
|
28683
|
+
|
|
28684
|
+
var _onClose = _ref.onClose,
|
|
28685
|
+
textAndTypeArray = _ref.textAndTypeArray;
|
|
28686
|
+
|
|
28687
|
+
var _useState = React.useState(false),
|
|
28688
|
+
showGoNextIndicator = _useState[0],
|
|
28689
|
+
setShowGoNextIndicator = _useState[1];
|
|
28690
|
+
|
|
28691
|
+
var _useState2 = React.useState(0),
|
|
28692
|
+
slide = _useState2[0],
|
|
28693
|
+
setSlide = _useState2[1];
|
|
28694
|
+
|
|
28695
|
+
var onHandleSpacePress = function onHandleSpacePress(event) {
|
|
28696
|
+
if (event.code === 'Space') {
|
|
28697
|
+
if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
|
|
28698
|
+
setSlide(function (prev) {
|
|
28699
|
+
return prev + 1;
|
|
28700
|
+
});
|
|
28701
|
+
} else {
|
|
28702
|
+
// if there's no more text chunks, close the dialog
|
|
28703
|
+
_onClose();
|
|
28704
|
+
}
|
|
28705
|
+
}
|
|
28706
|
+
};
|
|
28707
|
+
|
|
28708
|
+
React.useEffect(function () {
|
|
28709
|
+
document.addEventListener('keydown', onHandleSpacePress);
|
|
28710
|
+
return function () {
|
|
28711
|
+
return document.removeEventListener('keydown', onHandleSpacePress);
|
|
28712
|
+
};
|
|
28713
|
+
}, [slide]);
|
|
28714
|
+
return React__default.createElement(RPGUIContainer, {
|
|
28715
|
+
type: exports.RPGUIContainerTypes.FramedGold,
|
|
28716
|
+
width: '50%',
|
|
28717
|
+
height: '180px'
|
|
28718
|
+
}, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
|
|
28719
|
+
flex: '70%'
|
|
28720
|
+
}, React__default.createElement(NPCDialogText, {
|
|
28721
|
+
onStartStep: function onStartStep() {
|
|
28722
|
+
return setShowGoNextIndicator(false);
|
|
28723
|
+
},
|
|
28724
|
+
onEndStep: function onEndStep() {
|
|
28725
|
+
return setShowGoNextIndicator(true);
|
|
28726
|
+
},
|
|
28727
|
+
text: textAndTypeArray[slide].text || 'No text provided.',
|
|
28728
|
+
onClose: function onClose() {
|
|
28729
|
+
if (_onClose) {
|
|
28730
|
+
_onClose();
|
|
28731
|
+
}
|
|
28732
|
+
}
|
|
28733
|
+
})), React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
|
|
28734
|
+
src: textAndTypeArray[slide].imagePath || img$6
|
|
28735
|
+
})), showGoNextIndicator && React__default.createElement(PressSpaceIndicator$1, {
|
|
28736
|
+
right: '10.5rem',
|
|
28737
|
+
src: img$7
|
|
28738
|
+
})), textAndTypeArray[slide].imageSide === 'left' && React__default.createElement(React__default.Fragment, null, React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
|
|
28739
|
+
src: textAndTypeArray[slide].imagePath || img$6
|
|
28740
|
+
})), React__default.createElement(TextContainer$2, {
|
|
28741
|
+
flex: '70%'
|
|
28742
|
+
}, React__default.createElement(NPCDialogText, {
|
|
28743
|
+
onStartStep: function onStartStep() {
|
|
28744
|
+
return setShowGoNextIndicator(false);
|
|
28745
|
+
},
|
|
28746
|
+
onEndStep: function onEndStep() {
|
|
28747
|
+
return setShowGoNextIndicator(true);
|
|
28748
|
+
},
|
|
28749
|
+
text: textAndTypeArray[slide].text || 'No text provided.',
|
|
28750
|
+
onClose: function onClose() {
|
|
28751
|
+
if (_onClose) {
|
|
28752
|
+
_onClose();
|
|
28753
|
+
}
|
|
28754
|
+
}
|
|
28755
|
+
})), showGoNextIndicator && React__default.createElement(PressSpaceIndicator$1, {
|
|
28756
|
+
right: '1rem',
|
|
28757
|
+
src: img$7
|
|
28758
|
+
}))), ")"));
|
|
28759
|
+
};
|
|
28760
|
+
var Container$g = /*#__PURE__*/styled.div.withConfig({
|
|
28761
|
+
displayName: "NPCMultiDialog__Container",
|
|
28762
|
+
componentId: "sc-rvu5wg-0"
|
|
28763
|
+
})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
|
|
28764
|
+
var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
|
|
28765
|
+
displayName: "NPCMultiDialog__TextContainer",
|
|
28766
|
+
componentId: "sc-rvu5wg-1"
|
|
28767
|
+
})(["flex:", " 0 0;width:355px;"], function (_ref2) {
|
|
28768
|
+
var flex = _ref2.flex;
|
|
28769
|
+
return flex;
|
|
28770
|
+
});
|
|
28771
|
+
var ThumbnailContainer$1 = /*#__PURE__*/styled.div.withConfig({
|
|
28772
|
+
displayName: "NPCMultiDialog__ThumbnailContainer",
|
|
28773
|
+
componentId: "sc-rvu5wg-2"
|
|
28774
|
+
})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
|
|
28775
|
+
var NPCThumbnail$1 = /*#__PURE__*/styled.img.withConfig({
|
|
28776
|
+
displayName: "NPCMultiDialog__NPCThumbnail",
|
|
28777
|
+
componentId: "sc-rvu5wg-3"
|
|
28778
|
+
})(["image-rendering:pixelated;height:128px;width:128px;"]);
|
|
28779
|
+
var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
|
|
28780
|
+
displayName: "NPCMultiDialog__PressSpaceIndicator",
|
|
28781
|
+
componentId: "sc-rvu5wg-4"
|
|
28782
|
+
})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
|
|
28783
|
+
var right = _ref3.right;
|
|
28784
|
+
return right;
|
|
28785
|
+
});
|
|
28786
|
+
|
|
28787
|
+
var HistoryDialog = function HistoryDialog(_ref) {
|
|
28788
|
+
var backgroundImgPath = _ref.backgroundImgPath,
|
|
28789
|
+
fullCoverBackground = _ref.fullCoverBackground,
|
|
28790
|
+
questions = _ref.questions,
|
|
28791
|
+
answers = _ref.answers,
|
|
28792
|
+
text = _ref.text,
|
|
28793
|
+
imagePath = _ref.imagePath,
|
|
28794
|
+
textAndTypeArray = _ref.textAndTypeArray,
|
|
28795
|
+
onClose = _ref.onClose;
|
|
28796
|
+
return React__default.createElement(BackgroundContainer, {
|
|
28797
|
+
imgPath: backgroundImgPath,
|
|
28798
|
+
fullImg: fullCoverBackground
|
|
28799
|
+
}, React__default.createElement(DialogContainer, null, textAndTypeArray ? React__default.createElement(NPCMultiDialog, {
|
|
28800
|
+
textAndTypeArray: textAndTypeArray,
|
|
28801
|
+
onClose: onClose
|
|
28802
|
+
}) : questions && answers ? React__default.createElement(QuestionDialog, {
|
|
28803
|
+
questions: questions,
|
|
28804
|
+
answers: answers,
|
|
28805
|
+
onClose: onClose
|
|
28806
|
+
}) : text && imagePath ? React__default.createElement(NPCDialog, {
|
|
28807
|
+
text: text,
|
|
28808
|
+
imagePath: imagePath,
|
|
28809
|
+
onClose: onClose,
|
|
28810
|
+
type: exports.NPCDialogType.TextAndThumbnail
|
|
28811
|
+
}) : React__default.createElement(NPCDialog, {
|
|
28812
|
+
text: text,
|
|
28813
|
+
onClose: onClose,
|
|
28814
|
+
type: exports.NPCDialogType.TextOnly
|
|
28815
|
+
})));
|
|
28816
|
+
};
|
|
28817
|
+
var BackgroundContainer = /*#__PURE__*/styled.div.withConfig({
|
|
28818
|
+
displayName: "HistoryDialog__BackgroundContainer",
|
|
28819
|
+
componentId: "sc-u6oe75-0"
|
|
28820
|
+
})(["width:100%;height:100%;background-image:url(", ");background-size:", ";display:flex;justify-content:space-evenly;align-items:center;"], function (props) {
|
|
28821
|
+
return props.imgPath;
|
|
28822
|
+
}, function (props) {
|
|
28823
|
+
return props.imgPath ? 'cover' : 'auto';
|
|
28824
|
+
});
|
|
28825
|
+
var DialogContainer = /*#__PURE__*/styled.div.withConfig({
|
|
28826
|
+
displayName: "HistoryDialog__DialogContainer",
|
|
28827
|
+
componentId: "sc-u6oe75-1"
|
|
28828
|
+
})(["display:flex;justify-content:center;padding-top:200px;"]);
|
|
28829
|
+
|
|
28676
28830
|
exports.Button = Button;
|
|
28677
28831
|
exports.CharacterSelection = CharacterSelection;
|
|
28678
28832
|
exports.Chat = Chat;
|
|
@@ -28681,12 +28835,14 @@ exports.DraggableContainer = DraggableContainer;
|
|
|
28681
28835
|
exports.Dropdown = Dropdown;
|
|
28682
28836
|
exports.DynamicText = DynamicText;
|
|
28683
28837
|
exports.EquipmentSet = EquipmentSet;
|
|
28838
|
+
exports.HistoryDialog = HistoryDialog;
|
|
28684
28839
|
exports.Input = Input;
|
|
28685
28840
|
exports.InputRadio = InputRadio;
|
|
28686
28841
|
exports.ItemContainer = ItemContainer;
|
|
28687
28842
|
exports.ItemSlot = ItemSlot;
|
|
28688
28843
|
exports.ListMenu = ListMenu;
|
|
28689
28844
|
exports.NPCDialog = NPCDialog;
|
|
28845
|
+
exports.NPCMultiDialog = NPCMultiDialog;
|
|
28690
28846
|
exports.ProgressBar = ProgressBar;
|
|
28691
28847
|
exports.PropertySelect = PropertySelect;
|
|
28692
28848
|
exports.QuestInfo = QuestInfo;
|