react-native-games 0.3.0

package/lib/module/games/fruit-slicer/components/GameBackground.js

@@ -0,0 +1,1296 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { 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
+
+    // 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);
+
+    // Sun rotation animation (slow continuous rotation)
+    sunRotation.value = withRepeat(withTiming(360, {
+      duration: 30000
+    }), -1, false);
+  }, []);
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    return {
+      transform: []
+    };
+  });
+
+  // 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
+
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [{
+      flex: 1
+    }, animatedBackgroundStyle],
+    children: [/*#__PURE__*/_jsxs(Canvas, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width,
+        height
+      },
+      children: [/*#__PURE__*/_jsx(Rect, {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height,
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          start: vec(0, 0),
+          end: vec(0, height),
+          colors: ['#87CEEB', '#98D8E8', '#B0E0E6', '#90EE90', '#228B22']
+        })
+      }), /*#__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,
+          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: interpolate(sunGlow.value, [0.7, 1], [25, 40], Extrapolation.CLAMP),
+            color: "#FFD700"
+          })]
+        }), /*#__PURE__*/_jsx(Circle, {
+          cx: width * 0.8 - 8,
+          cy: height * 0.15 - 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 = 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, {
+          cx: width * 0.8,
+          cy: height * 0.15,
+          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, {
+          transform: [{
+            translateX: interpolate(cloudFloat.value, [0, 1], [-4, 4], Extrapolation.CLAMP)
+          }],
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.12,
+            cy: height * 0.24,
+            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: 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: 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: 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: height * 0.24,
+            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: height * 0.26,
+            r: 8,
+            color: "#F8F8FF",
+            opacity: 0.25
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.35,
+            cy: height * 0.18,
+            r: 6,
+            color: "#FFFFFF",
+            opacity: 0.30
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.40,
+            cy: height * 0.22,
+            r: 5,
+            color: "#F0F8FF",
+            opacity: 0.20
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.22,
+            cy: height * 0.18,
+            r: 7,
+            color: "#FFFFFF",
+            opacity: 0.35
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.28,
+            cy: height * 0.20,
+            r: 5,
+            color: "#FFFFFF",
+            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,
+            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: 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: 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: height * 0.28,
+            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: height * 0.29,
+            r: 6,
+            color: "#F8F8FF",
+            opacity: 0.20
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.78,
+            cy: height * 0.23,
+            r: 4,
+            color: "#FFFFFF",
+            opacity: 0.25
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.67,
+            cy: height * 0.23,
+            r: 5,
+            color: "#FFFFFF",
+            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,
+            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: 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: height * 0.19,
+            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: height * 0.18,
+            r: 4,
+            color: "#F0F8FF",
+            opacity: 0.15
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.86,
+            cy: height * 0.21,
+            r: 3,
+            color: "#FFFFFF",
+            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,
+            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)"
+            })
+          })]
+        })]
+      }), 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 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);
+          return /*#__PURE__*/_jsx(Path, {
+            path: bladePath,
+            style: "stroke",
+            strokeWidth: 1.5,
+            color: "#16a34a",
+            opacity: 0.8 + i % 3 * 0.1
+          }, `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);
+          return /*#__PURE__*/_jsx(Path, {
+            path: bladePath,
+            style: "stroke",
+            strokeWidth: 2,
+            color: "#15803d",
+            opacity: 0.7 + i % 4 * 0.1
+          }, `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}`);
+        }
+      }), 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 clusterPath = Skia.Path.Make();
+        clusterPath.moveTo(x, y);
+        clusterPath.lineTo(x + i % 2, y - grassClusterHeight);
+        clusterPath.moveTo(x + 2, y);
+        clusterPath.lineTo(x + 2 + i % 2, y - grassClusterHeight * 0.8);
+        clusterPath.moveTo(x + 4, y);
+        clusterPath.lineTo(x + 4 + i % 2, y - grassClusterHeight * 0.6);
+        return /*#__PURE__*/_jsx(Path, {
+          path: clusterPath,
+          style: "stroke",
+          strokeWidth: 1,
+          color: "#22c55e",
+          opacity: 0.4
+        }, `cluster-${i}`);
+      }), /*#__PURE__*/_jsxs(Group, {
+        children: [/*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsxs(Rect, {
+            x: width * 0.05,
+            y: height * 0.45,
+            width: 20,
+            height: height * 0.25,
+            children: [/*#__PURE__*/_jsx(LinearGradient, {
+              start: vec(0, 0),
+              end: vec(20, 0),
+              colors: ['#654321', '#8B4513', '#A0522D', '#8B4513']
+            }), /*#__PURE__*/_jsx(Shadow, {
+              dx: 3,
+              dy: 0,
+              blur: 6,
+              color: "rgba(0,0,0,0.4)"
+            })]
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 3,
+            y: height * 0.50,
+            width: 1,
+            height: height * 0.15,
+            color: "#5D4037",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 7,
+            y: height * 0.48,
+            width: 1.5,
+            height: height * 0.18,
+            color: "#4A2C2A",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 12,
+            y: height * 0.52,
+            width: 1,
+            height: height * 0.12,
+            color: "#5D4037",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 16,
+            y: height * 0.49,
+            width: 1.5,
+            height: height * 0.16,
+            color: "#4A2C2A",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 18,
+            y: height * 0.48,
+            width: 12,
+            height: 4,
+            color: "#8B4513",
+            opacity: 0.9,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 1,
+              dy: 1,
+              blur: 2,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 - 2,
+            y: height * 0.52,
+            width: 10,
+            height: 3,
+            color: "#A0522D",
+            opacity: 0.8,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: -1,
+              dy: 1,
+              blur: 2,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.05 + 15,
+            y: height * 0.42,
+            width: 8,
+            height: 3,
+            color: "#8B4513",
+            opacity: 0.7,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 1,
+              dy: 1,
+              blur: 2,
+              color: "rgba(0,0,0,0.2)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 10,
+            cy: height * 0.45,
+            r: 38,
+            color: "#1B5E20",
+            opacity: 0.9,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 4,
+              dy: 4,
+              blur: 10,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 18,
+            cy: height * 0.42,
+            r: 32,
+            color: "#2E7D32",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 25,
+            cy: height * 0.46,
+            r: 28,
+            color: "#388E3C",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 2,
+            cy: height * 0.48,
+            r: 30,
+            color: "#2E7D32",
+            opacity: 0.75
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 - 5,
+            cy: height * 0.44,
+            r: 25,
+            color: "#1B5E20",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 8,
+            cy: height * 0.38,
+            r: 26,
+            color: "#4CAF50",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 20,
+            cy: height * 0.38,
+            r: 22,
+            color: "#66BB6A",
+            opacity: 0.5
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 12,
+            cy: height * 0.43,
+            r: 20,
+            color: "#388E3C",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 6,
+            cy: height * 0.46,
+            r: 18,
+            color: "#2E7D32",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 15,
+            cy: height * 0.35,
+            r: 15,
+            color: "#81C784",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 3,
+            cy: height * 0.37,
+            r: 12,
+            color: "#A5D6A7",
+            opacity: 0.5
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 28,
+            cy: height * 0.41,
+            r: 14,
+            color: "#81C784",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 - 8,
+            cy: height * 0.41,
+            r: 16,
+            color: "#66BB6A",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 5,
+            cy: height * 0.36,
+            r: 10,
+            color: "#C8E6C9",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 18,
+            cy: height * 0.34,
+            r: 8,
+            color: "#E8F5E8",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.05 + 22,
+            cy: height * 0.39,
+            r: 6,
+            color: "#C8E6C9",
+            opacity: 0.8
+          })]
+        }), /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsxs(Rect, {
+            x: width * 0.88,
+            y: height * 0.35,
+            width: 18,
+            height: height * 0.35,
+            children: [/*#__PURE__*/_jsx(LinearGradient, {
+              start: vec(0, 0),
+              end: vec(18, 0),
+              colors: ['#4A2C2A', '#654321', '#8B4513', '#654321']
+            }), /*#__PURE__*/_jsx(Shadow, {
+              dx: -3,
+              dy: 0,
+              blur: 6,
+              color: "rgba(0,0,0,0.4)"
+            })]
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.88 + 2,
+            y: height * 0.38,
+            width: 1,
+            height: height * 0.25,
+            color: "#3E2723",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.88 + 6,
+            y: height * 0.36,
+            width: 1.5,
+            height: height * 0.28,
+            color: "#2E1A16",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.88 + 11,
+            y: height * 0.39,
+            width: 1,
+            height: height * 0.22,
+            color: "#3E2723",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: width * 0.88 + 14,
+            y: height * 0.37,
+            width: 1.5,
+            height: height * 0.26,
+            color: "#2E1A16",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 9,
+            cy: height * 0.48,
+            r: 35,
+            color: "#0D4F0C",
+            opacity: 0.95,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: -4,
+              dy: 4,
+              blur: 10,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 5,
+            cy: height * 0.50,
+            r: 30,
+            color: "#1B5E20",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 13,
+            cy: height * 0.49,
+            r: 28,
+            color: "#2E7D32",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 9,
+            cy: height * 0.42,
+            r: 32,
+            color: "#1B5E20",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 6,
+            cy: height * 0.43,
+            r: 26,
+            color: "#2E7D32",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 12,
+            cy: height * 0.41,
+            r: 24,
+            color: "#388E3C",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 9,
+            cy: height * 0.36,
+            r: 28,
+            color: "#2E7D32",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 7,
+            cy: height * 0.37,
+            r: 22,
+            color: "#388E3C",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 11,
+            cy: height * 0.35,
+            r: 20,
+            color: "#4CAF50",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 9,
+            cy: height * 0.30,
+            r: 22,
+            color: "#388E3C",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 8,
+            cy: height * 0.31,
+            r: 18,
+            color: "#4CAF50",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 10,
+            cy: height * 0.29,
+            r: 15,
+            color: "#66BB6A",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 4,
+            cy: height * 0.45,
+            r: 8,
+            color: "#0D4F0C",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 14,
+            cy: height * 0.43,
+            r: 6,
+            color: "#1B5E20",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 3,
+            cy: height * 0.38,
+            r: 5,
+            color: "#0D4F0C",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 15,
+            cy: height * 0.36,
+            r: 7,
+            color: "#2E7D32",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 12,
+            cy: height * 0.32,
+            r: 8,
+            color: "#81C784",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 11,
+            cy: height * 0.28,
+            r: 6,
+            color: "#A5D6A7",
+            opacity: 0.5
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.88 + 13,
+            cy: height * 0.39,
+            r: 5,
+            color: "#C8E6C9",
+            opacity: 0.7
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(Group, {
+        children: [/*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.15,
+            cy: height * 0.64,
+            r: 26,
+            color: "#1B5E20",
+            opacity: 0.95,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 3,
+              dy: 3,
+              blur: 8,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.18,
+            cy: height * 0.61,
+            r: 22,
+            color: "#2E7D32",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.21,
+            cy: height * 0.63,
+            r: 18,
+            color: "#388E3C",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.12,
+            cy: height * 0.62,
+            r: 20,
+            color: "#2E7D32",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.09,
+            cy: height * 0.65,
+            r: 16,
+            color: "#1B5E20",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.16,
+            cy: height * 0.58,
+            r: 19,
+            color: "#4CAF50",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.19,
+            cy: height * 0.59,
+            r: 15,
+            color: "#66BB6A",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.15,
+            cy: height * 0.61,
+            r: 14,
+            color: "#388E3C",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.17,
+            cy: height * 0.63,
+            r: 12,
+            color: "#2E7D32",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.13,
+            cy: height * 0.59,
+            r: 10,
+            color: "#81C784",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.20,
+            cy: height * 0.60,
+            r: 8,
+            color: "#A5D6A7",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.11,
+            cy: height * 0.63,
+            r: 9,
+            color: "#66BB6A",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.22,
+            cy: height * 0.62,
+            r: 7,
+            color: "#81C784",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.16,
+            cy: height * 0.57,
+            r: 6,
+            color: "#C8E6C9",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.19,
+            cy: height * 0.58,
+            r: 4,
+            color: "#E8F5E8",
+            opacity: 0.7
+          })]
+        }), /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.35,
+            cy: height * 0.66,
+            r: 21,
+            color: "#1B5E20",
+            opacity: 0.9,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 2,
+              dy: 2,
+              blur: 6,
+              color: "rgba(0,0,0,0.25)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.37,
+            cy: height * 0.64,
+            r: 17,
+            color: "#2E7D32",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.33,
+            cy: height * 0.67,
+            r: 15,
+            color: "#388E3C",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.36,
+            cy: height * 0.62,
+            r: 13,
+            color: "#4CAF50",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.32,
+            cy: height * 0.64,
+            r: 10,
+            color: "#66BB6A",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.38,
+            cy: height * 0.65,
+            r: 8,
+            color: "#81C784",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.34,
+            cy: height * 0.61,
+            r: 5,
+            color: "#A5D6A7",
+            opacity: 0.8
+          })]
+        }), /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.52,
+            cy: height * 0.65,
+            r: 25,
+            color: "#1B5E20",
+            opacity: 0.95,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 2,
+              dy: 3,
+              blur: 8,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.55,
+            cy: height * 0.62,
+            r: 21,
+            color: "#2E7D32",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.49,
+            cy: height * 0.66,
+            r: 19,
+            color: "#388E3C",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.54,
+            cy: height * 0.59,
+            r: 16,
+            color: "#4CAF50",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.50,
+            cy: height * 0.63,
+            r: 14,
+            color: "#66BB6A",
+            opacity: 0.75
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.47,
+            cy: height * 0.61,
+            r: 11,
+            color: "#81C784",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.56,
+            cy: height * 0.64,
+            r: 9,
+            color: "#A5D6A7",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.51,
+            cy: height * 0.60,
+            r: 4,
+            color: "#FF69B4",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.54,
+            cy: height * 0.62,
+            r: 3.5,
+            color: "#FF6B6B",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.49,
+            cy: height * 0.64,
+            r: 3,
+            color: "#FF1744",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.52,
+            cy: height * 0.58,
+            r: 6,
+            color: "#C8E6C9",
+            opacity: 0.8
+          })]
+        }), /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.72,
+            cy: height * 0.66,
+            r: 28,
+            color: "#0D4F0C",
+            opacity: 0.95,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: -2,
+              dy: 3,
+              blur: 8,
+              color: "rgba(0,0,0,0.3)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.75,
+            cy: height * 0.63,
+            r: 24,
+            color: "#1B5E20",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.69,
+            cy: height * 0.67,
+            r: 22,
+            color: "#2E7D32",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.74,
+            cy: height * 0.60,
+            r: 19,
+            color: "#388E3C",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.68,
+            cy: height * 0.64,
+            r: 17,
+            color: "#4CAF50",
+            opacity: 0.75
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.77,
+            cy: height * 0.65,
+            r: 14,
+            color: "#66BB6A",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.66,
+            cy: height * 0.62,
+            r: 12,
+            color: "#81C784",
+            opacity: 0.65
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.71,
+            cy: height * 0.58,
+            r: 10,
+            color: "#A5D6A7",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.73,
+            cy: height * 0.59,
+            r: 3,
+            color: "#9C27B0",
+            opacity: 0.9
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.70,
+            cy: height * 0.61,
+            r: 2.5,
+            color: "#673AB7",
+            opacity: 0.85
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.76,
+            cy: height * 0.64,
+            r: 3.5,
+            color: "#FF9800",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.73,
+            cy: height * 0.57,
+            r: 7,
+            color: "#C8E6C9",
+            opacity: 0.8
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.75,
+            cy: height * 0.61,
+            r: 5,
+            color: "#E8F5E8",
+            opacity: 0.7
+          })]
+        }), /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.25,
+            cy: height * 0.68,
+            r: 15,
+            color: "#1B5E20",
+            opacity: 0.8,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: 1,
+              dy: 2,
+              blur: 4,
+              color: "rgba(0,0,0,0.2)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.27,
+            cy: height * 0.66,
+            r: 12,
+            color: "#2E7D32",
+            opacity: 0.75
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.23,
+            cy: height * 0.69,
+            r: 10,
+            color: "#388E3C",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.26,
+            cy: height * 0.65,
+            r: 7,
+            color: "#66BB6A",
+            opacity: 0.6
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.65,
+            cy: height * 0.69,
+            r: 13,
+            color: "#2E7D32",
+            opacity: 0.8,
+            children: /*#__PURE__*/_jsx(Shadow, {
+              dx: -1,
+              dy: 2,
+              blur: 4,
+              color: "rgba(0,0,0,0.2)"
+            })
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.67,
+            cy: height * 0.67,
+            r: 10,
+            color: "#388E3C",
+            opacity: 0.75
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.63,
+            cy: height * 0.70,
+            r: 8,
+            color: "#4CAF50",
+            opacity: 0.7
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: width * 0.66,
+            cy: height * 0.66,
+            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
+          }];
+          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;
+          return /*#__PURE__*/_jsxs(Group, {
+            children: [/*#__PURE__*/_jsx(Circle, {
+              cx: pos.x,
+              cy: pos.y,
+              r: size,
+              color: color,
+              opacity: 0.8,
+              children: /*#__PURE__*/_jsx(Shadow, {
+                dx: 0,
+                dy: 1,
+                blur: 2,
+                color: "rgba(0,0,0,0.2)"
+              })
+            }), /*#__PURE__*/_jsx(Circle, {
+              cx: pos.x,
+              cy: pos.y,
+              r: size * 0.4,
+              color: "#FFD700",
+              opacity: 0.9
+            })]
+          }, `flower-${i}`);
+        })
+      })]
+    }), children]
+  });
+};
+//# sourceMappingURL=GameBackground.js.map