@rpg-engine/long-bow 0.3.38 → 0.3.40

package/dist/long-bow.esm.js

@@ -33054,6 +33054,123 @@ var CheckButton = function CheckButton(_ref) {
   }));
 };
 
+var QuickSpells = function QuickSpells(_ref) {
+  var quickSpells = _ref.quickSpells,
+    onSpellCast = _ref.onSpellCast,
+    mana = _ref.mana,
+    _ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
+    isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (isBlockedCastingByKeyboard) return;
+      var shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
+        var shortcut = quickSpells[shortcutIndex];
+        if (shortcut != null && shortcut.key && mana >= (shortcut == null ? void 0 : shortcut.manaCost)) {
+          onSpellCast(shortcut.key);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [quickSpells, isBlockedCastingByKeyboard]);
+  return React.createElement(List, null, Array.from({
+    length: 4
+  }).map(function (_, i) {
+    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
+    return React.createElement(SpellShortcut, {
+      key: i,
+      onClick: onSpellCast.bind(null, (_quickSpells$i = quickSpells[i]) == null ? void 0 : _quickSpells$i.key),
+      disabled: mana < ((_quickSpells$i2 = quickSpells[i]) == null ? void 0 : _quickSpells$i2.manaCost)
+    }, React.createElement("span", {
+      className: "mana"
+    }, ((_quickSpells$i3 = quickSpells[i]) == null ? void 0 : _quickSpells$i3.key) && ((_quickSpells$i4 = quickSpells[i]) == null ? void 0 : _quickSpells$i4.manaCost)), React.createElement("span", {
+      className: "magicWords"
+    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })), React.createElement("span", {
+      className: "keyboard"
+    }, i + 1));
+  }));
+};
+var SpellShortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "QuickSpells__SpellShortcut",
+  componentId: "sc-41yq7s-0"
+})(["width:3rem;height:3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;span{pointer-events:none;}.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray);
+var List = /*#__PURE__*/styled.p.withConfig({
+  displayName: "QuickSpells__List",
+  componentId: "sc-41yq7s-1"
+})(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
+
+var CircularController = function CircularController(_ref) {
+  var onActionClick = _ref.onActionClick,
+    onCancelClick = _ref.onCancelClick,
+    onSpellClick = _ref.onSpellClick,
+    mana = _ref.mana,
+    spells = _ref.spells;
+  var onTouchStart = function onTouchStart(e) {
+    var target = e.target;
+    target == null ? void 0 : target.classList.add('active');
+  };
+  var onTouchEnd = function onTouchEnd(action, e) {
+    var target = e.target;
+    setTimeout(function () {
+      target == null ? void 0 : target.classList.remove('active');
+    }, 100);
+    action();
+  };
+  return React.createElement(ButtonsContainer, null, React.createElement(SpellsContainer, null, Array.from({
+    length: 4
+  }).map(function (_, i) {
+    var variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
+    var spell = spells[i];
+    var onSpellClickBinded = spell ? onSpellClick.bind(null, spell.key) : function () {};
+    return React.createElement(StyledShortcut, {
+      key: i,
+      disabled: mana < (spell == null ? void 0 : spell.manaCost),
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd.bind(null, onSpellClickBinded),
+      className: variant
+    }, React.createElement("span", {
+      className: "mana"
+    }, (spell == null ? void 0 : spell.key) && (spell == null ? void 0 : spell.manaCost)), React.createElement("span", {
+      className: "magicWords"
+    }, spell == null ? void 0 : spell.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })));
+  })), React.createElement(Button$2, {
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd.bind(null, onActionClick)
+  }, React.createElement("div", {
+    className: "rpgui-icon sword"
+  })), React.createElement(CancelButton, {
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd.bind(null, onCancelClick)
+  }, React.createElement("span", null, "X")));
+};
+var Button$2 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "CircularController__Button",
+  componentId: "sc-1fewf3h-0"
+})(["width:4.3rem;height:4.3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color 0.1s;&.active{background-color:", ";}.sword{transform:rotate(-45deg);height:2.5rem;width:1.9rem;pointer-events:none;}"], uiColors.lightGray, uiColors.darkGray, uiColors.gray);
+var CancelButton = /*#__PURE__*/styled(Button$2).withConfig({
+  displayName: "CircularController__CancelButton",
+  componentId: "sc-1fewf3h-1"
+})(["width:3rem;height:3rem;font-size:0.8rem;span{margin-top:4px;margin-left:2px;pointer-events:none;}"]);
+var ButtonsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CircularController__ButtonsContainer",
+  componentId: "sc-1fewf3h-2"
+})(["display:flex;align-items:center;justify-content:center;gap:0.5rem;"]);
+var SpellsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CircularController__SpellsContainer",
+  componentId: "sc-1fewf3h-3"
+})(["display:flex;align-items:center;justify-content:center;gap:0.4rem;flex-direction:column;.top{transform:translate(93%,25%);}.bottom{transform:translate(93%,-25%);}"]);
+var StyledShortcut = /*#__PURE__*/styled(SpellShortcut).withConfig({
+  displayName: "CircularController__StyledShortcut",
+  componentId: "sc-1fewf3h-4"
+})(["width:2.5rem;height:2.5rem;transition:background-color 0.1s;.mana{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";}"], uiColors.lightGray, uiColors.gray);
+
 function useOutsideClick(ref, id) {
   useEffect(function () {
     /**
@@ -35451,56 +35568,6 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1g0c67q-2"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
 
-var QuickSpells = function QuickSpells(_ref) {
-  var quickSpells = _ref.quickSpells,
-    onSpellCast = _ref.onSpellCast,
-    mana = _ref.mana,
-    _ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
-    isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
-  useEffect(function () {
-    var handleKeyDown = function handleKeyDown(e) {
-      if (isBlockedCastingByKeyboard) return;
-      var shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
-        var shortcut = quickSpells[shortcutIndex];
-        if (shortcut != null && shortcut.key && mana >= (shortcut == null ? void 0 : shortcut.manaCost)) {
-          onSpellCast(shortcut.key);
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return function () {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [quickSpells, isBlockedCastingByKeyboard]);
-  return React.createElement(List, null, Array.from({
-    length: 4
-  }).map(function (_, i) {
-    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
-    return React.createElement(SpellShortcut, {
-      key: i,
-      onClick: onSpellCast.bind(null, (_quickSpells$i = quickSpells[i]) == null ? void 0 : _quickSpells$i.key),
-      disabled: mana < ((_quickSpells$i2 = quickSpells[i]) == null ? void 0 : _quickSpells$i2.manaCost)
-    }, React.createElement("span", {
-      className: "mana"
-    }, ((_quickSpells$i3 = quickSpells[i]) == null ? void 0 : _quickSpells$i3.key) && ((_quickSpells$i4 = quickSpells[i]) == null ? void 0 : _quickSpells$i4.manaCost)), React.createElement("span", {
-      className: "magicWords"
-    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
-      return word[0];
-    })), React.createElement("span", {
-      className: "keyboard"
-    }, i + 1));
-  }));
-};
-var SpellShortcut = /*#__PURE__*/styled.button.withConfig({
-  displayName: "QuickSpells__SpellShortcut",
-  componentId: "sc-41yq7s-0"
-})(["width:3rem;height:3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray);
-var List = /*#__PURE__*/styled.p.withConfig({
-  displayName: "QuickSpells__List",
-  componentId: "sc-41yq7s-1"
-})(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
-
 var Spell = function Spell(_ref) {
   var spellKey = _ref.spellKey,
     name = _ref.name,
@@ -35757,6 +35824,19 @@ var TradingItemRow = function TradingItemRow(_ref) {
       onQuantityChange(traderItem, newQuantity);
     }
   };
+  var onLeftOutClick = function onLeftOutClick() {
+    if (selectedQty >= 10) {
+      var newQuantity = selectedQty - 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
+  var onRightOutClick = function onRightOutClick() {
+    var _traderItem$qty2;
+    if (selectedQty < ((_traderItem$qty2 = traderItem.qty) != null ? _traderItem$qty2 : 999)) {
+      var newQuantity = selectedQty + 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
   return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -35770,54 +35850,70 @@ var TradingItemRow = function TradingItemRow(_ref) {
     maxLines: 1,
     maxWidth: "250px"
   }, capitalize(traderItem.name))), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer, null, React.createElement(SelectArrow, {
+    size: 32,
+    className: "arrow-selector",
+    direction: "left",
+    onClick: onLeftOutClick,
+    onTouchStart: onLeftOutClick
+  }), React.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
     onClick: onLeftClick,
     onTouchStart: onLeftClick
-  }), React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, selectedQty))), React.createElement(SelectArrow, {
+  }), React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, selectedQty))), React.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "right",
     onClick: onRightClick,
     onTouchStart: onRightClick
+  }), React.createElement(SelectArrow, {
+    size: 32,
+    className: "arrow-selector",
+    direction: "right",
+    onClick: onRightOutClick,
+    onTouchStart: onRightOutClick
   })));
 };
+var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
+  displayName: "TradingItemRow__StyledArrow",
+  componentId: "sc-mja0b5-0"
+})(["margin:40px;"]);
 var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
-  componentId: "sc-mja0b5-0"
+  componentId: "sc-mja0b5-1"
 })(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], uiColors.darkGray);
 var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
-  componentId: "sc-mja0b5-1"
+  componentId: "sc-mja0b5-2"
 })(["flex:60%;"]);
 var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
-  componentId: "sc-mja0b5-2"
+  componentId: "sc-mja0b5-3"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
 var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
-  componentId: "sc-mja0b5-3"
+  componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
-  componentId: "sc-mja0b5-4"
+  componentId: "sc-mja0b5-5"
 })(["p{font-size:0.75rem;margin:0;}"]);
 var Item$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
-  componentId: "sc-mja0b5-5"
+  componentId: "sc-mja0b5-6"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
 var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
-  componentId: "sc-mja0b5-6"
+  componentId: "sc-mja0b5-7"
 })(["width:100%;position:relative;"]);
 var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-7"
-})(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:20%;"]);
+  componentId: "sc-mja0b5-8"
+})(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
 var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityDisplay",
-  componentId: "sc-mja0b5-8"
+  componentId: "sc-mja0b5-9"
 })(["font-size:", ";"], uiFonts.size.small);
 
 var TradingMenu = function TradingMenu(_ref) {
@@ -35879,7 +35975,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onCloseButton: function onCloseButton() {
       if (onClose) onClose();
     },
-    width: "500px",
+    width: "600px",
     cancelDrag: ".equipment-container-body .arrow-selector"
   }, React.createElement(React.Fragment, null, React.createElement("div", {
     style: {
@@ -35956,5 +36052,5 @@ var Container$k = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, QuickSpells, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, QuickSpells, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpellShortcut, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map