@rpg-engine/long-bow 0.3.96 → 0.3.97

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

@@ -9,5 +9,6 @@ export declare type CircularControllerProps = {
     inventory?: IItemContainer | null;
     atlasIMG: any;
     atlasJSON: any;
+    spellCooldowns?: Record<string, number>;
 };
 export declare const CircularController: React.FC<CircularControllerProps>;

package/dist/components/Shortcuts/Shortcuts.d.ts

@@ -8,5 +8,6 @@ export declare type ShortcutsProps = {
     inventory?: IItemContainer | null;
     atlasJSON: any;
     atlasIMG: any;
+    spellCooldowns?: Record<string, number>;
 };
 export declare const Shortcuts: React.FC<ShortcutsProps>;

package/dist/components/Shortcuts/useShortcutCooldown.d.ts

@@ -0,0 +1,4 @@
+export declare const useShortcutCooldown: (onShortcutCast: (index: number) => void) => {
+    shortcutCooldown: number;
+    handleShortcutCast: (index: number) => void;
+};

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

@@ -6,6 +6,7 @@ interface Props extends IRawSpell {
     onPointerUp?: (spellKey: string) => void;
     isSettingShortcut?: boolean;
     spellKey: string;
+    activeCooldown?: number;
 }
 export declare const Spell: React.FC<Props>;
 export {};

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

@@ -14,5 +14,6 @@ export interface ISpellbookProps {
     atlasIMG: any;
     atlasJSON: any;
     scale?: number;
+    spellCooldowns?: Record<string, number>;
 }
 export declare const Spellbook: React.FC<ISpellbookProps>;

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

@@ -12849,7 +12849,31 @@ 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:", ";border-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray, uiColors.yellow);
+})(["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:", ";}.onCooldown{color:", ";}.cooldown{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:inherit;background-color:rgba(0 0 0 / 60%);font-size:0.7rem;display:flex;align-items:center;justify-content:center;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";border-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.gray, uiColors.darkYellow, uiColors.darkGray, uiColors.gray, uiColors.yellow);
+
+var useShortcutCooldown = function useShortcutCooldown(onShortcutCast) {
+  var _useState = React.useState(0),
+    shortcutCooldown = _useState[0],
+    setShortcutCooldown = _useState[1];
+  var cooldownTimeout = React.useRef(null);
+  var handleShortcutCast = function handleShortcutCast(index) {
+    console.log(shortcutCooldown);
+    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
+    onShortcutCast(index);
+  };
+  React.useEffect(function () {
+    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
+    if (shortcutCooldown > 0) {
+      cooldownTimeout.current = setTimeout(function () {
+        setShortcutCooldown(shortcutCooldown - 0.1);
+      }, 100);
+    }
+  }, [shortcutCooldown]);
+  return {
+    shortcutCooldown: shortcutCooldown,
+    handleShortcutCast: handleShortcutCast
+  };
+};
 
 var CircularController = function CircularController(_ref) {
   var onActionClick = _ref.onActionClick,
@@ -12859,7 +12883,11 @@ var CircularController = function CircularController(_ref) {
     shortcuts = _ref.shortcuts,
     inventory = _ref.inventory,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    spellCooldowns = _ref.spellCooldowns;
+  var _useShortcutCooldown = useShortcutCooldown(onShortcutClick),
+    handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
+    shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
   var onTouchStart = function onTouchStart(e) {
     var target = e.target;
     target == null ? void 0 : target.classList.add('active');
@@ -12872,10 +12900,14 @@ var CircularController = function CircularController(_ref) {
     action();
   };
   var renderShortcut = function renderShortcut(i) {
-    var _shortcuts$i, _shortcuts$i2, _shortcuts$i4, _payload$manaCost;
+    var _shortcuts$i, _shortcuts$i2, _shortcuts$i4, _spellCooldowns$paylo, _payload$manaCost;
+    var buildClassName = function buildClassName(classBase, isOnCooldown) {
+      return classBase + " " + (isOnCooldown ? 'onCooldown' : '');
+    };
     var variant = '';
     if (i === 0) variant = 'top';else if (i >= 3) variant = "bottom-" + (i - 3);
-    var onShortcutClickBinded = ((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) !== shared.ShortcutType.None ? onShortcutClick.bind(null, i) : function () {};
+    var onShortcutClickBinded = ((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) !== shared.ShortcutType.None ? handleShortcutCast.bind(null, i) : function () {};
+    var isOnShortcutCooldown = shortcutCooldown > 0;
     if (((_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.type) === shared.ShortcutType.Item) {
       var _shortcuts$i3;
       var _payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
@@ -12898,7 +12930,9 @@ var CircularController = function CircularController(_ref) {
         onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
         disabled: false,
         className: variant
-      }, _payload && React__default.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React__default.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React__default.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: shared.getItemTextureKeyPath({
@@ -12917,18 +12951,23 @@ var CircularController = function CircularController(_ref) {
           pointerEvents: 'none'
         }
       }), React__default.createElement("span", {
-        className: "qty"
+        className: buildClassName('qty', isOnShortcutCooldown)
       }, totalQty));
     }
     var payload = (_shortcuts$i4 = shortcuts[i]) == null ? void 0 : _shortcuts$i4.payload;
+    var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
+    var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+    var isOnCooldown = cooldown > 0 && !!payload;
     return React__default.createElement(StyledShortcut, {
       key: i,
       onTouchStart: onTouchStart,
       onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
       disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0),
       className: variant
-    }, React__default.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React__default.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React__default.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React__default.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
@@ -13870,7 +13909,9 @@ var ItemInfo = function ItemInfo(_ref) {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
-  }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React__default.createElement(LevelRequirement, null, React__default.createElement("div", null, "Level: ", item.minRequirements.level), React__default.createElement("div", null, item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React__default.createElement(Statistic, {
+  }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React__default.createElement(LevelRequirement, null, React__default.createElement("div", {
+    className: "title"
+  }, "Requirements:"), React__default.createElement("div", null, "- Level: ", item.minRequirements.level), React__default.createElement("div", null, "-", ' ', item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React__default.createElement(Statistic, {
     "$isSpecial": true
   }, item.usableEffectDescription), item.equippedBuffDescription && React__default.createElement(Statistic, {
     "$isSpecial": true
@@ -13904,7 +13945,7 @@ var Type = /*#__PURE__*/styled.div.withConfig({
 var LevelRequirement = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__LevelRequirement",
   componentId: "sc-1xm4q8k-4"
-})(["font-size:", ";margin-top:0.2rem;margin-bottom:1rem;color:", ";"], uiFonts.size.small, uiColors.orange);
+})(["font-size:", ";margin-top:0.2rem;margin-bottom:1rem;color:", ";.title{margin-bottom:4px;}div{margin-bottom:2px;}"], uiFonts.size.small, uiColors.orange);
 var Statistic = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Statistic",
   componentId: "sc-1xm4q8k-5"
@@ -15844,15 +15885,19 @@ var Shortcuts = function Shortcuts(_ref) {
     isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    inventory = _ref.inventory;
+    inventory = _ref.inventory,
+    spellCooldowns = _ref.spellCooldowns;
   var shortcutsRefs = React.useRef([]);
+  var _useShortcutCooldown = useShortcutCooldown(onShortcutCast),
+    handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
+    shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
   React.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);
+        handleShortcutCast(shortcutIndex);
         (_shortcutsRefs$curren = shortcutsRefs.current[shortcutIndex]) == null ? void 0 : _shortcutsRefs$curren.classList.add('active');
         setTimeout(function () {
           var _shortcutsRefs$curren2;
@@ -15864,11 +15909,15 @@ var Shortcuts = function Shortcuts(_ref) {
     return function () {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
+  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
   return React__default.createElement(List$1, null, Array.from({
     length: 6
   }).map(function (_, i) {
-    var _shortcuts$i, _shortcuts$i3, _payload$manaCost;
+    var _shortcuts$i, _shortcuts$i3, _spellCooldowns$paylo, _payload$manaCost;
+    var buildClassName = function buildClassName(classBase, isOnCooldown) {
+      return classBase + " " + (isOnCooldown ? 'onCooldown' : '');
+    };
+    var isOnShortcutCooldown = shortcutCooldown > 0;
     if (((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) === shared.ShortcutType.Item) {
       var _shortcuts$i2;
       var _payload = (_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.payload;
@@ -15885,12 +15934,14 @@ var Shortcuts = function Shortcuts(_ref) {
       var totalQty = _payload && inventory ? countItemFromInventory(_payload.key, inventory) : 0;
       return React__default.createElement(StyledShortcut$1, {
         key: i,
-        onPointerDown: onShortcutCast.bind(null, i),
+        onPointerDown: handleShortcutCast.bind(null, i),
         disabled: false,
         ref: function ref(el) {
           if (el) shortcutsRefs.current[i] = el;
         }
-      }, _payload && React__default.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React__default.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React__default.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: shared.getItemTextureKeyPath({
@@ -15902,27 +15953,32 @@ var Shortcuts = function Shortcuts(_ref) {
         width: 32,
         height: 32
       }), React__default.createElement("span", {
-        className: "qty"
+        className: buildClassName('qty', isOnShortcutCooldown)
       }, totalQty), React__default.createElement("span", {
-        className: "keyboard"
+        className: buildClassName('keyboard', isOnShortcutCooldown)
       }, i + 1));
     }
     var payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
+    var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
+    var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+    var isOnCooldown = cooldown > 0 && !!payload;
     return React__default.createElement(StyledShortcut$1, {
       key: i,
-      onPointerDown: onShortcutCast.bind(null, i),
+      onPointerDown: handleShortcutCast.bind(null, i),
       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__default.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React__default.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React__default.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React__default.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })), React__default.createElement("span", {
-      className: "keyboard"
+      className: buildClassName('keyboard', isOnCooldown)
     }, i + 1));
   }));
 };
@@ -16179,14 +16235,17 @@ var Spell = function Spell(_ref) {
     charMagicLevel = _ref.charMagicLevel,
     onPointerUp = _ref.onPointerUp,
     isSettingShortcut = _ref.isSettingShortcut,
-    minMagicLevelRequired = _ref.minMagicLevelRequired;
+    minMagicLevelRequired = _ref.minMagicLevelRequired,
+    activeCooldown = _ref.activeCooldown;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
   return React__default.createElement(Container$k, {
-    disabled: disabled,
+    disabled: disabled || (activeCooldown != null ? activeCooldown : 0) > 0,
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React__default.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, magicWords.split(' ').map(function (word) {
+  }, disabled && React__default.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
+    className: "cooldown"
+  }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, magicWords.split(' ').map(function (word) {
     return word[0];
   })), React__default.createElement(Info, null, React__default.createElement(Title$6, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
@@ -16204,7 +16263,7 @@ var Container$k = /*#__PURE__*/styled.button.withConfig({
 var SpellImage = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__SpellImage",
   componentId: "sc-j96fa2-1"
-})(["width:4rem;height:4rem;font-size:", ";font-weight:bold;background-color:", ";color:", ";display:flex;justify-content:center;align-items:center;text-transform:uppercase;"], uiFonts.size.xLarge, uiColors.darkGray, uiColors.lightGray);
+})(["width:4rem;height:4rem;font-size:", ";font-weight:bold;background-color:", ";color:", ";display:flex;justify-content:center;align-items:center;text-transform:uppercase;position:relative;overflow:hidden;.cooldown{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0 0 0 / 20%);color:", ";font-weight:bold;display:flex;justify-content:center;align-items:center;}"], uiFonts.size.xLarge, uiColors.darkGray, uiColors.lightGray, uiColors.darkYellow);
 var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
@@ -16243,7 +16302,8 @@ var Spellbook = function Spellbook(_ref) {
     removeShortcut = _ref.removeShortcut,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    spellCooldowns = _ref.spellCooldowns;
   var _useState = React.useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -16305,7 +16365,8 @@ var Spellbook = function Spellbook(_ref) {
       charMagicLevel: magicLevel,
       onPointerUp: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
       spellKey: spell.key,
-      isSettingShortcut: settingShortcutIndex !== -1
+      isSettingShortcut: settingShortcutIndex !== -1,
+      activeCooldown: spellCooldowns == null ? void 0 : spellCooldowns[spell.magicWords.replaceAll(' ', '_')]
     }, spell)));
   }))));
 };