@rpg-engine/long-bow 0.3.51 → 0.3.52

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay, isMobileOrTablet } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, getItemTextureKeyPath, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSlotType, getSPForLevel, PeriodOfDay, isMobileOrTablet } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -33053,62 +33053,109 @@ var CheckButton = function CheckButton(_ref) {
   }));
 };
 
-var QuickSpells = function QuickSpells(_ref) {
-  var quickSpells = _ref.quickSpells,
-    onSpellCast = _ref.onSpellCast,
+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);
+
+var ShortcutType;
+(function (ShortcutType) {
+  ShortcutType[ShortcutType["Spell"] = 0] = "Spell";
+  ShortcutType[ShortcutType["Item"] = 1] = "Item";
+  ShortcutType[ShortcutType["None"] = 2] = "None";
+})(ShortcutType || (ShortcutType = {}));
+var Shortcuts = function Shortcuts(_ref) {
+  var shortcuts = _ref.shortcuts,
+    onShortcutCast = _ref.onShortcutCast,
     mana = _ref.mana,
     _ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
-    isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
+    isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    inventory = _ref.inventory;
   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);
-        }
+      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        onShortcutCast(shortcutIndex);
       }
     };
     window.addEventListener('keydown', handleKeyDown);
     return function () {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [quickSpells, isBlockedCastingByKeyboard]);
+  }, [shortcuts, isBlockedCastingByKeyboard]);
   return React.createElement(List, null, Array.from({
-    length: 4
+    length: 6
   }).map(function (_, i) {
-    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
-    return React.createElement(SpellShortcut, {
+    var _shortcuts$i, _shortcuts$i3, _payload$manaCost;
+    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;
+      var itemsFromEquipment = [];
+      if (inventory) {
+        Object.keys(inventory.slots).forEach(function (i) {
+          var _inventory$slots$inde;
+          var index = parseInt(i);
+          if (((_inventory$slots$inde = inventory.slots[index]) == null ? void 0 : _inventory$slots$inde.key) === (_payload == null ? void 0 : _payload.key)) {
+            itemsFromEquipment.push(inventory.slots[index]);
+          }
+        });
+      }
+      var totalQty = itemsFromEquipment.reduce(function (acc, item) {
+        return acc + ((item == null ? void 0 : item.stackQty) || 1);
+      }, 0);
+      return React.createElement(SingleShortcut, {
+        key: i,
+        onClick: onShortcutCast.bind(null, i),
+        disabled: false
+      }, _payload && React.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: getItemTextureKeyPath({
+          key: _payload.texturePath,
+          texturePath: _payload.texturePath,
+          stackQty: _payload.stackQty || 1
+        }, atlasJSON),
+        width: 32,
+        height: 32
+      }), React.createElement("span", {
+        className: "qty"
+      }, totalQty), React.createElement("span", {
+        className: "keyboard"
+      }, i + 1));
+    }
+    var payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
+    return React.createElement(SingleShortcut, {
       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)
+      onClick: onShortcutCast.bind(null, i),
+      disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0)
     }, React.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.createElement("span", {
+    }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
-    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
+    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })), React.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"
+  displayName: "Shortcuts__List",
+  componentId: "sc-kgtsi7-0"
 })(["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,
+    onShortcutClick = _ref.onShortcutClick,
     mana = _ref.mana,
-    spells = _ref.spells;
+    shortcuts = _ref.shortcuts,
+    inventory = _ref.inventory,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON;
   var onTouchStart = function onTouchStart(e) {
     var target = e.target;
     target == null ? void 0 : target.classList.add('active');
@@ -33120,25 +33167,70 @@ var CircularController = function CircularController(_ref) {
     }, 100);
     action();
   };
-  return React.createElement(ButtonsContainer, null, React.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 () {};
+  var renderShortcut = function renderShortcut(i) {
+    var _shortcuts$i, _shortcuts$i2, _shortcuts$i4, _payload$manaCost;
+    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 () {};
+    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;
+      var itemsFromEquipment = [];
+      if (inventory) {
+        Object.keys(inventory.slots).forEach(function (i) {
+          var _inventory$slots$inde;
+          var index = parseInt(i);
+          if (((_inventory$slots$inde = inventory.slots[index]) == null ? void 0 : _inventory$slots$inde.key) === (_payload == null ? void 0 : _payload.key)) {
+            itemsFromEquipment.push(inventory.slots[index]);
+          }
+        });
+      }
+      var totalQty = itemsFromEquipment.reduce(function (acc, item) {
+        return acc + ((item == null ? void 0 : item.stackQty) || 1);
+      }, 0);
+      return React.createElement(StyledShortcut, {
+        key: i,
+        onTouchStart: onTouchStart,
+        onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
+        disabled: false,
+        className: variant
+      }, _payload && React.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: getItemTextureKeyPath({
+          key: _payload.texturePath,
+          texturePath: _payload.texturePath,
+          stackQty: _payload.stackQty || 1
+        }, atlasJSON),
+        width: 32,
+        height: 32,
+        imgScale: 1.4,
+        imgStyle: {
+          left: '4px'
+        }
+      }), React.createElement("span", {
+        className: "qty"
+      }, totalQty));
+    }
+    var payload = (_shortcuts$i4 = shortcuts[i]) == null ? void 0 : _shortcuts$i4.payload;
     return React.createElement(StyledShortcut, {
       key: i,
-      disabled: mana < (spell == null ? void 0 : spell.manaCost),
       onTouchStart: onTouchStart,
-      onTouchEnd: onTouchEnd.bind(null, onSpellClickBinded),
+      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"
-    }, (spell == null ? void 0 : spell.key) && (spell == null ? void 0 : spell.manaCost)), React.createElement("span", {
+    }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
-    }, spell == null ? void 0 : spell.magicWords.split(' ').map(function (word) {
+    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })));
+  };
+  return React.createElement(ButtonsContainer, null, React.createElement(ShortcutsContainer, null, Array.from({
+    length: 6
+  }).map(function (_, i) {
+    return renderShortcut(i);
   })), React.createElement(Button$2, {
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd.bind(null, onActionClick)
@@ -33152,7 +33244,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;&.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: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);
 var CancelButton = /*#__PURE__*/styled(Button$2).withConfig({
   displayName: "CircularController__CancelButton",
   componentId: "sc-1fewf3h-1"
@@ -33161,14 +33253,14 @@ 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",
+var ShortcutsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CircularController__ShortcutsContainer",
   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({
+})(["display:flex;align-items:center;justify-content:center;gap:0.5rem;flex-direction:column;margin-top:3rem;.top{transform:translate(93%,25%);}.bottom-0{transform:translate(93%,-25%);}.bottom-1{transform:translate(-120%,calc(-5.5rem));}.bottom-2{transform:translate(-30%,calc(-5.5rem - 25%));}"]);
+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{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";}"], uiColors.lightGray, uiColors.gray);
+})(["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);
 
 function useOutsideClick(ref, id) {
   useEffect(function () {
@@ -33757,7 +33849,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     openQuantitySelector = _ref.openQuantitySelector,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    dragScale = _ref.dragScale;
+    dragScale = _ref.dragScale,
+    isSelectingShortcut = _ref.isSelectingShortcut;
   var _useState = useState(false),
     isTooltipVisible = _useState[0],
     setTooltipVisible = _useState[1];
@@ -33790,6 +33883,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     });
     setIsFocused(false);
     if (item) {
+      console.log(item);
       setContextActions(generateContextMenu(item, containerType));
     }
   }, [item]);
@@ -33921,12 +34015,14 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         bubbles: true
       });
       (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
-    }
+    },
+    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool)
   }, React.createElement(Draggable, {
+    axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
     onStop: function onStop(e, data) {
-      if (wasDragged && item) {
+      if (wasDragged && item && !isSelectingShortcut) {
         var _e$target;
         //@ts-ignore
         var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
@@ -33964,12 +34060,12 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
           }
         }, 100);
       } else if (item) {
-        if (!isContextMenuDisabled) setIsContextMenuVisible(!isContextMenuVisible);
+        if (!isContextMenuDisabled && !isSelectingShortcut) setIsContextMenuVisible(!isContextMenuVisible);
         onClick(item.type, containerType, item);
       }
     },
     onStart: function onStart() {
-      if (!item) {
+      if (!item || isSelectingShortcut) {
         return;
       }
       if (onDragStart) {
@@ -34031,7 +34127,7 @@ var rarityColor = function rarityColor(item) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;"], function (_ref2) {
+})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);
 }, function (_ref3) {
@@ -34040,6 +34136,9 @@ var Container$a = /*#__PURE__*/styled.div.withConfig({
 }, function (_ref4) {
   var item = _ref4.item;
   return "0 0 4px 3px " + rarityColor(item);
+}, function (_ref5) {
+  var isSelectingShortcut = _ref5.isSelectingShortcut;
+  return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
@@ -34165,8 +34264,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
         onClose();
       }
     },
-    width: "330px",
-    cancelDrag: ".item-container-body",
+    width: "400px",
+    cancelDrag: ".item-container-body, #shortcuts_list",
     onPositionChange: function onPositionChange(_ref2) {
       var x = _ref2.x,
         y = _ref2.y;
@@ -34338,6 +34437,72 @@ var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
 
+var ShortcutsSetter = function ShortcutsSetter(_ref) {
+  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
+    settingShortcutIndex = _ref.settingShortcutIndex,
+    shortcuts = _ref.shortcuts,
+    removeShortcut = _ref.removeShortcut,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
+  var getContent = function getContent(index) {
+    var _shortcuts$index, _shortcuts$index3;
+    if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === ShortcutType.Item) {
+      var _shortcuts$index2;
+      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
+      if (!_payload) return null;
+      return React.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: getItemTextureKeyPath({
+          key: _payload.texturePath,
+          texturePath: _payload.texturePath,
+          stackQty: _payload.stackQty || 1
+        }, atlasJSON),
+        width: 32,
+        height: 32,
+        imgScale: 1.6,
+        imgStyle: {
+          left: '5px'
+        }
+      });
+    }
+    var payload = (_shortcuts$index3 = shortcuts[index]) == null ? void 0 : _shortcuts$index3.payload;
+    return React.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
+      return word[0];
+    }));
+  };
+  return React.createElement(Container$b, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List$1, {
+    id: "shortcuts_list"
+  }, Array.from({
+    length: 6
+  }).map(function (_, i) {
+    return React.createElement(Shortcut, {
+      key: i,
+      onClick: function onClick() {
+        removeShortcut(i);
+        if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i
+    }, getContent(i));
+  })));
+};
+var Container$b = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__Container",
+  componentId: "sc-xuouuf-0"
+})(["p{margin:0;margin-left:0.5rem;}"]);
+var Shortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ShortcutsSetter__Shortcut",
+  componentId: "sc-xuouuf-1"
+})(["width:2.6rem;height:2.6rem;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;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
+  var isBeingSet = _ref2.isBeingSet;
+  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
+}, uiColors.darkGray, uiColors.gray);
+var List$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__List",
+  componentId: "sc-xuouuf-2"
+})(["width:100%;display:flex;align-items:center;gap:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;box-sizing:border-box;margin:0 !important;"]);
+
 var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
@@ -34356,7 +34521,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    dragScale = _ref.dragScale;
+    dragScale = _ref.dragScale,
+    shortcuts = _ref.shortcuts,
+    setItemShortcut = _ref.setItemShortcut,
+    removeShortcut = _ref.removeShortcut;
   var _useState = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -34364,6 +34532,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }),
     quantitySelect = _useState[0],
     setQuantitySelect = _useState[1];
+  var _useState2 = useState(-1),
+    settingShortcutIndex = _useState2[0],
+    setSettingShortcutIndex = _useState2[1];
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -34377,8 +34548,13 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onMouseOver: function onMouseOver(event, slotIndex, item) {
           if (_onMouseOver) _onMouseOver(event, slotIndex, item);
         },
-        onClick: function onClick(ItemType, ContainerType, item) {
-          if (onItemClick) onItemClick(item, ItemType, ContainerType);
+        onClick: function onClick(itemType, containerType, item) {
+          if (settingShortcutIndex !== -1) {
+            setSettingShortcutIndex(-1);
+            if (itemType === ItemType.Consumable || itemType === ItemType.Tool) {
+              setItemShortcut == null ? void 0 : setItemShortcut(item.key, settingShortcutIndex);
+            }
+          } else if (onItemClick) onItemClick(item, itemType, containerType);
         },
         onSelected: function onSelected(optionId, item) {
           if (_onSelected) _onSelected(optionId, item);
@@ -34406,7 +34582,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
           if (_onOutsideDrop) _onOutsideDrop(item, position);
         },
         atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON
+        atlasJSON: atlasJSON,
+        isSelectingShortcut: settingShortcutIndex !== -1
       }));
     }
     return slots;
@@ -34415,7 +34592,14 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     title: itemContainer.name || 'Container',
     onClose: onClose,
     initialPosition: initialPosition
-  }, React.createElement(ItemsContainer, {
+  }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
+    setSettingShortcutIndex: setSettingShortcutIndex,
+    settingShortcutIndex: settingShortcutIndex,
+    shortcuts: shortcuts,
+    removeShortcut: removeShortcut,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React.createElement(ItemsContainer, {
     className: "item-container-body"
   }, onRenderSlots())), quantitySelect.isOpen && React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
@@ -34440,7 +34624,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;"]);
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
@@ -34537,7 +34721,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$b, {
+  return React.createElement(Container$c, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -34554,7 +34738,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -34608,7 +34792,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$c, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$d, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -34650,7 +34834,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$7
   }))), ")"));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -34854,7 +35038,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$d, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$e, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -34864,7 +35048,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -34910,7 +35094,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$e, {
+  return React.createElement(Container$f, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -34939,7 +35123,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -35162,7 +35346,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$f, {
+  return React.createElement(Container$g, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -35171,7 +35355,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35399,7 +35583,7 @@ var Spell = function Spell(_ref) {
     isSettingShortcut = _ref.isSettingShortcut,
     minMagicLevelRequired = _ref.minMagicLevelRequired;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React.createElement(Container$g, {
+  return React.createElement(Container$h, {
     disabled: disabled,
     onClick: onClick == null ? void 0 : onClick.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
@@ -35412,7 +35596,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost)));
 };
-var Container$g = /*#__PURE__*/styled.button.withConfig({
+var Container$h = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;height:5rem;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -35448,43 +35632,6 @@ var Overlay = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
 
-var SpellbookShortcuts = function SpellbookShortcuts(_ref) {
-  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
-    settingShortcutIndex = _ref.settingShortcutIndex,
-    shortcuts = _ref.shortcuts,
-    removeShortcut = _ref.removeShortcut;
-  return React.createElement(List$1, {
-    id: "shortcuts_list"
-  }, "Spells shortcuts:", Array.from({
-    length: 4
-  }).map(function (_, i) {
-    var _shortcuts$i2;
-    return React.createElement(SpellShortcut$1, {
-      key: i,
-      onClick: function onClick() {
-        var _shortcuts$i;
-        removeShortcut(i);
-        if (!((_shortcuts$i = shortcuts[i]) != null && _shortcuts$i.key)) setSettingShortcutIndex(i);
-      },
-      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
-      isBeingSet: settingShortcutIndex === i
-    }, React.createElement("span", null, (_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.magicWords.split(' ').map(function (word) {
-      return word[0];
-    })));
-  }));
-};
-var SpellShortcut$1 = /*#__PURE__*/styled.button.withConfig({
-  displayName: "SpellbookShortcuts__SpellShortcut",
-  componentId: "sc-fr4a0d-0"
-})(["width:2.6rem;height:2.6rem;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;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
-  var isBeingSet = _ref2.isBeingSet;
-  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
-}, uiColors.darkGray, uiColors.gray);
-var List$1 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "SpellbookShortcuts__List",
-  componentId: "sc-fr4a0d-1"
-})(["width:100%;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;padding:0.5rem;box-sizing:border-box;margin:0 !important;"]);
-
 var Spellbook = function Spellbook(_ref) {
   var onClose = _ref.onClose,
     onInputFocus = _ref.onInputFocus,
@@ -35494,8 +35641,10 @@ var Spellbook = function Spellbook(_ref) {
     mana = _ref.mana,
     onSpellClick = _ref.onSpellClick,
     setSpellShortcut = _ref.setSpellShortcut,
-    spellShortcuts = _ref.spellShortcuts,
-    removeSpellShortcut = _ref.removeSpellShortcut;
+    shortcuts = _ref.shortcuts,
+    removeShortcut = _ref.removeShortcut,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON;
   var _useState = useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -35532,11 +35681,13 @@ var Spellbook = function Spellbook(_ref) {
     width: "inherit",
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell"
-  }, React.createElement(Container$h, null, React.createElement(Title$6, null, "Learned Spells"), React.createElement(SpellbookShortcuts, {
+  }, React.createElement(Container$i, null, React.createElement(Title$6, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
-    shortcuts: spellShortcuts,
-    removeShortcut: removeSpellShortcut
+    shortcuts: shortcuts,
+    removeShortcut: removeShortcut,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
   }), React.createElement(Input, {
     placeholder: "Search for spell",
     value: search,
@@ -35562,7 +35713,7 @@ var Title$6 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -35795,14 +35946,16 @@ var TradingMenu = function TradingMenu(_ref) {
       if (onClose) onClose();
     },
     width: "600px",
-    cancelDrag: ".equipment-container-body .arrow-selector"
+    cancelDrag: "#TraderContainer"
   }, React.createElement(React.Fragment, null, React.createElement("div", {
     style: {
       width: '100%'
     }
   }, React.createElement(Title$7, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
-  })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
+  })), React.createElement(TradingComponentScrollWrapper, {
+    id: "TraderContainer"
+  }, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
     return React.createElement(ItemWrapper$1, {
       key: tradeItem.key + "_" + index
@@ -35860,11 +36013,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$i, {
+  return React.createElement(Container$j, {
     maxLines: maxLines
   }, children);
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -35927,7 +36080,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$j, null, React.createElement(DynamicText, {
+  return React.createElement(Container$k, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -35945,7 +36098,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -35987,7 +36140,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
     src: imagePath || img$6
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$k, null, React.createElement(TextContainer$2, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$l, null, React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
@@ -36001,7 +36154,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$6
   })))));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -36085,5 +36238,5 @@ var DialogContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-u6oe75-1"
 })(["display:flex;justify-content:center;padding-top:200px;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, QuickSpells, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpellShortcut, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, ShortcutType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map