react-native-games 1.1.0 → 1.3.0

package/lib/module/games/whack-a-mole/WhackAMoleStore.js

@@ -1,172 +1 @@
-"use strict";
-
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { GAME_CONFIG } from "./WhackAMoleService.js";
-import { immerMiddleware } from "../../services/UtilsService.js";
-const createInitialHoles = (gridSize = GAME_CONFIG.GRID_SIZE) => {
-  const totalHoles = gridSize * gridSize;
-  return Array.from({
-    length: totalHoles
-  }, (_, i) => ({
-    id: i,
-    isActive: false,
-    position: {
-      x: (i % gridSize - 1) * (GAME_CONFIG.HOLE_SIZE + 20),
-      y: Math.floor(i / gridSize - 1) * (GAME_CONFIG.HOLE_SIZE + 20),
-      z: 0
-    }
-  }));
-};
-
-// Optimized store with selective subscriptions for low-end devices
-export const useWhackAMoleStore = create()(subscribeWithSelector(immerMiddleware((set, get) => ({
-  // Initial state
-  score: 0,
-  timeLeft: GAME_CONFIG.GAME_DURATION,
-  // Fixed duration regardless of difficulty
-  isPlaying: false,
-  gameOver: false,
-  holes: createInitialHoles(),
-  // Actions
-  startGame: (_gameDuration, gridSize) => {
-    // Always use fixed duration regardless of difficulty or passed duration
-    const duration = GAME_CONFIG.GAME_DURATION;
-    const grid = gridSize || GAME_CONFIG.GRID_SIZE;
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = duration;
-      draft.isPlaying = true;
-      draft.gameOver = false;
-      draft.holes = createInitialHoles(grid);
-    });
-  },
-  stopGame: () => {
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = GAME_CONFIG.GAME_DURATION; // Use constant for consistency
-      draft.isPlaying = false;
-      draft.gameOver = false;
-    });
-  },
-  resetGame: () => {
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = GAME_CONFIG.GAME_DURATION; // Use constant for consistency
-      draft.isPlaying = false;
-      draft.gameOver = false;
-      draft.holes = createInitialHoles();
-    });
-  },
-  whackMole: (holeId, points = 1) => {
-    const {
-      holes,
-      isPlaying
-    } = get();
-    if (!isPlaying) return;
-
-    // Optimized: Use direct array access instead of find for better performance
-    if (holeId < 0 || holeId >= holes.length || !holes[holeId] || !holes[holeId].isActive) return;
-    set(draft => {
-      draft.score = draft.score + points;
-      // Optimized: Direct array access instead of find
-      if (draft.holes[holeId]) {
-        draft.holes[holeId].isActive = false;
-      }
-    });
-  },
-  updateScore: points => {
-    set(draft => {
-      draft.score = draft.score + points;
-    });
-  },
-  decrementTime: () => {
-    const currentState = get();
-    if (currentState.timeLeft <= 1) {
-      // Batch final state update to prevent multiple re-renders
-      set(draft => {
-        draft.timeLeft = 0;
-        draft.isPlaying = false;
-        draft.gameOver = true;
-        // Deactivate all holes when game ends
-        draft.holes.forEach(hole => {
-          hole.isActive = false;
-        });
-      });
-    } else {
-      // Only update time to minimize re-renders
-      set(draft => {
-        draft.timeLeft = currentState.timeLeft - 1;
-      });
-    }
-  },
-  setHoles: holes => {
-    set(draft => {
-      draft.holes = holes;
-    });
-  },
-  activateHole: holeId => {
-    // Optimized hole activation with direct array access
-    const state = get();
-    if (holeId >= 0 && holeId < state.holes.length && !state.holes[holeId].isActive) {
-      set(draft => {
-        if (draft.holes[holeId]) {
-          draft.holes[holeId].isActive = true;
-        }
-      });
-    }
-  },
-  deactivateHole: holeId => {
-    // Optimized hole deactivation with direct array access
-    const state = get();
-    if (holeId >= 0 && holeId < state.holes.length && state.holes[holeId].isActive) {
-      set(draft => {
-        if (draft.holes[holeId]) {
-          draft.holes[holeId].isActive = false;
-        }
-      });
-    }
-  },
-  // Batch operations for better performance
-  batchUpdateHoles: updates => {
-    const state = get();
-    const hasChanges = updates.some(update => update.holeId >= 0 && update.holeId < state.holes.length && state.holes[update.holeId].isActive !== update.isActive);
-    if (hasChanges) {
-      set(draft => {
-        updates.forEach(({
-          holeId,
-          isActive
-        }) => {
-          if (holeId >= 0 && holeId < draft.holes.length) {
-            if (draft.holes[holeId]) {
-              draft.holes[holeId].isActive = isActive;
-            }
-          }
-        });
-      });
-    }
-  }
-}))));
-
-// Optimized selectors for low-end devices - prevent unnecessary re-renders
-export const useGameState = () => useWhackAMoleStore(state => ({
-  isPlaying: state.isPlaying,
-  gameOver: state.gameOver
-}));
-export const useScore = () => useWhackAMoleStore(state => state.score);
-export const useTimeLeft = () => useWhackAMoleStore(state => state.timeLeft);
-
-// Memoized active holes selector for better performance
-export const useActiveHoles = () => useWhackAMoleStore(state => {
-  const activeHoles = [];
-  for (let i = 0; i < state.holes.length; i++) {
-    if (state.holes[i] && state.holes[i].isActive) {
-      activeHoles.push(state.holes[i]);
-    }
-  }
-  return activeHoles;
-});
-
-// Optimized hole selector with direct array access
-export const useHoleById = holeId => useWhackAMoleStore(state => holeId >= 0 && holeId < state.holes.length ? state.holes[holeId] : undefined);
-//# sourceMappingURL=WhackAMoleStore.js.map
+"use strict";import{create}from 'zustand';import{subscribeWithSelector}from 'zustand/middleware';import{GAME_CONFIG}from "./WhackAMoleService.js";import{immerMiddleware}from "../../services/UtilsService.js";const createInitialHoles =(gridSize = GAME_CONFIG.GRID_SIZE)=>{const totalHoles = gridSize * gridSize;return Array.from({length:totalHoles},(_,i)=>({id:i,isActive:false,position:{x:(i % gridSize - 1)*(GAME_CONFIG.HOLE_SIZE + 20),y:Math.floor(i / gridSize - 1)*(GAME_CONFIG.HOLE_SIZE + 20),z:0}}));};export const useWhackAMoleStore = create()(subscribeWithSelector(immerMiddleware((set,get)=>({score:0,timeLeft:GAME_CONFIG.GAME_DURATION,isPlaying:false,gameOver:false,holes:createInitialHoles(),startGame:(_gameDuration,gridSize)=>{const duration = GAME_CONFIG.GAME_DURATION;const grid = gridSize || GAME_CONFIG.GRID_SIZE;set(draft =>{draft.score = 0;draft.timeLeft = duration;draft.isPlaying = true;draft.gameOver = false;draft.holes = createInitialHoles(grid);});},stopGame:()=>{set(draft =>{draft.score = 0;draft.timeLeft = GAME_CONFIG.GAME_DURATION;draft.isPlaying = false;draft.gameOver = false;});},resetGame:()=>{set(draft =>{draft.score = 0;draft.timeLeft = GAME_CONFIG.GAME_DURATION;draft.isPlaying = false;draft.gameOver = false;draft.holes = createInitialHoles();});},whackMole:(holeId,points = 1)=>{const{holes,isPlaying}= get();if(!isPlaying)return;if(holeId < 0 || holeId >= holes.length || !holes[holeId] || !holes[holeId].isActive)return;set(draft =>{draft.score = draft.score + points;if(draft.holes[holeId]){draft.holes[holeId].isActive = false;}});},updateScore:points =>{set(draft =>{draft.score = draft.score + points;});},decrementTime:()=>{const currentState = get();if(currentState.timeLeft <= 1){set(draft =>{draft.timeLeft = 0;draft.isPlaying = false;draft.gameOver = true;draft.holes.forEach(hole =>{hole.isActive = false;});});}else{set(draft =>{draft.timeLeft = currentState.timeLeft - 1;});}},setHoles:holes =>{set(draft =>{draft.holes = holes;});},activateHole:holeId =>{const state = get();if(holeId >= 0 && holeId < state.holes.length && !state.holes[holeId].isActive){set(draft =>{if(draft.holes[holeId]){draft.holes[holeId].isActive = true;}});}},deactivateHole:holeId =>{const state = get();if(holeId >= 0 && holeId < state.holes.length && state.holes[holeId].isActive){set(draft =>{if(draft.holes[holeId]){draft.holes[holeId].isActive = false;}});}},batchUpdateHoles:updates =>{const state = get();const hasChanges = updates.some(update => update.holeId >= 0 && update.holeId < state.holes.length && state.holes[update.holeId].isActive !== update.isActive);if(hasChanges){set(draft =>{updates.forEach(({holeId,isActive})=>{if(holeId >= 0 && holeId < draft.holes.length){if(draft.holes[holeId]){draft.holes[holeId].isActive = isActive;}}});});}}}))));export const useGameState =()=> useWhackAMoleStore(state =>({isPlaying:state.isPlaying,gameOver:state.gameOver}));export const useScore =()=> useWhackAMoleStore(state => state.score);export const useTimeLeft =()=> useWhackAMoleStore(state => state.timeLeft);export const useActiveHoles =()=> useWhackAMoleStore(state =>{const activeHoles = [];for(let i = 0;i < state.holes.length;i++){if(state.holes[i] && state.holes[i].isActive){activeHoles.push(state.holes[i]);}}return activeHoles;});export const useHoleById = holeId => useWhackAMoleStore(state => holeId >= 0 && holeId < state.holes.length ? state.holes[holeId]:undefined);

package/lib/module/games/whack-a-mole/components/GameBackground.js

@@ -1,477 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, Dimensions } from 'react-native';
-import { Canvas, LinearGradient, Rect, Circle, Path, Skia, vec, Group, Shadow } from '@shopify/react-native-skia';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-export const GameBackground = /*#__PURE__*/React.memo(({
-  children,
-  offset = 0
-}) => {
-  // Adjust sun and cloud positions based on offset
-  const sunY = height * 0.15 + offset * 0.9;
-  const cloud1Y = height * 0.24 + offset * 0.8;
-  const cloud2Y = height * 0.27 + offset * 0.8;
-  const cloud3Y = height * 0.19 + offset * 0.8;
-
-  // Create grass path - ground height area (dynamic based on offset)
-  const buttonAreaHeight = offset > 0 ? 150 : 250; // Height for ground area
-  const grassStartY = height - buttonAreaHeight;
-  const createGrassPath = (startX, segments = 8) => {
-    const path = Skia.Path.Make();
-    const segmentWidth = width / segments;
-    path.moveTo(startX, grassStartY);
-    for (let i = 0; i < segments; i++) {
-      const x = startX + i * segmentWidth;
-      const y = grassStartY + Math.sin(i * 0.5) * 8; // Reduced wave amplitude
-      const controlX = x + segmentWidth / 2;
-      const controlY = y + Math.cos(i * 0.3) * 6; // Reduced wave amplitude
-
-      path.quadTo(controlX, controlY, x + segmentWidth, y);
-    }
-    path.lineTo(width, height);
-    path.lineTo(startX, height);
-    path.close();
-    return path;
-  };
-  const grassPath = createGrassPath(0);
-  return /*#__PURE__*/_jsxs(View, {
-    style: {
-      flex: 1
-    },
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        position: 'absolute',
-        width,
-        height
-      },
-      children: [/*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: 0,
-        width: width,
-        height: grassStartY,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(0, grassStartY),
-          colors: ['#87CEEB', '#98D8E8', '#B0E0E6']
-        })
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsxs(Circle, {
-          cx: width * 0.8,
-          cy: sunY,
-          r: 40,
-          children: [/*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-40, -40),
-            end: vec(40, 40),
-            colors: ['#FFFF99', '#FFD700', '#FFA500', '#FF8C00']
-          }), /*#__PURE__*/_jsx(Shadow, {
-            dx: 0,
-            dy: 0,
-            blur: 30,
-            color: "#FFD700"
-          })]
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.8 - 8,
-          cy: sunY - 8,
-          r: 15,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-15, -15),
-            end: vec(15, 15),
-            colors: ['#FFFFFF', '#FFFF99']
-          })
-        }), Array.from({
-          length: 16
-        }, (_, index) => {
-          const angle = 360 / 16 * index;
-          const radian = angle * Math.PI / 180;
-          const isLongRay = index % 2 === 0;
-          const rayLength = isLongRay ? 25 : 15;
-          const rayWidth = isLongRay ? 4 : 2;
-          const startDistance = 45;
-          const startX = width * 0.8 + Math.cos(radian) * startDistance;
-          const startY = sunY + Math.sin(radian) * startDistance;
-          const endX = width * 0.8 + Math.cos(radian) * (startDistance + rayLength);
-          const endY = sunY + Math.sin(radian) * (startDistance + rayLength);
-          const rayPath = Skia.Path.Make();
-          rayPath.moveTo(startX, startY);
-          rayPath.lineTo(endX, endY);
-          return /*#__PURE__*/_jsx(Path, {
-            path: rayPath,
-            style: "stroke",
-            strokeWidth: rayWidth,
-            color: "#FFD700",
-            opacity: 0.7
-          }, index);
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.8,
-          cy: sunY,
-          r: 60,
-          opacity: 0.1,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-60, -60),
-            end: vec(60, 60),
-            colors: ['#FFD700', 'transparent']
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.12,
-            cy: cloud1Y,
-            r: 16,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.18,
-            cy: cloud1Y - (height * 0.24 - height * 0.21),
-            r: 22,
-            color: "#FFFFFF",
-            opacity: 0.45,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.25,
-            cy: cloud1Y - (height * 0.24 - height * 0.19),
-            r: 26,
-            color: "#F8F8FF",
-            opacity: 0.55,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 2,
-              dy: 3,
-              blur: 12,
-              color: "rgba(0,0,0,0.06)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.32,
-            cy: cloud1Y - (height * 0.24 - height * 0.21),
-            r: 20,
-            color: "#FFFFFF",
-            opacity: 0.50,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.37,
-            cy: cloud1Y,
-            r: 14,
-            color: "#F0F8FF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.15,
-            cy: cloud1Y + (height * 0.26 - height * 0.24),
-            r: 8,
-            color: "#F8F8FF",
-            opacity: 0.25
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.35,
-            cy: cloud1Y - (height * 0.24 - height * 0.18),
-            r: 6,
-            color: "#FFFFFF",
-            opacity: 0.30
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.40,
-            cy: cloud1Y - (height * 0.24 - height * 0.22),
-            r: 5,
-            color: "#F0F8FF",
-            opacity: 0.20
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.22,
-            cy: cloud1Y - (height * 0.24 - height * 0.18),
-            r: 7,
-            color: "#FFFFFF",
-            opacity: 0.35
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.28,
-            cy: cloud1Y - (height * 0.24 - height * 0.20),
-            r: 5,
-            color: "#FFFFFF",
-            opacity: 0.25
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.62,
-            cy: cloud2Y,
-            r: 15,
-            color: "#F0F8FF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.69,
-            cy: cloud2Y - (height * 0.27 - height * 0.24),
-            r: 19,
-            color: "#FFFFFF",
-            opacity: 0.50,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.76,
-            cy: cloud2Y - (height * 0.27 - height * 0.26),
-            r: 13,
-            color: "#F8F8FF",
-            opacity: 0.45,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.81,
-            cy: cloud2Y + (height * 0.28 - height * 0.27),
-            r: 9,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 1,
-              blur: 8,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.65,
-            cy: cloud2Y + (height * 0.29 - height * 0.27),
-            r: 6,
-            color: "#F8F8FF",
-            opacity: 0.20
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.78,
-            cy: cloud2Y - (height * 0.27 - height * 0.23),
-            r: 4,
-            color: "#FFFFFF",
-            opacity: 0.25
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.67,
-            cy: cloud2Y - (height * 0.27 - height * 0.23),
-            r: 5,
-            color: "#FFFFFF",
-            opacity: 0.30
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.84,
-            cy: cloud3Y,
-            r: 10,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.89,
-            cy: cloud3Y - (height * 0.19 - height * 0.17),
-            r: 12,
-            color: "#FFFFFF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.93,
-            cy: cloud3Y,
-            r: 8,
-            color: "#F8F8FF",
-            opacity: 0.30,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.02)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.96,
-            cy: cloud3Y - (height * 0.19 - height * 0.18),
-            r: 4,
-            color: "#F0F8FF",
-            opacity: 0.15
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.86,
-            cy: cloud3Y + (height * 0.21 - height * 0.19),
-            r: 3,
-            color: "#FFFFFF",
-            opacity: 0.20
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.45,
-            cy: height * 0.15,
-            r: 8,
-            color: "#F8F8FF",
-            opacity: 0.25,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 4,
-              color: "rgba(0,0,0,0.02)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.50,
-            cy: height * 0.13,
-            r: 10,
-            color: "#FFFFFF",
-            opacity: 0.30,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 4,
-              color: "rgba(0,0,0,0.02)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.54,
-            cy: height * 0.15,
-            r: 6,
-            color: "#F0F8FF",
-            opacity: 0.20,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 4,
-              color: "rgba(0,0,0,0.01)"
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: grassStartY,
-        width: width,
-        height: buttonAreaHeight,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, grassStartY),
-          end: vec(0, height),
-          colors: ['#8B4513', '#A0522D', '#654321']
-        })
-      }), /*#__PURE__*/_jsxs(Path, {
-        path: grassPath,
-        children: [/*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, grassStartY - 20),
-          end: vec(0, grassStartY + 20),
-          colors: ['#32CD32', '#228B22', '#006400']
-        }), /*#__PURE__*/_jsx(Shadow, {
-          dx: 0,
-          dy: -2,
-          blur: 4,
-          color: "rgba(0,0,0,0.2)"
-        })]
-      }), Array.from({
-        length: 50
-      }, (_, i) => {
-        const x = width / 50 * i + Math.random() * 15;
-        const grassHeight = 12 + Math.random() * 18;
-        const grassType = Math.random();
-        const bladePath = Skia.Path.Make();
-        bladePath.moveTo(x, grassStartY);
-        if (grassType < 0.4) {
-          // Tall thin grass with slight curve - STATIC
-          bladePath.quadTo(x + 1, grassStartY - grassHeight * 0.6, x + Math.random() * 2 - 1, grassStartY - grassHeight);
-          return /*#__PURE__*/_jsx(Path, {
-            path: bladePath,
-            style: "stroke",
-            strokeWidth: 1.5,
-            color: "#16a34a",
-            opacity: 0.8 + Math.random() * 0.2
-          }, `grass-${i}`);
-        } else if (grassType < 0.7) {
-          // Medium curved grass - STATIC
-          bladePath.quadTo(x + 2, grassStartY - grassHeight * 0.4, x + 3, grassStartY - grassHeight);
-          return /*#__PURE__*/_jsx(Path, {
-            path: bladePath,
-            style: "stroke",
-            strokeWidth: 2,
-            color: "#15803d",
-            opacity: 0.7 + Math.random() * 0.3
-          }, `grass-${i}`);
-        } else {
-          // Short wide grass with multiple segments - STATIC
-          const midHeight = grassHeight * 0.5;
-          bladePath.quadTo(x + 1, grassStartY - midHeight, x + 2, grassStartY - grassHeight);
-          return /*#__PURE__*/_jsxs(Group, {
-            children: [/*#__PURE__*/_jsx(Path, {
-              path: bladePath,
-              style: "stroke",
-              strokeWidth: 2.5,
-              color: "#166534",
-              opacity: 0.6 + Math.random() * 0.4
-            }), Math.random() < 0.3 && /*#__PURE__*/_jsx(Circle, {
-              cx: x + 2,
-              cy: grassStartY - grassHeight,
-              r: 0.8,
-              color: "#22c55e",
-              opacity: 0.8
-            })]
-          }, `grass-group-${i}`);
-        }
-      }), Array.from({
-        length: 30
-      }, (_, i) => {
-        const x = Math.random() * width;
-        const y = grassStartY - 10 + Math.random() * 20; // Position around grass line
-        const grassClusterHeight = 8 + Math.random() * 6;
-        const clusterPath = Skia.Path.Make();
-        clusterPath.moveTo(x, y);
-        clusterPath.lineTo(x + Math.random() * 2 - 1, y - grassClusterHeight);
-        clusterPath.moveTo(x + 2, y);
-        clusterPath.lineTo(x + 2 + Math.random() * 2 - 1, y - grassClusterHeight * 0.8);
-        clusterPath.moveTo(x + 4, y);
-        clusterPath.lineTo(x + 4 + Math.random() * 2 - 1, y - grassClusterHeight * 0.6);
-        return /*#__PURE__*/_jsx(Path, {
-          path: clusterPath,
-          style: "stroke",
-          strokeWidth: 1,
-          color: "#22c55e",
-          opacity: 0.4
-        }, `cluster-${i}`);
-      }), Array.from({
-        length: 15
-      }, (_, i) => {
-        const x = Math.random() * width;
-        const y = grassStartY + 20 + Math.random() * (buttonAreaHeight - 40); // Keep within button area
-        const size = 2 + Math.random() * 3;
-        return /*#__PURE__*/_jsx(Circle, {
-          cx: x,
-          cy: y,
-          r: size,
-          color: "#8B4513",
-          opacity: 0.6
-        }, i);
-      })]
-    }), children]
-  });
-});
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{View,Dimensions}from 'react-native';import{Canvas,LinearGradient,Rect,Circle,Path,Skia,vec,Group,Shadow}from '@shopify/react-native-skia';import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');export const GameBackground = React.memo(({children,offset = 0})=>{const sunY = height * 0.15 + offset * 0.9;const cloud1Y = height * 0.24 + offset * 0.8;const cloud2Y = height * 0.27 + offset * 0.8;const cloud3Y = height * 0.19 + offset * 0.8;const buttonAreaHeight = offset > 0 ? 150:250;const grassStartY = height - buttonAreaHeight;const createGrassPath =(startX,segments = 8)=>{const path = Skia.Path.Make();const segmentWidth = width / segments;path.moveTo(startX,grassStartY);for(let i = 0;i < segments;i++){const x = startX + i * segmentWidth;const y = grassStartY + Math.sin(i * 0.5)* 8;const controlX = x + segmentWidth / 2;const controlY = y + Math.cos(i * 0.3)* 6;path.quadTo(controlX,controlY,x + segmentWidth,y);}path.lineTo(width,height);path.lineTo(startX,height);path.close();return path;};const grassPath = createGrassPath(0);return _jsxs(View,{style:{flex:1},children:[_jsxs(Canvas,{style:{position:'absolute',width,height},children:[_jsx(Rect,{x:0,y:0,width:width,height:grassStartY,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,grassStartY),colors:['#87CEEB','#98D8E8','#B0E0E6']})}),_jsxs(Group,{children:[_jsxs(Circle,{cx:width * 0.8,cy:sunY,r:40,children:[_jsx(LinearGradient,{start:vec(-40,-40),end:vec(40,40),colors:['#FFFF99','#FFD700','#FFA500','#FF8C00']}),_jsx(Shadow,{dx:0,dy:0,blur:30,color:"#FFD700"})]}),_jsx(Circle,{cx:width * 0.8 - 8,cy:sunY - 8,r:15,children:_jsx(LinearGradient,{start:vec(-15,-15),end:vec(15,15),colors:['#FFFFFF','#FFFF99']})}),Array.from({length:16},(_,index)=>{const angle = 360 / 16 * index;const radian = angle * Math.PI / 180;const isLongRay = index % 2 === 0;const rayLength = isLongRay ? 25:15;const rayWidth = isLongRay ? 4:2;const startDistance = 45;const startX = width * 0.8 + Math.cos(radian)* startDistance;const startY = sunY + Math.sin(radian)* startDistance;const endX = width * 0.8 + Math.cos(radian)*(startDistance + rayLength);const endY = sunY + Math.sin(radian)*(startDistance + rayLength);const rayPath = Skia.Path.Make();rayPath.moveTo(startX,startY);rayPath.lineTo(endX,endY);return _jsx(Path,{path:rayPath,style:"stroke",strokeWidth:rayWidth,color:"#FFD700",opacity:0.7},index);}),_jsx(Circle,{cx:width * 0.8,cy:sunY,r:60,opacity:0.1,children:_jsx(LinearGradient,{start:vec(-60,-60),end:vec(60,60),colors:['#FFD700','transparent']})})]}),_jsxs(Group,{children:[_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.12,cy:cloud1Y,r:16,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.18,cy:cloud1Y -(height * 0.24 - height * 0.21),r:22,color:"#FFFFFF",opacity:0.45,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.25,cy:cloud1Y -(height * 0.24 - height * 0.19),r:26,color:"#F8F8FF",opacity:0.55,children:_jsx(Shadow,{dx:2,dy:3,blur:12,color:"rgba(0,0,0,0.06)"})}),_jsx(Circle,{cx:width * 0.32,cy:cloud1Y -(height * 0.24 - height * 0.21),r:20,color:"#FFFFFF",opacity:0.50,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.37,cy:cloud1Y,r:14,color:"#F0F8FF",opacity:0.40,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.15,cy:cloud1Y +(height * 0.26 - height * 0.24),r:8,color:"#F8F8FF",opacity:0.25}),_jsx(Circle,{cx:width * 0.35,cy:cloud1Y -(height * 0.24 - height * 0.18),r:6,color:"#FFFFFF",opacity:0.30}),_jsx(Circle,{cx:width * 0.40,cy:cloud1Y -(height * 0.24 - height * 0.22),r:5,color:"#F0F8FF",opacity:0.20}),_jsx(Circle,{cx:width * 0.22,cy:cloud1Y -(height * 0.24 - height * 0.18),r:7,color:"#FFFFFF",opacity:0.35}),_jsx(Circle,{cx:width * 0.28,cy:cloud1Y -(height * 0.24 - height * 0.20),r:5,color:"#FFFFFF",opacity:0.25})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.62,cy:cloud2Y,r:15,color:"#F0F8FF",opacity:0.40,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.69,cy:cloud2Y -(height * 0.27 - height * 0.24),r:19,color:"#FFFFFF",opacity:0.50,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.76,cy:cloud2Y -(height * 0.27 - height * 0.26),r:13,color:"#F8F8FF",opacity:0.45,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.81,cy:cloud2Y +(height * 0.28 - height * 0.27),r:9,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:1,dy:1,blur:8,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.65,cy:cloud2Y +(height * 0.29 - height * 0.27),r:6,color:"#F8F8FF",opacity:0.20}),_jsx(Circle,{cx:width * 0.78,cy:cloud2Y -(height * 0.27 - height * 0.23),r:4,color:"#FFFFFF",opacity:0.25}),_jsx(Circle,{cx:width * 0.67,cy:cloud2Y -(height * 0.27 - height * 0.23),r:5,color:"#FFFFFF",opacity:0.30})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.84,cy:cloud3Y,r:10,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.89,cy:cloud3Y -(height * 0.19 - height * 0.17),r:12,color:"#FFFFFF",opacity:0.40,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.93,cy:cloud3Y,r:8,color:"#F8F8FF",opacity:0.30,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.96,cy:cloud3Y -(height * 0.19 - height * 0.18),r:4,color:"#F0F8FF",opacity:0.15}),_jsx(Circle,{cx:width * 0.86,cy:cloud3Y +(height * 0.21 - height * 0.19),r:3,color:"#FFFFFF",opacity:0.20})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.45,cy:height * 0.15,r:8,color:"#F8F8FF",opacity:0.25,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.50,cy:height * 0.13,r:10,color:"#FFFFFF",opacity:0.30,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.54,cy:height * 0.15,r:6,color:"#F0F8FF",opacity:0.20,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.01)"})})]})]}),_jsx(Rect,{x:0,y:grassStartY,width:width,height:buttonAreaHeight,children:_jsx(LinearGradient,{start:vec(0,grassStartY),end:vec(0,height),colors:['#8B4513','#A0522D','#654321']})}),_jsxs(Path,{path:grassPath,children:[_jsx(LinearGradient,{start:vec(0,grassStartY - 20),end:vec(0,grassStartY + 20),colors:['#32CD32','#228B22','#006400']}),_jsx(Shadow,{dx:0,dy:-2,blur:4,color:"rgba(0,0,0,0.2)"})]}),Array.from({length:50},(_,i)=>{const x = width / 50 * i + Math.random()* 15;const grassHeight = 12 + Math.random()* 18;const grassType = Math.random();const bladePath = Skia.Path.Make();bladePath.moveTo(x,grassStartY);if(grassType < 0.4){bladePath.quadTo(x + 1,grassStartY - grassHeight * 0.6,x + Math.random()* 2 - 1,grassStartY - grassHeight);return _jsx(Path,{path:bladePath,style:"stroke",strokeWidth:1.5,color:"#16a34a",opacity:0.8 + Math.random()* 0.2},`grass-${i}`);}else if(grassType < 0.7){bladePath.quadTo(x + 2,grassStartY - grassHeight * 0.4,x + 3,grassStartY - grassHeight);return _jsx(Path,{path:bladePath,style:"stroke",strokeWidth:2,color:"#15803d",opacity:0.7 + Math.random()* 0.3},`grass-${i}`);}else{const midHeight = grassHeight * 0.5;bladePath.quadTo(x + 1,grassStartY - midHeight,x + 2,grassStartY - grassHeight);return _jsxs(Group,{children:[_jsx(Path,{path:bladePath,style:"stroke",strokeWidth:2.5,color:"#166534",opacity:0.6 + Math.random()* 0.4}),Math.random()< 0.3 && _jsx(Circle,{cx:x + 2,cy:grassStartY - grassHeight,r:0.8,color:"#22c55e",opacity:0.8})]},`grass-group-${i}`);}}),Array.from({length:30},(_,i)=>{const x = Math.random()* width;const y = grassStartY - 10 + Math.random()* 20;const grassClusterHeight = 8 + Math.random()* 6;const clusterPath = Skia.Path.Make();clusterPath.moveTo(x,y);clusterPath.lineTo(x + Math.random()* 2 - 1,y - grassClusterHeight);clusterPath.moveTo(x + 2,y);clusterPath.lineTo(x + 2 + Math.random()* 2 - 1,y - grassClusterHeight * 0.8);clusterPath.moveTo(x + 4,y);clusterPath.lineTo(x + 4 + Math.random()* 2 - 1,y - grassClusterHeight * 0.6);return _jsx(Path,{path:clusterPath,style:"stroke",strokeWidth:1,color:"#22c55e",opacity:0.4},`cluster-${i}`);}),Array.from({length:15},(_,i)=>{const x = Math.random()* width;const y = grassStartY + 20 + Math.random()*(buttonAreaHeight - 40);const size = 2 + Math.random()* 3;return _jsx(Circle,{cx:x,cy:y,r:size,color:"#8B4513",opacity:0.6},i);})]}),children]});});