@rpg-engine/long-bow 0.8.195 → 0.8.196
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/{SkillInfoOverlay.d.ts → SkillInfoModal.d.ts} +1 -1
- package/dist/long-bow.cjs.development.js +56 -41
- 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 +56 -41
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SkillInfoModal.tsx +147 -0
- package/src/components/SkillsContainer.tsx +2 -3
- package/src/components/SkillInfoOverlay.tsx +0 -100
package/package.json
CHANGED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { FaTimes } from 'react-icons/fa';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { ISkillInfoEntry } from '../constants/skillInfoData';
|
|
5
|
+
import ModalPortal from './Abstractions/ModalPortal';
|
|
6
|
+
|
|
7
|
+
interface IProps {
|
|
8
|
+
info: ISkillInfoEntry;
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const SkillInfoModal: React.FC<IProps> = ({ info, onClose }) => {
|
|
13
|
+
const stopPropagation = useCallback((e: React.PointerEvent) => {
|
|
14
|
+
e.stopPropagation();
|
|
15
|
+
}, []);
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<ModalPortal>
|
|
19
|
+
<Overlay onPointerDown={onClose} />
|
|
20
|
+
<ModalContainer>
|
|
21
|
+
<ModalContent onPointerDown={stopPropagation}>
|
|
22
|
+
<Header>
|
|
23
|
+
<ColorBar $color={info.color} />
|
|
24
|
+
<Title $color={info.color}>{info.name}</Title>
|
|
25
|
+
<CloseButton onPointerDown={onClose}>
|
|
26
|
+
<FaTimes />
|
|
27
|
+
</CloseButton>
|
|
28
|
+
</Header>
|
|
29
|
+
|
|
30
|
+
<Section>
|
|
31
|
+
<Label>What it does</Label>
|
|
32
|
+
<Text>{info.description}</Text>
|
|
33
|
+
</Section>
|
|
34
|
+
|
|
35
|
+
<Section>
|
|
36
|
+
<Label>How to train</Label>
|
|
37
|
+
<Text>{info.howToTrain}</Text>
|
|
38
|
+
</Section>
|
|
39
|
+
|
|
40
|
+
{info.notes && (
|
|
41
|
+
<Section>
|
|
42
|
+
<Label>Notes</Label>
|
|
43
|
+
<Text>{info.notes}</Text>
|
|
44
|
+
</Section>
|
|
45
|
+
)}
|
|
46
|
+
</ModalContent>
|
|
47
|
+
</ModalContainer>
|
|
48
|
+
</ModalPortal>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const Overlay = styled.div`
|
|
53
|
+
position: fixed;
|
|
54
|
+
inset: 0;
|
|
55
|
+
background: rgba(0, 0, 0, 0.65);
|
|
56
|
+
z-index: 1000;
|
|
57
|
+
`;
|
|
58
|
+
|
|
59
|
+
const ModalContainer = styled.div`
|
|
60
|
+
position: fixed;
|
|
61
|
+
inset: 0;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
z-index: 1001;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
`;
|
|
68
|
+
|
|
69
|
+
const ModalContent = styled.div`
|
|
70
|
+
background: #1a1a2e;
|
|
71
|
+
border: 2px solid #f59e0b;
|
|
72
|
+
border-radius: 8px;
|
|
73
|
+
padding: 20px 24px 24px;
|
|
74
|
+
width: 340px;
|
|
75
|
+
max-width: 90%;
|
|
76
|
+
max-height: 80dvh;
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
gap: 14px;
|
|
81
|
+
pointer-events: auto;
|
|
82
|
+
animation: scaleIn 0.15s ease-out;
|
|
83
|
+
|
|
84
|
+
@keyframes scaleIn {
|
|
85
|
+
from { transform: scale(0.85); opacity: 0; }
|
|
86
|
+
to { transform: scale(1); opacity: 1; }
|
|
87
|
+
}
|
|
88
|
+
`;
|
|
89
|
+
|
|
90
|
+
const Header = styled.div`
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 8px;
|
|
94
|
+
`;
|
|
95
|
+
|
|
96
|
+
const ColorBar = styled.div<{ $color: string }>`
|
|
97
|
+
width: 3px;
|
|
98
|
+
height: 1rem;
|
|
99
|
+
background: ${({ $color }) => $color};
|
|
100
|
+
border-radius: 2px;
|
|
101
|
+
flex-shrink: 0;
|
|
102
|
+
`;
|
|
103
|
+
|
|
104
|
+
const Title = styled.h3<{ $color: string }>`
|
|
105
|
+
margin: 0;
|
|
106
|
+
flex: 1;
|
|
107
|
+
font-family: 'Press Start 2P', cursive;
|
|
108
|
+
font-size: 0.65rem;
|
|
109
|
+
color: ${({ $color }) => $color};
|
|
110
|
+
`;
|
|
111
|
+
|
|
112
|
+
const CloseButton = styled.button`
|
|
113
|
+
background: none;
|
|
114
|
+
border: none;
|
|
115
|
+
color: rgba(255, 255, 255, 0.6);
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
font-size: 1rem;
|
|
118
|
+
padding: 4px;
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
pointer-events: auto;
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
color: #ffffff;
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
const Section = styled.div`
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
gap: 6px;
|
|
132
|
+
`;
|
|
133
|
+
|
|
134
|
+
const Label = styled.span`
|
|
135
|
+
font-size: 0.5rem;
|
|
136
|
+
font-weight: bold;
|
|
137
|
+
text-transform: uppercase;
|
|
138
|
+
letter-spacing: 0.05em;
|
|
139
|
+
color: rgba(255, 255, 255, 0.45);
|
|
140
|
+
`;
|
|
141
|
+
|
|
142
|
+
const Text = styled.p`
|
|
143
|
+
font-size: 0.55rem;
|
|
144
|
+
line-height: 1.6;
|
|
145
|
+
color: rgba(255, 255, 255, 0.85);
|
|
146
|
+
margin: 0;
|
|
147
|
+
`;
|
|
@@ -11,7 +11,7 @@ import styled from 'styled-components';
|
|
|
11
11
|
import { uiColors } from '../constants/uiColors';
|
|
12
12
|
import { SKILL_INFO_DATA } from '../constants/skillInfoData';
|
|
13
13
|
import { DraggableContainer } from './DraggableContainer';
|
|
14
|
-
import {
|
|
14
|
+
import { SkillInfoModal } from './SkillInfoModal';
|
|
15
15
|
import { SkillProgressBar } from './SkillProgressBar';
|
|
16
16
|
|
|
17
17
|
export interface ISkillContainerProps {
|
|
@@ -159,7 +159,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
|
|
|
159
159
|
<CloseButton onPointerDown={onCloseButton}>X</CloseButton>
|
|
160
160
|
)}
|
|
161
161
|
{selectedInfo && (
|
|
162
|
-
<
|
|
162
|
+
<SkillInfoModal
|
|
163
163
|
info={selectedInfo}
|
|
164
164
|
onClose={() => setSelectedSkillKey(null)}
|
|
165
165
|
/>
|
|
@@ -208,7 +208,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
|
|
|
208
208
|
};
|
|
209
209
|
|
|
210
210
|
const SkillsDraggableContainer = styled(DraggableContainer)`
|
|
211
|
-
position: relative;
|
|
212
211
|
border: 1px solid black;
|
|
213
212
|
|
|
214
213
|
max-width: 450px;
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { ISkillInfoEntry } from '../constants/skillInfoData';
|
|
4
|
-
|
|
5
|
-
interface IProps {
|
|
6
|
-
info: ISkillInfoEntry;
|
|
7
|
-
onClose: () => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const SkillInfoOverlay: React.FC<IProps> = ({ info, onClose }) => (
|
|
11
|
-
<Overlay>
|
|
12
|
-
<Header>
|
|
13
|
-
<ColorBar $color={info.color} />
|
|
14
|
-
<Title $color={info.color}>{info.name}</Title>
|
|
15
|
-
<CloseBtn onPointerDown={onClose}>✕</CloseBtn>
|
|
16
|
-
</Header>
|
|
17
|
-
<Section>
|
|
18
|
-
<Label>What it does</Label>
|
|
19
|
-
<Text>{info.description}</Text>
|
|
20
|
-
</Section>
|
|
21
|
-
<Section>
|
|
22
|
-
<Label>How to train</Label>
|
|
23
|
-
<Text>{info.howToTrain}</Text>
|
|
24
|
-
</Section>
|
|
25
|
-
{info.notes && (
|
|
26
|
-
<Section>
|
|
27
|
-
<Label>Notes</Label>
|
|
28
|
-
<Text>{info.notes}</Text>
|
|
29
|
-
</Section>
|
|
30
|
-
)}
|
|
31
|
-
</Overlay>
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
const Overlay = styled.div`
|
|
35
|
-
position: absolute;
|
|
36
|
-
inset: 0;
|
|
37
|
-
background: rgba(20, 20, 30, 0.97);
|
|
38
|
-
z-index: 10;
|
|
39
|
-
overflow-y: auto;
|
|
40
|
-
padding: 0.75rem;
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
gap: 0.75rem;
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
|
-
const Header = styled.div`
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
align-items: center;
|
|
50
|
-
gap: 0.4rem;
|
|
51
|
-
margin-bottom: 0.25rem;
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
const ColorBar = styled.div<{ $color: string }>`
|
|
55
|
-
width: 3px;
|
|
56
|
-
height: 1rem;
|
|
57
|
-
background: ${({ $color }) => $color};
|
|
58
|
-
border-radius: 2px;
|
|
59
|
-
flex-shrink: 0;
|
|
60
|
-
`;
|
|
61
|
-
|
|
62
|
-
const Title = styled.span<{ $color: string }>`
|
|
63
|
-
font-size: 0.65rem;
|
|
64
|
-
font-weight: bold;
|
|
65
|
-
flex: 1;
|
|
66
|
-
color: ${({ $color }) => $color};
|
|
67
|
-
`;
|
|
68
|
-
|
|
69
|
-
const CloseBtn = styled.div`
|
|
70
|
-
cursor: pointer;
|
|
71
|
-
color: rgba(255, 255, 255, 0.6);
|
|
72
|
-
font-size: 0.7rem;
|
|
73
|
-
line-height: 1;
|
|
74
|
-
padding: 2px 4px;
|
|
75
|
-
|
|
76
|
-
&:hover {
|
|
77
|
-
color: rgba(255, 255, 255, 0.9);
|
|
78
|
-
}
|
|
79
|
-
`;
|
|
80
|
-
|
|
81
|
-
const Section = styled.div`
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
gap: 0.15rem;
|
|
85
|
-
`;
|
|
86
|
-
|
|
87
|
-
const Label = styled.span`
|
|
88
|
-
font-size: 0.5rem;
|
|
89
|
-
font-weight: bold;
|
|
90
|
-
text-transform: uppercase;
|
|
91
|
-
letter-spacing: 0.05em;
|
|
92
|
-
color: rgba(255, 255, 255, 0.45);
|
|
93
|
-
`;
|
|
94
|
-
|
|
95
|
-
const Text = styled.p`
|
|
96
|
-
font-size: 0.55rem;
|
|
97
|
-
line-height: 1.5;
|
|
98
|
-
color: rgba(255, 255, 255, 0.85);
|
|
99
|
-
margin: 0;
|
|
100
|
-
`;
|