@rpg-engine/long-bow 0.1.76 → 0.1.79

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 (60) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/ScrollList.d.ts +15 -0
  4. package/dist/components/store/UI.store.d.ts +3 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/long-bow.cjs.development.js +164 -10
  7. package/dist/long-bow.cjs.development.js.map +1 -1
  8. package/dist/long-bow.cjs.production.min.js +1 -1
  9. package/dist/long-bow.cjs.production.min.js.map +1 -1
  10. package/dist/long-bow.esm.js +164 -11
  11. package/dist/long-bow.esm.js.map +1 -1
  12. package/dist/mocks/skills.mocks.d.ts +6 -0
  13. package/package.json +96 -96
  14. package/src/components/Abstractions/SlotsContainer.tsx +42 -42
  15. package/src/components/Button.tsx +29 -29
  16. package/src/components/Chat/Chat.tsx +193 -193
  17. package/src/components/CheckButton.tsx +65 -65
  18. package/src/components/DraggableContainer.tsx +150 -150
  19. package/src/components/Dropdown.tsx +57 -57
  20. package/src/components/Equipment/EquipmentSet.tsx +179 -179
  21. package/src/components/Input.tsx +11 -11
  22. package/src/components/Item/Cards/ItemCard.tsx +36 -36
  23. package/src/components/Item/Inventory/ItemContainer.tsx +113 -113
  24. package/src/components/Item/Inventory/ItemSlot.tsx +158 -158
  25. package/src/components/Item/Inventory/itemContainerHelper.ts +81 -81
  26. package/src/components/ListMenu.tsx +65 -65
  27. package/src/components/Multitab/Tab.tsx +57 -57
  28. package/src/components/Multitab/TabBody.tsx +13 -13
  29. package/src/components/Multitab/TabsContainer.tsx +97 -99
  30. package/src/components/NPCDialog/NPCDialog.tsx +145 -145
  31. package/src/components/NPCDialog/NPCDialogText.tsx +53 -53
  32. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +242 -242
  33. package/src/components/ProgressBar.tsx +91 -91
  34. package/src/components/RPGUIContainer.tsx +47 -47
  35. package/src/components/RPGUIRoot.tsx +14 -14
  36. package/src/components/RadioButton.tsx +53 -53
  37. package/src/components/RangeSlider.tsx +68 -68
  38. package/src/components/ScrollList.tsx +77 -0
  39. package/src/components/SimpleProgressBar.tsx +62 -62
  40. package/src/components/SkillProgressBar.tsx +124 -124
  41. package/src/components/SkillsContainer.tsx +235 -235
  42. package/src/components/TextArea.tsx +11 -11
  43. package/src/components/Truncate.tsx +25 -25
  44. package/src/components/shared/Column.tsx +16 -16
  45. package/src/components/shared/SpriteFromAtlas.tsx +99 -99
  46. package/src/components/shared/SpriteIcon.tsx +67 -67
  47. package/src/components/store/UI.store.ts +205 -192
  48. package/src/components/typography/DynamicText.tsx +49 -49
  49. package/src/constants/uiColors.ts +10 -10
  50. package/src/hooks/useEventListener.ts +21 -21
  51. package/src/hooks/useOutsideAlerter.ts +25 -25
  52. package/src/index.tsx +25 -24
  53. package/src/libs/StringHelpers.ts +3 -3
  54. package/src/mocks/atlas/icons/icons.json +303 -303
  55. package/src/mocks/atlas/items/items.json +5195 -5195
  56. package/src/mocks/equipmentSet.mocks.ts +347 -347
  57. package/src/mocks/itemContainer.mocks.ts +249 -249
  58. package/src/mocks/skills.mocks.ts +122 -116
  59. package/src/types/eventTypes.ts +4 -4
  60. package/src/types/index.d.ts +2 -2
package/src/components/SkillProgressBar.tsx CHANGED
@@ -1,124 +1,124 @@
1
- import { getSPForLevel } from '@rpg-engine/shared';
2
- import React from 'react';
3
- import styled from 'styled-components';
4
- import atlasJSON from '../mocks/atlas/items/items.json';
5
- import atlasIMG from '../mocks/atlas/items/items.png';
6
- import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
7
- import { SimpleProgressBar } from './SimpleProgressBar';
8
-
9
- export interface ISkillProgressBarProps {
10
- skillName: string;
11
- bgColor: string;
12
- level: number;
13
- skillPoints: number;
14
- skillPointsToNextLevel?: number;
15
- texturePath: string;
16
- showSkillPoints?: boolean;
17
- }
18
-
19
- export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
20
- bgColor,
21
- skillName,
22
- level,
23
- skillPoints,
24
- texturePath,
25
- showSkillPoints = true,
26
- }) => {
27
- const spForNextLevel = getSPForLevel(level + 1);
28
-
29
- const ratio = (skillPoints / spForNextLevel) * 100;
30
-
31
- return (
32
- <>
33
- <ProgressTitle>
34
- <TitleName>{skillName}</TitleName>
35
- <ValueDisplay>lv {level}</ValueDisplay>
36
- </ProgressTitle>
37
- <ProgressBody>
38
- <ProgressIconContainer>
39
- {atlasIMG && atlasJSON ? (
40
- <SpriteContainer>
41
- <SpriteFromAtlas
42
- atlasIMG={atlasIMG}
43
- atlasJSON={atlasJSON}
44
- spriteKey={texturePath}
45
- imgScale={1}
46
- grayScale
47
- opacity={0.5}
48
- />
49
- </SpriteContainer>
50
- ) : (
51
- <></>
52
- )}
53
- </ProgressIconContainer>
54
-
55
- <ProgressBarContainer>
56
- <SimpleProgressBar value={ratio} bgColor={bgColor} />
57
- </ProgressBarContainer>
58
- </ProgressBody>
59
- {showSkillPoints && (
60
- <SkillDisplayContainer>
61
- <SkillPointsDisplay>
62
- {skillPoints}/{spForNextLevel}
63
- </SkillPointsDisplay>
64
- </SkillDisplayContainer>
65
- )}
66
- </>
67
- );
68
- };
69
-
70
- const ProgressBarContainer = styled.div`
71
- position: relative;
72
- top: 8px;
73
- width: 100%;
74
- height: auto;
75
- `;
76
-
77
- const SpriteContainer = styled.div`
78
- position: relative;
79
- top: -3px;
80
- left: 0;
81
- `;
82
-
83
- const SkillDisplayContainer = styled.div`
84
- margin: 5px auto;
85
-
86
- p {
87
- margin: 0;
88
- }
89
- `;
90
-
91
- const SkillPointsDisplay = styled.p`
92
- font-size: 0.6rem !important;
93
- font-weight: bold;
94
- text-align: center;
95
- `;
96
-
97
- const TitleName = styled.span`
98
- margin-left: 5px;
99
- `;
100
-
101
- const ValueDisplay = styled.span``;
102
-
103
- const ProgressIconContainer = styled.div`
104
- display: flex;
105
- justify-content: center;
106
- align-items: center;
107
- `;
108
-
109
- const ProgressBody = styled.div`
110
- display: flex;
111
- flex-direction: row;
112
- width: 100%;
113
- `;
114
-
115
- const ProgressTitle = styled.div`
116
- width: 100%;
117
- display: flex;
118
- flex-direction: row;
119
- justify-content: space-between;
120
- span {
121
- font-size: 0.6rem;
122
- }
123
- margin-top: 10px;
124
- `;
1
+ import { getSPForLevel } from '@rpg-engine/shared';
2
+ import React from 'react';
3
+ import styled from 'styled-components';
4
+ import atlasJSON from '../mocks/atlas/items/items.json';
5
+ import atlasIMG from '../mocks/atlas/items/items.png';
6
+ import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
7
+ import { SimpleProgressBar } from './SimpleProgressBar';
8
+
9
+ export interface ISkillProgressBarProps {
10
+ skillName: string;
11
+ bgColor: string;
12
+ level: number;
13
+ skillPoints: number;
14
+ skillPointsToNextLevel?: number;
15
+ texturePath: string;
16
+ showSkillPoints?: boolean;
17
+ }
18
+
19
+ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
20
+ bgColor,
21
+ skillName,
22
+ level,
23
+ skillPoints,
24
+ texturePath,
25
+ showSkillPoints = true,
26
+ }) => {
27
+ const spForNextLevel = getSPForLevel(level + 1);
28
+
29
+ const ratio = (skillPoints / spForNextLevel) * 100;
30
+
31
+ return (
32
+ <>
33
+ <ProgressTitle>
34
+ <TitleName>{skillName}</TitleName>
35
+ <ValueDisplay>lv {level}</ValueDisplay>
36
+ </ProgressTitle>
37
+ <ProgressBody>
38
+ <ProgressIconContainer>
39
+ {atlasIMG && atlasJSON ? (
40
+ <SpriteContainer>
41
+ <SpriteFromAtlas
42
+ atlasIMG={atlasIMG}
43
+ atlasJSON={atlasJSON}
44
+ spriteKey={texturePath}
45
+ imgScale={1}
46
+ grayScale
47
+ opacity={0.5}
48
+ />
49
+ </SpriteContainer>
50
+ ) : (
51
+ <></>
52
+ )}
53
+ </ProgressIconContainer>
54
+
55
+ <ProgressBarContainer>
56
+ <SimpleProgressBar value={ratio} bgColor={bgColor} />
57
+ </ProgressBarContainer>
58
+ </ProgressBody>
59
+ {showSkillPoints && (
60
+ <SkillDisplayContainer>
61
+ <SkillPointsDisplay>
62
+ {skillPoints}/{spForNextLevel}
63
+ </SkillPointsDisplay>
64
+ </SkillDisplayContainer>
65
+ )}
66
+ </>
67
+ );
68
+ };
69
+
70
+ const ProgressBarContainer = styled.div`
71
+ position: relative;
72
+ top: 8px;
73
+ width: 100%;
74
+ height: auto;
75
+ `;
76
+
77
+ const SpriteContainer = styled.div`
78
+ position: relative;
79
+ top: -3px;
80
+ left: 0;
81
+ `;
82
+
83
+ const SkillDisplayContainer = styled.div`
84
+ margin: 5px auto;
85
+
86
+ p {
87
+ margin: 0;
88
+ }
89
+ `;
90
+
91
+ const SkillPointsDisplay = styled.p`
92
+ font-size: 0.6rem !important;
93
+ font-weight: bold;
94
+ text-align: center;
95
+ `;
96
+
97
+ const TitleName = styled.span`
98
+ margin-left: 5px;
99
+ `;
100
+
101
+ const ValueDisplay = styled.span``;
102
+
103
+ const ProgressIconContainer = styled.div`
104
+ display: flex;
105
+ justify-content: center;
106
+ align-items: center;
107
+ `;
108
+
109
+ const ProgressBody = styled.div`
110
+ display: flex;
111
+ flex-direction: row;
112
+ width: 100%;
113
+ `;
114
+
115
+ const ProgressTitle = styled.div`
116
+ width: 100%;
117
+ display: flex;
118
+ flex-direction: row;
119
+ justify-content: space-between;
120
+ span {
121
+ font-size: 0.6rem;
122
+ }
123
+ margin-top: 10px;
124
+ `;