@rpg-engine/long-bow 0.8.156 → 0.8.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.156",
+  "version": "0.8.158",
   "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,25 @@ 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 !important;
+  font-size: 0.7rem !important;
+  color: #ccc !important;
+  font-family: 'Press Start 2P', cursive !important;
+  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`
@@ -238,29 +222,29 @@ const TxRight = styled.div`
 `;
 
 const TxType = styled.span`
-  font-size: 7px;
-  font-family: 'Press Start 2P', cursive;
+  font-size: 8px !important;
+  font-family: 'Press Start 2P', cursive !important;
 `;
 
 const TxAmount = styled.span`
-  font-size: 8px;
-  font-family: 'Press Start 2P', cursive;
+  font-size: 9px !important;
+  font-family: 'Press Start 2P', cursive !important;
   white-space: nowrap;
 `;
 
 const TxNote = styled.span`
-  font-size: 6px;
-  color: ${uiColors.lightGray};
-  font-family: 'Press Start 2P', cursive;
+  font-size: 7px !important;
+  color: ${uiColors.lightGray} !important;
+  font-family: 'Press Start 2P', cursive !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
 const TxDate = styled.span`
-  font-size: 6px;
-  color: rgba(255, 255, 255, 0.4);
-  font-family: 'Press Start 2P', cursive;
+  font-size: 7px !important;
+  color: rgba(255, 255, 255, 0.4) !important;
+  font-family: 'Press Start 2P', cursive !important;
   white-space: nowrap;
 `;
 
@@ -270,9 +254,9 @@ const LoadingRow = styled.div`
   gap: 8px;
   justify-content: center;
   padding: 16px;
-  color: ${uiColors.white};
-  font-size: 9px;
-  font-family: 'Press Start 2P', cursive;
+  color: ${uiColors.white} !important;
+  font-size: 9px !important;
+  font-family: 'Press Start 2P', cursive !important;
 `;
 
 const Spinner = styled.div`
@@ -290,9 +274,9 @@ const Spinner = styled.div`
 `;
 
 const EmptyMessage = styled.div`
-  font-size: 8px;
-  color: ${uiColors.lightGray};
-  font-family: 'Press Start 2P', cursive;
+  font-size: 8px !important;
+  color: ${uiColors.lightGray} !important;
+  font-family: 'Press Start 2P', cursive !important;
   text-align: center;
   padding: 20px;
 `;

package/src/components/DCWallet/DCTransferPanel.tsx

@@ -213,21 +213,21 @@ const PanelContainer = styled.div`
 `;
 
 const FieldLabel = styled.label`
-  font-size: 9px;
-  color: #f59e0b;
-  font-family: 'Press Start 2P', cursive;
+  font-size: 9px !important;
+  color: #f59e0b !important;
+  font-family: 'Press Start 2P', cursive !important;
   margin-top: 8px;
 `;
 
 const StyledInput = styled(Input)`
-  background: rgba(0, 0, 0, 0.6);
-  border: 1px solid #f59e0b;
-  color: ${uiColors.white};
-  padding: 6px 8px;
-  font-size: 12px;
-  font-family: 'Press Start 2P', cursive;
-  width: 100%;
-  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.6) !important;
+  border: 1px solid #f59e0b !important;
+  color: ${uiColors.white} !important;
+  padding: 6px 8px !important;
+  font-size: 11px !important;
+  font-family: 'Press Start 2P', cursive !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
 
   &:disabled {
     opacity: 0.5;
@@ -235,7 +235,7 @@ const StyledInput = styled(Input)`
 
   &:focus {
     outline: none;
-    border-color: ${uiColors.white};
+    border-color: ${uiColors.white} !important;
   }
 `;
 
@@ -261,18 +261,18 @@ const Spinner = styled.div`
 const ResultMessage = styled.div<{ $success: boolean }>`
   margin-top: 8px;
   padding: 8px;
-  font-size: 9px;
-  font-family: 'Press Start 2P', cursive;
-  color: ${({ $success }) => ($success ? uiColors.green : uiColors.red)};
+  font-size: 9px !important;
+  font-family: 'Press Start 2P', cursive !important;
+  color: ${({ $success }) => ($success ? uiColors.green : uiColors.red)} !important;
   border: 1px solid ${({ $success }) => ($success ? uiColors.green : uiColors.red)};
   background: rgba(0, 0, 0, 0.4);
   text-align: center;
 `;
 
 const ErrorMessage = styled.div`
-  font-size: 9px;
-  color: ${uiColors.red};
-  font-family: 'Press Start 2P', cursive;
+  font-size: 9px !important;
+  color: ${uiColors.red} !important;
+  font-family: 'Press Start 2P', cursive !important;
 `;
 
 const AutocompleteWrapper = styled.div`

package/src/components/DCWallet/DCWalletContent.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
+import styled from 'styled-components';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
+import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+
+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[];
+}
+
+const DC_TO_GOLD = 5500;
+const DC_TO_USD = 100;
+
+export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
+  dcBalance,
+  historyData,
+  historyLoading,
+  onRequestHistory,
+  transferLoading,
+  transferResult,
+  onSendTransfer,
+  onClearTransferResult,
+  characterName,
+  onInputFocus,
+  onInputBlur,
+  onBuyDC,
+  onSearchCharacter,
+  searchResults,
+}) => {
+  const usdValue = (dcBalance / DC_TO_USD).toFixed(2);
+  const goldValue = (dcBalance * DC_TO_GOLD).toLocaleString();
+
+  const tabs = [
+    {
+      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>
+      <BalanceHeader>
+        <BalanceTop>
+          <BalanceBlock>
+            <BalanceLabel>DC BALANCE</BalanceLabel>
+            <BalanceAmount>{dcBalance.toLocaleString()} <BalanceDC>DC</BalanceDC></BalanceAmount>
+            <BalanceEquiv>≈ ${usdValue} USD &nbsp;·&nbsp; {goldValue} Gold</BalanceEquiv>
+          </BalanceBlock>
+          {onBuyDC && (
+            <BuyButton onPointerDown={onBuyDC} role="button" tabIndex={0} title="Buy Definya Coins">
+              <FaShoppingCart />
+              <BuyButtonLabel>Buy DC</BuyButtonLabel>
+            </BuyButton>
+          )}
+        </BalanceTop>
+        <RateStrip>
+          <RateItem><RateNum>1 DC</RateNum><RateSep>=</RateSep><RateVal>5,500 Gold</RateVal></RateItem>
+          <RateDivider />
+          <RateItem><RateNum>100 DC</RateNum><RateSep>=</RateSep><RateVal>1 USD</RateVal></RateItem>
+          <RateDivider />
+          <RateItem><RateNum>1 USD</RateNum><RateSep>=</RateSep><RateVal>550K Gold</RateVal></RateItem>
+        </RateStrip>
+      </BalanceHeader>
+
+      <TabsWrapper>
+        <InternalTabs
+          tabs={tabs}
+          onTabChange={(tabId) => {
+            if (tabId === 'history') onRequestHistory(1);
+          }}
+          activeTextColor="#000000"
+          activeColor="#fef08a"
+          inactiveColor="#6b7280"
+          borderColor="#f59e0b"
+          hoverColor="#fef3c7"
+        />
+      </TabsWrapper>
+    </WalletContainer>
+  );
+};
+
+const WalletContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 300px;
+`;
+
+const BalanceHeader = styled.div`
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  border-radius: 6px;
+  padding: 14px 16px 10px;
+  margin: 0 2.5% 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const BalanceTop = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const BalanceBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const BalanceLabel = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 9px !important;
+  color: rgba(245, 158, 11, 0.7) !important;
+  letter-spacing: 1px;
+`;
+
+const BalanceAmount = styled.div`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 24px !important;
+  color: #fef08a !important;
+  text-shadow: 2px 2px 0 #000 !important;
+  letter-spacing: 2px;
+  line-height: 1 !important;
+`;
+
+const BalanceDC = styled.span`
+  font-size: 14px !important;
+  color: rgba(254, 240, 138, 0.6) !important;
+`;
+
+const BalanceEquiv = styled.div`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 8px !important;
+  color: rgba(255, 255, 255, 0.45) !important;
+  letter-spacing: 0.5px;
+`;
+
+const BuyButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: #f59e0b;
+  border-radius: 4px;
+  color: #000 !important;
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: 14px;
+  white-space: nowrap;
+  user-select: none;
+  text-shadow: none !important;
+
+  &:hover { background: #fbbf24; }
+  &:active { background: #d97706; }
+`;
+
+const BuyButtonLabel = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 8px !important;
+  color: #000 !important;
+  white-space: nowrap !important;
+  text-shadow: none !important;
+`;
+
+const RateStrip = styled.div`
+  display: flex;
+  align-items: center;
+  border-top: 1px solid rgba(245, 158, 11, 0.1);
+  padding-top: 8px;
+`;
+
+const RateItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  justify-content: center;
+`;
+
+const RateDivider = styled.div`
+  width: 1px;
+  height: 12px;
+  background: rgba(245, 158, 11, 0.2);
+`;
+
+const RateNum = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+`;
+
+const RateSep = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(255, 255, 255, 0.2) !important;
+`;
+
+const RateVal = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(254, 240, 138, 0.6) !important;
+`;
+
+const TabsWrapper = styled.div`
+  padding: 0 2.5%;
+`;