@rpg-engine/long-bow 0.8.136 → 0.8.137

package/dist/long-bow.esm.js

@@ -5,7 +5,7 @@ import { v4 } from 'uuid';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet, FaShoppingCart } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -30302,49 +30302,40 @@ var PageInfo$1 = /*#__PURE__*/styled.div.withConfig({
 var TRANSACTION_TYPE_LABELS = {
   Purchase: 'Purchase',
   Transfer: 'Transfer',
-  MarketplaceSale: 'Marketplace Sale',
-  MarketplacePurchase: 'Marketplace Buy',
-  StorePurchase: 'Store Purchase',
+  MarketplaceSale: 'Mkt Sale',
+  MarketplacePurchase: 'Mkt Buy',
+  StorePurchase: 'Store',
   Fee: 'Fee',
   Refund: 'Refund',
-  AdminAdjustment: 'Admin Adjustment'
+  AdminAdjustment: 'Admin'
 };
 var TRANSACTION_TYPE_OPTIONS = [{
-  id: 0,
   value: '',
-  option: 'All Types'
+  label: 'All Types'
 }, {
-  id: 1,
   value: 'Purchase',
-  option: 'Purchase'
+  label: 'Purchase'
 }, {
-  id: 2,
   value: 'Transfer',
-  option: 'Transfer'
+  label: 'Transfer'
 }, {
-  id: 3,
   value: 'MarketplaceSale',
-  option: 'Marketplace Sale'
+  label: 'Marketplace Sale'
 }, {
-  id: 4,
   value: 'MarketplacePurchase',
-  option: 'Marketplace Buy'
+  label: 'Marketplace Buy'
 }, {
-  id: 5,
   value: 'StorePurchase',
-  option: 'Store Purchase'
+  label: 'Store Purchase'
 }, {
-  id: 6,
   value: 'Fee',
-  option: 'Fee'
+  label: 'Fee'
 }, {
-  id: 7,
   value: 'Refund',
-  option: 'Refund'
+  label: 'Refund'
 }, {
-  id: 8,
   value: 'AdminAdjustment',
-  option: 'Admin Adjustment'
+  label: 'Admin Adjustment'
 }];
 var DCHistoryPanel = function DCHistoryPanel(_ref) {
   var transactions = _ref.transactions,
@@ -30355,7 +30346,13 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
   var _React$useState = React.useState(''),
     selectedType = _React$useState[0],
     setSelectedType = _React$useState[1];
-  var handleTypeChange = function handleTypeChange(value) {
+  // Auto-load on first mount (when History tab is opened)
+  React.useEffect(function () {
+    onRequestHistory(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var handleTypeChange = function handleTypeChange(e) {
+    var value = e.target.value;
     setSelectedType(value);
     onRequestHistory(1, value || undefined);
   };
@@ -30364,22 +30361,26 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
   };
   var formatDate = function formatDate(dateStr) {
     var d = new Date(dateStr);
-    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
+    return d.getMonth() + 1 + "/" + d.getDate() + "/" + String(d.getFullYear()).slice(-2);
   };
-  return React.createElement(PanelContainer, null, React.createElement(FilterRow, null, React.createElement(FilterLabel, null, "Filter:"), React.createElement(Dropdown, {
-    options: TRANSACTION_TYPE_OPTIONS,
-    onChange: handleTypeChange,
-    width: "200px"
-  })), loading && React.createElement(LoadingRow, null, React.createElement(Spinner, null), React.createElement("span", null, "Loading...")), !loading && transactions.length === 0 && React.createElement(EmptyMessage, null, "No transactions found."), !loading && transactions.length > 0 && React.createElement(TransactionList, null, transactions.map(function (tx) {
+  return React.createElement(PanelContainer, null, React.createElement(FilterRow, null, React.createElement(FilterLabel, null, "Filter:"), React.createElement(TypeSelect, {
+    value: selectedType,
+    onChange: handleTypeChange
+  }, TRANSACTION_TYPE_OPTIONS.map(function (opt) {
+    return React.createElement("option", {
+      key: opt.value,
+      value: opt.value
+    }, opt.label);
+  }))), loading && React.createElement(LoadingRow, null, React.createElement(Spinner, null), React.createElement("span", null, "Loading...")), !loading && transactions.length === 0 && React.createElement(EmptyMessage, null, "No transactions found."), !loading && transactions.length > 0 && React.createElement(TransactionList, null, transactions.map(function (tx) {
     var _TRANSACTION_TYPE_LAB, _tx$note;
     var isCredit = tx.amount > 0;
     var label = (_TRANSACTION_TYPE_LAB = TRANSACTION_TYPE_LABELS[tx.type]) != null ? _TRANSACTION_TYPE_LAB : tx.type;
+    var subtitle = (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? tx.relatedCharacterName : '';
     return React.createElement(TransactionRow, {
       key: tx._id
-    }, React.createElement(TxType, null, label), React.createElement(TxAmount, {
+    }, React.createElement(TxLeft, null, React.createElement(TxType, null, label), subtitle ? React.createElement(TxNote, null, subtitle) : null), React.createElement(TxRight, null, React.createElement(TxAmount, {
       "$credit": isCredit
-    }, isCredit ? '+' : '', tx.amount, " DC"), React.createElement(TxNote, null, (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? "With: " + tx.relatedCharacterName : ''), React.createElement(TxDate, null, formatDate(tx.createdAt)), React.createElement(TxBalance, null, "Balance: ", tx.balanceAfter, " DC"));
+    }, isCredit ? '+' : '', tx.amount, " DC"), React.createElement(TxDate, null, formatDate(tx.createdAt))));
   })), totalPages > 1 && React.createElement(Pagination, {
     currentPage: currentPage,
     totalPages: totalPages,
@@ -30393,54 +30394,62 @@ var PanelContainer = /*#__PURE__*/styled.div.withConfig({
 var FilterRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__FilterRow",
   componentId: "sc-debjdj-1"
-})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;"]);
+})(["display:flex;align-items:center;gap:8px;margin-bottom:2px;"]);
 var FilterLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__FilterLabel",
   componentId: "sc-debjdj-2"
-})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+})(["font-size:7px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+var TypeSelect = /*#__PURE__*/styled.select.withConfig({
+  displayName: "DCHistoryPanel__TypeSelect",
+  componentId: "sc-debjdj-3"
+})(["background:rgba(0,0,0,0.7);border:1px solid rgba(245,158,11,0.4);border-radius:3px;color:#f59e0b;font-size:7px;font-family:'Press Start 2P',cursive;padding:3px 5px;cursor:pointer;outline:none;flex:1;option{background:#1a1a2e;color:#f59e0b;}&:hover{border-color:#f59e0b;}&:focus{border-color:#f59e0b;box-shadow:0 0 0 1px rgba(245,158,11,0.3);}"]);
 var TransactionList = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__TransactionList",
-  componentId: "sc-debjdj-3"
-})(["display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;"]);
+  componentId: "sc-debjdj-4"
+})(["display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto;&::-webkit-scrollbar{width:4px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.4);border-radius:2px;}"]);
 var TransactionRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__TransactionRow",
-  componentId: "sc-debjdj-4"
-})(["background:rgba(0,0,0,0.4);border:1px solid rgba(255,215,0,0.2);padding:8px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px;"]);
+  componentId: "sc-debjdj-5"
+})(["background:rgba(0,0,0,0.35);border:1px solid rgba(245,158,11,0.15);border-radius:2px;padding:5px 7px;display:flex;align-items:center;gap:8px;"]);
+var TxLeft = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__TxLeft",
+  componentId: "sc-debjdj-6"
+})(["flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;"]);
+var TxRight = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__TxRight",
+  componentId: "sc-debjdj-7"
+})(["display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;"]);
 var TxType = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxType",
-  componentId: "sc-debjdj-5"
-})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;grid-column:1;grid-row:1;"]);
+  componentId: "sc-debjdj-8"
+})(["font-size:7px;color:#f59e0b;font-family:'Press Start 2P',cursive;"]);
 var TxAmount = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxAmount",
-  componentId: "sc-debjdj-6"
-})(["font-size:10px;font-family:'Press Start 2P',cursive;color:", ";font-weight:bold;grid-column:2;grid-row:1;text-align:right;"], function (_ref2) {
+  componentId: "sc-debjdj-9"
+})(["font-size:8px;font-family:'Press Start 2P',cursive;color:", ";white-space:nowrap;"], function (_ref2) {
   var $credit = _ref2.$credit;
   return $credit ? uiColors.green : uiColors.red;
 });
 var TxNote = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxNote",
-  componentId: "sc-debjdj-7"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1;grid-row:2;"], uiColors.lightGray);
+  componentId: "sc-debjdj-10"
+})(["font-size:6px;color:", ";font-family:'Press Start 2P',cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], uiColors.lightGray);
 var TxDate = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxDate",
-  componentId: "sc-debjdj-8"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:2;grid-row:2;text-align:right;"], uiColors.lightGray);
-var TxBalance = /*#__PURE__*/styled.span.withConfig({
-  displayName: "DCHistoryPanel__TxBalance",
-  componentId: "sc-debjdj-9"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1 / 3;grid-row:3;opacity:0.7;"], uiColors.white);
+  componentId: "sc-debjdj-11"
+})(["font-size:6px;color:rgba(255,255,255,0.4);font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
 var LoadingRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__LoadingRow",
-  componentId: "sc-debjdj-10"
+  componentId: "sc-debjdj-12"
 })(["display:flex;align-items:center;gap:8px;justify-content:center;padding:16px;color:", ";font-size:9px;font-family:'Press Start 2P',cursive;"], uiColors.white);
 var Spinner = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__Spinner",
-  componentId: "sc-debjdj-11"
-})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:20px;height:20px;animation:spin 0.8s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
+  componentId: "sc-debjdj-13"
+})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:16px;height:16px;animation:spin 0.8s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
 var EmptyMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCHistoryPanel__EmptyMessage",
-  componentId: "sc-debjdj-12"
-})(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;text-align:center;padding:20px;"], uiColors.lightGray);
+  componentId: "sc-debjdj-14"
+})(["font-size:8px;color:", ";font-family:'Press Start 2P',cursive;text-align:center;padding:20px;"], uiColors.lightGray);
 
 // Global style to prevent body scrolling when modal is open
 var GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
@@ -30592,7 +30601,9 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     onClearTransferResult = _ref.onClearTransferResult,
     characterName = _ref.characterName,
     onInputFocus = _ref.onInputFocus,
-    onInputBlur = _ref.onInputBlur;
+    onInputBlur = _ref.onInputBlur,
+    onSearchCharacter = _ref.onSearchCharacter,
+    searchResults = _ref.searchResults;
   var _useState = useState(''),
     recipientName = _useState[0],
     setRecipientName = _useState[1];
@@ -30605,7 +30616,23 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
   var _useState4 = useState(false),
     showConfirm = _useState4[0],
     setShowConfirm = _useState4[1];
+  var _useState5 = useState(false),
+    showDropdown = _useState5[0],
+    setShowDropdown = _useState5[1];
+  var dropdownRef = useRef(null);
   var clearResultTimerRef = useRef(null);
+  var debouncedSearch = useMemo(function () {
+    return debounce(function (name) {
+      if (name.trim().length >= 2) {
+        onSearchCharacter == null ? void 0 : onSearchCharacter(name.trim());
+      }
+    }, 300);
+  }, [onSearchCharacter]);
+  useEffect(function () {
+    return function () {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
   useEffect(function () {
     if (transferResult) {
       if (clearResultTimerRef.current) {
@@ -30653,17 +30680,41 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     setRecipientName('');
     setAmount('');
   }, [recipientName, amount, onSendTransfer]);
-  return React.createElement(PanelContainer$1, null, React.createElement(FieldLabel, null, "Recipient Character Name"), React.createElement(StyledInput, {
+  return React.createElement(PanelContainer$1, null, React.createElement(FieldLabel, null, "Recipient Character Name"), React.createElement(AutocompleteWrapper, {
+    ref: dropdownRef
+  }, React.createElement(StyledInput, {
     type: "text",
     value: recipientName,
     onChange: function onChange(e) {
-      return setRecipientName(e.target.value);
+      setRecipientName(e.target.value);
+      debouncedSearch(e.target.value);
+      setShowDropdown(true);
+    },
+    onFocus: function onFocus() {
+      onInputFocus == null ? void 0 : onInputFocus();
+      if (recipientName.trim().length >= 2 && searchResults && searchResults.length > 0) {
+        setShowDropdown(true);
+      }
+    },
+    onBlur: function onBlur() {
+      // Delay to allow dropdown click to register
+      setTimeout(function () {
+        return setShowDropdown(false);
+      }, 150);
+      onInputBlur == null ? void 0 : onInputBlur();
     },
-    onFocus: onInputFocus,
-    onBlur: onInputBlur,
     placeholder: "Enter character name",
-    disabled: transferLoading
-  }), React.createElement(FieldLabel, null, "Amount (DC)"), React.createElement(StyledInput, {
+    disabled: transferLoading,
+    autoComplete: "off"
+  }), showDropdown && searchResults && searchResults.length > 0 && React.createElement(DropdownList, null, searchResults.map(function (_char) {
+    return React.createElement(DropdownItem, {
+      key: _char._id,
+      onPointerDown: function onPointerDown() {
+        setRecipientName(_char.name);
+        setShowDropdown(false);
+      }
+    }, _char.name);
+  }))), React.createElement(FieldLabel, null, "Amount (DC)"), React.createElement(StyledInput, {
     type: "number",
     min: 1,
     value: amount,
@@ -30724,6 +30775,18 @@ var ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCTransferPanel__ErrorMessage",
   componentId: "sc-k1vvb1-6"
 })(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;"], uiColors.red);
+var AutocompleteWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__AutocompleteWrapper",
+  componentId: "sc-k1vvb1-7"
+})(["position:relative;width:100%;"]);
+var DropdownList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "DCTransferPanel__DropdownList",
+  componentId: "sc-k1vvb1-8"
+})(["position:absolute;top:100%;left:0;right:0;background:rgba(10,10,30,0.95);border:1px solid #f59e0b;border-top:none;list-style:none;padding:0;margin:0;max-height:120px;overflow-y:auto;z-index:10;"]);
+var DropdownItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "DCTransferPanel__DropdownItem",
+  componentId: "sc-k1vvb1-9"
+})(["padding:6px 8px;font-size:11px;font-family:'Press Start 2P',cursive;color:", ";cursor:pointer;&:hover{background:rgba(245,158,11,0.3);}"], uiColors.white);
 
 var DCWalletModal = function DCWalletModal(_ref) {
   var _historyData$transact, _historyData$totalPag, _historyData$currentP;
@@ -30738,7 +30801,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
     onClearTransferResult = _ref.onClearTransferResult,
     characterName = _ref.characterName,
     onInputFocus = _ref.onInputFocus,
-    onInputBlur = _ref.onInputBlur;
+    onInputBlur = _ref.onInputBlur,
+    onBuyDC = _ref.onBuyDC,
+    onSearchCharacter = _ref.onSearchCharacter,
+    searchResults = _ref.searchResults;
   var _useState = useState('balance'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
@@ -30748,7 +30814,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
   var tabs = [{
     id: 'balance',
     title: 'Balance',
-    content: React.createElement(BalanceContent, null, React.createElement(BalanceLabel, null, "Your DC Balance"), React.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), React.createElement(BalanceHint, null, "Buy DC packs from the Store > Packs tab."))
+    content: React.createElement(BalanceContent, null, React.createElement(BalanceLabel, null, "Your DC Balance"), React.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), onBuyDC && React.createElement(BuyButton, {
+      onPointerDown: onBuyDC,
+      title: "Buy Definya Coins"
+    }, React.createElement(FaShoppingCart, null), React.createElement(BuyButtonLabel, null, "Buy DC")))
   }, {
     id: 'transfer',
     title: 'Transfer',
@@ -30760,7 +30829,9 @@ var DCWalletModal = function DCWalletModal(_ref) {
       onClearTransferResult: onClearTransferResult,
       characterName: characterName,
       onInputFocus: onInputFocus,
-      onInputBlur: onInputBlur
+      onInputBlur: onInputBlur,
+      onSearchCharacter: onSearchCharacter,
+      searchResults: searchResults
     })
   }, {
     id: 'history',
@@ -30786,7 +30857,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
     tabs: tabs,
     activeTab: activeTab,
     onTabChange: function onTabChange(tabId) {
-      return setActiveTab(tabId);
+      setActiveTab(tabId);
+      if (tabId === 'history') {
+        onRequestHistory(1);
+      }
     },
     activeTextColor: "#000000",
     activeColor: "#fef08a",
@@ -30835,10 +30909,14 @@ var BalanceAmount = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCWalletModal__BalanceAmount",
   componentId: "sc-12xy88y-9"
 })(["font-family:'Press Start 2P',cursive;font-size:28px;color:#fef08a;text-shadow:2px 2px 0 #000;letter-spacing:2px;"]);
-var BalanceHint = /*#__PURE__*/styled.span.withConfig({
-  displayName: "DCWalletModal__BalanceHint",
+var BuyButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "DCWalletModal__BuyButton",
   componentId: "sc-12xy88y-10"
-})(["font-family:'Press Start 2P',cursive;font-size:7px;color:", ";"], uiColors.lightGray);
+})(["display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 20px;background:#f59e0b;border:none;border-radius:6px;color:#000;cursor:pointer;font-size:1rem;&:hover{background:#fbbf24;}&:active{background:#d97706;}"]);
+var BuyButtonLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCWalletModal__BuyButtonLabel",
+  componentId: "sc-12xy88y-11"
+})(["font-family:'Press Start 2P',cursive;font-size:8px;"]);
 
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,