@rpg-engine/long-bow 0.8.140 → 0.8.141

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -1,21 +1,23 @@
 import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import { Coins } from 'pixelarticons/react/Coins';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
 import { ConfirmModal } from '../ConfirmModal';
 import { Input } from '../Input';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { MarketplaceRows } from './MarketplaceRows';
 
 export interface IManagmentPanelProps {
   items: IMarketplaceItem[];
   atlasJSON: any;
   atlasIMG: any;
-  onChangeNameInput: (value: string) => void;
   equipmentSet?: IEquipmentSet | null;
   availableGold: number;
+  dcBalance?: number;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   selectedItemToSell: IItem | null;
   onSelectedItemToSellRemove: (item: IItem) => void;
@@ -30,9 +32,9 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   items,
   atlasIMG,
   atlasJSON,
-  onChangeNameInput,
   equipmentSet,
   availableGold,
+  dcBalance,
   onMarketPlaceItemRemove,
   selectedItemToSell,
   onSelectedItemToSellRemove,
@@ -42,7 +44,6 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   onMoneyWithdraw,
   currentPage,
 }) => {
-  const [name, setName] = useState('');
   const [price, setPrice] = useState('');
   const [isCreatingOffer, setIsCreatingOffer] = useState(false);
   const [removingItemId, setRemovingItemId] = useState<string | null>(null);
@@ -81,26 +82,14 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
           message="Are you sure to remove this item?"
         />
       )}
-      <InputWrapper>
-        <p>Search By Name</p>
-        <Input
-          onChange={e => {
-            setName(e.target.value);
-            onChangeNameInput(e.target.value);
-          }}
-          value={name}
-          placeholder="Enter name..."
-          onBlur={enableHotkeys}
-          onFocus={disableHotkeys}
-        />
-      </InputWrapper>
 
       <OptionsWrapper>
         <InnerOptionsWrapper>
-          <SellDescription>
-            Click on item in inventory to sell it
-          </SellDescription>
-          <Flex>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+            <SectionLabel style={{ marginBottom: 0 }}>Create Offer</SectionLabel>
+            {!selectedItemToSell && <SellDescription>Select item in inventory to sell</SellDescription>}
+          </div>
+          <Flex style={{ gap: '15px', alignItems: 'center' }}>
             <ItemSlot
               slotIndex={0}
               atlasIMG={atlasIMG}
@@ -108,52 +97,70 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
               onPointerDown={(_, __, item) => onSelectedItemToSellRemove(item)}
               item={selectedItemToSell}
             />
+
             <PriceInputWrapper>
-              <p>Enter price</p>
-              <Flex>
+              <p>SET PRICE (GOLD)</p>
+              <Flex style={{ width: '100%', alignItems: 'center', gap: '8px' }}>
                 <Input
-                  onChange={e => {
-                    setPrice(e.target.value);
-                  }}
+                  onChange={e => setPrice(e.target.value)}
                   value={price}
-                  placeholder="Enter price..."
+                  placeholder="Amount..."
                   type="number"
                   disabled={!selectedItemToSell}
                   onBlur={enableHotkeys}
                   onFocus={disableHotkeys}
+                  className="price-input"
                 />
-                <Button
-                  buttonType={ButtonTypes.RPGUIButton}
+                <SmallCTAButton
+                  icon={<ShoppingBag width={18} height={18} />}
+                  label="Offer"
                   disabled={!selectedItemToSell || !price}
-                  onPointerDown={() => {
+                  onClick={() => {
                     if (selectedItemToSell && price && Number(price)) {
                       setIsCreatingOffer(true);
                     }
                   }}
-                >
-                  Create offer
-                </Button>
+                />
               </Flex>
             </PriceInputWrapper>
           </Flex>
         </InnerOptionsWrapper>
+
         <InnerOptionsWrapper>
-          <AvailableGold $disabled={availableGold === 0}>
-            <p>Available gold</p>
-            <p className="center">${availableGold}</p>
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
+          <SectionLabel style={{ marginBottom: '8px' }}>Your Wealth</SectionLabel>
+          <WealthWrapper>
+            <BalanceRow>
+              <GoldIcon>
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey="others/gold-coin-qty-5.png"
+                  imgScale={1.2}
+                />
+              </GoldIcon>
+              <BalanceAmount $disabled={availableGold === 0}>{availableGold}</BalanceAmount>
+              <BalanceCurrencyLabel>GOLD</BalanceCurrencyLabel>
+            </BalanceRow>
+            {dcBalance !== undefined && (
+              <BalanceRow>
+                <DCIcon>DC</DCIcon>
+                <BalanceAmount $disabled={false}>{dcBalance}</BalanceAmount>
+                <BalanceCurrencyLabel>DC</BalanceCurrencyLabel>
+              </BalanceRow>
+            )}
+            <SmallCTAButton
+              icon={<Coins width={18} height={18} />}
+              label="Withdraw Gold"
               disabled={availableGold === 0}
-              onPointerDown={() => availableGold > 0 && onMoneyWithdraw()}
-            >
-              Withdraw
-            </Button>
-          </AvailableGold>
+              onClick={() => availableGold > 0 && onMoneyWithdraw()}
+              fullWidth
+            />
+          </WealthWrapper>
         </InnerOptionsWrapper>
       </OptionsWrapper>
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {items?.map(({ item, price, _id }, index) => (
+        {items?.map(({ item, price, _id }: IMarketplaceItem, index: number) => (
           <MarketplaceRows
             key={`${item.key}_${index}`}
             atlasIMG={atlasIMG}
@@ -175,81 +182,154 @@ const Flex = styled.div`
   align-items: center;
 `;
 
-const InputWrapper = styled.div`
+const OptionsWrapper = styled.div`
   width: 95%;
-  display: flex !important;
-  justify-content: flex-start;
-  align-items: center;
-  margin: auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 15px;
+  align-items: stretch;
+`;
+
+const InnerOptionsWrapper = styled.div`
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 12px 15px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const SectionLabel = styled.p`
+  margin: 0 0 12px 0;
+  font-size: 0.65rem;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+
+const SellDescription = styled.p`
+  margin: 0;
+  font-size: 0.5rem;
+  color: #888;
+  text-align: right;
+  line-height: 1.4;
+`;
+
+const PriceInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 
   p {
-    width: auto;
-    margin-right: 20px;
+    margin: 0 0 8px 0;
+    font-size: 0.6rem;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
   }
 
-  input {
-    width: 68%;
-    height: 10px;
+  .price-input {
+    width: 60px;
+    height: 32px;
+    flex-grow: 1;
+    font-size: 0.7rem;
+  }
+  
+  .offer-btn {
+    padding: 10px 14px;
+    height: 32px;
   }
 `;
 
-const OptionsWrapper = styled.div`
-  width: 100%;
-  height: 100px;
+const GoldIcon = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  flex-shrink: 0;
+  top: -0.5rem;
+  left: -0.5rem;
 `;
 
-const InnerOptionsWrapper = styled.div`
+const WealthWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
   flex-direction: column;
-  height: 100%;
-`;
+  gap: 8px;
+  flex-grow: 1;
 
-const ItemComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
-  height: 390px;
-  width: 100%;
-  margin-top: 1rem;
-
-  @media (max-width: 950px) {
-    height: 250px;
+  & > :last-child {
+    margin-top: auto;
   }
 `;
 
-const PriceInputWrapper = styled.div`
-  p {
-    margin: 0;
-  }
+const BalanceRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
+`;
 
-  input {
-    width: 200px;
-  }
+const BalanceAmount = styled.span<{ $disabled: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.8rem;
+  color: ${props => props.$disabled ? uiColors.lightGray : '#fef08a'};
+  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+  margin-left: auto;
 `;
 
-const SellDescription = styled.p`
-  margin: 0;
-  font-size: ${uiFonts.size.xsmall} !important;
+const BalanceCurrencyLabel = styled.span`
+  font-size: 0.5rem;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 45px;
+  text-align: right;
 `;
 
-const AvailableGold = styled.div<{ $disabled: boolean }>`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+const DCIcon = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: #a78bfa;
+  background: rgba(167, 139, 250, 0.15);
+  border: 1px solid rgba(167, 139, 250, 0.3);
+  border-radius: 3px;
+  padding: 3px 5px;
+  line-height: 1;
+  margin-right: 4px;
+`;
 
-  p {
-    margin: 0;
-    color: ${props =>
-      props.$disabled ? uiColors.lightGray : 'white'} !important;
+const ItemComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 335px;
+  width: 95%;
+  margin: 1rem auto 0 auto;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+
+  @media (max-width: 950px) {
+    height: 195px;
   }
+`;
 
-  .center {
-    text-align: center;
-    font-size: ${uiFonts.size.large} !important;
-    color: ${props =>
-      props.$disabled ? uiColors.lightGray : uiColors.lightGreen} !important;
+const SmallCTAButton = styled(CTAButton)`
+  padding: 8px 12px;
+  height: 32px;
+  
+  span {
+    font-size: 0.65rem;
+  }
+  
+  svg {
+    font-size: 1.1rem;
   }
 `;

package/src/components/Marketplace/Marketplace.tsx

@@ -1,13 +1,17 @@
 import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import { Settings2 } from 'pixelarticons/react/Settings2';
+import { Store } from 'pixelarticons/react/Store';
+import { User } from 'pixelarticons/react/User';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { Pager } from '../Pager';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { Tabs } from '../shared/Tabs';
 import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { BuyPanel } from './BuyPanel';
 import { ManagmentPanel } from './ManagmentPanel';
+import { MarketplaceAcceptedCurrency, MarketplaceSettingsPanel } from './MarketplaceSettingsPanel';
 
 export interface IMarketPlaceProps {
   items: IMarketplaceItem[];
@@ -44,12 +48,28 @@ export interface IMarketPlaceProps {
   onPageChange: (page: number) => void;
   dcBalance?: number;
   dcToGoldSwapRate?: number;
+  acceptedCurrency?: MarketplaceAcceptedCurrency;
+  onAcceptedCurrencyChange?: (value: MarketplaceAcceptedCurrency) => void;
 }
 
+type ActiveTab = 'marketplace' | 'your-panel' | 'settings';
+
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {
-  const { onClose, scale, onYourPanelToggle } = props;
+  const { onClose, scale, onYourPanelToggle, acceptedCurrency: acceptedCurrencyProp, onAcceptedCurrencyChange } = props;
+
+  const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
+  const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? 'gold_or_dc');
+
+  const handleCurrencyChange = (value: MarketplaceAcceptedCurrency) => {
+    setAcceptedCurrency(value);
+    onAcceptedCurrencyChange?.(value);
+  };
 
-  const [isYourPanel, setIsYourPanel] = useState(false);
+  const handleTabChange = (tabId: string) => {
+    const tab = tabId as ActiveTab;
+    setActiveTab(tab);
+    onYourPanelToggle(tab === 'your-panel');
+  };
 
   return (
     <DraggableContainer
@@ -61,49 +81,65 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
       cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
     >
-      {isYourPanel && (
+      <Tabs
+        options={[
+          {
+            id: 'marketplace',
+            label: 'Marketplace',
+            icon: <Store width={18} height={18} />,
+          },
+          {
+            id: 'your-panel',
+            label: 'Your Panel',
+            icon: <User width={18} height={18} />,
+          },
+          {
+            id: 'settings',
+            label: 'Settings',
+            icon: <Settings2 width={18} height={18} />,
+          },
+        ]}
+        activeTabId={activeTab}
+        onTabChange={handleTabChange}
+      />
+
+      {activeTab === 'your-panel' && (
         <>
           <ManagmentPanel {...props} />
 
           <PagerContainer>
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => {
-                onYourPanelToggle(false);
-                setIsYourPanel(false);
-              }}
-            >
-              Go to marketplace
-            </Button>
             <Pager {...props} />
           </PagerContainer>
         </>
       )}
-      {!isYourPanel && (
+      {activeTab === 'marketplace' && (
         <>
           <BuyPanel {...props} />
 
           <PagerContainer>
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => {
-                onYourPanelToggle(true);
-                setIsYourPanel(true);
-              }}
-            >
-              Go to your panel
-            </Button>
             <Pager {...props} />
           </PagerContainer>
         </>
       )}
+      {activeTab === 'settings' && (
+        <MarketplaceSettingsPanel
+          acceptedCurrency={acceptedCurrency}
+          onAcceptedCurrencyChange={handleCurrencyChange}
+        />
+      )}
     </DraggableContainer>
   );
 };
 
 const PagerContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  width: calc(100% - 30px);
+  width: 95%;
+  margin: 15px auto 0 auto;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.3);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  box-sizing: border-box;
 `;