@rpg-engine/long-bow 0.7.98 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.98",
+  "version": "0.8.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DPad/JoystickDPad.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 interface IDPadContainerProps {
@@ -8,6 +8,12 @@ interface IDPadContainerProps {
   disabled?: boolean;
 }
 
+interface IDPadButtonProps {
+  size?: number;
+  isPressed?: boolean;
+  disabled?: boolean;
+}
+
 interface IDPadOptions {
   /** Opacity of the entire component (0-1) */
   opacity?: number;
@@ -22,179 +28,16 @@ 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 const JoystickDPad = ({
-  onDirectionPress,
-  disabled = false,
-  options = {},
-}: IDPadProps): JSX.Element => {
-  const {
-    opacity = 1,
-    showBackground = false,
-    size = 100,
-    pressInterval = 500,
-  } = options;
-
-  const [pressedButtons, setPressedButtons] = useState<Set<string>>(new Set());
-  const intervalRef = useRef<number | null>(null);
-  const activeDirectionRef = useRef<'up' | 'down' | 'left' | 'right' | null>(
-    null
-  );
-
-  const clearPressInterval = useCallback(() => {
-    if (intervalRef.current) {
-      window.clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    activeDirectionRef.current = null;
-  }, []);
-
-  const handleDirectionPress = useCallback(
-    (direction: 'up' | 'down' | 'left' | 'right') => {
-      if (disabled) return;
-
-      // Clear any existing interval
-      clearPressInterval();
-
-      // Set the active direction
-      activeDirectionRef.current = direction;
-      setPressedButtons(prev => new Set(prev).add(direction));
-
-      // Trigger first press immediately
-      onDirectionPress?.(direction);
-
-      // Set up the interval for continuous press
-      intervalRef.current = window.setInterval(() => {
-        if (activeDirectionRef.current === direction) {
-          onDirectionPress?.(direction);
-        }
-      }, pressInterval);
-    },
-    [disabled, onDirectionPress, pressInterval, clearPressInterval]
-  );
-
-  const handleDirectionRelease = useCallback(
-    (direction: 'up' | 'down' | 'left' | 'right') => {
-      setPressedButtons(prev => {
-        const next = new Set(prev);
-        next.delete(direction);
-        return next;
-      });
-
-      if (activeDirectionRef.current === direction) {
-        clearPressInterval();
-      }
-    },
-    [clearPressInterval]
-  );
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      clearPressInterval();
-    };
-  }, [clearPressInterval]);
-
-  const preventDefault = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  return (
-    <DPadContainer
-      opacity={opacity}
-      showBackground={showBackground}
-      size={size}
-      disabled={disabled}
-      onContextMenu={preventDefault}
-    >
-      <DPadButton
-        className="up"
-        onMouseDown={() => handleDirectionPress('up')}
-        onMouseUp={() => handleDirectionRelease('up')}
-        onMouseLeave={() => handleDirectionRelease('up')}
-        onTouchStart={() => handleDirectionPress('up')}
-        onTouchEnd={() => handleDirectionRelease('up')}
-        onContextMenu={preventDefault}
-        size={size}
-        isPressed={pressedButtons.has('up')}
-        disabled={disabled}
-      />
-      <DPadButton
-        className="right"
-        onMouseDown={() => handleDirectionPress('right')}
-        onMouseUp={() => handleDirectionRelease('right')}
-        onMouseLeave={() => handleDirectionRelease('right')}
-        onTouchStart={() => handleDirectionPress('right')}
-        onTouchEnd={() => handleDirectionRelease('right')}
-        onContextMenu={preventDefault}
-        size={size}
-        isPressed={pressedButtons.has('right')}
-        disabled={disabled}
-      />
-      <DPadButton
-        className="down"
-        onMouseDown={() => handleDirectionPress('down')}
-        onMouseUp={() => handleDirectionRelease('down')}
-        onMouseLeave={() => handleDirectionRelease('down')}
-        onTouchStart={() => handleDirectionPress('down')}
-        onTouchEnd={() => handleDirectionRelease('down')}
-        onContextMenu={preventDefault}
-        size={size}
-        isPressed={pressedButtons.has('down')}
-        disabled={disabled}
-      />
-      <DPadButton
-        className="left"
-        onMouseDown={() => handleDirectionPress('left')}
-        onMouseUp={() => handleDirectionRelease('left')}
-        onMouseLeave={() => handleDirectionRelease('left')}
-        onTouchStart={() => handleDirectionPress('left')}
-        onTouchEnd={() => handleDirectionRelease('left')}
-        onContextMenu={preventDefault}
-        size={size}
-        isPressed={pressedButtons.has('left')}
-        disabled={disabled}
-      />
-      <DPadCenter
-        size={size}
-        disabled={disabled}
-        onContextMenu={preventDefault}
-      />
-    </DPadContainer>
-  );
-};
-
-const DPadContainer = styled.div<IDPadContainerProps>`
-  width: ${props => props.size ?? 100}px;
-  height: ${props => props.size ?? 100}px;
-  position: relative;
-  background: ${props => (props.showBackground ? '#b8b8b8' : 'transparent')};
-  border-radius: 50%;
-  box-shadow: ${props =>
-    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'};
-  opacity: ${props => (props.disabled ? 0.5 : props.opacity ?? 1)};
-  user-select: none;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'default')};
-  transition: opacity 0.2s ease;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-`;
-
-interface IDPadButtonProps {
-  size?: number;
-  isPressed?: boolean;
-  disabled?: boolean;
-}
-
-const DPadButton = styled.div<IDPadButtonProps>`
+// Memoize the styled components since they don't depend on props that change frequently
+const DPadButton = memo(styled.div<IDPadButtonProps>`
   position: absolute;
   background: ${props => (props.isPressed ? '#363636' : '#424242')};
   box-shadow: ${props =>
@@ -285,9 +128,9 @@ const DPadButton = styled.div<IDPadButtonProps>`
       transform: translate(50%, -50%);
     }
   }
-`;
+`);
 
-const DPadCenter = styled.div<IDPadButtonProps>`
+const DPadCenter = memo(styled.div<IDPadButtonProps>`
   position: absolute;
   width: ${props => (props.size ?? 100) * 0.3}px;
   height: ${props => (props.size ?? 100) * 0.3}px;
@@ -315,4 +158,266 @@ const DPadCenter = styled.div<IDPadButtonProps>`
     pointer-events: none;
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
   }
-`;
+`);
+
+const DPadContainer = memo(styled.div<IDPadContainerProps>`
+  width: ${props => props.size ?? 100}px;
+  height: ${props => props.size ?? 100}px;
+  position: relative;
+  background: ${props => (props.showBackground ? '#b8b8b8' : 'transparent')};
+  border-radius: 50%;
+  box-shadow: ${props =>
+    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'};
+  opacity: ${props => (props.disabled ? 0.5 : props.opacity ?? 1)};
+  user-select: none;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'default')};
+  transition: opacity 0.2s ease;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+`);
+
+export const JoystickDPad = memo(
+  ({
+    onDirectionPress,
+    onDirectionRelease,
+    disabled = false,
+    options = {},
+  }: IDPadProps): JSX.Element => {
+    const {
+      opacity = 1,
+      showBackground = false,
+      size = 100,
+      pressInterval = 500,
+    } = options;
+
+    // Use refs for values that don't need to trigger re-renders
+    const [pressedButtons, setPressedButtons] = useState<Set<string>>(
+      new Set()
+    );
+    const intervalRef = useRef<number | null>(null);
+    const activeDirectionRef = useRef<'up' | 'down' | 'left' | 'right' | null>(
+      null
+    );
+    const touchStartRef = useRef<{ x: number; y: number } | null>(null);
+    const isPressedRef = useRef<boolean>(false);
+
+    const clearPressInterval = useCallback(() => {
+      if (intervalRef.current !== null) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      activeDirectionRef.current = null;
+    }, []);
+
+    const clearAllPresses = useCallback(() => {
+      if (activeDirectionRef.current && onDirectionRelease) {
+        onDirectionRelease(activeDirectionRef.current);
+      }
+      clearPressInterval();
+      setPressedButtons(new Set());
+      activeDirectionRef.current = null;
+      isPressedRef.current = false;
+    }, [clearPressInterval, onDirectionRelease]);
+
+    const handleDirectionPress = useCallback(
+      (direction: 'up' | 'down' | 'left' | 'right') => {
+        if (disabled) return;
+
+        // Clear any existing presses first
+        clearAllPresses();
+
+        // Set new direction
+        activeDirectionRef.current = direction;
+        isPressedRef.current = true;
+        setPressedButtons(new Set([direction]));
+        onDirectionPress?.(direction);
+
+        intervalRef.current = window.setInterval(() => {
+          if (activeDirectionRef.current === direction) {
+            onDirectionPress?.(direction);
+          } else {
+            clearPressInterval();
+          }
+        }, pressInterval);
+      },
+      [
+        disabled,
+        onDirectionPress,
+        pressInterval,
+        clearPressInterval,
+        clearAllPresses,
+      ]
+    );
+
+    const handleDirectionRelease = useCallback(
+      (direction: 'up' | 'down' | 'left' | 'right') => {
+        if (activeDirectionRef.current === direction) {
+          clearAllPresses();
+        }
+      },
+      [clearAllPresses]
+    );
+
+    const handleTouchStart = useCallback(
+      (e: React.TouchEvent, direction: 'up' | 'down' | 'left' | 'right') => {
+        const touch = e.touches[0];
+        if (touch) {
+          touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+          handleDirectionPress(direction);
+        }
+      },
+      [handleDirectionPress]
+    );
+
+    const handleTouchMove = useCallback(
+      (e: React.TouchEvent) => {
+        const touch = e.touches[0];
+        if (!touch || !touchStartRef.current) return;
+
+        const { x: startX, y: startY } = touchStartRef.current;
+        const deltaX = touch.clientX - startX;
+        const deltaY = touch.clientY - startY;
+
+        // Calculate angle and distance
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+
+        // Only trigger if we've moved enough
+        const threshold = size * 0.15; // Adaptive threshold based on d-pad size
+        if (distance < threshold) return;
+
+        let newDirection: 'up' | 'down' | 'left' | 'right' | null = 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
+    const cleanupTouchEvents = useCallback(() => {
+      touchStartRef.current = null;
+      if (activeDirectionRef.current) {
+        handleDirectionRelease(activeDirectionRef.current);
+      }
+    }, [handleDirectionRelease]);
+
+    // Enhance the touch end handler
+    const handleTouchEnd = useCallback(() => {
+      cleanupTouchEvents();
+    }, [cleanupTouchEvents]);
+
+    // Add touch cancel handler
+    const handleTouchCancel = useCallback(() => {
+      cleanupTouchEvents();
+    }, [cleanupTouchEvents]);
+
+    // Enhance cleanup effect
+    useEffect(() => {
+      if (disabled) {
+        clearAllPresses();
+      }
+
+      const handleBlur = () => {
+        clearAllPresses();
+      };
+
+      const handleVisibilityChange = () => {
+        if (document.hidden) {
+          clearAllPresses();
+        }
+      };
+
+      const 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 () => {
+        clearAllPresses();
+        window.removeEventListener('blur', handleBlur);
+        window.removeEventListener('pointerup', handlePointerUp);
+        document.removeEventListener(
+          'visibilitychange',
+          handleVisibilityChange
+        );
+      };
+    }, [disabled, clearAllPresses]);
+
+    // Memoize the preventDefault handler
+    const preventDefault = useCallback(
+      (e: React.MouseEvent | React.TouchEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      []
+    );
+
+    // Memoize button props to prevent unnecessary re-renders
+    const buttonProps = useCallback(
+      (direction: 'up' | 'down' | 'left' | 'right') => ({
+        onMouseDown: () => handleDirectionPress(direction),
+        onMouseUp: () => handleDirectionRelease(direction),
+        onMouseLeave: () => handleDirectionRelease(direction),
+        onTouchStart: (e: React.TouchEvent) => handleTouchStart(e, direction),
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onContextMenu: preventDefault,
+        size,
+        isPressed: pressedButtons.has(direction),
+        disabled,
+      }),
+      [
+        handleDirectionPress,
+        handleDirectionRelease,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd,
+        preventDefault,
+        size,
+        pressedButtons,
+        disabled,
+      ]
+    );
+
+    return (
+      <DPadContainer
+        opacity={opacity}
+        showBackground={showBackground}
+        size={size}
+        disabled={disabled}
+        onContextMenu={preventDefault}
+        onTouchCancel={handleTouchCancel}
+      >
+        <DPadButton className="up" {...buttonProps('up')} />
+        <DPadButton className="right" {...buttonProps('right')} />
+        <DPadButton className="down" {...buttonProps('down')} />
+        <DPadButton className="left" {...buttonProps('left')} />
+        <DPadCenter
+          size={size}
+          disabled={disabled}
+          onContextMenu={preventDefault}
+        />
+      </DPadContainer>
+    );
+  }
+);
+
+JoystickDPad.displayName = 'JoystickDPad';