@rpg-engine/long-bow 0.7.98 → 0.8.0

package/dist/components/DPad/JoystickDPad.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface IDPadOptions {
     /** Opacity of the entire component (0-1) */
     opacity?: number;
@@ -12,10 +12,12 @@ interface IDPadOptions {
 interface IDPadProps {
     /** Callback fired when a direction is pressed */
     onDirectionPress?: (direction: 'up' | 'down' | 'left' | 'right') => void;
+    /** Callback fired when a direction is released */
+    onDirectionRelease?: (direction: 'up' | 'down' | 'left' | 'right') => void;
     /** Whether the component is disabled */
     disabled?: boolean;
     /** Additional options for customizing the D-pad */
     options?: IDPadOptions;
 }
-export declare const JoystickDPad: ({ onDirectionPress, disabled, options, }: IDPadProps) => JSX.Element;
+export declare const JoystickDPad: React.MemoExoticComponent<({ onDirectionPress, onDirectionRelease, disabled, options, }: IDPadProps) => JSX.Element>;
 export {};

package/dist/long-bow.cjs.development.js

@@ -29084,8 +29084,80 @@ var EmptyState = /*#__PURE__*/styled__default.div.withConfig({
   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) {
+// Memoize the styled components since they don't depend on props that change frequently
+var DPadButton = /*#__PURE__*/React.memo( /*#__PURE__*/styled__default.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__*/React.memo( /*#__PURE__*/styled__default.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__*/React.memo( /*#__PURE__*/styled__default.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__*/React.memo(function (_ref) {
   var onDirectionPress = _ref.onDirectionPress,
+    onDirectionRelease = _ref.onDirectionRelease,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$options = _ref.options,
@@ -29098,222 +29170,182 @@ var JoystickDPad = function JoystickDPad(_ref) {
     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 = React.useState(new Set()),
     pressedButtons = _useState[0],
     setPressedButtons = _useState[1];
   var intervalRef = React.useRef(null);
   var activeDirectionRef = React.useRef(null);
+  var touchStartRef = React.useRef(null);
+  var isPressedRef = React.useRef(false);
   var clearPressInterval = React.useCallback(function () {
-    if (intervalRef.current) {
+    if (intervalRef.current !== null) {
       window.clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
     activeDirectionRef.current = null;
   }, []);
+  var clearAllPresses = React.useCallback(function () {
+    if (activeDirectionRef.current && onDirectionRelease) {
+      onDirectionRelease(activeDirectionRef.current);
+    }
+    clearPressInterval();
+    setPressedButtons(new Set());
+    activeDirectionRef.current = null;
+    isPressedRef.current = false;
+  }, [clearPressInterval, onDirectionRelease]);
   var handleDirectionPress = React.useCallback(function (direction) {
     if (disabled) return;
-    // Clear any existing interval
-    clearPressInterval();
-    // Set the active direction
+    // Clear any existing presses first
+    clearAllPresses();
+    // Set new direction
     activeDirectionRef.current = direction;
-    setPressedButtons(function (prev) {
-      return new Set(prev).add(direction);
-    });
-    // Trigger first press immediately
+    isPressedRef.current = true;
+    setPressedButtons(new Set([direction]));
     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);
+      } else {
+        clearPressInterval();
       }
     }, pressInterval);
-  }, [disabled, onDirectionPress, pressInterval, clearPressInterval]);
+  }, [disabled, onDirectionPress, pressInterval, clearPressInterval, clearAllPresses]);
   var handleDirectionRelease = React.useCallback(function (direction) {
-    setPressedButtons(function (prev) {
-      var next = new Set(prev);
-      next["delete"](direction);
-      return next;
-    });
     if (activeDirectionRef.current === direction) {
-      clearPressInterval();
+      clearAllPresses();
+    }
+  }, [clearAllPresses]);
+  var handleTouchStart = React.useCallback(function (e, direction) {
+    var touch = e.touches[0];
+    if (touch) {
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+      handleDirectionPress(direction);
     }
-  }, [clearPressInterval]);
-  // Cleanup on unmount
+  }, [handleDirectionPress]);
+  var handleTouchMove = React.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 = React.useCallback(function () {
+    touchStartRef.current = null;
+    if (activeDirectionRef.current) {
+      handleDirectionRelease(activeDirectionRef.current);
+    }
+  }, [handleDirectionRelease]);
+  // Enhance the touch end handler
+  var handleTouchEnd = React.useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Add touch cancel handler
+  var handleTouchCancel = React.useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Enhance cleanup effect
   React.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 () {
-      clearPressInterval();
+      clearAllPresses();
+      window.removeEventListener('blur', handleBlur);
+      window.removeEventListener('pointerup', handlePointerUp);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, [clearPressInterval]);
-  var preventDefault = function preventDefault(e) {
+  }, [disabled, clearAllPresses]);
+  // Memoize the preventDefault handler
+  var preventDefault = React.useCallback(function (e) {
     e.preventDefault();
     e.stopPropagation();
-  };
+  }, []);
+  // Memoize button props to prevent unnecessary re-renders
+  var buttonProps = React.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__default.createElement(DPadContainer, {
     opacity: opacity,
     showBackground: showBackground,
     size: size,
     disabled: disabled,
-    onContextMenu: preventDefault
-  }, React__default.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__default.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__default.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__default.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__default.createElement(DPadCenter, {
+    onTouchCancel: handleTouchCancel
+  }, React__default.createElement(DPadButton, Object.assign({
+    className: "up"
+  }, buttonProps('up'))), React__default.createElement(DPadButton, Object.assign({
+    className: "right"
+  }, buttonProps('right'))), React__default.createElement(DPadButton, Object.assign({
+    className: "down"
+  }, buttonProps('down'))), React__default.createElement(DPadButton, Object.assign({
+    className: "left"
+  }, buttonProps('left'))), React__default.createElement(DPadCenter, {
     size: size,
     disabled: disabled,
     onContextMenu: preventDefault
   }));
-};
-var DPadContainer = /*#__PURE__*/styled__default.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__default.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__default.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;
 });
+JoystickDPad.displayName = 'JoystickDPad';
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,