@rpg-engine/long-bow 0.3.38 → 0.3.40

package/dist/components/CircularController/CircularController.d.ts

@@ -0,0 +1,10 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+export declare type CircularControllerProps = {
+    onActionClick: () => void;
+    onCancelClick: () => void;
+    onSpellClick: (spellKey: string) => void;
+    mana: number;
+    spells: IRawSpell[];
+};
+export declare const CircularController: React.FC<CircularControllerProps>;

package/dist/components/Spellbook/QuickSpells.d.ts

@@ -7,3 +7,4 @@ export declare type QuickSpellsProps = {
     isBlockedCastingByKeyboard?: boolean;
 };
 export declare const QuickSpells: React.FC<QuickSpellsProps>;
+export declare const SpellShortcut: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
+export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';

package/dist/long-bow.cjs.development.js

@@ -33059,6 +33059,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;
+  React.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__default.createElement(List, null, Array.from({
+    length: 4
+  }).map(function (_, i) {
+    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
+    return React__default.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__default.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__default.createElement("span", {
+      className: "magicWords"
+    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })), React__default.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__default.createElement(ButtonsContainer, null, React__default.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__default.createElement(StyledShortcut, {
+      key: i,
+      disabled: mana < (spell == null ? void 0 : spell.manaCost),
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd.bind(null, onSpellClickBinded),
+      className: variant
+    }, React__default.createElement("span", {
+      className: "mana"
+    }, (spell == null ? void 0 : spell.key) && (spell == null ? void 0 : spell.manaCost)), React__default.createElement("span", {
+      className: "magicWords"
+    }, spell == null ? void 0 : spell.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })));
+  })), React__default.createElement(Button$2, {
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd.bind(null, onActionClick)
+  }, React__default.createElement("div", {
+    className: "rpgui-icon sword"
+  })), React__default.createElement(CancelButton, {
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd.bind(null, onCancelClick)
+  }, React__default.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) {
   React.useEffect(function () {
     /**
@@ -35453,56 +35570,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;
-  React.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__default.createElement(List, null, Array.from({
-    length: 4
-  }).map(function (_, i) {
-    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
-    return React__default.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__default.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__default.createElement("span", {
-      className: "magicWords"
-    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
-      return word[0];
-    })), React__default.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,
@@ -35759,6 +35826,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__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer$1, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -35772,54 +35852,70 @@ var TradingItemRow = function TradingItemRow(_ref) {
     maxLines: 1,
     maxWidth: "250px"
   }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer, null, React__default.createElement(SelectArrow, {
+    size: 32,
+    className: "arrow-selector",
+    direction: "left",
+    onClick: onLeftOutClick,
+    onTouchStart: onLeftOutClick
+  }), React__default.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
     onClick: onLeftClick,
     onTouchStart: onLeftClick
-  }), React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$2, null, React__default.createElement(Item$1, null, selectedQty))), React__default.createElement(SelectArrow, {
+  }), React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$2, null, React__default.createElement(Item$1, null, selectedQty))), React__default.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "right",
     onClick: onRightClick,
     onTouchStart: onRightClick
+  }), React__default.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) {
@@ -35881,7 +35977,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onCloseButton: function onCloseButton() {
       if (onClose) onClose();
     },
-    width: "500px",
+    width: "600px",
     cancelDrag: ".equipment-container-body .arrow-selector"
   }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     style: {
@@ -35963,6 +36059,7 @@ exports.CharacterSelection = CharacterSelection;
 exports.Chat = Chat;
 exports.ChatDeprecated = ChatDeprecated;
 exports.CheckButton = CheckButton;
+exports.CircularController = CircularController;
 exports.CraftBook = CraftBook;
 exports.DraggableContainer = DraggableContainer;
 exports.Dropdown = Dropdown;
@@ -35990,6 +36087,7 @@ exports.RPGUIRoot = RPGUIRoot;
 exports.RangeSlider = RangeSlider;
 exports.SkillProgressBar = SkillProgressBar;
 exports.SkillsContainer = SkillsContainer;
+exports.SpellShortcut = SpellShortcut;
 exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.TextArea = TextArea;