@rpg-engine/long-bow 0.8.70 → 0.8.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Store/Store.d.ts +1 -0
- package/dist/components/Store/StoreItemRow.d.ts +1 -0
- package/dist/components/Store/sections/StoreItemsSection.d.ts +1 -0
- package/dist/long-bow.cjs.development.js +59 -14
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +59 -14
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Store/CartView.tsx +11 -0
- package/src/components/Store/Store.tsx +3 -0
- package/src/components/Store/StoreItemRow.tsx +33 -3
- package/src/components/Store/sections/StoreItemsSection.tsx +18 -3
- package/src/stories/Features/store/Store.stories.tsx +1 -0
package/dist/long-bow.esm.js
CHANGED
|
@@ -57512,7 +57512,7 @@ var CartView = function CartView(_ref2) {
|
|
|
57512
57512
|
return React.createElement(Container$K, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
|
|
57513
57513
|
onPointerDown: onClose
|
|
57514
57514
|
}, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
|
|
57515
|
-
var _cartItem$metadata;
|
|
57515
|
+
var _cartItem$metadata, _cartItem$metadata2;
|
|
57516
57516
|
console.log('Item metadataType: , texturePath:', cartItem.item.metadataType, cartItem.item.texturePath);
|
|
57517
57517
|
var getSpriteKey = function getSpriteKey(textureKey) {
|
|
57518
57518
|
return textureKey + '/down/standing/0.png';
|
|
@@ -57527,7 +57527,7 @@ var CartView = function CartView(_ref2) {
|
|
|
57527
57527
|
height: 32,
|
|
57528
57528
|
imgScale: 2,
|
|
57529
57529
|
centered: true
|
|
57530
|
-
})), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), React.createElement(ItemInfo$1, null, React.createElement("span", null, "$", formatPrice(cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, "$", formatPrice(cartItem.item.price * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
|
|
57530
|
+
})), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), ((_cartItem$metadata2 = cartItem.metadata) == null ? void 0 : _cartItem$metadata2.inputValue) && React.createElement(CartMeta, null, cartItem.metadata.inputValue), React.createElement(ItemInfo$1, null, React.createElement("span", null, "$", formatPrice(cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, "$", formatPrice(cartItem.item.price * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
|
|
57531
57531
|
type: cartItem.item.metadataType,
|
|
57532
57532
|
metadata: cartItem.metadata
|
|
57533
57533
|
})), React.createElement(CTAButton, {
|
|
@@ -57617,6 +57617,10 @@ var MetadataValue = /*#__PURE__*/styled.div.withConfig({
|
|
|
57617
57617
|
displayName: "CartView__MetadataValue",
|
|
57618
57618
|
componentId: "sc-ydtyl1-17"
|
|
57619
57619
|
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
|
57620
|
+
var CartMeta = /*#__PURE__*/styled.div.withConfig({
|
|
57621
|
+
displayName: "CartView__CartMeta",
|
|
57622
|
+
componentId: "sc-ydtyl1-18"
|
|
57623
|
+
})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;opacity:0.8;margin-top:0.25rem;"]);
|
|
57620
57624
|
|
|
57621
57625
|
var useStoreMetadata = function useStoreMetadata() {
|
|
57622
57626
|
var _useState = useState(false),
|
|
@@ -58080,10 +58084,15 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58080
58084
|
atlasJSON = _ref.atlasJSON,
|
|
58081
58085
|
atlasIMG = _ref.atlasIMG,
|
|
58082
58086
|
onAddToCart = _ref.onAddToCart,
|
|
58083
|
-
userAccountType = _ref.userAccountType
|
|
58087
|
+
userAccountType = _ref.userAccountType,
|
|
58088
|
+
_ref$showTextInput = _ref.showTextInput,
|
|
58089
|
+
showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput;
|
|
58084
58090
|
var _useState = useState(1),
|
|
58085
58091
|
quantity = _useState[0],
|
|
58086
58092
|
setQuantity = _useState[1];
|
|
58093
|
+
var _useState2 = useState(''),
|
|
58094
|
+
textInputValue = _useState2[0],
|
|
58095
|
+
setTextInputValue = _useState2[1];
|
|
58087
58096
|
var handleQuantityChange = function handleQuantityChange(e) {
|
|
58088
58097
|
var value = parseInt(e.target.value) || 1;
|
|
58089
58098
|
setQuantity(Math.min(Math.max(1, value), 99));
|
|
@@ -58103,10 +58112,17 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58103
58112
|
});
|
|
58104
58113
|
};
|
|
58105
58114
|
var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
|
|
58106
|
-
var
|
|
58115
|
+
var handleAddToCartInternal = function handleAddToCartInternal() {
|
|
58107
58116
|
if (!hasRequiredAccount) return;
|
|
58108
|
-
|
|
58109
|
-
|
|
58117
|
+
if (showTextInput) {
|
|
58118
|
+
onAddToCart(item, 1, {
|
|
58119
|
+
inputValue: textInputValue
|
|
58120
|
+
});
|
|
58121
|
+
setTextInputValue('');
|
|
58122
|
+
} else {
|
|
58123
|
+
onAddToCart(item, quantity);
|
|
58124
|
+
setQuantity(1);
|
|
58125
|
+
}
|
|
58110
58126
|
};
|
|
58111
58127
|
return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
|
|
58112
58128
|
atlasJSON: atlasJSON,
|
|
@@ -58116,7 +58132,15 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58116
58132
|
height: 32,
|
|
58117
58133
|
imgScale: 2,
|
|
58118
58134
|
centered: true
|
|
58119
|
-
})), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null,
|
|
58135
|
+
})), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
|
|
58136
|
+
type: "text",
|
|
58137
|
+
value: textInputValue,
|
|
58138
|
+
placeholder: "Enter value",
|
|
58139
|
+
onChange: function onChange(e) {
|
|
58140
|
+
return setTextInputValue(e.target.value);
|
|
58141
|
+
},
|
|
58142
|
+
className: "rpgui-input"
|
|
58143
|
+
}) : item.isStackable ? React.createElement(ArrowsContainer, null, React.createElement(SelectArrow, {
|
|
58120
58144
|
direction: "left",
|
|
58121
58145
|
onPointerDown: decrementQuantity,
|
|
58122
58146
|
size: 24
|
|
@@ -58132,10 +58156,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58132
58156
|
direction: "right",
|
|
58133
58157
|
onPointerDown: incrementQuantity,
|
|
58134
58158
|
size: 24
|
|
58135
|
-
})), React.createElement(CTAButton, {
|
|
58159
|
+
})) : null, React.createElement(CTAButton, {
|
|
58136
58160
|
icon: React.createElement(FaCartPlus, null),
|
|
58137
58161
|
label: "Add",
|
|
58138
|
-
onClick:
|
|
58162
|
+
onClick: handleAddToCartInternal,
|
|
58139
58163
|
disabled: !hasRequiredAccount
|
|
58140
58164
|
})));
|
|
58141
58165
|
};
|
|
@@ -58171,13 +58195,19 @@ var QuantityInput = /*#__PURE__*/styled.input.withConfig({
|
|
|
58171
58195
|
displayName: "StoreItemRow__QuantityInput",
|
|
58172
58196
|
componentId: "sc-ptotuo-7"
|
|
58173
58197
|
})(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
|
|
58198
|
+
var TextInput = /*#__PURE__*/styled.input.withConfig({
|
|
58199
|
+
displayName: "StoreItemRow__TextInput",
|
|
58200
|
+
componentId: "sc-ptotuo-8"
|
|
58201
|
+
})(["width:120px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;"]);
|
|
58174
58202
|
|
|
58175
58203
|
var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
58176
58204
|
var items = _ref.items,
|
|
58177
58205
|
onAddToCart = _ref.onAddToCart,
|
|
58178
58206
|
atlasJSON = _ref.atlasJSON,
|
|
58179
58207
|
atlasIMG = _ref.atlasIMG,
|
|
58180
|
-
userAccountType = _ref.userAccountType
|
|
58208
|
+
userAccountType = _ref.userAccountType,
|
|
58209
|
+
_ref$textInputItemKey = _ref.textInputItemKeys,
|
|
58210
|
+
textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
|
|
58181
58211
|
var _useState = useState(''),
|
|
58182
58212
|
searchQuery = _useState[0],
|
|
58183
58213
|
setSearchQuery = _useState[1];
|
|
@@ -58185,7 +58215,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
|
58185
58215
|
return item.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
58186
58216
|
});
|
|
58187
58217
|
var renderStoreItem = function renderStoreItem(item) {
|
|
58188
|
-
//
|
|
58218
|
+
// Prefer a specialized character skin row when needed
|
|
58189
58219
|
if (item.metadataType === MetadataType.CharacterSkin) {
|
|
58190
58220
|
return React.createElement(StoreCharacterSkinRow, {
|
|
58191
58221
|
key: item._id,
|
|
@@ -58196,7 +58226,19 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
|
58196
58226
|
userAccountType: userAccountType || UserAccountTypes.Free
|
|
58197
58227
|
});
|
|
58198
58228
|
}
|
|
58199
|
-
//
|
|
58229
|
+
// Render text input row when configured for this item key
|
|
58230
|
+
if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
|
|
58231
|
+
return React.createElement(StoreItemRow, {
|
|
58232
|
+
key: item._id,
|
|
58233
|
+
item: item,
|
|
58234
|
+
atlasJSON: atlasJSON,
|
|
58235
|
+
atlasIMG: atlasIMG,
|
|
58236
|
+
onAddToCart: onAddToCart,
|
|
58237
|
+
userAccountType: userAccountType || UserAccountTypes.Free,
|
|
58238
|
+
showTextInput: true
|
|
58239
|
+
});
|
|
58240
|
+
}
|
|
58241
|
+
// Fallback to standard arrow-based row
|
|
58200
58242
|
return React.createElement(StoreItemRow, {
|
|
58201
58243
|
key: item._id,
|
|
58202
58244
|
item: item,
|
|
@@ -58425,7 +58467,9 @@ var Store = function Store(_ref) {
|
|
|
58425
58467
|
_ref$hidePremiumTab = _ref.hidePremiumTab,
|
|
58426
58468
|
hidePremiumTab = _ref$hidePremiumTab === void 0 ? false : _ref$hidePremiumTab,
|
|
58427
58469
|
tabOrder = _ref.tabOrder,
|
|
58428
|
-
defaultActiveTab = _ref.defaultActiveTab
|
|
58470
|
+
defaultActiveTab = _ref.defaultActiveTab,
|
|
58471
|
+
_ref$textInputItemKey = _ref.textInputItemKeys,
|
|
58472
|
+
textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
|
|
58429
58473
|
var _useState = useState(null),
|
|
58430
58474
|
selectedPack = _useState[0],
|
|
58431
58475
|
setSelectedPack = _useState[1];
|
|
@@ -58560,7 +58604,8 @@ var Store = function Store(_ref) {
|
|
|
58560
58604
|
onAddToCart: handleAddToCart,
|
|
58561
58605
|
atlasJSON: atlasJSON,
|
|
58562
58606
|
atlasIMG: atlasIMG,
|
|
58563
|
-
userAccountType: userAccountType
|
|
58607
|
+
userAccountType: userAccountType,
|
|
58608
|
+
textInputItemKeys: textInputItemKeys
|
|
58564
58609
|
})
|
|
58565
58610
|
}
|
|
58566
58611
|
};
|