@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -1,25 +1,28 @@
-import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import { IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } 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;
-  onAddItemToMarketplace: (item: IItem, price: number) => void;
+  onAddItemToMarketplace: (item: IItem, price: number, acceptedCurrency?: MarketplaceAcceptedCurrency) => void;
+  acceptedCurrency?: MarketplaceAcceptedCurrency;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
   onMoneyWithdraw: () => void;
@@ -30,19 +33,19 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   items,
   atlasIMG,
   atlasJSON,
-  onChangeNameInput,
   equipmentSet,
   availableGold,
+  dcBalance,
   onMarketPlaceItemRemove,
   selectedItemToSell,
   onSelectedItemToSellRemove,
   onAddItemToMarketplace,
+  acceptedCurrency,
   enableHotkeys,
   disableHotkeys,
   onMoneyWithdraw,
   currentPage,
 }) => {
-  const [name, setName] = useState('');
   const [price, setPrice] = useState('');
   const [isCreatingOffer, setIsCreatingOffer] = useState(false);
   const [removingItemId, setRemovingItemId] = useState<string | null>(null);
@@ -60,7 +63,7 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
           onClose={setIsCreatingOffer.bind(null, false)}
           onConfirm={() => {
             if (selectedItemToSell && price && Number(price)) {
-              onAddItemToMarketplace(selectedItemToSell, Number(price));
+              onAddItemToMarketplace(selectedItemToSell, Number(price), acceptedCurrency);
               setPrice('');
               onSelectedItemToSellRemove(selectedItemToSell);
               setIsCreatingOffer(false);
@@ -81,26 +84,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 +99,77 @@ 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>
+                <GoldIcon>
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey="others/definya-coin.png"
+                    imgScale={1.2}
+                  />
+                </GoldIcon>
+                <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 +191,143 @@ 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%;
-`;
-
-const ItemComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
-  height: 390px;
-  width: 100%;
-  margin-top: 1rem;
+  gap: 8px;
+  flex-grow: 1;
 
-  @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;
 
-  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;
   }
 `;