@rpg-engine/long-bow 0.8.155 → 0.8.157

package/package.json

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

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { Dropdown, IOptionsProps } from '../Dropdown';
 import { Pagination } from '../shared/Pagination/Pagination';
 
 export interface IDCTransaction {
@@ -35,16 +36,16 @@ const TRANSACTION_TYPE_COLORS: Record<string, string> = {
   AdminAdjustment: '#9ca3af', // gray  — admin
 };
 
-const TRANSACTION_TYPE_OPTIONS = [
-  { value: '', label: 'All Types' },
-  { value: 'Purchase', label: 'Purchase' },
-  { value: 'Transfer', label: 'Transfer' },
-  { value: 'MarketplaceSale', label: 'Marketplace Sale' },
-  { value: 'MarketplacePurchase', label: 'Marketplace Buy' },
-  { value: 'StorePurchase', label: 'Store Purchase' },
-  { value: 'Fee', label: 'Fee' },
-  { value: 'Refund', label: 'Refund' },
-  { value: 'AdminAdjustment', label: 'Admin Adjustment' },
+const TRANSACTION_TYPE_OPTIONS: IOptionsProps[] = [
+  { id: 1, value: '', option: 'All Types' },
+  { id: 2, value: 'Purchase', option: 'Purchase' },
+  { id: 3, value: 'Transfer', option: 'Transfer' },
+  { id: 4, value: 'MarketplaceSale', option: 'Marketplace Sale' },
+  { id: 5, value: 'MarketplacePurchase', option: 'Marketplace Buy' },
+  { id: 6, value: 'StorePurchase', option: 'Store Purchase' },
+  { id: 7, value: 'Fee', option: 'Fee' },
+  { id: 8, value: 'Refund', option: 'Refund' },
+  { id: 9, value: 'AdminAdjustment', option: 'Admin Adjustment' },
 ];
 
 export interface IDCHistoryPanelProps {
@@ -70,8 +71,7 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
-    const value = e.target.value;
+  const handleTypeChange = (value: string): void => {
     setSelectedType(value);
     onRequestHistory(1, value || undefined);
   };
@@ -88,12 +88,13 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
   return (
     <PanelContainer>
       <FilterRow>
-        <FilterLabel>Filter:</FilterLabel>
-        <TypeSelect value={selectedType} onChange={handleTypeChange}>
-          {TRANSACTION_TYPE_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </TypeSelect>
+        <FilterLabel>FILTER BY TYPE</FilterLabel>
+        <StyledDropdown
+          key={selectedType}
+          options={TRANSACTION_TYPE_OPTIONS}
+          onChange={handleTypeChange}
+          width="100%"
+        />
       </FilterRow>
 
       {loading && (
@@ -154,42 +155,24 @@ const PanelContainer = styled.div`
 const FilterRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 2px;
+  gap: 12px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
 `;
 
-const FilterLabel = styled.span`
-  font-size: 7px;
-  color: #f59e0b;
-  font-family: 'Press Start 2P', cursive;
+const FilterLabel = styled.p`
+  margin: 0;
+  font-size: 0.7rem;
+  color: #ccc;
+  text-transform: uppercase;
+  letter-spacing: 1px;
   white-space: nowrap;
 `;
 
-const TypeSelect = styled.select`
-  background: rgba(0, 0, 0, 0.7);
-  border: 1px solid rgba(245, 158, 11, 0.4);
-  border-radius: 3px;
-  color: #f59e0b;
-  font-size: 7px;
-  font-family: 'Press Start 2P', cursive;
-  padding: 3px 5px;
-  cursor: pointer;
-  outline: none;
-  flex: 1;
-
-  option {
-    background: #1a1a2e;
-    color: #f59e0b;
-  }
-
-  &:hover {
-    border-color: #f59e0b;
-  }
-
-  &:focus {
-    border-color: #f59e0b;
-    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
-  }
+const StyledDropdown = styled(Dropdown)`
+  margin: 0px !important;
 `;
 
 const TransactionList = styled.div`

package/src/components/DCWallet/DCWalletContent.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
+import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+
+type WalletTabId = 'balance' | 'transfer' | 'history';
+
+export interface IDCWalletContentProps {
+  dcBalance: number;
+  historyData: { transactions: IDCTransaction[]; totalPages: number; currentPage: number } | null;
+  historyLoading: boolean;
+  onRequestHistory: (page: number, type?: string) => void;
+  transferLoading: boolean;
+  transferResult: { success: boolean; message: string } | null;
+  onSendTransfer: (recipientName: string, amount: number) => void;
+  onClearTransferResult: () => void;
+  characterName?: string;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  onBuyDC?: () => void;
+  onSearchCharacter?: (name: string) => void;
+  searchResults?: IDCTransferCharacterResult[];
+}
+
+export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
+  dcBalance,
+  historyData,
+  historyLoading,
+  onRequestHistory,
+  transferLoading,
+  transferResult,
+  onSendTransfer,
+  onClearTransferResult,
+  characterName,
+  onInputFocus,
+  onInputBlur,
+  onBuyDC,
+  onSearchCharacter,
+  searchResults,
+}) => {
+  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
+
+  const tabs = [
+    {
+      id: 'balance',
+      title: 'Balance',
+      content: (
+        <BalanceContent>
+          <BalanceLabel>Your DC Balance</BalanceLabel>
+          <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
+          <DCHint>Spend on the Store, buy items on the Marketplace, or transfer to any player.</DCHint>
+          {onBuyDC && (
+            <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
+              <FaShoppingCart />
+              <BuyButtonLabel>Buy More DC</BuyButtonLabel>
+            </BuyButton>
+          )}
+        </BalanceContent>
+      ),
+    },
+    {
+      id: 'transfer',
+      title: 'Transfer',
+      content: (
+        <DCTransferPanel
+          dcBalance={dcBalance}
+          transferLoading={transferLoading}
+          transferResult={transferResult}
+          onSendTransfer={onSendTransfer}
+          onClearTransferResult={onClearTransferResult}
+          characterName={characterName}
+          onInputFocus={onInputFocus}
+          onInputBlur={onInputBlur}
+          onSearchCharacter={onSearchCharacter}
+          searchResults={searchResults}
+        />
+      ),
+    },
+    {
+      id: 'history',
+      title: 'History',
+      content: (
+        <DCHistoryPanel
+          transactions={historyData?.transactions ?? []}
+          totalPages={historyData?.totalPages ?? 0}
+          currentPage={historyData?.currentPage ?? 1}
+          loading={historyLoading}
+          onRequestHistory={onRequestHistory}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <WalletContainer>
+      <InternalTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={(tabId: string) => {
+          setActiveTab(tabId as WalletTabId);
+          if (tabId === 'history') {
+            onRequestHistory(1);
+          }
+        }}
+        activeTextColor="#000000"
+        activeColor="#fef08a"
+        inactiveColor="#6b7280"
+        borderColor="#f59e0b"
+        hoverColor="#fef3c7"
+      />
+    </WalletContainer>
+  );
+};
+
+const WalletContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 300px;
+  gap: 0.5rem;
+`;
+
+const BalanceContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px 16px;
+`;
+
+const BalanceLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 10px;
+  color: ${uiColors.lightGray};
+`;
+
+const BalanceAmount = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 28px;
+  color: #fef08a;
+  text-shadow: 2px 2px 0 #000;
+  letter-spacing: 2px;
+`;
+
+const DCHint = styled.p`
+  margin: 0 !important;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 8px !important;
+  color: rgba(255, 255, 255, 0.4) !important;
+  text-align: center !important;
+  line-height: 1.8 !important;
+  max-width: 280px;
+`;
+
+const BuyButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 10px 20px;
+  background: #f59e0b;
+  border: none;
+  border-radius: 6px;
+  color: #000;
+  cursor: pointer;
+  font-size: 1rem;
+
+  &:hover {
+    background: #fbbf24;
+  }
+
+  &:active {
+    background: #d97706;
+  }
+`;
+
+const BuyButtonLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 8px;
+`;

package/src/components/DCWallet/DCWalletModal.tsx

@@ -1,51 +1,14 @@
-import React, { useCallback, useState } from 'react';
-import { FaShoppingCart, FaTimes } from 'react-icons/fa';
+import React, { useCallback } from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
 import ModalPortal from '../Abstractions/ModalPortal';
-import { InternalTabs } from '../InternalTabs/InternalTabs';
-import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
-import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+import { DCWalletContent, IDCWalletContentProps } from './DCWalletContent';
 
-type WalletTabId = 'balance' | 'transfer' | 'history';
-
-export interface IDCWalletModalProps {
-  dcBalance: number;
+export interface IDCWalletModalProps extends IDCWalletContentProps {
   onClose: () => void;
-  historyData: { transactions: IDCTransaction[]; totalPages: number; currentPage: number } | null;
-  historyLoading: boolean;
-  onRequestHistory: (page: number, type?: string) => void;
-  transferLoading: boolean;
-  transferResult: { success: boolean; message: string } | null;
-  onSendTransfer: (recipientName: string, amount: number) => void;
-  onClearTransferResult: () => void;
-  characterName?: string;
-  onInputFocus?: () => void;
-  onInputBlur?: () => void;
-  onBuyDC?: () => void;
-  onSearchCharacter?: (name: string) => void;
-  searchResults?: IDCTransferCharacterResult[];
 }
 
-export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
-  dcBalance,
-  onClose,
-  historyData,
-  historyLoading,
-  onRequestHistory,
-  transferLoading,
-  transferResult,
-  onSendTransfer,
-  onClearTransferResult,
-  characterName,
-  onInputFocus,
-  onInputBlur,
-  onBuyDC,
-  onSearchCharacter,
-  searchResults,
-}) => {
-  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
-
+export const DCWalletModal: React.FC<IDCWalletModalProps> = ({ onClose, ...contentProps }) => {
   const stopPropagation = useCallback(
     (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
       e.stopPropagation();
@@ -53,56 +16,6 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
     []
   );
 
-  const tabs = [
-    {
-      id: 'balance',
-      title: 'Balance',
-      content: (
-        <BalanceContent>
-          <BalanceLabel>Your DC Balance</BalanceLabel>
-          <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
-          {onBuyDC && (
-            <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
-              <FaShoppingCart />
-              <BuyButtonLabel>Buy More DC</BuyButtonLabel>
-            </BuyButton>
-          )}
-        </BalanceContent>
-      ),
-    },
-    {
-      id: 'transfer',
-      title: 'Transfer',
-      content: (
-        <DCTransferPanel
-          dcBalance={dcBalance}
-          transferLoading={transferLoading}
-          transferResult={transferResult}
-          onSendTransfer={onSendTransfer}
-          onClearTransferResult={onClearTransferResult}
-          characterName={characterName}
-          onInputFocus={onInputFocus}
-          onInputBlur={onInputBlur}
-          onSearchCharacter={onSearchCharacter}
-          searchResults={searchResults}
-        />
-      ),
-    },
-    {
-      id: 'history',
-      title: 'History',
-      content: (
-        <DCHistoryPanel
-          transactions={historyData?.transactions ?? []}
-          totalPages={historyData?.totalPages ?? 0}
-          currentPage={historyData?.currentPage ?? 1}
-          loading={historyLoading}
-          onRequestHistory={onRequestHistory}
-        />
-      ),
-    },
-  ];
-
   return (
     <ModalPortal>
       <Overlay onPointerDown={onClose} />
@@ -119,23 +32,7 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
             </CloseButton>
           </Header>
 
-          <WalletContainer>
-            <InternalTabs
-              tabs={tabs}
-              activeTab={activeTab}
-              onTabChange={(tabId: string) => {
-                setActiveTab(tabId as WalletTabId);
-                if (tabId === 'history') {
-                  onRequestHistory(1);
-                }
-              }}
-              activeTextColor="#000000"
-              activeColor="#fef08a"
-              inactiveColor="#6b7280"
-              borderColor="#f59e0b"
-              hoverColor="#fef3c7"
-            />
-          </WalletContainer>
+          <DCWalletContent {...contentProps} />
         </ModalContent>
       </ModalContainer>
     </ModalPortal>
@@ -205,60 +102,3 @@ const CloseButton = styled.button`
     color: #ffffff;
   }
 `;
-
-const WalletContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 300px;
-  gap: 0.5rem;
-`;
-
-const BalanceContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 32px 16px;
-`;
-
-const BalanceLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 10px;
-  color: ${uiColors.lightGray};
-`;
-
-const BalanceAmount = styled.div`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 28px;
-  color: #fef08a;
-  text-shadow: 2px 2px 0 #000;
-  letter-spacing: 2px;
-`;
-
-const BuyButton = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding: 10px 20px;
-  background: #f59e0b;
-  border: none;
-  border-radius: 6px;
-  color: #000;
-  cursor: pointer;
-  font-size: 1rem;
-
-  &:hover {
-    background: #fbbf24;
-  }
-
-  &:active {
-    background: #d97706;
-  }
-`;
-
-const BuyButtonLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 8px;
-`;

package/src/components/Marketplace/BuyPanel.tsx

@@ -19,7 +19,7 @@ import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyM
 import { GroupedMarketplaceRow } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 
-type MarketplaceBrowseMode = 'all' | 'sell' | 'buy';
+type MarketplaceBrowseMode = 'sell' | 'buy';
 
 const BUY_REQUESTS_PER_PAGE = 5;
 
@@ -48,6 +48,7 @@ export interface IBuyPanelProps {
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   onFulfillBuyOrder?: (buyOrderId: string) => void;
+  onDCCoinClick?: () => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
@@ -78,6 +79,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   equipmentSet,
   onMarketPlaceItemBuy,
   onFulfillBuyOrder,
+  onDCCoinClick,
   characterId,
   enableHotkeys,
   disableHotkeys,
@@ -96,7 +98,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
-  const [browseMode, setBrowseMode] = useState<MarketplaceBrowseMode>('all');
+  const [browseMode, setBrowseMode] = useState<MarketplaceBrowseMode>('sell');
   const [selectedRarity, setSelectedRarity] = useState('');
   const [mainLevel, setMainLevel] = useState<
     [number | undefined, number | undefined]
@@ -171,8 +173,8 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     });
   }, [name, openBuyOrders, price, selectedRarity]);
 
-  const showSellSection = browseMode === 'all' || browseMode === 'sell';
-  const showBuySection = browseMode === 'all' || browseMode === 'buy';
+  const showSellSection = browseMode === 'sell';
+  const showBuySection = browseMode === 'buy';
   const hasVisibleContent =
     (showSellSection && groupedItems.length > 0) ||
     (showBuySection && visibleBuyOrders.length > 0);
@@ -220,7 +222,6 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
             activeId={browseMode}
             onChange={value => setBrowseMode(value as MarketplaceBrowseMode)}
             options={[
-              { id: 'all', label: 'All' },
               { id: 'sell', label: 'Sell Offers' },
               { id: 'buy', label: 'Buy Requests' },
             ]}
@@ -404,19 +405,10 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                       getDCEquivalentPrice={getDCEquivalentPrice}
                       characterId={characterId}
                       onBuy={setBuyingItemId}
+                      onDCCoinClick={onDCCoinClick}
                     />
                   ))
                 )}
-                {totalItems > itemsPerPage && (
-                  <SectionPager>
-                    <Pager
-                      totalItems={totalItems}
-                      currentPage={currentPage}
-                      itemsPerPage={itemsPerPage}
-                      onPageChange={onPageChange}
-                    />
-                  </SectionPager>
-                )}
               </MarketSection>
             )}
 
@@ -440,21 +432,30 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                     />
                   ))
                 )}
-                {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
-                  <SectionPager>
-                    <Pager
-                      totalItems={openBuyOrdersTotal}
-                      currentPage={openBuyOrdersPage}
-                      itemsPerPage={BUY_REQUESTS_PER_PAGE}
-                      onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
-                    />
-                  </SectionPager>
-                )}
               </MarketSection>
             )}
           </>
         )}
       </ItemComponentScrollWrapper>
+
+      <PagerFooter>
+        {showSellSection && totalItems > itemsPerPage && (
+          <Pager
+            totalItems={totalItems}
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onPageChange={onPageChange}
+          />
+        )}
+        {showBuySection && openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
+          <Pager
+            totalItems={openBuyOrdersTotal}
+            currentPage={openBuyOrdersPage}
+            itemsPerPage={BUY_REQUESTS_PER_PAGE}
+            onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
+          />
+        )}
+      </PagerFooter>
     </>
   );
 };
@@ -637,10 +638,14 @@ const SectionEmpty = styled.div`
 `;
 
 
-const SectionPager = styled.div`
+const PagerFooter = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  align-items: center;
+  padding: 8px 0 4px;
+  min-height: 36px;
+  width: 95%;
+  margin: 0 auto;
 `;
 
 const StyledDropdown = styled(Dropdown)`