@rpg-engine/long-bow 0.8.135 → 0.8.136

package/package.json

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

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -0,0 +1,238 @@
+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 {
+  _id: string;
+  type: string;
+  amount: number;
+  balanceAfter: number;
+  relatedCharacterName?: string;
+  note?: string;
+  createdAt: string;
+}
+
+const TRANSACTION_TYPE_LABELS: Record<string, string> = {
+  Purchase: 'Purchase',
+  Transfer: 'Transfer',
+  MarketplaceSale: 'Marketplace Sale',
+  MarketplacePurchase: 'Marketplace Buy',
+  StorePurchase: 'Store Purchase',
+  Fee: 'Fee',
+  Refund: 'Refund',
+  AdminAdjustment: 'Admin Adjustment',
+};
+
+const TRANSACTION_TYPE_OPTIONS: IOptionsProps[] = [
+  { id: 0, value: '', option: 'All Types' },
+  { id: 1, value: 'Purchase', option: 'Purchase' },
+  { id: 2, value: 'Transfer', option: 'Transfer' },
+  { id: 3, value: 'MarketplaceSale', option: 'Marketplace Sale' },
+  { id: 4, value: 'MarketplacePurchase', option: 'Marketplace Buy' },
+  { id: 5, value: 'StorePurchase', option: 'Store Purchase' },
+  { id: 6, value: 'Fee', option: 'Fee' },
+  { id: 7, value: 'Refund', option: 'Refund' },
+  { id: 8, value: 'AdminAdjustment', option: 'Admin Adjustment' },
+];
+
+export interface IDCHistoryPanelProps {
+  transactions: IDCTransaction[];
+  totalPages: number;
+  currentPage: number;
+  loading: boolean;
+  onRequestHistory: (page: number, type?: string) => void;
+}
+
+export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
+  transactions,
+  totalPages,
+  currentPage,
+  loading,
+  onRequestHistory,
+}) => {
+  const [selectedType, setSelectedType] = React.useState<string>('');
+
+  const handleTypeChange = (value: string): void => {
+    setSelectedType(value);
+    onRequestHistory(1, value || undefined);
+  };
+
+  const handlePageChange = (page: number): void => {
+    onRequestHistory(page, selectedType || undefined);
+  };
+
+  const formatDate = (dateStr: string): string => {
+    const d = new Date(dateStr);
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+  };
+
+  return (
+    <PanelContainer>
+      <FilterRow>
+        <FilterLabel>Filter:</FilterLabel>
+        <Dropdown options={TRANSACTION_TYPE_OPTIONS} onChange={handleTypeChange} width="200px" />
+      </FilterRow>
+
+      {loading && (
+        <LoadingRow>
+          <Spinner />
+          <span>Loading...</span>
+        </LoadingRow>
+      )}
+
+      {!loading && transactions.length === 0 && (
+        <EmptyMessage>No transactions found.</EmptyMessage>
+      )}
+
+      {!loading && transactions.length > 0 && (
+        <TransactionList>
+          {transactions.map((tx) => {
+            const isCredit = tx.amount > 0;
+            const label = TRANSACTION_TYPE_LABELS[tx.type] ?? tx.type;
+
+            return (
+              <TransactionRow key={tx._id}>
+                <TxType>{label}</TxType>
+                <TxAmount $credit={isCredit}>
+                  {isCredit ? '+' : ''}{tx.amount} DC
+                </TxAmount>
+                <TxNote>
+                  {tx.note ?? (tx.relatedCharacterName ? `With: ${tx.relatedCharacterName}` : '')}
+                </TxNote>
+                <TxDate>{formatDate(tx.createdAt)}</TxDate>
+                <TxBalance>Balance: {tx.balanceAfter} DC</TxBalance>
+              </TransactionRow>
+            );
+          })}
+        </TransactionList>
+      )}
+
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+        />
+      )}
+    </PanelContainer>
+  );
+};
+
+const PanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
+`;
+
+const FilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+`;
+
+const FilterLabel = styled.span`
+  font-size: 8px;
+  color: #f59e0b;
+  font-family: 'Press Start 2P', cursive;
+  white-space: nowrap;
+`;
+
+const TransactionList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 280px;
+  overflow-y: auto;
+`;
+
+const TransactionRow = styled.div`
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 215, 0, 0.2);
+  padding: 8px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto auto;
+  gap: 2px;
+`;
+
+const TxType = styled.span`
+  font-size: 8px;
+  color: #f59e0b;
+  font-family: 'Press Start 2P', cursive;
+  grid-column: 1;
+  grid-row: 1;
+`;
+
+const TxAmount = styled.span<{ $credit: boolean }>`
+  font-size: 10px;
+  font-family: 'Press Start 2P', cursive;
+  color: ${({ $credit }) => ($credit ? uiColors.green : uiColors.red)};
+  font-weight: bold;
+  grid-column: 2;
+  grid-row: 1;
+  text-align: right;
+`;
+
+const TxNote = styled.span`
+  font-size: 7px;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  grid-column: 1;
+  grid-row: 2;
+`;
+
+const TxDate = styled.span`
+  font-size: 7px;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  grid-column: 2;
+  grid-row: 2;
+  text-align: right;
+`;
+
+const TxBalance = styled.span`
+  font-size: 7px;
+  color: ${uiColors.white};
+  font-family: 'Press Start 2P', cursive;
+  grid-column: 1 / 3;
+  grid-row: 3;
+  opacity: 0.7;
+`;
+
+const LoadingRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  padding: 16px;
+  color: ${uiColors.white};
+  font-size: 9px;
+  font-family: 'Press Start 2P', cursive;
+`;
+
+const Spinner = styled.div`
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  border-top: 3px solid #f59e0b;
+  width: 20px;
+  height: 20px;
+  animation: spin 0.8s linear infinite;
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+const EmptyMessage = styled.div`
+  font-size: 9px;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  text-align: center;
+  padding: 20px;
+`;

package/src/components/DCWallet/DCTransferPanel.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FaPaperPlane } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { ConfirmModal } from '../ConfirmModal';
+import { Input } from '../Input';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+
+export interface IDCTransferPanelProps {
+  dcBalance: number;
+  transferLoading: boolean;
+  transferResult: { success: boolean; message: string } | null;
+  onSendTransfer: (recipientName: string, amount: number) => void;
+  onClearTransferResult: () => void;
+  characterName?: string;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+}
+
+export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
+  dcBalance,
+  transferLoading,
+  transferResult,
+  onSendTransfer,
+  onClearTransferResult,
+  characterName,
+  onInputFocus,
+  onInputBlur,
+}) => {
+  const [recipientName, setRecipientName] = useState<string>('');
+  const [amount, setAmount] = useState<string>('');
+  const [validationError, setValidationError] = useState<string>('');
+  const [showConfirm, setShowConfirm] = useState<boolean>(false);
+  const clearResultTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (transferResult) {
+      if (clearResultTimerRef.current) {
+        clearTimeout(clearResultTimerRef.current);
+      }
+      clearResultTimerRef.current = setTimeout(() => {
+        onClearTransferResult();
+      }, 5000);
+    }
+
+    return (): void => {
+      if (clearResultTimerRef.current) {
+        clearTimeout(clearResultTimerRef.current);
+      }
+    };
+  }, [transferResult]);
+
+  const validate = (): boolean => {
+    const parsedAmount = parseInt(amount, 10);
+    const trimmedRecipient = recipientName.trim();
+
+    if (!trimmedRecipient) {
+      setValidationError('Recipient name is required.');
+      return false;
+    }
+
+    if (characterName && trimmedRecipient.toLowerCase() === characterName.toLowerCase()) {
+      setValidationError('You cannot transfer DC to yourself.');
+      return false;
+    }
+
+    if (isNaN(parsedAmount) || parsedAmount <= 0 || !Number.isInteger(parsedAmount)) {
+      setValidationError('Amount must be a positive integer.');
+      return false;
+    }
+
+    if (parsedAmount > dcBalance) {
+      setValidationError('Insufficient DC balance.');
+      return false;
+    }
+
+    setValidationError('');
+    return true;
+  };
+
+  const handleSendClick = useCallback((): void => {
+    if (!validate()) return;
+    setShowConfirm(true);
+  }, [recipientName, amount, dcBalance, characterName]);
+
+  const handleConfirmTransfer = useCallback((): void => {
+    setShowConfirm(false);
+    onSendTransfer(recipientName.trim(), parseInt(amount, 10));
+    setRecipientName('');
+    setAmount('');
+  }, [recipientName, amount, onSendTransfer]);
+
+  return (
+    <PanelContainer>
+      <FieldLabel>Recipient Character Name</FieldLabel>
+      <StyledInput
+        type="text"
+        value={recipientName}
+        onChange={(e) => setRecipientName(e.target.value)}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
+        placeholder="Enter character name"
+        disabled={transferLoading}
+      />
+
+      <FieldLabel>Amount (DC)</FieldLabel>
+      <StyledInput
+        type="number"
+        min={1}
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
+        placeholder="0"
+        disabled={transferLoading}
+      />
+
+      {validationError && <ErrorMessage>{validationError}</ErrorMessage>}
+
+      <ButtonRow>
+        <CTAButton
+          icon={<FaPaperPlane />}
+          label={transferLoading ? 'Sending...' : 'Send'}
+          onClick={handleSendClick}
+          disabled={transferLoading}
+          fullWidth
+        />
+      </ButtonRow>
+
+      {transferLoading && <Spinner />}
+
+      {transferResult && (
+        <ResultMessage $success={transferResult.success}>
+          {transferResult.message}
+        </ResultMessage>
+      )}
+
+      {showConfirm && (
+        <ConfirmModal
+          message={`Transfer ${parseInt(amount, 10)} DC to "${recipientName.trim()}"?`}
+          onConfirm={handleConfirmTransfer}
+          onClose={() => setShowConfirm(false)}
+        />
+      )}
+    </PanelContainer>
+  );
+};
+
+const PanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+`;
+
+const FieldLabel = styled.label`
+  font-size: 9px;
+  color: #f59e0b;
+  font-family: 'Press Start 2P', cursive;
+  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;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${uiColors.white};
+  }
+`;
+
+const ButtonRow = styled.div`
+  margin-top: 8px;
+`;
+
+const Spinner = styled.div`
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  border-top: 3px solid #f59e0b;
+  width: 24px;
+  height: 24px;
+  animation: spin 0.8s linear infinite;
+  margin: 8px auto 0;
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+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)};
+  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;
+`;

package/src/components/DCWallet/DCWalletModal.tsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useState } 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 } from './DCTransferPanel';
+
+type WalletTabId = 'balance' | 'transfer' | 'history';
+
+export interface IDCWalletModalProps {
+  dcBalance: number;
+  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;
+}
+
+export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
+  dcBalance,
+  onClose,
+  historyData,
+  historyLoading,
+  onRequestHistory,
+  transferLoading,
+  transferResult,
+  onSendTransfer,
+  onClearTransferResult,
+  characterName,
+  onInputFocus,
+  onInputBlur,
+}) => {
+  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const tabs = [
+    {
+      id: 'balance',
+      title: 'Balance',
+      content: (
+        <BalanceContent>
+          <BalanceLabel>Your DC Balance</BalanceLabel>
+          <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
+          <BalanceHint>Buy DC packs from the Store &gt; Packs tab.</BalanceHint>
+        </BalanceContent>
+      ),
+    },
+    {
+      id: 'transfer',
+      title: 'Transfer',
+      content: (
+        <DCTransferPanel
+          dcBalance={dcBalance}
+          transferLoading={transferLoading}
+          transferResult={transferResult}
+          onSendTransfer={onSendTransfer}
+          onClearTransferResult={onClearTransferResult}
+          characterName={characterName}
+          onInputFocus={onInputFocus}
+          onInputBlur={onInputBlur}
+        />
+      ),
+    },
+    {
+      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} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>DC Wallet</Title>
+            <CloseButton onPointerDown={onClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <WalletContainer>
+            <InternalTabs
+              tabs={tabs}
+              activeTab={activeTab}
+              onTabChange={(tabId: string) => setActiveTab(tabId as WalletTabId)}
+              activeTextColor="#000000"
+              activeColor="#fef08a"
+              inactiveColor="#6b7280"
+              borderColor="#f59e0b"
+              hoverColor="#fef3c7"
+            />
+          </WalletContainer>
+        </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: 16px 20px 20px;
+  min-width: 400px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  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 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 BalanceHint = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 7px;
+  color: ${uiColors.lightGray};
+`;

package/src/index.tsx

@@ -11,6 +11,7 @@ export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DailyTasks/DailyTasks';
+export * from './components/DCWallet/DCWalletModal';
 export * from './components/LoginStreak/LoginStreakPanel';
 export * from './components/DPad/JoystickDPad';
 export * from './components/DraggableContainer';