react-native-games 1.0.0 → 1.2.0

package/lib/module/games/maze-runner/components/EnhancedBallComponent.js

@@ -1,150 +1 @@
-"use strict";
-
-import React from 'react';
-import { Canvas, Circle, RadialGradient, vec, Shadow } from '@shopify/react-native-skia';
-import { useSharedValue, useAnimatedStyle, withRepeat, withTiming, withSequence } from 'react-native-reanimated';
-import Animated from 'react-native-reanimated';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Memoized EnhancedBallComponent to prevent unnecessary re-renders
-export const EnhancedBallComponent = /*#__PURE__*/React.memo(({
-  position,
-  size,
-  isDragging,
-  isCompleted
-}) => {
-  // Animation values
-  const rotation = useSharedValue(0);
-  const glowIntensity = useSharedValue(0.6);
-  const pulseScale = useSharedValue(1);
-  const completionGlow = useSharedValue(0);
-  React.useEffect(() => {
-    // Continuous rotation
-    rotation.value = withRepeat(withTiming(360, {
-      duration: 4000
-    }), -1, false);
-
-    // Glow intensity animation
-    glowIntensity.value = withRepeat(withSequence(withTiming(0.3, {
-      duration: 1500
-    }), withTiming(0.8, {
-      duration: 1500
-    })), -1, true);
-  }, []);
-  React.useEffect(() => {
-    if (isDragging) {
-      pulseScale.value = withTiming(1.05, {
-        duration: 200
-      }); // Reduced from 1.2 to 1.05 for subtle effect
-    } else {
-      pulseScale.value = withTiming(1, {
-        duration: 200
-      });
-    }
-  }, [isDragging]);
-  React.useEffect(() => {
-    if (isCompleted) {
-      completionGlow.value = withRepeat(withSequence(withTiming(1, {
-        duration: 300
-      }), withTiming(0.3, {
-        duration: 300
-      })), 5, true);
-    } else {
-      completionGlow.value = withTiming(0, {
-        duration: 200
-      });
-    }
-  }, [isCompleted]);
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = pulseScale.value;
-    const rotationDegrees = rotation.value;
-    return {
-      position: 'absolute',
-      left: position.x - size / 2,
-      top: position.y - size / 2,
-      width: size * 1.5,
-      height: size * 1.5,
-      transform: [{
-        scale
-      }, {
-        rotate: `${rotationDegrees}deg`
-      }]
-    };
-  });
-  const canvasSize = size * 1.5;
-  const ballRadius = size / 2;
-  const centerX = canvasSize / 2;
-  const centerY = canvasSize / 2;
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: animatedStyle,
-    children: /*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        width: canvasSize,
-        height: canvasSize
-      },
-      children: [/*#__PURE__*/_jsx(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: ballRadius * 1.3,
-        opacity: glowIntensity,
-        children: /*#__PURE__*/_jsx(RadialGradient, {
-          c: vec(centerX, centerY),
-          r: ballRadius * 1.3,
-          colors: isDragging ? ['#ff6b6b', '#ff8e8e', 'transparent'] : ['#4ecdc4', '#45b7b8', 'transparent']
-        })
-      }), isCompleted && /*#__PURE__*/_jsx(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: ballRadius * 1.6,
-        opacity: completionGlow,
-        children: /*#__PURE__*/_jsx(RadialGradient, {
-          c: vec(centerX, centerY),
-          r: ballRadius * 1.6,
-          colors: ['#ffd700', '#ffed4e', '#fff9c4', 'transparent']
-        })
-      }), /*#__PURE__*/_jsxs(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: ballRadius,
-        children: [/*#__PURE__*/_jsx(RadialGradient, {
-          c: vec(centerX - ballRadius * 0.3, centerY - ballRadius * 0.3),
-          r: ballRadius * 1.2,
-          colors: isDragging ? ['#ff6b6b', '#e55656', '#cc4545'] : ['#4ecdc4', '#45b7b8', '#3ca6a6']
-        }), /*#__PURE__*/_jsx(Shadow, {
-          dx: 2,
-          dy: 2,
-          blur: 4,
-          color: "rgba(0,0,0,0.3)"
-        })]
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: centerX - ballRadius * 0.3,
-        cy: centerY - ballRadius * 0.3,
-        r: ballRadius * 0.3,
-        opacity: 0.8,
-        children: /*#__PURE__*/_jsx(RadialGradient, {
-          c: vec(centerX - ballRadius * 0.3, centerY - ballRadius * 0.3),
-          r: ballRadius * 0.3,
-          colors: ['rgba(255,255,255,0.9)', 'rgba(255,255,255,0.3)', 'transparent']
-        })
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: ballRadius * 0.4,
-        opacity: 0.7,
-        children: /*#__PURE__*/_jsx(RadialGradient, {
-          c: vec(centerX, centerY),
-          r: ballRadius * 0.4,
-          colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)', 'transparent']
-        })
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: ballRadius * 0.8,
-        opacity: 0.4,
-        style: "stroke",
-        strokeWidth: 2,
-        color: isDragging ? '#ff8e8e' : '#7dd3d8'
-      })]
-    })
-  });
-});
-//# sourceMappingURL=EnhancedBallComponent.js.map
+"use strict";import React from 'react';import{Canvas,Circle,RadialGradient,vec,Shadow}from '@shopify/react-native-skia';import{useSharedValue,useAnimatedStyle,withRepeat,withTiming,withSequence}from 'react-native-reanimated';import Animated from 'react-native-reanimated';import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const EnhancedBallComponent = React.memo(({position,size,isDragging,isCompleted})=>{const rotation = useSharedValue(0);const glowIntensity = useSharedValue(0.6);const pulseScale = useSharedValue(1);const completionGlow = useSharedValue(0);React.useEffect(()=>{rotation.value = withRepeat(withTiming(360,{duration:4000}),-1,false);glowIntensity.value = withRepeat(withSequence(withTiming(0.3,{duration:1500}),withTiming(0.8,{duration:1500})),-1,true);},[]);React.useEffect(()=>{if(isDragging){pulseScale.value = withTiming(1.05,{duration:200});}else{pulseScale.value = withTiming(1,{duration:200});}},[isDragging]);React.useEffect(()=>{if(isCompleted){completionGlow.value = withRepeat(withSequence(withTiming(1,{duration:300}),withTiming(0.3,{duration:300})),5,true);}else{completionGlow.value = withTiming(0,{duration:200});}},[isCompleted]);const animatedStyle = useAnimatedStyle(()=>{const scale = pulseScale.value;const rotationDegrees = rotation.value;return{position:'absolute',left:position.x - size / 2,top:position.y - size / 2,width:size * 1.5,height:size * 1.5,transform:[{scale},{rotate:`${rotationDegrees}deg`}]};});const canvasSize = size * 1.5;const ballRadius = size / 2;const centerX = canvasSize / 2;const centerY = canvasSize / 2;return _jsx(Animated.View,{style:animatedStyle,children:_jsxs(Canvas,{style:{width:canvasSize,height:canvasSize},children:[_jsx(Circle,{cx:centerX,cy:centerY,r:ballRadius * 1.3,opacity:glowIntensity,children:_jsx(RadialGradient,{c:vec(centerX,centerY),r:ballRadius * 1.3,colors:isDragging ? ['#ff6b6b','#ff8e8e','transparent']:['#4ecdc4','#45b7b8','transparent']})}),isCompleted && _jsx(Circle,{cx:centerX,cy:centerY,r:ballRadius * 1.6,opacity:completionGlow,children:_jsx(RadialGradient,{c:vec(centerX,centerY),r:ballRadius * 1.6,colors:['#ffd700','#ffed4e','#fff9c4','transparent']})}),_jsxs(Circle,{cx:centerX,cy:centerY,r:ballRadius,children:[_jsx(RadialGradient,{c:vec(centerX - ballRadius * 0.3,centerY - ballRadius * 0.3),r:ballRadius * 1.2,colors:isDragging ? ['#ff6b6b','#e55656','#cc4545']:['#4ecdc4','#45b7b8','#3ca6a6']}),_jsx(Shadow,{dx:2,dy:2,blur:4,color:"rgba(0,0,0,0.3)"})]}),_jsx(Circle,{cx:centerX - ballRadius * 0.3,cy:centerY - ballRadius * 0.3,r:ballRadius * 0.3,opacity:0.8,children:_jsx(RadialGradient,{c:vec(centerX - ballRadius * 0.3,centerY - ballRadius * 0.3),r:ballRadius * 0.3,colors:['rgba(255,255,255,0.9)','rgba(255,255,255,0.3)','transparent']})}),_jsx(Circle,{cx:centerX,cy:centerY,r:ballRadius * 0.4,opacity:0.7,children:_jsx(RadialGradient,{c:vec(centerX,centerY),r:ballRadius * 0.4,colors:['rgba(255,255,255,0.8)','rgba(255,255,255,0.2)','transparent']})}),_jsx(Circle,{cx:centerX,cy:centerY,r:ballRadius * 0.8,opacity:0.4,style:"stroke",strokeWidth:2,color:isDragging ? '#ff8e8e':'#7dd3d8'})]})});});

package/lib/module/games/maze-runner/components/EnhancedGameArea.js

@@ -1,370 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
-import { playHaptic, HapticType } from "../../../services/HapticsService.js";
-import { EnhancedBallComponent } from "./EnhancedBallComponent.js";
-import { WallComponent } from "./WallComponent.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Memoized EnhancedGameArea component to prevent unnecessary re-renders
-export const EnhancedGameArea = /*#__PURE__*/React.memo(({
-  gameState,
-  gameConfig,
-  walls,
-  onBallPositionChange,
-  hapticEnabled
-}) => {
-  const translateX = useSharedValue(gameState.ballPosition.x);
-  const translateY = useSharedValue(gameState.ballPosition.y);
-  const isDragging = useSharedValue(false);
-
-  // Create shared values for walls to use in worklet
-  const wallsSharedValue = useSharedValue(walls);
-
-  // Update ball position when game state changes - use smoother spring config
-  React.useEffect(() => {
-    translateX.value = withSpring(gameState.ballPosition.x, {
-      damping: 15,
-      stiffness: 150,
-      mass: 1
-    });
-    translateY.value = withSpring(gameState.ballPosition.y, {
-      damping: 15,
-      stiffness: 150,
-      mass: 1
-    });
-  }, [gameState.ballPosition]);
-
-  // Update walls when they change
-  React.useEffect(() => {
-    wallsSharedValue.value = walls;
-  }, [walls]);
-
-  // Memoized haptic callback functions
-  const triggerMoveHaptic = React.useCallback(() => {
-    playHaptic(HapticType.LIGHT, hapticEnabled);
-  }, [hapticEnabled]);
-  const triggerCollisionHaptic = React.useCallback(() => {
-    playHaptic(HapticType.MEDIUM, hapticEnabled);
-  }, [hapticEnabled]);
-
-  // Store the initial position when gesture starts
-  const startPosition = useSharedValue({
-    x: 0,
-    y: 0
-  });
-
-  // Worklet function to check collision with walls
-  const checkWallCollision = (ballX, ballY, ballRadius) => {
-    'worklet';
-
-    const currentWalls = wallsSharedValue.value;
-
-    // Use even smaller margin for smoother movement
-    const collisionMargin = 0.1; // Further reduced for smoother gameplay
-    const effectiveRadius = ballRadius + collisionMargin;
-    for (let i = 0; i < currentWalls.length; i++) {
-      const wall = currentWalls[i];
-
-      // Calculate the closest point on the wall rectangle to the ball center
-      const closestX = Math.max(wall.x, Math.min(ballX, wall.x + wall.width));
-      const closestY = Math.max(wall.y, Math.min(ballY, wall.y + wall.height));
-
-      // Calculate the distance from the ball center to this closest point
-      const distanceX = ballX - closestX;
-      const distanceY = ballY - closestY;
-      const distanceSquared = distanceX * distanceX + distanceY * distanceY;
-
-      // Check if the distance is less than the effective radius
-      if (distanceSquared < effectiveRadius * effectiveRadius) {
-        return true; // Collision detected
-      }
-    }
-    return false; // No collision
-  };
-
-  // Worklet function to check path collision (prevents jumping over walls)
-  const checkPathCollision = (fromX, fromY, toX, toY, ballRadius) => {
-    'worklet';
-
-    // Calculate the distance of the movement
-    const deltaX = toX - fromX;
-    const deltaY = toY - fromY;
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-    // If movement is very small, just check the destination
-    if (distance < 3) {
-      return checkWallCollision(toX, toY, ballRadius);
-    }
-
-    // For larger movements, check fewer points but more strategically
-    // Only check path collision for fast movements that could jump over walls
-    if (distance > 10) {
-      const steps = Math.ceil(distance / 4); // Check every 4 pixels for performance
-
-      for (let i = 1; i < steps; i++) {
-        // Skip start and end points
-        const t = i / steps;
-        const checkX = fromX + deltaX * t;
-        const checkY = fromY + deltaY * t;
-        if (checkWallCollision(checkX, checkY, ballRadius)) {
-          return true; // Collision detected along the path
-        }
-      }
-    }
-
-    // Always check the final destination
-    return checkWallCollision(toX, toY, ballRadius);
-  };
-  const panGesture = Gesture.Pan().onStart(() => {
-    if (!gameState.isPlaying || gameState.isPaused) return;
-
-    // Store the current ball position when gesture starts
-    startPosition.value = {
-      x: gameState.ballPosition.x,
-      y: gameState.ballPosition.y
-    };
-    isDragging.value = true;
-    runOnJS(triggerMoveHaptic)();
-  }).onUpdate(event => {
-    if (!gameState.isPlaying || gameState.isPaused) return;
-
-    // Calculate new position based on gesture translation from start position
-    const newX = startPosition.value.x + event.translationX;
-    const newY = startPosition.value.y + event.translationY;
-
-    // Boundary checks
-    const ballRadius = gameConfig.BALL_SIZE / 2;
-    const clampedX = Math.max(ballRadius, Math.min(gameConfig.GAME_AREA_WIDTH - ballRadius, newX));
-    const clampedY = Math.max(ballRadius, Math.min(gameConfig.GAME_AREA_HEIGHT - ballRadius, newY));
-
-    // Get current ball position
-    const currentX = translateX.value;
-    const currentY = translateY.value;
-
-    // Calculate movement distance to determine collision strategy
-    const deltaX = clampedX - currentX;
-    const deltaY = clampedY - currentY;
-    const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    let finalX = clampedX;
-    let finalY = clampedY;
-    let hasCollision = false;
-
-    // Use different collision detection strategies based on movement distance
-    if (movementDistance < 8) {
-      // For small movements, just check destination for smooth gameplay
-      hasCollision = checkWallCollision(clampedX, clampedY, ballRadius);
-    } else {
-      // For larger movements, use path collision detection to prevent wall jumping
-      hasCollision = checkPathCollision(currentX, currentY, clampedX, clampedY, ballRadius);
-    }
-
-    // If there's a collision, try to slide along walls more carefully
-    if (hasCollision) {
-      let foundValidPosition = false;
-
-      // Try moving only horizontally (slide along vertical walls)
-      // Allow more generous horizontal sliding for smoother movement
-      const horizontalOnlyX = clampedX;
-      const horizontalOnlyY = currentY;
-      const horizontalDistance = Math.abs(horizontalOnlyX - currentX);
-      if (horizontalDistance < ballRadius * 3 && !checkWallCollision(horizontalOnlyX, horizontalOnlyY, ballRadius)) {
-        // Also check that we're not jumping over a wall by testing intermediate points
-        const steps = Math.max(2, Math.ceil(horizontalDistance / 2));
-        let canSlideHorizontally = true;
-        for (let i = 1; i <= steps; i++) {
-          const t = i / steps;
-          const testX = currentX + (horizontalOnlyX - currentX) * t;
-          if (checkWallCollision(testX, horizontalOnlyY, ballRadius)) {
-            canSlideHorizontally = false;
-            break;
-          }
-        }
-        if (canSlideHorizontally) {
-          finalX = horizontalOnlyX;
-          finalY = horizontalOnlyY;
-          foundValidPosition = true;
-        }
-      }
-
-      // Try moving only vertically (slide along horizontal walls) if horizontal sliding failed
-      if (!foundValidPosition) {
-        const verticalOnlyX = currentX;
-        const verticalOnlyY = clampedY;
-        const verticalDistance = Math.abs(verticalOnlyY - currentY);
-        if (verticalDistance < ballRadius * 3 && !checkWallCollision(verticalOnlyX, verticalOnlyY, ballRadius)) {
-          // Also check that we're not jumping over a wall by testing intermediate points
-          const steps = Math.max(2, Math.ceil(verticalDistance / 2));
-          let canSlideVertically = true;
-          for (let i = 1; i <= steps; i++) {
-            const t = i / steps;
-            const testY = currentY + (verticalOnlyY - currentY) * t;
-            if (checkWallCollision(verticalOnlyX, testY, ballRadius)) {
-              canSlideVertically = false;
-              break;
-            }
-          }
-          if (canSlideVertically) {
-            finalX = verticalOnlyX;
-            finalY = verticalOnlyY;
-            foundValidPosition = true;
-          }
-        }
-      }
-      hasCollision = !foundValidPosition;
-    }
-
-    // Update position if we found a valid position (either original or sliding)
-    if (!hasCollision) {
-      translateX.value = finalX;
-      translateY.value = finalY;
-
-      // Update game state on the JS thread
-      runOnJS(onBallPositionChange)({
-        x: finalX,
-        y: finalY
-      });
-    } else {
-      // If still collision after trying to slide, trigger haptic feedback
-      runOnJS(triggerCollisionHaptic)();
-    }
-  }).onEnd(() => {
-    isDragging.value = false;
-  });
-  const animatedBallStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value - gameConfig.BALL_SIZE / 2
-    }, {
-      translateY: translateY.value - gameConfig.BALL_SIZE / 2
-    }]
-  }));
-  const renderStartMarker = () => {
-    const startPos = {
-      x: gameConfig.CELL_SIZE / 2,
-      y: gameConfig.CELL_SIZE / 2
-    };
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.marker, styles.startMarker, {
-        left: startPos.x - 15,
-        top: startPos.y - 15
-      }],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.startMarkerInner
-      })
-    });
-  };
-  const renderEndMarker = () => {
-    const endPos = {
-      x: (gameConfig.GRID_SIZE - 1) * gameConfig.CELL_SIZE + gameConfig.CELL_SIZE / 2,
-      y: (gameConfig.GRID_SIZE - 1) * gameConfig.CELL_SIZE + gameConfig.CELL_SIZE / 2
-    };
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.marker, styles.endMarker, {
-        left: endPos.x - 15,
-        // Half of 30px marker size
-        top: endPos.y - 15
-      }],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.endMarkerInner
-      })
-    });
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, {
-      width: gameConfig.GAME_AREA_WIDTH,
-      height: gameConfig.GAME_AREA_HEIGHT
-    }],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.gameArea, {
-        width: gameConfig.GRID_SIZE * gameConfig.CELL_SIZE,
-        height: gameConfig.GRID_SIZE * gameConfig.CELL_SIZE
-      }],
-      children: [/*#__PURE__*/_jsx(WallComponent, {
-        walls: walls,
-        width: gameConfig.GRID_SIZE * gameConfig.CELL_SIZE,
-        height: gameConfig.GRID_SIZE * gameConfig.CELL_SIZE
-      }), renderStartMarker(), renderEndMarker(), /*#__PURE__*/_jsx(GestureDetector, {
-        gesture: panGesture,
-        children: /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.ballContainer, animatedBallStyle],
-          children: /*#__PURE__*/_jsx(EnhancedBallComponent, {
-            position: {
-              x: gameConfig.BALL_SIZE / 2,
-              y: gameConfig.BALL_SIZE / 2
-            },
-            size: gameConfig.BALL_SIZE,
-            isDragging: isDragging.value,
-            isCompleted: gameState.isCompleted
-          })
-        })
-      })]
-    })
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    // Make transparent so walls are visible
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  gameArea: {
-    position: 'relative',
-    backgroundColor: 'transparent' // Ensure game area is also transparent
-  },
-  ballContainer: {
-    position: 'absolute',
-    width: 40,
-    // Fixed size for the ball container
-    height: 40,
-    top: 0,
-    left: 0
-  },
-  marker: {
-    position: 'absolute',
-    width: 30,
-    // Revert to original size for proper collision detection
-    height: 30,
-    borderRadius: 15,
-    justifyContent: 'center',
-    alignItems: 'center',
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4
-  },
-  startMarker: {
-    backgroundColor: '#4CAF50',
-    borderWidth: 3,
-    // Revert to original border width
-    borderColor: '#2E7D32'
-  },
-  startMarkerInner: {
-    width: 12,
-    // Revert to original size
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: '#81C784'
-  },
-  endMarker: {
-    backgroundColor: '#FF5722',
-    borderWidth: 3,
-    // Revert to original border width
-    borderColor: '#D84315'
-  },
-  endMarkerInner: {
-    width: 12,
-    // Revert to original size
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: '#FF8A65'
-  }
-});
-//# sourceMappingURL=EnhancedGameArea.js.map
+"use strict";import React from 'react';import{View,StyleSheet}from 'react-native';import{Gesture,GestureDetector}from 'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedStyle,runOnJS,withSpring}from 'react-native-reanimated';import{playHaptic,HapticType}from "../../../services/HapticsService.js";import{EnhancedBallComponent}from "./EnhancedBallComponent.js";import{WallComponent}from "./WallComponent.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const EnhancedGameArea = React.memo(({gameState,gameConfig,walls,onBallPositionChange,hapticEnabled})=>{const translateX = useSharedValue(gameState.ballPosition.x);const translateY = useSharedValue(gameState.ballPosition.y);const isDragging = useSharedValue(false);const wallsSharedValue = useSharedValue(walls);React.useEffect(()=>{translateX.value = withSpring(gameState.ballPosition.x,{damping:15,stiffness:150,mass:1});translateY.value = withSpring(gameState.ballPosition.y,{damping:15,stiffness:150,mass:1});},[gameState.ballPosition]);React.useEffect(()=>{wallsSharedValue.value = walls;},[walls]);const triggerMoveHaptic = React.useCallback(()=>{playHaptic(HapticType.LIGHT,hapticEnabled);},[hapticEnabled]);const triggerCollisionHaptic = React.useCallback(()=>{playHaptic(HapticType.MEDIUM,hapticEnabled);},[hapticEnabled]);const startPosition = useSharedValue({x:0,y:0});const checkWallCollision =(ballX,ballY,ballRadius)=>{'worklet';const currentWalls = wallsSharedValue.value;const collisionMargin = 0.1;const effectiveRadius = ballRadius + collisionMargin;for(let i = 0;i < currentWalls.length;i++){const wall = currentWalls[i];const closestX = Math.max(wall.x,Math.min(ballX,wall.x + wall.width));const closestY = Math.max(wall.y,Math.min(ballY,wall.y + wall.height));const distanceX = ballX - closestX;const distanceY = ballY - closestY;const distanceSquared = distanceX * distanceX + distanceY * distanceY;if(distanceSquared < effectiveRadius * effectiveRadius){return true;}}return false;};const checkPathCollision =(fromX,fromY,toX,toY,ballRadius)=>{'worklet';const deltaX = toX - fromX;const deltaY = toY - fromY;const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);if(distance < 3){return checkWallCollision(toX,toY,ballRadius);}if(distance > 10){const steps = Math.ceil(distance / 4);for(let i = 1;i < steps;i++){const t = i / steps;const checkX = fromX + deltaX * t;const checkY = fromY + deltaY * t;if(checkWallCollision(checkX,checkY,ballRadius)){return true;}}}return checkWallCollision(toX,toY,ballRadius);};const panGesture = Gesture.Pan().onStart(()=>{if(!gameState.isPlaying || gameState.isPaused)return;startPosition.value ={x:gameState.ballPosition.x,y:gameState.ballPosition.y};isDragging.value = true;runOnJS(triggerMoveHaptic)();}).onUpdate(event =>{if(!gameState.isPlaying || gameState.isPaused)return;const newX = startPosition.value.x + event.translationX;const newY = startPosition.value.y + event.translationY;const ballRadius = gameConfig.BALL_SIZE / 2;const clampedX = Math.max(ballRadius,Math.min(gameConfig.GAME_AREA_WIDTH - ballRadius,newX));const clampedY = Math.max(ballRadius,Math.min(gameConfig.GAME_AREA_HEIGHT - ballRadius,newY));const currentX = translateX.value;const currentY = translateY.value;const deltaX = clampedX - currentX;const deltaY = clampedY - currentY;const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);let finalX = clampedX;let finalY = clampedY;let hasCollision = false;if(movementDistance < 8){hasCollision = checkWallCollision(clampedX,clampedY,ballRadius);}else{hasCollision = checkPathCollision(currentX,currentY,clampedX,clampedY,ballRadius);}if(hasCollision){let foundValidPosition = false;const horizontalOnlyX = clampedX;const horizontalOnlyY = currentY;const horizontalDistance = Math.abs(horizontalOnlyX - currentX);if(horizontalDistance < ballRadius * 3 && !checkWallCollision(horizontalOnlyX,horizontalOnlyY,ballRadius)){const steps = Math.max(2,Math.ceil(horizontalDistance / 2));let canSlideHorizontally = true;for(let i = 1;i <= steps;i++){const t = i / steps;const testX = currentX +(horizontalOnlyX - currentX)* t;if(checkWallCollision(testX,horizontalOnlyY,ballRadius)){canSlideHorizontally = false;break;}}if(canSlideHorizontally){finalX = horizontalOnlyX;finalY = horizontalOnlyY;foundValidPosition = true;}}if(!foundValidPosition){const verticalOnlyX = currentX;const verticalOnlyY = clampedY;const verticalDistance = Math.abs(verticalOnlyY - currentY);if(verticalDistance < ballRadius * 3 && !checkWallCollision(verticalOnlyX,verticalOnlyY,ballRadius)){const steps = Math.max(2,Math.ceil(verticalDistance / 2));let canSlideVertically = true;for(let i = 1;i <= steps;i++){const t = i / steps;const testY = currentY +(verticalOnlyY - currentY)* t;if(checkWallCollision(verticalOnlyX,testY,ballRadius)){canSlideVertically = false;break;}}if(canSlideVertically){finalX = verticalOnlyX;finalY = verticalOnlyY;foundValidPosition = true;}}}hasCollision = !foundValidPosition;}if(!hasCollision){translateX.value = finalX;translateY.value = finalY;runOnJS(onBallPositionChange)({x:finalX,y:finalY});}else{runOnJS(triggerCollisionHaptic)();}}).onEnd(()=>{isDragging.value = false;});const animatedBallStyle = useAnimatedStyle(()=>({transform:[{translateX:translateX.value - gameConfig.BALL_SIZE / 2},{translateY:translateY.value - gameConfig.BALL_SIZE / 2}]}));const renderStartMarker =()=>{const startPos ={x:gameConfig.CELL_SIZE / 2,y:gameConfig.CELL_SIZE / 2};return _jsx(View,{style:[styles.marker,styles.startMarker,{left:startPos.x - 15,top:startPos.y - 15}],children:_jsx(View,{style:styles.startMarkerInner})});};const renderEndMarker =()=>{const endPos ={x:(gameConfig.GRID_SIZE - 1)* gameConfig.CELL_SIZE + gameConfig.CELL_SIZE / 2,y:(gameConfig.GRID_SIZE - 1)* gameConfig.CELL_SIZE + gameConfig.CELL_SIZE / 2};return _jsx(View,{style:[styles.marker,styles.endMarker,{left:endPos.x - 15,top:endPos.y - 15}],children:_jsx(View,{style:styles.endMarkerInner})});};return _jsx(View,{style:[styles.container,{width:gameConfig.GAME_AREA_WIDTH,height:gameConfig.GAME_AREA_HEIGHT}],children:_jsxs(View,{style:[styles.gameArea,{width:gameConfig.GRID_SIZE * gameConfig.CELL_SIZE,height:gameConfig.GRID_SIZE * gameConfig.CELL_SIZE}],children:[_jsx(WallComponent,{walls:walls,width:gameConfig.GRID_SIZE * gameConfig.CELL_SIZE,height:gameConfig.GRID_SIZE * gameConfig.CELL_SIZE}),renderStartMarker(),renderEndMarker(),_jsx(GestureDetector,{gesture:panGesture,children:_jsx(Animated.View,{style:[styles.ballContainer,animatedBallStyle],children:_jsx(EnhancedBallComponent,{position:{x:gameConfig.BALL_SIZE / 2,y:gameConfig.BALL_SIZE / 2},size:gameConfig.BALL_SIZE,isDragging:isDragging.value,isCompleted:gameState.isCompleted})})})]})});});const styles = StyleSheet.create({container:{backgroundColor:'transparent',overflow:'hidden',justifyContent:'center',alignItems:'center'},gameArea:{position:'relative',backgroundColor:'transparent'},ballContainer:{position:'absolute',width:40,height:40,top:0,left:0},marker:{position:'absolute',width:30,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',elevation:5,shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.3,shadowRadius:4},startMarker:{backgroundColor:'#4CAF50',borderWidth:3,borderColor:'#2E7D32'},startMarkerInner:{width:12,height:12,borderRadius:6,backgroundColor:'#81C784'},endMarker:{backgroundColor:'#FF5722',borderWidth:3,borderColor:'#D84315'},endMarkerInner:{width:12,height:12,borderRadius:6,backgroundColor:'#FF8A65'}});