react-native-games 1.0.0 → 1.2.0

package/lib/module/games/candy-crush/components/CandyItem.js

@@ -1,191 +1 @@
-"use strict";
-
-import React, { useEffect, useRef } from 'react';
-import { StyleSheet } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS } from 'react-native-reanimated';
-import { Canvas, RoundedRect, Group, Shadow } from '@shopify/react-native-skia';
-import { CandyCrushService } from "../CandyCrushService.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const gameService = new CandyCrushService();
-const CandyItemComponent = ({
-  candy,
-  size,
-  isSelected,
-  isMatched,
-  isFalling,
-  onSwipe
-}) => {
-  // Reanimated shared values for smooth animations
-  const translateX = useSharedValue(0);
-  const translateY = useSharedValue(0);
-  const scale = useSharedValue(1);
-  const opacity = useSharedValue(1);
-  const zIndex = useSharedValue(0);
-
-  // Track previous states to avoid unnecessary animations
-  const prevMatchedRef = useRef(isMatched);
-  const prevFallingRef = useRef(isFalling);
-  const prevRowRef = useRef(candy.row);
-
-  // Match animation - only trigger when state changes from false to true
-  useEffect(() => {
-    if (isMatched && !prevMatchedRef.current) {
-      scale.value = withTiming(0, {
-        duration: 300
-      });
-      opacity.value = withTiming(0, {
-        duration: 300
-      });
-    } else if (!isMatched && prevMatchedRef.current) {
-      // Reset when candy is replaced
-      scale.value = 1;
-      opacity.value = 1;
-    }
-    prevMatchedRef.current = isMatched;
-  }, [isMatched]);
-
-  // Fall animation - only trigger when falling state changes or row changes
-  useEffect(() => {
-    const rowChanged = candy.row !== prevRowRef.current;
-    if (isFalling && !prevFallingRef.current) {
-      scale.value = withSpring(1, {
-        damping: 8,
-        stiffness: 40
-      });
-    } else if (rowChanged && isFalling) {
-      // Animate position change during fall
-      scale.value = withSpring(1, {
-        damping: 8,
-        stiffness: 40
-      });
-    }
-    prevFallingRef.current = isFalling;
-    prevRowRef.current = candy.row;
-  }, [isFalling, candy.row]);
-
-  // Swipe gesture
-  const panGesture = Gesture.Pan().onStart(() => {
-    // Elevate candy when starting to swipe
-    zIndex.value = 1000;
-    scale.value = withSpring(1.1);
-  }).onUpdate(event => {
-    translateX.value = event.translationX;
-    translateY.value = event.translationY;
-  }).onEnd(event => {
-    const threshold = size * 0.3; // 30% of candy size
-    const absX = Math.abs(event.translationX);
-    const absY = Math.abs(event.translationY);
-
-    // Determine swipe direction
-    if (absX > threshold || absY > threshold) {
-      if (absX > absY) {
-        // Horizontal swipe
-        if (event.translationX > 0) {
-          runOnJS(onSwipe)('right');
-        } else {
-          runOnJS(onSwipe)('left');
-        }
-      } else {
-        // Vertical swipe
-        if (event.translationY > 0) {
-          runOnJS(onSwipe)('down');
-        } else {
-          runOnJS(onSwipe)('up');
-        }
-      }
-    }
-
-    // Reset position and elevation with spring animation
-    translateX.value = withSpring(0);
-    translateY.value = withSpring(0);
-    scale.value = withSpring(1);
-    zIndex.value = withTiming(0, {
-      duration: 300
-    });
-  });
-  const candyColor = gameService.getCandyColor(candy.type);
-  const borderRadius = 8; // Square with slight rounding
-
-  // Animated style for swipe and other animations
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value
-    }, {
-      translateY: translateY.value
-    }, {
-      scale: scale.value
-    }],
-    opacity: opacity.value,
-    zIndex: zIndex.value
-  }));
-  return /*#__PURE__*/_jsx(GestureDetector, {
-    gesture: panGesture,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.container, {
-        width: size,
-        height: size
-      }, animatedStyle],
-      children: /*#__PURE__*/_jsx(Canvas, {
-        style: {
-          width: size,
-          height: size
-        },
-        children: /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(RoundedRect, {
-            x: 2,
-            y: 2,
-            width: size - 4,
-            height: size - 4,
-            r: borderRadius,
-            color: candyColor
-          }), /*#__PURE__*/_jsx(RoundedRect, {
-            x: size * 0.15,
-            y: size * 0.15,
-            width: size * 0.35,
-            height: size * 0.35,
-            r: 6,
-            color: "rgba(255, 255, 255, 0.5)"
-          }), /*#__PURE__*/_jsx(RoundedRect, {
-            x: 6,
-            y: 6,
-            width: size - 12,
-            height: size - 12,
-            r: borderRadius - 2,
-            color: "rgba(255, 255, 255, 0.2)"
-          }), isSelected && /*#__PURE__*/_jsx(RoundedRect, {
-            x: 1,
-            y: 1,
-            width: size - 2,
-            height: size - 2,
-            r: borderRadius + 1,
-            color: "transparent",
-            style: "stroke",
-            strokeWidth: 3,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 0,
-              blur: 6,
-              color: "rgba(255, 255, 255, 1)"
-            })
-          })]
-        })
-      })
-    })
-  });
-};
-
-// Memoize with custom comparison for better performance
-// Animation states (isMatched, isFalling) come from props, not candy object
-// This prevents grid mutations from causing unnecessary re-renders
-export const CandyItem = /*#__PURE__*/React.memo(CandyItemComponent, (prevProps, nextProps) => {
-  return prevProps.candy.id === nextProps.candy.id && prevProps.candy.type === nextProps.candy.type && prevProps.candy.row === nextProps.candy.row && prevProps.candy.col === nextProps.candy.col && prevProps.isMatched === nextProps.isMatched && prevProps.isFalling === nextProps.isFalling && prevProps.isSelected === nextProps.isSelected && prevProps.size === nextProps.size;
-});
-CandyItem.displayName = 'CandyItem';
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-//# sourceMappingURL=CandyItem.js.map
+"use strict";import React,{useEffect,useRef}from 'react';import{StyleSheet}from 'react-native';import{Gesture,GestureDetector}from 'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedStyle,withSpring,withTiming,runOnJS}from 'react-native-reanimated';import{Canvas,RoundedRect,Group,Shadow}from '@shopify/react-native-skia';import{CandyCrushService}from "../CandyCrushService.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const gameService = new CandyCrushService();const CandyItemComponent =({candy,size,isSelected,isMatched,isFalling,onSwipe})=>{const translateX = useSharedValue(0);const translateY = useSharedValue(0);const scale = useSharedValue(1);const opacity = useSharedValue(1);const zIndex = useSharedValue(0);const prevMatchedRef = useRef(isMatched);const prevFallingRef = useRef(isFalling);const prevRowRef = useRef(candy.row);useEffect(()=>{if(isMatched && !prevMatchedRef.current){scale.value = withTiming(0,{duration:300});opacity.value = withTiming(0,{duration:300});}else if(!isMatched && prevMatchedRef.current){scale.value = 1;opacity.value = 1;}prevMatchedRef.current = isMatched;},[isMatched]);useEffect(()=>{const rowChanged = candy.row !== prevRowRef.current;if(isFalling && !prevFallingRef.current){scale.value = withSpring(1,{damping:8,stiffness:40});}else if(rowChanged && isFalling){scale.value = withSpring(1,{damping:8,stiffness:40});}prevFallingRef.current = isFalling;prevRowRef.current = candy.row;},[isFalling,candy.row]);const panGesture = Gesture.Pan().onStart(()=>{zIndex.value = 1000;scale.value = withSpring(1.1);}).onUpdate(event =>{translateX.value = event.translationX;translateY.value = event.translationY;}).onEnd(event =>{const threshold = size * 0.3;const absX = Math.abs(event.translationX);const absY = Math.abs(event.translationY);if(absX > threshold || absY > threshold){if(absX > absY){if(event.translationX > 0){runOnJS(onSwipe)('right');}else{runOnJS(onSwipe)('left');}}else{if(event.translationY > 0){runOnJS(onSwipe)('down');}else{runOnJS(onSwipe)('up');}}}translateX.value = withSpring(0);translateY.value = withSpring(0);scale.value = withSpring(1);zIndex.value = withTiming(0,{duration:300});});const candyColor = gameService.getCandyColor(candy.type);const borderRadius = 8;const animatedStyle = useAnimatedStyle(()=>({transform:[{translateX:translateX.value},{translateY:translateY.value},{scale:scale.value}],opacity:opacity.value,zIndex:zIndex.value}));return _jsx(GestureDetector,{gesture:panGesture,children:_jsx(Animated.View,{style:[styles.container,{width:size,height:size},animatedStyle],children:_jsx(Canvas,{style:{width:size,height:size},children:_jsxs(Group,{children:[_jsx(RoundedRect,{x:2,y:2,width:size - 4,height:size - 4,r:borderRadius,color:candyColor}),_jsx(RoundedRect,{x:size * 0.15,y:size * 0.15,width:size * 0.35,height:size * 0.35,r:6,color:"rgba(255,255,255,0.5)"}),_jsx(RoundedRect,{x:6,y:6,width:size - 12,height:size - 12,r:borderRadius - 2,color:"rgba(255,255,255,0.2)"}),isSelected && _jsx(RoundedRect,{x:1,y:1,width:size - 2,height:size - 2,r:borderRadius + 1,color:"transparent",style:"stroke",strokeWidth:3,children:_jsx(Shadow,{dx:0,dy:0,blur:6,color:"rgba(255,255,255,1)"})})]})})})});};export const CandyItem = React.memo(CandyItemComponent,(prevProps,nextProps)=>{return prevProps.candy.id === nextProps.candy.id && prevProps.candy.type === nextProps.candy.type && prevProps.candy.row === nextProps.candy.row && prevProps.candy.col === nextProps.candy.col && prevProps.isMatched === nextProps.isMatched && prevProps.isFalling === nextProps.isFalling && prevProps.isSelected === nextProps.isSelected && prevProps.size === nextProps.size;});CandyItem.displayName = 'CandyItem';const styles = StyleSheet.create({container:{justifyContent:'center',alignItems:'center'}});

package/lib/module/games/candy-crush/components/GameBackground.js

@@ -1,85 +1 @@
-"use strict";
-
-import React from 'react';
-import { Canvas, Rect, LinearGradient, vec, Circle, Path, Skia } from '@shopify/react-native-skia';
-import { Dimensions } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-
-// Memoize star paths outside component for better performance
-const createStarPaths = () => {
-  return [...Array(15)].map((_, i) => {
-    const x = width * (i * 7 + 3) % width;
-    const y = height * (i * 11 + 5) % height;
-    const size = 3 + i % 3;
-    const starPath = Skia.Path.Make();
-    starPath.moveTo(x, y - size);
-    starPath.lineTo(x + size * 0.3, y + size * 0.3);
-    starPath.lineTo(x + size, y + size * 0.3);
-    starPath.lineTo(x + size * 0.5, y + size * 0.8);
-    starPath.lineTo(x + size * 0.7, y + size * 1.5);
-    starPath.lineTo(x, y + size);
-    starPath.lineTo(x - size * 0.7, y + size * 1.5);
-    starPath.lineTo(x - size * 0.5, y + size * 0.8);
-    starPath.lineTo(x - size, y + size * 0.3);
-    starPath.lineTo(x - size * 0.3, y + size * 0.3);
-    starPath.close();
-    return {
-      path: starPath,
-      opacity: 0.1 + i % 3 * 0.05
-    };
-  });
-};
-const starPaths = createStarPaths();
-export const GameBackground = /*#__PURE__*/React.memo(({
-  children
-}) => {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        position: 'absolute',
-        width,
-        height
-      },
-      children: [/*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: 0,
-        width: width,
-        height: height,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(0, height),
-          colors: ['#667eea', '#764ba2', '#f093fb']
-        })
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.1,
-        cy: height * 0.15,
-        r: 60,
-        color: "rgba(255, 255, 255, 0.05)"
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.85,
-        cy: height * 0.25,
-        r: 80,
-        color: "rgba(255, 255, 255, 0.05)"
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.2,
-        cy: height * 0.7,
-        r: 50,
-        color: "rgba(255, 255, 255, 0.05)"
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.9,
-        cy: height * 0.8,
-        r: 70,
-        color: "rgba(255, 255, 255, 0.05)"
-      }), starPaths.map((star, i) => /*#__PURE__*/_jsx(Path, {
-        path: star.path,
-        color: `rgba(255, 255, 255, ${star.opacity})`
-      }, i))]
-    }), children]
-  });
-});
-GameBackground.displayName = 'GameBackground';
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{Canvas,Rect,LinearGradient,vec,Circle,Path,Skia}from '@shopify/react-native-skia';import{Dimensions}from 'react-native';import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');const createStarPaths =()=>{return [...Array(15)].map((_,i)=>{const x = width *(i * 7 + 3)% width;const y = height *(i * 11 + 5)% height;const size = 3 + i % 3;const starPath = Skia.Path.Make();starPath.moveTo(x,y - size);starPath.lineTo(x + size * 0.3,y + size * 0.3);starPath.lineTo(x + size,y + size * 0.3);starPath.lineTo(x + size * 0.5,y + size * 0.8);starPath.lineTo(x + size * 0.7,y + size * 1.5);starPath.lineTo(x,y + size);starPath.lineTo(x - size * 0.7,y + size * 1.5);starPath.lineTo(x - size * 0.5,y + size * 0.8);starPath.lineTo(x - size,y + size * 0.3);starPath.lineTo(x - size * 0.3,y + size * 0.3);starPath.close();return{path:starPath,opacity:0.1 + i % 3 * 0.05};});};const starPaths = createStarPaths();export const GameBackground = React.memo(({children})=>{return _jsxs(_Fragment,{children:[_jsxs(Canvas,{style:{position:'absolute',width,height},children:[_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,height),colors:['#667eea','#764ba2','#f093fb']})}),_jsx(Circle,{cx:width * 0.1,cy:height * 0.15,r:60,color:"rgba(255,255,255,0.05)"}),_jsx(Circle,{cx:width * 0.85,cy:height * 0.25,r:80,color:"rgba(255,255,255,0.05)"}),_jsx(Circle,{cx:width * 0.2,cy:height * 0.7,r:50,color:"rgba(255,255,255,0.05)"}),_jsx(Circle,{cx:width * 0.9,cy:height * 0.8,r:70,color:"rgba(255,255,255,0.05)"}),starPaths.map((star,i)=> _jsx(Path,{path:star.path,color:`rgba(255,255,255,${star.opacity})`},i))]}),children]});});GameBackground.displayName = 'GameBackground';

package/lib/module/games/candy-crush/components/GameGrid.js

@@ -1,314 +1 @@
-"use strict";
-
-import React, { useMemo, useRef, useEffect } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { Canvas, RoundedRect, LinearGradient, vec, Shadow, Circle, Group } from '@shopify/react-native-skia';
-import { useGrid, useSelectedCandy, useCandyCrushStore, useMatchedCandyIds, useFallingCandyIds } from "../CandyCrushStore.js";
-import { CandyItem } from "./CandyItem.js";
-import { CANDY_CRUSH_GAME_CONFIG, CANDY_CRUSH_COLORS } from "../CandyCrushConstants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width: screenWidth
-} = Dimensions.get('window');
-
-// Memoized GridRow component to prevent unnecessary re-renders
-
-const GridRow = /*#__PURE__*/React.memo(({
-  row,
-  rowIndex,
-  candySize,
-  gap,
-  selectedCandyId,
-  matchedCandyIds,
-  fallingCandyIds,
-  onSwipe
-}) => {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.row, {
-      gap
-    }],
-    children: row.map((candy, colIndex) => {
-      if (!candy) {
-        return /*#__PURE__*/_jsx(View, {
-          style: [styles.cell, {
-            width: candySize,
-            height: candySize
-          }]
-        }, `empty-${rowIndex}-${colIndex}`);
-      }
-      const isSelected = selectedCandyId === candy.id;
-      const isMatched = matchedCandyIds.has(candy.id);
-      const isFalling = fallingCandyIds.has(candy.id);
-      const handleSwipe = direction => {
-        onSwipe(candy, direction);
-      };
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.cell, {
-          width: candySize,
-          height: candySize
-        }],
-        children: /*#__PURE__*/_jsx(CandyItem, {
-          candy: candy,
-          size: candySize,
-          isSelected: isSelected,
-          isMatched: isMatched,
-          isFalling: isFalling,
-          onSwipe: handleSwipe
-        })
-      }, candy.id);
-    })
-  }, `row-${rowIndex}`);
-}, (prevProps, nextProps) => {
-  // If row array reference is the same, skip all checks (FASTEST PATH)
-  if (prevProps.row === nextProps.row) {
-    return true;
-  }
-
-  // Only re-render if row content actually changed
-  if (prevProps.row.length !== nextProps.row.length) return false;
-  if (prevProps.candySize !== nextProps.candySize) return false;
-  if (prevProps.gap !== nextProps.gap) return false;
-
-  // Only re-render if THIS ROW has the selected candy
-  const hadSelectedCandy = prevProps.row.some(c => c?.id === prevProps.selectedCandyId);
-  const hasSelectedCandy = nextProps.row.some(c => c?.id === nextProps.selectedCandyId);
-  if (hadSelectedCandy !== hasSelectedCandy || hadSelectedCandy && prevProps.selectedCandyId !== nextProps.selectedCandyId) {
-    return false;
-  }
-
-  // Check if any candy in THIS ROW is affected by matched/falling states
-  for (let i = 0; i < prevProps.row.length; i++) {
-    const candy = prevProps.row[i];
-    if (candy) {
-      const wasMatched = prevProps.matchedCandyIds.has(candy.id);
-      const isMatched = nextProps.matchedCandyIds.has(candy.id);
-      const wasFalling = prevProps.fallingCandyIds.has(candy.id);
-      const isFalling = nextProps.fallingCandyIds.has(candy.id);
-      if (wasMatched !== isMatched || wasFalling !== isFalling) {
-        return false;
-      }
-    }
-  }
-
-  // Check if any candy in the row changed
-  for (let i = 0; i < prevProps.row.length; i++) {
-    const prevCandy = prevProps.row[i];
-    const nextCandy = nextProps.row[i];
-    if (prevCandy?.id !== nextCandy?.id) return false;
-    if (prevCandy?.type !== nextCandy?.type) return false;
-    if (prevCandy?.row !== nextCandy?.row) return false;
-    if (prevCandy?.col !== nextCandy?.col) return false;
-  }
-  return true;
-});
-export const GameGrid = /*#__PURE__*/React.memo(() => {
-  const grid = useGrid();
-  const selectedCandy = useSelectedCandy();
-  const matchedCandyIds = useMatchedCandyIds();
-  const fallingCandyIds = useFallingCandyIds();
-  const selectCandy = useCandyCrushStore(state => state.selectCandy);
-  const selectedCandyId = selectedCandy?.id || null;
-
-  // Use ref to store grid without causing re-renders
-  const gridRef = useRef(grid);
-  useEffect(() => {
-    gridRef.current = grid;
-  }, [grid]);
-
-  // Handle swipe with stable reference (doesn't change on grid updates)
-  const handleSwipe = React.useCallback((candy, direction) => {
-    const currentGrid = gridRef.current;
-    let targetRow = candy.row;
-    let targetCol = candy.col;
-    switch (direction) {
-      case 'up':
-        targetRow = candy.row - 1;
-        break;
-      case 'down':
-        targetRow = candy.row + 1;
-        break;
-      case 'left':
-        targetCol = candy.col - 1;
-        break;
-      case 'right':
-        targetCol = candy.col + 1;
-        break;
-    }
-
-    // Check if target is within bounds
-    if (targetRow >= 0 && targetRow < currentGrid.length && targetCol >= 0 && currentGrid[0] && targetCol < currentGrid[0].length) {
-      const targetRowData = currentGrid[targetRow];
-      if (targetRowData) {
-        const targetCandy = targetRowData[targetCol];
-        if (targetCandy) {
-          // Simulate selecting source candy then target candy
-          selectCandy(candy);
-          setTimeout(() => selectCandy(targetCandy), 50);
-        }
-      }
-    }
-  }, [selectCandy]);
-
-  // Calculate grid dimensions (memoized once)
-  const gridCalculations = useMemo(() => {
-    const horizontalPadding = 40;
-    const availableWidth = screenWidth - horizontalPadding;
-    const gridSize = CANDY_CRUSH_GAME_CONFIG.GRID_SIZE;
-    const gap = 2;
-    const totalGaps = (gridSize - 1) * gap;
-    const candySize = (availableWidth - totalGaps) / gridSize;
-    const padding = 10; // Adjusted padding
-
-    // Calculate actual content dimensions
-    const contentWidth = Math.floor(candySize) * gridSize + totalGaps;
-    const contentHeight = Math.floor(candySize) * gridSize + totalGaps;
-
-    // Grid dimensions including padding and border
-    const gridWidth = contentWidth + padding * 2;
-    const gridHeight = contentHeight + padding * 2;
-    return {
-      candySize: Math.floor(candySize),
-      gap,
-      gridSize,
-      gridWidth,
-      gridHeight
-    };
-  }, []);
-  const {
-    candySize,
-    gap,
-    gridWidth,
-    gridHeight
-  } = gridCalculations;
-
-  // Generate jelly bubbles
-  const jellyBubbles = useMemo(() => {
-    const bubbles = [];
-    const bubbleCount = 25;
-    for (let i = 0; i < bubbleCount; i++) {
-      bubbles.push({
-        x: Math.random() * gridWidth,
-        y: Math.random() * gridHeight,
-        radius: Math.random() * 15 + 5,
-        opacity: Math.random() * 0.15 + 0.05
-      });
-    }
-    return bubbles;
-  }, [gridWidth, gridHeight]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.jellyContainer, {
-        width: gridWidth,
-        height: gridHeight
-      }],
-      children: /*#__PURE__*/_jsxs(Canvas, {
-        style: {
-          width: gridWidth,
-          height: gridHeight
-        },
-        children: [/*#__PURE__*/_jsxs(RoundedRect, {
-          x: 0,
-          y: 0,
-          width: gridWidth,
-          height: gridHeight,
-          r: 15,
-          children: [/*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(gridWidth, gridHeight),
-            colors: ['rgba(255, 149, 0, 0.35)', 'rgba(255, 120, 0, 0.25)', 'rgba(255, 149, 0, 0.3)']
-          }), /*#__PURE__*/_jsx(Shadow, {
-            dx: 0,
-            dy: 6,
-            blur: 12,
-            color: "rgba(255, 100, 0, 0.4)",
-            inner: true
-          })]
-        }), /*#__PURE__*/_jsx(Group, {
-          children: jellyBubbles.map((bubble, index) => /*#__PURE__*/_jsx(Circle, {
-            cx: bubble.x,
-            cy: bubble.y,
-            r: bubble.radius,
-            color: `rgba(255, 255, 255, ${bubble.opacity})`
-          }, index))
-        }), /*#__PURE__*/_jsx(RoundedRect, {
-          x: 5,
-          y: 5,
-          width: gridWidth - 10,
-          height: gridHeight - 10,
-          r: 12,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(0, gridHeight),
-            colors: ['rgba(255, 200, 100, 0.3)', 'rgba(255, 149, 0, 0)', 'rgba(255, 180, 80, 0.2)']
-          })
-        }), /*#__PURE__*/_jsx(RoundedRect, {
-          x: 15,
-          y: 15,
-          width: gridWidth - 30,
-          height: gridHeight * 0.25,
-          r: 8,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(0, gridHeight * 0.25),
-            colors: ['rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 255, 0)']
-          })
-        }), /*#__PURE__*/_jsx(RoundedRect, {
-          x: 15,
-          y: gridHeight * 0.75,
-          width: gridWidth - 30,
-          height: gridHeight * 0.2,
-          r: 8,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(0, gridHeight * 0.2),
-            colors: ['rgba(0, 0, 0, 0)', 'rgba(255, 100, 0, 0.2)']
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.grid, {
-        gap
-      }],
-      children: grid.map((row, rowIndex) => /*#__PURE__*/_jsx(GridRow, {
-        row: row,
-        rowIndex: rowIndex,
-        candySize: candySize,
-        gap: gap,
-        selectedCandyId: selectedCandyId,
-        matchedCandyIds: matchedCandyIds,
-        fallingCandyIds: fallingCandyIds,
-        onSwipe: handleSwipe
-      }, rowIndex))
-    })]
-  });
-});
-GameGrid.displayName = 'GameGrid';
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative'
-  },
-  jellyContainer: {
-    position: 'absolute',
-    borderRadius: 15,
-    borderWidth: 3,
-    borderColor: CANDY_CRUSH_COLORS.GRID_BORDER,
-    overflow: 'hidden'
-  },
-  grid: {
-    padding: 13,
-    // 10px padding + 3px border
-    zIndex: 1
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  cell: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-//# sourceMappingURL=GameGrid.js.map
+"use strict";import React,{useMemo,useRef,useEffect}from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{Canvas,RoundedRect,LinearGradient,vec,Shadow,Circle,Group}from '@shopify/react-native-skia';import{useGrid,useSelectedCandy,useCandyCrushStore,useMatchedCandyIds,useFallingCandyIds}from "../CandyCrushStore.js";import{CandyItem}from "./CandyItem.js";import{CANDY_CRUSH_GAME_CONFIG,CANDY_CRUSH_COLORS}from "../CandyCrushConstants.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width:screenWidth}= Dimensions.get('window');const GridRow = React.memo(({row,rowIndex,candySize,gap,selectedCandyId,matchedCandyIds,fallingCandyIds,onSwipe})=>{return _jsx(View,{style:[styles.row,{gap}],children:row.map((candy,colIndex)=>{if(!candy){return _jsx(View,{style:[styles.cell,{width:candySize,height:candySize}]},`empty-${rowIndex}-${colIndex}`);}const isSelected = selectedCandyId === candy.id;const isMatched = matchedCandyIds.has(candy.id);const isFalling = fallingCandyIds.has(candy.id);const handleSwipe = direction =>{onSwipe(candy,direction);};return _jsx(View,{style:[styles.cell,{width:candySize,height:candySize}],children:_jsx(CandyItem,{candy:candy,size:candySize,isSelected:isSelected,isMatched:isMatched,isFalling:isFalling,onSwipe:handleSwipe})},candy.id);})},`row-${rowIndex}`);},(prevProps,nextProps)=>{if(prevProps.row === nextProps.row){return true;}if(prevProps.row.length !== nextProps.row.length)return false;if(prevProps.candySize !== nextProps.candySize)return false;if(prevProps.gap !== nextProps.gap)return false;const hadSelectedCandy = prevProps.row.some(c => c?.id === prevProps.selectedCandyId);const hasSelectedCandy = nextProps.row.some(c => c?.id === nextProps.selectedCandyId);if(hadSelectedCandy !== hasSelectedCandy || hadSelectedCandy && prevProps.selectedCandyId !== nextProps.selectedCandyId){return false;}for(let i = 0;i < prevProps.row.length;i++){const candy = prevProps.row[i];if(candy){const wasMatched = prevProps.matchedCandyIds.has(candy.id);const isMatched = nextProps.matchedCandyIds.has(candy.id);const wasFalling = prevProps.fallingCandyIds.has(candy.id);const isFalling = nextProps.fallingCandyIds.has(candy.id);if(wasMatched !== isMatched || wasFalling !== isFalling){return false;}}}for(let i = 0;i < prevProps.row.length;i++){const prevCandy = prevProps.row[i];const nextCandy = nextProps.row[i];if(prevCandy?.id !== nextCandy?.id)return false;if(prevCandy?.type !== nextCandy?.type)return false;if(prevCandy?.row !== nextCandy?.row)return false;if(prevCandy?.col !== nextCandy?.col)return false;}return true;});export const GameGrid = React.memo(()=>{const grid = useGrid();const selectedCandy = useSelectedCandy();const matchedCandyIds = useMatchedCandyIds();const fallingCandyIds = useFallingCandyIds();const selectCandy = useCandyCrushStore(state => state.selectCandy);const selectedCandyId = selectedCandy?.id || null;const gridRef = useRef(grid);useEffect(()=>{gridRef.current = grid;},[grid]);const handleSwipe = React.useCallback((candy,direction)=>{const currentGrid = gridRef.current;let targetRow = candy.row;let targetCol = candy.col;switch(direction){case 'up':targetRow = candy.row - 1;break;case 'down':targetRow = candy.row + 1;break;case 'left':targetCol = candy.col - 1;break;case 'right':targetCol = candy.col + 1;break;}if(targetRow >= 0 && targetRow < currentGrid.length && targetCol >= 0 && currentGrid[0] && targetCol < currentGrid[0].length){const targetRowData = currentGrid[targetRow];if(targetRowData){const targetCandy = targetRowData[targetCol];if(targetCandy){selectCandy(candy);setTimeout(()=> selectCandy(targetCandy),50);}}}},[selectCandy]);const gridCalculations = useMemo(()=>{const horizontalPadding = 40;const availableWidth = screenWidth - horizontalPadding;const gridSize = CANDY_CRUSH_GAME_CONFIG.GRID_SIZE;const gap = 2;const totalGaps =(gridSize - 1)* gap;const candySize =(availableWidth - totalGaps)/ gridSize;const padding = 10;const contentWidth = Math.floor(candySize)* gridSize + totalGaps;const contentHeight = Math.floor(candySize)* gridSize + totalGaps;const gridWidth = contentWidth + padding * 2;const gridHeight = contentHeight + padding * 2;return{candySize:Math.floor(candySize),gap,gridSize,gridWidth,gridHeight};},[]);const{candySize,gap,gridWidth,gridHeight}= gridCalculations;const jellyBubbles = useMemo(()=>{const bubbles = [];const bubbleCount = 25;for(let i = 0;i < bubbleCount;i++){bubbles.push({x:Math.random()* gridWidth,y:Math.random()* gridHeight,radius:Math.random()* 15 + 5,opacity:Math.random()* 0.15 + 0.05});}return bubbles;},[gridWidth,gridHeight]);return _jsxs(View,{style:styles.container,children:[_jsx(View,{style:[styles.jellyContainer,{width:gridWidth,height:gridHeight}],children:_jsxs(Canvas,{style:{width:gridWidth,height:gridHeight},children:[_jsxs(RoundedRect,{x:0,y:0,width:gridWidth,height:gridHeight,r:15,children:[_jsx(LinearGradient,{start:vec(0,0),end:vec(gridWidth,gridHeight),colors:['rgba(255,149,0,0.35)','rgba(255,120,0,0.25)','rgba(255,149,0,0.3)']}),_jsx(Shadow,{dx:0,dy:6,blur:12,color:"rgba(255,100,0,0.4)",inner:true})]}),_jsx(Group,{children:jellyBubbles.map((bubble,index)=> _jsx(Circle,{cx:bubble.x,cy:bubble.y,r:bubble.radius,color:`rgba(255,255,255,${bubble.opacity})`},index))}),_jsx(RoundedRect,{x:5,y:5,width:gridWidth - 10,height:gridHeight - 10,r:12,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,gridHeight),colors:['rgba(255,200,100,0.3)','rgba(255,149,0,0)','rgba(255,180,80,0.2)']})}),_jsx(RoundedRect,{x:15,y:15,width:gridWidth - 30,height:gridHeight * 0.25,r:8,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,gridHeight * 0.25),colors:['rgba(255,255,255,0.5)','rgba(255,255,255,0)']})}),_jsx(RoundedRect,{x:15,y:gridHeight * 0.75,width:gridWidth - 30,height:gridHeight * 0.2,r:8,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,gridHeight * 0.2),colors:['rgba(0,0,0,0)','rgba(255,100,0,0.2)']})})]})}),_jsx(View,{style:[styles.grid,{gap}],children:grid.map((row,rowIndex)=> _jsx(GridRow,{row:row,rowIndex:rowIndex,candySize:candySize,gap:gap,selectedCandyId:selectedCandyId,matchedCandyIds:matchedCandyIds,fallingCandyIds:fallingCandyIds,onSwipe:handleSwipe},rowIndex))})]});});GameGrid.displayName = 'GameGrid';const styles = StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',position:'relative'},jellyContainer:{position:'absolute',borderRadius:15,borderWidth:3,borderColor:CANDY_CRUSH_COLORS.GRID_BORDER,overflow:'hidden'},grid:{padding:13,zIndex:1},row:{flexDirection:'row'},cell:{justifyContent:'center',alignItems:'center'}});