@rpg-engine/long-bow 0.8.145 → 0.8.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.145",
+  "version": "0.8.146",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -5,13 +5,13 @@ import {
 } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
 import { Input } from '../Input';
 import { Pager } from '../Pager';
 import ModalPortal from '../Abstractions/ModalPortal';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { BlueprintTable } from './BlueprintTable';
 
 export interface IBlueprintSearchModalProps {
   isOpen: boolean;
@@ -28,6 +28,11 @@ export interface IBlueprintSearchModalProps {
 
 const BLUEPRINTS_PER_PAGE = 10;
 
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
 const typeOptions: IOptionsProps[] = [
   { id: 1, value: '', option: 'All Types' },
   ...Object.keys(ItemSubType)
@@ -145,42 +150,12 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
             ) : blueprints.length === 0 ? (
               <EmptyState>No blueprints found</EmptyState>
             ) : (
-              <>
-                <ResultsHeader>
-                  <ColName>Name</ColName>
-                  <ColType>Type</ColType>
-                  <ColTier>Tier</ColTier>
-                </ResultsHeader>
-                {blueprints.map((blueprint) => (
-                  <ResultRow
-                    key={blueprint.key}
-                    onPointerDown={() => onSelect(blueprint)}
-                  >
-                    <SpriteWrapper>
-                      <SpriteFromAtlas
-                        atlasJSON={atlasJSON}
-                        atlasIMG={atlasIMG}
-                        spriteKey={blueprint.texturePath || blueprint.key}
-                        width={32}
-                        height={32}
-                        imgScale={2}
-                        centered
-                      />
-                    </SpriteWrapper>
-                    <ColName>
-                      <BlueprintName>{blueprint.name}</BlueprintName>
-                      <BlueprintKey>{blueprint.key}</BlueprintKey>
-                    </ColName>
-                    <ColType>
-                      <TypeText>{blueprint.type}</TypeText>
-                      {blueprint.subType && blueprint.subType !== blueprint.type && (
-                        <SubTypeText>{blueprint.subType}</SubTypeText>
-                      )}
-                    </ColType>
-                    <ColTier>T{blueprint.tier}</ColTier>
-                  </ResultRow>
-                ))}
-              </>
+              <BlueprintTable
+                blueprints={blueprints}
+                atlasJSON={atlasJSON}
+                atlasIMG={atlasIMG}
+                onSelect={onSelect}
+              />
             )}
           </ResultsWrapper>
 
@@ -226,12 +201,7 @@ const ModalContent = styled.div`
   flex-direction: column;
   gap: 12px;
   pointer-events: auto;
-  animation: scaleIn 0.15s ease-out;
-
-  @keyframes scaleIn {
-    from { transform: scale(0.85); opacity: 0; }
-    to   { transform: scale(1);    opacity: 1; }
-  }
+  animation: ${scaleIn} 0.15s ease-out;
 `;
 
 const Header = styled.div`
@@ -284,7 +254,6 @@ const InputWrapper = styled.div`
 
 const StyledInput = styled(Input)`
   flex: 1;
-  height: 10px;
 `;
 
 const FiltersRow = styled.div`
@@ -306,98 +275,6 @@ const ResultsWrapper = styled.div`
   border-radius: 4px;
 `;
 
-const tableRowBase = `
-  display: grid;
-  grid-template-columns: 32px 1fr 120px 60px;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-`;
-
-const ResultsHeader = styled.div`
-  ${tableRowBase}
-  background: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-
-  > * {
-    font-size: 0.45rem;
-    color: #888;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-`;
-
-const ResultRow = styled.div`
-  ${tableRowBase}
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  cursor: pointer;
-  transition: background 0.1s;
-
-  &:hover {
-    background: rgba(245, 158, 11, 0.08);
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-`;
-
-const SpriteWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-`;
-
-const ColName = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
-`;
-
-const BlueprintName = styled.span`
-  font-size: 0.5rem;
-  color: #ddd;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const BlueprintKey = styled.span`
-  font-size: 0.4rem;
-  color: #666;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const ColType = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-const TypeText = styled.span`
-  font-size: 0.45rem;
-  color: #aaa;
-`;
-
-const SubTypeText = styled.span`
-  font-size: 0.4rem;
-  color: #666;
-`;
-
-const ColTier = styled.div`
-  font-size: 0.5rem;
-  color: #f59e0b;
-  text-align: center;
-`;
-
 const EmptyState = styled.div`
   display: flex;
   align-items: center;

package/src/components/Marketplace/BlueprintTable.tsx

@@ -0,0 +1,158 @@
+import { IMarketplaceBlueprintSummary } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBlueprintTableProps {
+  blueprints: IMarketplaceBlueprintSummary[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+}
+
+export const BlueprintTable: React.FC<IBlueprintTableProps> = ({
+  blueprints,
+  atlasJSON,
+  atlasIMG,
+  onSelect,
+}) => {
+  return (
+    <>
+      <ResultsHeader>
+        <span />
+        <ColName>Name</ColName>
+        <ColType>Type</ColType>
+        <ColTier>Tier</ColTier>
+      </ResultsHeader>
+      {blueprints.map((blueprint) => (
+        <ResultRow
+          key={blueprint.key}
+          $selectable={!!onSelect}
+          onPointerDown={onSelect ? () => onSelect(blueprint) : undefined}
+        >
+          <SpriteWrapper>
+            <SpriteFromAtlas
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              spriteKey={blueprint.texturePath || blueprint.key}
+              width={32}
+              height={32}
+              imgScale={2}
+              centered
+            />
+          </SpriteWrapper>
+          <ColName>
+            <BlueprintName>{blueprint.name}</BlueprintName>
+            {(blueprint.type || blueprint.subType) && (
+              <BlueprintMeta>
+                {[blueprint.type, blueprint.subType]
+                  .filter(Boolean)
+                  .filter((v, i, arr) => arr.indexOf(v) === i)
+                  .join(' · ')}
+              </BlueprintMeta>
+            )}
+          </ColName>
+          <ColType>
+            <TypeText>{blueprint.type}</TypeText>
+            {blueprint.subType && blueprint.subType !== blueprint.type && (
+              <SubTypeText>{blueprint.subType}</SubTypeText>
+            )}
+          </ColType>
+          <ColTier>T{blueprint.tier}</ColTier>
+        </ResultRow>
+      ))}
+    </>
+  );
+};
+
+const tableRowBase = `
+  display: grid;
+  grid-template-columns: 40px 1fr 120px 50px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+`;
+
+const ResultsHeader = styled.div`
+  ${tableRowBase}
+  background: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  > * {
+    font-size: 0.45rem;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+`;
+
+const ResultRow = styled.div<{ $selectable: boolean }>`
+  ${tableRowBase}
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  cursor: ${p => p.$selectable ? 'pointer' : 'default'};
+  transition: background 0.1s;
+
+  &:hover {
+    background: ${p => p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none'};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 32px;
+`;
+
+const ColName = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+
+const BlueprintName = styled.span`
+  font-size: 0.5rem;
+  color: #ddd;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const BlueprintMeta = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ColType = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const TypeText = styled.span`
+  font-size: 0.45rem;
+  color: #aaa;
+`;
+
+const SubTypeText = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+`;
+
+const ColTier = styled.div`
+  font-size: 0.5rem;
+  color: #f59e0b;
+  text-align: center;
+`;

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -4,7 +4,7 @@ import {
 import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
 import { Input } from '../Input';
@@ -27,6 +27,11 @@ export interface IBuyOrderDetailsModalProps {
   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' },
@@ -89,7 +94,7 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
             </SpriteWrapper>
             <ItemInfo>
               <ItemName>{blueprint.name}</ItemName>
-              <ItemKey>{blueprint.type} - {blueprint.subType} - T{blueprint.tier}</ItemKey>
+              <ItemMeta>{[blueprint.type, blueprint.subType].filter(Boolean).filter((v, i, arr) => arr.indexOf(v) === i).join(' · ')} · T{blueprint.tier}</ItemMeta>
             </ItemInfo>
           </ItemDisplay>
 
@@ -170,12 +175,7 @@ const ModalContent = styled.div`
   flex-direction: column;
   gap: 16px;
   pointer-events: auto;
-  animation: scaleIn 0.15s ease-out;
-
-  @keyframes scaleIn {
-    from { transform: scale(0.85); opacity: 0; }
-    to   { transform: scale(1);    opacity: 1; }
-  }
+  animation: ${scaleIn} 0.15s ease-out;
 `;
 
 const Header = styled.div`
@@ -238,7 +238,7 @@ const ItemName = styled.span`
   white-space: nowrap;
 `;
 
-const ItemKey = styled.span`
+const ItemMeta = styled.span`
   font-size: 0.4rem;
   color: #666;
   overflow: hidden;
@@ -270,7 +270,6 @@ const Label = styled.label`
 `;
 
 const StyledInput = styled(Input)`
-  height: 10px;
   width: 100%;
 `;
 

package/src/components/Marketplace/BuyOrderPanel.tsx

@@ -3,7 +3,7 @@ import {
   IMarketplaceBuyOrderItem,
 } from '@rpg-engine/shared';
 import { Search } from 'pixelarticons/react/Search';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Pager } from '../Pager';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
@@ -56,23 +56,41 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
     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 = () => {
-    onCloseDetails?.();
+    setIsDetailsOpen(false);
   };
 
   return (
     <PanelWrapper>
       {/* ── Details modal ── */}
-      {selectedBlueprint && (
+      {displayedBlueprint && isDetailsOpen && (
         <BuyOrderDetailsModal
           isOpen
           onClose={handleCloseDetails}
-          blueprint={selectedBlueprint}
+          blueprint={displayedBlueprint}
           quantity={currentQuantity}
           maxPrice={currentMaxPrice}
           rarity={selectedRarity}
@@ -87,13 +105,13 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
 
       {/* ── Form row — outside scroll so dropdown isn't clipped ── */}
       <FormRow>
-        {selectedBlueprint ? (
+        {displayedBlueprint ? (
           <SelectedBlueprintDisplay onPointerDown={onOpenBlueprintSearch}>
             <RarityContainer $rarity={selectedRarity}>
               <SpriteFromAtlas
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
-                spriteKey={selectedBlueprint.texturePath || selectedBlueprint.key}
+                spriteKey={displayedBlueprint.texturePath || displayedBlueprint.key}
                 width={32}
                 height={32}
                 imgScale={2}
@@ -101,7 +119,7 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
               />
             </RarityContainer>
             <ChangeTextWrapper>
-              <BlueprintName>{selectedBlueprint.name}</BlueprintName>
+              <BlueprintName>{displayedBlueprint.name}</BlueprintName>
               <ChangeText>change</ChangeText>
             </ChangeTextWrapper>
           </SelectedBlueprintDisplay>