@rpg-engine/long-bow 0.4.6 → 0.4.8

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -0,0 +1,247 @@
+import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import React, { 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 { MarketplaceRows } from './MarketplaceRows';
+
+export interface IManagmentPanelProps {
+  items: IMarketplaceItem[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onChangeNameInput: (value: string) => void;
+  equipmentSet?: IEquipmentSet | null;
+  availableGold: number;
+  onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
+  selectedItemToSell: IItem | null;
+  onSelectedItemToSellRemove: (item: IItem) => void;
+  onAddItemToMarketplace: (item: IItem, price: number) => void;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+  onMoneyWithdraw: () => void;
+}
+
+export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
+  items,
+  atlasIMG,
+  atlasJSON,
+  onChangeNameInput,
+  equipmentSet,
+  availableGold,
+  onMarketPlaceItemRemove,
+  selectedItemToSell,
+  onSelectedItemToSellRemove,
+  onAddItemToMarketplace,
+  enableHotkeys,
+  disableHotkeys,
+  onMoneyWithdraw,
+}) => {
+  const [name, setName] = useState('');
+  const [price, setPrice] = useState('');
+  const [isCreatingOffer, setIsCreatingOffer] = useState(false);
+  const [removingItemId, setRemovingItemId] = useState<string | null>(null);
+
+  return (
+    <>
+      {isCreatingOffer && (
+        <ConfirmModal
+          onClose={setIsCreatingOffer.bind(null, false)}
+          onConfirm={() => {
+            if (selectedItemToSell && price && Number(price)) {
+              onAddItemToMarketplace(selectedItemToSell, Number(price));
+              setPrice('');
+              onSelectedItemToSellRemove(selectedItemToSell);
+              setIsCreatingOffer(false);
+              enableHotkeys?.();
+            }
+          }}
+          message="Are you sure to create this offer?"
+        />
+      )}
+      {removingItemId && (
+        <ConfirmModal
+          onClose={setRemovingItemId.bind(null, null)}
+          onConfirm={() => {
+            onMarketPlaceItemRemove?.(removingItemId);
+            setRemovingItemId(null);
+            enableHotkeys?.();
+          }}
+          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>
+            <ItemSlot
+              slotIndex={0}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              onPointerDown={(_, __, item) => onSelectedItemToSellRemove(item)}
+              item={selectedItemToSell}
+            />
+            <PriceInputWrapper>
+              <p>Enter price</p>
+              <Flex>
+                <Input
+                  onChange={e => {
+                    setPrice(e.target.value);
+                  }}
+                  value={price}
+                  placeholder="Enter price..."
+                  type="number"
+                  disabled={!selectedItemToSell}
+                  onBlur={enableHotkeys}
+                  onFocus={disableHotkeys}
+                />
+                <Button
+                  buttonType={ButtonTypes.RPGUIButton}
+                  disabled={!selectedItemToSell || !price}
+                  onPointerDown={() => {
+                    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}
+              disabled={availableGold === 0}
+              onPointerDown={() => availableGold > 0 && onMoneyWithdraw()}
+            >
+              Withdraw
+            </Button>
+          </AvailableGold>
+        </InnerOptionsWrapper>
+      </OptionsWrapper>
+
+      <ItemComponentScrollWrapper id="MarketContainer">
+        {items?.map(({ item, price, _id }, index) => (
+          <MarketplaceRows
+            key={`${item.key}_${index}`}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            item={item}
+            itemPrice={price}
+            equipmentSet={equipmentSet}
+            onMarketPlaceItemRemove={setRemovingItemId.bind(null, _id)}
+          />
+        ))}
+      </ItemComponentScrollWrapper>
+    </>
+  );
+};
+
+const Flex = styled.div`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`;
+
+const InputWrapper = styled.div`
+  width: 95%;
+  display: flex !important;
+  justify-content: flex-start;
+  align-items: center;
+  margin: auto;
+
+  p {
+    width: auto;
+    margin-right: 20px;
+  }
+
+  input {
+    width: 68%;
+    height: 10px;
+  }
+`;
+
+const OptionsWrapper = styled.div`
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+const InnerOptionsWrapper = 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;
+
+  @media (max-width: 950px) {
+    height: 250px;
+  }
+`;
+
+const PriceInputWrapper = styled.div`
+  p {
+    margin: 0;
+  }
+
+  input {
+    width: 200px;
+  }
+`;
+
+const SellDescription = styled.p`
+  margin: 0;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;
+
+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;
+  }
+
+  .center {
+    text-align: center;
+    font-size: ${uiFonts.size.large} !important;
+    color: ${props =>
+      props.$disabled ? uiColors.lightGray : uiColors.lightGreen} !important;
+  }
+`;

package/src/components/Marketplace/Marketplace.tsx

@@ -1,45 +1,53 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { ChangeEvent } from 'react';
+import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
-import { Dropdown, IOptionsProps } from '../Dropdown';
-import { Input } from '../Input';
+import { Pager } from '../Pager';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { MarketplaceRows } from './MarketplaceRows';
+import { BuyPanel } from './BuyPanel';
+import { ManagmentPanel } from './ManagmentPanel';
 
 export interface IMarketPlaceProps {
-  items: IItem[] | null;
+  items: IMarketplaceItem[];
   atlasJSON: any;
   atlasIMG: any;
-  optionsType: IOptionsProps[];
-  optionsRarity: IOptionsProps[];
-  optionsPrice: IOptionsProps[];
   onClose: () => void;
   onChangeType: (value: string) => void;
   onChangeRarity: (value: string) => void;
   onChangeOrder: (value: string) => void;
-  onChangeNameInput: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChangeNameInput: (value: string) => void;
+  onChangeMainLevelInput: (
+    value: [number | undefined, number | undefined]
+  ) => void;
+  onChangeSecondaryLevelInput: (
+    value: [number | undefined, number | undefined]
+  ) => void;
+  onChangePriceInput: (value: [number | undefined, number | undefined]) => void;
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
-  onHandleClick: (value: string) => void;
+  onMarketPlaceItemBuy?: (marketPlaceItemId: string) => void;
+  onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
+  availableGold: number;
+  selectedItemToSell: IItem | null;
+  onSelectedItemToSellRemove: (item: IItem) => void;
+  onYourPanelToggle: (yourPanel: boolean) => void;
+  onAddItemToMarketplace: (item: IItem, price: number) => void;
+  characterId: string;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+  onMoneyWithdraw: () => void;
+  totalItems: number;
+  currentPage: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
 }
 
-export const Marketplace: React.FC<IMarketPlaceProps> = ({
-  items,
-  atlasIMG,
-  atlasJSON,
-  onClose,
-  optionsType,
-  optionsRarity,
-  optionsPrice,
-  onChangeType,
-  onChangeRarity,
-  onChangeOrder,
-  onChangeNameInput,
-  scale,
-  equipmentSet,
-  onHandleClick,
-}) => {
+export const Marketplace: React.FC<IMarketPlaceProps> = props => {
+  const { onClose, scale, onYourPanelToggle } = props;
+
+  const [isYourPanel, setIsYourPanel] = useState(false);
+
   return (
     <DraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -47,86 +55,52 @@ export const Marketplace: React.FC<IMarketPlaceProps> = ({
         if (onClose) onClose();
       }}
       width="800px"
-      cancelDrag="#MarketContainer"
+      cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
     >
-      <>
-        <InputWrapper>
-          <p> Search By Name</p>
-          <Input onChange={onChangeNameInput} placeholder={'Search...'} />
-        </InputWrapper>
+      {isYourPanel && (
+        <>
+          <ManagmentPanel {...props} />
+
+          <PagerContainer>
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              onPointerDown={() => {
+                onYourPanelToggle(false);
+                setIsYourPanel(false);
+              }}
+            >
+              Go to marketplace
+            </Button>
+            <Pager {...props} />
+          </PagerContainer>
+        </>
+      )}
+      {!isYourPanel && (
+        <>
+          <BuyPanel {...props} />
 
-        <WrapperContainer>
-          <StyledDropdown
-            options={optionsType}
-            onChange={onChangeType}
-            width={'220px'}
-          />
-          <StyledDropdown
-            options={optionsRarity}
-            onChange={onChangeRarity}
-            width={'220px'}
-          />
-          <StyledDropdown
-            options={optionsPrice}
-            onChange={onChangeOrder}
-            width={'220px'}
-          />
-        </WrapperContainer>
-        <ItemComponentScrollWrapper id="MarketContainer">
-          {items?.map((item, index) => (
-            <MarketplaceRows
-              key={`${item.key}_${index}`}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              item={item}
-              itemPrice={10}
-              equipmentSet={equipmentSet}
-              onHandleClick={onHandleClick}
-            />
-          ))}
-        </ItemComponentScrollWrapper>
-      </>
+          <PagerContainer>
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              onPointerDown={() => {
+                onYourPanelToggle(true);
+                setIsYourPanel(true);
+              }}
+            >
+              Go to your panel
+            </Button>
+            <Pager {...props} />
+          </PagerContainer>
+        </>
+      )}
     </DraggableContainer>
   );
 };
 
-const InputWrapper = styled.div`
-  width: 95%;
+const PagerContainer = styled.div`
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: auto;
-  margin-bottom: 10px;
-  p {
-    width: auto;
-    margin-right: 20px;
-  }
-  input {
-    width: 68%;
-    height: 10px;
-  }
-`;
-
-const WrapperContainer = styled.div`
-  display: grid;
-  grid-template-columns: 30% 30% 30%;
   justify-content: space-between;
-  width: 90%;
-  margin-left: 10px;
-  .rpgui-content .rpgui-dropdown-imp-header {
-    padding: 0px 10px 0 !important;
-  }
-`;
-
-const ItemComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
-  height: 390px;
-  width: 100%;
-  margin-top: 1rem;
-`;
-
-const StyledDropdown = styled(Dropdown)`
-  margin: 3px !important;
-  width: 170px !important;
+  align-items: center;
+  width: calc(100% - 30px);
 `;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -19,7 +19,9 @@ export interface IMarketPlaceRowsPropos {
   itemPrice: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
-  onHandleClick: (value: string) => void;
+  onMarketPlaceItemBuy?: () => void;
+  onMarketPlaceItemRemove?: () => void;
+  disabled?: boolean;
 }
 
 export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
@@ -29,19 +31,21 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   itemPrice,
   equipmentSet,
   scale,
-  onHandleClick,
+  onMarketPlaceItemBuy,
+  onMarketPlaceItemRemove,
+  disabled,
 }) => {
   return (
-    <MarketPlaceWrapper>
-      <ItemIconContainer>
-        <SpriteContainer>
-          <ItemInfoWrapper
-            item={item}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            equipmentSet={equipmentSet}
-            scale={scale}
-          >
+    <MarketplaceWrapper>
+      <ItemInfoWrapper
+        item={item}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        equipmentSet={equipmentSet}
+        scale={scale}
+      >
+        <ItemIconContainer>
+          <SpriteContainer>
             <SpriteFromAtlas
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
@@ -56,70 +60,86 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
               )}
               imgScale={2}
             />
-          </ItemInfoWrapper>
-        </SpriteContainer>
-        <PriceValue>
-          <p>
-            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-              {item.name}
-            </Ellipsis>
-          </p>
-        </PriceValue>
-      </ItemIconContainer>
-      <QuantityContainer>
-        <QuantityDisplay>
-          <TextOverlay>
-            <Item>
-              <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-                {item.rarity}
+            <QuantityContainer>
+              {item.stackQty &&
+                item.stackQty > 1 &&
+                `x${Math.round(item.stackQty * 10) / 10}`}
+            </QuantityContainer>
+          </SpriteContainer>
+          <PriceValue>
+            <p>
+              <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                {item.name}
+              </Ellipsis>
+            </p>
+          </PriceValue>
+        </ItemIconContainer>
+      </ItemInfoWrapper>
+      <Flex>
+        <ItemIconContainer>
+          <SpriteContainer>
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey="others/gold-coin-qty-5.png"
+              imgScale={2}
+            />
+          </SpriteContainer>
+          <PriceValue>
+            <p>
+              <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                ${itemPrice}
               </Ellipsis>
-            </Item>
-          </TextOverlay>
-        </QuantityDisplay>
-      </QuantityContainer>
-      <ItemIconContainer>
-        <SpriteContainer>
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={'others/gold-coin-qty-4.png'}
-            imgScale={2}
-          />
-        </SpriteContainer>
-        <PriceValue>
-          <p>
-            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-              ${itemPrice}
-            </Ellipsis>
-          </p>
-        </PriceValue>
-      </ItemIconContainer>
-      <ButtonContainer>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onClick={() => onHandleClick(item.name)}
-        >
-          Buy
-        </Button>
-      </ButtonContainer>
-    </MarketPlaceWrapper>
+            </p>
+          </PriceValue>
+        </ItemIconContainer>
+        <ButtonContainer>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            disabled={disabled}
+            onPointerDown={() => {
+              if (disabled) return;
+
+              onMarketPlaceItemBuy?.();
+              onMarketPlaceItemRemove?.();
+            }}
+          >
+            {onMarketPlaceItemBuy ? 'Buy' : 'Remove'}
+          </Button>
+        </ButtonContainer>
+      </Flex>
+    </MarketplaceWrapper>
   );
 };
 
-const MarketPlaceWrapper = styled.div`
+const MarketplaceWrapper = styled.div`
   margin: auto;
-  display: grid;
-  grid-template-columns: 35% 20% 20% 25%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
 
   &:hover {
     background-color: ${uiColors.darkGray};
   }
-  padding: 0.5rem;
+
   p {
     font-size: 0.8rem;
   }
 `;
 
+const QuantityContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: 15px;
+  left: 25px;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  gap: 24px;
+`;
+
 const ItemIconContainer = styled.div`
   display: flex;
   justify-content: flex-start;
@@ -132,36 +152,6 @@ const SpriteContainer = styled.div`
   left: 0.5rem;
 `;
 
-const Item = styled.span`
-  color: white;
-  text-align: center;
-  z-index: 1;
-  width: 100%;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const QuantityContainer = styled.div<IContainerProps>`
-  position: relative;
-  display: flex;
-  min-width: 100px;
-  justify-content: center;
-  align-items: center;
-`;
-
-const QuantityDisplay = styled.div`
-  font-size: ${uiFonts.size.small};
-`;
-
 const PriceValue = styled.div`
   margin-left: 40px;
 `;