@rpg-engine/long-bow 0.1.79 → 0.1.82

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