@rpg-engine/long-bow 0.1.91 → 0.1.92
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/LICENSE +20 -20
- package/README.md +181 -181
- package/dist/components/Item/Inventory/itemContainerHelper.d.ts +2 -2
- package/dist/long-bow.cjs.development.js +49 -2
- 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 +49 -2
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +98 -98
- package/src/components/Abstractions/SlotsContainer.tsx +42 -42
- package/src/components/Button.tsx +30 -30
- package/src/components/Chat/Chat.tsx +193 -193
- package/src/components/CheckButton.tsx +65 -65
- package/src/components/DraggableContainer.tsx +150 -150
- package/src/components/Dropdown.tsx +57 -57
- package/src/components/Equipment/EquipmentSet.tsx +134 -134
- package/src/components/Input.tsx +11 -11
- package/src/components/Item/Cards/ItemTooltip.tsx +32 -32
- package/src/components/Item/Inventory/ItemContainer.tsx +65 -65
- package/src/components/Item/Inventory/ItemContainerTypes.ts +4 -4
- package/src/components/Item/Inventory/ItemSlot.tsx +199 -199
- package/src/components/Item/Inventory/itemContainerHelper.ts +94 -81
- package/src/components/ListMenu.tsx +65 -65
- package/src/components/Multitab/Tab.tsx +57 -57
- package/src/components/Multitab/TabBody.tsx +13 -13
- package/src/components/Multitab/TabsContainer.tsx +97 -97
- package/src/components/NPCDialog/NPCDialog.tsx +145 -145
- package/src/components/NPCDialog/NPCDialogText.tsx +53 -53
- package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +239 -239
- package/src/components/ProgressBar.tsx +91 -91
- package/src/components/PropertySelect/PropertySelect.tsx +101 -101
- package/src/components/PropertySelect/img/ui-arrows/arrow01-left-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-left.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-right-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-right.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-left-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-left.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-right-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-right.png +0 -0
- package/src/components/QuestInfo/QuestInfo.tsx +143 -143
- package/src/components/RPGUIContainer.tsx +47 -47
- package/src/components/RPGUIRoot.tsx +14 -14
- package/src/components/RadioButton.tsx +53 -53
- package/src/components/RangeSlider.tsx +68 -68
- package/src/components/RelativeListMenu.tsx +83 -83
- package/src/components/ScrollList.tsx +77 -77
- package/src/components/SimpleProgressBar.tsx +62 -62
- package/src/components/SkillProgressBar.tsx +123 -123
- package/src/components/SkillsContainer.tsx +196 -196
- package/src/components/TextArea.tsx +11 -11
- package/src/components/Truncate.tsx +25 -25
- package/src/components/shared/Column.tsx +16 -16
- package/src/components/shared/SpriteFromAtlas.tsx +99 -99
- package/src/components/typography/DynamicText.tsx +49 -49
- package/src/constants/uiColors.ts +10 -10
- package/src/hooks/useEventListener.ts +21 -21
- package/src/hooks/useOutsideAlerter.ts +25 -25
- package/src/index.tsx +25 -25
- package/src/libs/StringHelpers.ts +3 -3
- package/src/mocks/atlas/icons/icons.json +735 -735
- package/src/mocks/atlas/items/items.json +5215 -5215
- package/src/mocks/equipmentSet.mocks.ts +347 -347
- package/src/mocks/itemContainer.mocks.ts +249 -249
- package/src/mocks/skills.mocks.ts +122 -122
- package/src/stories/Button.stories.tsx +36 -36
- package/src/stories/Chat.stories.tsx +170 -170
- package/src/stories/CheckButton.stories.tsx +48 -48
- package/src/stories/DraggableContainer.stories.tsx +28 -28
- package/src/stories/Dropdown.stories.tsx +46 -46
- package/src/stories/EquipmentSet.stories.tsx +50 -50
- package/src/stories/ItemContainer.stories.tsx +50 -50
- package/src/stories/ListMenu.stories.tsx +56 -56
- package/src/stories/Multitab.stories.tsx +51 -51
- package/src/stories/NPCDialog.stories.tsx +130 -130
- package/src/stories/ProgressBar.stories.tsx +23 -23
- package/src/stories/PropertySelect.stories.tsx +41 -41
- package/src/stories/QuestInfo.stories.tsx +76 -76
- package/src/stories/RPGUIContainers.stories.tsx +42 -42
- package/src/stories/RadioButton.stories.tsx +49 -49
- package/src/stories/RangeSlider.stories.tsx +60 -60
- package/src/stories/ScrollList.stories.tsx +85 -85
- package/src/stories/SimpleProgressBar.stories.tsx +22 -22
- package/src/stories/SkillProgressBar.stories.tsx +30 -30
- package/src/stories/SkillsContainer.stories.tsx +31 -31
- package/src/stories/Text.stories.tsx +42 -42
- package/src/types/eventTypes.ts +4 -4
- package/src/types/index.d.ts +2 -2
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
InputRadio,
|
|
5
|
-
IRadioItems,
|
|
6
|
-
IRadioProps,
|
|
7
|
-
} from '../../src/components/RadioButton';
|
|
8
|
-
import {
|
|
9
|
-
RPGUIContainer,
|
|
10
|
-
RPGUIContainerTypes,
|
|
11
|
-
} from '../../src/components/RPGUIContainer';
|
|
12
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
13
|
-
|
|
14
|
-
const meta: Meta = {
|
|
15
|
-
title: 'Radio Input',
|
|
16
|
-
component: InputRadio,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export default meta;
|
|
20
|
-
|
|
21
|
-
const Template: Story<IRadioProps> = args => (
|
|
22
|
-
<RPGUIRoot>
|
|
23
|
-
<RPGUIContainer type={RPGUIContainerTypes.Framed}>
|
|
24
|
-
<InputRadio {...args} />
|
|
25
|
-
</RPGUIContainer>
|
|
26
|
-
</RPGUIRoot>
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
export const Default = Template.bind({});
|
|
30
|
-
|
|
31
|
-
const items: IRadioItems[] = [
|
|
32
|
-
{
|
|
33
|
-
label: 'label1',
|
|
34
|
-
value: 'value1',
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
label: 'label2',
|
|
38
|
-
value: 'value2',
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
label: 'label3',
|
|
42
|
-
value: 'value3',
|
|
43
|
-
},
|
|
44
|
-
];
|
|
45
|
-
|
|
46
|
-
Default.args = {
|
|
47
|
-
items,
|
|
48
|
-
name: 'teste',
|
|
49
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
InputRadio,
|
|
5
|
+
IRadioItems,
|
|
6
|
+
IRadioProps,
|
|
7
|
+
} from '../../src/components/RadioButton';
|
|
8
|
+
import {
|
|
9
|
+
RPGUIContainer,
|
|
10
|
+
RPGUIContainerTypes,
|
|
11
|
+
} from '../../src/components/RPGUIContainer';
|
|
12
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
13
|
+
|
|
14
|
+
const meta: Meta = {
|
|
15
|
+
title: 'Radio Input',
|
|
16
|
+
component: InputRadio,
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default meta;
|
|
20
|
+
|
|
21
|
+
const Template: Story<IRadioProps> = args => (
|
|
22
|
+
<RPGUIRoot>
|
|
23
|
+
<RPGUIContainer type={RPGUIContainerTypes.Framed}>
|
|
24
|
+
<InputRadio {...args} />
|
|
25
|
+
</RPGUIContainer>
|
|
26
|
+
</RPGUIRoot>
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
export const Default = Template.bind({});
|
|
30
|
+
|
|
31
|
+
const items: IRadioItems[] = [
|
|
32
|
+
{
|
|
33
|
+
label: 'label1',
|
|
34
|
+
value: 'value1',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: 'label2',
|
|
38
|
+
value: 'value2',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: 'label3',
|
|
42
|
+
value: 'value3',
|
|
43
|
+
},
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
Default.args = {
|
|
47
|
+
items,
|
|
48
|
+
name: 'teste',
|
|
49
|
+
};
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
IRangeSliderProps,
|
|
5
|
-
RangeSlider,
|
|
6
|
-
RangeSliderType,
|
|
7
|
-
} from '../../src/components/RangeSlider';
|
|
8
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
9
|
-
|
|
10
|
-
const meta: Meta = {
|
|
11
|
-
title: 'Slider',
|
|
12
|
-
component: RangeSlider,
|
|
13
|
-
argTypes: {
|
|
14
|
-
type: {
|
|
15
|
-
control: {
|
|
16
|
-
type: 'select',
|
|
17
|
-
labels: {
|
|
18
|
-
[RangeSliderType.Slider]: 'slider',
|
|
19
|
-
[RangeSliderType.GoldSlider]: 'golden-slider',
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
valueMin: {
|
|
24
|
-
control: {
|
|
25
|
-
type: 'number',
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
valueMax: {
|
|
29
|
-
control: {
|
|
30
|
-
type: 'number',
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
value: {
|
|
34
|
-
control: {
|
|
35
|
-
type: 'number',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
parameters: {
|
|
40
|
-
controls: { expanded: true },
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export default meta;
|
|
45
|
-
|
|
46
|
-
const Template: Story<IRangeSliderProps> = args => (
|
|
47
|
-
<RPGUIRoot>
|
|
48
|
-
<RangeSlider {...args} />
|
|
49
|
-
</RPGUIRoot>
|
|
50
|
-
);
|
|
51
|
-
|
|
52
|
-
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
|
|
53
|
-
// https://storybook.js.org/docs/react/workflows/unit-testing
|
|
54
|
-
export const Default = Template.bind({});
|
|
55
|
-
|
|
56
|
-
Default.args = {
|
|
57
|
-
type: RangeSliderType.Slider,
|
|
58
|
-
valueMin: 0,
|
|
59
|
-
valueMax: 100,
|
|
60
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
IRangeSliderProps,
|
|
5
|
+
RangeSlider,
|
|
6
|
+
RangeSliderType,
|
|
7
|
+
} from '../../src/components/RangeSlider';
|
|
8
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'Slider',
|
|
12
|
+
component: RangeSlider,
|
|
13
|
+
argTypes: {
|
|
14
|
+
type: {
|
|
15
|
+
control: {
|
|
16
|
+
type: 'select',
|
|
17
|
+
labels: {
|
|
18
|
+
[RangeSliderType.Slider]: 'slider',
|
|
19
|
+
[RangeSliderType.GoldSlider]: 'golden-slider',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
valueMin: {
|
|
24
|
+
control: {
|
|
25
|
+
type: 'number',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
valueMax: {
|
|
29
|
+
control: {
|
|
30
|
+
type: 'number',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
value: {
|
|
34
|
+
control: {
|
|
35
|
+
type: 'number',
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
parameters: {
|
|
40
|
+
controls: { expanded: true },
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default meta;
|
|
45
|
+
|
|
46
|
+
const Template: Story<IRangeSliderProps> = args => (
|
|
47
|
+
<RPGUIRoot>
|
|
48
|
+
<RangeSlider {...args} />
|
|
49
|
+
</RPGUIRoot>
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
|
|
53
|
+
// https://storybook.js.org/docs/react/workflows/unit-testing
|
|
54
|
+
export const Default = Template.bind({});
|
|
55
|
+
|
|
56
|
+
Default.args = {
|
|
57
|
+
type: RangeSliderType.Slider,
|
|
58
|
+
valueMin: 0,
|
|
59
|
+
valueMax: 100,
|
|
60
|
+
};
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
-
import { IListMenuProps, ListMenu } from '../../src/components/ScrollList';
|
|
5
|
-
|
|
6
|
-
const meta: Meta = {
|
|
7
|
-
/* 👇 The title prop is optional.
|
|
8
|
-
* See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
|
|
9
|
-
* to learn how to generate automatic titles
|
|
10
|
-
*/
|
|
11
|
-
title: 'Scroll List',
|
|
12
|
-
component: ListMenu,
|
|
13
|
-
argTypes: {},
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export default meta;
|
|
17
|
-
|
|
18
|
-
//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
|
|
19
|
-
const Template: Story<IListMenuProps> = args => (
|
|
20
|
-
<RPGUIRoot>
|
|
21
|
-
<ListMenu {...args} />
|
|
22
|
-
</RPGUIRoot>
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
export const Default = Template.bind({});
|
|
26
|
-
|
|
27
|
-
Default.args = {
|
|
28
|
-
title: 'Scroll List',
|
|
29
|
-
// x: 100,
|
|
30
|
-
// y: 100,
|
|
31
|
-
options: [
|
|
32
|
-
{
|
|
33
|
-
id: 'blacksmith',
|
|
34
|
-
text: 'Huge option added here',
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
text: 'Merchant',
|
|
38
|
-
id: 'merchant',
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
text: 'City Guard',
|
|
42
|
-
id: 'city-guard',
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
text: 'Explorer',
|
|
46
|
-
id: 'explorer',
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
text: 'Royalty',
|
|
50
|
-
id: 'royalty',
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
text: 'Gladiator',
|
|
54
|
-
id: 'gladiator',
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
id: 'blacksmith',
|
|
58
|
-
text: 'Huge option added here',
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
text: 'Merchant',
|
|
62
|
-
id: 'merchant',
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
text: 'City Guard',
|
|
66
|
-
id: 'city-guard',
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
text: 'Explorer',
|
|
70
|
-
id: 'explorer',
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
text: 'Royalty',
|
|
74
|
-
id: 'royalty',
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
text: 'Gladiator',
|
|
78
|
-
id: 'gladiator',
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
text: 'Gladiator',
|
|
82
|
-
id: 'gladiator',
|
|
83
|
-
},
|
|
84
|
-
],
|
|
85
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
+
import { IListMenuProps, ListMenu } from '../../src/components/ScrollList';
|
|
5
|
+
|
|
6
|
+
const meta: Meta = {
|
|
7
|
+
/* 👇 The title prop is optional.
|
|
8
|
+
* See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
|
|
9
|
+
* to learn how to generate automatic titles
|
|
10
|
+
*/
|
|
11
|
+
title: 'Scroll List',
|
|
12
|
+
component: ListMenu,
|
|
13
|
+
argTypes: {},
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default meta;
|
|
17
|
+
|
|
18
|
+
//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
|
|
19
|
+
const Template: Story<IListMenuProps> = args => (
|
|
20
|
+
<RPGUIRoot>
|
|
21
|
+
<ListMenu {...args} />
|
|
22
|
+
</RPGUIRoot>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
export const Default = Template.bind({});
|
|
26
|
+
|
|
27
|
+
Default.args = {
|
|
28
|
+
title: 'Scroll List',
|
|
29
|
+
// x: 100,
|
|
30
|
+
// y: 100,
|
|
31
|
+
options: [
|
|
32
|
+
{
|
|
33
|
+
id: 'blacksmith',
|
|
34
|
+
text: 'Huge option added here',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
text: 'Merchant',
|
|
38
|
+
id: 'merchant',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
text: 'City Guard',
|
|
42
|
+
id: 'city-guard',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
text: 'Explorer',
|
|
46
|
+
id: 'explorer',
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
text: 'Royalty',
|
|
50
|
+
id: 'royalty',
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
text: 'Gladiator',
|
|
54
|
+
id: 'gladiator',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'blacksmith',
|
|
58
|
+
text: 'Huge option added here',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
text: 'Merchant',
|
|
62
|
+
id: 'merchant',
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
text: 'City Guard',
|
|
66
|
+
id: 'city-guard',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
text: 'Explorer',
|
|
70
|
+
id: 'explorer',
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
text: 'Royalty',
|
|
74
|
+
id: 'royalty',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
text: 'Gladiator',
|
|
78
|
+
id: 'gladiator',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
text: 'Gladiator',
|
|
82
|
+
id: 'gladiator',
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
-
import {
|
|
5
|
-
ISimpleProgressBarProps,
|
|
6
|
-
SimpleProgressBar,
|
|
7
|
-
} from '../../src/components/SimpleProgressBar';
|
|
8
|
-
|
|
9
|
-
const meta: Meta = {
|
|
10
|
-
title: 'Simple Progress Bar',
|
|
11
|
-
component: SimpleProgressBar,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
|
|
16
|
-
const Template: Story<ISimpleProgressBarProps> = args => (
|
|
17
|
-
<RPGUIRoot>
|
|
18
|
-
<SimpleProgressBar {...args} />
|
|
19
|
-
</RPGUIRoot>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export const Default = Template.bind({});
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
+
import {
|
|
5
|
+
ISimpleProgressBarProps,
|
|
6
|
+
SimpleProgressBar,
|
|
7
|
+
} from '../../src/components/SimpleProgressBar';
|
|
8
|
+
|
|
9
|
+
const meta: Meta = {
|
|
10
|
+
title: 'Simple Progress Bar',
|
|
11
|
+
component: SimpleProgressBar,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
const Template: Story<ISimpleProgressBarProps> = args => (
|
|
17
|
+
<RPGUIRoot>
|
|
18
|
+
<SimpleProgressBar {...args} />
|
|
19
|
+
</RPGUIRoot>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export const Default = Template.bind({});
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
-
import {
|
|
5
|
-
ISkillProgressBarProps,
|
|
6
|
-
SkillProgressBar,
|
|
7
|
-
} from '../../src/components/SkillProgressBar';
|
|
8
|
-
|
|
9
|
-
const meta: Meta = {
|
|
10
|
-
title: 'Skill Progress Bar',
|
|
11
|
-
component: SkillProgressBar,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
|
|
16
|
-
const Template: Story<ISkillProgressBarProps> = args => (
|
|
17
|
-
<RPGUIRoot>
|
|
18
|
-
<SkillProgressBar {...args} />
|
|
19
|
-
</RPGUIRoot>
|
|
20
|
-
);
|
|
21
|
-
export const Default = Template.bind([]);
|
|
22
|
-
|
|
23
|
-
Default.args = {
|
|
24
|
-
skillName: 'Sword skill',
|
|
25
|
-
bgColor: '#ff0000',
|
|
26
|
-
level: 2,
|
|
27
|
-
skillPoints: 10,
|
|
28
|
-
skillPointsToNextLevel: 100,
|
|
29
|
-
texturePath: 'swords/broad-sword.png',
|
|
30
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
+
import {
|
|
5
|
+
ISkillProgressBarProps,
|
|
6
|
+
SkillProgressBar,
|
|
7
|
+
} from '../../src/components/SkillProgressBar';
|
|
8
|
+
|
|
9
|
+
const meta: Meta = {
|
|
10
|
+
title: 'Skill Progress Bar',
|
|
11
|
+
component: SkillProgressBar,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
const Template: Story<ISkillProgressBarProps> = args => (
|
|
17
|
+
<RPGUIRoot>
|
|
18
|
+
<SkillProgressBar {...args} />
|
|
19
|
+
</RPGUIRoot>
|
|
20
|
+
);
|
|
21
|
+
export const Default = Template.bind([]);
|
|
22
|
+
|
|
23
|
+
Default.args = {
|
|
24
|
+
skillName: 'Sword skill',
|
|
25
|
+
bgColor: '#ff0000',
|
|
26
|
+
level: 2,
|
|
27
|
+
skillPoints: 10,
|
|
28
|
+
skillPointsToNextLevel: 100,
|
|
29
|
+
texturePath: 'swords/broad-sword.png',
|
|
30
|
+
};
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
-
import {
|
|
5
|
-
ISkillContainerProps,
|
|
6
|
-
SkillsContainer,
|
|
7
|
-
} from '../../src/components/SkillsContainer';
|
|
8
|
-
import { skillMock } from '../../src/mocks/skills.mocks';
|
|
9
|
-
|
|
10
|
-
const meta: Meta = {
|
|
11
|
-
title: 'Skills Container',
|
|
12
|
-
component: SkillsContainer,
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export default meta;
|
|
16
|
-
|
|
17
|
-
const Template: Story<ISkillContainerProps> = args => (
|
|
18
|
-
<RPGUIRoot>
|
|
19
|
-
<SkillsContainer
|
|
20
|
-
{...args}
|
|
21
|
-
skill={skillMock}
|
|
22
|
-
onCloseButton={() => console.log('close skill container')}
|
|
23
|
-
/>
|
|
24
|
-
</RPGUIRoot>
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
export const Default = Template.bind([]);
|
|
28
|
-
|
|
29
|
-
Default.args = {
|
|
30
|
-
skill: skillMock,
|
|
31
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
4
|
+
import {
|
|
5
|
+
ISkillContainerProps,
|
|
6
|
+
SkillsContainer,
|
|
7
|
+
} from '../../src/components/SkillsContainer';
|
|
8
|
+
import { skillMock } from '../../src/mocks/skills.mocks';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'Skills Container',
|
|
12
|
+
component: SkillsContainer,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default meta;
|
|
16
|
+
|
|
17
|
+
const Template: Story<ISkillContainerProps> = args => (
|
|
18
|
+
<RPGUIRoot>
|
|
19
|
+
<SkillsContainer
|
|
20
|
+
{...args}
|
|
21
|
+
skill={skillMock}
|
|
22
|
+
onCloseButton={() => console.log('close skill container')}
|
|
23
|
+
/>
|
|
24
|
+
</RPGUIRoot>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
export const Default = Template.bind([]);
|
|
28
|
+
|
|
29
|
+
Default.args = {
|
|
30
|
+
skill: skillMock,
|
|
31
|
+
};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '../../src';
|
|
4
|
-
import {
|
|
5
|
-
IInputProps,
|
|
6
|
-
Input as InputComponent,
|
|
7
|
-
} from '../../src/components/Input';
|
|
8
|
-
import {
|
|
9
|
-
ITextArea,
|
|
10
|
-
TextArea as TextAreaComponent,
|
|
11
|
-
} from '../../src/components/TextArea';
|
|
12
|
-
|
|
13
|
-
const meta: Meta = {
|
|
14
|
-
title: 'Text',
|
|
15
|
-
component: InputComponent,
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export default meta;
|
|
19
|
-
|
|
20
|
-
const InputTemplate: Story<IInputProps> = args => (
|
|
21
|
-
<RPGUIRoot>
|
|
22
|
-
<InputComponent {...args} />
|
|
23
|
-
</RPGUIRoot>
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
export const Input = InputTemplate.bind({});
|
|
27
|
-
|
|
28
|
-
Input.args = {
|
|
29
|
-
placeholder: 'Test placeholder',
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const TextAreaTemplate: Story<ITextArea> = args => (
|
|
33
|
-
<RPGUIRoot>
|
|
34
|
-
<TextAreaComponent {...args} />
|
|
35
|
-
</RPGUIRoot>
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
export const TextArea = TextAreaTemplate.bind({});
|
|
39
|
-
|
|
40
|
-
TextArea.args = {
|
|
41
|
-
placeholder: 'Test placeholder',
|
|
42
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../../src';
|
|
4
|
+
import {
|
|
5
|
+
IInputProps,
|
|
6
|
+
Input as InputComponent,
|
|
7
|
+
} from '../../src/components/Input';
|
|
8
|
+
import {
|
|
9
|
+
ITextArea,
|
|
10
|
+
TextArea as TextAreaComponent,
|
|
11
|
+
} from '../../src/components/TextArea';
|
|
12
|
+
|
|
13
|
+
const meta: Meta = {
|
|
14
|
+
title: 'Text',
|
|
15
|
+
component: InputComponent,
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default meta;
|
|
19
|
+
|
|
20
|
+
const InputTemplate: Story<IInputProps> = args => (
|
|
21
|
+
<RPGUIRoot>
|
|
22
|
+
<InputComponent {...args} />
|
|
23
|
+
</RPGUIRoot>
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
export const Input = InputTemplate.bind({});
|
|
27
|
+
|
|
28
|
+
Input.args = {
|
|
29
|
+
placeholder: 'Test placeholder',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const TextAreaTemplate: Story<ITextArea> = args => (
|
|
33
|
+
<RPGUIRoot>
|
|
34
|
+
<TextAreaComponent {...args} />
|
|
35
|
+
</RPGUIRoot>
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
export const TextArea = TextAreaTemplate.bind({});
|
|
39
|
+
|
|
40
|
+
TextArea.args = {
|
|
41
|
+
placeholder: 'Test placeholder',
|
|
42
|
+
};
|
package/src/types/eventTypes.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export interface IPosition {
|
|
2
|
-
x: number;
|
|
3
|
-
y: number;
|
|
4
|
-
}
|
|
1
|
+
export interface IPosition {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
}
|
package/src/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare module '*.gif';
|
|
2
|
-
declare module '*.png';
|
|
1
|
+
declare module '*.gif';
|
|
2
|
+
declare module '*.png';
|