@rpg-engine/long-bow 0.8.141 → 0.8.146

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -0,0 +1,306 @@
+import {
+  IMarketplaceBlueprintSummary,
+} from '@rpg-engine/shared';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
+import React from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled, { keyframes } from 'styled-components';
+import { Dropdown } from '../Dropdown';
+import { IOptionsProps } from '../Dropdown';
+import { Input } from '../Input';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBuyOrderDetailsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  blueprint: IMarketplaceBlueprintSummary | null;
+  quantity: number;
+  maxPrice: number;
+  rarity: string;
+  onQuantityChange: (quantity: number) => void;
+  onMaxPriceChange: (price: number) => void;
+  onRarityChange: (rarity: string) => void;
+  onConfirm: () => void;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
+const rarityOptions: IOptionsProps[] = [
+  { id: 1, value: 'Common', option: 'Common' },
+  { id: 2, value: 'Uncommon', option: 'Uncommon' },
+  { id: 3, value: 'Rare', option: 'Rare' },
+  { id: 4, value: 'Epic', option: 'Epic' },
+  { id: 5, value: 'Legendary', option: 'Legendary' },
+];
+
+export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
+  isOpen,
+  onClose,
+  blueprint,
+  quantity,
+  maxPrice,
+  rarity,
+  onQuantityChange,
+  onMaxPriceChange,
+  onRarityChange,
+  onConfirm,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  if (!isOpen || !blueprint) return null;
+
+  const stopPropagation = (e: React.MouseEvent | React.PointerEvent): void => {
+    e.stopPropagation();
+  };
+
+  const handleClose = (e: React.PointerEvent | React.MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={handleClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>Place Buy Request</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <ItemDisplay>
+            <SpriteWrapper>
+              <SpriteFromAtlas
+                atlasJSON={atlasJSON}
+                atlasIMG={atlasIMG}
+                spriteKey={blueprint.texturePath || blueprint.key}
+                width={32}
+                height={32}
+                imgScale={2}
+              />
+            </SpriteWrapper>
+            <ItemInfo>
+              <ItemName>{blueprint.name}</ItemName>
+              <ItemMeta>{[blueprint.type, blueprint.subType].filter(Boolean).filter((v, i, arr) => arr.indexOf(v) === i).join(' · ')} · T{blueprint.tier}</ItemMeta>
+            </ItemInfo>
+          </ItemDisplay>
+
+          <FormSection>
+            <FieldRow>
+              <Label>Quantity</Label>
+              <StyledInput
+                value={quantity || ''}
+                onChange={(e) => onQuantityChange(Number(e.target.value))}
+                placeholder="Qty"
+                type="number"
+                min={1}
+              />
+            </FieldRow>
+
+            <FieldRow>
+              <Label>Max Gold</Label>
+              <StyledInput
+                value={maxPrice || ''}
+                onChange={(e) => onMaxPriceChange(Number(e.target.value))}
+                placeholder="Max gold"
+                type="number"
+                min={1}
+              />
+            </FieldRow>
+
+            <FieldRow>
+              <Label>Rarity</Label>
+              <StyledDropdown
+                key={rarity}
+                options={rarityOptions}
+                onChange={onRarityChange}
+                width="100%"
+              />
+            </FieldRow>
+          </FormSection>
+
+          <ActionsRow>
+            <CancelButton onPointerDown={handleClose}>Cancel</CancelButton>
+            <CTAButton
+              icon={<ShoppingCart width={16} height={16} />}
+              label="Place Request"
+              disabled={quantity <= 0 || maxPrice <= 0}
+              onClick={onConfirm}
+            />
+          </ActionsRow>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  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: 20px 24px;
+  width: 400px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: auto;
+  animation: ${scaleIn} 0.15s ease-out;
+`;
+
+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;
+  pointer-events: auto;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const ItemDisplay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ItemInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+
+const ItemName = styled.span`
+  font-size: 0.55rem;
+  color: #ddd;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ItemMeta = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const FormSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const FieldRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  .rpgui-content .rpgui-dropdown-imp-header {
+    padding: 0px 10px 0 !important;
+  }
+`;
+
+const Label = styled.label`
+  font-size: 0.5rem;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const StyledInput = styled(Input)`
+  width: 100%;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 0px !important;
+  width: 100% !important;
+`;
+
+const ActionsRow = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+`;
+
+const CancelButton = styled.button`
+  flex: 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #ccc;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 0.5rem;
+  font-family: 'Press Start 2P', cursive;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: background 0.1s, border-color 0.1s;
+  pointer-events: auto;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+`;

package/src/components/Marketplace/BuyOrderPanel.tsx

@@ -0,0 +1,284 @@
+import {
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+} from '@rpg-engine/shared';
+import { Search } from 'pixelarticons/react/Search';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Pager } from '../Pager';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { BuyOrderDetailsModal } from './BuyOrderDetailsModal';
+import { BuyOrderRow } from './BuyOrderRows';
+
+export interface IBuyOrderPanelProps {
+  atlasJSON?: any;
+  atlasIMG?: any;
+  selectedBlueprint?: IMarketplaceBlueprintSummary;
+  onOpenBlueprintSearch: () => void;
+  onCloseDetails?: () => void;
+  onQuantityChange: (quantity: number) => void;
+  onMaxPriceChange: (price: number) => void;
+  onRarityChange: (rarity: string) => void;
+  onPlaceBuyOrder: () => void;
+  currentQuantity: number;
+  currentMaxPrice: number;
+  selectedRarity: string;
+
+  yourBuyOrders: IMarketplaceBuyOrderItem[];
+  yourBuyOrdersTotal: number;
+  yourBuyOrdersPage: number;
+  onYourBuyOrdersPageChange: (page: number) => void;
+  onCancelBuyOrder: (buyOrderId: string) => void;
+}
+
+const BUY_ORDERS_PER_PAGE = 5;
+
+export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
+  const {
+    atlasJSON,
+    atlasIMG,
+    selectedBlueprint,
+    onOpenBlueprintSearch,
+    onCloseDetails,
+    onQuantityChange,
+    onMaxPriceChange,
+    onRarityChange,
+    onPlaceBuyOrder,
+    currentQuantity,
+    currentMaxPrice,
+    selectedRarity,
+    yourBuyOrders,
+    yourBuyOrdersTotal,
+    yourBuyOrdersPage,
+    onYourBuyOrdersPageChange,
+    onCancelBuyOrder,
+  } = props;
+
+  // Local blueprint display: cleared immediately on Place Request so the
+  // panel returns to "Select Item" without waiting for the consumer to update
+  // the prop. Cancel keeps it shown so the user can reopen the modal.
+  const [displayedBlueprint, setDisplayedBlueprint] = useState(selectedBlueprint);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(!!selectedBlueprint);
+
+  // Sync when consumer provides a new blueprint (e.g. after search selection)
+  useEffect(() => {
+    if (selectedBlueprint) {
+      setDisplayedBlueprint(selectedBlueprint);
+      setIsDetailsOpen(true);
+    }
+  }, [selectedBlueprint]);
+
+  // Place request: clear display + close modal, then notify consumer
+  const handleConfirm = () => {
+    onPlaceBuyOrder();
+    setDisplayedBlueprint(undefined);
+    setIsDetailsOpen(false);
+    onCloseDetails?.();
+  };
+
+  // Cancel: just close the modal, keep blueprint displayed for reopening
+  const handleCloseDetails = () => {
+    setIsDetailsOpen(false);
+  };
+
+  return (
+    <PanelWrapper>
+      {/* ── Details modal ── */}
+      {displayedBlueprint && isDetailsOpen && (
+        <BuyOrderDetailsModal
+          isOpen
+          onClose={handleCloseDetails}
+          blueprint={displayedBlueprint}
+          quantity={currentQuantity}
+          maxPrice={currentMaxPrice}
+          rarity={selectedRarity}
+          onQuantityChange={onQuantityChange}
+          onMaxPriceChange={onMaxPriceChange}
+          onRarityChange={onRarityChange}
+          onConfirm={handleConfirm}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+        />
+      )}
+
+      {/* ── Form row — outside scroll so dropdown isn't clipped ── */}
+      <FormRow>
+        {displayedBlueprint ? (
+          <SelectedBlueprintDisplay onPointerDown={onOpenBlueprintSearch}>
+            <RarityContainer $rarity={selectedRarity}>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={displayedBlueprint.texturePath || displayedBlueprint.key}
+                width={32}
+                height={32}
+                imgScale={2}
+                centered
+              />
+            </RarityContainer>
+            <ChangeTextWrapper>
+              <BlueprintName>{displayedBlueprint.name}</BlueprintName>
+              <ChangeText>change</ChangeText>
+            </ChangeTextWrapper>
+          </SelectedBlueprintDisplay>
+        ) : (
+          <CTAButton
+            icon={<Search width={18} height={18} />}
+            label="Select Item"
+            iconColor="#f59e0b"
+            onClick={onOpenBlueprintSearch}
+          />
+        )}
+      </FormRow>
+
+      {/* ── Scrollable lists ──────────────────────────────── */}
+      <ScrollArea id="MarketContainer">
+        <Section>
+          <SectionTitle>Your Buy Requests</SectionTitle>
+          {yourBuyOrders.length === 0 ? (
+            <EmptyState>No requests yet</EmptyState>
+          ) : (
+            yourBuyOrders.map((order) => (
+              <BuyOrderRow
+                key={order._id}
+                buyOrder={order}
+                atlasJSON={atlasJSON}
+                atlasIMG={atlasIMG}
+                isOwn
+                onCancel={onCancelBuyOrder}
+              />
+            ))
+          )}
+          {yourBuyOrdersTotal > BUY_ORDERS_PER_PAGE && (
+            <PagerRow>
+              <Pager
+                totalItems={yourBuyOrdersTotal}
+                currentPage={yourBuyOrdersPage}
+                itemsPerPage={BUY_ORDERS_PER_PAGE}
+                onPageChange={onYourBuyOrdersPageChange}
+              />
+            </PagerRow>
+          )}
+        </Section>
+
+      </ScrollArea>
+    </PanelWrapper>
+  );
+};
+
+const PanelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 2.5%;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const FormRow = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
+  overflow: visible;
+`;
+
+const ScrollArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: scroll;
+  max-height: 420px;
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const SectionTitle = styled.p`
+  margin: 0 0 2px 0;
+  font-size: 0.45rem;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const SelectedBlueprintDisplay = styled.button`
+  background: rgba(245, 158, 11, 0.08);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  border-radius: 4px;
+  padding: 6px 10px;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.1s;
+
+  /* Adjust sprite position slightly down and right */
+  > div:first-child {
+    position: relative;
+    top: 2px;
+    left: 2px;
+  }
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.15);
+  }
+`;
+
+const RarityContainer = styled.div<{ $rarity: string }>`
+  border-color: ${({ $rarity }) => rarityColor({ rarity: $rarity } as any)};
+  box-shadow: ${({ $rarity }) => `0 0 5px 8px ${rarityColor({ rarity: $rarity } as any)}`} inset,
+    ${({ $rarity }) => `0 0 8px 6px ${rarityColor({ rarity: $rarity } as any)}`};
+  width: 32px;
+  height: 32px;
+`;
+
+const ChangeTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+
+const BlueprintName = styled.span`
+  font-size: 0.5rem;
+  color: #ddd;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const ChangeText = styled.span`
+  font-size: 0.4rem;
+  color: #f59e0b;
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 45px;
+  font-size: 0.45rem;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+`;
+
+const PagerRow = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+`;
+
+export { BUY_ORDERS_PER_PAGE };