@rpg-engine/long-bow 0.8.35 → 0.8.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.35",
+  "version": "0.8.36",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.0",
+    "@rpg-engine/shared": "^0.9.104",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/InformationCenter/InformationCenter.tsx

@@ -6,7 +6,12 @@ import {
   IInformationCenterItem,
   IInformationCenterNPC,
   IVideoGuide,
+  isMobileOrTablet,
 } from '@rpg-engine/shared';
+import {
+  UI_BREAKPOINT_MOBILE,
+  UI_BREAKPOINT_SMALL_LAPTOP,
+} from '../../constants/uiBreakpoints';
 import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
@@ -45,6 +50,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   initialSearchQuery = '',
 }) => {
   const [activeTab, setActiveTab] = useState('bestiary');
+  const isMobile = isMobileOrTablet();
 
   if (loading) {
     return <LoadingMessage>Loading...</LoadingMessage>;
@@ -103,6 +109,8 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
     <DraggableContainer
       title="Information Center"
       type={RPGUIContainerTypes.Framed}
+      width={isMobile ? '95%' : '80%'}
+      minWidth="300px"
     >
       <Container>
         <InternalTabs
@@ -122,9 +130,32 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
 
 const Container = styled.div`
   width: 100%;
-  max-width: 800px;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 1rem;
+  padding: 0.125rem;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  @media (min-width: 320px) {
+    padding: 0.25rem;
+  }
+
+  @media (min-width: 360px) {
+    padding: 0.5rem;
+  }
+
+  @media (min-width: 480px) {
+    padding: 0.75rem;
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+    max-width: 900px;
+    padding: 1rem;
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_SMALL_LAPTOP}) {
+    max-width: 1200px;
+  }
 `;
 
 const LoadingMessage = styled.div`

package/src/components/InformationCenter/InformationCenterCell.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 interface IInformationCenterCellProps {
@@ -43,7 +44,9 @@ export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
           imgScale={1}
         />
       </SpriteContainer>
-      <CellName>{name}</CellName>
+      <CellNameContainer>
+        <CellName>{name}</CellName>
+      </CellNameContainer>
     </CellContainer>
   );
 };
@@ -51,19 +54,31 @@ export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
 const CellContainer = styled.div`
   position: relative;
   background: rgba(0, 0, 0, 0.2);
-  padding: 0.75rem;
+  padding: 0.25rem;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   cursor: pointer;
   transition: background-color 0.2s ease;
   width: 100%;
   height: 100%;
-  min-width: 120px;
-  min-height: 120px;
+  min-height: 135px;
   box-sizing: border-box;
+  gap: 0.25rem;
+  margin: 0;
+
+  @media (min-width: 360px) {
+    padding: 0.75rem;
+    gap: 0.75rem;
+    margin: 2px;
+    width: calc(100% - 4px);
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+    min-height: 150px;
+  }
 
   &:hover {
     background: rgba(0, 0, 0, 0.3);
@@ -71,17 +86,32 @@ const CellContainer = styled.div`
 `;
 
 const SpriteContainer = styled.div`
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 64px;
-  height: 64px;
+  width: 40px;
+  height: 40px;
   position: relative;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   flex-shrink: 0;
 
+  @media (min-width: 360px) {
+    width: 48px;
+    height: 48px;
+  }
+
+  @media (min-width: 480px) {
+    width: 64px;
+    height: 64px;
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+    width: 72px;
+    height: 72px;
+  }
+
   .sprite-from-atlas-img {
     position: absolute;
     top: 50%;
@@ -91,8 +121,18 @@ const SpriteContainer = styled.div`
   }
 `;
 
+const CellNameContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  width: 100%;
+  padding-top: 0.25rem;
+`;
+
 const CellName = styled.h3`
-  font-size: 0.7rem;
+  font-size: 0.55rem;
   color: #fef08a;
   margin: 0;
   text-align: center;
@@ -100,4 +140,25 @@ const CellName = styled.h3`
   line-height: 1.2;
   word-break: break-word;
   max-width: 100%;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  width: 100%;
+  padding: 0 0.125rem;
+  box-sizing: border-box;
+
+  @media (min-width: 320px) {
+    padding: 0 0.25rem;
+  }
+
+  @media (min-width: 360px) {
+    font-size: 0.6rem;
+  }
+
+  @media (min-width: 480px) {
+    font-size: 0.7rem;
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+    font-size: 0.8rem;
+  }
 `;

package/src/components/InformationCenter/sections/bestiary/InformationCenterBestiarySection.tsx

@@ -201,7 +201,7 @@ export const InformationCenterBestiarySection = ({
           selectedSubtype,
           selectedAttackType,
         ]}
-        itemHeight="180px"
+        itemHeight={isMobile ? '150px' : '180px'}
       />
       {!isMobile && tooltipState && tooltipState.item && (
         <Portal>

package/src/components/InformationCenter/sections/items/InformationCenterItemsSection.tsx

@@ -153,7 +153,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         dependencies={[selectedItemCategory, selectedTier]}
         tabId={tabId}
         layout="grid"
-        itemHeight="180px"
+        itemHeight={isMobile ? '150px' : '180px'}
       />
       {!isMobile && tooltipState && tooltipState.item && (
         <Portal>

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

@@ -2,6 +2,7 @@ import {
   IVideoGuide,
   VideoGuideCategory,
   VideoGuideLanguage,
+  isMobileOrTablet,
 } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
@@ -26,6 +27,7 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [, setCurrentPage] = useState(1);
@@ -81,7 +83,7 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
           </Ellipsis>
         </GuideTitle>
         <GuideDescription>
-          <Ellipsis maxWidth="100%" maxLines={5}>
+          <Ellipsis maxWidth="100%" maxLines={isMobile ? 3 : 5}>
             {guide.description}
           </Ellipsis>
         </GuideDescription>
@@ -145,9 +147,9 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
       dependencies={[selectedCategory]}
       tabId={tabId}
       layout="grid"
-      gridColumns={GRID_COLUMNS}
+      gridColumns={isMobile ? 1 : GRID_COLUMNS}
       itemsPerPage={ITEMS_PER_PAGE}
-      itemHeight="320px"
+      itemHeight={isMobile ? '280px' : '320px'}
     />
   );
 };

package/src/components/InternalTabs/InternalTabs.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
 
 interface TabItem {
   id: string;
@@ -73,14 +74,27 @@ const TabButton = styled.button<{
   hoverColor: string;
 }>`
   flex: 1;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
   font-weight: 500;
   border-right: 1px solid ${props => props.borderColor};
   background-color: ${props =>
     props.active ? props.activeColor : 'transparent'};
   color: ${props =>
     props.active ? props.activeTextColor : props.inactiveColor};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: 480px) {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+
+  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+  }
 
   &:last-child {
     border-right: none;
@@ -92,4 +106,6 @@ const TabButton = styled.button<{
   }
 `;
 
-const ContentWrapper = styled.div``;
+const ContentWrapper = styled.div`
+  width: 100%;
+`;

package/src/components/Item/Cards/ItemInfo.tsx

@@ -1,4 +1,4 @@
-import { IItem } from '@rpg-engine/shared';
+import { IItem, ItemQualityLevel } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
@@ -6,6 +6,7 @@ import { uiFonts } from '../../../constants/uiFonts';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from '../Inventory/ErrorBoundary';
 import { EquipmentSlotSpriteByType } from '../Inventory/ItemSlot';
+import { qualityColorHex } from '../Inventory/ItemSlotQuality';
 import { rarityColor } from '../Inventory/ItemSlotRarity';
 
 interface IItemInfoProps {
@@ -191,8 +192,24 @@ const Container = styled.div<{ item: IItem }>`
   padding: 0.5rem;
   font-size: ${uiFonts.size.small};
   border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
+  box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`};
   height: max-content;
   width: 18rem;
+  position: relative;
+
+  ${({ item }) =>
+    item?.quality && item.quality !== ItemQualityLevel.Normal &&
+    `
+    &::before {
+      content: '★';
+      position: absolute;
+      top: 0.2rem;
+      left: 0.5rem;
+      font-size: 1.2rem;
+      color: ${qualityColorHex(item)};
+      text-shadow: 0 0 3px black;
+    }
+  `}
 
   @media (max-width: 640px) {
     width: 80vw;

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -6,7 +6,7 @@ import {
   ItemContainerType,
   ItemSlotType,
   ItemSubType,
-  ItemType,
+  ItemType
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
@@ -15,10 +15,11 @@ import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
-import { rarityColor } from './ItemSlotRarity';
-import { ItemSlotRenderer } from './ItemSlotRenderer';
 import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
 import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
+import { qualityColorHex } from './ItemSlotQuality';
+import { rarityColor } from './ItemSlotRarity';
+import { ItemSlotRenderer } from './ItemSlotRenderer';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -539,6 +540,17 @@ const Container = styled.div<ContainerTypes>`
       ${({ item }) => `0 0 4px 3px ${rarityColor(item)}`};
   }
 
+  .quality-star {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    font-size: 1.2rem;
+    z-index: 2;
+    text-shadow: 0 0 3px black;
+    pointer-events: none;
+    color: ${({ item }) => qualityColorHex(item)};
+  }
+
   &::before {
     content: '';
     position: absolute;

package/src/components/Item/Inventory/ItemSlotQuality.ts

@@ -0,0 +1,18 @@
+import { IItem, ItemQualityLevel } from '@rpg-engine/shared';
+
+export const qualityColorHex = (item: IItem | null) => {
+  switch (item?.quality) {
+    case ItemQualityLevel.HighQuality:
+      return '#00bfff'; 
+    case ItemQualityLevel.Exceptional:
+      return '#ff8c00'; 
+    case ItemQualityLevel.Mastercrafted:
+      return '#ff00ff';
+    case ItemQualityLevel.Ancient:
+      return '#ffd700'; 
+    case ItemQualityLevel.Mythic:
+      return '#ff0080'; 
+    default:
+      return 'transparent';
+  }
+}; 

package/src/components/Item/Inventory/ItemSlotRenderer.tsx

@@ -1,8 +1,9 @@
 import {
+  getItemTextureKeyPath,
   IItem,
   ItemContainerType,
+  ItemQualityLevel,
   ItemSlotType,
-  getItemTextureKeyPath,
 } from '@rpg-engine/shared';
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -46,6 +47,9 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
 
     return (
       <ErrorBoundary key={item._id}>
+        {item.quality && item.quality !== ItemQualityLevel.Normal && (
+          <div className="quality-star">★</div>
+        )}
         <SpriteFromAtlas
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
@@ -101,5 +105,5 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
     }
   };
 
-  return <>{onRenderSlot(item)}</>;
+  return onRenderSlot(item);
 };