react-native-games 1.1.0 → 1.3.0

package/lib/module/games/maze-runner/components/GameBackground.js

@@ -1,175 +1 @@
-"use strict";
-
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Canvas, LinearGradient, Rect, Circle, vec } from '@shopify/react-native-skia';
-import { MAZE_ADVENTURE_COLORS } from "../MazeRunnerConstants.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const GameBackground = ({
-  width,
-  height
-}) => {
-  // Generate static colorful floating adventure decorations
-  const generateFloatingElements = React.useMemo(() => {
-    const elements = [];
-    const elementCount = 12; // Reduced count for better performance
-
-    for (let i = 0; i < elementCount; i++) {
-      const baseX = width / elementCount * i;
-      const baseY = height / elementCount * i;
-
-      // Add subtle positioning variations for natural look
-      const x = baseX + Math.sin(i * 0.5) * 40 + i % 3 * 20;
-      const y = baseY + Math.cos(i * 0.7) * 50 + i % 4 * 25;
-      const radius = 10 + i % 8 + Math.sin(i) * 5;
-      const colorIndex = i % MAZE_ADVENTURE_COLORS.length;
-      const opacity = 0.25 + Math.sin(i * 0.3) * 0.1; // Subtle opacity variation
-
-      elements.push(/*#__PURE__*/_jsx(Circle, {
-        cx: Math.max(radius, Math.min(width - radius, x)),
-        cy: Math.max(radius, Math.min(height - radius, y)),
-        r: radius,
-        color: `${MAZE_ADVENTURE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-      }, `floating-element-${i}`));
-    }
-    return elements;
-  }, [width, height]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFillObject,
-      children: /*#__PURE__*/_jsxs(Canvas, {
-        style: {
-          width,
-          height
-        },
-        children: [/*#__PURE__*/_jsx(Rect, {
-          x: 0,
-          y: 0,
-          width: width,
-          height: height,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(width, height),
-            colors: [`${MAZE_ADVENTURE_COLORS[0]}40`,
-            // Vibrant coral red
-            `${MAZE_ADVENTURE_COLORS[2]}35`,
-            // Vibrant sky blue
-            `${MAZE_ADVENTURE_COLORS[4]}40`,
-            // Vibrant golden yellow
-            `${MAZE_ADVENTURE_COLORS[6]}35`,
-            // Vibrant seafoam
-            `${MAZE_ADVENTURE_COLORS[8]}40`,
-            // Vibrant lavender
-            `${MAZE_ADVENTURE_COLORS[10]}35`,
-            // Vibrant light green
-            `${MAZE_ADVENTURE_COLORS[12]}40`,
-            // Vibrant light purple
-            `${MAZE_ADVENTURE_COLORS[14]}35` // Vibrant cream
-            ]
-          })
-        }), /*#__PURE__*/_jsx(Rect, {
-          x: 0,
-          y: 0,
-          width: width,
-          height: height,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(width / 2, height / 2),
-            colors: [`${MAZE_ADVENTURE_COLORS[1]}25`,
-            // Vibrant teal
-            'transparent', `${MAZE_ADVENTURE_COLORS[5]}25`,
-            // Vibrant plum
-            'transparent', `${MAZE_ADVENTURE_COLORS[9]}25`,
-            // Vibrant light blue
-            'transparent', `${MAZE_ADVENTURE_COLORS[13]}25`,
-            // Vibrant pale green
-            'transparent']
-          })
-        }), /*#__PURE__*/_jsx(Rect, {
-          x: 0,
-          y: 0,
-          width: width,
-          height: height,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(width, 0),
-            end: vec(0, height),
-            colors: [`${MAZE_ADVENTURE_COLORS[3]}20`,
-            // Vibrant mint green
-            'transparent', `${MAZE_ADVENTURE_COLORS[7]}20`,
-            // Vibrant lemon
-            'transparent', `${MAZE_ADVENTURE_COLORS[11]}20`,
-            // Vibrant peach
-            'transparent']
-          })
-        }), generateFloatingElements, /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.1,
-          cy: height * 0.15,
-          r: 40,
-          color: `${MAZE_ADVENTURE_COLORS[0]}30` // Vibrant coral red
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.9,
-          cy: height * 0.85,
-          r: 35,
-          color: `${MAZE_ADVENTURE_COLORS[3]}30` // Vibrant mint green
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.85,
-          cy: height * 0.2,
-          r: 30,
-          color: `${MAZE_ADVENTURE_COLORS[8]}30` // Vibrant lavender
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.15,
-          cy: height * 0.8,
-          r: 45,
-          color: `${MAZE_ADVENTURE_COLORS[12]}30` // Vibrant light purple
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.5,
-          cy: height * 0.1,
-          r: 25,
-          color: `${MAZE_ADVENTURE_COLORS[14]}30` // Vibrant cream
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.2,
-          cy: height * 0.5,
-          r: 32,
-          color: `${MAZE_ADVENTURE_COLORS[6]}30` // Vibrant seafoam
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.8,
-          cy: height * 0.6,
-          r: 28,
-          color: `${MAZE_ADVENTURE_COLORS[10]}30` // Vibrant light green
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.6,
-          cy: height * 0.9,
-          r: 20,
-          color: `${MAZE_ADVENTURE_COLORS[1]}30` // Vibrant teal
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.3,
-          cy: height * 0.25,
-          r: 24,
-          color: `${MAZE_ADVENTURE_COLORS[4]}30` // Vibrant golden yellow
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.7,
-          cy: height * 0.35,
-          r: 26,
-          color: `${MAZE_ADVENTURE_COLORS[9]}30` // Vibrant light blue
-        }), Array.from({
-          length: Math.floor(width / 40)
-        }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-          x: i * 40,
-          y: 0,
-          width: 1,
-          height: height,
-          color: "rgba(0, 0, 0, 0.02)"
-        }, `grid-v-${i}`)), Array.from({
-          length: Math.floor(height / 40)
-        }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-          x: 0,
-          y: i * 40,
-          width: width,
-          height: 1,
-          color: "rgba(0, 0, 0, 0.02)"
-        }, `grid-h-${i}`))]
-      })
-    })
-  });
-};
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{StyleSheet,View}from 'react-native';import{Canvas,LinearGradient,Rect,Circle,vec}from '@shopify/react-native-skia';import{MAZE_ADVENTURE_COLORS}from "../MazeRunnerConstants.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from "react/jsx-runtime";export const GameBackground =({width,height})=>{const generateFloatingElements = React.useMemo(()=>{const elements = [];const elementCount = 12;for(let i = 0;i < elementCount;i++){const baseX = width / elementCount * i;const baseY = height / elementCount * i;const x = baseX + Math.sin(i * 0.5)* 40 + i % 3 * 20;const y = baseY + Math.cos(i * 0.7)* 50 + i % 4 * 25;const radius = 10 + i % 8 + Math.sin(i)* 5;const colorIndex = i % MAZE_ADVENTURE_COLORS.length;const opacity = 0.25 + Math.sin(i * 0.3)* 0.1;elements.push(_jsx(Circle,{cx:Math.max(radius,Math.min(width - radius,x)),cy:Math.max(radius,Math.min(height - radius,y)),r:radius,color:`${MAZE_ADVENTURE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`floating-element-${i}`));}return elements;},[width,height]);return _jsx(_Fragment,{children:_jsx(View,{style:StyleSheet.absoluteFillObject,children:_jsxs(Canvas,{style:{width,height},children:[_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(width,height),colors:[`${MAZE_ADVENTURE_COLORS[0]}40`,`${MAZE_ADVENTURE_COLORS[2]}35`,`${MAZE_ADVENTURE_COLORS[4]}40`,`${MAZE_ADVENTURE_COLORS[6]}35`,`${MAZE_ADVENTURE_COLORS[8]}40`,`${MAZE_ADVENTURE_COLORS[10]}35`,`${MAZE_ADVENTURE_COLORS[12]}40`,`${MAZE_ADVENTURE_COLORS[14]}35` ]})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(width / 2,height / 2),colors:[`${MAZE_ADVENTURE_COLORS[1]}25`,'transparent',`${MAZE_ADVENTURE_COLORS[5]}25`,'transparent',`${MAZE_ADVENTURE_COLORS[9]}25`,'transparent',`${MAZE_ADVENTURE_COLORS[13]}25`,'transparent']})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(width,0),end:vec(0,height),colors:[`${MAZE_ADVENTURE_COLORS[3]}20`,'transparent',`${MAZE_ADVENTURE_COLORS[7]}20`,'transparent',`${MAZE_ADVENTURE_COLORS[11]}20`,'transparent']})}),generateFloatingElements,_jsx(Circle,{cx:width * 0.1,cy:height * 0.15,r:40,color:`${MAZE_ADVENTURE_COLORS[0]}30`}),_jsx(Circle,{cx:width * 0.9,cy:height * 0.85,r:35,color:`${MAZE_ADVENTURE_COLORS[3]}30`}),_jsx(Circle,{cx:width * 0.85,cy:height * 0.2,r:30,color:`${MAZE_ADVENTURE_COLORS[8]}30`}),_jsx(Circle,{cx:width * 0.15,cy:height * 0.8,r:45,color:`${MAZE_ADVENTURE_COLORS[12]}30`}),_jsx(Circle,{cx:width * 0.5,cy:height * 0.1,r:25,color:`${MAZE_ADVENTURE_COLORS[14]}30`}),_jsx(Circle,{cx:width * 0.2,cy:height * 0.5,r:32,color:`${MAZE_ADVENTURE_COLORS[6]}30`}),_jsx(Circle,{cx:width * 0.8,cy:height * 0.6,r:28,color:`${MAZE_ADVENTURE_COLORS[10]}30`}),_jsx(Circle,{cx:width * 0.6,cy:height * 0.9,r:20,color:`${MAZE_ADVENTURE_COLORS[1]}30`}),_jsx(Circle,{cx:width * 0.3,cy:height * 0.25,r:24,color:`${MAZE_ADVENTURE_COLORS[4]}30`}),_jsx(Circle,{cx:width * 0.7,cy:height * 0.35,r:26,color:`${MAZE_ADVENTURE_COLORS[9]}30`}),Array.from({length:Math.floor(width / 40)},(_,i)=> _jsx(Rect,{x:i * 40,y:0,width:1,height:height,color:"rgba(0,0,0,0.02)"},`grid-v-${i}`)),Array.from({length:Math.floor(height / 40)},(_,i)=> _jsx(Rect,{x:0,y:i * 40,width:width,height:1,color:"rgba(0,0,0,0.02)"},`grid-h-${i}`))]})})});};

package/lib/module/games/maze-runner/components/ScoreBoard.js

@@ -1,61 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { MazeRunnerService } from "../MazeRunnerService.js";
-import { ScoreBoardContainer } from "../../../helpers/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Memoized ScoreBoard component to prevent unnecessary re-renders
-export const ScoreBoard = /*#__PURE__*/React.memo(({
-  gameState,
-  offset = 0
-}) => {
-  // Create service instance for formatting (memoized to avoid recreation)
-  const gameService = useMemo(() => new MazeRunnerService(10, 400, 400, 120), []);
-  const formattedTime = useMemo(() => gameService.formatTime(gameState.timeElapsed), [gameService, gameState.timeElapsed]);
-  return /*#__PURE__*/_jsx(ScoreBoardContainer, {
-    offset: offset,
-    backgroundColor: "rgba(139, 69, 19, 0.4)",
-    borderColor: "rgba(255, 255, 255, 0.3)",
-    children: /*#__PURE__*/_jsx(View, {
-      style: styles.scoreBoard,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.scoreSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Time Elapsed"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.timeValue,
-          children: formattedTime
-        })]
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  scoreBoard: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  scoreSection: {
-    alignItems: 'center'
-  },
-  scoreLabel: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#ffffff',
-    marginBottom: 4
-  },
-  scoreValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#92400e' // Brown color for score value
-  },
-  timeValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#ffffff' // White color for time value
-  }
-});
-//# sourceMappingURL=ScoreBoard.js.map
+"use strict";import React,{useMemo}from 'react';import{View,Text,StyleSheet}from 'react-native';import{MazeRunnerService}from "../MazeRunnerService.js";import{ScoreBoardContainer}from "../../../helpers/index.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const ScoreBoard = React.memo(({gameState,offset = 0})=>{const gameService = useMemo(()=> new MazeRunnerService(10,400,400,120),[]);const formattedTime = useMemo(()=> gameService.formatTime(gameState.timeElapsed),[gameService,gameState.timeElapsed]);return _jsx(ScoreBoardContainer,{offset:offset,backgroundColor:"rgba(139,69,19,0.4)",borderColor:"rgba(255,255,255,0.3)",children:_jsx(View,{style:styles.scoreBoard,children:_jsxs(View,{style:styles.scoreSection,children:[_jsx(Text,{style:styles.scoreLabel,children:"Time Elapsed"}),_jsx(Text,{style:styles.timeValue,children:formattedTime})]})})});});const styles = StyleSheet.create({scoreBoard:{flexDirection:'row',justifyContent:'center',alignItems:'center'},scoreSection:{alignItems:'center'},scoreLabel:{fontSize:16,fontWeight:'bold',color:'#ffffff',marginBottom:4},scoreValue:{fontSize:25,fontWeight:'bold',color:'#92400e'},timeValue:{fontSize:25,fontWeight:'bold',color:'#ffffff'}});

package/lib/module/games/maze-runner/components/SkiaPipeComponent.js

@@ -1,209 +1 @@
-"use strict";
-
-import React from 'react';
-import { Canvas, Path, Circle, LinearGradient, vec, Shadow } from '@shopify/react-native-skia';
-// PipeSegment type not exported from MazeRunnerService
-// Using inline type definition
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const SkiaPipeComponent = ({
-  segment,
-  pipeWidth
-}) => {
-  const canvasWidth = Math.abs(segment.end.x - segment.start.x) + pipeWidth * 2;
-  const canvasHeight = Math.abs(segment.end.y - segment.start.y) + pipeWidth * 2;
-  const canvasSize = Math.max(canvasWidth, canvasHeight, pipeWidth * 3);
-  const renderStraightPipe = () => {
-    const {
-      start,
-      end
-    } = segment;
-    const centerX = canvasSize / 2;
-    const centerY = canvasSize / 2;
-    if (segment.direction === 'horizontal') {
-      const length = Math.abs(end.x - start.x);
-      const pipeLeft = centerX - length / 2;
-      const pipeRight = centerX + length / 2;
-      const pipeTop = centerY - pipeWidth / 2;
-      const pipeBottom = centerY + pipeWidth / 2;
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(Path, {
-          path: `M ${pipeLeft} ${pipeTop} L ${pipeRight} ${pipeTop} L ${pipeRight} ${pipeBottom} L ${pipeLeft} ${pipeBottom} Z`,
-          children: [/*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(centerX, pipeTop),
-            end: vec(centerX, pipeBottom),
-            colors: ['#8B4513', '#A0522D', '#654321', '#4A4A4A', '#2F2F2F']
-          }), /*#__PURE__*/_jsx(Shadow, {
-            dx: 0,
-            dy: 2,
-            blur: 4,
-            color: "rgba(0,0,0,0.4)"
-          })]
-        }), /*#__PURE__*/_jsx(Path, {
-          path: `M ${pipeLeft} ${pipeTop} L ${pipeRight} ${pipeTop} L ${pipeRight} ${pipeTop + 2} L ${pipeLeft} ${pipeTop + 2} Z`,
-          color: "rgba(160, 82, 45, 0.8)"
-        }), /*#__PURE__*/_jsx(Path, {
-          path: `M ${pipeLeft} ${pipeBottom - 2} L ${pipeRight} ${pipeBottom - 2} L ${pipeRight} ${pipeBottom} L ${pipeLeft} ${pipeBottom} Z`,
-          color: "rgba(47, 47, 47, 0.8)"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: pipeLeft,
-          cy: centerY,
-          r: pipeWidth / 2,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(pipeLeft - pipeWidth / 4, centerY - pipeWidth / 4),
-            end: vec(pipeLeft + pipeWidth / 4, centerY + pipeWidth / 4),
-            colors: ['#A0522D', '#8B4513', '#654321']
-          })
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: pipeRight,
-          cy: centerY,
-          r: pipeWidth / 2,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(pipeRight - pipeWidth / 4, centerY - pipeWidth / 4),
-            end: vec(pipeRight + pipeWidth / 4, centerY + pipeWidth / 4),
-            colors: ['#A0522D', '#8B4513', '#654321']
-          })
-        })]
-      });
-    } else {
-      // Vertical pipe
-      const length = Math.abs(end.y - start.y);
-      const pipeTop = centerY - length / 2;
-      const pipeBottom = centerY + length / 2;
-      const pipeLeft = centerX - pipeWidth / 2;
-      const pipeRight = centerX + pipeWidth / 2;
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(Path, {
-          path: `M ${pipeLeft} ${pipeTop} L ${pipeRight} ${pipeTop} L ${pipeRight} ${pipeBottom} L ${pipeLeft} ${pipeBottom} Z`,
-          children: [/*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(pipeLeft, centerY),
-            end: vec(pipeRight, centerY),
-            colors: ['#8B4513', '#A0522D', '#654321', '#4A4A4A', '#2F2F2F']
-          }), /*#__PURE__*/_jsx(Shadow, {
-            dx: 2,
-            dy: 0,
-            blur: 4,
-            color: "rgba(0,0,0,0.4)"
-          })]
-        }), /*#__PURE__*/_jsx(Path, {
-          path: `M ${pipeLeft} ${pipeTop} L ${pipeLeft + 2} ${pipeTop} L ${pipeLeft + 2} ${pipeBottom} L ${pipeLeft} ${pipeBottom} Z`,
-          color: "rgba(160, 82, 45, 0.8)"
-        }), /*#__PURE__*/_jsx(Path, {
-          path: `M ${pipeRight - 2} ${pipeTop} L ${pipeRight} ${pipeTop} L ${pipeRight} ${pipeBottom} L ${pipeRight - 2} ${pipeBottom} Z`,
-          color: "rgba(47, 47, 47, 0.8)"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: centerX,
-          cy: pipeTop,
-          r: pipeWidth / 2,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(centerX - pipeWidth / 4, pipeTop - pipeWidth / 4),
-            end: vec(centerX + pipeWidth / 4, pipeTop + pipeWidth / 4),
-            colors: ['#A0522D', '#8B4513', '#654321']
-          })
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: centerX,
-          cy: pipeBottom,
-          r: pipeWidth / 2,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(centerX - pipeWidth / 4, pipeBottom - pipeWidth / 4),
-            end: vec(centerX + pipeWidth / 4, pipeBottom + pipeWidth / 4),
-            colors: ['#A0522D', '#8B4513', '#654321']
-          })
-        })]
-      });
-    }
-  };
-  const renderCornerPipe = () => {
-    const centerX = canvasSize / 2;
-    const centerY = canvasSize / 2;
-    const radius = pipeWidth * 1.5;
-    const {
-      cornerType
-    } = segment;
-    let startAngle = 0;
-    let endAngle = 90;
-    let sweepAngle = 90;
-    switch (cornerType) {
-      case 'top-right':
-        startAngle = 0;
-        endAngle = 90;
-        break;
-      case 'bottom-right':
-        startAngle = 270;
-        endAngle = 360;
-        break;
-      case 'bottom-left':
-        startAngle = 180;
-        endAngle = 270;
-        break;
-      case 'top-left':
-        startAngle = 90;
-        endAngle = 180;
-        break;
-    }
-    const startAngleRad = startAngle * Math.PI / 180;
-    const endAngleRad = endAngle * Math.PI / 180;
-    const innerRadius = radius - pipeWidth / 2;
-    const outerRadius = radius + pipeWidth / 2;
-
-    // Calculate arc points
-    const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);
-    const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);
-    const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);
-    const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);
-    const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);
-    const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);
-    const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);
-    const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);
-    const largeArcFlag = sweepAngle > 180 ? 1 : 0;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Path, {
-        path: `
-            M ${innerStartX} ${innerStartY}
-            A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${innerEndX} ${innerEndY}
-            L ${outerEndX} ${outerEndY}
-            A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 0 ${outerStartX} ${outerStartY}
-            Z
-          `,
-        children: [/*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(centerX - radius, centerY - radius),
-          end: vec(centerX + radius, centerY + radius),
-          colors: ['#8B4513', '#A0522D', '#654321', '#4A4A4A', '#2F2F2F']
-        }), /*#__PURE__*/_jsx(Shadow, {
-          dx: 2,
-          dy: 2,
-          blur: 4,
-          color: "rgba(0,0,0,0.4)"
-        })]
-      }), /*#__PURE__*/_jsx(Path, {
-        path: `
-            M ${innerStartX} ${innerStartY}
-            A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${innerEndX} ${innerEndY}
-            L ${centerX + (innerRadius + 2) * Math.cos(endAngleRad)} ${centerY + (innerRadius + 2) * Math.sin(endAngleRad)}
-            A ${innerRadius + 2} ${innerRadius + 2} 0 ${largeArcFlag} 0 ${centerX + (innerRadius + 2) * Math.cos(startAngleRad)} ${centerY + (innerRadius + 2) * Math.sin(startAngleRad)}
-            Z
-          `,
-        color: "rgba(160, 82, 45, 0.6)"
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: centerX,
-        cy: centerY,
-        r: pipeWidth / 3,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(centerX - pipeWidth / 6, centerY - pipeWidth / 6),
-          end: vec(centerX + pipeWidth / 6, centerY + pipeWidth / 6),
-          colors: ['#A0522D', '#8B4513', '#654321']
-        })
-      })]
-    });
-  };
-  return /*#__PURE__*/_jsx(Canvas, {
-    style: {
-      position: 'absolute',
-      left: segment.start.x - canvasSize / 2,
-      top: segment.start.y - canvasSize / 2,
-      width: canvasSize,
-      height: canvasSize
-    },
-    children: segment.type === 'straight' ? renderStraightPipe() : renderCornerPipe()
-  });
-};
-//# sourceMappingURL=SkiaPipeComponent.js.map
+"use strict";import React from 'react';import{Canvas,Path,Circle,LinearGradient,vec,Shadow}from '@shopify/react-native-skia';import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from "react/jsx-runtime";export const SkiaPipeComponent =({segment,pipeWidth})=>{const canvasWidth = Math.abs(segment.end.x - segment.start.x)+ pipeWidth * 2;const canvasHeight = Math.abs(segment.end.y - segment.start.y)+ pipeWidth * 2;const canvasSize = Math.max(canvasWidth,canvasHeight,pipeWidth * 3);const renderStraightPipe =()=>{const{start,end}= segment;const centerX = canvasSize / 2;const centerY = canvasSize / 2;if(segment.direction === 'horizontal'){const length = Math.abs(end.x - start.x);const pipeLeft = centerX - length / 2;const pipeRight = centerX + length / 2;const pipeTop = centerY - pipeWidth / 2;const pipeBottom = centerY + pipeWidth / 2;return _jsxs(_Fragment,{children:[_jsxs(Path,{path:`M ${pipeLeft}${pipeTop}L ${pipeRight}${pipeTop}L ${pipeRight}${pipeBottom}L ${pipeLeft}${pipeBottom}Z`,children:[_jsx(LinearGradient,{start:vec(centerX,pipeTop),end:vec(centerX,pipeBottom),colors:['#8B4513','#A0522D','#654321','#4A4A4A','#2F2F2F']}),_jsx(Shadow,{dx:0,dy:2,blur:4,color:"rgba(0,0,0,0.4)"})]}),_jsx(Path,{path:`M ${pipeLeft}${pipeTop}L ${pipeRight}${pipeTop}L ${pipeRight}${pipeTop + 2}L ${pipeLeft}${pipeTop + 2}Z`,color:"rgba(160,82,45,0.8)"}),_jsx(Path,{path:`M ${pipeLeft}${pipeBottom - 2}L ${pipeRight}${pipeBottom - 2}L ${pipeRight}${pipeBottom}L ${pipeLeft}${pipeBottom}Z`,color:"rgba(47,47,47,0.8)"}),_jsx(Circle,{cx:pipeLeft,cy:centerY,r:pipeWidth / 2,children:_jsx(LinearGradient,{start:vec(pipeLeft - pipeWidth / 4,centerY - pipeWidth / 4),end:vec(pipeLeft + pipeWidth / 4,centerY + pipeWidth / 4),colors:['#A0522D','#8B4513','#654321']})}),_jsx(Circle,{cx:pipeRight,cy:centerY,r:pipeWidth / 2,children:_jsx(LinearGradient,{start:vec(pipeRight - pipeWidth / 4,centerY - pipeWidth / 4),end:vec(pipeRight + pipeWidth / 4,centerY + pipeWidth / 4),colors:['#A0522D','#8B4513','#654321']})})]});}else{const length = Math.abs(end.y - start.y);const pipeTop = centerY - length / 2;const pipeBottom = centerY + length / 2;const pipeLeft = centerX - pipeWidth / 2;const pipeRight = centerX + pipeWidth / 2;return _jsxs(_Fragment,{children:[_jsxs(Path,{path:`M ${pipeLeft}${pipeTop}L ${pipeRight}${pipeTop}L ${pipeRight}${pipeBottom}L ${pipeLeft}${pipeBottom}Z`,children:[_jsx(LinearGradient,{start:vec(pipeLeft,centerY),end:vec(pipeRight,centerY),colors:['#8B4513','#A0522D','#654321','#4A4A4A','#2F2F2F']}),_jsx(Shadow,{dx:2,dy:0,blur:4,color:"rgba(0,0,0,0.4)"})]}),_jsx(Path,{path:`M ${pipeLeft}${pipeTop}L ${pipeLeft + 2}${pipeTop}L ${pipeLeft + 2}${pipeBottom}L ${pipeLeft}${pipeBottom}Z`,color:"rgba(160,82,45,0.8)"}),_jsx(Path,{path:`M ${pipeRight - 2}${pipeTop}L ${pipeRight}${pipeTop}L ${pipeRight}${pipeBottom}L ${pipeRight - 2}${pipeBottom}Z`,color:"rgba(47,47,47,0.8)"}),_jsx(Circle,{cx:centerX,cy:pipeTop,r:pipeWidth / 2,children:_jsx(LinearGradient,{start:vec(centerX - pipeWidth / 4,pipeTop - pipeWidth / 4),end:vec(centerX + pipeWidth / 4,pipeTop + pipeWidth / 4),colors:['#A0522D','#8B4513','#654321']})}),_jsx(Circle,{cx:centerX,cy:pipeBottom,r:pipeWidth / 2,children:_jsx(LinearGradient,{start:vec(centerX - pipeWidth / 4,pipeBottom - pipeWidth / 4),end:vec(centerX + pipeWidth / 4,pipeBottom + pipeWidth / 4),colors:['#A0522D','#8B4513','#654321']})})]});}};const renderCornerPipe =()=>{const centerX = canvasSize / 2;const centerY = canvasSize / 2;const radius = pipeWidth * 1.5;const{cornerType}= segment;let startAngle = 0;let endAngle = 90;let sweepAngle = 90;switch(cornerType){case 'top-right':startAngle = 0;endAngle = 90;break;case 'bottom-right':startAngle = 270;endAngle = 360;break;case 'bottom-left':startAngle = 180;endAngle = 270;break;case 'top-left':startAngle = 90;endAngle = 180;break;}const startAngleRad = startAngle * Math.PI / 180;const endAngleRad = endAngle * Math.PI / 180;const innerRadius = radius - pipeWidth / 2;const outerRadius = radius + pipeWidth / 2;const innerStartX = centerX + innerRadius * Math.cos(startAngleRad);const innerStartY = centerY + innerRadius * Math.sin(startAngleRad);const innerEndX = centerX + innerRadius * Math.cos(endAngleRad);const innerEndY = centerY + innerRadius * Math.sin(endAngleRad);const outerStartX = centerX + outerRadius * Math.cos(startAngleRad);const outerStartY = centerY + outerRadius * Math.sin(startAngleRad);const outerEndX = centerX + outerRadius * Math.cos(endAngleRad);const outerEndY = centerY + outerRadius * Math.sin(endAngleRad);const largeArcFlag = sweepAngle > 180 ? 1:0;return _jsxs(_Fragment,{children:[_jsxs(Path,{path:` M ${innerStartX}${innerStartY}A ${innerRadius}${innerRadius}0 ${largeArcFlag}1 ${innerEndX}${innerEndY}L ${outerEndX}${outerEndY}A ${outerRadius}${outerRadius}0 ${largeArcFlag}0 ${outerStartX}${outerStartY}Z `,children:[_jsx(LinearGradient,{start:vec(centerX - radius,centerY - radius),end:vec(centerX + radius,centerY + radius),colors:['#8B4513','#A0522D','#654321','#4A4A4A','#2F2F2F']}),_jsx(Shadow,{dx:2,dy:2,blur:4,color:"rgba(0,0,0,0.4)"})]}),_jsx(Path,{path:` M ${innerStartX}${innerStartY}A ${innerRadius}${innerRadius}0 ${largeArcFlag}1 ${innerEndX}${innerEndY}L ${centerX +(innerRadius + 2)* Math.cos(endAngleRad)}${centerY +(innerRadius + 2)* Math.sin(endAngleRad)}A ${innerRadius + 2}${innerRadius + 2}0 ${largeArcFlag}0 ${centerX +(innerRadius + 2)* Math.cos(startAngleRad)}${centerY +(innerRadius + 2)* Math.sin(startAngleRad)}Z `,color:"rgba(160,82,45,0.6)"}),_jsx(Circle,{cx:centerX,cy:centerY,r:pipeWidth / 3,children:_jsx(LinearGradient,{start:vec(centerX - pipeWidth / 6,centerY - pipeWidth / 6),end:vec(centerX + pipeWidth / 6,centerY + pipeWidth / 6),colors:['#A0522D','#8B4513','#654321']})})]});};return _jsx(Canvas,{style:{position:'absolute',left:segment.start.x - canvasSize / 2,top:segment.start.y - canvasSize / 2,width:canvasSize,height:canvasSize},children:segment.type === 'straight' ? renderStraightPipe():renderCornerPipe()});};

package/lib/module/games/maze-runner/components/StaticGameBackground.js

@@ -1,169 +1 @@
-"use strict";
-
-import React from 'react';
-import { Canvas, LinearGradient, vec, Circle, Path, Shadow } from '@shopify/react-native-skia';
-import Animated from 'react-native-reanimated';
-import { Dimensions } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  width: screenWidth,
-  height: screenHeight
-} = Dimensions.get('window');
-export const GameBackground = ({
-  children
-}) => {
-  // Static background with no animations or changing elements
-  const staticStyle = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: -1
-  };
-
-  // Pre-calculated static maze pattern - no Math.random() or changing values
-  const staticMazePattern = React.useMemo(() => {
-    const gridSize = 20;
-    const cellSize = screenWidth / gridSize;
-    const elements = [];
-
-    // Create completely static maze pattern
-    for (let i = 0; i < gridSize; i++) {
-      for (let j = 0; j < gridSize; j++) {
-        const x = i * cellSize;
-        const y = j * cellSize;
-        // Fixed deterministic opacity based on position
-        const seed = (i * 31 + j * 17) % 100;
-        const opacity = seed > 70 ? 0.08 : 0.04;
-
-        // Fixed vertical lines pattern
-        if ((i + j * 2) % 5 > 2) {
-          elements.push(/*#__PURE__*/_jsx(Path, {
-            path: `M ${x} ${y} L ${x} ${y + cellSize}`,
-            style: "stroke",
-            strokeWidth: 1,
-            color: `rgba(139, 69, 19, ${opacity})`
-          }, `v-${i}-${j}`));
-        }
-
-        // Fixed horizontal lines pattern
-        if ((i * 2 + j) % 5 > 2) {
-          elements.push(/*#__PURE__*/_jsx(Path, {
-            path: `M ${x} ${y} L ${x + cellSize} ${y}`,
-            style: "stroke",
-            strokeWidth: 1,
-            color: `rgba(139, 69, 19, ${opacity})`
-          }, `h-${i}-${j}`));
-        }
-      }
-    }
-    return elements;
-  }, []);
-
-  // Static floating elements - no animations
-  const staticFloatingElements = React.useMemo(() => {
-    const elements = [];
-
-    // Static maze pieces with fixed positioning
-    for (let i = 0; i < 6; i++) {
-      const seed = i * 37;
-      const x = screenWidth / 6 * i + seed % 40;
-      const y = screenHeight / 3 * (i % 3) + seed * 2 % 80;
-      const size = 12 + seed * 3 % 8;
-      elements.push(/*#__PURE__*/_jsx(Circle, {
-        cx: x,
-        cy: y,
-        r: size,
-        opacity: 0.1,
-        color: "rgba(139, 69, 19, 0.2)",
-        children: /*#__PURE__*/_jsx(Shadow, {
-          dx: 1,
-          dy: 1,
-          blur: 2,
-          color: "rgba(0,0,0,0.1)"
-        })
-      }, `maze-piece-${i}`));
-    }
-
-    // Static corner accents
-    const cornerSize = 30;
-    elements.push(
-    /*#__PURE__*/
-    // Top-left corner
-    _jsx(Path, {
-      path: `M 15 15 L ${cornerSize + 15} 15 L ${cornerSize + 15} 30 L 30 30 L 30 ${cornerSize + 15} L 15 ${cornerSize + 15} Z`,
-      color: "rgba(139, 69, 19, 0.15)",
-      opacity: 0.5,
-      children: /*#__PURE__*/_jsx(Shadow, {
-        dx: 1,
-        dy: 1,
-        blur: 2,
-        color: "rgba(0,0,0,0.05)"
-      })
-    }, "corner-tl"),
-    /*#__PURE__*/
-    // Top-right corner
-    _jsx(Path, {
-      path: `M ${screenWidth - cornerSize - 15} 15 L ${screenWidth - 15} 15 L ${screenWidth - 15} ${cornerSize + 15} L ${screenWidth - 30} ${cornerSize + 15} L ${screenWidth - 30} 30 L ${screenWidth - cornerSize - 15} 30 Z`,
-      color: "rgba(139, 69, 19, 0.15)",
-      opacity: 0.5,
-      children: /*#__PURE__*/_jsx(Shadow, {
-        dx: -1,
-        dy: 1,
-        blur: 2,
-        color: "rgba(0,0,0,0.05)"
-      })
-    }, "corner-tr"));
-    return elements;
-  }, []);
-
-  // Static particles - no animations
-  const staticParticles = React.useMemo(() => {
-    const particles = [];
-    for (let i = 0; i < 12; i++) {
-      const seed = i * 43;
-      const x = seed % screenWidth;
-      const y = seed * 7 % screenHeight;
-      const size = 1.5 + seed * 3 % 2;
-      const opacity = 0.08 + seed * 5 % 15 / 100;
-      particles.push(/*#__PURE__*/_jsx(Circle, {
-        cx: x,
-        cy: y,
-        r: size,
-        color: `rgba(160, 82, 45, ${opacity})`
-      }, `particle-${i}`));
-    }
-    return particles;
-  }, []);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: staticStyle,
-      children: /*#__PURE__*/_jsxs(Canvas, {
-        style: {
-          width: screenWidth,
-          height: screenHeight
-        },
-        children: [/*#__PURE__*/_jsx(Path, {
-          path: `M 0 0 L ${screenWidth} 0 L ${screenWidth} ${screenHeight} L 0 ${screenHeight} Z`,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(0, screenHeight),
-            colors: ['#f8f4e6',
-            // Light cream
-            '#f0e6d2',
-            // Warm beige
-            '#e8d5b7',
-            // Light brown
-            '#d4c4a8' // Medium beige
-            ]
-          })
-        }), staticMazePattern, staticFloatingElements, staticParticles, /*#__PURE__*/_jsx(Path, {
-          path: `M 0 0 L ${screenWidth} 0 L ${screenWidth} ${screenHeight} L 0 ${screenHeight} Z`,
-          color: "rgba(139, 69, 19, 0.02)"
-        })]
-      })
-    }), children]
-  });
-};
-//# sourceMappingURL=StaticGameBackground.js.map
+"use strict";import React from 'react';import{Canvas,LinearGradient,vec,Circle,Path,Shadow}from '@shopify/react-native-skia';import Animated from 'react-native-reanimated';import{Dimensions}from 'react-native';import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from "react/jsx-runtime";const{width:screenWidth,height:screenHeight}= Dimensions.get('window');export const GameBackground =({children})=>{const staticStyle ={position:'absolute',top:0,left:0,right:0,bottom:0,zIndex:-1};const staticMazePattern = React.useMemo(()=>{const gridSize = 20;const cellSize = screenWidth / gridSize;const elements = [];for(let i = 0;i < gridSize;i++){for(let j = 0;j < gridSize;j++){const x = i * cellSize;const y = j * cellSize;const seed =(i * 31 + j * 17)% 100;const opacity = seed > 70 ? 0.08:0.04;if((i + j * 2)% 5 > 2){elements.push(_jsx(Path,{path:`M ${x}${y}L ${x}${y + cellSize}`,style:"stroke",strokeWidth:1,color:`rgba(139,69,19,${opacity})`},`v-${i}-${j}`));}if((i * 2 + j)% 5 > 2){elements.push(_jsx(Path,{path:`M ${x}${y}L ${x + cellSize}${y}`,style:"stroke",strokeWidth:1,color:`rgba(139,69,19,${opacity})`},`h-${i}-${j}`));}}}return elements;},[]);const staticFloatingElements = React.useMemo(()=>{const elements = [];for(let i = 0;i < 6;i++){const seed = i * 37;const x = screenWidth / 6 * i + seed % 40;const y = screenHeight / 3 *(i % 3)+ seed * 2 % 80;const size = 12 + seed * 3 % 8;elements.push(_jsx(Circle,{cx:x,cy:y,r:size,opacity:0.1,color:"rgba(139,69,19,0.2)",children:_jsx(Shadow,{dx:1,dy:1,blur:2,color:"rgba(0,0,0,0.1)"})},`maze-piece-${i}`));}const cornerSize = 30;elements.push(_jsx(Path,{path:`M 15 15 L ${cornerSize + 15}15 L ${cornerSize + 15}30 L 30 30 L 30 ${cornerSize + 15}L 15 ${cornerSize + 15}Z`,color:"rgba(139,69,19,0.15)",opacity:0.5,children:_jsx(Shadow,{dx:1,dy:1,blur:2,color:"rgba(0,0,0,0.05)"})},"corner-tl"),_jsx(Path,{path:`M ${screenWidth - cornerSize - 15}15 L ${screenWidth - 15}15 L ${screenWidth - 15}${cornerSize + 15}L ${screenWidth - 30}${cornerSize + 15}L ${screenWidth - 30}30 L ${screenWidth - cornerSize - 15}30 Z`,color:"rgba(139,69,19,0.15)",opacity:0.5,children:_jsx(Shadow,{dx:-1,dy:1,blur:2,color:"rgba(0,0,0,0.05)"})},"corner-tr"));return elements;},[]);const staticParticles = React.useMemo(()=>{const particles = [];for(let i = 0;i < 12;i++){const seed = i * 43;const x = seed % screenWidth;const y = seed * 7 % screenHeight;const size = 1.5 + seed * 3 % 2;const opacity = 0.08 + seed * 5 % 15 / 100;particles.push(_jsx(Circle,{cx:x,cy:y,r:size,color:`rgba(160,82,45,${opacity})`},`particle-${i}`));}return particles;},[]);return _jsxs(_Fragment,{children:[_jsx(Animated.View,{style:staticStyle,children:_jsxs(Canvas,{style:{width:screenWidth,height:screenHeight},children:[_jsx(Path,{path:`M 0 0 L ${screenWidth}0 L ${screenWidth}${screenHeight}L 0 ${screenHeight}Z`,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,screenHeight),colors:['#f8f4e6','#f0e6d2','#e8d5b7','#d4c4a8' ]})}),staticMazePattern,staticFloatingElements,staticParticles,_jsx(Path,{path:`M 0 0 L ${screenWidth}0 L ${screenWidth}${screenHeight}L 0 ${screenHeight}Z`,color:"rgba(139,69,19,0.02)"})]})}),children]});};