@rpg-engine/long-bow 0.8.22 → 0.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/InformationCenter/InformationCenter.tsx

@@ -7,6 +7,7 @@ import {
   IInformationCenterNPC,
   IVideoGuide,
 } from '@rpg-engine/shared';
+import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
 import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
@@ -116,29 +117,33 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   ];
 
   return (
-    <Container>
-      <InternalTabs
-        tabs={tabs}
-        activeTextColor="#000000"
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        activeColor="#fef08a"
-        inactiveColor="#6b7280"
-        borderColor="#f59e0b"
-        hoverColor="#fef3c7"
-      />
-      {selectedItem && (
-        <InformationCenterItemDetails
-          item={selectedItem}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          droppedBy={bestiaryItems.filter(npc =>
-            npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
-          )}
-          onBack={() => setSelectedItem(null)}
+    <DraggableContainer title="Information Center">
+      <Container>
+        <InternalTabs
+          tabs={tabs}
+          activeTextColor="#000000"
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          activeColor="#fef08a"
+          inactiveColor="#6b7280"
+          borderColor="#f59e0b"
+          hoverColor="#fef3c7"
         />
-      )}
-    </Container>
+        {selectedItem && (
+          <InformationCenterItemDetails
+            item={selectedItem}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+            droppedBy={bestiaryItems.filter(npc =>
+              npc.loots?.some(
+                loot => loot.itemBlueprintKey === selectedItem.key
+              )
+            )}
+            onBack={() => setSelectedItem(null)}
+          />
+        )}
+      </Container>
+    </DraggableContainer>
   );
 };
 

package/src/components/InformationCenter/sections/tutorials/InformationCenterTutorialsSection.tsx

@@ -9,6 +9,7 @@ import { uiColors } from '../../../../constants/uiColors';
 import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 
+import { Ellipsis } from '../../../shared/Ellipsis';
 import { formatItemType } from '../items/InformationCenterItemsSection';
 
 interface ITutorialsSectionProps {
@@ -74,8 +75,16 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
         />
       </GuideThumbnail>
       <GuideContent>
-        <GuideTitle>{guide.title}</GuideTitle>
-        <GuideDescription>{guide.description}</GuideDescription>
+        <GuideTitle>
+          <Ellipsis maxWidth="100%" maxLines={2}>
+            {guide.title}
+          </Ellipsis>
+        </GuideTitle>
+        <GuideDescription>
+          <Ellipsis maxWidth="100%" maxLines={5}>
+            {guide.description}
+          </Ellipsis>
+        </GuideDescription>
         <GuideLabelsContainer>
           <GuideCategory>{guide.category}</GuideCategory>
           <GuideLanguage>{guide.language}</GuideLanguage>
@@ -185,6 +194,7 @@ const GuideTitle = styled.h3`
   color: ${uiColors.yellow};
   font-family: 'Press Start 2P', cursive;
   margin-bottom: 5px;
+  text-overflow: ellipsis;
 `;
 
 const GuideDescription = styled.p`
@@ -231,4 +241,5 @@ const GuideLabelsContainer = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0 6px 6px;
+  margin-top: auto;
 `;

package/src/components/InformationCenter/shared/BaseInformationDetails.tsx

@@ -49,11 +49,8 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
 };
 
 const Container = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  position: absolute;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -62,18 +59,14 @@ const Container = styled.div`
 
 const Overlay = styled.div`
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: rgba(0, 0, 0, 0.8);
 `;
 
 const Modal = styled.div`
   position: relative;
   width: 90%;
-  max-width: 800px;
-  max-height: 90vh;
+  height: 90%;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
   padding: 16px;
@@ -134,6 +127,8 @@ const Content = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+  height: 100%;
+  overflow: auto;
 `;
 
 const Title = styled.h2`

package/src/mocks/informationCenter.mocks.ts

@@ -601,7 +601,7 @@ export const mockTutorials: IVideoGuide[] = [
   },
   {
     id: '2',
-    title: 'Advanced Combat Techniques',
+    title: 'Advanced Combat Techniques for class Archer',
     description: 'Master the art of combat with advanced combos and spell casting.',
     videoUrl: 'https://youtu.be/7LQlyy0Y720?si=wZ79VC4sCsI781Mn',
     category: VideoGuideCategory.Combat,