@rpg-engine/long-bow 0.3.49 → 0.3.50
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.
- package/dist/long-bow.cjs.development.js +13 -6
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +13 -6
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SkillsContainer.tsx +45 -36
package/package.json
CHANGED
|
@@ -113,46 +113,48 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
|
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
return (
|
|
116
|
-
<SkillsDraggableContainer title="Skills">
|
|
116
|
+
<SkillsDraggableContainer title="Skills" cancelDrag="#skillsDiv">
|
|
117
117
|
{onCloseButton && (
|
|
118
118
|
<CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
|
|
119
119
|
X
|
|
120
120
|
</CloseButton>
|
|
121
121
|
)}
|
|
122
|
-
<
|
|
123
|
-
<
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
122
|
+
<SkillsContainerDiv id="skillsDiv">
|
|
123
|
+
<SkillSplitDiv>
|
|
124
|
+
<p>General</p>
|
|
125
|
+
<hr className="golden" />
|
|
126
|
+
|
|
127
|
+
<SkillProgressBar
|
|
128
|
+
skillName={'Level'}
|
|
129
|
+
bgColor={uiColors.navyBlue}
|
|
130
|
+
level={Math.round(skill.level) || 0}
|
|
131
|
+
skillPoints={Math.round(skill.experience) || 0}
|
|
132
|
+
skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
|
|
133
|
+
texturePath={'swords/broad-sword.png'}
|
|
134
|
+
atlasIMG={atlasIMG}
|
|
135
|
+
atlasJSON={atlasJSON}
|
|
136
|
+
/>
|
|
137
|
+
|
|
138
|
+
<p>Combat Skills</p>
|
|
139
|
+
<hr className="golden" />
|
|
140
|
+
</SkillSplitDiv>
|
|
141
|
+
|
|
142
|
+
{onRenderSkillCategory('combat')}
|
|
143
|
+
|
|
144
|
+
<SkillSplitDiv>
|
|
145
|
+
<p>Crafting Skills</p>
|
|
146
|
+
<hr className="golden" />
|
|
147
|
+
</SkillSplitDiv>
|
|
148
|
+
|
|
149
|
+
{onRenderSkillCategory('crafting')}
|
|
150
|
+
|
|
151
|
+
<SkillSplitDiv>
|
|
152
|
+
<p>Basic Attributes</p>
|
|
153
|
+
<hr className="golden" />
|
|
154
|
+
</SkillSplitDiv>
|
|
155
|
+
|
|
156
|
+
{onRenderSkillCategory('attributes')}
|
|
157
|
+
</SkillsContainerDiv>
|
|
156
158
|
</SkillsDraggableContainer>
|
|
157
159
|
);
|
|
158
160
|
};
|
|
@@ -161,13 +163,20 @@ const SkillsDraggableContainer = styled(DraggableContainer)`
|
|
|
161
163
|
border: 1px solid black;
|
|
162
164
|
width: 400px;
|
|
163
165
|
height: 90%;
|
|
164
|
-
overflow-y: scroll;
|
|
165
166
|
.DraggableContainer__TitleContainer-sc-184mpyl-2 {
|
|
166
167
|
width: auto;
|
|
167
168
|
height: auto;
|
|
168
169
|
}
|
|
169
170
|
`;
|
|
170
171
|
|
|
172
|
+
const SkillsContainerDiv = styled.div`
|
|
173
|
+
width: 100%;
|
|
174
|
+
-webkit-overflow-y: scroll;
|
|
175
|
+
overflow-y: scroll;
|
|
176
|
+
height: 90%;
|
|
177
|
+
padding-right: 10px;
|
|
178
|
+
`;
|
|
179
|
+
|
|
171
180
|
const SkillSplitDiv = styled.div`
|
|
172
181
|
width: 100%;
|
|
173
182
|
font-size: 11px;
|