react-native-games 1.1.0 → 1.3.0

package/lib/module/games/sliding-numbers/SlidingNumbersStore.js

@@ -1,274 +1 @@
-"use strict";
-
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { immerMiddleware } from "../../services/UtilsService.js";
-export const useSlidingNumbersStore = create()(subscribeWithSelector(immerMiddleware((set, get) => ({
-  // Initial state
-  isPlaying: false,
-  isCompleted: false,
-  tiles: [],
-  gridSize: 3,
-  emptyPosition: {
-    row: 2,
-    col: 2
-  },
-  score: 0,
-  timeLeft: 600,
-  timeElapsed: 0,
-  startTime: null,
-  // Initialize puzzle with given grid size
-  initializePuzzle: gridSize => {
-    set(state => {
-      const tiles = [];
-      const totalTiles = gridSize * gridSize;
-
-      // Create tiles (0 represents empty tile)
-      for (let i = 0; i < totalTiles; i++) {
-        const row = Math.floor(i / gridSize);
-        const col = i % gridSize;
-        const value = i === totalTiles - 1 ? 0 : i + 1; // Last tile is empty (0)
-
-        tiles.push({
-          id: i,
-          value,
-          position: {
-            row,
-            col
-          },
-          isCorrect: true // Initially all tiles are in correct position
-        });
-      }
-      state.tiles = tiles;
-      state.gridSize = gridSize;
-      state.emptyPosition = {
-        row: gridSize - 1,
-        col: gridSize - 1
-      };
-      state.score = 0;
-      state.timeLeft = 600; // 10 minutes
-      state.timeElapsed = 0;
-      state.isCompleted = false;
-      state.isPlaying = false;
-      state.startTime = null;
-    });
-
-    // Automatically shuffle the puzzle after initialization
-    get().shufflePuzzle();
-  },
-  // Move a tile if it's adjacent to empty space
-  moveTile: tileId => {
-    const state = get();
-    if (!state.isPlaying || state.isCompleted) return false;
-    const tile = state.tiles[tileId];
-    const emptyPos = state.emptyPosition;
-
-    // Check if tile is adjacent to empty space
-    const rowDiff = Math.abs(tile.position.row - emptyPos.row);
-    const colDiff = Math.abs(tile.position.col - emptyPos.col);
-    const isAdjacent = rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;
-    if (!isAdjacent) return false;
-    set(state => {
-      // Swap tile with empty space
-      const tile = state.tiles[tileId];
-      if (!tile) return;
-      const tilePos = tile.position;
-      const emptyTileId = state.tiles.findIndex(t => t.value === 0);
-      const emptyTile = state.tiles[emptyTileId];
-      if (!emptyTile) return;
-
-      // Update positions
-      tile.position = state.emptyPosition;
-      emptyTile.position = tilePos;
-      state.emptyPosition = tilePos;
-
-      // Update time elapsed for scoring
-      if (state.startTime) {
-        state.timeElapsed = Math.floor((Date.now() - state.startTime) / 1000);
-      }
-
-      // Check if tiles are in correct positions
-      state.tiles.forEach((tile, index) => {
-        const correctRow = Math.floor(index / state.gridSize);
-        const correctCol = index % state.gridSize;
-        tile.isCorrect = tile.position.row === correctRow && tile.position.col === correctCol;
-      });
-    });
-
-    // Completion will be checked by the component
-    return true;
-  },
-  // Move tile in specific direction (for gesture handling)
-  moveTileInDirection: (tileId, direction) => {
-    const state = get();
-    if (!state.isPlaying || state.isCompleted) return false;
-    const tile = state.tiles[tileId];
-    if (!tile) return false;
-    const emptyPos = state.emptyPosition;
-    let expectedEmptyPos;
-
-    // Calculate where empty space should be for this direction
-    switch (direction) {
-      case 'up':
-        expectedEmptyPos = {
-          row: tile.position.row - 1,
-          col: tile.position.col
-        };
-        break;
-      case 'down':
-        expectedEmptyPos = {
-          row: tile.position.row + 1,
-          col: tile.position.col
-        };
-        break;
-      case 'left':
-        expectedEmptyPos = {
-          row: tile.position.row,
-          col: tile.position.col - 1
-        };
-        break;
-      case 'right':
-        expectedEmptyPos = {
-          row: tile.position.row,
-          col: tile.position.col + 1
-        };
-        break;
-    }
-
-    // Check if empty space is in the expected position
-    if (emptyPos.row !== expectedEmptyPos.row || emptyPos.col !== expectedEmptyPos.col) {
-      return false;
-    }
-
-    // Use existing moveTile logic
-    return get().moveTile(tileId);
-  },
-  // Shuffle puzzle by making random valid moves
-  shufflePuzzle: () => {
-    const shuffleMoves = 100;
-    set(state => {
-      for (let i = 0; i < shuffleMoves; i++) {
-        const emptyPos = state.emptyPosition;
-        const possibleMoves = [];
-
-        // Find tiles adjacent to empty space
-        state.tiles.forEach((tile, index) => {
-          if (tile.value === 0) return; // Skip empty tile
-
-          const rowDiff = Math.abs(tile.position.row - emptyPos.row);
-          const colDiff = Math.abs(tile.position.col - emptyPos.col);
-          const isAdjacent = rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;
-          if (isAdjacent) {
-            possibleMoves.push(index);
-          }
-        });
-        if (possibleMoves.length > 0) {
-          const randomTileIndex = Math.floor(Math.random() * possibleMoves.length);
-          const randomTileId = possibleMoves[randomTileIndex];
-          if (randomTileId !== undefined) {
-            const tile = state.tiles[randomTileId];
-            const emptyTileId = state.tiles.findIndex(t => t.value === 0);
-            const emptyTile = state.tiles[emptyTileId];
-            if (tile && emptyTile) {
-              // Swap positions
-              const tilePos = tile.position;
-              tile.position = state.emptyPosition;
-              emptyTile.position = tilePos;
-              state.emptyPosition = tilePos;
-            }
-          }
-        }
-      }
-
-      // Update correctness after shuffle
-      state.tiles.forEach((tile, index) => {
-        const correctRow = Math.floor(index / state.gridSize);
-        const correctCol = index % state.gridSize;
-        tile.isCorrect = tile.position.row === correctRow && tile.position.col === correctCol;
-      });
-
-      // Reset score after shuffle
-      state.score = 0;
-      state.timeElapsed = 0;
-    });
-  },
-  // Start the game
-  startGame: () => {
-    set(state => {
-      state.isPlaying = true;
-      state.isCompleted = false;
-      state.startTime = Date.now();
-    });
-  },
-  // Stop the game
-  stopGame: () => {
-    const state = get();
-    // Reset the game instead of showing game over modal
-    state.resetGame();
-  },
-  // Reset the game (difficulty will be passed from component)
-  resetGame: () => {
-    set(state => {
-      state.isPlaying = false;
-      state.isCompleted = false;
-      state.score = 0;
-      state.timeLeft = 600;
-      state.timeElapsed = 0;
-      state.startTime = null;
-    });
-    // Puzzle will be re-initialized by the component with current difficulty
-  },
-  // Decrement time
-  decrementTime: () => {
-    set(state => {
-      if (state.timeLeft > 0) {
-        state.timeLeft--;
-        if (state.startTime) {
-          state.timeElapsed = Math.floor((Date.now() - state.startTime) / 1000);
-        }
-      } else {
-        state.isPlaying = false;
-        state.startTime = null;
-      }
-    });
-  },
-  // Check if puzzle is completed
-  checkCompletion: difficulty => {
-    const state = get();
-    const allCorrect = state.tiles.every(tile => tile.isCorrect);
-    if (allCorrect && state.isPlaying) {
-      set(state => {
-        state.isCompleted = true;
-        state.isPlaying = false;
-
-        // Calculate time-based score (faster completion = higher score)
-        const baseScore = difficulty === 'easy' ? 1000 : difficulty === 'medium' ? 2000 : 3000;
-        const multiplier = difficulty === 'easy' ? 5 : difficulty === 'medium' ? 10 : 15;
-
-        // Score decreases with time elapsed, bonus for remaining time
-        const timeScore = Math.max(0, baseScore - state.timeElapsed * multiplier);
-        const remainingTimeBonus = state.timeLeft * multiplier;
-        state.score = timeScore + remainingTimeBonus;
-      });
-    }
-  },
-  // Update score
-  updateScore: points => {
-    set(state => {
-      state.score += points;
-    });
-  }
-}))));
-
-// Selectors for performance optimization
-export const useGameState = () => useSlidingNumbersStore(state => ({
-  isPlaying: state.isPlaying,
-  isCompleted: state.isCompleted
-}));
-export const useScore = () => useSlidingNumbersStore(state => state.score);
-export const useTimeLeft = () => useSlidingNumbersStore(state => state.timeLeft);
-export const useTimeElapsed = () => useSlidingNumbersStore(state => state.timeElapsed);
-export const useTiles = () => useSlidingNumbersStore(state => state.tiles);
-export const useGridSize = () => useSlidingNumbersStore(state => state.gridSize);
-export const useEmptyPosition = () => useSlidingNumbersStore(state => state.emptyPosition);
-//# sourceMappingURL=SlidingNumbersStore.js.map
+"use strict";import{create}from 'zustand';import{subscribeWithSelector}from 'zustand/middleware';import{immerMiddleware}from "../../services/UtilsService.js";export const useSlidingNumbersStore = create()(subscribeWithSelector(immerMiddleware((set,get)=>({isPlaying:false,isCompleted:false,tiles:[],gridSize:3,emptyPosition:{row:2,col:2},score:0,timeLeft:600,timeElapsed:0,startTime:null,initializePuzzle:gridSize =>{set(state =>{const tiles = [];const totalTiles = gridSize * gridSize;for(let i = 0;i < totalTiles;i++){const row = Math.floor(i / gridSize);const col = i % gridSize;const value = i === totalTiles - 1 ? 0:i + 1;tiles.push({id:i,value,position:{row,col},isCorrect:true});}state.tiles = tiles;state.gridSize = gridSize;state.emptyPosition ={row:gridSize - 1,col:gridSize - 1};state.score = 0;state.timeLeft = 600;state.timeElapsed = 0;state.isCompleted = false;state.isPlaying = false;state.startTime = null;});get().shufflePuzzle();},moveTile:tileId =>{const state = get();if(!state.isPlaying || state.isCompleted)return false;const tile = state.tiles[tileId];const emptyPos = state.emptyPosition;const rowDiff = Math.abs(tile.position.row - emptyPos.row);const colDiff = Math.abs(tile.position.col - emptyPos.col);const isAdjacent = rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;if(!isAdjacent)return false;set(state =>{const tile = state.tiles[tileId];if(!tile)return;const tilePos = tile.position;const emptyTileId = state.tiles.findIndex(t => t.value === 0);const emptyTile = state.tiles[emptyTileId];if(!emptyTile)return;tile.position = state.emptyPosition;emptyTile.position = tilePos;state.emptyPosition = tilePos;if(state.startTime){state.timeElapsed = Math.floor((Date.now()- state.startTime)/ 1000);}state.tiles.forEach((tile,index)=>{const correctRow = Math.floor(index / state.gridSize);const correctCol = index % state.gridSize;tile.isCorrect = tile.position.row === correctRow && tile.position.col === correctCol;});});return true;},moveTileInDirection:(tileId,direction)=>{const state = get();if(!state.isPlaying || state.isCompleted)return false;const tile = state.tiles[tileId];if(!tile)return false;const emptyPos = state.emptyPosition;let expectedEmptyPos;switch(direction){case 'up':expectedEmptyPos ={row:tile.position.row - 1,col:tile.position.col};break;case 'down':expectedEmptyPos ={row:tile.position.row + 1,col:tile.position.col};break;case 'left':expectedEmptyPos ={row:tile.position.row,col:tile.position.col - 1};break;case 'right':expectedEmptyPos ={row:tile.position.row,col:tile.position.col + 1};break;}if(emptyPos.row !== expectedEmptyPos.row || emptyPos.col !== expectedEmptyPos.col){return false;}return get().moveTile(tileId);},shufflePuzzle:()=>{const shuffleMoves = 100;set(state =>{for(let i = 0;i < shuffleMoves;i++){const emptyPos = state.emptyPosition;const possibleMoves = [];state.tiles.forEach((tile,index)=>{if(tile.value === 0)return;const rowDiff = Math.abs(tile.position.row - emptyPos.row);const colDiff = Math.abs(tile.position.col - emptyPos.col);const isAdjacent = rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;if(isAdjacent){possibleMoves.push(index);}});if(possibleMoves.length > 0){const randomTileIndex = Math.floor(Math.random()* possibleMoves.length);const randomTileId = possibleMoves[randomTileIndex];if(randomTileId !== undefined){const tile = state.tiles[randomTileId];const emptyTileId = state.tiles.findIndex(t => t.value === 0);const emptyTile = state.tiles[emptyTileId];if(tile && emptyTile){const tilePos = tile.position;tile.position = state.emptyPosition;emptyTile.position = tilePos;state.emptyPosition = tilePos;}}}}state.tiles.forEach((tile,index)=>{const correctRow = Math.floor(index / state.gridSize);const correctCol = index % state.gridSize;tile.isCorrect = tile.position.row === correctRow && tile.position.col === correctCol;});state.score = 0;state.timeElapsed = 0;});},startGame:()=>{set(state =>{state.isPlaying = true;state.isCompleted = false;state.startTime = Date.now();});},stopGame:()=>{const state = get();state.resetGame();},resetGame:()=>{set(state =>{state.isPlaying = false;state.isCompleted = false;state.score = 0;state.timeLeft = 600;state.timeElapsed = 0;state.startTime = null;});},decrementTime:()=>{set(state =>{if(state.timeLeft > 0){state.timeLeft--;if(state.startTime){state.timeElapsed = Math.floor((Date.now()- state.startTime)/ 1000);}}else{state.isPlaying = false;state.startTime = null;}});},checkCompletion:difficulty =>{const state = get();const allCorrect = state.tiles.every(tile => tile.isCorrect);if(allCorrect && state.isPlaying){set(state =>{state.isCompleted = true;state.isPlaying = false;const baseScore = difficulty === 'easy' ? 1000:difficulty === 'medium' ? 2000:3000;const multiplier = difficulty === 'easy' ? 5:difficulty === 'medium' ? 10:15;const timeScore = Math.max(0,baseScore - state.timeElapsed * multiplier);const remainingTimeBonus = state.timeLeft * multiplier;state.score = timeScore + remainingTimeBonus;});}},updateScore:points =>{set(state =>{state.score += points;});}}))));export const useGameState =()=> useSlidingNumbersStore(state =>({isPlaying:state.isPlaying,isCompleted:state.isCompleted}));export const useScore =()=> useSlidingNumbersStore(state => state.score);export const useTimeLeft =()=> useSlidingNumbersStore(state => state.timeLeft);export const useTimeElapsed =()=> useSlidingNumbersStore(state => state.timeElapsed);export const useTiles =()=> useSlidingNumbersStore(state => state.tiles);export const useGridSize =()=> useSlidingNumbersStore(state => state.gridSize);export const useEmptyPosition =()=> useSlidingNumbersStore(state => state.emptyPosition);

package/lib/module/games/sliding-numbers/components/GameBackground.js

@@ -1,259 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, Dimensions } from 'react-native';
-import { Canvas, LinearGradient, Rect, vec, Circle, RoundedRect } from '@shopify/react-native-skia';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-
-// Puzzle-themed vibrant colors inspired by colorful number tiles
-const PUZZLE_COLORS = ['#E91E63',
-// Vibrant pink
-'#F44336',
-// Bright red
-'#FF5722',
-// Deep orange
-'#FF9800',
-// Orange
-'#FFC107',
-// Amber/yellow
-'#CDDC39',
-// Lime
-'#4CAF50',
-// Green
-'#009688',
-// Teal
-'#00BCD4',
-// Cyan
-'#2196F3',
-// Blue
-'#3F51B5',
-// Indigo
-'#9C27B0' // Purple
-];
-export const GameBackground = /*#__PURE__*/React.memo(({
-  children
-}) => {
-  // Generate static colorful floating puzzle tiles
-  const generateFloatingTiles = React.useMemo(() => {
-    const elements = [];
-    const tileCount = 25;
-    for (let i = 0; i < tileCount; i++) {
-      const baseX = width / tileCount * i;
-      const baseY = height / tileCount * i;
-
-      // Add subtle random offset for natural look
-      const x = baseX + Math.sin(i * 0.5) * 50 + Math.random() * 100;
-      const y = baseY + Math.cos(i * 0.7) * 60 + Math.random() * 120;
-      const tileSize = 20 + Math.random() * 20;
-      const colorIndex = i % PUZZLE_COLORS.length;
-      const opacity = 0.3 + Math.sin(i) * 0.15;
-
-      // Puzzle tile with varied shapes to suggest numbers
-      const tileX = Math.max(tileSize / 2, Math.min(width - tileSize, x));
-      const tileY = Math.max(tileSize / 2, Math.min(height - tileSize, y));
-
-      // Create different tile patterns to suggest different numbers
-      if (i % 4 === 0) {
-        // Square tiles (like number blocks)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize,
-          height: tileSize,
-          r: tileSize * 0.2,
-          color: `${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `square-tile-${i}`));
-      } else if (i % 4 === 1) {
-        // Rectangular tiles (like number 1)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize * 0.6,
-          height: tileSize,
-          r: tileSize * 0.15,
-          color: `${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `rect-tile-${i}`));
-      } else if (i % 4 === 2) {
-        // Wide tiles (like number 8)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize * 1.2,
-          height: tileSize * 0.8,
-          r: tileSize * 0.1,
-          color: `${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `wide-tile-${i}`));
-      } else {
-        // Circular tiles
-        elements.push(/*#__PURE__*/_jsx(Circle, {
-          cx: tileX + tileSize / 2,
-          cy: tileY + tileSize / 2,
-          r: tileSize / 2,
-          color: `${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `circle-tile-${i}`));
-      }
-    }
-    return elements;
-  }, [width, height]);
-  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(width, height),
-          colors: [`${PUZZLE_COLORS[0]}30`,
-          // Vibrant pink
-          `${PUZZLE_COLORS[3]}25`,
-          // Orange
-          `${PUZZLE_COLORS[6]}30`,
-          // Green
-          `${PUZZLE_COLORS[9]}25`,
-          // Blue
-          `${PUZZLE_COLORS[11]}30` // Purple
-          ]
-        })
-      }), /*#__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: [`${PUZZLE_COLORS[1]}20`,
-          // Bright red
-          'transparent', `${PUZZLE_COLORS[4]}20`,
-          // Yellow
-          'transparent', `${PUZZLE_COLORS[7]}20`,
-          // Teal
-          '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: [`${PUZZLE_COLORS[2]}15`,
-          // Deep orange
-          'transparent', `${PUZZLE_COLORS[5]}15`,
-          // Lime
-          'transparent', `${PUZZLE_COLORS[8]}15`,
-          // Cyan
-          'transparent']
-        })
-      }), generateFloatingTiles, /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.08,
-        y: height * 0.12,
-        width: 50,
-        height: 50,
-        r: 8,
-        color: `${PUZZLE_COLORS[0]}50` // Vibrant pink
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.85,
-        y: height * 0.82,
-        width: 45,
-        height: 45,
-        r: 7,
-        color: `${PUZZLE_COLORS[3]}50` // Orange
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.82,
-        y: height * 0.18,
-        width: 40,
-        height: 40,
-        r: 6,
-        color: `${PUZZLE_COLORS[6]}50` // Green
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.12,
-        y: height * 0.75,
-        width: 55,
-        height: 55,
-        r: 9,
-        color: `${PUZZLE_COLORS[9]}50` // Blue
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.47,
-        y: height * 0.08,
-        width: 35,
-        height: 35,
-        r: 5,
-        color: `${PUZZLE_COLORS[11]}50` // Purple
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.15,
-        y: height * 0.47,
-        width: 42,
-        height: 42,
-        r: 6,
-        color: `${PUZZLE_COLORS[5]}50` // Lime
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.75,
-        y: height * 0.57,
-        width: 38,
-        height: 38,
-        r: 6,
-        color: `${PUZZLE_COLORS[8]}50` // Cyan
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.57,
-        y: height * 0.87,
-        width: 32,
-        height: 32,
-        r: 5,
-        color: `${PUZZLE_COLORS[1]}50` // Red
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.25,
-        cy: height * 0.25,
-        r: 18,
-        color: `${PUZZLE_COLORS[4]}45` // Yellow
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.65,
-        cy: height * 0.35,
-        r: 22,
-        color: `${PUZZLE_COLORS[7]}45` // Teal
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.35,
-        cy: height * 0.65,
-        r: 16,
-        color: `${PUZZLE_COLORS[10]}45` // Indigo
-      }), Array.from({
-        length: Math.floor(width / 60)
-      }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-        x: i * 60,
-        y: 0,
-        width: 1,
-        height: height,
-        color: "rgba(255, 255, 255, 0.05)"
-      }, `grid-v-${i}`)), Array.from({
-        length: Math.floor(height / 60)
-      }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: i * 60,
-        width: width,
-        height: 1,
-        color: "rgba(255, 255, 255, 0.05)"
-      }, `grid-h-${i}`))]
-    }), children]
-  });
-});
-GameBackground.displayName = 'GameBackground';
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{View,Dimensions}from 'react-native';import{Canvas,LinearGradient,Rect,vec,Circle,RoundedRect}from '@shopify/react-native-skia';import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');const PUZZLE_COLORS = ['#E91E63','#F44336','#FF5722','#FF9800','#FFC107','#CDDC39','#4CAF50','#009688','#00BCD4','#2196F3','#3F51B5','#9C27B0' ];export const GameBackground = React.memo(({children})=>{const generateFloatingTiles = React.useMemo(()=>{const elements = [];const tileCount = 25;for(let i = 0;i < tileCount;i++){const baseX = width / tileCount * i;const baseY = height / tileCount * i;const x = baseX + Math.sin(i * 0.5)* 50 + Math.random()* 100;const y = baseY + Math.cos(i * 0.7)* 60 + Math.random()* 120;const tileSize = 20 + Math.random()* 20;const colorIndex = i % PUZZLE_COLORS.length;const opacity = 0.3 + Math.sin(i)* 0.15;const tileX = Math.max(tileSize / 2,Math.min(width - tileSize,x));const tileY = Math.max(tileSize / 2,Math.min(height - tileSize,y));if(i % 4 === 0){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize,height:tileSize,r:tileSize * 0.2,color:`${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`square-tile-${i}`));}else if(i % 4 === 1){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize * 0.6,height:tileSize,r:tileSize * 0.15,color:`${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`rect-tile-${i}`));}else if(i % 4 === 2){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize * 1.2,height:tileSize * 0.8,r:tileSize * 0.1,color:`${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`wide-tile-${i}`));}else{elements.push(_jsx(Circle,{cx:tileX + tileSize / 2,cy:tileY + tileSize / 2,r:tileSize / 2,color:`${PUZZLE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`circle-tile-${i}`));}}return elements;},[width,height]);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(width,height),colors:[`${PUZZLE_COLORS[0]}30`,`${PUZZLE_COLORS[3]}25`,`${PUZZLE_COLORS[6]}30`,`${PUZZLE_COLORS[9]}25`,`${PUZZLE_COLORS[11]}30` ]})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(width / 2,height / 2),colors:[`${PUZZLE_COLORS[1]}20`,'transparent',`${PUZZLE_COLORS[4]}20`,'transparent',`${PUZZLE_COLORS[7]}20`,'transparent']})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(width,0),end:vec(0,height),colors:[`${PUZZLE_COLORS[2]}15`,'transparent',`${PUZZLE_COLORS[5]}15`,'transparent',`${PUZZLE_COLORS[8]}15`,'transparent']})}),generateFloatingTiles,_jsx(RoundedRect,{x:width * 0.08,y:height * 0.12,width:50,height:50,r:8,color:`${PUZZLE_COLORS[0]}50`}),_jsx(RoundedRect,{x:width * 0.85,y:height * 0.82,width:45,height:45,r:7,color:`${PUZZLE_COLORS[3]}50`}),_jsx(RoundedRect,{x:width * 0.82,y:height * 0.18,width:40,height:40,r:6,color:`${PUZZLE_COLORS[6]}50`}),_jsx(RoundedRect,{x:width * 0.12,y:height * 0.75,width:55,height:55,r:9,color:`${PUZZLE_COLORS[9]}50`}),_jsx(RoundedRect,{x:width * 0.47,y:height * 0.08,width:35,height:35,r:5,color:`${PUZZLE_COLORS[11]}50`}),_jsx(RoundedRect,{x:width * 0.15,y:height * 0.47,width:42,height:42,r:6,color:`${PUZZLE_COLORS[5]}50`}),_jsx(RoundedRect,{x:width * 0.75,y:height * 0.57,width:38,height:38,r:6,color:`${PUZZLE_COLORS[8]}50`}),_jsx(RoundedRect,{x:width * 0.57,y:height * 0.87,width:32,height:32,r:5,color:`${PUZZLE_COLORS[1]}50`}),_jsx(Circle,{cx:width * 0.25,cy:height * 0.25,r:18,color:`${PUZZLE_COLORS[4]}45`}),_jsx(Circle,{cx:width * 0.65,cy:height * 0.35,r:22,color:`${PUZZLE_COLORS[7]}45`}),_jsx(Circle,{cx:width * 0.35,cy:height * 0.65,r:16,color:`${PUZZLE_COLORS[10]}45`}),Array.from({length:Math.floor(width / 60)},(_,i)=> _jsx(Rect,{x:i * 60,y:0,width:1,height:height,color:"rgba(255,255,255,0.05)"},`grid-v-${i}`)),Array.from({length:Math.floor(height / 60)},(_,i)=> _jsx(Rect,{x:0,y:i * 60,width:width,height:1,color:"rgba(255,255,255,0.05)"},`grid-h-${i}`))]}),children]});});GameBackground.displayName = 'GameBackground';