@rpg-engine/long-bow 0.8.157 → 0.8.158

package/package.json

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

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -163,9 +163,10 @@ const FilterRow = styled.div`
 `;
 
 const FilterLabel = styled.p`
-  margin: 0;
-  font-size: 0.7rem;
-  color: #ccc;
+  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;
@@ -221,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;
 `;
 
@@ -253,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`
@@ -273,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

@@ -1,13 +1,10 @@
-import React, { useState } from 'react';
+import React 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;
@@ -25,6 +22,9 @@ export interface IDCWalletContentProps {
   searchResults?: IDCTransferCharacterResult[];
 }
 
+const DC_TO_GOLD = 5500;
+const DC_TO_USD = 100;
+
 export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
   dcBalance,
   historyData,
@@ -41,26 +41,10 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
   onSearchCharacter,
   searchResults,
 }) => {
-  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
+  const usdValue = (dcBalance / DC_TO_USD).toFixed(2);
+  const goldValue = (dcBalance * DC_TO_GOLD).toLocaleString();
 
   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',
@@ -96,21 +80,42 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
 
   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"
-      />
+      <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>
   );
 };
@@ -120,64 +125,127 @@ const WalletContainer = styled.div`
   flex-direction: column;
   width: 100%;
   min-height: 300px;
-  gap: 0.5rem;
 `;
 
-const BalanceContent = styled.div`
+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;
-  padding: 32px 16px;
+`;
+
+const BalanceBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 `;
 
 const BalanceLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 10px;
-  color: ${uiColors.lightGray};
+  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;
-  font-size: 28px;
-  color: #fef08a;
-  text-shadow: 2px 2px 0 #000;
+  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 DCHint = styled.p`
-  margin: 0 !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.4) !important;
-  text-align: center !important;
-  line-height: 1.8 !important;
-  max-width: 280px;
+  color: rgba(255, 255, 255, 0.45) !important;
+  letter-spacing: 0.5px;
 `;
 
-const BuyButton = styled.button`
+const BuyButton = styled.div`
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding: 10px 20px;
+  gap: 6px;
+  padding: 10px 16px;
   background: #f59e0b;
-  border: none;
-  border-radius: 6px;
-  color: #000;
+  border-radius: 4px;
+  color: #000 !important;
   cursor: pointer;
-  font-size: 1rem;
+  flex-shrink: 0;
+  font-size: 14px;
+  white-space: nowrap;
+  user-select: none;
+  text-shadow: none !important;
 
-  &:hover {
-    background: #fbbf24;
-  }
-
-  &:active {
-    background: #d97706;
-  }
+  &:hover { background: #fbbf24; }
+  &:active { background: #d97706; }
 `;
 
 const BuyButtonLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 8px;
+  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%;
 `;