react-native-games 0.3.0 → 0.5.0

package/lib/module/games/{fruit-slicer → fruit-ninja}/components/GameBackground.js

@@ -1,77 +1,81 @@
 "use strict";
 
-import React, { useEffect } from 'react';
-import { Dimensions } from 'react-native';
+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 { useSharedValue, useAnimatedStyle, withRepeat, withTiming, withSequence, interpolate, Extrapolation } from 'react-native-reanimated';
-import Animated from 'react-native-reanimated';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   width,
   height
 } = Dimensions.get('window');
-export const GameBackground = ({
-  children
-}) => {
-  // Animated values for dynamic background effects (removed grass animation)
-  const cloudFloat = useSharedValue(0);
-  const sunGlow = useSharedValue(0);
-  const sunRotation = useSharedValue(0);
-  useEffect(() => {
-    // Removed grass swaying animation for static grass
+// Pre-compute all static values outside component to ensure no animations
+const buttonAreaHeight = 250;
+const grassStartY = height - buttonAreaHeight;
 
-    // Cloud floating animation
-    cloudFloat.value = withRepeat(withTiming(1, {
-      duration: 8000
-    }), -1, false);
-
-    // Sun glow pulsing
-    sunGlow.value = withRepeat(withSequence(withTiming(1, {
-      duration: 2000
-    }), withTiming(0.7, {
-      duration: 2000
-    })), -1, false);
+// Create static grass path
+const createStaticGrassPath = () => {
+  const path = Skia.Path.Make();
+  const segmentWidth = width / 8;
+  path.moveTo(0, grassStartY);
+  for (let i = 0; i < 8; i++) {
+    const x = 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(0, height);
+  path.close();
+  return path;
+};
 
-    // Sun rotation animation (slow continuous rotation)
-    sunRotation.value = withRepeat(withTiming(360, {
-      duration: 30000
-    }), -1, false);
-  }, []);
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
+// Pre-compute static sun rays
+const createStaticSunRays = () => {
+  return 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 = height * 0.15 + Math.sin(radian) * startDistance;
+    const endX = width * 0.8 + Math.cos(radian) * (startDistance + rayLength);
+    const endY = height * 0.15 + Math.sin(radian) * (startDistance + rayLength);
+    const rayPath = Skia.Path.Make();
+    rayPath.moveTo(startX, startY);
+    rayPath.lineTo(endX, endY);
     return {
-      transform: []
+      path: rayPath,
+      width: rayWidth
     };
   });
+};
 
-  // Create grass path - UNUSED FUNCTION
-  // const createGrassPath = (startX: number, segments: number = 8) => {
-  //   const path = Skia.Path.Make();
-  //   const segmentWidth = width / segments;
-  //
-  //   path.moveTo(startX, height * 0.7);
-  //
-  //   for (let i = 0; i < segments; i++) {
-  //     const x = startX + i * segmentWidth;
-  //     const y = height * 0.7 + Math.sin(i * 0.5) * 10;
-  //     const controlX = x + segmentWidth / 2;
-  //     const controlY = y + Math.cos(i * 0.3) * 8;
-  //
-  //     path.quadTo(controlX, controlY, x + segmentWidth, y);
-  //   }
-  //
-  //   path.lineTo(width, height);
-  //   path.lineTo(startX, height);
-  //   path.close();
-  //
-  //   return path;
-  // };
-
-  // const grassPath = createGrassPath(0); // Unused variable
+// Create static flower positions
+const createStaticFlowerPositions = () => {
+  return Array.from({
+    length: 12
+  }, (_, i) => ({
+    x: width / 12 * i + i % 3 * 15 + 20,
+    y: grassStartY - 10 - i % 4 * 8
+  }));
+};
 
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [{
+// Static computed values
+const staticGrassPath = createStaticGrassPath();
+const staticSunRays = createStaticSunRays();
+const flowerPositions = createStaticFlowerPositions();
+export const GameBackground = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
       flex: 1
-    }, animatedBackgroundStyle],
+    },
     children: [/*#__PURE__*/_jsxs(Canvas, {
       style: {
         position: 'absolute',
@@ -86,24 +90,23 @@ export const GameBackground = ({
         x: 0,
         y: 0,
         width: width,
-        height: height,
+        height: grassStartY,
         children: /*#__PURE__*/_jsx(LinearGradient, {
           start: vec(0, 0),
+          end: vec(0, grassStartY),
+          colors: ['#87CEEB', '#98D8E8', '#B0E0E6']
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: 0,
+        y: grassStartY,
+        width: width,
+        height: buttonAreaHeight,
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          start: vec(0, grassStartY),
           end: vec(0, height),
-          colors: ['#87CEEB', '#98D8E8', '#B0E0E6', '#90EE90', '#228B22']
+          colors: ['#8B4513', '#A0522D', '#654321']
         })
       }), /*#__PURE__*/_jsxs(Group, {
-        transform: [{
-          translateX: width * 0.8
-        }, {
-          translateY: height * 0.15
-        }, {
-          rotate: sunRotation.value * Math.PI / 180
-        }, {
-          translateX: -width * 0.8
-        }, {
-          translateY: -height * 0.15
-        }],
         children: [/*#__PURE__*/_jsxs(Circle, {
           cx: width * 0.8,
           cy: height * 0.15,
@@ -115,7 +118,7 @@ export const GameBackground = ({
           }), /*#__PURE__*/_jsx(Shadow, {
             dx: 0,
             dy: 0,
-            blur: interpolate(sunGlow.value, [0.7, 1], [25, 40], Extrapolation.CLAMP),
+            blur: 32,
             color: "#FFD700"
           })]
         }), /*#__PURE__*/_jsx(Circle, {
@@ -127,30 +130,13 @@ export const GameBackground = ({
             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 = height * 0.15 + Math.sin(radian) * startDistance;
-          const endX = width * 0.8 + Math.cos(radian) * (startDistance + rayLength);
-          const endY = height * 0.15 + 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: interpolate(sunGlow.value, [0.7, 1], [0.6, 0.9], Extrapolation.CLAMP)
-          }, index);
-        }), /*#__PURE__*/_jsx(Circle, {
+        }), staticSunRays.map((ray, index) => /*#__PURE__*/_jsx(Path, {
+          path: ray.path,
+          style: "stroke",
+          strokeWidth: ray.width,
+          color: "#FFD700",
+          opacity: 0.75
+        }, index)), /*#__PURE__*/_jsx(Circle, {
           cx: width * 0.8,
           cy: height * 0.15,
           r: 60,
@@ -163,9 +149,6 @@ export const GameBackground = ({
         })]
       }), /*#__PURE__*/_jsxs(Group, {
         children: [/*#__PURE__*/_jsxs(Group, {
-          transform: [{
-            translateX: interpolate(cloudFloat.value, [0, 1], [-4, 4], Extrapolation.CLAMP)
-          }],
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.12,
             cy: height * 0.24,
@@ -258,9 +241,6 @@ export const GameBackground = ({
             opacity: 0.25
           })]
         }), /*#__PURE__*/_jsxs(Group, {
-          transform: [{
-            translateX: interpolate(cloudFloat.value, [0, 1], [3, -3], Extrapolation.CLAMP)
-          }],
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.62,
             cy: height * 0.27,
@@ -329,9 +309,6 @@ export const GameBackground = ({
             opacity: 0.30
           })]
         }), /*#__PURE__*/_jsxs(Group, {
-          transform: [{
-            translateX: interpolate(cloudFloat.value, [0, 1], [1.5, -1.5], Extrapolation.CLAMP)
-          }],
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.84,
             cy: height * 0.19,
@@ -382,9 +359,6 @@ export const GameBackground = ({
             opacity: 0.20
           })]
         }), /*#__PURE__*/_jsxs(Group, {
-          transform: [{
-            translateX: interpolate(cloudFloat.value, [0, 1], [-2, 2], Extrapolation.CLAMP)
-          }],
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.45,
             cy: height * 0.15,
@@ -423,70 +397,70 @@ export const GameBackground = ({
             })
           })]
         })]
+      }), /*#__PURE__*/_jsxs(Path, {
+        path: staticGrassPath,
+        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
+        length: 25
       }, (_, i) => {
-        const x = width / 50 * i + i % 3 * 5; // Static positioning
-        const grassHeight = 12 + i % 4 * 6; // Deterministic height
-        const swayAmount = 0; // No sway animation
-        const grassType = i % 10 / 10; // Deterministic grass type
+        const x = width / 25 * i + i % 3 * 5; // Fixed pattern instead of random
+        const grassHeight = 15 + i % 4 * 5; // Fixed heights
+        const grassType = i % 3; // Fixed types
 
         const bladePath = Skia.Path.Make();
-        bladePath.moveTo(x, height * 0.7);
-        if (grassType < 0.4) {
-          // Tall thin grass with slight curve
-          bladePath.quadTo(x + swayAmount + 1, height * 0.7 - grassHeight * 0.6, x + swayAmount + i % 2, height * 0.7 - grassHeight);
+        bladePath.moveTo(x, grassStartY);
+        if (grassType === 0) {
+          bladePath.quadTo(x + 1, grassStartY - grassHeight * 0.6, x + 1, grassStartY - grassHeight);
           return /*#__PURE__*/_jsx(Path, {
             path: bladePath,
             style: "stroke",
             strokeWidth: 1.5,
             color: "#16a34a",
-            opacity: 0.8 + i % 3 * 0.1
+            opacity: 0.8
           }, `grass-${i}`);
-        } else if (grassType < 0.7) {
-          // Medium curved grass
-          bladePath.quadTo(x + swayAmount + 2, height * 0.7 - grassHeight * 0.4, x + swayAmount + 3, height * 0.7 - grassHeight);
+        } else if (grassType === 1) {
+          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 + i % 4 * 0.1
+            opacity: 0.7
           }, `grass-${i}`);
         } else {
-          // Short wide grass with multiple segments
           const midHeight = grassHeight * 0.5;
-          bladePath.quadTo(x + swayAmount + 1, height * 0.7 - midHeight, x + swayAmount + 2, height * 0.7 - grassHeight);
-          return /*#__PURE__*/_jsxs(Group, {
-            children: [/*#__PURE__*/_jsx(Path, {
-              path: bladePath,
-              style: "stroke",
-              strokeWidth: 2.5,
-              color: "#166534",
-              opacity: 0.6 + i % 5 * 0.08
-            }), i % 4 === 0 && /*#__PURE__*/_jsx(Circle, {
-              cx: x + swayAmount + 2,
-              cy: height * 0.7 - grassHeight,
-              r: 0.8,
-              color: "#22c55e",
-              opacity: 0.8
-            })]
-          }, `grass-group-${i}`);
+          bladePath.quadTo(x + 1, grassStartY - midHeight, x + 2, grassStartY - grassHeight);
+          return /*#__PURE__*/_jsx(Path, {
+            path: bladePath,
+            style: "stroke",
+            strokeWidth: 2.5,
+            color: "#166534",
+            opacity: 0.6
+          }, `grass-${i}`);
         }
       }), Array.from({
-        length: 30
+        length: 20
       }, (_, i) => {
-        const x = width / 30 * i + i % 2 * 10; // Static positioning
-        const y = height * 0.68 + i % 3 * (height * 0.01); // Static positioning
-        const grassClusterHeight = 8 + i % 3 * 2; // Deterministic height
+        const x = width / 20 * i + i % 2 * 10; // Fixed positions
+        const y = grassStartY - 5 + i % 3 * 5; // Fixed Y positions
+        const grassClusterHeight = 10 + i % 3 * 2; // Fixed heights
 
         const clusterPath = Skia.Path.Make();
         clusterPath.moveTo(x, y);
-        clusterPath.lineTo(x + i % 2, y - grassClusterHeight);
+        clusterPath.lineTo(x + 1, y - grassClusterHeight);
         clusterPath.moveTo(x + 2, y);
-        clusterPath.lineTo(x + 2 + i % 2, y - grassClusterHeight * 0.8);
+        clusterPath.lineTo(x + 3, y - grassClusterHeight * 0.8);
         clusterPath.moveTo(x + 4, y);
-        clusterPath.lineTo(x + 4 + i % 2, y - grassClusterHeight * 0.6);
+        clusterPath.lineTo(x + 5, y - grassClusterHeight * 0.6);
         return /*#__PURE__*/_jsx(Path, {
           path: clusterPath,
           style: "stroke",
@@ -494,13 +468,27 @@ export const GameBackground = ({
           color: "#22c55e",
           opacity: 0.4
         }, `cluster-${i}`);
+      }), Array.from({
+        length: 8
+      }, (_, i) => {
+        const x = width / 8 * i + i % 3 * 20; // Fixed positions
+        const y = grassStartY + 30 + i % 4 * 15; // Fixed Y positions
+        const size = 2 + i % 3; // Fixed sizes
+
+        return /*#__PURE__*/_jsx(Circle, {
+          cx: x,
+          cy: y,
+          r: size,
+          color: "#8B4513",
+          opacity: 0.6
+        }, i);
       }), /*#__PURE__*/_jsxs(Group, {
         children: [/*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsxs(Rect, {
             x: width * 0.05,
-            y: height * 0.45,
+            y: grassStartY - 150,
             width: 20,
-            height: height * 0.25,
+            height: 150,
             children: [/*#__PURE__*/_jsx(LinearGradient, {
               start: vec(0, 0),
               end: vec(20, 0),
@@ -513,35 +501,35 @@ export const GameBackground = ({
             })]
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 3,
-            y: height * 0.50,
+            y: grassStartY - 120,
             width: 1,
-            height: height * 0.15,
+            height: 90,
             color: "#5D4037",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 7,
-            y: height * 0.48,
+            y: grassStartY - 140,
             width: 1.5,
-            height: height * 0.18,
+            height: 110,
             color: "#4A2C2A",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 12,
-            y: height * 0.52,
+            y: grassStartY - 100,
             width: 1,
-            height: height * 0.12,
+            height: 70,
             color: "#5D4037",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 16,
-            y: height * 0.49,
+            y: grassStartY - 130,
             width: 1.5,
-            height: height * 0.16,
+            height: 100,
             color: "#4A2C2A",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 18,
-            y: height * 0.48,
+            y: grassStartY - 130,
             width: 12,
             height: 4,
             color: "#8B4513",
@@ -554,7 +542,7 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 - 2,
-            y: height * 0.52,
+            y: grassStartY - 100,
             width: 10,
             height: 3,
             color: "#A0522D",
@@ -567,7 +555,7 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.05 + 15,
-            y: height * 0.42,
+            y: grassStartY - 160,
             width: 8,
             height: 3,
             color: "#8B4513",
@@ -580,7 +568,7 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 10,
-            cy: height * 0.45,
+            cy: grassStartY - 150,
             r: 38,
             color: "#1B5E20",
             opacity: 0.9,
@@ -592,91 +580,91 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 18,
-            cy: height * 0.42,
+            cy: grassStartY - 180,
             r: 32,
             color: "#2E7D32",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 25,
-            cy: height * 0.46,
+            cy: grassStartY - 140,
             r: 28,
             color: "#388E3C",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 2,
-            cy: height * 0.48,
+            cy: grassStartY - 120,
             r: 30,
             color: "#2E7D32",
             opacity: 0.75
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 - 5,
-            cy: height * 0.44,
+            cy: grassStartY - 160,
             r: 25,
             color: "#1B5E20",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 8,
-            cy: height * 0.38,
+            cy: grassStartY - 200,
             r: 26,
             color: "#4CAF50",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 20,
-            cy: height * 0.38,
+            cy: grassStartY - 200,
             r: 22,
             color: "#66BB6A",
             opacity: 0.5
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 12,
-            cy: height * 0.43,
+            cy: grassStartY - 170,
             r: 20,
             color: "#388E3C",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 6,
-            cy: height * 0.46,
+            cy: grassStartY - 140,
             r: 18,
             color: "#2E7D32",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 15,
-            cy: height * 0.35,
+            cy: grassStartY - 220,
             r: 15,
             color: "#81C784",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 3,
-            cy: height * 0.37,
+            cy: grassStartY - 210,
             r: 12,
             color: "#A5D6A7",
             opacity: 0.5
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 28,
-            cy: height * 0.41,
+            cy: grassStartY - 180,
             r: 14,
             color: "#81C784",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 - 8,
-            cy: height * 0.41,
+            cy: grassStartY - 180,
             r: 16,
             color: "#66BB6A",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 5,
-            cy: height * 0.36,
+            cy: grassStartY - 230,
             r: 10,
             color: "#C8E6C9",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 18,
-            cy: height * 0.34,
+            cy: grassStartY - 240,
             r: 8,
             color: "#E8F5E8",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.05 + 22,
-            cy: height * 0.39,
+            cy: grassStartY - 190,
             r: 6,
             color: "#C8E6C9",
             opacity: 0.8
@@ -684,9 +672,9 @@ export const GameBackground = ({
         }), /*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsxs(Rect, {
             x: width * 0.88,
-            y: height * 0.35,
+            y: grassStartY - 200,
             width: 18,
-            height: height * 0.35,
+            height: 200,
             children: [/*#__PURE__*/_jsx(LinearGradient, {
               start: vec(0, 0),
               end: vec(18, 0),
@@ -699,35 +687,35 @@ export const GameBackground = ({
             })]
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.88 + 2,
-            y: height * 0.38,
+            y: grassStartY - 170,
             width: 1,
-            height: height * 0.25,
+            height: 150,
             color: "#3E2723",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.88 + 6,
-            y: height * 0.36,
+            y: grassStartY - 190,
             width: 1.5,
-            height: height * 0.28,
+            height: 170,
             color: "#2E1A16",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.88 + 11,
-            y: height * 0.39,
+            y: grassStartY - 160,
             width: 1,
-            height: height * 0.22,
+            height: 130,
             color: "#3E2723",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Rect, {
             x: width * 0.88 + 14,
-            y: height * 0.37,
+            y: grassStartY - 180,
             width: 1.5,
-            height: height * 0.26,
+            height: 160,
             color: "#2E1A16",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 9,
-            cy: height * 0.48,
+            cy: grassStartY - 120,
             r: 35,
             color: "#0D4F0C",
             opacity: 0.95,
@@ -739,109 +727,109 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 5,
-            cy: height * 0.50,
+            cy: grassStartY - 100,
             r: 30,
             color: "#1B5E20",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 13,
-            cy: height * 0.49,
+            cy: grassStartY - 110,
             r: 28,
             color: "#2E7D32",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 9,
-            cy: height * 0.42,
+            cy: grassStartY - 180,
             r: 32,
             color: "#1B5E20",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 6,
-            cy: height * 0.43,
+            cy: grassStartY - 170,
             r: 26,
             color: "#2E7D32",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 12,
-            cy: height * 0.41,
+            cy: grassStartY - 190,
             r: 24,
             color: "#388E3C",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 9,
-            cy: height * 0.36,
+            cy: grassStartY - 240,
             r: 28,
             color: "#2E7D32",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 7,
-            cy: height * 0.37,
+            cy: grassStartY - 230,
             r: 22,
             color: "#388E3C",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 11,
-            cy: height * 0.35,
+            cy: grassStartY - 250,
             r: 20,
             color: "#4CAF50",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 9,
-            cy: height * 0.30,
+            cy: grassStartY - 300,
             r: 22,
             color: "#388E3C",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 8,
-            cy: height * 0.31,
+            cy: grassStartY - 290,
             r: 18,
             color: "#4CAF50",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 10,
-            cy: height * 0.29,
+            cy: grassStartY - 310,
             r: 15,
             color: "#66BB6A",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 4,
-            cy: height * 0.45,
+            cy: grassStartY - 150,
             r: 8,
             color: "#0D4F0C",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 14,
-            cy: height * 0.43,
+            cy: grassStartY - 170,
             r: 6,
             color: "#1B5E20",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 3,
-            cy: height * 0.38,
+            cy: grassStartY - 220,
             r: 5,
             color: "#0D4F0C",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 15,
-            cy: height * 0.36,
+            cy: grassStartY - 240,
             r: 7,
             color: "#2E7D32",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 12,
-            cy: height * 0.32,
+            cy: grassStartY - 280,
             r: 8,
             color: "#81C784",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 11,
-            cy: height * 0.28,
+            cy: grassStartY - 320,
             r: 6,
             color: "#A5D6A7",
             opacity: 0.5
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.88 + 13,
-            cy: height * 0.39,
+            cy: grassStartY - 190,
             r: 5,
             color: "#C8E6C9",
             opacity: 0.7
@@ -851,7 +839,7 @@ export const GameBackground = ({
         children: [/*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.15,
-            cy: height * 0.64,
+            cy: grassStartY - 60,
             r: 26,
             color: "#1B5E20",
             opacity: 0.95,
@@ -863,85 +851,85 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.18,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 22,
             color: "#2E7D32",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.21,
-            cy: height * 0.63,
+            cy: grassStartY - 70,
             r: 18,
             color: "#388E3C",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.12,
-            cy: height * 0.62,
+            cy: grassStartY - 80,
             r: 20,
             color: "#2E7D32",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.09,
-            cy: height * 0.65,
+            cy: grassStartY - 50,
             r: 16,
             color: "#1B5E20",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.16,
-            cy: height * 0.58,
+            cy: grassStartY - 100,
             r: 19,
             color: "#4CAF50",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.19,
-            cy: height * 0.59,
+            cy: grassStartY - 95,
             r: 15,
             color: "#66BB6A",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.15,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 14,
             color: "#388E3C",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.17,
-            cy: height * 0.63,
+            cy: grassStartY - 70,
             r: 12,
             color: "#2E7D32",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.13,
-            cy: height * 0.59,
+            cy: grassStartY - 95,
             r: 10,
             color: "#81C784",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.20,
-            cy: height * 0.60,
+            cy: grassStartY - 85,
             r: 8,
             color: "#A5D6A7",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.11,
-            cy: height * 0.63,
+            cy: grassStartY - 70,
             r: 9,
             color: "#66BB6A",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.22,
-            cy: height * 0.62,
+            cy: grassStartY - 80,
             r: 7,
             color: "#81C784",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.16,
-            cy: height * 0.57,
+            cy: grassStartY - 105,
             r: 6,
             color: "#C8E6C9",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.19,
-            cy: height * 0.58,
+            cy: grassStartY - 100,
             r: 4,
             color: "#E8F5E8",
             opacity: 0.7
@@ -949,7 +937,7 @@ export const GameBackground = ({
         }), /*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.35,
-            cy: height * 0.66,
+            cy: grassStartY - 40,
             r: 21,
             color: "#1B5E20",
             opacity: 0.9,
@@ -961,37 +949,37 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.37,
-            cy: height * 0.64,
+            cy: grassStartY - 60,
             r: 17,
             color: "#2E7D32",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.33,
-            cy: height * 0.67,
+            cy: grassStartY - 30,
             r: 15,
             color: "#388E3C",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.36,
-            cy: height * 0.62,
+            cy: grassStartY - 80,
             r: 13,
             color: "#4CAF50",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.32,
-            cy: height * 0.64,
+            cy: grassStartY - 60,
             r: 10,
             color: "#66BB6A",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.38,
-            cy: height * 0.65,
+            cy: grassStartY - 50,
             r: 8,
             color: "#81C784",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.34,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 5,
             color: "#A5D6A7",
             opacity: 0.8
@@ -999,7 +987,7 @@ export const GameBackground = ({
         }), /*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.52,
-            cy: height * 0.65,
+            cy: grassStartY - 45,
             r: 25,
             color: "#1B5E20",
             opacity: 0.95,
@@ -1011,61 +999,61 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.55,
-            cy: height * 0.62,
+            cy: grassStartY - 75,
             r: 21,
             color: "#2E7D32",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.49,
-            cy: height * 0.66,
+            cy: grassStartY - 35,
             r: 19,
             color: "#388E3C",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.54,
-            cy: height * 0.59,
+            cy: grassStartY - 100,
             r: 16,
             color: "#4CAF50",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.50,
-            cy: height * 0.63,
+            cy: grassStartY - 70,
             r: 14,
             color: "#66BB6A",
             opacity: 0.75
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.47,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 11,
             color: "#81C784",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.56,
-            cy: height * 0.64,
+            cy: grassStartY - 55,
             r: 9,
             color: "#A5D6A7",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.51,
-            cy: height * 0.60,
+            cy: grassStartY - 85,
             r: 4,
             color: "#FF69B4",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.54,
-            cy: height * 0.62,
+            cy: grassStartY - 75,
             r: 3.5,
             color: "#FF6B6B",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.49,
-            cy: height * 0.64,
+            cy: grassStartY - 55,
             r: 3,
             color: "#FF1744",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.52,
-            cy: height * 0.58,
+            cy: grassStartY - 105,
             r: 6,
             color: "#C8E6C9",
             opacity: 0.8
@@ -1073,7 +1061,7 @@ export const GameBackground = ({
         }), /*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.72,
-            cy: height * 0.66,
+            cy: grassStartY - 35,
             r: 28,
             color: "#0D4F0C",
             opacity: 0.95,
@@ -1085,73 +1073,73 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.75,
-            cy: height * 0.63,
+            cy: grassStartY - 70,
             r: 24,
             color: "#1B5E20",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.69,
-            cy: height * 0.67,
+            cy: grassStartY - 25,
             r: 22,
             color: "#2E7D32",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.74,
-            cy: height * 0.60,
+            cy: grassStartY - 85,
             r: 19,
             color: "#388E3C",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.68,
-            cy: height * 0.64,
+            cy: grassStartY - 55,
             r: 17,
             color: "#4CAF50",
             opacity: 0.75
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.77,
-            cy: height * 0.65,
+            cy: grassStartY - 45,
             r: 14,
             color: "#66BB6A",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.66,
-            cy: height * 0.62,
+            cy: grassStartY - 75,
             r: 12,
             color: "#81C784",
             opacity: 0.65
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.71,
-            cy: height * 0.58,
+            cy: grassStartY - 95,
             r: 10,
             color: "#A5D6A7",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.73,
-            cy: height * 0.59,
+            cy: grassStartY - 100,
             r: 3,
             color: "#9C27B0",
             opacity: 0.9
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.70,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 2.5,
             color: "#673AB7",
             opacity: 0.85
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.76,
-            cy: height * 0.64,
+            cy: grassStartY - 55,
             r: 3.5,
             color: "#FF9800",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.73,
-            cy: height * 0.57,
+            cy: grassStartY - 110,
             r: 7,
             color: "#C8E6C9",
             opacity: 0.8
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.75,
-            cy: height * 0.61,
+            cy: grassStartY - 90,
             r: 5,
             color: "#E8F5E8",
             opacity: 0.7
@@ -1159,7 +1147,7 @@ export const GameBackground = ({
         }), /*#__PURE__*/_jsxs(Group, {
           children: [/*#__PURE__*/_jsx(Circle, {
             cx: width * 0.25,
-            cy: height * 0.68,
+            cy: grassStartY - 15,
             r: 15,
             color: "#1B5E20",
             opacity: 0.8,
@@ -1171,25 +1159,25 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.27,
-            cy: height * 0.66,
+            cy: grassStartY - 35,
             r: 12,
             color: "#2E7D32",
             opacity: 0.75
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.23,
-            cy: height * 0.69,
+            cy: grassStartY - 5,
             r: 10,
             color: "#388E3C",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.26,
-            cy: height * 0.65,
+            cy: grassStartY - 45,
             r: 7,
             color: "#66BB6A",
             opacity: 0.6
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.65,
-            cy: height * 0.69,
+            cy: grassStartY - 5,
             r: 13,
             color: "#2E7D32",
             opacity: 0.8,
@@ -1201,72 +1189,30 @@ export const GameBackground = ({
             })
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.67,
-            cy: height * 0.67,
+            cy: grassStartY - 25,
             r: 10,
             color: "#388E3C",
             opacity: 0.75
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.63,
-            cy: height * 0.70,
+            cy: grassStartY + 5,
             r: 8,
             color: "#4CAF50",
             opacity: 0.7
           }), /*#__PURE__*/_jsx(Circle, {
             cx: width * 0.66,
-            cy: height * 0.66,
+            cy: grassStartY - 35,
             r: 5,
             color: "#81C784",
             opacity: 0.6
           })]
         })]
       }), /*#__PURE__*/_jsx(Group, {
-        children: Array.from({
-          length: 12
-        }, (_, i) => {
-          const positions = [{
-            x: width * 0.20,
-            y: height * 0.69
-          }, {
-            x: width * 0.28,
-            y: height * 0.71
-          }, {
-            x: width * 0.38,
-            y: height * 0.68
-          }, {
-            x: width * 0.45,
-            y: height * 0.70
-          }, {
-            x: width * 0.58,
-            y: height * 0.69
-          }, {
-            x: width * 0.63,
-            y: height * 0.71
-          }, {
-            x: width * 0.77,
-            y: height * 0.68
-          }, {
-            x: width * 0.82,
-            y: height * 0.70
-          }, {
-            x: width * 0.22,
-            y: height * 0.73
-          }, {
-            x: width * 0.48,
-            y: height * 0.72
-          }, {
-            x: width * 0.68,
-            y: height * 0.73
-          }, {
-            x: width * 0.85,
-            y: height * 0.72
-          }];
+        children: flowerPositions.map((pos, i) => {
           const colors = ['#FF6B6B', '#FF69B4', '#9370DB', '#4169E1', '#FF8C00', '#32CD32'];
-          const pos = positions[i] || {
-            x: Math.random() * width,
-            y: height * 0.70
-          };
           const color = colors[i % colors.length];
-          const size = 3 + Math.random() * 2;
+          const size = 3 + i % 3; // Simplified size calculation
+
           return /*#__PURE__*/_jsxs(Group, {
             children: [/*#__PURE__*/_jsx(Circle, {
               cx: pos.x,
@@ -1277,7 +1223,7 @@ export const GameBackground = ({
               children: /*#__PURE__*/_jsx(Shadow, {
                 dx: 0,
                 dy: 1,
-                blur: 2,
+                blur: 1,
                 color: "rgba(0,0,0,0.2)"
               })
             }), /*#__PURE__*/_jsx(Circle, {