@rpg-engine/long-bow 0.1.77 → 0.1.792

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 (58) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/store/UI.store.d.ts +3 -0
  4. package/dist/long-bow.cjs.development.js +14 -5
  5. package/dist/long-bow.cjs.development.js.map +1 -1
  6. package/dist/long-bow.cjs.production.min.js +1 -1
  7. package/dist/long-bow.cjs.production.min.js.map +1 -1
  8. package/dist/long-bow.esm.js +14 -5
  9. package/dist/long-bow.esm.js.map +1 -1
  10. package/dist/mocks/skills.mocks.d.ts +6 -0
  11. package/package.json +96 -96
  12. package/src/components/Abstractions/SlotsContainer.tsx +42 -42
  13. package/src/components/Button.tsx +29 -29
  14. package/src/components/Chat/Chat.tsx +193 -193
  15. package/src/components/CheckButton.tsx +65 -65
  16. package/src/components/DraggableContainer.tsx +150 -150
  17. package/src/components/Dropdown.tsx +57 -57
  18. package/src/components/Equipment/EquipmentSet.tsx +180 -179
  19. package/src/components/Input.tsx +11 -11
  20. package/src/components/Item/Cards/ItemCard.tsx +36 -36
  21. package/src/components/Item/Inventory/ItemContainer.tsx +113 -113
  22. package/src/components/Item/Inventory/ItemSlot.tsx +158 -158
  23. package/src/components/Item/Inventory/itemContainerHelper.ts +81 -81
  24. package/src/components/ListMenu.tsx +65 -65
  25. package/src/components/Multitab/Tab.tsx +57 -57
  26. package/src/components/Multitab/TabBody.tsx +13 -13
  27. package/src/components/Multitab/TabsContainer.tsx +97 -97
  28. package/src/components/NPCDialog/NPCDialog.tsx +145 -145
  29. package/src/components/NPCDialog/NPCDialogText.tsx +53 -53
  30. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +242 -242
  31. package/src/components/ProgressBar.tsx +91 -91
  32. package/src/components/RPGUIContainer.tsx +47 -47
  33. package/src/components/RPGUIRoot.tsx +14 -14
  34. package/src/components/RadioButton.tsx +53 -53
  35. package/src/components/RangeSlider.tsx +68 -68
  36. package/src/components/ScrollList.tsx +77 -77
  37. package/src/components/SimpleProgressBar.tsx +62 -62
  38. package/src/components/SkillProgressBar.tsx +124 -124
  39. package/src/components/SkillsContainer.tsx +235 -235
  40. package/src/components/TextArea.tsx +11 -11
  41. package/src/components/Truncate.tsx +25 -25
  42. package/src/components/shared/Column.tsx +16 -16
  43. package/src/components/shared/SpriteFromAtlas.tsx +99 -99
  44. package/src/components/shared/SpriteIcon.tsx +67 -67
  45. package/src/components/store/UI.store.ts +205 -192
  46. package/src/components/typography/DynamicText.tsx +49 -49
  47. package/src/constants/uiColors.ts +10 -10
  48. package/src/hooks/useEventListener.ts +21 -21
  49. package/src/hooks/useOutsideAlerter.ts +25 -25
  50. package/src/index.tsx +25 -25
  51. package/src/libs/StringHelpers.ts +3 -3
  52. package/src/mocks/atlas/icons/icons.json +303 -303
  53. package/src/mocks/atlas/items/items.json +5195 -5195
  54. package/src/mocks/equipmentSet.mocks.ts +347 -347
  55. package/src/mocks/itemContainer.mocks.ts +249 -249
  56. package/src/mocks/skills.mocks.ts +122 -116
  57. package/src/types/eventTypes.ts +4 -4
  58. 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
+ `;