@rpg-engine/long-bow 0.8.207 → 0.8.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.207",
+  "version": "0.8.209",
   "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.109",
+    "@rpg-engine/shared": "^0.10.115",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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/CharacterDetailModal.tsx

@@ -5,6 +5,7 @@ import { FaTimes } from 'react-icons/fa';
 import styled, { keyframes } from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
 import { ConfirmModal } from '../ConfirmModal';
+import { gemColors } from '../Item/Inventory/ItemGem';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -34,6 +35,12 @@ const RARITY_COLORS: Record<string, string> = {
 const rarityColor = (rarity?: string) =>
   RARITY_COLORS[(rarity ?? '').toLowerCase()] ?? RARITY_COLORS.common;
 
+const rarityGlowColor = (rarity?: string): string | null => {
+  const key = (rarity ?? '').toLowerCase();
+  if (!key || key === 'common') return null;
+  return RARITY_COLORS[key] ?? null;
+};
+
 const formatEquipmentSlot = (slot?: string) => {
   if (!slot) return 'Unknown';
 
@@ -86,9 +93,9 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
   if (!isOpen || !listing) return null;
 
   const snap = listing.characterSnapshot;
-  const topSkills = Object.entries(snap.skills ?? {})
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, 8);
+  const topSkills = Object.entries(snap.skills ?? {}).sort(
+    ([, a], [, b]) => b - a
+  );
 
   return (
     <ModalPortal>
@@ -121,83 +128,101 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
             </CloseButton>
           </Header>
 
-          <HeroSection>
-            <SpriteContainer>
-              <SpriteFromAtlas
-                atlasIMG={characterAtlasIMG}
-                atlasJSON={characterAtlasJSON}
-                spriteKey={`${snap.textureKey}/down/standing/0.png`}
-                imgScale={4}
-                height={96}
-                width={96}
-                centered
-              />
-            </SpriteContainer>
-            <HeroInfo>
-              <CharacterName>{snap.name || 'Unknown'}</CharacterName>
-              <CharacterClass>
-                Lv.{snap.level} · {snap.class}
-              </CharacterClass>
-              <CharacterOrigin>
-                {snap.race} · {snap.faction}
-              </CharacterOrigin>
-              <ModeBadge $hardcore={snap.mode?.toLowerCase() === 'hardcore'}>
-                {snap.mode || 'Standard'}
-              </ModeBadge>
-            </HeroInfo>
-          </HeroSection>
-
-          <Divider />
-
-          <MetaColumns>
-            {topSkills.length > 0 && (
-              <Section>
-                <SectionTitle>Skills</SectionTitle>
-                <SkillsList>
-                  {topSkills.map(([name, value]) => (
-                    <SkillRow key={name}>
-                      <SkillName>{name}</SkillName>
-                      <SkillValue>{value}</SkillValue>
-                    </SkillRow>
-                  ))}
-                </SkillsList>
-              </Section>
-            )}
-
-            {snap.equipment?.length > 0 && (
-              <Section>
-                <SectionTitle>Equipment</SectionTitle>
-                <EquipmentList>
-                  {snap.equipment.map((eq, i) => (
-                    <EquipmentRow key={i}>
-                      <EquipmentSprite>
-                        <SpriteFromAtlas
-                          atlasIMG={atlasIMG}
-                          atlasJSON={atlasJSON}
-                          spriteKey={eq.itemKey}
-                          imgScale={2}
-                          width={32}
-                          height={32}
-                          centered
-                        />
-                      </EquipmentSprite>
-                      <EquipMeta>
-                        <EquipName>{eq.itemName}</EquipName>
-                        <EquipDetails>
-                          <EquipSlot>{formatEquipmentSlot(eq.slot)}</EquipSlot>
-                          <RarityBadge $rarity={eq.rarity}>
-                            {eq.rarity || 'Common'}
-                          </RarityBadge>
-                        </EquipDetails>
-                      </EquipMeta>
-                    </EquipmentRow>
-                  ))}
-                </EquipmentList>
-              </Section>
-            )}
-          </MetaColumns>
-
-          <Divider />
+          <ScrollableBody>
+            <HeroSection>
+              <SpriteContainer>
+                <SpriteFromAtlas
+                  atlasIMG={characterAtlasIMG}
+                  atlasJSON={characterAtlasJSON}
+                  spriteKey={`${snap.textureKey}/down/standing/0.png`}
+                  imgScale={4}
+                  height={96}
+                  width={96}
+                  centered
+                />
+              </SpriteContainer>
+              <HeroInfo>
+                <CharacterName>{snap.name || 'Unknown'}</CharacterName>
+                <CharacterClass>
+                  Lv.{snap.level} · {snap.class}
+                </CharacterClass>
+                <CharacterOrigin>
+                  {snap.race} · {snap.faction}
+                </CharacterOrigin>
+                <ModeBadge $hardcore={snap.mode?.toLowerCase() === 'hardcore'}>
+                  {snap.mode || 'Standard'}
+                </ModeBadge>
+                {snap.gold != null && snap.gold > 0 && (
+                  <GoldRow>
+                    <GoldLabel>GOLD</GoldLabel>
+                    <GoldAmount>{snap.gold.toLocaleString()}</GoldAmount>
+                  </GoldRow>
+                )}
+              </HeroInfo>
+            </HeroSection>
+
+            <Divider />
+
+            <MetaColumns>
+              {topSkills.length > 0 && (
+                <Section>
+                  <SectionTitle>Skills</SectionTitle>
+                  <SkillsList>
+                    {topSkills.map(([name, value]) => (
+                      <SkillRow key={name}>
+                        <SkillName>{name}</SkillName>
+                        <SkillValue>{value}</SkillValue>
+                      </SkillRow>
+                    ))}
+                  </SkillsList>
+                </Section>
+              )}
+
+              {snap.equipment?.length > 0 && (
+                <Section>
+                  <SectionTitle>Equipment</SectionTitle>
+                  <EquipmentList>
+                    {snap.equipment.map((eq, i) => (
+                      <EquipmentRow key={i}>
+                        <EquipmentSprite $rarity={eq.rarity}>
+                          <SpriteFromAtlas
+                            atlasIMG={atlasIMG}
+                            atlasJSON={atlasJSON}
+                            spriteKey={eq.itemKey}
+                            imgScale={2}
+                            width={32}
+                            height={32}
+                            centered
+                          />
+                          {eq.attachedGems && eq.attachedGems.length > 0 && (
+                            <GemRow>
+                              {eq.attachedGems.map((gem, gi) => (
+                                <GemDot
+                                  key={gi}
+                                  $color={gemColors[gem.key] ?? '#fff'}
+                                />
+                              ))}
+                            </GemRow>
+                          )}
+                        </EquipmentSprite>
+                        <EquipMeta>
+                          <EquipName>{eq.itemName}</EquipName>
+                          <EquipDetails>
+                            <EquipSlot>{formatEquipmentSlot(eq.slot)}</EquipSlot>
+                            <RarityBadge $rarity={eq.rarity}>
+                              {eq.rarity || 'Common'}
+                            </RarityBadge>
+                          </EquipDetails>
+                        </EquipMeta>
+                      </EquipmentRow>
+                    ))}
+                  </EquipmentList>
+                </Section>
+              )}
+            </MetaColumns>
+          </ScrollableBody>
+
+          <FooterDivider />
 
           <Footer>
             <SellerInfo>Listed by {listing.listedByCharacterName}</SellerInfo>
@@ -257,29 +282,16 @@ const ModalContent = styled.div`
   background: #1a1a2e;
   border: 2px solid #f59e0b;
   border-radius: 8px;
-  padding: 20px 24px;
+  padding: 20px 24px 16px;
   width: 580px;
   max-width: 96%;
   max-height: 85dvh;
   display: flex;
   flex-direction: column;
   gap: 14px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   pointer-events: auto;
   animation: ${scaleIn} 0.15s ease-out;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(245, 158, 11, 0.3);
-    border-radius: 4px;
-  }
 `;
 
 const Header = styled.div`
@@ -377,6 +389,30 @@ const Divider = styled.hr`
   flex-shrink: 0;
 `;
 
+const FooterDivider = styled(Divider)``;
+
+const ScrollableBody = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(245, 158, 11, 0.3);
+    border-radius: 4px;
+  }
+`;
+
 const Section = styled.div`
   display: flex;
   flex-direction: column;
@@ -445,13 +481,66 @@ const EquipmentRow = styled.div`
   min-width: 0;
 `;
 
-const EquipmentSprite = styled.div`
+const EquipmentSprite = styled.div<{ $rarity?: string }>`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   flex-shrink: 0;
+  border-radius: 3px;
+  ${({ $rarity }) => {
+    const color = rarityGlowColor($rarity);
+    return color
+      ? `box-shadow: 0 0 4px 3px ${color} inset, 0 0 6px 2px ${color};`
+      : '';
+  }}
+`;
+
+const GemRow = styled.div`
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  display: flex;
+  gap: 1px;
+  pointer-events: none;
+`;
+
+const GemDot = styled.div<{ $color: string }>`
+  width: 5px;
+  height: 5px;
+  border-radius: 1px;
+  transform: rotate(45deg);
+  background: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8),
+    transparent 40%
+  ),
+  linear-gradient(45deg, ${({ $color }) => $color}, rgba(255, 255, 255, 0.2));
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 3px ${({ $color }) => $color};
+`;
+
+const GoldRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+`;
+
+const GoldLabel = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #6b7280 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const GoldAmount = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.38rem !important;
+  color: #fde68a !important;
 `;
 
 const EquipMeta = styled.div`

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