@rpg-engine/long-bow 0.8.23 → 0.8.25
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 +10 -8
- 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 +10 -8
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InformationCenter/InformationCenter.tsx +27 -22
- package/src/components/InformationCenter/sections/bestiary/InformationCenterNPCDetails.tsx +3 -1
- package/src/components/InformationCenter/sections/items/InformationCenterItemDetails.tsx +3 -1
- package/src/components/InformationCenter/shared/BaseInformationDetails.tsx +6 -13
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
IInformationCenterNPC,
|
|
8
8
|
IVideoGuide,
|
|
9
9
|
} from '@rpg-engine/shared';
|
|
10
|
+
import { DraggableContainer } from '../DraggableContainer';
|
|
10
11
|
import { InternalTabs } from '../InternalTabs/InternalTabs';
|
|
11
12
|
import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
|
|
12
13
|
import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
|
|
@@ -116,29 +117,33 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
|
|
|
116
117
|
];
|
|
117
118
|
|
|
118
119
|
return (
|
|
119
|
-
<
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
{selectedItem && (
|
|
131
|
-
<InformationCenterItemDetails
|
|
132
|
-
item={selectedItem}
|
|
133
|
-
itemsAtlasJSON={itemsAtlasJSON}
|
|
134
|
-
itemsAtlasIMG={itemsAtlasIMG}
|
|
135
|
-
droppedBy={bestiaryItems.filter(npc =>
|
|
136
|
-
npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
|
|
137
|
-
)}
|
|
138
|
-
onBack={() => setSelectedItem(null)}
|
|
120
|
+
<DraggableContainer title="Information Center">
|
|
121
|
+
<Container>
|
|
122
|
+
<InternalTabs
|
|
123
|
+
tabs={tabs}
|
|
124
|
+
activeTextColor="#000000"
|
|
125
|
+
activeTab={activeTab}
|
|
126
|
+
onTabChange={setActiveTab}
|
|
127
|
+
activeColor="#fef08a"
|
|
128
|
+
inactiveColor="#6b7280"
|
|
129
|
+
borderColor="#f59e0b"
|
|
130
|
+
hoverColor="#fef3c7"
|
|
139
131
|
/>
|
|
140
|
-
|
|
141
|
-
|
|
132
|
+
{selectedItem && (
|
|
133
|
+
<InformationCenterItemDetails
|
|
134
|
+
item={selectedItem}
|
|
135
|
+
itemsAtlasJSON={itemsAtlasJSON}
|
|
136
|
+
itemsAtlasIMG={itemsAtlasIMG}
|
|
137
|
+
droppedBy={bestiaryItems.filter(npc =>
|
|
138
|
+
npc.loots?.some(
|
|
139
|
+
loot => loot.itemBlueprintKey === selectedItem.key
|
|
140
|
+
)
|
|
141
|
+
)}
|
|
142
|
+
onBack={() => setSelectedItem(null)}
|
|
143
|
+
/>
|
|
144
|
+
)}
|
|
145
|
+
</Container>
|
|
146
|
+
</DraggableContainer>
|
|
142
147
|
);
|
|
143
148
|
};
|
|
144
149
|
|
|
@@ -265,7 +265,9 @@ const Value = styled.span`
|
|
|
265
265
|
const StyledCollapsible = styled(Collapsible)`
|
|
266
266
|
background: rgba(255, 255, 255, 0.05);
|
|
267
267
|
border-radius: 4px;
|
|
268
|
-
overflow:
|
|
268
|
+
overflow: auto;
|
|
269
|
+
scrollbar-width: thin;
|
|
270
|
+
scrollbar-color: ${uiColors.darkGray} transparent;
|
|
269
271
|
`;
|
|
270
272
|
|
|
271
273
|
const StatGrid = styled.div`
|
|
@@ -191,7 +191,9 @@ const Value = styled.span`
|
|
|
191
191
|
const StyledCollapsible = styled(Collapsible)`
|
|
192
192
|
background: rgba(255, 255, 255, 0.05);
|
|
193
193
|
border-radius: 4px;
|
|
194
|
-
overflow:
|
|
194
|
+
overflow: auto;
|
|
195
|
+
scrollbar-width: thin;
|
|
196
|
+
scrollbar-color: ${uiColors.darkGray} transparent;
|
|
195
197
|
`;
|
|
196
198
|
|
|
197
199
|
const Description = styled.p`
|
|
@@ -49,33 +49,24 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
|
|
|
49
49
|
};
|
|
50
50
|
|
|
51
51
|
const Container = styled.div`
|
|
52
|
-
position:
|
|
53
|
-
|
|
54
|
-
left: 0;
|
|
55
|
-
right: 0;
|
|
56
|
-
bottom: 0;
|
|
52
|
+
position: absolute;
|
|
53
|
+
inset: 0;
|
|
57
54
|
display: flex;
|
|
58
55
|
justify-content: center;
|
|
59
56
|
align-items: center;
|
|
60
57
|
z-index: 1000;
|
|
61
|
-
height: 90%;
|
|
62
|
-
width: 90%;
|
|
63
58
|
`;
|
|
64
59
|
|
|
65
60
|
const Overlay = styled.div`
|
|
66
61
|
position: absolute;
|
|
67
|
-
|
|
68
|
-
left: 0;
|
|
69
|
-
right: 0;
|
|
70
|
-
bottom: 0;
|
|
62
|
+
inset: 0;
|
|
71
63
|
background-color: rgba(0, 0, 0, 0.8);
|
|
72
64
|
`;
|
|
73
65
|
|
|
74
66
|
const Modal = styled.div`
|
|
75
67
|
position: relative;
|
|
76
68
|
width: 90%;
|
|
77
|
-
|
|
78
|
-
max-height: 90vh;
|
|
69
|
+
height: 90%;
|
|
79
70
|
background-color: rgba(0, 0, 0, 0.95);
|
|
80
71
|
border-radius: 4px;
|
|
81
72
|
padding: 16px;
|
|
@@ -136,6 +127,8 @@ const Content = styled.div`
|
|
|
136
127
|
display: flex;
|
|
137
128
|
flex-direction: column;
|
|
138
129
|
gap: 16px;
|
|
130
|
+
height: 100%;
|
|
131
|
+
overflow: auto;
|
|
139
132
|
`;
|
|
140
133
|
|
|
141
134
|
const Title = styled.h2`
|