@rpg-engine/long-bow 0.8.137 → 0.8.138

package/package.json

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

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -24,6 +24,17 @@ const TRANSACTION_TYPE_LABELS: Record<string, string> = {
   AdminAdjustment: 'Admin',
 };
 
+const TRANSACTION_TYPE_COLORS: Record<string, string> = {
+  Purchase: '#22c55e',       // green  — DC coming in
+  Transfer: '#60a5fa',       // blue   — P2P transfer
+  MarketplaceSale: '#fbbf24', // gold   — sold item
+  MarketplacePurchase: '#f97316', // orange — bought item
+  StorePurchase: '#a78bfa',  // purple — store
+  Fee: '#ef4444',            // red    — cost
+  Refund: '#06b6d4',         // cyan   — money back
+  AdminAdjustment: '#9ca3af', // gray  — admin
+};
+
 const TRANSACTION_TYPE_OPTIONS = [
   { value: '', label: 'All Types' },
   { value: 'Purchase', label: 'Purchase' },
@@ -101,12 +112,13 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
           {transactions.map((tx) => {
             const isCredit = tx.amount > 0;
             const label = TRANSACTION_TYPE_LABELS[tx.type] ?? tx.type;
+            const color = TRANSACTION_TYPE_COLORS[tx.type] ?? '#f59e0b';
             const subtitle = tx.note ?? (tx.relatedCharacterName ? tx.relatedCharacterName : '');
 
             return (
               <TransactionRow key={tx._id}>
                 <TxLeft>
-                  <TxType>{label}</TxType>
+                  <TxType $color={color}>{label}</TxType>
                   {subtitle ? <TxNote>{subtitle}</TxNote> : null}
                 </TxLeft>
                 <TxRight>
@@ -225,9 +237,9 @@ const TxRight = styled.div`
   flex-shrink: 0;
 `;
 
-const TxType = styled.span`
+const TxType = styled.span<{ $color: string }>`
   font-size: 7px;
-  color: #f59e0b;
+  color: ${({ $color }) => $color};
   font-family: 'Press Start 2P', cursive;
 `;
 

package/src/components/Marketplace/BuyPanel.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
 import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
+import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { MarketplaceRows } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 
@@ -26,11 +27,13 @@ export interface IBuyPanelProps {
   onChangePriceInput: (value: [number | undefined, number | undefined]) => void;
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
-  onMarketPlaceItemBuy?: (marketPlaceItemId: string) => void;
+  onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
   currentPage: number;
+  dcBalance?: number;
+  dcToGoldSwapRate?: number;
 }
 
 export const BuyPanel: React.FC<IBuyPanelProps> = ({
@@ -50,6 +53,8 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   enableHotkeys,
   disableHotkeys,
   currentPage,
+  dcBalance = 0,
+  dcToGoldSwapRate = 0,
 }) => {
   const [name, setName] = useState('');
   const [mainLevel, setMainLevel] = useState<
@@ -70,9 +75,30 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     itemsContainer.current?.scrollTo(0, 0);
   }, [currentPage]);
 
+  const buyingItem = buyingItemId
+    ? items.find(i => i._id === buyingItemId)
+    : null;
+  const hasDCBalance = dcBalance > 0 && dcToGoldSwapRate > 0;
+
+  const getDCEquivalentPrice = (goldPrice: number): number =>
+    dcToGoldSwapRate > 0 ? Math.ceil(goldPrice / dcToGoldSwapRate) : 0;
+
   return (
     <>
-      {buyingItemId && (
+      {buyingItemId && buyingItem && hasDCBalance && (
+        <MarketplaceBuyModal
+          goldPrice={buyingItem.price}
+          dcEquivalentPrice={getDCEquivalentPrice(buyingItem.price)}
+          dcBalance={dcBalance}
+          onClose={() => setBuyingItemId(null)}
+          onConfirm={(paymentMethod) => {
+            onMarketPlaceItemBuy?.(buyingItemId, paymentMethod);
+            setBuyingItemId(null);
+            enableHotkeys?.();
+          }}
+        />
+      )}
+      {buyingItemId && !hasDCBalance && (
         <ConfirmModal
           onClose={setBuyingItemId.bind(null, null)}
           onConfirm={() => {
@@ -216,6 +242,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
             atlasJSON={atlasJSON}
             item={item}
             itemPrice={price}
+            dcEquivalentPrice={dcToGoldSwapRate > 0 ? getDCEquivalentPrice(price) : undefined}
             equipmentSet={equipmentSet}
             onMarketPlaceItemBuy={setBuyingItemId.bind(null, _id)}
             disabled={owner === characterId}

package/src/components/Marketplace/Marketplace.tsx

@@ -5,6 +5,7 @@ import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { Pager } from '../Pager';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { BuyPanel } from './BuyPanel';
 import { ManagmentPanel } from './ManagmentPanel';
 
@@ -26,7 +27,7 @@ export interface IMarketPlaceProps {
   onChangePriceInput: (value: [number | undefined, number | undefined]) => void;
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
-  onMarketPlaceItemBuy?: (marketPlaceItemId: string) => void;
+  onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   availableGold: number;
   selectedItemToSell: IItem | null;
@@ -41,6 +42,8 @@ export interface IMarketPlaceProps {
   currentPage: number;
   itemsPerPage: number;
   onPageChange: (page: number) => void;
+  dcBalance?: number;
+  dcToGoldSwapRate?: number;
 }
 
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { Button, ButtonTypes } from '../Button';
+
+export type MarketplacePaymentMethod = 'gold' | 'dc';
+
+export interface IMarketplaceBuyModalProps {
+  goldPrice: number;
+  dcEquivalentPrice: number;
+  dcBalance: number;
+  onConfirm: (paymentMethod: MarketplacePaymentMethod) => void;
+  onClose: () => void;
+}
+
+export const MarketplaceBuyModal: React.FC<IMarketplaceBuyModalProps> = ({
+  goldPrice,
+  dcEquivalentPrice,
+  dcBalance,
+  onConfirm,
+  onClose,
+}) => {
+  const [selected, setSelected] = useState<MarketplacePaymentMethod>('gold');
+  const hasSufficientDC = dcBalance >= dcEquivalentPrice;
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const handleConfirm = useCallback(() => {
+    onConfirm(selected);
+  }, [selected, onConfirm]);
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={onClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>Confirm Purchase</Title>
+            <CloseButton onPointerDown={onClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <Options>
+            <RadioOption
+              $selected={selected === 'gold'}
+              onPointerDown={() => setSelected('gold')}
+            >
+              <RadioCircle $selected={selected === 'gold'} />
+              <OptionText>
+                <OptionLabel>Gold</OptionLabel>
+                <OptionSub>{goldPrice.toLocaleString()} gold</OptionSub>
+              </OptionText>
+            </RadioOption>
+
+            <RadioOption
+              $selected={selected === 'dc'}
+              $disabled={!hasSufficientDC}
+              onPointerDown={() => hasSufficientDC && setSelected('dc')}
+            >
+              <RadioCircle $selected={selected === 'dc'} />
+              <OptionText>
+                <OptionLabel $disabled={!hasSufficientDC}>Definya Coin</OptionLabel>
+                <OptionSub>
+                  {dcEquivalentPrice.toLocaleString()} DC
+                  {' '}
+                  <BalanceHint $insufficient={!hasSufficientDC}>
+                    ({dcBalance.toLocaleString()} available)
+                  </BalanceHint>
+                </OptionSub>
+              </OptionText>
+            </RadioOption>
+          </Options>
+
+          <ConfirmRow>
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
+              Confirm
+            </Button>
+          </ConfirmRow>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 1000;
+`;
+
+const ModalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+const ModalContent = styled.div`
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  padding: 20px 24px 24px;
+  min-width: 300px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const Options = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const RadioOption = styled.div<{ $selected: boolean; $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.15)')};
+  border-radius: 6px;
+  background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'transparent')};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
+  }
+`;
+
+const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+const OptionText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+`;
+
+const OptionLabel = styled.span<{ $disabled?: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.4)' : '#ffffff')};
+`;
+
+const OptionSub = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.55);
+`;
+
+const BalanceHint = styled.span<{ $insufficient: boolean }>`
+  color: ${({ $insufficient }) => ($insufficient ? '#ef4444' : 'rgba(255, 255, 255, 0.4)')};
+`;
+
+const ConfirmRow = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -19,6 +19,7 @@ export interface IMarketPlaceRowsPropos {
   atlasIMG: any;
   item: IItem;
   itemPrice: number;
+  dcEquivalentPrice?: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
   onMarketPlaceItemBuy?: () => void;
@@ -31,6 +32,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   atlasIMG,
   item,
   itemPrice,
+  dcEquivalentPrice,
   equipmentSet,
   scale,
   onMarketPlaceItemBuy,
@@ -88,23 +90,32 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
       </ItemIconContainer>
 
       <Flex>
-        <ItemIconContainer>
-          <GoldContainer>
-            <SpriteFromAtlas
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey="others/gold-coin-qty-5.png"
-              imgScale={2}
-            />
-          </GoldContainer>
-          <PriceValue>
-            <p>
-              <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
-                ${itemPrice}
+        <PriceContainer>
+          <ItemIconContainer>
+            <GoldContainer>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey="others/gold-coin-qty-5.png"
+                imgScale={2}
+              />
+            </GoldContainer>
+            <PriceValue>
+              <p>
+                <Ellipsis maxLines={1} maxWidth="120px" fontSize="10px">
+                  ${itemPrice}
+                </Ellipsis>
+              </p>
+            </PriceValue>
+          </ItemIconContainer>
+          {dcEquivalentPrice !== undefined && (
+            <DCPriceLabel>
+              <Ellipsis maxLines={1} maxWidth="80px" fontSize="9px">
+                {dcEquivalentPrice} DC
               </Ellipsis>
-            </p>
-          </PriceValue>
-        </ItemIconContainer>
+            </DCPriceLabel>
+          )}
+        </PriceContainer>
         <ButtonContainer>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
@@ -176,6 +187,20 @@ const SpriteContainer = styled.div`
   left: 0.5rem;
 `;
 
+const PriceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+`;
+
+const DCPriceLabel = styled.p`
+  margin: 0;
+  margin-left: 40px;
+  color: #fef08a;
+  font-size: 0.7rem;
+`;
+
 const PriceValue = styled.div`
   margin-left: 40px;
 `;

package/src/components/Store/Store.tsx

@@ -168,6 +168,8 @@ export const Store: React.FC<IStoreProps> = ({
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
           onAddToCart={handleAddPackToCart}
           onSelectPack={setSelectedPack}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
         />
       ),
     },
@@ -176,9 +178,11 @@ export const Store: React.FC<IStoreProps> = ({
       title: packsTabLabel,
       content: customPacksContent ?? (
         <StorePacksSection
-          packs={packs.filter(pack => pack.priceUSD < 9.99)}
+          packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}
           onSelectPack={setSelectedPack}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
         />
       ),
     },

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

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
 
@@ -10,12 +11,16 @@ interface IStorePacksSectionProps {
   packs: IItemPack[];
   onAddToCart: (pack: IItemPack) => void;
   onSelectPack?: (pack: IItemPack) => void;
+  atlasJSON?: any;
+  atlasIMG?: string;
 }
 
 export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   packs,
   onAddToCart,
   onSelectPack,
+  atlasJSON,
+  atlasIMG,
 }) => {
   const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(packs);
 
@@ -24,11 +29,22 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
     return imageUrl.default || imageUrl.src;
   };
 
+  const renderPackIcon = useCallback(
+    (pack: IItemPack) => {
+      const imgSrc = getImageSrc(pack.image);
+      if (atlasJSON && atlasIMG && imgSrc && atlasJSON?.frames?.[imgSrc]) {
+        return <SpriteFromAtlas atlasJSON={atlasJSON} atlasIMG={atlasIMG} spriteKey={imgSrc} width={40} height={40} imgScale={1.2} centered />;
+      }
+      return <img src={imgSrc} alt={pack.title} />;
+    },
+    [atlasJSON, atlasIMG]
+  );
+
   const renderPack = useCallback(
     (pack: IItemPack) => (
       <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
         <PackIconContainer>
-          <img src={getImageSrc(pack.image)} alt={pack.title} />
+          {renderPackIcon(pack)}
         </PackIconContainer>
 
         <PackDetails>

package/src/index.tsx

@@ -35,6 +35,7 @@ export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
+export * from './components/Marketplace/MarketplaceBuyModal';
 export * from './components/Marketplace/MarketplaceRows';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';