@rpg-engine/long-bow 0.8.203 → 0.8.205

package/src/components/Marketplace/__test__/CharacterDetailModal.spec.tsx

@@ -0,0 +1,137 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import { ICharacterListing } from '@rpg-engine/shared';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { CharacterDetailModal } from '../CharacterDetailModal';
+
+jest.mock('../../Abstractions/ModalPortal', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('../../ConfirmModal', () => ({
+  ConfirmModal: ({ message }) => (
+    <div data-testid="confirm-modal">{message}</div>
+  ),
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: ({ spriteKey }) => (
+    <div data-testid="sprite-from-atlas" data-sprite-key={spriteKey} />
+  ),
+}));
+
+jest.mock('pixelarticons/react/ShoppingBag', () => ({
+  ShoppingBag: () => <svg data-testid="shopping-bag-icon" />,
+}));
+
+jest.mock('react-icons/fa', () => ({
+  FaTimes: () => <svg data-testid="close-icon" />,
+}));
+
+describe('CharacterDetailModal', () => {
+  let container;
+
+  const listing: ICharacterListing = {
+    _id: 'listing-1',
+    character: 'character-1',
+    seller: 'seller-1',
+    listedByCharacterName: 'TraderJoe',
+    price: 42000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'Sir Galahad',
+      level: 25,
+      class: 'Warrior',
+      race: 'Human',
+      faction: 'Alliance',
+      mode: 'Standard',
+      skills: { level: 25, sword: 10, shielding: 8 },
+      equipment: [
+        {
+          slot: 'rightHand',
+          itemName: 'Broad Sword',
+          itemKey: 'broad-sword',
+          rarity: 'Common',
+        },
+        {
+          slot: 'head',
+          itemName: 'Iron Helmet',
+          itemKey: 'iron-helmet',
+          rarity: 'Rare',
+        },
+        {
+          slot: 'armor',
+          itemName: 'Jacket',
+          itemKey: 'jacket',
+          rarity: 'Uncommon',
+        },
+      ],
+      textureKey: 'black-knight',
+    },
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+    jest.clearAllMocks();
+  });
+
+  it('renders equipment rows from the API snapshot and requests atlas sprites for each item', () => {
+    act(() => {
+      ReactDOM.render(
+        <CharacterDetailModal
+          listing={listing}
+          isOpen
+          onClose={jest.fn()}
+          onBuy={jest.fn()}
+          atlasJSON={{}}
+          atlasIMG=""
+          characterAtlasJSON={{}}
+          characterAtlasIMG=""
+        />,
+        container
+      );
+    });
+
+    expect(container.textContent).toContain('Broad Sword');
+    expect(container.textContent).toContain('Iron Helmet');
+    expect(container.textContent).toContain('Jacket');
+    expect(container.textContent).toContain('Right Hand');
+    expect(container.textContent).toContain('Head');
+    expect(container.textContent).toContain('Armor');
+
+    const spriteKeys = Array.from(
+      container.querySelectorAll('[data-testid="sprite-from-atlas"]')
+    ).map((node) => node.getAttribute('data-sprite-key'));
+
+    expect(spriteKeys).toEqual(
+      expect.arrayContaining([
+        'black-knight/down/standing/0.png',
+        'broad-sword',
+        'iron-helmet',
+        'jacket',
+        'others/definya-coin.png',
+      ])
+    );
+  });
+});

package/src/components/Store/CartView.tsx

@@ -8,6 +8,7 @@ import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { ITrustSignal, TrustBar } from './TrustBar';
 import { PurchaseSuccess } from './PurchaseSuccess';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 // Local cart item interface
 interface ICartItem {
@@ -228,7 +229,7 @@ export const CartView: React.FC<ICartViewProps> = ({
           {dcTotal > 0 && (
             <TotalRow>
               <span>DC:</span>
-              <span>{dcTotal.toLocaleString()} DC</span>
+              <span><MMORPGNumber value={dcTotal} /> DC</span>
             </TotalRow>
           )}
           <TotalRow $isTotal>

package/src/components/Store/FeaturedBanner.tsx

@@ -267,4 +267,5 @@ const CardActions = styled.div`
   display: flex;
   gap: 0.4rem;
   justify-content: flex-end;
+  flex-shrink: 0;
 `;

package/src/components/Store/PaymentMethodModal.tsx

@@ -3,6 +3,7 @@ import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
 import { Button, ButtonTypes } from '../Button';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 export interface IPaymentMethodModalProps {
   dcBalance: number;
@@ -53,9 +54,16 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   }, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
 
   const dcSubText =
-    dcRequired !== undefined
-      ? `${dcBalance.toLocaleString()} DC available · ${dcRequired.toLocaleString()} DC needed`
-      : `${dcBalance.toLocaleString()} DC available`;
+    dcRequired !== undefined ? (
+      <>
+        <MMORPGNumber value={dcBalance} /> DC available ·{' '}
+        <MMORPGNumber value={dcRequired} /> DC needed
+      </>
+    ) : (
+      <>
+        <MMORPGNumber value={dcBalance} /> DC available
+      </>
+    );
 
   return (
     <ModalPortal>

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -10,6 +10,7 @@ import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { useCharacterSkinNavigation } from '../../hooks/useCharacterSkinNavigation';
 
@@ -128,7 +129,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
                     <DCCoinWrapper $scale={0.8}>
                       <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.8} />
                     </DCCoinWrapper>
-                    {originalPrice.toLocaleString()}
+                    <MMORPGNumber value={originalPrice} />
                   </>
                 ) : `$${originalPrice.toFixed(2)}`}
             </OriginalPrice>
@@ -140,7 +141,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
                   <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={1} />
                 </SimpleTooltip>
               </DCCoinWrapper>
-              {item.price.toLocaleString()}
+              <MMORPGNumber value={item.price} />
             </ItemPrice>
           ) : (
             <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
@@ -153,7 +154,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
                         <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.9} />
                       </SimpleTooltip>
                     </DCCoinWrapper>
-                    {((item as any).dcPrice as number).toLocaleString()}
+                    <MMORPGNumber value={(item as any).dcPrice as number} />
                   </>
                 ) : ''}
             </ItemPrice>
@@ -226,6 +227,7 @@ const ItemDetails = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  min-width: 0;
 `;
 
 const ItemName = styled.div`
@@ -233,6 +235,9 @@ const ItemName = styled.div`
   font-size: 0.8125rem;
   color: #ffffff;
   text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const PriceRow = styled.div`
@@ -268,6 +273,7 @@ const Controls = styled.div`
   align-items: center;
   gap: 0.5rem;
   min-width: fit-content;
+  flex-shrink: 0;
 `;
 
 const DCCoinWrapper = styled.span<{ $scale?: number }>`

package/src/components/Store/StoreItemDetails.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { FaArrowLeft, FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 interface IStoreItemDetailsProps {
   item: IProductBlueprint | (IItemPack & { name: string; texturePath: string });
@@ -46,7 +47,14 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
             <ItemName>{item.name}</ItemName>
             <ItemPrice>
               {currencySymbol}{'priceUSD' in item ? item.priceUSD : ((item as any).regionalPrice ?? item.price)}
-              {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
+              {(item as any).dcPrice ? (
+                <>
+                  {' '}
+                  · <MMORPGNumber value={(item as any).dcPrice as number} /> DC
+                </>
+              ) : (
+                ''
+              )}
             </ItemPrice>
             <Description>{item.description}</Description>
           </ItemInfo>

package/src/components/Store/StoreItemRow.tsx

@@ -9,6 +9,7 @@ import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { useQuantityControl } from '../../hooks/useQuantityControl';
 import { IStoreBadge, StoreBadges } from './StoreBadges';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 interface IStoreItemRowProps {
   item: IProductBlueprint;
@@ -118,7 +119,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
                     <DCCoinWrapper $scale={0.8}>
                       <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.8} />
                     </DCCoinWrapper>
-                    {originalPrice.toLocaleString()}
+                    <MMORPGNumber value={originalPrice} />
                   </>
                 ) : `${currencySymbol}${originalPrice.toFixed(2)}`}
               </OriginalPrice>
@@ -130,7 +131,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
                     <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={1} />
                   </SimpleTooltip>
                 </DCCoinWrapper>
-                {item.price.toLocaleString()}
+                <MMORPGNumber value={item.price} />
               </ItemPrice>
             ) : (
               <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
@@ -143,7 +144,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
                         <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.9} />
                       </SimpleTooltip>
                     </DCCoinWrapper>
-                    {((item as any).dcPrice as number).toLocaleString()}
+                    <MMORPGNumber value={(item as any).dcPrice as number} />
                   </>
                 ) : ''}
               </ItemPrice>
@@ -244,6 +245,7 @@ const ItemDetails = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  min-width: 0;
 `;
 
 const ItemName = styled.div`
@@ -251,6 +253,9 @@ const ItemName = styled.div`
   font-size: 0.8125rem;
   color: #ffffff;
   text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const PriceRow = styled.div`
@@ -281,6 +286,10 @@ const ItemDescription = styled.div`
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.4;
   margin-top: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 `;
 
 const DCCoinWrapper = styled.span<{ $scale?: number }>`
@@ -298,6 +307,7 @@ const Controls = styled.div`
   align-items: center;
   gap: 0.75rem;
   min-width: fit-content;
+  flex-shrink: 0;
 `;
 
 const ArrowsContainer = styled.div`

package/src/components/Store/sections/StorePacksSection.tsx

@@ -214,6 +214,9 @@ const PackName = styled.div`
   color: #ffffff;
   text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
   letter-spacing: 0.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const PackPriceRow = styled.div`
@@ -242,6 +245,10 @@ const PackDescription = styled.div`
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.5;
   margin-top: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 `;
 
 const Controls = styled.div`

package/src/components/Store/sections/StoreRedeemSection.tsx

@@ -3,6 +3,7 @@ import { FaCheckCircle, FaExclamationCircle, FaTicketAlt } from 'react-icons/fa'
 import styled, { keyframes } from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
+import { MMORPGNumber } from '../../../components/shared/MMORPGNumber';
 
 type RedeemStatus = 'idle' | 'loading' | 'success' | 'error';
 
@@ -68,7 +69,7 @@ export const StoreRedeemSection: React.FC<IStoreRedeemSectionProps> = ({
           </SuccessIcon>
           <SuccessTitle>Code Redeemed!</SuccessTitle>
           {dcAmount != null && (
-            <DCAmountDisplay>+{dcAmount.toLocaleString()} DC</DCAmountDisplay>
+            <DCAmountDisplay>+<MMORPGNumber value={dcAmount} /> DC</DCAmountDisplay>
           )}
           <SuccessHint>Your wallet balance has been updated.</SuccessHint>
           <ButtonWrapper>

package/src/components/shared/DCRateStrip.tsx

@@ -1,6 +1,7 @@
 import { DC_TO_GOLD_SWAP_RATE } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { MMORPGNumber } from '../../components/shared/MMORPGNumber';
 
 /** 100 DC = $1 USD */
 const DC_TO_USD = 100;
@@ -10,7 +11,7 @@ export const DCRateStrip: React.FC = () => (
     <RateItem>
       <RateNum>1 DC</RateNum>
       <RateSep>=</RateSep>
-      <RateVal>{DC_TO_GOLD_SWAP_RATE.toLocaleString()} Gold</RateVal>
+      <RateVal><MMORPGNumber value={DC_TO_GOLD_SWAP_RATE} /> Gold</RateVal>
     </RateItem>
     <RateDivider />
     <RateItem>
@@ -22,7 +23,7 @@ export const DCRateStrip: React.FC = () => (
     <RateItem>
       <RateNum>1 USD</RateNum>
       <RateSep>=</RateSep>
-      <RateVal>{(DC_TO_USD * DC_TO_GOLD_SWAP_RATE / 1000).toFixed(0)}K Gold</RateVal>
+      <RateVal><MMORPGNumber value={DC_TO_USD * DC_TO_GOLD_SWAP_RATE} /> Gold</RateVal>
     </RateItem>
   </RateStrip>
 );

package/src/components/shared/MMORPGNumber.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { formatMMORPGNumber } from '../../utils/numberUtils';
+import { SimpleTooltip } from './SimpleTooltip';
+
+interface IMMORPGNumberProps {
+  value: number;
+}
+
+export const MMORPGNumber: React.FC<IMMORPGNumberProps> = ({ value }) => {
+  const formatted = formatMMORPGNumber(value);
+  const isShortened = formatted !== value.toString();
+
+  if (!isShortened) {
+    return <>{formatted}</>;
+  }
+
+  return (
+    <SimpleTooltip content={value.toLocaleString()}>
+      <span style={{ cursor: 'help' }}>{formatted}</span>
+    </SimpleTooltip>
+  );
+};

package/src/stories/Features/marketplace/CharacterDetailModal.stories.tsx

@@ -2,7 +2,10 @@ import { ICharacterListing } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
 import { RPGUIRoot } from '../../..';
-import { CharacterDetailModal, ICharacterDetailModalProps } from '../../../components/Marketplace/CharacterDetailModal';
+import {
+  CharacterDetailModal,
+  ICharacterDetailModalProps,
+} from '../../../components/Marketplace/CharacterDetailModal';
 import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
 import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
@@ -31,11 +34,28 @@ const warriorListing: ICharacterListing = {
     race: 'Human',
     faction: 'Alliance',
     mode: 'Standard',
-    skills: { level: 25, sword: 10, shielding: 8, strength: 18, dexterity: 7, resistance: 15 },
+    skills: {
+      level: 25,
+      sword: 10,
+      shielding: 8,
+      strength: 18,
+      dexterity: 7,
+      resistance: 15,
+    },
     equipment: [
-      { slot: 'rightHand', itemName: 'Broad Sword', itemKey: 'broad-sword', rarity: 'Common' },
-      { slot: 'armor', itemName: 'Steel Armor', itemKey: 'steel-armor', rarity: 'Rare' },
-      { slot: 'head', itemName: 'Iron Helm', itemKey: 'iron-helm', rarity: 'Uncommon' },
+      {
+        slot: 'rightHand',
+        itemName: 'Broad Sword',
+        itemKey: 'broad-sword',
+        rarity: 'Common',
+      },
+      { slot: 'armor', itemName: 'Jacket', itemKey: 'jacket', rarity: 'Rare' },
+      {
+        slot: 'head',
+        itemName: 'Iron Helmet',
+        itemKey: 'iron-helmet',
+        rarity: 'Uncommon',
+      },
     ],
     textureKey: 'black-knight',
   },
@@ -57,11 +77,27 @@ const hardcoreListing: ICharacterListing = {
     race: 'Elf',
     faction: 'Horde',
     mode: 'Hardcore',
-    skills: { level: 40, magic: 20, magicResistance: 18, dexterity: 12, stamina: 15 },
+    skills: {
+      level: 40,
+      magic: 20,
+      magicResistance: 18,
+      dexterity: 12,
+      stamina: 15,
+    },
     equipment: [
-      { slot: 'rightHand', itemName: 'Staff of Flames', itemKey: 'fire-staff', rarity: 'Epic' },
-      { slot: 'armor', itemName: 'Arcane Robe', itemKey: 'arcane-robe', rarity: 'Legendary' },
-      { slot: 'neck', itemName: 'Mana Amulet', itemKey: 'mana-amulet', rarity: 'Rare' },
+      {
+        slot: 'rightHand',
+        itemName: 'Fire Staff',
+        itemKey: 'fire-staff',
+        rarity: 'Epic',
+      },
+      {
+        slot: 'armor',
+        itemName: 'Mystic Cape',
+        itemKey: 'mystic-cape',
+        rarity: 'Legendary',
+      },
+      { slot: 'neck', itemName: 'Bandana', itemKey: 'bandana', rarity: 'Rare' },
     ],
     textureKey: 'pink-mage-1',
   },
@@ -83,13 +119,22 @@ const pendingListing: ICharacterListing = {
   },
 };
 
-const ModalWrapper: React.FC<{ listing: ICharacterListing }> = ({ listing }) => {
+const ModalWrapper: React.FC<{ listing: ICharacterListing }> = ({
+  listing,
+}) => {
   const [isOpen, setIsOpen] = useState(true);
   const [lastAction, setLastAction] = useState<string | null>(null);
 
   return (
     <RPGUIRoot>
-      <div style={{ padding: '20px', fontFamily: 'monospace', fontSize: '12px', color: '#fff' }}>
+      <div
+        style={{
+          padding: '20px',
+          fontFamily: 'monospace',
+          fontSize: '12px',
+          color: '#fff',
+        }}
+      >
         {lastAction ? (
           <p>✅ {lastAction}</p>
         ) : (
@@ -97,7 +142,10 @@ const ModalWrapper: React.FC<{ listing: ICharacterListing }> = ({ listing }) =>
         )}
         <button
           style={{ marginTop: 8, padding: '6px 12px', cursor: 'pointer' }}
-          onClick={() => { setIsOpen(true); setLastAction(null); }}
+          onClick={() => {
+            setIsOpen(true);
+            setLastAction(null);
+          }}
         >
           Reopen Modal
         </button>
@@ -119,11 +167,17 @@ const ModalWrapper: React.FC<{ listing: ICharacterListing }> = ({ listing }) =>
   );
 };
 
-export const WarriorListing: Story = () => <ModalWrapper listing={warriorListing} />;
+export const WarriorListing: Story = () => (
+  <ModalWrapper listing={warriorListing} />
+);
 WarriorListing.storyName = 'Standard warrior listing';
 
-export const HardcoreMageListing: Story = () => <ModalWrapper listing={hardcoreListing} />;
+export const HardcoreMageListing: Story = () => (
+  <ModalWrapper listing={hardcoreListing} />
+);
 HardcoreMageListing.storyName = 'Hardcore mage — high price';
 
-export const PendingPurchase: Story = () => <ModalWrapper listing={pendingListing} />;
+export const PendingPurchase: Story = () => (
+  <ModalWrapper listing={pendingListing} />
+);
 PendingPurchase.storyName = 'Listing with pending purchase (buy disabled)';