@rpg-engine/long-bow 0.3.39 → 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,
@@ -35985,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