react-native-games 1.1.0 → 1.3.0

package/lib/module/games/balloon-blaster/BalloonBlasterStore.js

@@ -1,183 +1 @@
-"use strict";
-
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { GAME_CONFIG } from "./BalloonBlasterService.js";
-import { immerMiddleware } from "../../services/UtilsService.js";
-// Optimized store with selective subscriptions for low-end devices
-export const useBalloonBlasterStore = create()(subscribeWithSelector(immerMiddleware((set, get) => ({
-  // Initial state
-  score: 0,
-  timeLeft: 60,
-  // Fixed 60 seconds regardless of difficulty
-  isPlaying: false,
-  gameOver: false,
-  combo: 0,
-  lives: GAME_CONFIG.MAX_LIVES,
-  balloons: [],
-  particles: [],
-  slicePath: [],
-  isSlicing: false,
-  // Actions
-  startGame: _gameDuration => {
-    // Always use fixed duration regardless of difficulty or passed duration
-    const duration = 60;
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = duration;
-      draft.isPlaying = true;
-      draft.gameOver = false;
-      draft.combo = 0;
-      draft.lives = GAME_CONFIG.MAX_LIVES;
-      draft.balloons = [];
-      draft.slicePath = [];
-      draft.isSlicing = false;
-    });
-  },
-  stopGame: () => {
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = 60; // Fixed 60 seconds
-      draft.isPlaying = false;
-      draft.gameOver = false;
-      draft.combo = 0;
-      draft.lives = GAME_CONFIG.MAX_LIVES;
-      draft.balloons = [];
-      draft.slicePath = [];
-      draft.isSlicing = false;
-    });
-  },
-  resetGame: () => {
-    set(draft => {
-      draft.score = 0;
-      draft.timeLeft = 60; // Fixed 60 seconds
-      draft.isPlaying = false;
-      draft.gameOver = false;
-      draft.combo = 0;
-      draft.lives = GAME_CONFIG.MAX_LIVES;
-      draft.balloons = [];
-      draft.slicePath = [];
-      draft.isSlicing = false;
-    });
-  },
-  popBalloon: balloonId => {
-    const {
-      balloons,
-      isPlaying
-    } = get();
-    if (!isPlaying) return;
-
-    // Optimized: Use for-loop instead of find for better performance
-    let balloonIndex = -1;
-    for (let i = 0; i < balloons.length; i++) {
-      if (balloons[i].id === balloonId) {
-        balloonIndex = i;
-        break;
-      }
-    }
-    if (balloonIndex === -1 || balloons[balloonIndex].isPopped) return;
-
-    // Simplified scoring: each balloon = 10 points (no combo multipliers)
-    const points = 10;
-    set(draft => {
-      draft.score = draft.score + points;
-      // Optimized: Direct array access instead of find
-      if (draft.balloons[balloonIndex]) {
-        draft.balloons[balloonIndex].isPopped = true;
-        draft.balloons[balloonIndex].popTime = Date.now();
-      }
-    });
-  },
-  updateScore: points => {
-    set(draft => {
-      draft.score = draft.score + points;
-    });
-  },
-  decrementTime: () => {
-    set(draft => {
-      const newTimeLeft = draft.timeLeft - 1;
-      if (newTimeLeft <= 0) {
-        draft.timeLeft = 0;
-        draft.isPlaying = false;
-        draft.gameOver = true;
-      } else {
-        draft.timeLeft = newTimeLeft;
-      }
-    });
-  },
-  addBalloon: balloon => {
-    set(draft => {
-      // FORCE all balloons to spawn from bottom - override any wrong positions
-      const {
-        height
-      } = require('react-native').Dimensions.get('window');
-      const correctedBalloon = {
-        ...balloon,
-        position: {
-          x: balloon.position.x,
-          y: height + 20 // Force bottom spawn regardless of input
-        }
-      };
-      draft.balloons.push(correctedBalloon);
-    });
-  },
-  removeBalloon: balloonId => {
-    set(draft => {
-      draft.balloons = draft.balloons.filter(b => b.id !== balloonId);
-    });
-  },
-  updateBalloon: (balloonId, updates) => {
-    set(draft => {
-      // Optimized: Use for-loop instead of find for better performance
-      for (let i = 0; i < draft.balloons.length; i++) {
-        if (draft.balloons[i].id === balloonId) {
-          Object.assign(draft.balloons[i], updates);
-          break;
-        }
-      }
-    });
-  },
-  setParticles: particles => {
-    set(draft => {
-      draft.particles = particles;
-    });
-  },
-  setSlicePath: path => {
-    set(draft => {
-      draft.slicePath = path;
-    });
-  },
-  setIsSlicing: isSlicing => {
-    set(draft => {
-      draft.isSlicing = isSlicing;
-    });
-  },
-  incrementCombo: () => {
-    set(draft => {
-      draft.combo = draft.combo + 1;
-    });
-  },
-  resetCombo: () => {
-    set(draft => {
-      draft.combo = 0;
-    });
-  },
-  loseLife: () => {
-    set(draft => {
-      const newLives = draft.lives - 1;
-      if (newLives <= 0) {
-        draft.lives = 0;
-        draft.isPlaying = false;
-        draft.gameOver = true;
-      } else {
-        draft.lives = newLives;
-      }
-    });
-  },
-  addLife: () => {
-    set(draft => {
-      draft.lives = Math.min(draft.lives + 1, GAME_CONFIG.MAX_LIVES); // Cap at max lives
-    });
-  }
-}))));
-//# sourceMappingURL=BalloonBlasterStore.js.map
+"use strict";import{create}from 'zustand';import{subscribeWithSelector}from 'zustand/middleware';import{GAME_CONFIG}from "./BalloonBlasterService.js";import{immerMiddleware}from "../../services/UtilsService.js";export const useBalloonBlasterStore = create()(subscribeWithSelector(immerMiddleware((set,get)=>({score:0,timeLeft:60,isPlaying:false,gameOver:false,combo:0,lives:GAME_CONFIG.MAX_LIVES,balloons:[],particles:[],slicePath:[],isSlicing:false,startGame:_gameDuration =>{const duration = 60;set(draft =>{draft.score = 0;draft.timeLeft = duration;draft.isPlaying = true;draft.gameOver = false;draft.combo = 0;draft.lives = GAME_CONFIG.MAX_LIVES;draft.balloons = [];draft.slicePath = [];draft.isSlicing = false;});},stopGame:()=>{set(draft =>{draft.score = 0;draft.timeLeft = 60;draft.isPlaying = false;draft.gameOver = false;draft.combo = 0;draft.lives = GAME_CONFIG.MAX_LIVES;draft.balloons = [];draft.slicePath = [];draft.isSlicing = false;});},resetGame:()=>{set(draft =>{draft.score = 0;draft.timeLeft = 60;draft.isPlaying = false;draft.gameOver = false;draft.combo = 0;draft.lives = GAME_CONFIG.MAX_LIVES;draft.balloons = [];draft.slicePath = [];draft.isSlicing = false;});},popBalloon:balloonId =>{const{balloons,isPlaying}= get();if(!isPlaying)return;let balloonIndex = -1;for(let i = 0;i < balloons.length;i++){if(balloons[i].id === balloonId){balloonIndex = i;break;}}if(balloonIndex === -1 || balloons[balloonIndex].isPopped)return;const points = 10;set(draft =>{draft.score = draft.score + points;if(draft.balloons[balloonIndex]){draft.balloons[balloonIndex].isPopped = true;draft.balloons[balloonIndex].popTime = Date.now();}});},updateScore:points =>{set(draft =>{draft.score = draft.score + points;});},decrementTime:()=>{set(draft =>{const newTimeLeft = draft.timeLeft - 1;if(newTimeLeft <= 0){draft.timeLeft = 0;draft.isPlaying = false;draft.gameOver = true;}else{draft.timeLeft = newTimeLeft;}});},addBalloon:balloon =>{set(draft =>{const{height}= require('react-native').Dimensions.get('window');const correctedBalloon ={...balloon,position:{x:balloon.position.x,y:height + 20}};draft.balloons.push(correctedBalloon);});},removeBalloon:balloonId =>{set(draft =>{draft.balloons = draft.balloons.filter(b => b.id !== balloonId);});},updateBalloon:(balloonId,updates)=>{set(draft =>{for(let i = 0;i < draft.balloons.length;i++){if(draft.balloons[i].id === balloonId){Object.assign(draft.balloons[i],updates);break;}}});},setParticles:particles =>{set(draft =>{draft.particles = particles;});},setSlicePath:path =>{set(draft =>{draft.slicePath = path;});},setIsSlicing:isSlicing =>{set(draft =>{draft.isSlicing = isSlicing;});},incrementCombo:()=>{set(draft =>{draft.combo = draft.combo + 1;});},resetCombo:()=>{set(draft =>{draft.combo = 0;});},loseLife:()=>{set(draft =>{const newLives = draft.lives - 1;if(newLives <= 0){draft.lives = 0;draft.isPlaying = false;draft.gameOver = true;}else{draft.lives = newLives;}});},addLife:()=>{set(draft =>{draft.lives = Math.min(draft.lives + 1,GAME_CONFIG.MAX_LIVES);});}}))));

package/lib/module/games/balloon-blaster/components/BalloonComponent.js

@@ -1,237 +1 @@
-"use strict";
-
-import React, { useEffect, useMemo, useCallback } from 'react';
-import { TouchableOpacity, Dimensions } from 'react-native';
-import { Canvas, vec, Path, Skia, Oval, Circle } from '@shopify/react-native-skia';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated';
-import { GAME_CONFIG, ANIMATION_CONFIG } from "../BalloonBlasterService.js";
-
-// Constants for better maintainability
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const BALLOON_HEIGHT_MULTIPLIER = 1.2;
-const STRING_LENGTH = 25;
-const HIGHLIGHT_OPACITY = 0.5;
-const BALLOON_OPACITY = 0.8;
-const DANGER_CIRCLE_RADIUS = 8;
-const GLOW_RADIUS_MULTIPLIER = 0.6;
-const GLOW_OPACITY = 0.3;
-
-// Types for better type safety
-
-export const BalloonComponent = /*#__PURE__*/React.memo(({
-  balloon,
-  onPop
-}) => {
-  // Get screen dimensions
-  const {
-    height
-  } = Dimensions.get('window');
-
-  // FORCE all balloons to start from bottom - override any wrong positions
-  const initialY = balloon.position.y > height ? balloon.position.y : height - 30;
-
-  // Animated values for smooth movement
-  const translateX = useSharedValue(balloon.position.x);
-  const translateY = useSharedValue(initialY); // Force bottom start
-  const rotation = useSharedValue(balloon.rotation);
-  const scale = useSharedValue(balloon.isPopped ? 0 : 1);
-  const opacity = useSharedValue(balloon.isPopped ? 0 : 1);
-
-  // Update animated values when balloon properties change
-  useEffect(() => {
-    translateX.value = withSpring(balloon.position.x, ANIMATION_CONFIG.BALLOON_SPRING);
-    translateY.value = withSpring(balloon.position.y, ANIMATION_CONFIG.BALLOON_SPRING);
-    rotation.value = withSpring(balloon.rotation, ANIMATION_CONFIG.BALLOON_SPRING);
-  }, [balloon.position.x, balloon.position.y, balloon.rotation]);
-
-  // Handle popped state with animation
-  useEffect(() => {
-    if (balloon.isPopped) {
-      scale.value = withTiming(0, ANIMATION_CONFIG.SLICE_TIMING);
-      opacity.value = withTiming(0, ANIMATION_CONFIG.SLICE_TIMING);
-    } else {
-      scale.value = withSpring(1, ANIMATION_CONFIG.BALLOON_SPRING);
-      opacity.value = withSpring(1, ANIMATION_CONFIG.BALLOON_SPRING);
-    }
-  }, [balloon.isPopped]);
-
-  // Animated style
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateX: translateX.value
-      }, {
-        translateY: translateY.value
-      }, {
-        rotate: `${rotation.value}rad`
-      }, {
-        scale: scale.value
-      }],
-      opacity: opacity.value
-    };
-  });
-  const containerStyle = {
-    position: 'absolute',
-    width: GAME_CONFIG.BALLOON_SIZE,
-    height: GAME_CONFIG.BALLOON_SIZE,
-    zIndex: balloon.isBomb ? 10 : 5
-  };
-
-  // Optimized color manipulation functions
-  const lightenColor = useCallback((color, amount) => {
-    const hex = color.replace('#', '');
-    const r = Math.min(255, parseInt(hex.substring(0, 2), 16) + Math.round(255 * amount));
-    const g = Math.min(255, parseInt(hex.substring(2, 4), 16) + Math.round(255 * amount));
-    const b = Math.min(255, parseInt(hex.substring(4, 6), 16) + Math.round(255 * amount));
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-  }, []);
-  const darkenColor = useCallback((color, amount) => {
-    const hex = color.replace('#', '');
-    const r = Math.max(0, parseInt(hex.substring(0, 2), 16) - Math.round(255 * amount));
-    const g = Math.max(0, parseInt(hex.substring(2, 4), 16) - Math.round(255 * amount));
-    const b = Math.max(0, parseInt(hex.substring(4, 6), 16) - Math.round(255 * amount));
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-  }, []);
-
-  // Optimized balloon color calculation with proper memoization
-  const colors = useMemo(() => {
-    if (balloon.isBomb) {
-      return {
-        primary: '#1a1a1a',
-        secondary: '#333333',
-        highlight: '#555555',
-        shadow: '#000000'
-      };
-    }
-    if (balloon.isBonus) {
-      return {
-        primary: '#FFD700',
-        secondary: '#FFEB3B',
-        highlight: '#FFF59D',
-        shadow: '#CC8800'
-      };
-    }
-
-    // Regular balloon colors with optimized calculation
-    const baseColor = balloon.type.color || '#FF0080';
-    return {
-      primary: baseColor,
-      secondary: lightenColor(baseColor, 0.3),
-      highlight: lightenColor(baseColor, 0.5),
-      shadow: darkenColor(baseColor, 0.3)
-    };
-  }, [balloon.isBomb, balloon.isBonus, balloon.type.color, lightenColor, darkenColor]);
-
-  // Memoized dimensions for better performance
-  const dimensions = useMemo(() => {
-    const balloonWidth = GAME_CONFIG.BALLOON_SIZE;
-    const balloonHeight = GAME_CONFIG.BALLOON_SIZE * BALLOON_HEIGHT_MULTIPLIER;
-    const totalHeight = balloonHeight + STRING_LENGTH;
-    const center = vec(balloonWidth / 2, balloonHeight / 2);
-    return {
-      balloonWidth,
-      balloonHeight,
-      totalHeight,
-      center
-    };
-  }, []);
-
-  // Optimized curved string path generation with better memoization
-  const curvedStringPath = useMemo(() => {
-    const path = Skia.Path.Make();
-    const startX = dimensions.center.x;
-    const startY = dimensions.balloonHeight - 2;
-
-    // Optimized seed generation for consistent random curves
-    const seed = balloon.id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-    const random = index => (seed + index * 17) % 100 / 100;
-    path.moveTo(startX, startY);
-
-    // Optimized string generation with minimal segments
-    const segments = 2;
-    const segmentHeight = STRING_LENGTH / segments;
-    for (let i = 1; i <= segments; i++) {
-      const y = startY + segmentHeight * i;
-      const waveAmplitude = 2 + random(i) * 2;
-      const waveOffset = (random(i + 10) - 0.5) * waveAmplitude;
-      const x = startX + waveOffset;
-      const controlX1 = startX + (random(i + 20) - 0.5) * waveAmplitude * 0.5;
-      const controlY1 = y - segmentHeight * 0.5;
-      path.quadTo(controlX1, controlY1, x, y);
-    }
-    return path;
-  }, [balloon.id, dimensions.center.x, dimensions.balloonHeight]);
-
-  // Memoized tap handler for better performance
-  const handleTap = useCallback(() => {
-    onPop?.(balloon.id);
-  }, [onPop, balloon.id]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [containerStyle, animatedStyle],
-    children: /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: handleTap,
-      activeOpacity: 0.8,
-      style: {
-        width: dimensions.balloonWidth,
-        height: dimensions.totalHeight
-      },
-      children: /*#__PURE__*/_jsxs(Canvas, {
-        style: {
-          width: dimensions.balloonWidth,
-          height: dimensions.totalHeight
-        },
-        pointerEvents: "none",
-        children: [/*#__PURE__*/_jsx(Oval, {
-          x: 0,
-          y: 0,
-          width: dimensions.balloonWidth,
-          height: dimensions.balloonHeight,
-          color: colors.primary,
-          opacity: BALLOON_OPACITY
-        }), /*#__PURE__*/_jsx(Oval, {
-          x: dimensions.balloonWidth * 0.2,
-          y: dimensions.balloonHeight * 0.15,
-          width: dimensions.balloonWidth * 0.3,
-          height: dimensions.balloonHeight * 0.2,
-          color: colors.highlight,
-          opacity: HIGHLIGHT_OPACITY
-        }), balloon.isBomb && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: dimensions.center.x,
-            cy: dimensions.center.y,
-            r: DANGER_CIRCLE_RADIUS,
-            color: "#FF0000",
-            opacity: 0.9
-          }), /*#__PURE__*/_jsx(Path, {
-            path: Skia.Path.Make().moveTo(dimensions.center.x, dimensions.center.y - 4).lineTo(dimensions.center.x, dimensions.center.y + 1),
-            color: "#FFFFFF",
-            style: "stroke",
-            strokeWidth: 2,
-            strokeCap: "round"
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: dimensions.center.x,
-            cy: dimensions.center.y + 3,
-            r: 1,
-            color: "#FFFFFF"
-          })]
-        }), !balloon.isBonus && /*#__PURE__*/_jsx(Path, {
-          path: curvedStringPath,
-          color: "#8B4513",
-          style: "stroke",
-          strokeWidth: 1.5,
-          strokeCap: "round"
-        }), balloon.isBonus && /*#__PURE__*/_jsx(Circle, {
-          cx: dimensions.center.x,
-          cy: dimensions.center.y,
-          r: dimensions.balloonWidth * GLOW_RADIUS_MULTIPLIER,
-          color: "#FFD700",
-          opacity: GLOW_OPACITY
-        })]
-      })
-    })
-  });
-}, (prevProps, nextProps) => {
-  // Custom comparison for React.memo - only re-render if essential props change
-  return prevProps.balloon.id === nextProps.balloon.id && prevProps.balloon.position.x === nextProps.balloon.position.x && prevProps.balloon.position.y === nextProps.balloon.position.y && prevProps.balloon.rotation === nextProps.balloon.rotation && prevProps.balloon.isPopped === nextProps.balloon.isPopped && prevProps.balloon.isBomb === nextProps.balloon.isBomb && prevProps.balloon.isBonus === nextProps.balloon.isBonus;
-});
-//# sourceMappingURL=BalloonComponent.js.map
+"use strict";import React,{useEffect,useMemo,useCallback}from 'react';import{TouchableOpacity,Dimensions}from 'react-native';import{Canvas,vec,Path,Skia,Oval,Circle}from '@shopify/react-native-skia';import Animated,{useSharedValue,useAnimatedStyle,withSpring,withTiming}from 'react-native-reanimated';import{GAME_CONFIG,ANIMATION_CONFIG}from "../BalloonBlasterService.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from "react/jsx-runtime";const BALLOON_HEIGHT_MULTIPLIER = 1.2;const STRING_LENGTH = 25;const HIGHLIGHT_OPACITY = 0.5;const BALLOON_OPACITY = 0.8;const DANGER_CIRCLE_RADIUS = 8;const GLOW_RADIUS_MULTIPLIER = 0.6;const GLOW_OPACITY = 0.3;export const BalloonComponent = React.memo(({balloon,onPop})=>{const{height}= Dimensions.get('window');const initialY = balloon.position.y > height ? balloon.position.y:height - 30;const translateX = useSharedValue(balloon.position.x);const translateY = useSharedValue(initialY);const rotation = useSharedValue(balloon.rotation);const scale = useSharedValue(balloon.isPopped ? 0:1);const opacity = useSharedValue(balloon.isPopped ? 0:1);useEffect(()=>{translateX.value = withSpring(balloon.position.x,ANIMATION_CONFIG.BALLOON_SPRING);translateY.value = withSpring(balloon.position.y,ANIMATION_CONFIG.BALLOON_SPRING);rotation.value = withSpring(balloon.rotation,ANIMATION_CONFIG.BALLOON_SPRING);},[balloon.position.x,balloon.position.y,balloon.rotation]);useEffect(()=>{if(balloon.isPopped){scale.value = withTiming(0,ANIMATION_CONFIG.SLICE_TIMING);opacity.value = withTiming(0,ANIMATION_CONFIG.SLICE_TIMING);}else{scale.value = withSpring(1,ANIMATION_CONFIG.BALLOON_SPRING);opacity.value = withSpring(1,ANIMATION_CONFIG.BALLOON_SPRING);}},[balloon.isPopped]);const animatedStyle = useAnimatedStyle(()=>{return{transform:[{translateX:translateX.value},{translateY:translateY.value},{rotate:`${rotation.value}rad`},{scale:scale.value}],opacity:opacity.value};});const containerStyle ={position:'absolute',width:GAME_CONFIG.BALLOON_SIZE,height:GAME_CONFIG.BALLOON_SIZE,zIndex:balloon.isBomb ? 10:5};const lightenColor = useCallback((color,amount)=>{const hex = color.replace('#','');const r = Math.min(255,parseInt(hex.substring(0,2),16)+ Math.round(255 * amount));const g = Math.min(255,parseInt(hex.substring(2,4),16)+ Math.round(255 * amount));const b = Math.min(255,parseInt(hex.substring(4,6),16)+ Math.round(255 * amount));return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;},[]);const darkenColor = useCallback((color,amount)=>{const hex = color.replace('#','');const r = Math.max(0,parseInt(hex.substring(0,2),16)- Math.round(255 * amount));const g = Math.max(0,parseInt(hex.substring(2,4),16)- Math.round(255 * amount));const b = Math.max(0,parseInt(hex.substring(4,6),16)- Math.round(255 * amount));return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;},[]);const colors = useMemo(()=>{if(balloon.isBomb){return{primary:'#1a1a1a',secondary:'#333333',highlight:'#555555',shadow:'#000000'};}if(balloon.isBonus){return{primary:'#FFD700',secondary:'#FFEB3B',highlight:'#FFF59D',shadow:'#CC8800'};}const baseColor = balloon.type.color || '#FF0080';return{primary:baseColor,secondary:lightenColor(baseColor,0.3),highlight:lightenColor(baseColor,0.5),shadow:darkenColor(baseColor,0.3)};},[balloon.isBomb,balloon.isBonus,balloon.type.color,lightenColor,darkenColor]);const dimensions = useMemo(()=>{const balloonWidth = GAME_CONFIG.BALLOON_SIZE;const balloonHeight = GAME_CONFIG.BALLOON_SIZE * BALLOON_HEIGHT_MULTIPLIER;const totalHeight = balloonHeight + STRING_LENGTH;const center = vec(balloonWidth / 2,balloonHeight / 2);return{balloonWidth,balloonHeight,totalHeight,center};},[]);const curvedStringPath = useMemo(()=>{const path = Skia.Path.Make();const startX = dimensions.center.x;const startY = dimensions.balloonHeight - 2;const seed = balloon.id.split('').reduce((acc,char)=> acc + char.charCodeAt(0),0);const random = index =>(seed + index * 17)% 100 / 100;path.moveTo(startX,startY);const segments = 2;const segmentHeight = STRING_LENGTH / segments;for(let i = 1;i <= segments;i++){const y = startY + segmentHeight * i;const waveAmplitude = 2 + random(i)* 2;const waveOffset =(random(i + 10)- 0.5)* waveAmplitude;const x = startX + waveOffset;const controlX1 = startX +(random(i + 20)- 0.5)* waveAmplitude * 0.5;const controlY1 = y - segmentHeight * 0.5;path.quadTo(controlX1,controlY1,x,y);}return path;},[balloon.id,dimensions.center.x,dimensions.balloonHeight]);const handleTap = useCallback(()=>{onPop?.(balloon.id);},[onPop,balloon.id]);return _jsx(Animated.View,{style:[containerStyle,animatedStyle],children:_jsx(TouchableOpacity,{onPress:handleTap,activeOpacity:0.8,style:{width:dimensions.balloonWidth,height:dimensions.totalHeight},children:_jsxs(Canvas,{style:{width:dimensions.balloonWidth,height:dimensions.totalHeight},pointerEvents:"none",children:[_jsx(Oval,{x:0,y:0,width:dimensions.balloonWidth,height:dimensions.balloonHeight,color:colors.primary,opacity:BALLOON_OPACITY}),_jsx(Oval,{x:dimensions.balloonWidth * 0.2,y:dimensions.balloonHeight * 0.15,width:dimensions.balloonWidth * 0.3,height:dimensions.balloonHeight * 0.2,color:colors.highlight,opacity:HIGHLIGHT_OPACITY}),balloon.isBomb && _jsxs(_Fragment,{children:[_jsx(Circle,{cx:dimensions.center.x,cy:dimensions.center.y,r:DANGER_CIRCLE_RADIUS,color:"#FF0000",opacity:0.9}),_jsx(Path,{path:Skia.Path.Make().moveTo(dimensions.center.x,dimensions.center.y - 4).lineTo(dimensions.center.x,dimensions.center.y + 1),color:"#FFFFFF",style:"stroke",strokeWidth:2,strokeCap:"round"}),_jsx(Circle,{cx:dimensions.center.x,cy:dimensions.center.y + 3,r:1,color:"#FFFFFF"})]}),!balloon.isBonus && _jsx(Path,{path:curvedStringPath,color:"#8B4513",style:"stroke",strokeWidth:1.5,strokeCap:"round"}),balloon.isBonus && _jsx(Circle,{cx:dimensions.center.x,cy:dimensions.center.y,r:dimensions.balloonWidth * GLOW_RADIUS_MULTIPLIER,color:"#FFD700",opacity:GLOW_OPACITY})]})})});},(prevProps,nextProps)=>{return prevProps.balloon.id === nextProps.balloon.id && prevProps.balloon.position.x === nextProps.balloon.position.x && prevProps.balloon.position.y === nextProps.balloon.position.y && prevProps.balloon.rotation === nextProps.balloon.rotation && prevProps.balloon.isPopped === nextProps.balloon.isPopped && prevProps.balloon.isBomb === nextProps.balloon.isBomb && prevProps.balloon.isBonus === nextProps.balloon.isBonus;});

package/lib/module/games/balloon-blaster/components/GameArea.js

@@ -1,156 +1 @@
-"use strict";
-
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useBalloonBlasterStore } from "../BalloonBlasterStore.js";
-import { GAME_CONFIG } from "../BalloonBlasterService.js";
-import { playSound, GAME_SOUNDS } from "../../../services/SoundsService.js";
-import { playHaptic, HapticType } from "../../../services/HapticsService.js";
-import { ParticleBlast, useAnimationTracker } from "../../../helpers/index.js";
-import { BalloonComponent } from "./BalloonComponent.js";
-
-// Constants for better maintainability
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BALLOON_REMOVAL_DELAY = 500; // ms
-const PARTICLE_COUNT = 8;
-const PARTICLE_DURATION = 1000; // ms
-
-// Types for better type safety
-
-export const GameArea = /*#__PURE__*/React.memo(() => {
-  // Optimized store subscriptions - only subscribe to what we need
-  const balloons = useBalloonBlasterStore(state => state.balloons);
-  const isPlaying = useBalloonBlasterStore(state => state.isPlaying);
-  const gameOver = useBalloonBlasterStore(state => state.gameOver);
-
-  // Get store actions (these don't cause re-renders)
-  const {
-    popBalloon,
-    removeBalloon,
-    updateBalloon,
-    resetCombo,
-    loseLife,
-    addLife
-  } = useBalloonBlasterStore();
-
-  // Animation tracking for balloons using shared utility
-  const balloonAnimations = useAnimationTracker();
-
-  // State for managing active particle blasts with proper typing
-  const [activeBlasts, setActiveBlasts] = useState([]);
-
-  // Memoized sound and haptic feedback functions (using default enabled state)
-  const playPopSound = useCallback(() => {
-    playSound(GAME_SOUNDS.BALLOON_BLASTER.POP, true);
-    playHaptic(HapticType.LIGHT, true);
-  }, []);
-  const playBombSound = useCallback(() => {
-    playSound(GAME_SOUNDS.BALLOON_BLASTER.BOMB, true);
-    playHaptic(HapticType.HEAVY, true);
-  }, []);
-
-  // Optimized blast particle creation
-  const createBlastParticles = useCallback(balloon => {
-    const blastX = balloon.position.x + GAME_CONFIG.BALLOON_SIZE / 2;
-    const blastY = balloon.position.y + GAME_CONFIG.BALLOON_SIZE / 2;
-    const blastId = `blast_${Date.now()}_${Math.random()}`;
-    setActiveBlasts(prev => [...prev, {
-      id: blastId,
-      x: blastX,
-      y: blastY
-    }]);
-  }, []);
-
-  // Optimized blast completion handler
-  const handleBlastComplete = useCallback(blastId => {
-    setActiveBlasts(prev => prev.filter(blast => blast.id !== blastId));
-  }, []);
-
-  // Optimized balloon popping logic with better error handling
-  const handleBalloonPop = useCallback(balloonId => {
-    // Early exit if game is not active
-    if (!isPlaying || gameOver) return;
-
-    // Get current balloon state
-    const currentBalloons = useBalloonBlasterStore.getState().balloons;
-    const balloon = currentBalloons.find(b => b.id === balloonId);
-
-    // Validate balloon exists and is not already popped
-    if (!balloon || balloon.isPopped) return;
-
-    // Handle different balloon types with optimized logic
-    if (balloon.isBomb) {
-      // Bomb balloon - lose life and reset combo
-      playBombSound();
-      loseLife();
-      resetCombo();
-      updateBalloon(balloonId, {
-        isPopped: true
-      });
-    } else if (balloon.isBonus) {
-      // Bonus balloon - add life
-      playPopSound();
-      addLife();
-      updateBalloon(balloonId, {
-        isPopped: true
-      });
-    } else {
-      // Regular balloon - add points (popBalloon handles marking as popped)
-      playPopSound();
-      popBalloon(balloonId);
-    }
-
-    // Create visual blast effect
-    createBlastParticles(balloon);
-
-    // Schedule balloon removal after animation completes
-    setTimeout(() => {
-      removeBalloon(balloonId);
-      balloonAnimations.delete(balloonId);
-    }, BALLOON_REMOVAL_DELAY);
-  }, [isPlaying, gameOver, playBombSound, playPopSound, loseLife, resetCombo, addLife, popBalloon, updateBalloon, createBlastParticles, removeBalloon, balloonAnimations]);
-
-  // Optimized balloon animation tracking
-  useEffect(() => {
-    balloons.forEach(balloon => {
-      if (!balloonAnimations.has(balloon.id)) {
-        balloonAnimations.initialize(balloon.id);
-      }
-    });
-  }, [balloons, balloonAnimations]);
-
-  // Memoized balloon components for better performance
-  const balloonComponents = useMemo(() => {
-    return balloons.map(balloon => {
-      const animation = balloonAnimations.get(balloon.id);
-      return /*#__PURE__*/_jsx(BalloonComponent, {
-        balloon: balloon,
-        animation: animation,
-        onPop: handleBalloonPop
-      }, balloon.id);
-    });
-  }, [balloons, balloonAnimations, handleBalloonPop]);
-
-  // Memoized particle blast components
-  const blastComponents = useMemo(() => {
-    return activeBlasts.map(blast => /*#__PURE__*/_jsx(ParticleBlast, {
-      x: blast.x,
-      y: blast.y,
-      particleCount: PARTICLE_COUNT,
-      duration: PARTICLE_DURATION,
-      onComplete: () => handleBlastComplete(blast.id)
-    }, blast.id));
-  }, [activeBlasts, handleBlastComplete]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.gameArea,
-    children: [balloonComponents, blastComponents]
-  });
-});
-const styles = StyleSheet.create({
-  gameArea: {
-    flex: 1,
-    position: 'relative',
-    overflow: 'hidden'
-  }
-});
-//# sourceMappingURL=GameArea.js.map
+"use strict";import React,{useEffect,useState,useCallback,useMemo}from 'react';import{View,StyleSheet}from 'react-native';import{useBalloonBlasterStore}from "../BalloonBlasterStore.js";import{GAME_CONFIG}from "../BalloonBlasterService.js";import{playSound,GAME_SOUNDS}from "../../../services/SoundsService.js";import{playHaptic,HapticType}from "../../../services/HapticsService.js";import{ParticleBlast,useAnimationTracker}from "../../../helpers/index.js";import{BalloonComponent}from "./BalloonComponent.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const BALLOON_REMOVAL_DELAY = 500;const PARTICLE_COUNT = 8;const PARTICLE_DURATION = 1000;export const GameArea = React.memo(()=>{const balloons = useBalloonBlasterStore(state => state.balloons);const isPlaying = useBalloonBlasterStore(state => state.isPlaying);const gameOver = useBalloonBlasterStore(state => state.gameOver);const{popBalloon,removeBalloon,updateBalloon,resetCombo,loseLife,addLife}= useBalloonBlasterStore();const balloonAnimations = useAnimationTracker();const [activeBlasts,setActiveBlasts] = useState([]);const playPopSound = useCallback(()=>{playSound(GAME_SOUNDS.BALLOON_BLASTER.POP,true);playHaptic(HapticType.LIGHT,true);},[]);const playBombSound = useCallback(()=>{playSound(GAME_SOUNDS.BALLOON_BLASTER.BOMB,true);playHaptic(HapticType.HEAVY,true);},[]);const createBlastParticles = useCallback(balloon =>{const blastX = balloon.position.x + GAME_CONFIG.BALLOON_SIZE / 2;const blastY = balloon.position.y + GAME_CONFIG.BALLOON_SIZE / 2;const blastId = `blast_${Date.now()}_${Math.random()}`;setActiveBlasts(prev => [...prev,{id:blastId,x:blastX,y:blastY}]);},[]);const handleBlastComplete = useCallback(blastId =>{setActiveBlasts(prev => prev.filter(blast => blast.id !== blastId));},[]);const handleBalloonPop = useCallback(balloonId =>{if(!isPlaying || gameOver)return;const currentBalloons = useBalloonBlasterStore.getState().balloons;const balloon = currentBalloons.find(b => b.id === balloonId);if(!balloon || balloon.isPopped)return;if(balloon.isBomb){playBombSound();loseLife();resetCombo();updateBalloon(balloonId,{isPopped:true});}else if(balloon.isBonus){playPopSound();addLife();updateBalloon(balloonId,{isPopped:true});}else{playPopSound();popBalloon(balloonId);}createBlastParticles(balloon);setTimeout(()=>{removeBalloon(balloonId);balloonAnimations.delete(balloonId);},BALLOON_REMOVAL_DELAY);},[isPlaying,gameOver,playBombSound,playPopSound,loseLife,resetCombo,addLife,popBalloon,updateBalloon,createBlastParticles,removeBalloon,balloonAnimations]);useEffect(()=>{balloons.forEach(balloon =>{if(!balloonAnimations.has(balloon.id)){balloonAnimations.initialize(balloon.id);}});},[balloons,balloonAnimations]);const balloonComponents = useMemo(()=>{return balloons.map(balloon =>{const animation = balloonAnimations.get(balloon.id);return _jsx(BalloonComponent,{balloon:balloon,animation:animation,onPop:handleBalloonPop},balloon.id);});},[balloons,balloonAnimations,handleBalloonPop]);const blastComponents = useMemo(()=>{return activeBlasts.map(blast => _jsx(ParticleBlast,{x:blast.x,y:blast.y,particleCount:PARTICLE_COUNT,duration:PARTICLE_DURATION,onComplete:()=> handleBlastComplete(blast.id)},blast.id));},[activeBlasts,handleBlastComplete]);return _jsxs(View,{style:styles.gameArea,children:[balloonComponents,blastComponents]});});const styles = StyleSheet.create({gameArea:{flex:1,position:'relative',overflow:'hidden'}});