@rpg-engine/long-bow 0.3.95 → 0.3.97

package/dist/long-bow.esm.js

@@ -12644,7 +12644,7 @@ var uiColors = {
   blue: '#597DCE',
   darkBlue: '#30346D',
   brown: '#854C30',
-  lightGreen: '#88ed1c',
+  lightGreen: '#66cd1c',
   brownGreen: '#346524'
 };
 
@@ -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) {
@@ -13251,15 +13290,15 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
 var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
-})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
+})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
 var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__OptionsContainer",
   componentId: "sc-ku4p1j-1"
-})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:580px){flex-direction:row;justify-content:center;}"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:640px){flex-direction:row;justify-content:center;}"]);
 var Option = /*#__PURE__*/styled.button.withConfig({
   displayName: "MobileItemTooltip__Option",
   componentId: "sc-ku4p1j-2"
-})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:580px){padding:1rem 0.5rem;}"]);
+})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
 
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
@@ -13833,6 +13872,15 @@ var ItemInfo = function ItemInfo(_ref) {
     }
     return statistics;
   };
+  var renderEntityEffects = function renderEntityEffects() {
+    if (!item.entityEffects || !item.entityEffectChance) return null;
+    return item.entityEffects.map(function (effect, index) {
+      return React.createElement(Statistic, {
+        key: index,
+        "$isSpecial": true
+      }, effect[0].toUpperCase() + effect.slice(1), " (", item.entityEffectChance, "%)");
+    });
+  };
   var renderAvaibleSlots = function renderAvaibleSlots() {
     if (!item.allowedEquipSlotType) return null;
     return item.allowedEquipSlotType.map(function (slotType, index) {
@@ -13856,12 +13904,20 @@ 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())), renderStatistics(), item.isTwoHanded && React.createElement(Statistic, null, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
+  }, 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
+  }, item.equippedBuffDescription), item.isTwoHanded && React.createElement(Statistic, {
+    "$isSpecial": true
+  }, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
 var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
-})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:15rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
+})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
   var _rarityColor;
   var item = _ref2.item;
   return (_rarityColor = rarityColor(item)) != null ? _rarityColor : uiColors.lightGray;
@@ -13881,29 +13937,36 @@ var Type = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Type",
   componentId: "sc-1xm4q8k-3"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
+var LevelRequirement = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemInfo__LevelRequirement",
+  componentId: "sc-1xm4q8k-4"
+})(["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-4"
-})(["margin-bottom:0.4rem;width:max-content;.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], uiColors.lightGreen, uiColors.cardinal);
+  componentId: "sc-1xm4q8k-5"
+})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref4) {
+  var $isSpecial = _ref4.$isSpecial;
+  return $isSpecial ? uiColors.darkYellow : 'inherit';
+}, uiColors.lightGreen, uiColors.cardinal);
 var Description = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Description",
-  componentId: "sc-1xm4q8k-5"
+  componentId: "sc-1xm4q8k-6"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Header",
-  componentId: "sc-1xm4q8k-6"
+  componentId: "sc-1xm4q8k-7"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
 var AllowedSlots = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__AllowedSlots",
-  componentId: "sc-1xm4q8k-7"
+  componentId: "sc-1xm4q8k-8"
 })(["display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-left:auto;align-self:flex-start;"]);
 var StackInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__StackInfo",
-  componentId: "sc-1xm4q8k-8"
+  componentId: "sc-1xm4q8k-9"
 })(["width:100%;text-align:right;font-size:", ";color:", ";margin-top:1rem;"], uiFonts.size.small, uiColors.orange);
 var MissingStatistics = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__MissingStatistics",
-  componentId: "sc-1xm4q8k-9"
+  componentId: "sc-1xm4q8k-10"
 })(["margin-top:1rem;color:", ";"], uiColors.cardinal);
 
 var itemSlotTypes = ['head', 'neck', 'leftHand', 'rightHand', 'ring', 'legs', 'boot', 'accessory', 'armor', 'inventory'];
@@ -13925,7 +13988,11 @@ var ItemInfoDisplay = function ItemInfoDisplay(_ref) {
       var allowedSlotTypeCamelCase = camelCase(item.allowedEquipSlotType[0]);
       var itemSubTypeCamelCase = camelCase(item.subType);
       var slotType = getSlotType(itemSlotTypes, allowedSlotTypeCamelCase, itemSubTypeCamelCase);
-      var itemFromEquipment = equipmentSet[slotType];
+      var itemSubTypeFromEquipment = Object.values(equipmentSet).find(function (item) {
+        var _item$subType;
+        return camelCase((_item$subType = item == null ? void 0 : item.subType) != null ? _item$subType : '') === itemSubTypeCamelCase;
+      });
+      var itemFromEquipment = itemSubTypeFromEquipment ? itemSubTypeFromEquipment : equipmentSet[slotType];
       if (itemFromEquipment && (!item._id || itemFromEquipment._id !== item._id)) {
         return itemFromEquipment;
       }
@@ -13949,7 +14016,7 @@ var ItemInfoDisplay = function ItemInfoDisplay(_ref) {
 var Flex = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfoDisplay__Flex",
   componentId: "sc-1lftdo8-0"
-})(["display:flex;gap:0.5rem;flex-direction:", ";@media (max-width:580px){flex-direction:column-reverse;align-items:center;}"], function (_ref2) {
+})(["display:flex;gap:0.5rem;flex-direction:", ";align-items:center;@media (max-width:640px){flex-direction:column-reverse;align-items:center;}"], function (_ref2) {
   var $isMobile = _ref2.$isMobile;
   return $isMobile ? 'row-reverse' : 'row';
 });
@@ -15815,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;
@@ -15835,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;
@@ -15856,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({
@@ -15873,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));
   }));
 };
@@ -16150,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"
@@ -16175,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"
@@ -16214,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];
@@ -16276,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)));
   }))));
 };