react-native-games/lib/module/games/balloon-blaster/BalloonBlaster.js

Free games for your react native projects.

"use strict";import React,{useEffect,useMemo,useCallback}from 'react';import{View,StyleSheet}from 'react-native';import{GestureHandlerRootView}from 'react-native-gesture-handler';import{useBalloonBlasterStore}from "./BalloonBlasterStore.js";import{createBalloonBlasterService}from "./BalloonBlasterService.js";import{ScoreBoard,GameArea,GameBackground}from "./components/index.js";import{GameControlButton,GameOverModal,useAnimationTrackers,useGameErrorHandler,GameErrorType}from "../../helpers/index.js";import{GameSettingsModal}from "../../helpers/index.js";import{GAME_IDS,DEFAULT_GAME_SETTINGS}from "../../services/UtilsService.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const BalloonBlaster = React.memo(({settings,onSettingsChange})=>{const isPlaying = useBalloonBlasterStore(state => state.isPlaying);const gameOver = useBalloonBlasterStore(state => state.gameOver);const score = useBalloonBlasterStore(state => state.score);const startGame = useBalloonBlasterStore(state => state.startGame);const stopGame = useBalloonBlasterStore(state => state.stopGame);const resetGame = useBalloonBlasterStore(state => state.resetGame);const decrementTime = useBalloonBlasterStore(state => state.decrementTime);const addBalloon = useBalloonBlasterStore(state => state.addBalloon);const removeBalloon = useBalloonBlasterStore(state => state.removeBalloon);const updateBalloon = useBalloonBlasterStore(state => state.updateBalloon);const{balloonAnimations,particleAnimations}= useAnimationTrackers(['balloonAnimations','particleAnimations']);const{wrapFunction,safeExecute}= useGameErrorHandler(GAME_IDS.BALLOON_BLASTER);const spawnBalloon = useCallback(balloon =>{addBalloon(balloon);},[addBalloon]);const handleResetGame = useCallback(wrapFunction(()=>{resetGame();},GameErrorType.UNKNOWN_ERROR),[wrapFunction,resetGame]);const gameService = useMemo(()=>{return safeExecute(()=> createBalloonBlasterService(balloonAnimations,particleAnimations),createBalloonBlasterService(balloonAnimations,particleAnimations),GameErrorType.INITIALIZATION_ERROR);},[balloonAnimations,particleAnimations,safeExecute]);const handleStartGame = useCallback(wrapFunction(()=>{resetGame();const currentBalloons = useBalloonBlasterStore.getState().balloons;currentBalloons.forEach(balloon => removeBalloon(balloon.id));if(gameService){gameService.cleanup();gameService.resetAnimations();}setTimeout(()=>{startGame();if(gameService){gameService.startGameTimer(decrementTime);gameService.startBalloonSpawning(spawnBalloon,600);gameService.startPhysicsLoop(updateBalloon,removeBalloon,()=> useBalloonBlasterStore.getState().balloons);}},50);},GameErrorType.INITIALIZATION_ERROR),[wrapFunction,resetGame,removeBalloon,gameService,startGame,decrementTime,spawnBalloon,updateBalloon]);const handleStopGame = useCallback(wrapFunction(()=>{stopGame();if(gameService){gameService.cleanup();gameService.resetAnimations();}},GameErrorType.UNKNOWN_ERROR),[wrapFunction,stopGame,gameService]);useEffect(()=>{return()=>{handleResetGame();};},[handleResetGame]);useEffect(()=>{if(gameOver && gameService){gameService.cleanup();}},[gameOver,gameService]);const gameControlButtonProps = useMemo(()=>({isPlaying,gameOver,onStartGame:handleStartGame,onStopGame:handleStopGame,startButtonText:"START POPPING",stopButtonText:"STOP GAME",startButtonSubtext:"Pop balloons to score!",stopButtonSubtext:"End current game",startButtonColor:"#3b82f6",stopButtonColor:"#dc2626",startButtonBorderColor:"#60a5fa",stopButtonBorderColor:"#f87171"}),[isPlaying,gameOver,handleStartGame,handleStopGame]);const gameOverModalProps = useMemo(()=>({isVisible:gameOver,score,onPlayAgain:handleResetGame,buttonText:"Pop Again!",primaryColor:"rgba(59,130,246,0.5)",borderColor:"rgba(59,130,246,0.5)",buttonColor:"#ffffff",buttonBorderColor:"#ffffff",buttonTextColor:"#3b82f6"}),[gameOver,score,handleResetGame]);const gameSettingsModalProps = useMemo(()=>({gameId:GAME_IDS.BALLOON_BLASTER,settings:settings || DEFAULT_GAME_SETTINGS,onSettingsChange}),[settings,onSettingsChange]);const offset = settings?.offset ?? 0;return _jsx(View,{style:styles.container,children:_jsx(GestureHandlerRootView,{children:_jsxs(GameBackground,{offset:offset,children:[_jsx(GameArea,{}),_jsx(ScoreBoard,{offset:offset}),_jsx(GameControlButton,{...gameControlButtonProps}),_jsx(GameOverModal,{...gameOverModalProps}),_jsx(GameSettingsModal,{...gameSettingsModalProps})]})})});});const styles = StyleSheet.create({container:{flex:1}});