@rpg-engine/long-bow 0.1.86 → 0.1.87

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 (8) hide show
  1. package/dist/long-bow.cjs.development.js +73 -124
  2. package/dist/long-bow.cjs.development.js.map +1 -1
  3. package/dist/long-bow.cjs.production.min.js +1 -1
  4. package/dist/long-bow.cjs.production.min.js.map +1 -1
  5. package/dist/long-bow.esm.js +73 -124
  6. package/dist/long-bow.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/SkillsContainer.tsx +85 -141
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpg-engine/long-bow",
3
- "version": "0.1.86",
3
+ "version": "0.1.87",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/SkillsContainer.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { ISkill } from '@rpg-engine/shared';
1
+ import { ISkill, ISkillDetails } from '@rpg-engine/shared';
2
+ import _ from 'lodash';
2
3
  import React from 'react';
3
4
  import styled from 'styled-components';
4
5
  import { colors } from '../constants/uiColors';
@@ -10,10 +11,74 @@ export interface ISkillContainerProps {
10
11
  onCloseButton: () => void;
11
12
  }
12
13
 
14
+ const skillProps = {
15
+ attributes: {
16
+ color: colors.cardinal,
17
+ values: {
18
+ stamina: 'spell-icons/regenerate.png',
19
+ magic: 'spell-icons/fireball.png',
20
+ magicResistance: 'spell-icons/freeze.png',
21
+ strength: 'spell-icons/enchanted-blow.png',
22
+ resistance: 'spell-icons/magic-shield.png',
23
+ dexterity: 'spell-icons/haste.png',
24
+ },
25
+ },
26
+ combat: {
27
+ color: colors.purple,
28
+ values: {
29
+ first: 'gloves/leather-gloves.png',
30
+ club: 'maces/club.png',
31
+ sword: 'swords/double-edged-sword.png',
32
+ axe: 'axes/double-axe.png',
33
+ distance: 'bows/horse-bow.png',
34
+ shielding: 'shields/studded-shield.png',
35
+ dagger: 'daggers/dagger.png',
36
+ },
37
+ },
38
+ crafting: {
39
+ color: colors.blue,
40
+ values: {
41
+ fishing: 'foods/fish.png',
42
+ mining: 'crafting-resources/iron-ingot.png',
43
+ lumberjacking: 'crafting-resources/greater-wood-log.png',
44
+ cooking: 'foods/chickens-meat.png',
45
+ alchemy: 'potions/greater-mana-potion.png',
46
+ },
47
+ },
48
+ };
49
+
13
50
  export const SkillsContainer: React.FC<ISkillContainerProps> = ({
14
51
  onCloseButton,
15
52
  skill,
16
53
  }) => {
54
+ const onRenderSkillCategory = (
55
+ category: 'attributes' | 'combat' | 'crafting'
56
+ ) => {
57
+ const skillCategory = skillProps[category];
58
+
59
+ const skillCategoryColor = skillCategory.color;
60
+
61
+ const output = [];
62
+
63
+ for (const [key, value] of Object.entries(skillCategory.values)) {
64
+ //@ts-ignore
65
+ const skillDetails = (skill[key] as unknown) as ISkillDetails;
66
+
67
+ output.push(
68
+ <SkillProgressBar
69
+ skillName={_.capitalize(key)}
70
+ bgColor={skillCategoryColor}
71
+ level={skillDetails.level || 0}
72
+ skillPoints={skillDetails.skillPoints || 0}
73
+ skillPointsToNextLevel={skillDetails.skillPointsToNextLevel || 0}
74
+ texturePath={value}
75
+ />
76
+ );
77
+ }
78
+
79
+ return output;
80
+ };
81
+
17
82
  return (
18
83
  <SkillsDraggableContainer title="Skills">
19
84
  {onCloseButton && (
@@ -22,158 +87,37 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
22
87
  </CloseButton>
23
88
  )}
24
89
  <SkillSplitDiv>
90
+ <p>General</p>
91
+ <hr className="golden" />
92
+
93
+ <SkillProgressBar
94
+ skillName={'Level'}
95
+ bgColor={colors.navyBlue}
96
+ level={skill.level || 0}
97
+ skillPoints={skill.experience || 0}
98
+ skillPointsToNextLevel={skill.xpToNextLevel || 0}
99
+ texturePath={'swords/broad-sword.png'}
100
+ />
101
+
25
102
  <p>Combat Skills</p>
26
103
  <hr className="golden" />
27
104
  </SkillSplitDiv>
28
- <SkillProgressBar
29
- skillName={'First'}
30
- bgColor={colors.cardinal}
31
- level={skill?.first?.level || 0}
32
- skillPoints={skill?.first?.skillPoints || 0}
33
- skillPointsToNextLevel={skill?.first?.skillPointsToNextLevel || 0}
34
- texturePath={'gloves/leather-gloves.png'}
35
- />
36
- <SkillProgressBar
37
- skillName={'Club'}
38
- bgColor={colors.cardinal}
39
- level={skill?.club?.level || 0}
40
- skillPoints={skill?.club?.skillPoints || 0}
41
- skillPointsToNextLevel={skill?.club?.skillPointsToNextLevel || 0}
42
- texturePath={'maces/club.png'}
43
- />
44
- <SkillProgressBar
45
- skillName={'Sword'}
46
- bgColor={colors.cardinal}
47
- level={skill?.sword?.level || 0}
48
- skillPoints={skill?.sword?.skillPoints || 0}
49
- skillPointsToNextLevel={skill?.sword?.skillPointsToNextLevel || 0}
50
- texturePath={'swords/double-edged-sword.png'}
51
- />
52
- <SkillProgressBar
53
- skillName={'Axe'}
54
- bgColor={colors.cardinal}
55
- level={skill?.axe?.level || 0}
56
- skillPoints={skill?.axe?.skillPoints || 0}
57
- skillPointsToNextLevel={skill?.axe?.skillPointsToNextLevel || 0}
58
- texturePath={'axes/double-axe.png'}
59
- />
60
- <SkillProgressBar
61
- skillName={'Distance'}
62
- bgColor={colors.cardinal}
63
- level={skill?.distance?.level || 0}
64
- skillPoints={skill?.distance?.skillPoints || 0}
65
- skillPointsToNextLevel={skill?.distance?.skillPointsToNextLevel || 0}
66
- texturePath={'bows/horse-bow.png'}
67
- />
68
- <SkillProgressBar
69
- skillName={'Shielding'}
70
- bgColor={colors.cardinal}
71
- level={skill?.shielding?.level || 0}
72
- skillPoints={skill?.shielding?.skillPoints || 0}
73
- skillPointsToNextLevel={skill?.shielding?.skillPointsToNextLevel || 0}
74
- texturePath={'shields/studded-shield.png'}
75
- />
105
+
106
+ {onRenderSkillCategory('combat')}
107
+
76
108
  <SkillSplitDiv>
77
109
  <p>Crafting Skills</p>
78
110
  <hr className="golden" />
79
111
  </SkillSplitDiv>
80
- <SkillProgressBar
81
- skillName={'Fishing'}
82
- bgColor={colors.blue}
83
- level={skill?.fishing?.level || 0}
84
- skillPoints={skill?.fishing?.skillPoints || 0}
85
- skillPointsToNextLevel={skill?.fishing?.skillPointsToNextLevel || 0}
86
- texturePath={'foods/fish.png'}
87
- />
88
- <SkillProgressBar
89
- skillName={'Mining'}
90
- bgColor={colors.blue}
91
- level={skill?.mining?.level || 0}
92
- skillPoints={skill?.mining?.skillPoints || 0}
93
- skillPointsToNextLevel={skill?.mining?.skillPointsToNextLevel || 0}
94
- texturePath={'crafting-resources/iron-ingot.png'}
95
- />
96
- <SkillProgressBar
97
- skillName={'Lumberjacking'}
98
- bgColor={colors.blue}
99
- level={skill?.lumberjacking?.level || 0}
100
- skillPoints={skill?.lumberjacking?.skillPoints || 0}
101
- skillPointsToNextLevel={
102
- skill?.lumberjacking?.skillPointsToNextLevel || 0
103
- }
104
- texturePath={'crafting-resources/greater-wood-log.png'}
105
- />
106
- <SkillProgressBar
107
- skillName={'Cooking'}
108
- bgColor={colors.blue}
109
- level={skill?.cooking?.level || 0}
110
- skillPoints={skill?.cooking?.skillPoints || 0}
111
- skillPointsToNextLevel={skill?.cooking?.skillPointsToNextLevel || 0}
112
- texturePath={'foods/chickens-meat.png'}
113
- />
114
- <SkillProgressBar
115
- skillName={'Alchemy'}
116
- bgColor={colors.blue}
117
- level={skill?.alchemy?.level || 0}
118
- skillPoints={skill?.alchemy?.skillPoints || 0}
119
- skillPointsToNextLevel={skill?.alchemy?.skillPointsToNextLevel || 0}
120
- texturePath={'potions/greater-mana-potion.png'}
121
- />
112
+
113
+ {onRenderSkillCategory('crafting')}
122
114
 
123
115
  <SkillSplitDiv>
124
116
  <p>Basic Attributes</p>
125
117
  <hr className="golden" />
126
118
  </SkillSplitDiv>
127
- <SkillProgressBar
128
- skillName={'Stamina'}
129
- bgColor={colors.darkYellow}
130
- level={skill?.stamina?.level || 0}
131
- skillPoints={skill?.stamina?.skillPoints || 0}
132
- skillPointsToNextLevel={skill?.stamina?.skillPointsToNextLevel || 0}
133
- texturePath={'spell-icons/regenerate.png'}
134
- />
135
- <SkillProgressBar
136
- skillName={'Magic'}
137
- bgColor={colors.purple}
138
- level={skill?.magic?.level || 0}
139
- skillPoints={skill?.magic?.skillPoints || 0}
140
- skillPointsToNextLevel={skill?.magic?.skillPointsToNextLevel || 0}
141
- texturePath={'spell-icons/fireball.png'}
142
- />
143
- <SkillProgressBar
144
- skillName={'Magic Resistance'}
145
- bgColor={colors.navyBlue}
146
- level={skill?.magicResistance?.level || 0}
147
- skillPoints={skill?.magicResistance?.skillPoints || 0}
148
- skillPointsToNextLevel={
149
- skill?.magicResistance?.skillPointsToNextLevel || 0
150
- }
151
- texturePath={'spell-icons/freeze.png'}
152
- />
153
- <SkillProgressBar
154
- skillName={'Strength'}
155
- bgColor={colors.cardinal}
156
- level={skill?.strength?.level || 0}
157
- skillPoints={skill?.strength?.skillPoints || 0}
158
- skillPointsToNextLevel={skill?.strength?.skillPointsToNextLevel || 0}
159
- texturePath={'spell-icons/enchanted-blow.png'}
160
- />
161
- <SkillProgressBar
162
- skillName={'Resistance'}
163
- bgColor={colors.raisinBlack}
164
- level={skill?.resistance?.level || 0}
165
- skillPoints={skill?.resistance?.skillPoints || 0}
166
- skillPointsToNextLevel={skill?.resistance?.skillPointsToNextLevel || 0}
167
- texturePath={'spell-icons/magic-shield.png'}
168
- />
169
- <SkillProgressBar
170
- skillName={'Dexterity'}
171
- bgColor={colors.blue}
172
- level={skill?.dexterity?.level || 0}
173
- skillPoints={skill?.dexterity?.skillPoints || 0}
174
- skillPointsToNextLevel={skill?.dexterity?.skillPointsToNextLevel || 0}
175
- texturePath={'spell-icons/haste.png'}
176
- />
119
+
120
+ {onRenderSkillCategory('attributes')}
177
121
 
178
122
  {/* <SkillSplitDiv>
179
123
  <p>Magic Skills</p>