react-native-games 0.3.0 → 0.4.0

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

@@ -43,31 +43,27 @@ export const GameBackground = ({
     };
   });
 
-  // 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 grass path - matches Whack-A-Mole positioning
+  const buttonAreaHeight = 250; // Height for button 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(Animated.View, {
     style: [{
       flex: 1
@@ -86,11 +82,21 @@ 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: [{
@@ -423,19 +429,30 @@ export const GameBackground = ({
             })
           })]
         })]
+      }), /*#__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 + 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 / 50 * i + Math.random() * 15;
+        const grassHeight = 12 + Math.random() * 18;
+        const swayAmount = 0; // No animation
+        const grassType = Math.random();
         const bladePath = Skia.Path.Make();
-        bladePath.moveTo(x, height * 0.7);
+        bladePath.moveTo(x, grassStartY);
         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.quadTo(x + swayAmount + 1, grassStartY - grassHeight * 0.6, x + swayAmount + Math.random() * 2 - 1, grassStartY - grassHeight);
           return /*#__PURE__*/_jsx(Path, {
             path: bladePath,
             style: "stroke",
@@ -445,7 +462,7 @@ export const GameBackground = ({
           }, `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);
+          bladePath.quadTo(x + swayAmount + 2, grassStartY - grassHeight * 0.4, x + swayAmount + 3, grassStartY - grassHeight);
           return /*#__PURE__*/_jsx(Path, {
             path: bladePath,
             style: "stroke",
@@ -456,7 +473,7 @@ export const GameBackground = ({
         } 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);
+          bladePath.quadTo(x + swayAmount + 1, grassStartY - midHeight, x + swayAmount + 2, grassStartY - grassHeight);
           return /*#__PURE__*/_jsxs(Group, {
             children: [/*#__PURE__*/_jsx(Path, {
               path: bladePath,
@@ -464,9 +481,9 @@ export const GameBackground = ({
               strokeWidth: 2.5,
               color: "#166534",
               opacity: 0.6 + i % 5 * 0.08
-            }), i % 4 === 0 && /*#__PURE__*/_jsx(Circle, {
+            }), Math.random() < 0.3 && /*#__PURE__*/_jsx(Circle, {
               cx: x + swayAmount + 2,
-              cy: height * 0.7 - grassHeight,
+              cy: grassStartY - grassHeight,
               r: 0.8,
               color: "#22c55e",
               opacity: 0.8
@@ -476,17 +493,16 @@ export const GameBackground = ({
       }), Array.from({
         length: 30
       }, (_, 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 = 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 + i % 2, y - grassClusterHeight);
+        clusterPath.lineTo(x + Math.random() * 2 - 1, y - grassClusterHeight);
         clusterPath.moveTo(x + 2, y);
-        clusterPath.lineTo(x + 2 + i % 2, y - grassClusterHeight * 0.8);
+        clusterPath.lineTo(x + 2 + Math.random() * 2 - 1, y - grassClusterHeight * 0.8);
         clusterPath.moveTo(x + 4, y);
-        clusterPath.lineTo(x + 4 + i % 2, y - grassClusterHeight * 0.6);
+        clusterPath.lineTo(x + 4 + Math.random() * 2 - 1, y - grassClusterHeight * 0.6);
         return /*#__PURE__*/_jsx(Path, {
           path: clusterPath,
           style: "stroke",
@@ -494,13 +510,26 @@ export const GameBackground = ({
           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);
       }), /*#__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 +542,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 +583,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 +596,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 +609,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 +621,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 +713,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 +728,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 +768,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 +880,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 +892,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 +978,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 +990,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 +1028,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 +1040,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 +1102,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 +1114,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 +1188,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 +1200,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,19 +1230,19 @@ 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
@@ -1225,45 +1254,45 @@ export const GameBackground = ({
         }, (_, i) => {
           const positions = [{
             x: width * 0.20,
-            y: height * 0.69
+            y: grassStartY - 5
           }, {
             x: width * 0.28,
-            y: height * 0.71
+            y: grassStartY + 15
           }, {
             x: width * 0.38,
-            y: height * 0.68
+            y: grassStartY - 15
           }, {
             x: width * 0.45,
-            y: height * 0.70
+            y: grassStartY + 5
           }, {
             x: width * 0.58,
-            y: height * 0.69
+            y: grassStartY - 5
           }, {
             x: width * 0.63,
-            y: height * 0.71
+            y: grassStartY + 15
           }, {
             x: width * 0.77,
-            y: height * 0.68
+            y: grassStartY - 15
           }, {
             x: width * 0.82,
-            y: height * 0.70
+            y: grassStartY + 5
           }, {
             x: width * 0.22,
-            y: height * 0.73
+            y: grassStartY + 25
           }, {
             x: width * 0.48,
-            y: height * 0.72
+            y: grassStartY + 20
           }, {
             x: width * 0.68,
-            y: height * 0.73
+            y: grassStartY + 25
           }, {
             x: width * 0.85,
-            y: height * 0.72
+            y: grassStartY + 20
           }];
           const colors = ['#FF6B6B', '#FF69B4', '#9370DB', '#4169E1', '#FF8C00', '#32CD32'];
           const pos = positions[i] || {
             x: Math.random() * width,
-            y: height * 0.70
+            y: grassStartY + 5
           };
           const color = colors[i % colors.length];
           const size = 3 + Math.random() * 2;