react-native-games 1.0.0 → 1.2.0

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

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

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

@@ -1,97 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { GAME_CONFIG } from "../WhackAMoleService.js";
-import { GameHole } from "./GameHole.js";
-
-// Highly optimized GameHole that only re-renders when its specific hole changes
-import { jsx as _jsx } from "react/jsx-runtime";
-const MemoizedGameHole = /*#__PURE__*/React.memo(GameHole, (prevProps, nextProps) => {
-  // Only re-render if this specific hole's state changes
-  return prevProps.hole.id === nextProps.hole.id && prevProps.hole.isActive === nextProps.hole.isActive && prevProps.moleAnimation === nextProps.moleAnimation && prevProps.hitAnimation === nextProps.hitAnimation && prevProps.onPress === nextProps.onPress && prevProps.holeSize === nextProps.holeSize;
-});
-export const GameGrid = /*#__PURE__*/React.memo(({
-  holes,
-  moleAnimations,
-  hitAnimations,
-  onHolePress,
-  gridSize = 3
-}) => {
-  // Calculate responsive dimensions with maximum width for tablets
-  const responsiveDimensions = useMemo(() => {
-    const {
-      width: screenWidth
-    } = Dimensions.get('window');
-
-    // Maximum container width for tablets (600px max)
-    const maxContainerWidth = Math.min(screenWidth * 0.9, 600);
-
-    // Calculate hole size based on grid size and container width
-    const availableWidth = maxContainerWidth - gridSize * 8; // Account for gaps
-    const maxHoleSize = availableWidth / gridSize;
-
-    // Use smaller of calculated size or original size, with minimum of 60px
-    const holeSize = Math.max(Math.min(maxHoleSize, GAME_CONFIG.HOLE_SIZE), 60);
-    return {
-      containerWidth: maxContainerWidth,
-      holeSize,
-      gridWidth: gridSize * (holeSize + 8) // Account for gaps
-    };
-  }, [gridSize]);
-
-  // Memoize style calculations to prevent re-computation on every render
-  const gridStyle = useMemo(() => ({
-    width: responsiveDimensions.gridWidth,
-    maxWidth: responsiveDimensions.containerWidth
-  }), [responsiveDimensions]);
-  const paddingStyle = useMemo(() => gridSize === 4 ? styles.smallPadding : styles.largePadding, [gridSize]);
-  const gapStyle = useMemo(() => gridSize === 4 ? styles.smallGap : styles.largeGap, [gridSize]);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.gameArea, paddingStyle],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.gameGrid, gapStyle, gridStyle],
-      children: holes.map((hole, index) => {
-        const moleAnimation = moleAnimations[index];
-        const hitAnimation = hitAnimations[index];
-        if (!moleAnimation || !hitAnimation) {
-          return null;
-        }
-        return /*#__PURE__*/_jsx(MemoizedGameHole, {
-          hole: hole,
-          moleAnimation: moleAnimation,
-          hitAnimation: hitAnimation,
-          onPress: onHolePress,
-          holeSize: responsiveDimensions.holeSize
-        }, hole.id);
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  gameArea: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  smallPadding: {
-    paddingHorizontal: 16,
-    paddingVertical: 20
-  },
-  largePadding: {
-    paddingVertical: 20
-  },
-  gameGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  smallGap: {
-    gap: 4
-  },
-  largeGap: {
-    gap: 8
-  }
-});
-//# sourceMappingURL=GameGrid.js.map
+"use strict";import React,{useMemo}from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{GAME_CONFIG}from "../WhackAMoleService.js";import{GameHole}from "./GameHole.js";import{jsx as _jsx}from "react/jsx-runtime";const MemoizedGameHole = React.memo(GameHole,(prevProps,nextProps)=>{return prevProps.hole.id === nextProps.hole.id && prevProps.hole.isActive === nextProps.hole.isActive && prevProps.moleAnimation === nextProps.moleAnimation && prevProps.hitAnimation === nextProps.hitAnimation && prevProps.onPress === nextProps.onPress && prevProps.holeSize === nextProps.holeSize;});export const GameGrid = React.memo(({holes,moleAnimations,hitAnimations,onHolePress,gridSize = 3})=>{const responsiveDimensions = useMemo(()=>{const{width:screenWidth}= Dimensions.get('window');const maxContainerWidth = Math.min(screenWidth * 0.9,600);const availableWidth = maxContainerWidth - gridSize * 8;const maxHoleSize = availableWidth / gridSize;const holeSize = Math.max(Math.min(maxHoleSize,GAME_CONFIG.HOLE_SIZE),60);return{containerWidth:maxContainerWidth,holeSize,gridWidth:gridSize *(holeSize + 8)};},[gridSize]);const gridStyle = useMemo(()=>({width:responsiveDimensions.gridWidth,maxWidth:responsiveDimensions.containerWidth}),[responsiveDimensions]);const paddingStyle = useMemo(()=> gridSize === 4 ? styles.smallPadding:styles.largePadding,[gridSize]);const gapStyle = useMemo(()=> gridSize === 4 ? styles.smallGap:styles.largeGap,[gridSize]);return _jsx(View,{style:[styles.gameArea,paddingStyle],children:_jsx(View,{style:[styles.gameGrid,gapStyle,gridStyle],children:holes.map((hole,index)=>{const moleAnimation = moleAnimations[index];const hitAnimation = hitAnimations[index];if(!moleAnimation || !hitAnimation){return null;}return _jsx(MemoizedGameHole,{hole:hole,moleAnimation:moleAnimation,hitAnimation:hitAnimation,onPress:onHolePress,holeSize:responsiveDimensions.holeSize},hole.id);})})});});const styles = StyleSheet.create({gameArea:{flex:1,justifyContent:'center',alignItems:'center'},smallPadding:{paddingHorizontal:16,paddingVertical:20},largePadding:{paddingVertical:20},gameGrid:{flexDirection:'row',flexWrap:'wrap',justifyContent:'center',alignItems:'center'},smallGap:{gap:4},largeGap:{gap:8}});