react-native-games 1.1.0 → 1.2.0

package/lib/module/games/dino-jump/components/GameBackground.js

@@ -1,444 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { Canvas, LinearGradient, Rect, vec, Circle, Path, Skia, Group, Shadow } from '@shopify/react-native-skia';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-// Create ground path based on dynamic ground height
-const createGroundPath = groundY => {
-  const path = Skia.Path.Make();
-  path.moveTo(0, groundY);
-  path.lineTo(width, groundY);
-  path.lineTo(width, height);
-  path.lineTo(0, height);
-  path.close();
-  return path;
-};
-
-// Pre-compute static sun rays (from FruitNinja)
-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.22 + Math.sin(radian) * startDistance;
-    const endX = width * 0.8 + Math.cos(radian) * (startDistance + rayLength);
-    const endY = height * 0.22 + Math.sin(radian) * (startDistance + rayLength);
-    const rayPath = Skia.Path.Make();
-    rayPath.moveTo(startX, startY);
-    rayPath.lineTo(endX, endY);
-    return {
-      path: rayPath,
-      width: rayWidth
-    };
-  });
-};
-const staticSunRays = createStaticSunRays();
-export const GameBackground = /*#__PURE__*/React.memo(({
-  children,
-  offset = 0
-}) => {
-  // Dynamic ground height based on offset
-  const groundHeight = offset > 0 ? 150 : 250;
-  const groundY = height - groundHeight;
-
-  // Create dynamic ground path
-  const groundPath = createGroundPath(groundY);
-
-  // Adjust sun and cloud positions based on offset (like Fruit Ninja)
-  const sunY = height * 0.20 + offset * 0.9;
-  const cloud1Y = height * 0.25 + offset * 0.9;
-  const cloud2Y = height * 0.30 + offset * 0.9;
-  const cloud3Y = height * 0.35 + offset * 0.9;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: styles.canvas,
-      children: [/*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: 0,
-        width: width,
-        height: groundY,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(0, groundY),
-          colors: ['#87CEEB', '#98D8E8', '#B0E0E6']
-        })
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsxs(Circle, {
-          cx: width * 0.8,
-          cy: sunY,
-          r: 40,
-          children: [/*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-40, -40),
-            end: vec(40, 40),
-            colors: ['#FFFF99', '#FFD700', '#FFA500', '#FF8C00']
-          }), /*#__PURE__*/_jsx(Shadow, {
-            dx: 0,
-            dy: 0,
-            blur: 32,
-            color: "#FFD700"
-          })]
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.8 - 8,
-          cy: sunY - 8,
-          r: 15,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-15, -15),
-            end: vec(15, 15),
-            colors: ['#FFFFFF', '#FFFF99']
-          })
-        }), staticSunRays.map((_ray, index) => {
-          // Recalculate ray positions based on offset
-          const angle = 360 / 16 * index;
-          const radian = angle * Math.PI / 180;
-          const isLongRay = index % 2 === 0;
-          const rayLength = isLongRay ? 25 : 15;
-          const rayWidth = isLongRay ? 4 : 2;
-          const startDistance = 45;
-          const startX = width * 0.8 + Math.cos(radian) * startDistance;
-          const startY = sunY + Math.sin(radian) * startDistance;
-          const endX = width * 0.8 + Math.cos(radian) * (startDistance + rayLength);
-          const endY = sunY + Math.sin(radian) * (startDistance + rayLength);
-          const rayPath = Skia.Path.Make();
-          rayPath.moveTo(startX, startY);
-          rayPath.lineTo(endX, endY);
-          return /*#__PURE__*/_jsx(Path, {
-            path: rayPath,
-            style: "stroke",
-            strokeWidth: rayWidth,
-            color: "#FFD700",
-            opacity: 0.75
-          }, index);
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.8,
-          cy: sunY,
-          r: 60,
-          opacity: 0.1,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(-60, -60),
-            end: vec(60, 60),
-            colors: ['#FFD700', 'transparent']
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.12,
-            cy: cloud1Y,
-            r: 16,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.18,
-            cy: cloud1Y - height * 0.03,
-            r: 22,
-            color: "#FFFFFF",
-            opacity: 0.45,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.25,
-            cy: cloud1Y - height * 0.05,
-            r: 26,
-            color: "#F8F8FF",
-            opacity: 0.55,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 2,
-              dy: 3,
-              blur: 12,
-              color: "rgba(0,0,0,0.06)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.32,
-            cy: cloud1Y - height * 0.03,
-            r: 20,
-            color: "#FFFFFF",
-            opacity: 0.50,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.37,
-            cy: cloud1Y,
-            r: 14,
-            color: "#F0F8FF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 12,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.15,
-            cy: cloud1Y + height * 0.02,
-            r: 8,
-            color: "#F8F8FF",
-            opacity: 0.25
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.35,
-            cy: cloud1Y - height * 0.06,
-            r: 6,
-            color: "#FFFFFF",
-            opacity: 0.30
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.40,
-            cy: cloud1Y - height * 0.02,
-            r: 5,
-            color: "#F0F8FF",
-            opacity: 0.20
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.22,
-            cy: cloud1Y - height * 0.06,
-            r: 7,
-            color: "#FFFFFF",
-            opacity: 0.35
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.28,
-            cy: cloud1Y - height * 0.04,
-            r: 5,
-            color: "#FFFFFF",
-            opacity: 0.25
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.62,
-            cy: cloud2Y,
-            r: 15,
-            color: "#F0F8FF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.69,
-            cy: cloud2Y - height * 0.03,
-            r: 19,
-            color: "#FFFFFF",
-            opacity: 0.50,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.05)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.76,
-            cy: cloud2Y - height * 0.01,
-            r: 13,
-            color: "#F8F8FF",
-            opacity: 0.45,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 2,
-              blur: 10,
-              color: "rgba(0,0,0,0.04)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.81,
-            cy: cloud2Y + height * 0.01,
-            r: 9,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 1,
-              dy: 1,
-              blur: 8,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.65,
-            cy: cloud2Y + height * 0.02,
-            r: 6,
-            color: "#F8F8FF",
-            opacity: 0.20
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.78,
-            cy: cloud2Y - height * 0.04,
-            r: 4,
-            color: "#FFFFFF",
-            opacity: 0.25
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.67,
-            cy: cloud2Y - height * 0.04,
-            r: 5,
-            color: "#FFFFFF",
-            opacity: 0.30
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.84,
-            cy: cloud3Y,
-            r: 10,
-            color: "#F0F8FF",
-            opacity: 0.35,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.89,
-            cy: cloud3Y - height * 0.02,
-            r: 12,
-            color: "#FFFFFF",
-            opacity: 0.40,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.03)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.93,
-            cy: cloud3Y,
-            r: 8,
-            color: "#F8F8FF",
-            opacity: 0.30,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 6,
-              color: "rgba(0,0,0,0.02)"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.96,
-            cy: cloud3Y - height * 0.01,
-            r: 4,
-            color: "#F0F8FF",
-            opacity: 0.15
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.86,
-            cy: cloud3Y + height * 0.02,
-            r: 3,
-            color: "#FFFFFF",
-            opacity: 0.20
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.45,
-            cy: height * 0.21,
-            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.19,
-            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.21,
-            r: 6,
-            color: "#F0F8FF",
-            opacity: 0.20,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 1,
-              blur: 4,
-              color: "rgba(0,0,0,0.01)"
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Path, {
-        path: groundPath,
-        children: [/*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, groundY),
-          end: vec(0, height),
-          colors: ['#8B4513', '#A0522D', '#654321']
-        }), /*#__PURE__*/_jsx(Shadow, {
-          dx: 0,
-          dy: -3,
-          blur: 6,
-          color: "rgba(0,0,0,0.3)"
-        })]
-      }), /*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: groundY - 15,
-        width: width,
-        height: 15,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, groundY - 15),
-          end: vec(0, groundY),
-          colors: ['#32CD32', '#228B22', '#006400']
-        })
-      }), /*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: groundY - 15,
-        width: width,
-        height: 2,
-        color: "#004d00"
-      }), Array.from({
-        length: 15
-      }, (_, i) => {
-        const x = width / 15 * i + i % 3 * 20;
-        const y = groundY + 30 + i % 4 * 20;
-        const size = 2 + i % 3;
-        return /*#__PURE__*/_jsx(Circle, {
-          cx: x,
-          cy: y,
-          r: size,
-          color: "#654321",
-          opacity: 0.6
-        }, `dirt-${i}`);
-      })]
-    }), children]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  canvas: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width,
-    height
-  }
-});
-GameBackground.displayName = 'GameBackground';
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{Canvas,LinearGradient,Rect,vec,Circle,Path,Skia,Group,Shadow}from '@shopify/react-native-skia';import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');const createGroundPath = groundY =>{const path = Skia.Path.Make();path.moveTo(0,groundY);path.lineTo(width,groundY);path.lineTo(width,height);path.lineTo(0,height);path.close();return path;};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.22 + Math.sin(radian)* startDistance;const endX = width * 0.8 + Math.cos(radian)*(startDistance + rayLength);const endY = height * 0.22 + Math.sin(radian)*(startDistance + rayLength);const rayPath = Skia.Path.Make();rayPath.moveTo(startX,startY);rayPath.lineTo(endX,endY);return{path:rayPath,width:rayWidth};});};const staticSunRays = createStaticSunRays();export const GameBackground = React.memo(({children,offset = 0})=>{const groundHeight = offset > 0 ? 150:250;const groundY = height - groundHeight;const groundPath = createGroundPath(groundY);const sunY = height * 0.20 + offset * 0.9;const cloud1Y = height * 0.25 + offset * 0.9;const cloud2Y = height * 0.30 + offset * 0.9;const cloud3Y = height * 0.35 + offset * 0.9;return _jsxs(View,{style:styles.container,children:[_jsxs(Canvas,{style:styles.canvas,children:[_jsx(Rect,{x:0,y:0,width:width,height:groundY,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,groundY),colors:['#87CEEB','#98D8E8','#B0E0E6']})}),_jsxs(Group,{children:[_jsxs(Circle,{cx:width * 0.8,cy:sunY,r:40,children:[_jsx(LinearGradient,{start:vec(-40,-40),end:vec(40,40),colors:['#FFFF99','#FFD700','#FFA500','#FF8C00']}),_jsx(Shadow,{dx:0,dy:0,blur:32,color:"#FFD700"})]}),_jsx(Circle,{cx:width * 0.8 - 8,cy:sunY - 8,r:15,children:_jsx(LinearGradient,{start:vec(-15,-15),end:vec(15,15),colors:['#FFFFFF','#FFFF99']})}),staticSunRays.map((_ray,index)=>{const angle = 360 / 16 * index;const radian = angle * Math.PI / 180;const isLongRay = index % 2 === 0;const rayLength = isLongRay ? 25:15;const rayWidth = isLongRay ? 4:2;const startDistance = 45;const startX = width * 0.8 + Math.cos(radian)* startDistance;const startY = sunY + Math.sin(radian)* startDistance;const endX = width * 0.8 + Math.cos(radian)*(startDistance + rayLength);const endY = sunY + Math.sin(radian)*(startDistance + rayLength);const rayPath = Skia.Path.Make();rayPath.moveTo(startX,startY);rayPath.lineTo(endX,endY);return _jsx(Path,{path:rayPath,style:"stroke",strokeWidth:rayWidth,color:"#FFD700",opacity:0.75},index);}),_jsx(Circle,{cx:width * 0.8,cy:sunY,r:60,opacity:0.1,children:_jsx(LinearGradient,{start:vec(-60,-60),end:vec(60,60),colors:['#FFD700','transparent']})})]}),_jsxs(Group,{children:[_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.12,cy:cloud1Y,r:16,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.18,cy:cloud1Y - height * 0.03,r:22,color:"#FFFFFF",opacity:0.45,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.25,cy:cloud1Y - height * 0.05,r:26,color:"#F8F8FF",opacity:0.55,children:_jsx(Shadow,{dx:2,dy:3,blur:12,color:"rgba(0,0,0,0.06)"})}),_jsx(Circle,{cx:width * 0.32,cy:cloud1Y - height * 0.03,r:20,color:"#FFFFFF",opacity:0.50,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.37,cy:cloud1Y,r:14,color:"#F0F8FF",opacity:0.40,children:_jsx(Shadow,{dx:1,dy:2,blur:12,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.15,cy:cloud1Y + height * 0.02,r:8,color:"#F8F8FF",opacity:0.25}),_jsx(Circle,{cx:width * 0.35,cy:cloud1Y - height * 0.06,r:6,color:"#FFFFFF",opacity:0.30}),_jsx(Circle,{cx:width * 0.40,cy:cloud1Y - height * 0.02,r:5,color:"#F0F8FF",opacity:0.20}),_jsx(Circle,{cx:width * 0.22,cy:cloud1Y - height * 0.06,r:7,color:"#FFFFFF",opacity:0.35}),_jsx(Circle,{cx:width * 0.28,cy:cloud1Y - height * 0.04,r:5,color:"#FFFFFF",opacity:0.25})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.62,cy:cloud2Y,r:15,color:"#F0F8FF",opacity:0.40,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.69,cy:cloud2Y - height * 0.03,r:19,color:"#FFFFFF",opacity:0.50,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.05)"})}),_jsx(Circle,{cx:width * 0.76,cy:cloud2Y - height * 0.01,r:13,color:"#F8F8FF",opacity:0.45,children:_jsx(Shadow,{dx:1,dy:2,blur:10,color:"rgba(0,0,0,0.04)"})}),_jsx(Circle,{cx:width * 0.81,cy:cloud2Y + height * 0.01,r:9,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:1,dy:1,blur:8,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.65,cy:cloud2Y + height * 0.02,r:6,color:"#F8F8FF",opacity:0.20}),_jsx(Circle,{cx:width * 0.78,cy:cloud2Y - height * 0.04,r:4,color:"#FFFFFF",opacity:0.25}),_jsx(Circle,{cx:width * 0.67,cy:cloud2Y - height * 0.04,r:5,color:"#FFFFFF",opacity:0.30})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.84,cy:cloud3Y,r:10,color:"#F0F8FF",opacity:0.35,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.89,cy:cloud3Y - height * 0.02,r:12,color:"#FFFFFF",opacity:0.40,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.03)"})}),_jsx(Circle,{cx:width * 0.93,cy:cloud3Y,r:8,color:"#F8F8FF",opacity:0.30,children:_jsx(Shadow,{dx:0,dy:1,blur:6,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.96,cy:cloud3Y - height * 0.01,r:4,color:"#F0F8FF",opacity:0.15}),_jsx(Circle,{cx:width * 0.86,cy:cloud3Y + height * 0.02,r:3,color:"#FFFFFF",opacity:0.20})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.45,cy:height * 0.21,r:8,color:"#F8F8FF",opacity:0.25,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.50,cy:height * 0.19,r:10,color:"#FFFFFF",opacity:0.30,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.02)"})}),_jsx(Circle,{cx:width * 0.54,cy:height * 0.21,r:6,color:"#F0F8FF",opacity:0.20,children:_jsx(Shadow,{dx:0,dy:1,blur:4,color:"rgba(0,0,0,0.01)"})})]})]}),_jsxs(Path,{path:groundPath,children:[_jsx(LinearGradient,{start:vec(0,groundY),end:vec(0,height),colors:['#8B4513','#A0522D','#654321']}),_jsx(Shadow,{dx:0,dy:-3,blur:6,color:"rgba(0,0,0,0.3)"})]}),_jsx(Rect,{x:0,y:groundY - 15,width:width,height:15,children:_jsx(LinearGradient,{start:vec(0,groundY - 15),end:vec(0,groundY),colors:['#32CD32','#228B22','#006400']})}),_jsx(Rect,{x:0,y:groundY - 15,width:width,height:2,color:"#004d00"}),Array.from({length:15},(_,i)=>{const x = width / 15 * i + i % 3 * 20;const y = groundY + 30 + i % 4 * 20;const size = 2 + i % 3;return _jsx(Circle,{cx:x,cy:y,r:size,color:"#654321",opacity:0.6},`dirt-${i}`);})]}),children]});});const styles = StyleSheet.create({container:{flex:1},canvas:{position:'absolute',top:0,left:0,right:0,bottom:0,width,height}});GameBackground.displayName = 'GameBackground';