@rpg-engine/long-bow 0.8.200 → 0.8.203

package/dist/long-bow.esm.js

@@ -40966,7 +40966,9 @@ var NPCDialogText = function NPCDialogText(_ref) {
     onClose = _ref.onClose,
     onEndStep = _ref.onEndStep,
     onStartStep = _ref.onStartStep,
-    type = _ref.type;
+    type = _ref.type,
+    _ref$isTranslated = _ref.isTranslated,
+    isTranslated = _ref$isTranslated === void 0 ? false : _ref$isTranslated;
   var windowSize = useRef([window.innerWidth, window.innerHeight]);
   function maxCharacters(width) {
     // Set the font size to 16 pixels
@@ -40984,6 +40986,9 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState = useState(0),
     chunkIndex = _useState[0],
     setChunkIndex = _useState[1];
+  useEffect(function () {
+    setChunkIndex(0);
+  }, [text]);
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       goToNextStep();
@@ -41009,7 +41014,14 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$o, null, React.createElement(DynamicText, {
+  useEffect(function () {
+    setShowGoNextIndicator(isTranslated);
+    if (isTranslated) {
+      onStartStep && onStartStep();
+      onEndStep && onEndStep();
+    }
+  }, [chunkIndex, isTranslated, onEndStep, onStartStep, text]);
+  return React.createElement(Container$o, null, isTranslated ? React.createElement(TextContainer$1, null, (textChunks == null ? void 0 : textChunks[chunkIndex]) || '') : React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -41020,7 +41032,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
       onStartStep && onStartStep();
     }
   }), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
-    right: type === NPCDialogType.TextOnly ? '1rem' : '10.5rem',
+    right: type === 'TextOnly' ? '1rem' : '10.5rem',
     src: IS_MOBILE_OR_TABLET ? img$5 : img$6,
     onPointerDown: function onPointerDown() {
       goToNextStep();
@@ -41031,9 +41043,13 @@ var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
+var TextContainer$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "NPCDialogText__TextContainer",
+  componentId: "sc-1cxkdh9-1"
+})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
 var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
   displayName: "NPCDialogText__PressSpaceIndicator",
-  componentId: "sc-1cxkdh9-1"
+  componentId: "sc-1cxkdh9-2"
 })(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref2) {
   var right = _ref2.right;
   return right;
@@ -41230,6 +41246,8 @@ var NPCDialog = function NPCDialog(_ref) {
     type = _ref.type,
     _onClose = _ref.onClose,
     imagePath = _ref.imagePath,
+    _ref$isTranslated = _ref.isTranslated,
+    isTranslated = _ref$isTranslated === void 0 ? false : _ref$isTranslated,
     _ref$isQuestionDialog = _ref.isQuestionDialog,
     isQuestionDialog = _ref$isQuestionDialog === void 0 ? false : _ref$isQuestionDialog,
     questions = _ref.questions,
@@ -41238,7 +41256,7 @@ var NPCDialog = function NPCDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: isQuestionDialog ? '600px' : '80%',
     height: '180px'
-  }, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$1, {
+  }, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(QuestionDialog, {
     questions: questions,
@@ -41252,11 +41270,12 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   }))) : React.createElement(React.Fragment, null, React.createElement(Container$q, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
-  }, "X"), React.createElement(TextContainer$1, {
+  }, "X"), React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
     text: text || 'No text provided.',
+    isTranslated: isTranslated,
     onClose: function onClose() {
       if (_onClose) {
         _onClose();
@@ -41274,7 +41293,7 @@ var CloseIcon = /*#__PURE__*/styled.p.withConfig({
   displayName: "NPCDialog__CloseIcon",
   componentId: "sc-1b4aw74-1"
 })(["position:absolute;top:-1.5rem;right:-0.4rem;cursor:pointer;color:white;font-size:1.1rem !important;"]);
-var TextContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__TextContainer",
   componentId: "sc-1b4aw74-2"
 })(["flex:", " 0 0;width:355px;"], function (_ref2) {
@@ -41327,7 +41346,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$r, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$r, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$3, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -41349,7 +41368,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   })), textAndTypeArray[slide].imageSide === 'left' && React.createElement(React.Fragment, null, React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
     src: textAndTypeArray[slide].imagePath || img$7
-  })), React.createElement(TextContainer$2, {
+  })), React.createElement(TextContainer$3, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -41373,7 +41392,7 @@ var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
-var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var TextContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__TextContainer",
   componentId: "sc-rvu5wg-1"
 })(["flex:", " 0 0;width:355px;"], function (_ref2) {
@@ -48784,7 +48803,7 @@ var PartyRow = function PartyRow(_ref) {
     playerQty = _ref.playerQty,
     isInvited = _ref.isInvited,
     partyName = _ref.partyName;
-  return React.createElement(PartyWrapper, null, React.createElement(TextContainer$3, null, partyName), React.createElement(TextContainer$3, null, charName), React.createElement(TextContainer$3, null, charClass), React.createElement(TextContainer$3, null, charLevel), React.createElement(TextContainer$3, null, playerQty, "/5"), isInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
+  return React.createElement(PartyWrapper, null, React.createElement(TextContainer$4, null, partyName), React.createElement(TextContainer$4, null, charName), React.createElement(TextContainer$4, null, charClass), React.createElement(TextContainer$4, null, charLevel), React.createElement(TextContainer$4, null, playerQty, "/5"), isInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Accept"), React.createElement("div", {
     className: "cancel-button"
@@ -48798,7 +48817,7 @@ var PartyWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyRows__PartyWrapper",
   componentId: "sc-xzuhrw-0"
 })(["width:100%;display:flex;align-items:center;justify-content:space-around;.cancel-button{filter:grayscale(0.7);}"]);
-var TextContainer$3 = /*#__PURE__*/styled.div.withConfig({
+var TextContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyRows__TextContainer",
   componentId: "sc-xzuhrw-1"
 })(["color:", ";"], uiColors.white);
@@ -48854,15 +48873,15 @@ var PlayersRow = function PlayersRow(_ref) {
     charClass = _ref.charClass,
     charLevel = _ref.charLevel,
     isNotInvited = _ref.isNotInvited;
-  return React.createElement(PartyWrapper$1, null, React.createElement(TextContainer$4, null, charName), React.createElement(TextContainer$4, null, charClass), React.createElement(TextContainer$4, null, charLevel), isNotInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
+  return React.createElement(PartyWrapper$1, null, React.createElement(TextContainer$5, null, charName), React.createElement(TextContainer$5, null, charClass), React.createElement(TextContainer$5, null, charLevel), isNotInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
-  }, "Invite")) : React.createElement(TextContainer$4, null, "Invited"));
+  }, "Invite")) : React.createElement(TextContainer$5, null, "Invited"));
 };
 var PartyWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PlayersRows__PartyWrapper",
   componentId: "sc-1ji7yc1-0"
 })(["width:100%;display:flex;align-items:center;justify-content:space-around;flex-direction:row;flex:auto;"]);
-var TextContainer$4 = /*#__PURE__*/styled.div.withConfig({
+var TextContainer$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PlayersRows__TextContainer",
   componentId: "sc-1ji7yc1-1"
 })(["color:", ";flex:auto;margin:auto;"], uiColors.white);
@@ -48931,10 +48950,10 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
     onChangeLeader = _ref.onChangeLeader;
   var isCurrentUser = id === userId;
   var canRemove = leaderId === userId || isCurrentUser;
-  return React.createElement(PartyWrapper$2, null, React.createElement(TextContainer$5, null, React.createElement(Ellipsis, {
+  return React.createElement(PartyWrapper$2, null, React.createElement(TextContainer$6, null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React.createElement(TextContainer$5, null, React.createElement(Ellipsis, {
+  }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React.createElement(TextContainer$6, null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
   }, charClass)), React.createElement(ButtonContainer$3, null, canRemove && React.createElement(HighlightedText, {
@@ -48951,7 +48970,7 @@ var PartyWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__PartyWrapper",
   componentId: "sc-uqajew-0"
 })(["display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center;padding:0.5rem;min-height:50px;box-sizing:border-box;width:100%;border-bottom:1px solid ", ";&:hover{background-color:", ";cursor:pointer;}"], uiColors.darkGray, uiColors.darkGray);
-var TextContainer$5 = /*#__PURE__*/styled.div.withConfig({
+var TextContainer$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__TextContainer",
   componentId: "sc-uqajew-1"
 })(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], uiColors.white);
@@ -74428,7 +74447,9 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
   var lessons = _ref.lessons,
     onLessonFinish = _ref.onLessonFinish,
     onStepChange = _ref.onStepChange,
-    imageStyle = _ref.imageStyle;
+    imageStyle = _ref.imageStyle,
+    _ref$isTranslated = _ref.isTranslated,
+    isTranslated = _ref$isTranslated === void 0 ? false : _ref$isTranslated;
   var generateLessons = useMemo(function () {
     return lessons.map(function (lesson, index) {
       return {
@@ -74459,13 +74480,13 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
           dangerouslySetInnerHTML: {
             __html: lesson.body
           }
-        }), lesson.text && React.createElement(DynamicText, {
+        }), lesson.text && (isTranslated ? React.createElement(LessonText, null, lesson.text) : React.createElement(DynamicText, {
           text: lesson.text
-        }))),
+        })))),
         id: index
       };
     });
-  }, [lessons, imageStyle]);
+  }, [lessons, imageStyle, isTranslated]);
   return React.createElement(Container$T, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
@@ -74484,25 +74505,29 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
+var LessonText = /*#__PURE__*/styled.p.withConfig({
+  displayName: "TutorialStepper__LessonText",
+  componentId: "sc-7tgzv2-2"
+})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
 var Container$T = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
-  componentId: "sc-7tgzv2-2"
+  componentId: "sc-7tgzv2-3"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
 var LessonFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonFooter",
-  componentId: "sc-7tgzv2-3"
+  componentId: "sc-7tgzv2-4"
 })(["margin-top:1rem;"]);
 var LessonImage = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonImage",
-  componentId: "sc-7tgzv2-4"
+  componentId: "sc-7tgzv2-5"
 })(["display:flex;justify-content:center;align-items:center;width:100%;max-width:500px;margin:auto;img{width:100%;height:auto;object-fit:contain;border-radius:10px;}"]);
 var LessonTitle = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TutorialStepper__LessonTitle",
-  componentId: "sc-7tgzv2-5"
+  componentId: "sc-7tgzv2-6"
 })(["color:", " !important;font-size:0.8rem !important;"], uiColors.yellow);
 var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonContainer",
-  componentId: "sc-7tgzv2-6"
+  componentId: "sc-7tgzv2-7"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
 export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterDetailModal, CharacterListingForm, CharacterListingModal, CharacterMarketplacePanel, CharacterMarketplaceRows, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, ConfirmModal, CountdownTimer, CraftBook, DCRateStrip, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FeaturedBanner, FriendList, GemSelector, GroupedBuyOrderRow, GroupedCharacterMarketplaceRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, MyCharacterListingsPanel, NPCDialog, NPCDialogType, NPCMultiDialog, Pagination, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, PurchaseSuccess, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RadioCircle$2 as RadioCircle, RadioOption$1 as RadioOption, RadioOptionLabel, RadioOptionSub, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, StoreBadges, StoreRedeemSection, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TrustBar, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };