@rpg-engine/long-bow 0.8.141 → 0.8.146

package/src/components/Marketplace/BuyOrderRows.tsx

@@ -0,0 +1,287 @@
+import { IMarketplaceBuyOrderItem, MarketplaceBuyOrderStatus } from '@rpg-engine/shared';
+import { Delete } from 'pixelarticons/react/Delete';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { resolveAtlasSpriteKey } from '../../utils/atlasUtils';
+import { LabelPill } from '../shared/LabelPill';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SimpleTooltip } from '../shared/SimpleTooltip';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBuyOrderRowProps {
+  buyOrder: IMarketplaceBuyOrderItem;
+  atlasJSON?: any;
+  atlasIMG?: any;
+  isOwn?: boolean;
+  onCancel?: (buyOrderId: string) => void;
+  onFulfill?: (buyOrderId: string) => void;
+  showRequestTag?: boolean;
+  requestTagLabel?: string;
+}
+
+const BUY_ORDER_DURATION_WEEKS = 4;
+
+// Format "Active" → "ACTIVE", "Fulfilled" → "FULFILLED"
+const formatStatusLabel = (status: string): string => {
+  const words = status.split(/(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/);
+  return words.join(' ').toUpperCase();
+};
+
+const formatBlueprintKey = (key: string): string => {
+  const name = key.includes('/') ? key.split('/').pop()! : key;
+  return name.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+};
+
+const getTimeRemaining = (createdAt: Date): string => {
+  const expiry = new Date(new Date(createdAt).getTime() + BUY_ORDER_DURATION_WEEKS * 7 * 24 * 60 * 60 * 1000);
+  const diffMs = expiry.getTime() - Date.now();
+  if (diffMs <= 0) return 'Expired';
+  const diffDays = Math.floor(diffMs / (24 * 60 * 60 * 1000));
+  const diffHours = Math.floor((diffMs % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
+  return diffDays > 0 ? `${diffDays}d ${diffHours}h` : `${diffHours}h`;
+};
+
+const RARITY_COLORS: Record<string, string> = {
+  Uncommon: 'rgba(13, 193, 13, 0.6)',
+  Rare: 'rgba(8, 104, 187, 0.6)',
+  Epic: 'rgba(191, 0, 255, 0.6)',
+  Legendary: 'rgba(255, 191, 0, 0.6)',
+};
+
+const STATUS_COLORS: Record<MarketplaceBuyOrderStatus, string> = {
+  [MarketplaceBuyOrderStatus.Active]: uiColors.lightGreen,
+  [MarketplaceBuyOrderStatus.Fulfilled]: uiColors.blue,
+  [MarketplaceBuyOrderStatus.Expired]: uiColors.cardinal,
+  [MarketplaceBuyOrderStatus.Cancelled]: uiColors.red,
+};
+
+export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
+  buyOrder,
+  atlasJSON,
+  atlasIMG,
+  isOwn,
+  onCancel,
+  onFulfill,
+  showRequestTag = false,
+  requestTagLabel = 'Buy Request',
+}) => {
+  const timeRemaining =
+    buyOrder.status === MarketplaceBuyOrderStatus.Active ? getTimeRemaining(buyOrder.createdAt) : null;
+  const spriteKey = resolveAtlasSpriteKey(atlasJSON, buyOrder.itemBlueprintKey);
+  const rarityGlow = buyOrder.itemRarity ? RARITY_COLORS[buyOrder.itemRarity] || null : null;
+
+  return (
+    <RowWrapper>
+      <ItemSection>
+        <SpriteContainer>
+          <RarityGlow $color={rarityGlow}>
+            {spriteKey && atlasIMG ? (
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={spriteKey}
+                imgScale={2}
+                imgClassname="sprite-from-atlas-img--item"
+              />
+            ) : (
+              <SpritePlaceholder />
+            )}
+          </RarityGlow>
+        </SpriteContainer>
+
+        <ItemDetails>
+          <ItemName>
+            <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+              {formatBlueprintKey(buyOrder.itemBlueprintKey)}
+            </Ellipsis>
+          </ItemName>
+          <MetaRow>
+            <GoldPriceRow>
+              {atlasIMG && atlasJSON && (
+                <GoldIcon>
+                  <SimpleTooltip content="Gold Coin" direction="top">
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey="others/gold-coin-qty-5.png"
+                      imgScale={1}
+                    />
+                  </SimpleTooltip>
+                </GoldIcon>
+              )}
+              <GoldPrice>{buyOrder.maxPrice}</GoldPrice>
+            </GoldPriceRow>
+            {showRequestTag && (
+              <LabelPill
+                background="rgba(34, 197, 94, 0.16)"
+                borderColor="rgba(34, 197, 94, 0.4)"
+                color="#bbf7d0"
+              >
+                {requestTagLabel}
+              </LabelPill>
+            )}
+            {buyOrder.itemRarity && (
+              <LabelPill
+                background={rarityGlow ?? 'rgba(255,255,255,0.1)'}
+                borderColor="rgba(255,255,255,0.08)"
+                color="#fff"
+              >
+                {buyOrder.itemRarity}
+              </LabelPill>
+            )}
+            {isOwn && (
+              <LabelPill
+                background={STATUS_COLORS[buyOrder.status]}
+                borderColor="transparent"
+                color="#fff"
+              >
+                {formatStatusLabel(buyOrder.status)}
+              </LabelPill>
+            )}
+            {timeRemaining && (
+              <LabelPill
+                background="rgba(255,255,255,0.08)"
+                borderColor="rgba(255,255,255,0.08)"
+                color="#fff"
+              >
+                {timeRemaining}
+              </LabelPill>
+            )}
+          </MetaRow>
+        </ItemDetails>
+      </ItemSection>
+
+      {isOwn && buyOrder.status === MarketplaceBuyOrderStatus.Active && onCancel && (
+        <ActionSection>
+          <CTAButton
+            icon={<Delete width={18} height={18} />}
+            label="Cancel"
+            iconColor="#ef4444"
+            onClick={() => onCancel(buyOrder._id)}
+          />
+        </ActionSection>
+      )}
+
+      {!isOwn && buyOrder.status === MarketplaceBuyOrderStatus.Active && onFulfill && (
+        <ActionSection>
+          <CTAButton
+            icon={<ShoppingBag width={18} height={18} />}
+            label="Fulfill"
+            iconColor="#22c55e"
+            onClick={() => onFulfill(buyOrder._id)}
+          />
+        </ActionSection>
+      )}
+    </RowWrapper>
+  );
+};
+
+// ── Styled components matching MarketplaceRows layout ──
+
+const RowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.8rem;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border-left: 4px solid transparent;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.2);
+    border-left-color: #f59e0b;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+  }
+`;
+
+const ItemSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  flex-shrink: 0;
+  min-width: 44px;
+`;
+
+const RarityGlow = styled.div<{ $color: string | null }>`
+  width: 32px;
+  height: 32px;
+  ${({ $color }) =>
+    $color
+      ? `
+    border-color: ${$color};
+    box-shadow: 0 0 5px 8px ${$color} inset, 0 0 8px 6px ${$color};
+  `
+      : ''}
+`;
+
+const SpritePlaceholder = styled.div`
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+`;
+
+const ItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+  margin-left: 1rem;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem !important;
+  color: #ffffff;
+`;
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+`;
+
+const GoldPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+`;
+
+const GoldIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -0.6rem;
+  left: -0.5rem;
+`;
+
+const GoldPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem !important;
+  color: #fef08a;
+  line-height: 1;
+`;
+
+
+const ActionSection = styled.div`
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+`;