@rpg-engine/long-bow 0.5.22 → 0.5.23

package/dist/long-bow.esm.js

@@ -15641,6 +15641,89 @@ var SlotsContainer = function SlotsContainer(_ref) {
   }, children);
 };
 
+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;
+    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,
+          isStackable: payload.isStackable
+        }, atlasJSON),
+        width: 32,
+        height: 32,
+        imgScale: 1.2,
+        imgStyle: {
+          left: '3px'
+        }
+      });
+    }
+    var IMAGE_SIZE = 32;
+    var IMAGE_SCALE = 1;
+    var shortcut = shortcuts[index];
+    if ((shortcut == null ? void 0 : shortcut.type) === ShortcutType.Spell && shortcut.payload) {
+      var _payload$texturePath;
+      var _payload = shortcut.payload; // TypeScript type assertion
+      return React.createElement(SpriteFromAtlas, {
+        atlasIMG: _payload.atlasIMG,
+        atlasJSON: _payload.atlasJSON,
+        spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
+        width: IMAGE_SIZE,
+        height: IMAGE_SIZE,
+        imgScale: IMAGE_SCALE,
+        centered: true,
+        borderRadius: "50%"
+      });
+    }
+    return null;
+  };
+  return React.createElement(Container$j, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+    id: "shortcuts_list"
+  }, Array.from({
+    length: 12
+  }).map(function (_, i) {
+    return React.createElement(Shortcut, {
+      key: i,
+      onPointerDown: function onPointerDown() {
+        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+        removeShortcut(i);
+        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i,
+      id: "shortcutSetter_" + i
+    }, getContent(i));
+  })));
+};
+var Container$j = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__Container",
+  componentId: "sc-xuouuf-0"
+})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
+var Shortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ShortcutsSetter__Shortcut",
+  componentId: "sc-xuouuf-1"
+})(["width:2.4rem;height:2.4rem;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 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__List",
+  componentId: "sc-xuouuf-2"
+})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
+
 var RangeSliderType;
 (function (RangeSliderType) {
   RangeSliderType["Slider"] = "rpgui-slider";
@@ -15796,88 +15879,33 @@ var CloseButton$3 = /*#__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;
-    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,
-          isStackable: payload.isStackable
-        }, atlasJSON),
-        width: 32,
-        height: 32,
-        imgScale: 1.2,
-        imgStyle: {
-          left: '3px'
-        }
+var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
+  var quantitySelect = _ref.quantitySelect,
+    setQuantitySelect = _ref.setQuantitySelect;
+  return React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+    quantity: quantitySelect.maxQuantity,
+    onConfirm: function onConfirm(quantity) {
+      quantitySelect.callback(quantity);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
       });
-    }
-    var IMAGE_SIZE = 32;
-    var IMAGE_SCALE = 1;
-    var shortcut = shortcuts[index];
-    if ((shortcut == null ? void 0 : shortcut.type) === ShortcutType.Spell && shortcut.payload) {
-      var _payload$texturePath;
-      var _payload = shortcut.payload; // TypeScript type assertion
-      return React.createElement(SpriteFromAtlas, {
-        atlasIMG: _payload.atlasIMG,
-        atlasJSON: _payload.atlasJSON,
-        spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
-        width: IMAGE_SIZE,
-        height: IMAGE_SIZE,
-        imgScale: IMAGE_SCALE,
-        centered: true,
-        borderRadius: "50%"
+    },
+    onClose: function onClose() {
+      quantitySelect.callback(-1);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
       });
     }
-    return null;
-  };
-  return React.createElement(Container$j, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
-    id: "shortcuts_list"
-  }, Array.from({
-    length: 12
-  }).map(function (_, i) {
-    return React.createElement(Shortcut, {
-      key: i,
-      onPointerDown: function onPointerDown() {
-        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
-        removeShortcut(i);
-        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
-      },
-      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
-      isBeingSet: settingShortcutIndex === i,
-      id: "shortcutSetter_" + i
-    }, getContent(i));
   })));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__Container",
-  componentId: "sc-xuouuf-0"
-})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
-var Shortcut = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ShortcutsSetter__Shortcut",
-  componentId: "sc-xuouuf-1"
-})(["width:2.4rem;height:2.4rem;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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__List",
-  componentId: "sc-xuouuf-2"
-})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
+var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemQuantitySelectorModal__QuantitySelectorContainer",
+  componentId: "sc-1b8cosc-0"
+})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
 var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
@@ -15993,34 +16021,15 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
-    quantity: quantitySelect.maxQuantity,
-    onConfirm: function onConfirm(quantity) {
-      quantitySelect.callback(quantity);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    },
-    onClose: function onClose() {
-      quantitySelect.callback(-1);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    }
-  }))));
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+    quantitySelect: quantitySelect,
+    setQuantitySelect: setQuantitySelect
+  }));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
 })(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
-var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__QuantitySelectorContainer",
-  componentId: "sc-15y5p9l-1"
-})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,