@rpg-engine/long-bow 0.8.145 → 0.8.146

package/dist/components/Marketplace/BlueprintTable.d.ts

@@ -0,0 +1,9 @@
+import { IMarketplaceBlueprintSummary } from '@rpg-engine/shared';
+import React from 'react';
+export interface IBlueprintTableProps {
+    blueprints: IMarketplaceBlueprintSummary[];
+    atlasJSON: any;
+    atlasIMG: any;
+    onSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+}
+export declare const BlueprintTable: React.FC<IBlueprintTableProps>;

package/dist/long-bow.cjs.development.js

@@ -44510,7 +44510,79 @@ var TabButton$1 = /*#__PURE__*/styled__default.button.withConfig({
   return $active ? '#ffffff' : '#888888';
 });
 
+var BlueprintTable = function BlueprintTable(_ref) {
+  var blueprints = _ref.blueprints,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onSelect = _ref.onSelect;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ResultsHeader, null, React__default.createElement("span", null), React__default.createElement(ColName, null, "Name"), React__default.createElement(ColType, null, "Type"), React__default.createElement(ColTier, null, "Tier")), blueprints.map(function (blueprint) {
+    return React__default.createElement(ResultRow, {
+      key: blueprint.key,
+      "$selectable": !!onSelect,
+      onPointerDown: onSelect ? function () {
+        return onSelect(blueprint);
+      } : undefined
+    }, React__default.createElement(SpriteWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
+      atlasJSON: atlasJSON,
+      atlasIMG: atlasIMG,
+      spriteKey: blueprint.texturePath || blueprint.key,
+      width: 32,
+      height: 32,
+      imgScale: 2,
+      centered: true
+    })), React__default.createElement(ColName, null, React__default.createElement(BlueprintName, null, blueprint.name), (blueprint.type || blueprint.subType) && React__default.createElement(BlueprintMeta, null, [blueprint.type, blueprint.subType].filter(Boolean).filter(function (v, i, arr) {
+      return arr.indexOf(v) === i;
+    }).join(' · '))), React__default.createElement(ColType, null, React__default.createElement(TypeText, null, blueprint.type), blueprint.subType && blueprint.subType !== blueprint.type && React__default.createElement(SubTypeText, null, blueprint.subType)), React__default.createElement(ColTier, null, "T", blueprint.tier));
+  }));
+};
+var tableRowBase = "\n  display: grid;\n  grid-template-columns: 40px 1fr 120px 50px;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n";
+var ResultsHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__ResultsHeader",
+  componentId: "sc-1ysxhx2-0"
+})(["", " 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;}"], tableRowBase);
+var ResultRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__ResultRow",
+  componentId: "sc-1ysxhx2-1"
+})(["", " border-bottom:1px solid rgba(255,255,255,0.04);cursor:", ";transition:background 0.1s;&:hover{background:", ";}&:last-child{border-bottom:none;}"], tableRowBase, function (p) {
+  return p.$selectable ? 'pointer' : 'default';
+}, function (p) {
+  return p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none';
+});
+var SpriteWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__SpriteWrapper",
+  componentId: "sc-1ysxhx2-2"
+})(["display:flex;align-items:center;justify-content:center;width:40px;height:32px;"]);
+var ColName = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__ColName",
+  componentId: "sc-1ysxhx2-3"
+})(["display:flex;flex-direction:column;gap:2px;overflow:hidden;"]);
+var BlueprintName = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "BlueprintTable__BlueprintName",
+  componentId: "sc-1ysxhx2-4"
+})(["font-size:0.5rem;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+var BlueprintMeta = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "BlueprintTable__BlueprintMeta",
+  componentId: "sc-1ysxhx2-5"
+})(["font-size:0.4rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+var ColType = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__ColType",
+  componentId: "sc-1ysxhx2-6"
+})(["display:flex;flex-direction:column;gap:2px;"]);
+var TypeText = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "BlueprintTable__TypeText",
+  componentId: "sc-1ysxhx2-7"
+})(["font-size:0.45rem;color:#aaa;"]);
+var SubTypeText = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "BlueprintTable__SubTypeText",
+  componentId: "sc-1ysxhx2-8"
+})(["font-size:0.4rem;color:#666;"]);
+var ColTier = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "BlueprintTable__ColTier",
+  componentId: "sc-1ysxhx2-9"
+})(["font-size:0.5rem;color:#f59e0b;text-align:center;"]);
+
 var BLUEPRINTS_PER_PAGE = 10;
+var scaleIn = /*#__PURE__*/styled.keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var typeOptions = /*#__PURE__*/[{
   id: 1,
   value: '',
@@ -44625,22 +44697,12 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
     options: subTypeOptions,
     onChange: handleSubTypeChange,
     width: "100%"
-  })), React__default.createElement(ResultsWrapper, null, isLoading ? React__default.createElement(EmptyState$2, null, "Loading...") : blueprints.length === 0 ? React__default.createElement(EmptyState$2, null, "No blueprints found") : React__default.createElement(React__default.Fragment, null, React__default.createElement(ResultsHeader, null, React__default.createElement(ColName, null, "Name"), React__default.createElement(ColType, null, "Type"), React__default.createElement(ColTier, null, "Tier")), blueprints.map(function (blueprint) {
-    return React__default.createElement(ResultRow, {
-      key: blueprint.key,
-      onPointerDown: function onPointerDown() {
-        return onSelect(blueprint);
-      }
-    }, React__default.createElement(SpriteWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
-      atlasJSON: atlasJSON,
-      atlasIMG: atlasIMG,
-      spriteKey: blueprint.texturePath || blueprint.key,
-      width: 32,
-      height: 32,
-      imgScale: 2,
-      centered: true
-    })), React__default.createElement(ColName, null, React__default.createElement(BlueprintName, null, blueprint.name), React__default.createElement(BlueprintKey, null, blueprint.key)), React__default.createElement(ColType, null, React__default.createElement(TypeText, null, blueprint.type), blueprint.subType && blueprint.subType !== blueprint.type && React__default.createElement(SubTypeText, null, blueprint.subType)), React__default.createElement(ColTier, null, "T", blueprint.tier));
-  }))), React__default.createElement(PagerContainer$1, null, React__default.createElement(Pager, {
+  })), React__default.createElement(ResultsWrapper, null, isLoading ? React__default.createElement(EmptyState$2, null, "Loading...") : blueprints.length === 0 ? React__default.createElement(EmptyState$2, null, "No blueprints found") : React__default.createElement(BlueprintTable, {
+    blueprints: blueprints,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    onSelect: onSelect
+  })), React__default.createElement(PagerContainer$1, null, React__default.createElement(Pager, {
     totalItems: totalCount,
     currentPage: currentPage,
     itemsPerPage: BLUEPRINTS_PER_PAGE,
@@ -44658,7 +44720,7 @@ var ModalContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
 var ModalContent$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__ModalContent",
   componentId: "sc-i7bssq-2"
-})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;display:flex;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;}}"]);
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;display:flex;flex-direction:column;gap:12px;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn);
 var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__Header",
   componentId: "sc-i7bssq-3"
@@ -44678,7 +44740,7 @@ var InputWrapper = /*#__PURE__*/styled__default.div.withConfig({
 var StyledInput$2 = /*#__PURE__*/styled__default(Input).withConfig({
   displayName: "BlueprintSearchModal__StyledInput",
   componentId: "sc-i7bssq-7"
-})(["flex:1;height:10px;"]);
+})(["flex:1;"]);
 var FiltersRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__FiltersRow",
   componentId: "sc-i7bssq-8"
@@ -44691,56 +44753,16 @@ var ResultsWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__ResultsWrapper",
   componentId: "sc-i7bssq-10"
 })(["overflow-y:auto;max-height:320px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;"]);
-var tableRowBase = "\n  display: grid;\n  grid-template-columns: 32px 1fr 120px 60px;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n";
-var ResultsHeader = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__ResultsHeader",
-  componentId: "sc-i7bssq-11"
-})(["", " 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;}"], tableRowBase);
-var ResultRow = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__ResultRow",
-  componentId: "sc-i7bssq-12"
-})(["", " 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;}"], tableRowBase);
-var SpriteWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__SpriteWrapper",
-  componentId: "sc-i7bssq-13"
-})(["display:flex;align-items:center;justify-content:center;width:32px;height:32px;"]);
-var ColName = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__ColName",
-  componentId: "sc-i7bssq-14"
-})(["display:flex;flex-direction:column;gap:2px;overflow:hidden;"]);
-var BlueprintName = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "BlueprintSearchModal__BlueprintName",
-  componentId: "sc-i7bssq-15"
-})(["font-size:0.5rem;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-var BlueprintKey = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "BlueprintSearchModal__BlueprintKey",
-  componentId: "sc-i7bssq-16"
-})(["font-size:0.4rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-var ColType = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__ColType",
-  componentId: "sc-i7bssq-17"
-})(["display:flex;flex-direction:column;gap:2px;"]);
-var TypeText = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "BlueprintSearchModal__TypeText",
-  componentId: "sc-i7bssq-18"
-})(["font-size:0.45rem;color:#aaa;"]);
-var SubTypeText = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "BlueprintSearchModal__SubTypeText",
-  componentId: "sc-i7bssq-19"
-})(["font-size:0.4rem;color:#666;"]);
-var ColTier = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__ColTier",
-  componentId: "sc-i7bssq-20"
-})(["font-size:0.5rem;color:#f59e0b;text-align:center;"]);
 var EmptyState$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__EmptyState",
-  componentId: "sc-i7bssq-21"
+  componentId: "sc-i7bssq-11"
 })(["display:flex;align-items:center;justify-content:center;height:100px;font-size:0.55rem;color:#666;text-transform:uppercase;letter-spacing:1px;"]);
 var PagerContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__PagerContainer",
-  componentId: "sc-i7bssq-22"
+  componentId: "sc-i7bssq-12"
 })(["display:flex;justify-content:center;align-items:center;"]);
 
+var scaleIn$1 = /*#__PURE__*/styled.keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var rarityOptions = [{
   id: 1,
   value: 'Common',
@@ -44799,7 +44821,9 @@ var BuyOrderDetailsModal = function BuyOrderDetailsModal(_ref) {
     width: 32,
     height: 32,
     imgScale: 2
-  })), React__default.createElement(ItemInfo$1, null, React__default.createElement(ItemName, null, blueprint.name), React__default.createElement(ItemKey, null, blueprint.type, " - ", blueprint.subType, " - T", blueprint.tier))), React__default.createElement(FormSection, null, React__default.createElement(FieldRow, null, React__default.createElement(Label$4, null, "Quantity"), React__default.createElement(StyledInput$3, {
+  })), React__default.createElement(ItemInfo$1, null, React__default.createElement(ItemName, null, blueprint.name), React__default.createElement(ItemMeta, null, [blueprint.type, blueprint.subType].filter(Boolean).filter(function (v, i, arr) {
+    return arr.indexOf(v) === i;
+  }).join(' · '), " \xB7 T", blueprint.tier))), React__default.createElement(FormSection, null, React__default.createElement(FieldRow, null, React__default.createElement(Label$4, null, "Quantity"), React__default.createElement(StyledInput$3, {
     value: quantity || '',
     onChange: function onChange(e) {
       return onQuantityChange(Number(e.target.value));
@@ -44843,7 +44867,7 @@ var ModalContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
 var ModalContent$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BuyOrderDetailsModal__ModalContent",
   componentId: "sc-6bghe9-2"
-})(["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;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
+})(["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:", " 0.15s ease-out;"], scaleIn$1);
 var Header$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BuyOrderDetailsModal__Header",
   componentId: "sc-6bghe9-3"
@@ -44872,8 +44896,8 @@ var ItemName = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BuyOrderDetailsModal__ItemName",
   componentId: "sc-6bghe9-9"
 })(["font-size:0.55rem;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-var ItemKey = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "BuyOrderDetailsModal__ItemKey",
+var ItemMeta = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "BuyOrderDetailsModal__ItemMeta",
   componentId: "sc-6bghe9-10"
 })(["font-size:0.4rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var FormSection = /*#__PURE__*/styled__default.div.withConfig({
@@ -44891,7 +44915,7 @@ var Label$4 = /*#__PURE__*/styled__default.label.withConfig({
 var StyledInput$3 = /*#__PURE__*/styled__default(Input).withConfig({
   displayName: "BuyOrderDetailsModal__StyledInput",
   componentId: "sc-6bghe9-14"
-})(["height:10px;width:100%;"]);
+})(["width:100%;"]);
 var StyledDropdown$3 = /*#__PURE__*/styled__default(Dropdown).withConfig({
   displayName: "BuyOrderDetailsModal__StyledDropdown",
   componentId: "sc-6bghe9-15"
@@ -45269,17 +45293,37 @@ var BuyOrderPanel = function BuyOrderPanel(props) {
     yourBuyOrdersPage = props.yourBuyOrdersPage,
     onYourBuyOrdersPageChange = props.onYourBuyOrdersPageChange,
     onCancelBuyOrder = props.onCancelBuyOrder;
+  // 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.
+  var _useState = React.useState(selectedBlueprint),
+    displayedBlueprint = _useState[0],
+    setDisplayedBlueprint = _useState[1];
+  var _useState2 = React.useState(!!selectedBlueprint),
+    isDetailsOpen = _useState2[0],
+    setIsDetailsOpen = _useState2[1];
+  // Sync when consumer provides a new blueprint (e.g. after search selection)
+  React.useEffect(function () {
+    if (selectedBlueprint) {
+      setDisplayedBlueprint(selectedBlueprint);
+      setIsDetailsOpen(true);
+    }
+  }, [selectedBlueprint]);
+  // Place request: clear display + close modal, then notify consumer
   var handleConfirm = function handleConfirm() {
     onPlaceBuyOrder();
+    setDisplayedBlueprint(undefined);
+    setIsDetailsOpen(false);
     onCloseDetails == null ? void 0 : onCloseDetails();
   };
+  // Cancel: just close the modal, keep blueprint displayed for reopening
   var handleCloseDetails = function handleCloseDetails() {
-    onCloseDetails == null ? void 0 : onCloseDetails();
+    setIsDetailsOpen(false);
   };
-  return React__default.createElement(PanelWrapper, null, selectedBlueprint && React__default.createElement(BuyOrderDetailsModal, {
+  return React__default.createElement(PanelWrapper, null, displayedBlueprint && isDetailsOpen && React__default.createElement(BuyOrderDetailsModal, {
     isOpen: true,
     onClose: handleCloseDetails,
-    blueprint: selectedBlueprint,
+    blueprint: displayedBlueprint,
     quantity: currentQuantity,
     maxPrice: currentMaxPrice,
     rarity: selectedRarity,
@@ -45289,19 +45333,19 @@ var BuyOrderPanel = function BuyOrderPanel(props) {
     onConfirm: handleConfirm,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG
-  }), React__default.createElement(FormRow, null, selectedBlueprint ? React__default.createElement(SelectedBlueprintDisplay, {
+  }), React__default.createElement(FormRow, null, displayedBlueprint ? React__default.createElement(SelectedBlueprintDisplay, {
     onPointerDown: onOpenBlueprintSearch
   }, React__default.createElement(RarityContainer, {
     "$rarity": selectedRarity
   }, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    spriteKey: selectedBlueprint.texturePath || selectedBlueprint.key,
+    spriteKey: displayedBlueprint.texturePath || displayedBlueprint.key,
     width: 32,
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ChangeTextWrapper, null, React__default.createElement(BlueprintName$1, null, selectedBlueprint.name), React__default.createElement(ChangeText, null, "change"))) : React__default.createElement(CTAButton, {
+  })), React__default.createElement(ChangeTextWrapper, null, React__default.createElement(BlueprintName$1, null, displayedBlueprint.name), React__default.createElement(ChangeText, null, "change"))) : React__default.createElement(CTAButton, {
     icon: React__default.createElement(Search.Search, {
       width: 18,
       height: 18