@rpg-engine/long-bow 0.8.71 → 0.8.72
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/CartView.d.ts +7 -6
- package/dist/components/Store/Store.d.ts +2 -2
- package/dist/components/Store/StoreCharacterSkinRow.d.ts +3 -3
- package/dist/components/Store/StoreItemDetails.d.ts +3 -3
- package/dist/components/Store/StoreItemRow.d.ts +4 -3
- package/dist/components/Store/hooks/useStoreCart.d.ts +5 -3
- package/dist/components/Store/hooks/useStoreMetadata.d.ts +3 -3
- package/dist/components/Store/sections/StoreItemsSection.d.ts +3 -3
- package/dist/long-bow.cjs.development.js +57 -41
- 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 +58 -42
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Store/CartView.tsx +9 -6
- package/src/components/Store/Store.tsx +13 -21
- package/src/components/Store/StoreCharacterSkinRow.tsx +4 -4
- package/src/components/Store/StoreItemDetails.tsx +4 -4
- package/src/components/Store/StoreItemRow.tsx +14 -4
- package/src/components/Store/hooks/useStoreCart.ts +14 -9
- package/src/components/Store/hooks/useStoreMetadata.ts +5 -5
- package/src/components/Store/sections/StoreItemsSection.tsx +8 -8
- package/src/stories/Features/store/Store.stories.tsx +28 -68
package/dist/long-bow.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
|
|
|
2
2
|
import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { BeatLoader } from 'react-spinners';
|
|
4
4
|
import { v4 } from 'uuid';
|
|
5
|
-
import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
|
|
5
|
+
import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
|
|
6
6
|
import dayjs from 'dayjs';
|
|
7
7
|
import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
|
|
8
8
|
import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaShoppingCart } from 'react-icons/fa';
|
|
@@ -57631,7 +57631,7 @@ var useStoreMetadata = function useStoreMetadata() {
|
|
|
57631
57631
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
57632
57632
|
while (1) switch (_context.prev = _context.next) {
|
|
57633
57633
|
case 0:
|
|
57634
|
-
if (!(!item.metadataType || item.metadataType
|
|
57634
|
+
if (!(!item.metadataType || item.metadataType !== MetadataType.CharacterSkin)) {
|
|
57635
57635
|
_context.next = 2;
|
|
57636
57636
|
break;
|
|
57637
57637
|
}
|
|
@@ -57711,7 +57711,7 @@ var useStoreCart = function useStoreCart() {
|
|
|
57711
57711
|
});
|
|
57712
57712
|
return _context.abrupt("return");
|
|
57713
57713
|
case 3:
|
|
57714
|
-
if (!(item.metadataType
|
|
57714
|
+
if (!(item.metadataType === MetadataType.CharacterSkin)) {
|
|
57715
57715
|
_context.next = 12;
|
|
57716
57716
|
break;
|
|
57717
57717
|
}
|
|
@@ -57827,7 +57827,11 @@ var useStoreCart = function useStoreCart() {
|
|
|
57827
57827
|
};
|
|
57828
57828
|
// Helper functions
|
|
57829
57829
|
function getPurchaseType(item) {
|
|
57830
|
-
//
|
|
57830
|
+
// Use the type from IProductBlueprint if available, otherwise infer
|
|
57831
|
+
if (item.type) {
|
|
57832
|
+
return item.type;
|
|
57833
|
+
}
|
|
57834
|
+
// Fallback logic for backward compatibility
|
|
57831
57835
|
if (item.key.startsWith('pack_')) {
|
|
57832
57836
|
return PurchaseType.Pack;
|
|
57833
57837
|
} else {
|
|
@@ -57977,7 +57981,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
|
|
|
57977
57981
|
// Effect to reset currentIndex when switching items
|
|
57978
57982
|
useEffect(function () {
|
|
57979
57983
|
setCurrentIndex(0);
|
|
57980
|
-
}, [item.
|
|
57984
|
+
}, [item.key]);
|
|
57981
57985
|
var handlePreviousSkin = function handlePreviousSkin() {
|
|
57982
57986
|
setCurrentIndex(function (prevIndex) {
|
|
57983
57987
|
return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
|
|
@@ -58086,7 +58090,9 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58086
58090
|
onAddToCart = _ref.onAddToCart,
|
|
58087
58091
|
userAccountType = _ref.userAccountType,
|
|
58088
58092
|
_ref$showTextInput = _ref.showTextInput,
|
|
58089
|
-
showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput
|
|
58093
|
+
showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
|
|
58094
|
+
_ref$textInputPlaceho = _ref.textInputPlaceholder,
|
|
58095
|
+
textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
|
|
58090
58096
|
var _useState = useState(1),
|
|
58091
58097
|
quantity = _useState[0],
|
|
58092
58098
|
setQuantity = _useState[1];
|
|
@@ -58132,10 +58138,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
|
|
|
58132
58138
|
height: 32,
|
|
58133
58139
|
imgScale: 2,
|
|
58134
58140
|
centered: true
|
|
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, {
|
|
58141
|
+
})), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price), React.createElement(ItemDescription, null, item.description)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
|
|
58136
58142
|
type: "text",
|
|
58137
58143
|
value: textInputValue,
|
|
58138
|
-
placeholder:
|
|
58144
|
+
placeholder: textInputPlaceholder,
|
|
58139
58145
|
onChange: function onChange(e) {
|
|
58140
58146
|
return setTextInputValue(e.target.value);
|
|
58141
58147
|
},
|
|
@@ -58183,21 +58189,25 @@ var ItemPrice$1 = /*#__PURE__*/styled.div.withConfig({
|
|
|
58183
58189
|
displayName: "StoreItemRow__ItemPrice",
|
|
58184
58190
|
componentId: "sc-ptotuo-4"
|
|
58185
58191
|
})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
|
|
58192
|
+
var ItemDescription = /*#__PURE__*/styled.div.withConfig({
|
|
58193
|
+
displayName: "StoreItemRow__ItemDescription",
|
|
58194
|
+
componentId: "sc-ptotuo-5"
|
|
58195
|
+
})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.7);line-height:1.4;"]);
|
|
58186
58196
|
var Controls$1 = /*#__PURE__*/styled.div.withConfig({
|
|
58187
58197
|
displayName: "StoreItemRow__Controls",
|
|
58188
|
-
componentId: "sc-ptotuo-
|
|
58198
|
+
componentId: "sc-ptotuo-6"
|
|
58189
58199
|
})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
|
|
58190
58200
|
var ArrowsContainer = /*#__PURE__*/styled.div.withConfig({
|
|
58191
58201
|
displayName: "StoreItemRow__ArrowsContainer",
|
|
58192
|
-
componentId: "sc-ptotuo-
|
|
58202
|
+
componentId: "sc-ptotuo-7"
|
|
58193
58203
|
})(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
|
|
58194
58204
|
var QuantityInput = /*#__PURE__*/styled.input.withConfig({
|
|
58195
58205
|
displayName: "StoreItemRow__QuantityInput",
|
|
58196
|
-
componentId: "sc-ptotuo-
|
|
58206
|
+
componentId: "sc-ptotuo-8"
|
|
58197
58207
|
})(["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
58208
|
var TextInput = /*#__PURE__*/styled.input.withConfig({
|
|
58199
58209
|
displayName: "StoreItemRow__TextInput",
|
|
58200
|
-
componentId: "sc-ptotuo-
|
|
58210
|
+
componentId: "sc-ptotuo-9"
|
|
58201
58211
|
})(["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;"]);
|
|
58202
58212
|
|
|
58203
58213
|
var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
@@ -58218,7 +58228,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
|
58218
58228
|
// Prefer a specialized character skin row when needed
|
|
58219
58229
|
if (item.metadataType === MetadataType.CharacterSkin) {
|
|
58220
58230
|
return React.createElement(StoreCharacterSkinRow, {
|
|
58221
|
-
key: item.
|
|
58231
|
+
key: item.key,
|
|
58222
58232
|
item: item,
|
|
58223
58233
|
atlasJSON: atlasJSON,
|
|
58224
58234
|
atlasIMG: atlasIMG,
|
|
@@ -58227,9 +58237,9 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
|
58227
58237
|
});
|
|
58228
58238
|
}
|
|
58229
58239
|
// Render text input row when configured for this item key
|
|
58230
|
-
if (textInputItemKeys.includes(item.key)
|
|
58240
|
+
if (textInputItemKeys.includes(item.key)) {
|
|
58231
58241
|
return React.createElement(StoreItemRow, {
|
|
58232
|
-
key: item.
|
|
58242
|
+
key: item.key,
|
|
58233
58243
|
item: item,
|
|
58234
58244
|
atlasJSON: atlasJSON,
|
|
58235
58245
|
atlasIMG: atlasIMG,
|
|
@@ -58240,7 +58250,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
|
|
|
58240
58250
|
}
|
|
58241
58251
|
// Fallback to standard arrow-based row
|
|
58242
58252
|
return React.createElement(StoreItemRow, {
|
|
58243
|
-
key: item.
|
|
58253
|
+
key: item.key,
|
|
58244
58254
|
item: item,
|
|
58245
58255
|
atlasJSON: atlasJSON,
|
|
58246
58256
|
atlasIMG: atlasIMG,
|
|
@@ -58457,7 +58467,7 @@ var Store = function Store(_ref) {
|
|
|
58457
58467
|
packs = _ref$packs === void 0 ? [] : _ref$packs,
|
|
58458
58468
|
atlasJSON = _ref.atlasJSON,
|
|
58459
58469
|
atlasIMG = _ref.atlasIMG,
|
|
58460
|
-
|
|
58470
|
+
_onPurchase2 = _ref.onPurchase,
|
|
58461
58471
|
onShowHistory = _ref.onShowHistory,
|
|
58462
58472
|
userAccountType = _ref.userAccountType,
|
|
58463
58473
|
_ref$loading = _ref.loading,
|
|
@@ -58502,29 +58512,35 @@ var Store = function Store(_ref) {
|
|
|
58502
58512
|
setCurrentMetadataItem = _useState4[1];
|
|
58503
58513
|
var handleAddPackToCart = function handleAddPackToCart(pack) {
|
|
58504
58514
|
var packItem = {
|
|
58505
|
-
_id: pack.key,
|
|
58506
58515
|
key: pack.key,
|
|
58507
58516
|
name: pack.title,
|
|
58517
|
+
description: pack.description || '',
|
|
58508
58518
|
price: pack.priceUSD,
|
|
58519
|
+
currency: PaymentCurrency.USD,
|
|
58509
58520
|
texturePath: pack.image["default"] || pack.image.src,
|
|
58510
|
-
|
|
58511
|
-
|
|
58512
|
-
|
|
58513
|
-
|
|
58514
|
-
|
|
58515
|
-
|
|
58516
|
-
|
|
58521
|
+
type: PurchaseType.Pack,
|
|
58522
|
+
onPurchase: function () {
|
|
58523
|
+
var _onPurchase = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
58524
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
58525
|
+
while (1) switch (_context.prev = _context.next) {
|
|
58526
|
+
case 0:
|
|
58527
|
+
case "end":
|
|
58528
|
+
return _context.stop();
|
|
58529
|
+
}
|
|
58530
|
+
}, _callee);
|
|
58531
|
+
}));
|
|
58532
|
+
function onPurchase() {
|
|
58533
|
+
return _onPurchase.apply(this, arguments);
|
|
58534
|
+
}
|
|
58535
|
+
return onPurchase;
|
|
58536
|
+
}(),
|
|
58537
|
+
itemType: ItemType.Consumable,
|
|
58538
|
+
itemSubType: ItemSubType.Other,
|
|
58517
58539
|
rarity: ItemRarities.Common,
|
|
58518
|
-
|
|
58519
|
-
isEquipable: false,
|
|
58540
|
+
weight: 0,
|
|
58520
58541
|
isStackable: false,
|
|
58521
|
-
isTwoHanded: false,
|
|
58522
|
-
hasUseWith: false,
|
|
58523
58542
|
maxStackSize: 1,
|
|
58524
|
-
isUsable: false
|
|
58525
|
-
isStorable: true,
|
|
58526
|
-
isSolid: false,
|
|
58527
|
-
isItemContainer: false
|
|
58543
|
+
isUsable: false
|
|
58528
58544
|
};
|
|
58529
58545
|
handleAddToCart(packItem, 1);
|
|
58530
58546
|
};
|
|
@@ -58630,22 +58646,22 @@ var Store = function Store(_ref) {
|
|
|
58630
58646
|
onRemoveFromCart: handleRemoveFromCart,
|
|
58631
58647
|
onClose: closeCart,
|
|
58632
58648
|
onPurchase: function () {
|
|
58633
|
-
var
|
|
58634
|
-
return _regeneratorRuntime().wrap(function
|
|
58635
|
-
while (1) switch (
|
|
58649
|
+
var _onPurchase3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
58650
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
58651
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
58636
58652
|
case 0:
|
|
58637
|
-
|
|
58638
|
-
return handleCartPurchase(
|
|
58653
|
+
_context2.next = 2;
|
|
58654
|
+
return handleCartPurchase(_onPurchase2);
|
|
58639
58655
|
case 2:
|
|
58640
|
-
return
|
|
58656
|
+
return _context2.abrupt("return", true);
|
|
58641
58657
|
case 3:
|
|
58642
58658
|
case "end":
|
|
58643
|
-
return
|
|
58659
|
+
return _context2.stop();
|
|
58644
58660
|
}
|
|
58645
|
-
},
|
|
58661
|
+
}, _callee2);
|
|
58646
58662
|
}));
|
|
58647
58663
|
function onPurchase() {
|
|
58648
|
-
return
|
|
58664
|
+
return _onPurchase3.apply(this, arguments);
|
|
58649
58665
|
}
|
|
58650
58666
|
return onPurchase;
|
|
58651
58667
|
}(),
|