@rpg-engine/long-bow 0.2.20 → 0.2.22
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/components/QuestList.d.ts +1 -1
- package/dist/components/shared/Ellipsis.d.ts +7 -0
- package/dist/long-bow.cjs.development.js +52 -37
- 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 +52 -37
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/components/NPCDialog/.DS_Store +0 -0
- package/src/components/PropertySelect/PropertySelect.tsx +8 -3
- package/src/components/QuestList.tsx +15 -9
- package/src/components/shared/Ellipsis.tsx +46 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rpg-engine/long-bow",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.22",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
85
|
"@rollup/plugin-image": "^2.1.1",
|
|
86
|
-
"@rpg-engine/shared": "^0.4.
|
|
86
|
+
"@rpg-engine/shared": "^0.4.58",
|
|
87
87
|
"dayjs": "^1.11.2",
|
|
88
88
|
"fs-extra": "^10.1.0",
|
|
89
89
|
"lodash": "^4.17.21",
|
|
Binary file
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
+
import { Ellipsis } from '../shared/Ellipsis';
|
|
3
4
|
import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
|
|
4
5
|
import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
|
|
5
6
|
import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
|
|
@@ -52,9 +53,12 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
|
|
|
52
53
|
return (
|
|
53
54
|
<Container>
|
|
54
55
|
<TextOverlay>
|
|
55
|
-
<Item>
|
|
56
|
+
<Item>
|
|
57
|
+
<Ellipsis maxLines={1}>{getCurrentSelectionName()}</Ellipsis>
|
|
58
|
+
</Item>
|
|
56
59
|
</TextOverlay>
|
|
57
60
|
<div className="rpgui-progress-track"></div>
|
|
61
|
+
|
|
58
62
|
<LeftArrow onClick={onLeftClick} onTouchStart={onLeftClick}></LeftArrow>
|
|
59
63
|
<RightArrow
|
|
60
64
|
onClick={onRightClick}
|
|
@@ -70,9 +74,8 @@ const Item = styled.span`
|
|
|
70
74
|
text-align: center;
|
|
71
75
|
z-index: 1;
|
|
72
76
|
position: absolute;
|
|
73
|
-
left: 50%;
|
|
74
|
-
transform: translateX(-50%);
|
|
75
77
|
top: 12px;
|
|
78
|
+
width: 100%;
|
|
76
79
|
`;
|
|
77
80
|
|
|
78
81
|
const TextOverlay = styled.div`
|
|
@@ -106,6 +109,7 @@ const LeftArrow = styled.div`
|
|
|
106
109
|
:active {
|
|
107
110
|
background-image: url(${LeftArrowClickIcon});
|
|
108
111
|
}
|
|
112
|
+
z-index: 2;
|
|
109
113
|
`;
|
|
110
114
|
|
|
111
115
|
const RightArrow = styled.div`
|
|
@@ -118,6 +122,7 @@ const RightArrow = styled.div`
|
|
|
118
122
|
:active {
|
|
119
123
|
background-image: url(${RightArrowClickIcon});
|
|
120
124
|
}
|
|
125
|
+
z-index: 2;
|
|
121
126
|
`;
|
|
122
127
|
|
|
123
128
|
export default PropertySelect;
|
|
@@ -5,7 +5,7 @@ import { DraggableContainer } from './DraggableContainer';
|
|
|
5
5
|
import { RPGUIContainerTypes } from './RPGUIContainer';
|
|
6
6
|
|
|
7
7
|
export interface IQuestListProps {
|
|
8
|
-
quests
|
|
8
|
+
quests?: IQuest[];
|
|
9
9
|
onClose: () => void;
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -23,15 +23,21 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
|
|
|
23
23
|
<hr className="golden" />
|
|
24
24
|
|
|
25
25
|
<QuestListContainer>
|
|
26
|
-
{quests
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
26
|
+
{quests ? (
|
|
27
|
+
quests.map((quest, i) => (
|
|
28
|
+
<div className="quest-item" key={i}>
|
|
29
|
+
<span className="quest-number">{i + 1}</span>
|
|
30
|
+
<div className="quest-detail">
|
|
31
|
+
<p className="quest-detail__title">{quest.title}</p>
|
|
32
|
+
<p className="quest-detail__description">
|
|
33
|
+
{quest.description}
|
|
34
|
+
</p>
|
|
35
|
+
</div>
|
|
32
36
|
</div>
|
|
33
|
-
|
|
34
|
-
)
|
|
37
|
+
))
|
|
38
|
+
) : (
|
|
39
|
+
<div></div>
|
|
40
|
+
)}
|
|
35
41
|
</QuestListContainer>
|
|
36
42
|
</div>
|
|
37
43
|
</QuestDraggableContainer>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
interface IProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
maxLines: 1 | 2 | 3;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const Ellipsis = ({ children, maxLines }: IProps) => {
|
|
10
|
+
console.log('Ellipsis Component 2');
|
|
11
|
+
return (
|
|
12
|
+
<Container>
|
|
13
|
+
<div className={`ellipsis-${maxLines}-lines`}>{children}</div>
|
|
14
|
+
</Container>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const Container = styled.div`
|
|
19
|
+
.ellipsis-1-lines {
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
text-overflow: ellipsis;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
.ellipsis-2-lines {
|
|
25
|
+
display: -webkit-box;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
height: 25px;
|
|
28
|
+
margin: 0 auto;
|
|
29
|
+
line-height: 1;
|
|
30
|
+
-webkit-line-clamp: 2;
|
|
31
|
+
-webkit-box-orient: vertical;
|
|
32
|
+
text-overflow: ellipsis;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
.ellipsis-3-lines {
|
|
36
|
+
display: -webkit-box;
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
height: 43px;
|
|
39
|
+
margin: 0 auto;
|
|
40
|
+
line-height: 1;
|
|
41
|
+
-webkit-line-clamp: 3;
|
|
42
|
+
-webkit-box-orient: vertical;
|
|
43
|
+
text-overflow: ellipsis;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
}
|
|
46
|
+
`;
|