@rpg-engine/long-bow 0.8.208 → 0.8.209

package/package.json

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

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -27,6 +27,7 @@ export interface IBuyOrderDetailsModalProps {
   atlasIMG: any;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
+  scale?: number;
 }
 
 const scaleIn = keyframes`
@@ -57,6 +58,7 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
   atlasIMG,
   enableHotkeys,
   disableHotkeys,
+  scale,
 }) => {
   if (!isOpen || !blueprint) return null;
 
@@ -73,7 +75,7 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
   return (
     <ModalPortal>
       <Overlay onPointerDown={handleClose} />
-      <ModalContainer>
+      <ModalContainer $scale={scale}>
         <ModalContent
           onClick={stopPropagation as React.MouseEventHandler}
           onPointerDown={stopPropagation as React.PointerEventHandler}
@@ -162,7 +164,7 @@ const Overlay = styled.div`
   z-index: 1000;
 `;
 
-const ModalContainer = styled.div`
+const ModalContainer = styled.div<{ $scale?: number }>`
   position: fixed;
   inset: 0;
   display: flex;
@@ -170,6 +172,7 @@ const ModalContainer = styled.div`
   justify-content: center;
   z-index: 1001;
   pointer-events: none;
+  ${({ $scale }) => $scale !== undefined && $scale !== 1 ? `transform: scale(${$scale});` : ''}
 `;
 
 const ModalContent = styled.div`

package/src/components/Marketplace/BuyOrderPanel.tsx

@@ -35,6 +35,7 @@ export interface IBuyOrderPanelProps {
   onCancelBuyOrder: (buyOrderId: string) => void;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
+  scale?: number;
 }
 
 const BUY_ORDERS_PER_PAGE = 5;
@@ -60,6 +61,7 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
     onCancelBuyOrder,
     enableHotkeys,
     disableHotkeys,
+    scale,
   } = props;
 
   // Local blueprint display: cleared immediately on Place Request so the
@@ -111,6 +113,7 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
           atlasIMG={atlasIMG}
           enableHotkeys={enableHotkeys}
           disableHotkeys={disableHotkeys}
+          scale={scale}
         />
       )}
 

package/src/components/Marketplace/Marketplace.tsx

@@ -136,6 +136,7 @@ export interface IMarketPlaceProps {
   characterListingsLoading?: boolean;
   characterNameFilter?: string;
   onCharacterNameFilterChange?: (name: string) => void;
+  fullScreen?: boolean;
 }
 
 type ActiveTab = 'marketplace' | 'characters' | 'sell' | 'buy-orders' | 'history' | 'wallet' | 'settings';
@@ -200,6 +201,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
     onCharacterNameFilterChange,
     characterAtlasIMG,
     characterAtlasJSON,
+    fullScreen = false,
   } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
@@ -233,6 +235,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
       onCloseButton={() => {
         if (onClose) onClose();
       }}
+      isFullScreen={fullScreen}
       width="920px"
       cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
@@ -375,6 +378,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             onCancelBuyOrder={onCancelBuyOrder ?? (() => {})}
             enableHotkeys={props.enableHotkeys}
             disableHotkeys={props.disableHotkeys}
+            scale={scale}
           />
           <BlueprintSearchModal
             isOpen={isBlueprintSearchOpen}

package/src/components/Store/Store.tsx

@@ -4,7 +4,7 @@ import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
 import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
-import { FaHistory, FaShoppingCart, FaTicketAlt, FaWallet } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart, FaTicketAlt, FaUsers, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -22,7 +22,7 @@ import { StoreRedeemSection } from './sections/StoreRedeemSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
 // Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history' | 'redeem';
+type TabId = 'premium' | 'packs' | 'items' | 'characters' | 'wallet' | 'history' | 'redeem';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
@@ -44,8 +44,11 @@ export interface IStoreProps {
   defaultActiveTab?: TabId;
   textInputItemKeys?: string[];
   customPacksContent?: React.ReactNode;
+  customCharactersContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
   customHistoryContent?: React.ReactNode;
+  /** When true the store renders full-screen (useful on mobile). */
+  fullScreen?: boolean;
   packsBadge?: string;
   featuredItems?: IFeaturedItem[];
   onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
@@ -103,8 +106,10 @@ export const Store: React.FC<IStoreProps> = ({
   defaultActiveTab,
   textInputItemKeys = [],
   customPacksContent,
+  customCharactersContent,
   customWalletContent,
   customHistoryContent,
+  fullScreen = false,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -241,6 +246,7 @@ export const Store: React.FC<IStoreProps> = ({
   // Build tabs dynamically based on props
   const tabIds: TabId[] = [
     ...(tabOrder ?? defaultTabOrder),
+    ...(customCharactersContent ? ['characters' as TabId] : []),
     ...(onRedeem ? ['redeem' as TabId] : []),
     ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
     ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
@@ -347,6 +353,12 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
+    characters: {
+      id: 'characters',
+      title: 'Characters',
+      icon: <FaUsers size={16} />,
+      content: customCharactersContent ?? null,
+    },
     redeem: {
       id: 'redeem',
       title: 'Redeem',
@@ -390,6 +402,7 @@ export const Store: React.FC<IStoreProps> = ({
       height="auto"
       type={RPGUIContainerTypes.Framed}
       cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
+      isFullScreen={fullScreen}
     >
       {isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? (
         <MetadataCollector