@rpg-engine/long-bow 0.8.30 → 0.8.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.30",
+  "version": "0.8.31",
   "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.9.104",
+    "@rpg-engine/shared": "^0.10.0",
     "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,10 +47,6 @@ 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>;
@@ -117,7 +113,10 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   ];
 
   return (
-    <DraggableContainer title="Information Center">
+    <DraggableContainer
+      title="Information Center"
+      type={RPGUIContainerTypes.Framed}
+    >
       <Container>
         <InternalTabs
           tabs={tabs}
@@ -129,19 +128,6 @@ 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,4 +1,8 @@
-import { IInformationCenterNPC, NPCAlignment } from '@rpg-engine/shared';
+import {
+  IInformationCenterNPC,
+  NPCAlignment,
+  isMobileOrTablet,
+} from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { IOptionsProps } from '../../../Dropdown';
@@ -8,6 +12,7 @@ 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>;
@@ -31,6 +36,7 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [tooltipData, setTooltipData] = useState<{
     npc: IInformationCenterNPC;
@@ -40,13 +46,12 @@ 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 (!isTouchDevice && !selectedMonster) {
+    if (!isMobile && !selectedMonster) {
       setTooltipData({
         npc: monster,
         position: { x: event.clientX, y: event.clientY },
@@ -55,13 +60,13 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   };
 
   const handleMouseLeave = () => {
-    if (!isTouchDevice) {
+    if (!isMobile) {
       setTooltipData(null);
     }
   };
 
   const handleMouseMove = (event: React.MouseEvent) => {
-    if (!isTouchDevice && tooltipData) {
+    if (!isMobile && tooltipData) {
       setTooltipData({
         ...tooltipData,
         position: { x: event.clientX, y: event.clientY },
@@ -73,18 +78,9 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     monster: IInformationCenterNPC,
     event: React.TouchEvent
   ) => {
-    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 },
-        });
-      }
-    }
+    event.preventDefault();
+    setSelectedMonster(monster);
+    setTooltipData(null);
   };
 
   const handleMonsterClick = (monster: IInformationCenterNPC) => {
@@ -170,7 +166,7 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         dependencies={[selectedBestiaryCategory]}
         itemHeight="180px"
       />
-      {tooltipData && (
+      {!isMobile && tooltipData && (
         <Portal>
           <TooltipWrapper
             style={{
@@ -188,16 +184,18 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         </Portal>
       )}
       {selectedMonster && (
-        <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)}
+          />
+        </Portal>
       )}
     </>
   );

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

@@ -265,9 +265,11 @@ const Value = styled.span`
 const StyledCollapsible = styled(Collapsible)`
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
-  overflow: auto;
+  overflow: visible;
   scrollbar-width: thin;
   scrollbar-color: ${uiColors.darkGray} transparent;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 const StatGrid = styled.div`
@@ -354,27 +356,49 @@ const Separator = styled.span`
 `;
 
 const LootSearchContainer = styled.div`
-  padding: 12px 12px 0;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  margin: 8px 8px 4px;
+  box-sizing: border-box;
 `;
 
 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-fill, minmax(200px, 1fr));
-  gap: 8px;
-  padding: 12px;
+  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;
+  }
 `;
 
 const LootItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   background: rgba(255, 255, 255, 0.05);
-  padding: 8px;
+  padding: 4px;
   border-radius: 4px;
+  min-width: 0;
 `;
 
 const LootDetails = styled.div`

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

@@ -2,11 +2,13 @@ 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';
@@ -47,6 +49,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
     'all'
@@ -90,15 +93,17 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     e: React.MouseEvent,
     item: IInformationCenterItem
   ) => {
-    setTooltipPosition({
-      x: e.clientX + TOOLTIP_OFFSET,
-      y: e.clientY,
-    });
-    setHoveredItem(item);
+    if (!isMobile) {
+      setTooltipPosition({
+        x: e.clientX + TOOLTIP_OFFSET,
+        y: e.clientY,
+      });
+      setHoveredItem(item);
+    }
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    if (hoveredItem) {
+    if (!isMobile && hoveredItem) {
       setTooltipPosition({
         x: e.clientX + TOOLTIP_OFFSET,
         y: e.clientY,
@@ -107,19 +112,17 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   };
 
   const handleMouseLeave = () => {
-    setHoveredItem(null);
+    if (!isMobile) {
+      setHoveredItem(null);
+    }
   };
 
   const handleTouchStart = (
     e: React.TouchEvent,
     item: IInformationCenterItem
   ) => {
-    const touch = e.touches[0];
-    setTooltipPosition({
-      x: touch.clientX + TOOLTIP_OFFSET,
-      y: touch.clientY,
-    });
-    setHoveredItem(item);
+    e.preventDefault();
+    setSelectedItem(item);
   };
 
   const handleItemClick = (item: IInformationCenterItem) => {
@@ -170,7 +173,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         layout="grid"
         itemHeight="180px"
       />
-      {hoveredItem && (
+      {!isMobile && hoveredItem && (
         <TooltipWrapper
           style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
         >
@@ -178,13 +181,15 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         </TooltipWrapper>
       )}
       {selectedItem && (
-        <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)}
+          />
+        </Portal>
       )}
     </>
   );

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

@@ -49,32 +49,45 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
 };
 
 const Container = styled.div`
-  position: absolute;
+  position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 9999;
 `;
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.8);
 `;
 
 const Modal = styled.div`
-  position: relative;
-  width: 90%;
-  height: 90%;
+  position: fixed;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
-  padding: 16px;
-  overflow-y: auto;
+  padding: 12px;
+  overflow: hidden;
   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;
@@ -126,9 +139,19 @@ const Header = styled.div`
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  height: 100%;
-  overflow: auto;
+  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;
+  }
 `;
 
 const Title = styled.h2`

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

@@ -1,4 +1,4 @@
-import { IItem, ItemQualityLevel } from '@rpg-engine/shared';
+import { IItem } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
@@ -6,7 +6,6 @@ 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 {
@@ -192,24 +191,8 @@ 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,11 +15,10 @@ import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
-import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
-import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
-import { qualityColorHex } from './ItemSlotQuality';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
+import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
+import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -540,17 +539,6 @@ 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/ItemSlotRenderer.tsx

@@ -1,9 +1,8 @@
 import {
-  getItemTextureKeyPath,
   IItem,
   ItemContainerType,
-  ItemQualityLevel,
   ItemSlotType,
+  getItemTextureKeyPath,
 } from '@rpg-engine/shared';
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -47,9 +46,6 @@ 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}
@@ -105,5 +101,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: 12px;
+  padding: 6px;
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -1,7 +1,6 @@
 import {
   IItem,
   IItemContainer,
-  ItemQualityLevel,
   ItemRarities,
   ItemSlotType,
   ItemSubType,
@@ -82,7 +81,6 @@ 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,
@@ -169,7 +167,6 @@ 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'],
@@ -224,7 +221,6 @@ 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',
@@ -259,7 +255,6 @@ 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',
@@ -294,7 +289,6 @@ 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',
@@ -329,7 +323,6 @@ 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

package/dist/components/Item/Inventory/ItemSlotQuality.d.ts

@@ -1,2 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-export declare const qualityColorHex: (item: IItem | null) => "#00bfff" | "#ff8c00" | "#ff00ff" | "#ffd700" | "#ff0080" | "transparent";

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

@@ -1,18 +0,0 @@
-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';
-  }
-};