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