react-native-games 1.1.0 → 1.2.0

package/lib/module/games/space-fighter/components/GameArea.js

@@ -1,289 +1 @@
-"use strict";
-
-import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
-import { View, Text, StyleSheet, Dimensions } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { useSpaceFighterStore } from "../SpaceFighterStore.js";
-import { createSpaceFighterService } from "../SpaceFighterService.js";
-import { playSound, GAME_SOUNDS } from "../../../services/SoundsService.js";
-import { playHaptic, HapticType } from "../../../services/HapticsService.js";
-import { ParticleBlast } from "../../../helpers/index.js";
-import { AsteroidComponent } from "./AsteroidComponent.js";
-import { Spacecraft3D } from "./Spacecraft3D.js";
-import { SpacecraftPath } from "./SpacecraftPath.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-
-// Self-contained GameArea component following FruitNinja pattern with performance optimizations
-export const GameArea = /*#__PURE__*/React.memo(() => {
-  // Optimized store subscriptions - read only what's needed for rendering
-  const asteroids = useSpaceFighterStore(state => state.asteroids);
-  const spacecraft = useSpaceFighterStore(state => state.spacecraft);
-  const spacecraftPath = useSpaceFighterStore(state => state.spacecraftPath);
-  const isControllingSpacecraft = useSpaceFighterStore(state => state.isControllingSpacecraft);
-  const isPlaying = useSpaceFighterStore(state => state.isPlaying);
-
-  // Get store actions independently (these don't cause re-renders)
-  const updateSpacecraft = useSpaceFighterStore(state => state.updateSpacecraft);
-  const setSpacecraftPath = useSpaceFighterStore(state => state.setSpacecraftPath);
-  const setIsControllingSpacecraft = useSpaceFighterStore(state => state.setIsControllingSpacecraft);
-  const markAsteroidPassed = useSpaceFighterStore(state => state.markAsteroidPassed);
-  const loseLife = useSpaceFighterStore(state => state.loseLife);
-
-  // Self-contained component - no external settings needed
-
-  // Game service ref
-  const gameService = useRef(createSpaceFighterService(width, height)).current;
-
-  // Spacecraft control refs
-  const currentSpacecraftPath = useRef([]);
-  const initialSpacecraftPosition = useRef(null);
-  const initialTouchPosition = useRef(null);
-  const pendingSpacecraftUpdate = useRef(null);
-  const animationFrameId = useRef(null);
-  const lastCollisionTime = useRef(0);
-
-  // State for managing active particle blasts
-  const [activeBlasts, setActiveBlasts] = useState([]);
-
-  // Memoized particle blast colors for performance
-  const particleColors = useMemo(() => ['#ff6b6b', '#ff8e53', '#ff6b35'], []);
-
-  // Sound and haptic feedback functions (using default enabled state)
-  const playSuccessSound = useCallback(() => {
-    playSound(GAME_SOUNDS.SPACE_FIGHTER.SUCCESS, true);
-    playHaptic(HapticType.LIGHT, true);
-  }, []);
-  const playCollisionSound = useCallback(() => {
-    playSound(GAME_SOUNDS.SPACE_FIGHTER.COLLISION, true);
-    playHaptic(HapticType.HEAVY, true);
-  }, []);
-
-  // Spacecraft control functions
-  const handleSpacecraftControlStart = useCallback((x, y) => {
-    const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;
-    const controlledSpacecraft = gameService.controlSpacecraft({
-      ...currentSpacecraft
-    }, x, y);
-    updateSpacecraft(controlledSpacecraft);
-    setIsControllingSpacecraft(true);
-    currentSpacecraftPath.current = [{
-      x,
-      y
-    }];
-    setSpacecraftPath([{
-      x,
-      y
-    }]);
-  }, [gameService, updateSpacecraft, setIsControllingSpacecraft, setSpacecraftPath]);
-  const processPendingSpacecraftUpdate = useCallback(() => {
-    if (pendingSpacecraftUpdate.current) {
-      const {
-        x,
-        y
-      } = pendingSpacecraftUpdate.current;
-      const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;
-      const controlledSpacecraft = gameService.controlSpacecraft({
-        ...currentSpacecraft
-      }, x, y);
-      updateSpacecraft(controlledSpacecraft);
-
-      // Throttle path updates to reduce re-renders
-      currentSpacecraftPath.current.push({
-        x,
-        y
-      });
-      if (currentSpacecraftPath.current.length > 8) {
-        currentSpacecraftPath.current.shift();
-      }
-
-      // Only update path every 3rd update to reduce re-renders
-      if (currentSpacecraftPath.current.length % 3 === 0) {
-        setSpacecraftPath([...currentSpacecraftPath.current]);
-      }
-      pendingSpacecraftUpdate.current = null;
-    }
-    animationFrameId.current = null;
-  }, [gameService, updateSpacecraft, setSpacecraftPath]);
-  const handleSpacecraftControlMove = useCallback((x, y) => {
-    pendingSpacecraftUpdate.current = {
-      x,
-      y
-    };
-    if (animationFrameId.current === null) {
-      animationFrameId.current = requestAnimationFrame(processPendingSpacecraftUpdate);
-    }
-  }, [processPendingSpacecraftUpdate]);
-  const handleSpacecraftControlEnd = useCallback(() => {
-    if (animationFrameId.current !== null) {
-      cancelAnimationFrame(animationFrameId.current);
-      animationFrameId.current = null;
-    }
-    if (pendingSpacecraftUpdate.current) {
-      processPendingSpacecraftUpdate();
-    }
-    const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;
-    const releasedSpacecraft = gameService.releaseSpacecraft({
-      ...currentSpacecraft
-    });
-    updateSpacecraft(releasedSpacecraft);
-    setIsControllingSpacecraft(false);
-    setTimeout(() => {
-      currentSpacecraftPath.current = [];
-      setSpacecraftPath([]);
-    }, 300);
-  }, [gameService, updateSpacecraft, setIsControllingSpacecraft, setSpacecraftPath, processPendingSpacecraftUpdate]);
-
-  // Optimized collision detection with reduced store access
-  useEffect(() => {
-    if (!isPlaying) return;
-    const interval = setInterval(() => {
-      // Single store access for better performance
-      const state = useSpaceFighterStore.getState();
-      const currentSpacecraft = state.spacecraft;
-      const currentAsteroids = state.asteroids;
-
-      // Skip if no asteroids to check
-      if (currentAsteroids.length === 0) return;
-      const collision = gameService.checkCollision(currentSpacecraft, currentAsteroids);
-      const now = Date.now();
-      if (collision.collision && now - lastCollisionTime.current > 1000) {
-        lastCollisionTime.current = now;
-        playCollisionSound();
-
-        // Create particle blast at collision point
-        const blastId = `blast-${now}`;
-        setActiveBlasts(prev => [...prev, {
-          id: blastId,
-          x: currentSpacecraft.x,
-          y: currentSpacecraft.y
-        }]);
-
-        // Remove blast after animation
-        setTimeout(() => {
-          setActiveBlasts(prev => prev.filter(blast => blast.id !== blastId));
-        }, 800);
-        loseLife(); // This now handles spacecraft position reset internally
-        return;
-      }
-
-      // Check asteroid passes for scoring
-      const passedAsteroids = gameService.checkAsteroidPass(currentSpacecraft, currentAsteroids);
-      if (passedAsteroids.length > 0) {
-        passedAsteroids.forEach(pairId => {
-          markAsteroidPassed(pairId);
-          playSuccessSound();
-        });
-      }
-    }, 100); // Slightly increased interval for better performance (was 80ms)
-
-    return () => clearInterval(interval);
-  }, [isPlaying, gameService, playCollisionSound, loseLife, updateSpacecraft, markAsteroidPassed, playSuccessSound]);
-
-  // Memoized gesture handling for better performance
-  const panGesture = useMemo(() => Gesture.Pan().onStart(event => {
-    const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;
-    initialSpacecraftPosition.current = {
-      x: currentSpacecraft.x,
-      y: currentSpacecraft.y
-    };
-    initialTouchPosition.current = {
-      x: event.absoluteX,
-      y: event.absoluteY
-    };
-    handleSpacecraftControlStart(currentSpacecraft.x, currentSpacecraft.y);
-  }).onUpdate(event => {
-    if (!initialSpacecraftPosition.current || !initialTouchPosition.current) {
-      return;
-    }
-    const dx = event.absoluteX - initialTouchPosition.current.x;
-    const newX = initialSpacecraftPosition.current.x + dx;
-    const newY = initialSpacecraftPosition.current.y;
-    handleSpacecraftControlMove(newX, newY);
-  }).onEnd(() => {
-    initialTouchPosition.current = null;
-    handleSpacecraftControlEnd();
-  }).onFinalize(() => {
-    initialTouchPosition.current = null;
-    handleSpacecraftControlEnd();
-  }).runOnJS(true), [handleSpacecraftControlStart, handleSpacecraftControlMove, handleSpacecraftControlEnd]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.gameArea],
-    children: [/*#__PURE__*/_jsx(SpacecraftPath, {
-      path: spacecraftPath
-    }), asteroids.map(asteroid => /*#__PURE__*/_jsx(AsteroidComponent, {
-      asteroid: asteroid
-    }, asteroid.id)), activeBlasts.map(blast => /*#__PURE__*/_jsx(ParticleBlast, {
-      x: blast.x,
-      y: blast.y,
-      colors: particleColors,
-      particleCount: 12,
-      duration: 800
-    }, blast.id)), /*#__PURE__*/_jsx(Spacecraft3D, {
-      spacecraft: spacecraft,
-      isControlled: isControllingSpacecraft
-    }), /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: panGesture,
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.gestureOverlay
-      })
-    }), asteroids.length === 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.instructionsContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.instructionsEmoji,
-        children: "\uD83D\uDE80"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.instructionsTitle,
-        children: "Navigate your spacecraft through the space!"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.instructionsSubtitle,
-        children: "Touch and drag to control your spacecraft"
-      })]
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  gameArea: {
-    flex: 1,
-    position: 'relative'
-  },
-  gestureOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'transparent',
-    zIndex: 10
-  },
-  instructionsContainer: {
-    position: 'absolute',
-    top: '33%',
-    left: 0,
-    right: 0,
-    opacity: 0.6,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  instructionsEmoji: {
-    textAlign: 'center',
-    fontSize: 24,
-    marginBottom: 12
-  },
-  instructionsTitle: {
-    color: '#ffffff',
-    textAlign: 'center',
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 8
-  },
-  instructionsSubtitle: {
-    color: '#ffffff',
-    textAlign: 'center',
-    marginTop: 8
-  }
-});
-//# sourceMappingURL=GameArea.js.map
+"use strict";import React,{useRef,useEffect,useCallback,useState,useMemo}from 'react';import{View,Text,StyleSheet,Dimensions}from 'react-native';import{Gesture,GestureDetector}from 'react-native-gesture-handler';import{useSpaceFighterStore}from "../SpaceFighterStore.js";import{createSpaceFighterService}from "../SpaceFighterService.js";import{playSound,GAME_SOUNDS}from "../../../services/SoundsService.js";import{playHaptic,HapticType}from "../../../services/HapticsService.js";import{ParticleBlast}from "../../../helpers/index.js";import{AsteroidComponent}from "./AsteroidComponent.js";import{Spacecraft3D}from "./Spacecraft3D.js";import{SpacecraftPath}from "./SpacecraftPath.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');export const GameArea = React.memo(()=>{const asteroids = useSpaceFighterStore(state => state.asteroids);const spacecraft = useSpaceFighterStore(state => state.spacecraft);const spacecraftPath = useSpaceFighterStore(state => state.spacecraftPath);const isControllingSpacecraft = useSpaceFighterStore(state => state.isControllingSpacecraft);const isPlaying = useSpaceFighterStore(state => state.isPlaying);const updateSpacecraft = useSpaceFighterStore(state => state.updateSpacecraft);const setSpacecraftPath = useSpaceFighterStore(state => state.setSpacecraftPath);const setIsControllingSpacecraft = useSpaceFighterStore(state => state.setIsControllingSpacecraft);const markAsteroidPassed = useSpaceFighterStore(state => state.markAsteroidPassed);const loseLife = useSpaceFighterStore(state => state.loseLife);const gameService = useRef(createSpaceFighterService(width,height)).current;const currentSpacecraftPath = useRef([]);const initialSpacecraftPosition = useRef(null);const initialTouchPosition = useRef(null);const pendingSpacecraftUpdate = useRef(null);const animationFrameId = useRef(null);const lastCollisionTime = useRef(0);const [activeBlasts,setActiveBlasts] = useState([]);const particleColors = useMemo(()=> ['#ff6b6b','#ff8e53','#ff6b35'],[]);const playSuccessSound = useCallback(()=>{playSound(GAME_SOUNDS.SPACE_FIGHTER.SUCCESS,true);playHaptic(HapticType.LIGHT,true);},[]);const playCollisionSound = useCallback(()=>{playSound(GAME_SOUNDS.SPACE_FIGHTER.COLLISION,true);playHaptic(HapticType.HEAVY,true);},[]);const handleSpacecraftControlStart = useCallback((x,y)=>{const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;const controlledSpacecraft = gameService.controlSpacecraft({...currentSpacecraft},x,y);updateSpacecraft(controlledSpacecraft);setIsControllingSpacecraft(true);currentSpacecraftPath.current = [{x,y}];setSpacecraftPath([{x,y}]);},[gameService,updateSpacecraft,setIsControllingSpacecraft,setSpacecraftPath]);const processPendingSpacecraftUpdate = useCallback(()=>{if(pendingSpacecraftUpdate.current){const{x,y}= pendingSpacecraftUpdate.current;const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;const controlledSpacecraft = gameService.controlSpacecraft({...currentSpacecraft},x,y);updateSpacecraft(controlledSpacecraft);currentSpacecraftPath.current.push({x,y});if(currentSpacecraftPath.current.length > 8){currentSpacecraftPath.current.shift();}if(currentSpacecraftPath.current.length % 3 === 0){setSpacecraftPath([...currentSpacecraftPath.current]);}pendingSpacecraftUpdate.current = null;}animationFrameId.current = null;},[gameService,updateSpacecraft,setSpacecraftPath]);const handleSpacecraftControlMove = useCallback((x,y)=>{pendingSpacecraftUpdate.current ={x,y};if(animationFrameId.current === null){animationFrameId.current = requestAnimationFrame(processPendingSpacecraftUpdate);}},[processPendingSpacecraftUpdate]);const handleSpacecraftControlEnd = useCallback(()=>{if(animationFrameId.current !== null){cancelAnimationFrame(animationFrameId.current);animationFrameId.current = null;}if(pendingSpacecraftUpdate.current){processPendingSpacecraftUpdate();}const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;const releasedSpacecraft = gameService.releaseSpacecraft({...currentSpacecraft});updateSpacecraft(releasedSpacecraft);setIsControllingSpacecraft(false);setTimeout(()=>{currentSpacecraftPath.current = [];setSpacecraftPath([]);},300);},[gameService,updateSpacecraft,setIsControllingSpacecraft,setSpacecraftPath,processPendingSpacecraftUpdate]);useEffect(()=>{if(!isPlaying)return;const interval = setInterval(()=>{const state = useSpaceFighterStore.getState();const currentSpacecraft = state.spacecraft;const currentAsteroids = state.asteroids;if(currentAsteroids.length === 0)return;const collision = gameService.checkCollision(currentSpacecraft,currentAsteroids);const now = Date.now();if(collision.collision && now - lastCollisionTime.current > 1000){lastCollisionTime.current = now;playCollisionSound();const blastId = `blast-${now}`;setActiveBlasts(prev => [...prev,{id:blastId,x:currentSpacecraft.x,y:currentSpacecraft.y}]);setTimeout(()=>{setActiveBlasts(prev => prev.filter(blast => blast.id !== blastId));},800);loseLife();return;}const passedAsteroids = gameService.checkAsteroidPass(currentSpacecraft,currentAsteroids);if(passedAsteroids.length > 0){passedAsteroids.forEach(pairId =>{markAsteroidPassed(pairId);playSuccessSound();});}},100);return()=> clearInterval(interval);},[isPlaying,gameService,playCollisionSound,loseLife,updateSpacecraft,markAsteroidPassed,playSuccessSound]);const panGesture = useMemo(()=> Gesture.Pan().onStart(event =>{const currentSpacecraft = useSpaceFighterStore.getState().spacecraft;initialSpacecraftPosition.current ={x:currentSpacecraft.x,y:currentSpacecraft.y};initialTouchPosition.current ={x:event.absoluteX,y:event.absoluteY};handleSpacecraftControlStart(currentSpacecraft.x,currentSpacecraft.y);}).onUpdate(event =>{if(!initialSpacecraftPosition.current || !initialTouchPosition.current){return;}const dx = event.absoluteX - initialTouchPosition.current.x;const newX = initialSpacecraftPosition.current.x + dx;const newY = initialSpacecraftPosition.current.y;handleSpacecraftControlMove(newX,newY);}).onEnd(()=>{initialTouchPosition.current = null;handleSpacecraftControlEnd();}).onFinalize(()=>{initialTouchPosition.current = null;handleSpacecraftControlEnd();}).runOnJS(true),[handleSpacecraftControlStart,handleSpacecraftControlMove,handleSpacecraftControlEnd]);return _jsxs(View,{style:[styles.gameArea],children:[_jsx(SpacecraftPath,{path:spacecraftPath}),asteroids.map(asteroid => _jsx(AsteroidComponent,{asteroid:asteroid},asteroid.id)),activeBlasts.map(blast => _jsx(ParticleBlast,{x:blast.x,y:blast.y,colors:particleColors,particleCount:12,duration:800},blast.id)),_jsx(Spacecraft3D,{spacecraft:spacecraft,isControlled:isControllingSpacecraft}),_jsx(GestureDetector,{gesture:panGesture,children:_jsx(View,{style:styles.gestureOverlay})}),asteroids.length === 0 && _jsxs(View,{style:styles.instructionsContainer,children:[_jsx(Text,{style:styles.instructionsEmoji,children:"\uD83D\uDE80"}),_jsx(Text,{style:styles.instructionsTitle,children:"Navigate your spacecraft through the space!"}),_jsx(Text,{style:styles.instructionsSubtitle,children:"Touch and drag to control your spacecraft"})]})]});});const styles = StyleSheet.create({gameArea:{flex:1,position:'relative'},gestureOverlay:{position:'absolute',top:0,left:0,right:0,bottom:0,backgroundColor:'transparent',zIndex:10},instructionsContainer:{position:'absolute',top:'33%',left:0,right:0,opacity:0.6,alignItems:'center',justifyContent:'center'},instructionsEmoji:{textAlign:'center',fontSize:24,marginBottom:12},instructionsTitle:{color:'#ffffff',textAlign:'center',fontSize:18,fontWeight:'bold',marginBottom:8},instructionsSubtitle:{color:'#ffffff',textAlign:'center',marginTop:8}});

package/lib/module/games/space-fighter/components/GameBackground.js

@@ -1,239 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, Dimensions } from 'react-native';
-import { Canvas, LinearGradient, Rect, Circle, Group, Shadow, vec } 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
-}) => {
-  return /*#__PURE__*/_jsxs(View, {
-    style: {
-      flex: 1
-    },
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width,
-        height
-      },
-      children: [/*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: 0,
-        width: width,
-        height: height,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(0, height),
-          colors: ['#0c0a1f', '#1a1b3a', '#2d1b69', '#1e1b4b', '#0c0a1f']
-        })
-      }), /*#__PURE__*/_jsx(Group, {
-        children: Array.from({
-          length: 40
-        }, (_, i) => {
-          const x = width / 8 * (i % 8) + i % 5 * 25;
-          const y = height / 5 * Math.floor(i / 8) + i % 3 * 40;
-          const size = 1 + i % 3 * 0.4;
-          return /*#__PURE__*/_jsx(Circle, {
-            cx: x,
-            cy: y,
-            r: size,
-            color: "#ffffff",
-            opacity: 0.6
-          }, `star-${i}`);
-        })
-      }), /*#__PURE__*/_jsx(Group, {
-        children: Array.from({
-          length: 8
-        }, (_, i) => {
-          const positions = [{
-            x: width * 0.15,
-            y: height * 0.2
-          }, {
-            x: width * 0.8,
-            y: height * 0.3
-          }, {
-            x: width * 0.3,
-            y: height * 0.5
-          }, {
-            x: width * 0.7,
-            y: height * 0.6
-          }, {
-            x: width * 0.2,
-            y: height * 0.7
-          }, {
-            x: width * 0.85,
-            y: height * 0.8
-          }, {
-            x: width * 0.5,
-            y: height * 0.15
-          }, {
-            x: width * 0.6,
-            y: height * 0.85
-          }];
-          const pos = positions[i];
-          if (!pos) return null;
-          const size = 2.5 + i % 2 * 0.5;
-          return /*#__PURE__*/_jsx(Group, {
-            children: /*#__PURE__*/_jsx(Circle, {
-              cx: pos.x,
-              cy: pos.y,
-              r: size,
-              color: "#ffffff",
-              opacity: 0.8,
-              children: /*#__PURE__*/_jsx(Shadow, {
-                dx: 0,
-                dy: 0,
-                blur: 10,
-                color: "#ffffff"
-              })
-            })
-          }, `bright-star-${i}`);
-        })
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.85,
-          cy: height * 0.2,
-          r: 32,
-          color: "#4c1d95",
-          opacity: 0.8,
-          children: /*#__PURE__*/_jsx(Shadow, {
-            dx: -2,
-            dy: 2,
-            blur: 8,
-            color: "rgba(0,0,0,0.5)"
-          })
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.85 - 6,
-          cy: height * 0.2 - 4,
-          r: 10,
-          color: "#5b21b6",
-          opacity: 0.6
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.85 + 4,
-          cy: height * 0.2 + 6,
-          r: 6,
-          color: "#6d28d9",
-          opacity: 0.5
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: width * 0.85 - 8,
-          cy: height * 0.2 - 8,
-          r: 6,
-          color: "#a855f7",
-          opacity: 0.3
-        })]
-      }), /*#__PURE__*/_jsxs(Group, {
-        children: [/*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.2,
-            cy: height * 0.6,
-            r: 40,
-            color: "#7c3aed",
-            opacity: 0.12,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 0,
-              blur: 15,
-              color: "#7c3aed"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.24,
-            cy: height * 0.58,
-            r: 28,
-            color: "#a855f7",
-            opacity: 0.1
-          })]
-        }), /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.7,
-            cy: height * 0.4,
-            r: 30,
-            color: "#3b82f6",
-            opacity: 0.1,
-            children: /*#__PURE__*/_jsx(Shadow, {
-              dx: 0,
-              dy: 0,
-              blur: 12,
-              color: "#3b82f6"
-            })
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: width * 0.72,
-            cy: height * 0.38,
-            r: 20,
-            color: "#60a5fa",
-            opacity: 0.08
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Group, {
-        children: Array.from({
-          length: 5
-        }, (_, i) => {
-          const positions = [{
-            x: width * 0.15,
-            y: height * 0.3
-          }, {
-            x: width * 0.85,
-            y: height * 0.5
-          }, {
-            x: width * 0.3,
-            y: height * 0.75
-          }, {
-            x: width * 0.75,
-            y: height * 0.2
-          }, {
-            x: width * 0.5,
-            y: height * 0.85
-          }];
-          const pos = positions[i];
-          if (!pos) return null;
-          const size = 3 + i % 3;
-          return /*#__PURE__*/_jsxs(Group, {
-            children: [/*#__PURE__*/_jsx(Circle, {
-              cx: pos.x,
-              cy: pos.y,
-              r: size,
-              color: "#6b7280",
-              opacity: 0.5,
-              children: /*#__PURE__*/_jsx(Shadow, {
-                dx: 1,
-                dy: 1,
-                blur: 2,
-                color: "rgba(0,0,0,0.3)"
-              })
-            }), /*#__PURE__*/_jsx(Circle, {
-              cx: pos.x - size * 0.25,
-              cy: pos.y - size * 0.25,
-              r: size * 0.3,
-              color: "#9ca3af",
-              opacity: 0.3
-            })]
-          }, `asteroid-${i}`);
-        })
-      }), /*#__PURE__*/_jsx(Group, {
-        children: Array.from({
-          length: 15
-        }, (_, i) => {
-          const x = width / 5 * (i % 5) + i % 3 * 20;
-          const y = height / 3 * Math.floor(i / 5) + i % 4 * 30;
-          const size = 0.5 + i % 2 * 0.2;
-          return /*#__PURE__*/_jsx(Circle, {
-            cx: x,
-            cy: y,
-            r: size,
-            color: "#e5e7eb",
-            opacity: 0.25
-          }, `dust-${i}`);
-        })
-      })]
-    }), children]
-  });
-});
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{View,Dimensions}from 'react-native';import{Canvas,LinearGradient,Rect,Circle,Group,Shadow,vec}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})=>{return _jsxs(View,{style:{flex:1},children:[_jsxs(Canvas,{style:{position:'absolute',top:0,left:0,right:0,bottom:0,width,height},children:[_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(0,height),colors:['#0c0a1f','#1a1b3a','#2d1b69','#1e1b4b','#0c0a1f']})}),_jsx(Group,{children:Array.from({length:40},(_,i)=>{const x = width / 8 *(i % 8)+ i % 5 * 25;const y = height / 5 * Math.floor(i / 8)+ i % 3 * 40;const size = 1 + i % 3 * 0.4;return _jsx(Circle,{cx:x,cy:y,r:size,color:"#ffffff",opacity:0.6},`star-${i}`);})}),_jsx(Group,{children:Array.from({length:8},(_,i)=>{const positions = [{x:width * 0.15,y:height * 0.2},{x:width * 0.8,y:height * 0.3},{x:width * 0.3,y:height * 0.5},{x:width * 0.7,y:height * 0.6},{x:width * 0.2,y:height * 0.7},{x:width * 0.85,y:height * 0.8},{x:width * 0.5,y:height * 0.15},{x:width * 0.6,y:height * 0.85}];const pos = positions[i];if(!pos)return null;const size = 2.5 + i % 2 * 0.5;return _jsx(Group,{children:_jsx(Circle,{cx:pos.x,cy:pos.y,r:size,color:"#ffffff",opacity:0.8,children:_jsx(Shadow,{dx:0,dy:0,blur:10,color:"#ffffff"})})},`bright-star-${i}`);})}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.85,cy:height * 0.2,r:32,color:"#4c1d95",opacity:0.8,children:_jsx(Shadow,{dx:-2,dy:2,blur:8,color:"rgba(0,0,0,0.5)"})}),_jsx(Circle,{cx:width * 0.85 - 6,cy:height * 0.2 - 4,r:10,color:"#5b21b6",opacity:0.6}),_jsx(Circle,{cx:width * 0.85 + 4,cy:height * 0.2 + 6,r:6,color:"#6d28d9",opacity:0.5}),_jsx(Circle,{cx:width * 0.85 - 8,cy:height * 0.2 - 8,r:6,color:"#a855f7",opacity:0.3})]}),_jsxs(Group,{children:[_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.2,cy:height * 0.6,r:40,color:"#7c3aed",opacity:0.12,children:_jsx(Shadow,{dx:0,dy:0,blur:15,color:"#7c3aed"})}),_jsx(Circle,{cx:width * 0.24,cy:height * 0.58,r:28,color:"#a855f7",opacity:0.1})]}),_jsxs(Group,{children:[_jsx(Circle,{cx:width * 0.7,cy:height * 0.4,r:30,color:"#3b82f6",opacity:0.1,children:_jsx(Shadow,{dx:0,dy:0,blur:12,color:"#3b82f6"})}),_jsx(Circle,{cx:width * 0.72,cy:height * 0.38,r:20,color:"#60a5fa",opacity:0.08})]})]}),_jsx(Group,{children:Array.from({length:5},(_,i)=>{const positions = [{x:width * 0.15,y:height * 0.3},{x:width * 0.85,y:height * 0.5},{x:width * 0.3,y:height * 0.75},{x:width * 0.75,y:height * 0.2},{x:width * 0.5,y:height * 0.85}];const pos = positions[i];if(!pos)return null;const size = 3 + i % 3;return _jsxs(Group,{children:[_jsx(Circle,{cx:pos.x,cy:pos.y,r:size,color:"#6b7280",opacity:0.5,children:_jsx(Shadow,{dx:1,dy:1,blur:2,color:"rgba(0,0,0,0.3)"})}),_jsx(Circle,{cx:pos.x - size * 0.25,cy:pos.y - size * 0.25,r:size * 0.3,color:"#9ca3af",opacity:0.3})]},`asteroid-${i}`);})}),_jsx(Group,{children:Array.from({length:15},(_,i)=>{const x = width / 5 *(i % 5)+ i % 3 * 20;const y = height / 3 * Math.floor(i / 5)+ i % 4 * 30;const size = 0.5 + i % 2 * 0.2;return _jsx(Circle,{cx:x,cy:y,r:size,color:"#e5e7eb",opacity:0.25},`dust-${i}`);})})]}),children]});});

package/lib/module/games/space-fighter/components/ScoreBoard.js

@@ -1,136 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { useSpaceFighterStore } from "../SpaceFighterStore.js";
-import { ScoreBoardContainer } from "../../../helpers/index.js";
-
-// Self-contained ScoreBoard component that reads directly from store
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ScoreBoard = /*#__PURE__*/React.memo(({
-  offset = 0
-}) => {
-  // Read state directly from store to minimize re-renders
-  const score = useSpaceFighterStore(state => state.score);
-  const timeLeft = useSpaceFighterStore(state => state.timeLeft);
-  const currentLives = useSpaceFighterStore(state => state.lives);
-  const maxLives = 3;
-  return /*#__PURE__*/_jsx(ScoreBoardContainer, {
-    offset: offset,
-    backgroundColor: "rgba(147, 112, 219, 0.4)",
-    borderColor: "rgba(139, 92, 246, 0.3)",
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.scoreBoard,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.scoreItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Score"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.scoreValue,
-          children: score
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.scoreItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Time"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.timeValue,
-          children: timeLeft
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.scoreItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Lives"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.livesContainer,
-          children: Array.from({
-            length: maxLives
-          }, (_, i) => /*#__PURE__*/_jsx(Text, {
-            style: [styles.lifeIcon, i < currentLives ? styles.lifeActive : styles.lifeInactive],
-            children: i < currentLives ? '❤️' : '🖤'
-          }, i))
-        })]
-      })]
-    })
-  });
-});
-const styles = StyleSheet.create({
-  scoreBoard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  scoreItem: {
-    alignItems: 'center',
-    flex: 1
-  },
-  scoreLabel: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#e2e8f0',
-    // Light space gray
-    marginBottom: 6,
-    textShadowColor: 'rgba(0,0,0,0.5)',
-    textShadowOffset: {
-      width: 1,
-      height: 1
-    },
-    textShadowRadius: 2
-  },
-  scoreValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#fbbf24',
-    // Bright yellow for score
-    textShadowColor: 'rgba(0,0,0,0.5)',
-    textShadowOffset: {
-      width: 1,
-      height: 1
-    },
-    textShadowRadius: 2
-  },
-  timeValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#34d399',
-    // Bright green for time
-    textShadowColor: 'rgba(0,0,0,0.5)',
-    textShadowOffset: {
-      width: 1,
-      height: 1
-    },
-    textShadowRadius: 2
-  },
-  livesContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  lifeIcon: {
-    fontSize: 22,
-    marginHorizontal: 2
-  },
-  lifeActive: {
-    color: '#ef4444',
-    // Bright red for active lives
-    textShadowColor: 'rgba(0,0,0,0.5)',
-    textShadowOffset: {
-      width: 1,
-      height: 1
-    },
-    textShadowRadius: 2
-  },
-  lifeInactive: {
-    color: '#374151',
-    // Dark gray for lost lives
-    textShadowColor: 'rgba(255,255,255,0.2)',
-    textShadowOffset: {
-      width: 1,
-      height: 1
-    },
-    textShadowRadius: 1
-  }
-});
-//# sourceMappingURL=ScoreBoard.js.map
+"use strict";import React from 'react';import{View,Text,StyleSheet}from 'react-native';import{useSpaceFighterStore}from "../SpaceFighterStore.js";import{ScoreBoardContainer}from "../../../helpers/index.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const ScoreBoard = React.memo(({offset = 0})=>{const score = useSpaceFighterStore(state => state.score);const timeLeft = useSpaceFighterStore(state => state.timeLeft);const currentLives = useSpaceFighterStore(state => state.lives);const maxLives = 3;return _jsx(ScoreBoardContainer,{offset:offset,backgroundColor:"rgba(147,112,219,0.4)",borderColor:"rgba(139,92,246,0.3)",children:_jsxs(View,{style:styles.scoreBoard,children:[_jsxs(View,{style:styles.scoreItem,children:[_jsx(Text,{style:styles.scoreLabel,children:"Score"}),_jsx(Text,{style:styles.scoreValue,children:score})]}),_jsxs(View,{style:styles.scoreItem,children:[_jsx(Text,{style:styles.scoreLabel,children:"Time"}),_jsx(Text,{style:styles.timeValue,children:timeLeft})]}),_jsxs(View,{style:styles.scoreItem,children:[_jsx(Text,{style:styles.scoreLabel,children:"Lives"}),_jsx(View,{style:styles.livesContainer,children:Array.from({length:maxLives},(_,i)=> _jsx(Text,{style:[styles.lifeIcon,i < currentLives ? styles.lifeActive:styles.lifeInactive],children:i < currentLives ? '❤️':'🖤'},i))})]})]})});});const styles = StyleSheet.create({scoreBoard:{flexDirection:'row',justifyContent:'space-between',alignItems:'center'},scoreItem:{alignItems:'center',flex:1},scoreLabel:{fontSize:16,fontWeight:'bold',color:'#e2e8f0',marginBottom:6,textShadowColor:'rgba(0,0,0,0.5)',textShadowOffset:{width:1,height:1},textShadowRadius:2},scoreValue:{fontSize:25,fontWeight:'bold',color:'#fbbf24',textShadowColor:'rgba(0,0,0,0.5)',textShadowOffset:{width:1,height:1},textShadowRadius:2},timeValue:{fontSize:25,fontWeight:'bold',color:'#34d399',textShadowColor:'rgba(0,0,0,0.5)',textShadowOffset:{width:1,height:1},textShadowRadius:2},livesContainer:{flexDirection:'row',justifyContent:'center'},lifeIcon:{fontSize:22,marginHorizontal:2},lifeActive:{color:'#ef4444',textShadowColor:'rgba(0,0,0,0.5)',textShadowOffset:{width:1,height:1},textShadowRadius:2},lifeInactive:{color:'#374151',textShadowColor:'rgba(255,255,255,0.2)',textShadowOffset:{width:1,height:1},textShadowRadius:1}});