@rpg-engine/long-bow 0.7.96 → 0.7.98

package/dist/long-bow.esm.js

@@ -5,7 +5,7 @@ import { v4 } from 'uuid';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaSearch, FaThumbtack, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { FaTimes, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -28618,14 +28618,14 @@ var TooltipContainer = /*#__PURE__*/styled.div.withConfig({
 var MinCraftingRequirementsText = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftingTooltip__MinCraftingRequirementsText",
   componentId: "sc-iqzgok-1"
-})(["font-size:0.55rem;margin:0;margin-bottom:12px;color:", " !important;"], function (_ref) {
+})(["font-size:0.55rem;margin:0;margin-bottom:12px;margin-left:0.5rem;color:", " !important;"], function (_ref) {
   var levelIsOk = _ref.levelIsOk;
   return levelIsOk ? uiColors.lightGreen : uiColors.lightGray;
 });
-var IngredientsTitle = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftingTooltip__IngredientsTitle",
+var TooltipTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__TooltipTitle",
   componentId: "sc-iqzgok-2"
-})(["color:", ";font-size:0.6rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;"], uiColors.yellow);
+})(["color:", ";font-size:0.6rem;margin-bottom:12px;letter-spacing:0.5px;"], uiColors.yellow);
 var Recipe = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftingTooltip__Recipe",
   componentId: "sc-iqzgok-3"
@@ -28651,9 +28651,9 @@ var CraftingTooltip = function CraftingTooltip(_ref3) {
   return React.createElement(TooltipContainer, {
     x: x,
     y: y
-  }, React.createElement(MinCraftingRequirementsText, {
+  }, React.createElement(TooltipTitle, null, "Skill Requirements"), React.createElement(MinCraftingRequirementsText, {
     levelIsOk: levelIsOk
-  }, modifyString("" + ((_recipe$minCraftingRe3 = recipe == null ? void 0 : (_recipe$minCraftingRe4 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe4[0]) != null ? _recipe$minCraftingRe3 : '')), " lvl", ' ', (_recipe$minCraftingRe5 = recipe == null ? void 0 : (_recipe$minCraftingRe6 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe6[1]) != null ? _recipe$minCraftingRe5 : 0, " (", levelInSkill, ")"), React.createElement(IngredientsTitle, null, "Ingredients"), recipe.ingredients.map(function (ingredient, index) {
+  }, modifyString("" + ((_recipe$minCraftingRe3 = recipe == null ? void 0 : (_recipe$minCraftingRe4 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe4[0]) != null ? _recipe$minCraftingRe3 : '')), " lvl", ' ', (_recipe$minCraftingRe5 = recipe == null ? void 0 : (_recipe$minCraftingRe6 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe6[1]) != null ? _recipe$minCraftingRe5 : 0, " (", levelInSkill, ")"), React.createElement(TooltipTitle, null, "Ingredients"), recipe.ingredients.map(function (ingredient, index) {
     var itemQtyInInventory = !inventory ? 0 : countItemFromInventory(ingredient.key, inventory);
     var isQuantityOk = ingredient.qty <= itemQtyInInventory;
     return React.createElement(Recipe, {
@@ -28684,7 +28684,7 @@ var MainContent = /*#__PURE__*/styled.div.withConfig({
 var ItemHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftingRecipe__ItemHeader",
   componentId: "sc-1fe04wz-3"
-})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;label{font-size:0.9rem;font-weight:bold;display:flex;align-items:center;}"]);
+})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;label{font-size:0.8rem;font-weight:bold;display:flex;align-items:center;padding-right:1rem;}"]);
 var CraftingRecipe = function CraftingRecipe(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -28935,7 +28935,7 @@ var CraftBook = function CraftBook(_ref) {
       return setSearchTerm(e.target.value);
     },
     autoFocus: true
-  })), React.createElement(ContentContainer, null, React.createElement(RadioInputScroller, {
+  })), React.createElement(ContentContainer, null, paginatedItems.length > 0 ? React.createElement(RadioInputScroller, {
     className: "inputRadioCraftBook"
   }, paginatedItems == null ? void 0 : paginatedItems.map(function (item) {
     return React.createElement(CraftingRecipeWrapper, {
@@ -28960,7 +28960,9 @@ var CraftBook = function CraftBook(_ref) {
       inventory: inventory,
       skills: skills
     }));
-  }))), totalPages > 1 && React.createElement(PaginationContainer, null, React.createElement(PaginationButton, {
+  })) : React.createElement(EmptyState, null, React.createElement(FaBoxOpen, {
+    size: 48
+  }), React.createElement("p", null, "No craftable items found"))), totalPages > 1 && React.createElement(PaginationContainer, null, React.createElement(PaginationButton, {
     onClick: function onClick() {
       return setCurrentPage(function (prev) {
         return Math.max(1, prev - 1);
@@ -29029,11 +29031,11 @@ var SearchContainer$1 = /*#__PURE__*/styled.div.withConfig({
 var ContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__ContentContainer",
   componentId: "sc-19q95ue-7"
-})(["flex:1;min-height:0;padding:16px;padding-right:0;padding-bottom:0;overflow:hidden;width:100%;"]);
+})(["flex:1;display:flex;flex-direction:column;padding:16px;padding-right:0;padding-bottom:0;width:100%;position:relative;min-height:300px;overflow:hidden;"]);
 var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__RadioInputScroller",
   componentId: "sc-19q95ue-8"
-})(["height:100%;overflow-y:scroll;overflow-x:hidden;padding:8px 16px;padding-right:24px;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;@media (max-width:", "){grid-template-columns:1fr;}"], MOBILE_WIDTH);
+})(["height:100%;min-height:300px;overflow-y:auto;overflow-x:hidden;padding:8px 16px;padding-right:24px;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;@media (max-width:", "){grid-template-columns:1fr;}"], MOBILE_WIDTH);
 var CraftingRecipeWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__CraftingRecipeWrapper",
   componentId: "sc-19q95ue-9"
@@ -29070,6 +29072,241 @@ var PageInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__PageInfo",
   componentId: "sc-19q95ue-14"
 })(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
+var EmptyState = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__EmptyState",
+  componentId: "sc-19q95ue-15"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:", ";width:100%;padding:2rem;svg{font-size:3rem;margin-bottom:1rem;opacity:0.7;}p{font-family:'Press Start 2P',cursive;font-size:0.9rem;margin:0;}"], uiColors.lightGray);
+
+var JoystickDPad = function JoystickDPad(_ref) {
+  var onDirectionPress = _ref.onDirectionPress,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options;
+  var _options$opacity = options.opacity,
+    opacity = _options$opacity === void 0 ? 1 : _options$opacity,
+    _options$showBackgrou = options.showBackground,
+    showBackground = _options$showBackgrou === void 0 ? false : _options$showBackgrou,
+    _options$size = options.size,
+    size = _options$size === void 0 ? 100 : _options$size,
+    _options$pressInterva = options.pressInterval,
+    pressInterval = _options$pressInterva === void 0 ? 500 : _options$pressInterva;
+  var _useState = useState(new Set()),
+    pressedButtons = _useState[0],
+    setPressedButtons = _useState[1];
+  var intervalRef = useRef(null);
+  var activeDirectionRef = useRef(null);
+  var clearPressInterval = useCallback(function () {
+    if (intervalRef.current) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    activeDirectionRef.current = null;
+  }, []);
+  var handleDirectionPress = useCallback(function (direction) {
+    if (disabled) return;
+    // Clear any existing interval
+    clearPressInterval();
+    // Set the active direction
+    activeDirectionRef.current = direction;
+    setPressedButtons(function (prev) {
+      return new Set(prev).add(direction);
+    });
+    // Trigger first press immediately
+    onDirectionPress == null ? void 0 : onDirectionPress(direction);
+    // Set up the interval for continuous press
+    intervalRef.current = window.setInterval(function () {
+      if (activeDirectionRef.current === direction) {
+        onDirectionPress == null ? void 0 : onDirectionPress(direction);
+      }
+    }, pressInterval);
+  }, [disabled, onDirectionPress, pressInterval, clearPressInterval]);
+  var handleDirectionRelease = useCallback(function (direction) {
+    setPressedButtons(function (prev) {
+      var next = new Set(prev);
+      next["delete"](direction);
+      return next;
+    });
+    if (activeDirectionRef.current === direction) {
+      clearPressInterval();
+    }
+  }, [clearPressInterval]);
+  // Cleanup on unmount
+  useEffect(function () {
+    return function () {
+      clearPressInterval();
+    };
+  }, [clearPressInterval]);
+  var preventDefault = function preventDefault(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return React.createElement(DPadContainer, {
+    opacity: opacity,
+    showBackground: showBackground,
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault
+  }, React.createElement(DPadButton, {
+    className: "up",
+    onMouseDown: function onMouseDown() {
+      return handleDirectionPress('up');
+    },
+    onMouseUp: function onMouseUp() {
+      return handleDirectionRelease('up');
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleDirectionRelease('up');
+    },
+    onTouchStart: function onTouchStart() {
+      return handleDirectionPress('up');
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleDirectionRelease('up');
+    },
+    onContextMenu: preventDefault,
+    size: size,
+    isPressed: pressedButtons.has('up'),
+    disabled: disabled
+  }), React.createElement(DPadButton, {
+    className: "right",
+    onMouseDown: function onMouseDown() {
+      return handleDirectionPress('right');
+    },
+    onMouseUp: function onMouseUp() {
+      return handleDirectionRelease('right');
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleDirectionRelease('right');
+    },
+    onTouchStart: function onTouchStart() {
+      return handleDirectionPress('right');
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleDirectionRelease('right');
+    },
+    onContextMenu: preventDefault,
+    size: size,
+    isPressed: pressedButtons.has('right'),
+    disabled: disabled
+  }), React.createElement(DPadButton, {
+    className: "down",
+    onMouseDown: function onMouseDown() {
+      return handleDirectionPress('down');
+    },
+    onMouseUp: function onMouseUp() {
+      return handleDirectionRelease('down');
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleDirectionRelease('down');
+    },
+    onTouchStart: function onTouchStart() {
+      return handleDirectionPress('down');
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleDirectionRelease('down');
+    },
+    onContextMenu: preventDefault,
+    size: size,
+    isPressed: pressedButtons.has('down'),
+    disabled: disabled
+  }), React.createElement(DPadButton, {
+    className: "left",
+    onMouseDown: function onMouseDown() {
+      return handleDirectionPress('left');
+    },
+    onMouseUp: function onMouseUp() {
+      return handleDirectionRelease('left');
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleDirectionRelease('left');
+    },
+    onTouchStart: function onTouchStart() {
+      return handleDirectionPress('left');
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleDirectionRelease('left');
+    },
+    onContextMenu: preventDefault,
+    size: size,
+    isPressed: pressedButtons.has('left'),
+    disabled: disabled
+  }), React.createElement(DPadCenter, {
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault
+  }));
+};
+var DPadContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadContainer",
+  componentId: "sc-q1e3gk-0"
+})(["width:", "px;height:", "px;position:relative;background:", ";border-radius:50%;box-shadow:", ";opacity:", ";user-select:none;cursor:", ";transition:opacity 0.2s ease;touch-action:none;-webkit-tap-highlight-color:transparent;"], function (props) {
+  var _props$size;
+  return (_props$size = props.size) != null ? _props$size : 100;
+}, function (props) {
+  var _props$size2;
+  return (_props$size2 = props.size) != null ? _props$size2 : 100;
+}, function (props) {
+  return props.showBackground ? '#b8b8b8' : 'transparent';
+}, function (props) {
+  return props.showBackground ? 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2)' : 'none';
+}, function (props) {
+  var _props$opacity;
+  return props.disabled ? 0.5 : (_props$opacity = props.opacity) != null ? _props$opacity : 1;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'default';
+});
+var DPadButton = /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadButton",
+  componentId: "sc-q1e3gk-1"
+})(["position:absolute;background:", ";box-shadow:", ";cursor:", ";user-select:none;transition:all 0.08s cubic-bezier(0.4,0,0.2,1);touch-action:none;-webkit-tap-highlight-color:transparent;transform-origin:center center;&:hover:not(:active){@media (hover:hover){filter:", ";}}&::after{content:'';position:absolute;width:0;height:0;border:", "px solid transparent;pointer-events:none;opacity:", ";transition:all 0.08s cubic-bezier(0.4,0,0.2,1);}&.up,&.down{width:", "px;height:", "px;left:50%;transform:translateX(-50%) scale(", ");}&.left,&.right{width:", "px;height:", "px;top:50%;transform:translateY(-50%) scale(", ");}&.up{top:0;border-radius:5px 5px 0 0;&::after{border-bottom-color:#2a2a2a;top:45%;left:50%;transform:translate(-50%,-50%);}}&.down{bottom:0;border-radius:0 0 5px 5px;&::after{border-top-color:#2a2a2a;bottom:45%;left:50%;transform:translate(-50%,50%);}}&.left{left:0;border-radius:5px 0 0 5px;&::after{border-right-color:#2a2a2a;left:45%;top:50%;transform:translate(-50%,-50%);}}&.right{right:0;border-radius:0 5px 5px 0;&::after{border-left-color:#2a2a2a;right:45%;top:50%;transform:translate(50%,-50%);}}"], function (props) {
+  return props.isPressed ? '#363636' : '#424242';
+}, function (props) {
+  return props.isPressed ? 'inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.3)' : 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2)';
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return !props.disabled && !props.isPressed ? 'brightness(1.1)' : 'none';
+}, function (props) {
+  var _props$size3;
+  return ((_props$size3 = props.size) != null ? _props$size3 : 100) * 0.05;
+}, function (props) {
+  return props.isPressed ? 0.7 : 1;
+}, function (props) {
+  var _props$size4;
+  return ((_props$size4 = props.size) != null ? _props$size4 : 100) * 0.3;
+}, function (props) {
+  var _props$size5;
+  return ((_props$size5 = props.size) != null ? _props$size5 : 100) * 0.4;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+}, function (props) {
+  var _props$size6;
+  return ((_props$size6 = props.size) != null ? _props$size6 : 100) * 0.4;
+}, function (props) {
+  var _props$size7;
+  return ((_props$size7 = props.size) != null ? _props$size7 : 100) * 0.3;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+});
+var DPadCenter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadCenter",
+  componentId: "sc-q1e3gk-2"
+})(["position:absolute;width:", "px;height:", "px;background:#424242;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 8px rgba(0,0,0,0.6);border-radius:50%;user-select:none;cursor:", ";touch-action:none;-webkit-tap-highlight-color:transparent;&::after{content:'';position:absolute;width:", "px;height:", "px;background:#2a2a2a;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:inset 0 0 2px rgba(0,0,0,0.8);}"], function (props) {
+  var _props$size8;
+  return ((_props$size8 = props.size) != null ? _props$size8 : 100) * 0.3;
+}, function (props) {
+  var _props$size9;
+  return ((_props$size9 = props.size) != null ? _props$size9 : 100) * 0.3;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'default';
+}, function (props) {
+  var _props$size10;
+  return ((_props$size10 = props.size) != null ? _props$size10 : 100) * 0.08;
+}, function (props) {
+  var _props$size11;
+  return ((_props$size11 = props.size) != null ? _props$size11 : 100) * 0.08;
+});
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
@@ -30450,7 +30687,7 @@ var TabButton = /*#__PURE__*/styled.button.withConfig({
 var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "InternalTabs__ContentWrapper",
   componentId: "sc-ldufv0-3"
-})(["padding:1rem;"]);
+})([""]);
 
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
@@ -34302,5 +34539,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map