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