@rpg-engine/long-bow 0.7.97 → 0.7.99

package/dist/long-bow.esm.js

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, Component, useRef, useCallback, useContext, createContext, useMemo, Fragment } from 'react';
+import React, { useState, useEffect, Component, useRef, useCallback, useContext, createContext, useMemo, memo, Fragment } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 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';
@@ -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,269 @@ 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);
+
+// Memoize the styled components since they don't depend on props that change frequently
+var DPadButton = /*#__PURE__*/memo( /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadButton",
+  componentId: "sc-q1e3gk-0"
+})(["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$size;
+  return ((_props$size = props.size) != null ? _props$size : 100) * 0.05;
+}, function (props) {
+  return props.isPressed ? 0.7 : 1;
+}, function (props) {
+  var _props$size2;
+  return ((_props$size2 = props.size) != null ? _props$size2 : 100) * 0.3;
+}, function (props) {
+  var _props$size3;
+  return ((_props$size3 = props.size) != null ? _props$size3 : 100) * 0.4;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+}, function (props) {
+  var _props$size4;
+  return ((_props$size4 = props.size) != null ? _props$size4 : 100) * 0.4;
+}, function (props) {
+  var _props$size5;
+  return ((_props$size5 = props.size) != null ? _props$size5 : 100) * 0.3;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+}));
+var DPadCenter = /*#__PURE__*/memo( /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadCenter",
+  componentId: "sc-q1e3gk-1"
+})(["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$size6;
+  return ((_props$size6 = props.size) != null ? _props$size6 : 100) * 0.3;
+}, function (props) {
+  var _props$size7;
+  return ((_props$size7 = props.size) != null ? _props$size7 : 100) * 0.3;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'default';
+}, function (props) {
+  var _props$size8;
+  return ((_props$size8 = props.size) != null ? _props$size8 : 100) * 0.08;
+}, function (props) {
+  var _props$size9;
+  return ((_props$size9 = props.size) != null ? _props$size9 : 100) * 0.08;
+}));
+var DPadContainer = /*#__PURE__*/memo( /*#__PURE__*/styled.div.withConfig({
+  displayName: "JoystickDPad__DPadContainer",
+  componentId: "sc-q1e3gk-2"
+})(["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$size10;
+  return (_props$size10 = props.size) != null ? _props$size10 : 100;
+}, function (props) {
+  var _props$size11;
+  return (_props$size11 = props.size) != null ? _props$size11 : 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 JoystickDPad = /*#__PURE__*/memo(function (_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;
+  // Use refs for values that don't need to trigger re-renders
+  var _useState = useState(new Set()),
+    pressedButtons = _useState[0],
+    setPressedButtons = _useState[1];
+  var intervalRef = useRef(null);
+  var activeDirectionRef = useRef(null);
+  var touchStartRef = useRef(null);
+  var isPressedRef = useRef(false);
+  var clearPressInterval = useCallback(function () {
+    if (intervalRef.current !== null) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    activeDirectionRef.current = null;
+  }, []);
+  var clearAllPresses = useCallback(function () {
+    clearPressInterval();
+    setPressedButtons(new Set());
+    activeDirectionRef.current = null;
+    isPressedRef.current = false;
+  }, [clearPressInterval]);
+  var handleDirectionPress = useCallback(function (direction) {
+    if (disabled) return;
+    // Clear any existing presses first
+    clearAllPresses();
+    // Set new direction
+    activeDirectionRef.current = direction;
+    isPressedRef.current = true;
+    setPressedButtons(new Set([direction]));
+    onDirectionPress == null ? void 0 : onDirectionPress(direction);
+    intervalRef.current = window.setInterval(function () {
+      if (activeDirectionRef.current === direction) {
+        onDirectionPress == null ? void 0 : onDirectionPress(direction);
+      } else {
+        clearPressInterval();
+      }
+    }, pressInterval);
+  }, [disabled, onDirectionPress, pressInterval, clearPressInterval, clearAllPresses]);
+  var handleDirectionRelease = useCallback(function (direction) {
+    if (activeDirectionRef.current === direction) {
+      clearAllPresses();
+    }
+  }, [clearAllPresses]);
+  var handleTouchStart = useCallback(function (e, direction) {
+    var touch = e.touches[0];
+    if (touch) {
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+      handleDirectionPress(direction);
+    }
+  }, [handleDirectionPress]);
+  var handleTouchMove = useCallback(function (e) {
+    var touch = e.touches[0];
+    if (!touch || !touchStartRef.current) return;
+    var _touchStartRef$curren = touchStartRef.current,
+      startX = _touchStartRef$curren.x,
+      startY = _touchStartRef$curren.y;
+    var deltaX = touch.clientX - startX;
+    var deltaY = touch.clientY - startY;
+    // Calculate angle and distance
+    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    var angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+    // Only trigger if we've moved enough
+    var threshold = size * 0.15; // Adaptive threshold based on d-pad size
+    if (distance < threshold) return;
+    var newDirection = null;
+    // Determine direction based on angle
+    if (angle > -45 && angle <= 45) newDirection = 'right';else if (angle > 45 && angle <= 135) newDirection = 'down';else if (angle > 135 || angle <= -135) newDirection = 'left';else if (angle > -135 && angle <= -45) newDirection = 'up';
+    if (newDirection && newDirection !== activeDirectionRef.current) {
+      handleDirectionPress(newDirection);
+      // Update touch start to current position to prevent jitter
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+    }
+  }, [handleDirectionPress, size]);
+  // Add a new cleanup function for touch events
+  var cleanupTouchEvents = useCallback(function () {
+    touchStartRef.current = null;
+    if (activeDirectionRef.current) {
+      handleDirectionRelease(activeDirectionRef.current);
+    }
+  }, [handleDirectionRelease]);
+  // Enhance the touch end handler
+  var handleTouchEnd = useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Add touch cancel handler
+  var handleTouchCancel = useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Enhance cleanup effect
+  useEffect(function () {
+    if (disabled) {
+      clearAllPresses();
+    }
+    var handleBlur = function handleBlur() {
+      clearAllPresses();
+    };
+    var handleVisibilityChange = function handleVisibilityChange() {
+      if (document.hidden) {
+        clearAllPresses();
+      }
+    };
+    var handlePointerUp = function handlePointerUp() {
+      // Global pointer up as fallback for stuck buttons
+      if (isPressedRef.current) {
+        clearAllPresses();
+      }
+    };
+    window.addEventListener('blur', handleBlur);
+    window.addEventListener('pointerup', handlePointerUp);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return function () {
+      clearAllPresses();
+      window.removeEventListener('blur', handleBlur);
+      window.removeEventListener('pointerup', handlePointerUp);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [disabled, clearAllPresses]);
+  // Memoize the preventDefault handler
+  var preventDefault = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  // Memoize button props to prevent unnecessary re-renders
+  var buttonProps = useCallback(function (direction) {
+    return {
+      onMouseDown: function onMouseDown() {
+        return handleDirectionPress(direction);
+      },
+      onMouseUp: function onMouseUp() {
+        return handleDirectionRelease(direction);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleDirectionRelease(direction);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return handleTouchStart(e, direction);
+      },
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onContextMenu: preventDefault,
+      size: size,
+      isPressed: pressedButtons.has(direction),
+      disabled: disabled
+    };
+  }, [handleDirectionPress, handleDirectionRelease, handleTouchStart, handleTouchMove, handleTouchEnd, preventDefault, size, pressedButtons, disabled]);
+  return React.createElement(DPadContainer, {
+    opacity: opacity,
+    showBackground: showBackground,
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault,
+    onTouchCancel: handleTouchCancel
+  }, React.createElement(DPadButton, Object.assign({
+    className: "up"
+  }, buttonProps('up'))), React.createElement(DPadButton, Object.assign({
+    className: "right"
+  }, buttonProps('right'))), React.createElement(DPadButton, Object.assign({
+    className: "down"
+  }, buttonProps('down'))), React.createElement(DPadButton, Object.assign({
+    className: "left"
+  }, buttonProps('left'))), React.createElement(DPadCenter, {
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault
+  }));
+});
+JoystickDPad.displayName = 'JoystickDPad';
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
@@ -30450,7 +30715,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 +34567,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