@rpg-engine/long-bow 0.8.29 → 0.8.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.29",
+  "version": "0.8.30",
   "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

@@ -9,9 +9,9 @@ import {
 } from '@rpg-engine/shared';
 import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
-import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
 import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
+import { InformationCenterItemDetails } from './sections/items/InformationCenterItemDetails';
 import { InformationCenterItemsSection } from './sections/items/InformationCenterItemsSection';
 import { InformationCenterTutorialsSection } from './sections/tutorials/InformationCenterTutorialsSection';
 
@@ -47,6 +47,10 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   initialSearchQuery = '',
 }) => {
   const [activeTab, setActiveTab] = useState('bestiary');
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
 
   if (loading) {
     return <LoadingMessage>Loading...</LoadingMessage>;
@@ -113,10 +117,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   ];
 
   return (
-    <DraggableContainer
-      title="Information Center"
-      type={RPGUIContainerTypes.Framed}
-    >
+    <DraggableContainer title="Information Center">
       <Container>
         <InternalTabs
           tabs={tabs}
@@ -128,6 +129,19 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
           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)}
+          />
+        )}
       </Container>
     </DraggableContainer>
   );

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

@@ -1,8 +1,4 @@
-import {
-  IInformationCenterNPC,
-  NPCAlignment,
-  isMobileOrTablet,
-} from '@rpg-engine/shared';
+import { IInformationCenterNPC, NPCAlignment } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { IOptionsProps } from '../../../Dropdown';
@@ -12,7 +8,6 @@ import { InformationCenterCell } from '../../InformationCenterCell';
 import { formatItemType } from '../items/InformationCenterItemsSection';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
-
 interface IBestiarySectionProps {
   bestiaryItems: IInformationCenterNPC[];
   itemsAtlasJSON: Record<string, any>;
@@ -36,7 +31,6 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   initialSearchQuery,
   tabId,
 }) => {
-  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [tooltipData, setTooltipData] = useState<{
     npc: IInformationCenterNPC;
@@ -46,12 +40,13 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     selectedMonster,
     setSelectedMonster,
   ] = useState<IInformationCenterNPC | null>(null);
+  const [isTouchDevice] = useState('ontouchstart' in window);
 
   const handleMouseEnter = (
     monster: IInformationCenterNPC,
     event: React.MouseEvent
   ) => {
-    if (!isMobile && !selectedMonster) {
+    if (!isTouchDevice && !selectedMonster) {
       setTooltipData({
         npc: monster,
         position: { x: event.clientX, y: event.clientY },
@@ -60,13 +55,13 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   };
 
   const handleMouseLeave = () => {
-    if (!isMobile) {
+    if (!isTouchDevice) {
       setTooltipData(null);
     }
   };
 
   const handleMouseMove = (event: React.MouseEvent) => {
-    if (!isMobile && tooltipData) {
+    if (!isTouchDevice && tooltipData) {
       setTooltipData({
         ...tooltipData,
         position: { x: event.clientX, y: event.clientY },
@@ -78,9 +73,18 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     monster: IInformationCenterNPC,
     event: React.TouchEvent
   ) => {
-    event.preventDefault();
-    setSelectedMonster(monster);
-    setTooltipData(null);
+    if (isTouchDevice) {
+      event.preventDefault();
+      const touch = event.touches[0];
+      if (tooltipData?.npc.id === monster.id) {
+        setTooltipData(null);
+      } else {
+        setTooltipData({
+          npc: monster,
+          position: { x: touch.clientX, y: touch.clientY },
+        });
+      }
+    }
   };
 
   const handleMonsterClick = (monster: IInformationCenterNPC) => {
@@ -166,7 +170,7 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         dependencies={[selectedBestiaryCategory]}
         itemHeight="180px"
       />
-      {!isMobile && tooltipData && (
+      {tooltipData && (
         <Portal>
           <TooltipWrapper
             style={{
@@ -184,18 +188,16 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         </Portal>
       )}
       {selectedMonster && (
-        <Portal>
-          <InformationCenterNPCDetails
-            npc={selectedMonster}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            iconAtlasIMG={iconsAtlasIMG}
-            iconAtlasJSON={iconsAtlasJSON}
-            entitiesAtlasJSON={entitiesAtlasJSON}
-            entitiesAtlasIMG={entitiesAtlasIMG}
-            onBack={() => setSelectedMonster(null)}
-          />
-        </Portal>
+        <InformationCenterNPCDetails
+          npc={selectedMonster}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          iconAtlasIMG={iconsAtlasIMG}
+          iconAtlasJSON={iconsAtlasJSON}
+          entitiesAtlasJSON={entitiesAtlasJSON}
+          entitiesAtlasIMG={entitiesAtlasIMG}
+          onBack={() => setSelectedMonster(null)}
+        />
       )}
     </>
   );

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

@@ -265,11 +265,9 @@ const Value = styled.span`
 const StyledCollapsible = styled(Collapsible)`
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
-  overflow: visible;
+  overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: ${uiColors.darkGray} transparent;
-  width: 100%;
-  box-sizing: border-box;
 `;
 
 const StatGrid = styled.div`
@@ -356,49 +354,27 @@ const Separator = styled.span`
 `;
 
 const LootSearchContainer = styled.div`
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  margin: 8px 8px 4px;
-  box-sizing: border-box;
+  padding: 12px 12px 0;
 `;
 
 const StyledSearchBar = styled(SearchBar)`
   width: 100%;
-  box-sizing: border-box;
-  input {
-    background: rgba(0, 0, 0, 0.2) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    box-sizing: border-box;
-    &:focus {
-      border-color: ${uiColors.yellow} !important;
-    }
-  }
 `;
 
 const LootGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 4px;
-  padding: 4px 8px;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    padding: 4px;
-  }
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+  padding: 12px;
 `;
 
 const LootItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   background: rgba(255, 255, 255, 0.05);
-  padding: 4px;
+  padding: 8px;
   border-radius: 4px;
-  min-width: 0;
 `;
 
 const LootDetails = styled.div`

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

@@ -2,13 +2,11 @@ import {
   IInformationCenterItem,
   IInformationCenterNPC,
   ItemType,
-  isMobileOrTablet,
 } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
-import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
 import { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
@@ -49,7 +47,6 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   initialSearchQuery,
   tabId,
 }) => {
-  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
     'all'
@@ -93,17 +90,15 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     e: React.MouseEvent,
     item: IInformationCenterItem
   ) => {
-    if (!isMobile) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY,
-      });
-      setHoveredItem(item);
-    }
+    setTooltipPosition({
+      x: e.clientX + TOOLTIP_OFFSET,
+      y: e.clientY,
+    });
+    setHoveredItem(item);
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isMobile && hoveredItem) {
+    if (hoveredItem) {
       setTooltipPosition({
         x: e.clientX + TOOLTIP_OFFSET,
         y: e.clientY,
@@ -112,17 +107,19 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   };
 
   const handleMouseLeave = () => {
-    if (!isMobile) {
-      setHoveredItem(null);
-    }
+    setHoveredItem(null);
   };
 
   const handleTouchStart = (
     e: React.TouchEvent,
     item: IInformationCenterItem
   ) => {
-    e.preventDefault();
-    setSelectedItem(item);
+    const touch = e.touches[0];
+    setTooltipPosition({
+      x: touch.clientX + TOOLTIP_OFFSET,
+      y: touch.clientY,
+    });
+    setHoveredItem(item);
   };
 
   const handleItemClick = (item: IInformationCenterItem) => {
@@ -173,7 +170,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         layout="grid"
         itemHeight="180px"
       />
-      {!isMobile && hoveredItem && (
+      {hoveredItem && (
         <TooltipWrapper
           style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
         >
@@ -181,15 +178,13 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         </TooltipWrapper>
       )}
       {selectedItem && (
-        <Portal>
-          <InformationCenterItemDetails
-            item={selectedItem}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
-            onBack={() => setSelectedItem(null)}
-          />
-        </Portal>
+        <InformationCenterItemDetails
+          item={selectedItem}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+          onBack={() => setSelectedItem(null)}
+        />
       )}
     </>
   );

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

@@ -49,45 +49,32 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
 };
 
 const Container = styled.div`
-  position: fixed;
+  position: absolute;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9999;
+  z-index: 1000;
 `;
 
 const Overlay = styled.div`
-  position: fixed;
+  position: absolute;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.8);
 `;
 
 const Modal = styled.div`
-  position: fixed;
+  position: relative;
+  width: 90%;
+  height: 90%;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
-  padding: 12px;
-  overflow: hidden;
+  padding: 16px;
+  overflow-y: auto;
   z-index: 1;
   font-family: 'Press Start 2P', cursive;
   border: 1px solid ${uiColors.darkGray};
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  width: 90%;
-  height: 90%;
-  top: 5%;
-  left: 5%;
-  max-width: 800px;
-  margin: 0 auto;
-
-  @media (max-width: 768px) {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-    padding: 8px;
-  }
 
   &::-webkit-scrollbar {
     width: 2px;
@@ -139,19 +126,9 @@ const Header = styled.div`
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  height: calc(100% - 80px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 6px;
-  margin-right: -6px;
-
-  @media (max-width: 768px) {
-    height: calc(100% - 64px);
-    gap: 8px;
-    padding-right: 4px;
-    margin-right: -4px;
-  }
+  gap: 16px;
+  height: 100%;
+  overflow: auto;
 `;
 
 const Title = styled.h2`

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);
 };

package/src/components/shared/Collapsible/Collapsible.tsx

@@ -66,5 +66,5 @@ const Icon = styled.span`
 `;
 
 const Content = styled.div`
-  padding: 6px;
+  padding: 12px;
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -1,6 +1,7 @@
 import {
   IItem,
   IItemContainer,
+  ItemQualityLevel,
   ItemRarities,
   ItemSlotType,
   ItemSubType,
@@ -81,6 +82,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Legendary,
+    quality: ItemQualityLevel.Mythic,
     canBePurchasedOnlyByPremiumPlans: [
       UserAccountTypes.PremiumGold,
       UserAccountTypes.PremiumUltimate,
@@ -167,6 +169,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Epic,
+    quality: ItemQualityLevel.Normal,
     attachedGems: [
       {
         gemEntityEffectsAdd: ['poison'],
@@ -221,6 +224,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Uncommon,
+    quality: ItemQualityLevel.HighQuality,
   },
   {
     _id: '629acek4j7c8e8002ff60034',
@@ -255,6 +259,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Rare,
+    quality: ItemQualityLevel.Ancient,
   },
   {
     _id: '629acek4j7c8e8002fg60034',
@@ -289,6 +294,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
+    quality: ItemQualityLevel.Mastercrafted,
   },
   {
     _id: '392acek4j7c8e8002ff60403',
@@ -323,6 +329,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
+    quality: ItemQualityLevel.Exceptional,
   },
   createBagItem('392acek4j7c8e8002ff60404', '#FF0000'), // red
   createBagItem('392acek4j7c8e8002ff60405', '#0000FF'), // blue