@rpg-engine/long-bow 0.3.59 → 0.3.60

package/dist/long-bow.esm.js

@@ -33052,7 +33052,7 @@ var CheckButton = function CheckButton(_ref) {
 var SingleShortcut = /*#__PURE__*/styled.button.withConfig({
   displayName: "SingleShortcut",
   componentId: "sc-vz5ev8-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:", ";}.qty{position:absolute;top:-5px;right:0;font-size:0.65rem;}.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);
+})(["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:", ";}.qty{position:absolute;top:-5px;right:0;font-size:0.65rem;}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";border-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray, uiColors.yellow);
 
 var CircularController = function CircularController(_ref) {
   var onActionClick = _ref.onActionClick,
@@ -33114,6 +33114,9 @@ var CircularController = function CircularController(_ref) {
         imgScale: 1.4,
         imgStyle: {
           left: '4px'
+        },
+        containerStyle: {
+          pointerEvents: 'none'
         }
       }), React.createElement("span", {
         className: "qty"
@@ -33151,7 +33154,7 @@ var CircularController = function CircularController(_ref) {
 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;margin-top:-3rem;&.active{background-color:", ";}.sword{transform:rotate(-45deg);height:2.5rem;width:1.9rem;pointer-events:none;}"], uiColors.lightGray, uiColors.darkGray, uiColors.gray);
+})(["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:all 0.1s;margin-top:-3rem;&.active{background-color:", ";border-color:", ";}.sword{transform:rotate(-45deg);height:2.5rem;width:1.9rem;pointer-events:none;}"], uiColors.lightGray, uiColors.darkGray, uiColors.gray, uiColors.yellow);
 var CancelButton = /*#__PURE__*/styled(Button$2).withConfig({
   displayName: "CircularController__CancelButton",
   componentId: "sc-1fewf3h-1"
@@ -33167,7 +33170,7 @@ var ShortcutsContainer = /*#__PURE__*/styled.div.withConfig({
 var StyledShortcut = /*#__PURE__*/styled(SingleShortcut).withConfig({
   displayName: "CircularController__StyledShortcut",
   componentId: "sc-1fewf3h-4"
-})(["width:2.5rem;height:2.5rem;transition:background-color 0.1s;.mana,.qty{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";}"], uiColors.lightGray, uiColors.gray);
+})(["width:2.5rem;height:2.5rem;transition:all 0.1s;.mana,.qty{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";border-color:", ";}"], uiColors.lightGray, uiColors.gray, uiColors.yellow);
 
 function useOutsideClick(ref, id) {
   useEffect(function () {
@@ -35228,12 +35231,19 @@ var Shortcuts = function Shortcuts(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     inventory = _ref.inventory;
+  var shortcutsRefs = useRef([]);
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (isBlockedCastingByKeyboard) return;
       var shortcutIndex = Number(e.key) - 1;
       if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        var _shortcutsRefs$curren;
         onShortcutCast(shortcutIndex);
+        (_shortcutsRefs$curren = shortcutsRefs.current[shortcutIndex]) == null ? void 0 : _shortcutsRefs$curren.classList.add('active');
+        setTimeout(function () {
+          var _shortcutsRefs$curren2;
+          (_shortcutsRefs$curren2 = shortcutsRefs.current[shortcutIndex]) == null ? void 0 : _shortcutsRefs$curren2.classList.remove('active');
+        }, 150);
       }
     };
     window.addEventListener('keydown', handleKeyDown);
@@ -35261,10 +35271,13 @@ var Shortcuts = function Shortcuts(_ref) {
       var totalQty = itemsFromEquipment.reduce(function (acc, item) {
         return acc + ((item == null ? void 0 : item.stackQty) || 1);
       }, 0);
-      return React.createElement(SingleShortcut, {
+      return React.createElement(StyledShortcut$1, {
         key: i,
         onPointerDown: onShortcutCast.bind(null, i),
-        disabled: false
+        disabled: false,
+        ref: function ref(el) {
+          if (el) shortcutsRefs.current[i] = el;
+        }
       }, _payload && React.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
@@ -35282,10 +35295,13 @@ var Shortcuts = function Shortcuts(_ref) {
       }, i + 1));
     }
     var payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
-    return React.createElement(SingleShortcut, {
+    return React.createElement(StyledShortcut$1, {
       key: i,
       onPointerDown: onShortcutCast.bind(null, i),
-      disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0)
+      disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0),
+      ref: function ref(el) {
+        if (el) shortcutsRefs.current[i] = el;
+      }
     }, React.createElement("span", {
       className: "mana"
     }, payload && payload.manaCost), React.createElement("span", {
@@ -35297,9 +35313,13 @@ var Shortcuts = function Shortcuts(_ref) {
     }, i + 1));
   }));
 };
+var StyledShortcut$1 = /*#__PURE__*/styled(SingleShortcut).withConfig({
+  displayName: "Shortcuts__StyledShortcut",
+  componentId: "sc-kgtsi7-0"
+})(["transition:all 0.15s;&.active{background-color:", ";border-color:", ";}"], uiColors.gray, uiColors.yellow);
 var List$1 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Shortcuts__List",
-  componentId: "sc-kgtsi7-0"
+  componentId: "sc-kgtsi7-1"
 })(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
 
 var SimpleProgressBar = function SimpleProgressBar(_ref) {