@rpg-engine/long-bow 0.5.28 → 0.5.30

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane, RxMagnifyingGlass } from 'react-icons/rx';
@@ -13386,6 +13386,21 @@ var Container$7 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};
+
 var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
   var isFractionalStackQty = stackQty % 1 !== 0;
   var isLargerThan999 = stackQty > 999;
@@ -13430,25 +13445,25 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
     atlasIMG = _ref.atlasIMG,
     slotSpriteMask = _ref.slotSpriteMask,
     item = _ref.item;
-  var renderItem = function renderItem(itemToRender) {
-    var _itemToRender$stackQt;
-    if (!(itemToRender != null && itemToRender.texturePath)) {
+  var renderItem = function renderItem(item) {
+    var _item$stackQty;
+    if (!(item != null && item.texturePath)) {
       return null;
     }
     return React.createElement(ErrorBoundary, {
-      key: itemToRender._id
+      key: item._id
     }, React.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       spriteKey: getItemTextureKeyPath({
-        key: itemToRender.texturePath,
-        texturePath: itemToRender.texturePath,
-        stackQty: itemToRender.stackQty || 1,
-        isStackable: itemToRender.isStackable
+        key: item.texturePath,
+        texturePath: item.texturePath,
+        stackQty: item.stackQty || 1,
+        isStackable: item.isStackable
       }, atlasJSON),
       imgScale: 3,
       imgClassname: "sprite-from-atlas-img--item"
-    }), onRenderStackInfo(itemToRender._id, (_itemToRender$stackQt = itemToRender.stackQty) != null ? _itemToRender$stackQt : 0));
+    }), onRenderStackInfo(item._id, (_item$stackQty = item.stackQty) != null ? _item$stackQty : 0));
   };
   var renderEquipment = function renderEquipment(itemToRender) {
     var _itemToRender$allowed;
@@ -13881,6 +13896,86 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       onDragEnd == null ? void 0 : onDragEnd(quantity);
     }
   };
+  var onDraggableStop = function onDraggableStop(e, data) {
+    setDraggingItem(null);
+    var target = e.target;
+    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
+      var index = parseInt(target.id.split('_')[1]);
+      if (!isNaN(index)) {
+        setItemShortcut(item, index);
+      }
+    }
+    if (wasDragged && item && !isSelectingShortcut) {
+      var _e$target;
+      //@ts-ignore
+      var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
+      var isOutsideDrop = classes.some(function (elm) {
+        return elm.includes('rpgui-content');
+      }) || classes.length === 0;
+      if (isOutsideDrop) {
+        setDropPosition({
+          x: data.x,
+          y: data.y
+        });
+      }
+      setWasDragged(false);
+      var _target = dragContainer.current;
+      if (!_target || !wasDragged) return;
+      var style = window.getComputedStyle(_target);
+      var matrix = new DOMMatrixReadOnly(style.transform);
+      var x = matrix.m41;
+      var y = matrix.m42;
+      setDragPosition({
+        x: x,
+        y: y
+      });
+      setTimeout(function () {
+        if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
+          if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
+        } else {
+          resetItem();
+          setIsFocused(false);
+          setDragPosition({
+            x: 0,
+            y: 0
+          });
+        }
+      }, 50);
+    } else if (item) {
+      var isTouch = false;
+      if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
+        isTouch = true;
+        setIsTooltipMobileVisible(true);
+      }
+      if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
+        setIsContextMenuVisible(!isContextMenuVisible);
+        var event = e;
+        if (event.clientX && event.clientY) {
+          setContextMenuPosition({
+            x: event.clientX - 10,
+            y: event.clientY - 5
+          });
+        }
+      }
+      onPointerDown(item.type, containerType != null ? containerType : null, item);
+    }
+  };
+  var onDraggableStart = function onDraggableStart() {
+    if (!item || isSelectingShortcut) {
+      return;
+    }
+    if (onDragStart && containerType) {
+      setDraggingItem(item);
+      onDragStart(item, slotIndex, containerType);
+    }
+  };
+  var onDraggableProgress = function onDraggableProgress(_e, data) {
+    if (Math.abs(data.x - dragPosition.x) > 5 || Math.abs(data.y - dragPosition.y) > 5) {
+      setWasDragged(true);
+      setIsFocused(true);
+    }
+  };
   return React.createElement(Container$a, {
     item: item,
     className: "rpgui-icon empty-slot",
@@ -13909,86 +14004,9 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
     disabled: onDragStart === undefined || onDragEnd === undefined,
-    onStop: function onStop(e, data) {
-      setDraggingItem(null);
-      var target = e.target;
-      if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
-        var index = parseInt(target.id.split('_')[1]);
-        if (!isNaN(index)) {
-          setItemShortcut(item, index);
-        }
-      }
-      if (wasDragged && item && !isSelectingShortcut) {
-        var _e$target;
-        //@ts-ignore
-        var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
-        var isOutsideDrop = classes.some(function (elm) {
-          return elm.includes('rpgui-content');
-        }) || classes.length === 0;
-        if (isOutsideDrop) {
-          setDropPosition({
-            x: data.x,
-            y: data.y
-          });
-        }
-        setWasDragged(false);
-        var _target = dragContainer.current;
-        if (!_target || !wasDragged) return;
-        var style = window.getComputedStyle(_target);
-        var matrix = new DOMMatrixReadOnly(style.transform);
-        var x = matrix.m41;
-        var y = matrix.m42;
-        setDragPosition({
-          x: x,
-          y: y
-        });
-        setTimeout(function () {
-          if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
-            if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
-          } else {
-            resetItem();
-            setIsFocused(false);
-            setDragPosition({
-              x: 0,
-              y: 0
-            });
-          }
-        }, 50);
-      } else if (item) {
-        var isTouch = false;
-        if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
-          isTouch = true;
-          setIsTooltipMobileVisible(true);
-        }
-        if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-          setIsContextMenuVisible(!isContextMenuVisible);
-          var event = e;
-          if (event.clientX && event.clientY) {
-            setContextMenuPosition({
-              x: event.clientX - 10,
-              y: event.clientY - 5
-            });
-          }
-        }
-        onPointerDown(item.type, containerType != null ? containerType : null, item);
-      }
-    },
-    onStart: function onStart() {
-      if (!item || isSelectingShortcut) {
-        return;
-      }
-      if (onDragStart && containerType) {
-        setDraggingItem(item);
-        onDragStart(item, slotIndex, containerType);
-      }
-    },
-    onDrag: function onDrag(_e, data) {
-      if (Math.abs(data.x - dragPosition.x) > 5 || Math.abs(data.y - dragPosition.y) > 5) {
-        setWasDragged(true);
-        setIsFocused(true);
-      }
-    },
+    onStop: onDraggableStop,
+    onStart: onDraggableStart,
+    onDrag: onDraggableProgress,
     position: dragPosition,
     cancel: ".empty-slot"
   }, React.createElement(ItemContainer, {
@@ -14034,24 +14052,10 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     setIsTooltipVisible: setTooltipVisible
   }));
 });
-var rarityColor = function rarityColor(item) {
-  switch (item == null ? void 0 : item.rarity) {
-    case ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{display:none;}.sprite-from-atlas-img--item{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) {
+})(["margin:0.1rem;.react-draggable-dragging{opacity:0;}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::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) {
@@ -18682,5 +18686,5 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, rarityColor, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map