@rpg-engine/long-bow 0.3.96 → 0.3.97

package/dist/long-bow.esm.js

@@ -12844,7 +12844,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 = useState(0),
+    shortcutCooldown = _useState[0],
+    setShortcutCooldown = _useState[1];
+  var cooldownTimeout = useRef(null);
+  var handleShortcutCast = function handleShortcutCast(index) {
+    console.log(shortcutCooldown);
+    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
+    onShortcutCast(index);
+  };
+  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,
@@ -12854,7 +12878,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');
@@ -12867,10 +12895,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) !== ShortcutType.None ? onShortcutClick.bind(null, i) : function () {};
+    var onShortcutClickBinded = ((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) !== ShortcutType.None ? handleShortcutCast.bind(null, i) : function () {};
+    var isOnShortcutCooldown = shortcutCooldown > 0;
     if (((_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.type) === ShortcutType.Item) {
       var _shortcuts$i3;
       var _payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
@@ -12893,7 +12925,9 @@ var CircularController = function CircularController(_ref) {
         onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
         disabled: false,
         className: variant
-      }, _payload && React.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: getItemTextureKeyPath({
@@ -12912,18 +12946,23 @@ var CircularController = function CircularController(_ref) {
           pointerEvents: 'none'
         }
       }), React.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.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.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
@@ -13865,7 +13904,9 @@ var ItemInfo = function ItemInfo(_ref) {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
-  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React.createElement(LevelRequirement, null, React.createElement("div", null, "Level: ", item.minRequirements.level), React.createElement("div", null, item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React.createElement(Statistic, {
+  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React.createElement(LevelRequirement, null, React.createElement("div", {
+    className: "title"
+  }, "Requirements:"), React.createElement("div", null, "- Level: ", item.minRequirements.level), React.createElement("div", null, "-", ' ', item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React.createElement(Statistic, {
     "$isSpecial": true
   }, item.usableEffectDescription), item.equippedBuffDescription && React.createElement(Statistic, {
     "$isSpecial": true
@@ -13899,7 +13940,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"
@@ -15841,15 +15882,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 = useRef([]);
+  var _useShortcutCooldown = useShortcutCooldown(onShortcutCast),
+    handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
+    shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
   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;
@@ -15861,11 +15906,15 @@ var Shortcuts = function Shortcuts(_ref) {
     return function () {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
+  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
   return React.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) === ShortcutType.Item) {
       var _shortcuts$i2;
       var _payload = (_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.payload;
@@ -15882,12 +15931,14 @@ var Shortcuts = function Shortcuts(_ref) {
       var totalQty = _payload && inventory ? countItemFromInventory(_payload.key, inventory) : 0;
       return React.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.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: getItemTextureKeyPath({
@@ -15899,27 +15950,32 @@ var Shortcuts = function Shortcuts(_ref) {
         width: 32,
         height: 32
       }), React.createElement("span", {
-        className: "qty"
+        className: buildClassName('qty', isOnShortcutCooldown)
       }, totalQty), React.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.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.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })), React.createElement("span", {
-      className: "keyboard"
+      className: buildClassName('keyboard', isOnCooldown)
     }, i + 1));
   }));
 };
@@ -16176,14 +16232,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.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.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, magicWords.split(' ').map(function (word) {
+  }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+    className: "cooldown"
+  }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, magicWords.split(' ').map(function (word) {
     return word[0];
   })), React.createElement(Info, null, React.createElement(Title$6, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
@@ -16201,7 +16260,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"
@@ -16240,7 +16299,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 = useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -16302,7 +16362,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)));
   }))));
 };