react-native-games 1.1.0 → 1.2.0

package/lib/module/games/game-2048/Game2048Store.js

@@ -1,236 +1 @@
-"use strict";
-
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { Game2048Service } from "./Game2048Service.js";
-import { GAME_CONFIG, GAME_2048_SOUNDS, GAME_2048_SETTINGS } from "./Game2048Constants.js";
-import { immerMiddleware } from "../../services/UtilsService.js";
-import { playSound } from "../../services/SoundsService.js";
-import { playHaptic, HapticType } from "../../services/HapticsService.js";
-// Ultra-minimal store with memory-safe implementation
-export const useGame2048Store = create()(subscribeWithSelector(immerMiddleware((set, get) => {
-  const gameService = new Game2048Service();
-  return {
-    // Initial state - minimal for memory efficiency
-    timeElapsed: 0,
-    isPlaying: false,
-    isGameOver: false,
-    isWon: false,
-    isAnimating: false,
-    grid: gameService.createGrid(),
-    nextTileId: 1,
-    difficulty: 'easy',
-    targetValue: 2048,
-    gridSize: 4,
-    enableSounds: true,
-    enableHaptics: true,
-    // Actions
-    startGame: () => {
-      set(state => {
-        state.isPlaying = true;
-        state.timeElapsed = 0; // Reset time when starting
-      });
-    },
-    stopGame: () => {
-      const state = get();
-      // Reset the game instead of showing game over modal
-      state.initializeGame(state.difficulty);
-    },
-    resetGame: () => {
-      const state = get();
-      state.initializeGame(state.difficulty);
-    },
-    initializeGame: (difficulty = 'easy') => {
-      set(state => {
-        // Get difficulty settings
-        const difficultySettings = GAME_2048_SETTINGS.DIFFICULTY_SETTINGS[difficulty];
-
-        // Clear existing grid to prevent memory leaks
-        state.grid = gameService.createGrid();
-
-        // Add initial tiles with animations
-        let tileId = 1;
-        const tile1 = gameService.addRandomTile(state.grid, tileId++);
-        const tile2 = gameService.addRandomTile(state.grid, tileId++);
-
-        // Reset state with difficulty settings
-        state.timeElapsed = 0;
-        state.isPlaying = false;
-        state.isGameOver = false;
-        state.isWon = false;
-        state.isAnimating = false;
-        state.nextTileId = tileId;
-        state.difficulty = difficulty;
-        state.targetValue = difficultySettings.targetTile;
-        state.gridSize = difficultySettings.gridSize;
-
-        // Animate initial tiles
-        [tile1, tile2].forEach(tile => {
-          if (tile?.scaleValue) {
-            setTimeout(() => {
-              tile.scaleValue?.setValue(0);
-              // Use React Native's Animated API
-              const {
-                Animated
-              } = require('react-native');
-              Animated.spring(tile.scaleValue, {
-                toValue: 1,
-                useNativeDriver: true,
-                tension: GAME_CONFIG.ANIMATION_CONFIG.TENSION,
-                friction: GAME_CONFIG.ANIMATION_CONFIG.FRICTION
-              }).start();
-            }, 100);
-          }
-        });
-      });
-    },
-    updateGrid: newGrid => {
-      set(state => {
-        state.grid = newGrid;
-      });
-    },
-    incrementTime: () => {
-      set(state => {
-        state.timeElapsed += 1;
-      });
-    },
-    setIsAnimating: animating => {
-      set(state => {
-        state.isAnimating = animating;
-      });
-    },
-    setGameOver: gameOver => {
-      set(state => {
-        state.isGameOver = gameOver;
-        if (gameOver) {
-          state.isPlaying = false;
-        }
-      });
-    },
-    setWon: won => {
-      set(state => {
-        state.isWon = won;
-      });
-    },
-    incrementTileId: () => {
-      const state = get();
-      const newId = state.nextTileId;
-      set(draft => {
-        draft.nextTileId = newId + 1;
-      });
-      return newId;
-    },
-    handleMove: direction => {
-      const state = get();
-
-      // Early returns for better performance
-      if (state.isGameOver || state.isWon || state.isAnimating) {
-        return false;
-      }
-
-      // Batch state updates for better performance
-      set(draft => {
-        // Auto-start the game if not playing
-        if (!draft.isPlaying) {
-          draft.isPlaying = true;
-        }
-        draft.isAnimating = true;
-      });
-
-      // Create a shallow copy for better memory performance
-      const gridCopy = state.grid.map(row => row.slice());
-      const {
-        moved,
-        score: moveScore
-      } = gameService.moveTiles(gridCopy, direction);
-      if (moved) {
-        // Batch all state updates together
-        const newTileId = state.nextTileId;
-        const newTile = gameService.addRandomTile(gridCopy, newTileId);
-
-        // Check game state before updating
-        const hasWon = gameService.hasWon(gridCopy, state.targetValue);
-        const isGameOver = gameService.checkGameOver(gridCopy);
-
-        // Single state update for all changes
-        set(draft => {
-          draft.grid = gridCopy;
-          draft.nextTileId = newTileId + 1;
-          if (hasWon) draft.isWon = true;
-          if (isGameOver) draft.isGameOver = true;
-        });
-
-        // Async sound/haptic feedback (non-blocking)
-        Promise.resolve().then(() => {
-          playSound(GAME_2048_SOUNDS.TILE_MOVE, state.enableSounds);
-          playHaptic(HapticType.LIGHT, state.enableHaptics);
-          if (moveScore > 0) {
-            playSound(GAME_2048_SOUNDS.TILE_MERGE, state.enableSounds);
-            playHaptic(HapticType.MEDIUM, state.enableHaptics);
-          }
-          if (newTile) {
-            playSound(GAME_2048_SOUNDS.NEW_TILE, state.enableSounds);
-          }
-          if (hasWon) {
-            playSound(GAME_2048_SOUNDS.GAME_WIN, state.enableSounds);
-            playHaptic(HapticType.SUCCESS, state.enableHaptics);
-          } else if (isGameOver) {
-            playSound(GAME_2048_SOUNDS.GAME_OVER, state.enableSounds);
-            playHaptic(HapticType.ERROR, state.enableHaptics);
-          }
-        });
-
-        // Optimized animation handling
-        if (newTile?.scaleValue) {
-          const {
-            Animated
-          } = require('react-native');
-          newTile.scaleValue.setValue(0);
-          Animated.spring(newTile.scaleValue, {
-            toValue: 1,
-            useNativeDriver: true,
-            tension: GAME_CONFIG.ANIMATION_CONFIG.TENSION,
-            friction: GAME_CONFIG.ANIMATION_CONFIG.FRICTION
-          }).start(() => {
-            set(draft => {
-              draft.isAnimating = false;
-            });
-          });
-        } else {
-          set(draft => {
-            draft.isAnimating = false;
-          });
-        }
-        return true;
-      } else {
-        // Async invalid move feedback
-        Promise.resolve().then(() => {
-          playSound(GAME_2048_SOUNDS.INVALID_MOVE, state.enableSounds);
-          playHaptic(HapticType.WARNING, state.enableHaptics);
-        });
-        set(draft => {
-          draft.isAnimating = false;
-        });
-        return false;
-      }
-    },
-    updateSettings: (enableSounds, enableHaptics) => {
-      set(state => {
-        state.enableSounds = enableSounds;
-        state.enableHaptics = enableHaptics;
-      });
-    }
-  };
-})));
-
-// Selector hooks for performance optimization
-export const useTimeElapsed = () => useGame2048Store(state => state.timeElapsed);
-export const useGrid = () => useGame2048Store(state => state.grid);
-export const useIsPlaying = () => useGame2048Store(state => state.isPlaying);
-export const useIsGameOver = () => useGame2048Store(state => state.isGameOver);
-export const useIsWon = () => useGame2048Store(state => state.isWon);
-export const useIsAnimating = () => useGame2048Store(state => state.isAnimating);
-export const useDifficulty = () => useGame2048Store(state => state.difficulty);
-export const useTargetValue = () => useGame2048Store(state => state.targetValue);
-export const useGridSize = () => useGame2048Store(state => state.gridSize);
-//# sourceMappingURL=Game2048Store.js.map
+"use strict";import{create}from 'zustand';import{subscribeWithSelector}from 'zustand/middleware';import{Game2048Service}from "./Game2048Service.js";import{GAME_CONFIG,GAME_2048_SOUNDS,GAME_2048_SETTINGS}from "./Game2048Constants.js";import{immerMiddleware}from "../../services/UtilsService.js";import{playSound}from "../../services/SoundsService.js";import{playHaptic,HapticType}from "../../services/HapticsService.js";export const useGame2048Store = create()(subscribeWithSelector(immerMiddleware((set,get)=>{const gameService = new Game2048Service();return{timeElapsed:0,isPlaying:false,isGameOver:false,isWon:false,isAnimating:false,grid:gameService.createGrid(),nextTileId:1,difficulty:'easy',targetValue:2048,gridSize:4,enableSounds:true,enableHaptics:true,startGame:()=>{set(state =>{state.isPlaying = true;state.timeElapsed = 0;});},stopGame:()=>{const state = get();state.initializeGame(state.difficulty);},resetGame:()=>{const state = get();state.initializeGame(state.difficulty);},initializeGame:(difficulty = 'easy')=>{set(state =>{const difficultySettings = GAME_2048_SETTINGS.DIFFICULTY_SETTINGS[difficulty];state.grid = gameService.createGrid();let tileId = 1;const tile1 = gameService.addRandomTile(state.grid,tileId++);const tile2 = gameService.addRandomTile(state.grid,tileId++);state.timeElapsed = 0;state.isPlaying = false;state.isGameOver = false;state.isWon = false;state.isAnimating = false;state.nextTileId = tileId;state.difficulty = difficulty;state.targetValue = difficultySettings.targetTile;state.gridSize = difficultySettings.gridSize;[tile1,tile2].forEach(tile =>{if(tile?.scaleValue){setTimeout(()=>{tile.scaleValue?.setValue(0);const{Animated}= require('react-native');Animated.spring(tile.scaleValue,{toValue:1,useNativeDriver:true,tension:GAME_CONFIG.ANIMATION_CONFIG.TENSION,friction:GAME_CONFIG.ANIMATION_CONFIG.FRICTION}).start();},100);}});});},updateGrid:newGrid =>{set(state =>{state.grid = newGrid;});},incrementTime:()=>{set(state =>{state.timeElapsed += 1;});},setIsAnimating:animating =>{set(state =>{state.isAnimating = animating;});},setGameOver:gameOver =>{set(state =>{state.isGameOver = gameOver;if(gameOver){state.isPlaying = false;}});},setWon:won =>{set(state =>{state.isWon = won;});},incrementTileId:()=>{const state = get();const newId = state.nextTileId;set(draft =>{draft.nextTileId = newId + 1;});return newId;},handleMove:direction =>{const state = get();if(state.isGameOver || state.isWon || state.isAnimating){return false;}set(draft =>{if(!draft.isPlaying){draft.isPlaying = true;}draft.isAnimating = true;});const gridCopy = state.grid.map(row => row.slice());const{moved,score:moveScore}= gameService.moveTiles(gridCopy,direction);if(moved){const newTileId = state.nextTileId;const newTile = gameService.addRandomTile(gridCopy,newTileId);const hasWon = gameService.hasWon(gridCopy,state.targetValue);const isGameOver = gameService.checkGameOver(gridCopy);set(draft =>{draft.grid = gridCopy;draft.nextTileId = newTileId + 1;if(hasWon)draft.isWon = true;if(isGameOver)draft.isGameOver = true;});Promise.resolve().then(()=>{playSound(GAME_2048_SOUNDS.TILE_MOVE,state.enableSounds);playHaptic(HapticType.LIGHT,state.enableHaptics);if(moveScore > 0){playSound(GAME_2048_SOUNDS.TILE_MERGE,state.enableSounds);playHaptic(HapticType.MEDIUM,state.enableHaptics);}if(newTile){playSound(GAME_2048_SOUNDS.NEW_TILE,state.enableSounds);}if(hasWon){playSound(GAME_2048_SOUNDS.GAME_WIN,state.enableSounds);playHaptic(HapticType.SUCCESS,state.enableHaptics);}else if(isGameOver){playSound(GAME_2048_SOUNDS.GAME_OVER,state.enableSounds);playHaptic(HapticType.ERROR,state.enableHaptics);}});if(newTile?.scaleValue){const{Animated}= require('react-native');newTile.scaleValue.setValue(0);Animated.spring(newTile.scaleValue,{toValue:1,useNativeDriver:true,tension:GAME_CONFIG.ANIMATION_CONFIG.TENSION,friction:GAME_CONFIG.ANIMATION_CONFIG.FRICTION}).start(()=>{set(draft =>{draft.isAnimating = false;});});}else{set(draft =>{draft.isAnimating = false;});}return true;}else{Promise.resolve().then(()=>{playSound(GAME_2048_SOUNDS.INVALID_MOVE,state.enableSounds);playHaptic(HapticType.WARNING,state.enableHaptics);});set(draft =>{draft.isAnimating = false;});return false;}},updateSettings:(enableSounds,enableHaptics)=>{set(state =>{state.enableSounds = enableSounds;state.enableHaptics = enableHaptics;});}};})));export const useTimeElapsed =()=> useGame2048Store(state => state.timeElapsed);export const useGrid =()=> useGame2048Store(state => state.grid);export const useIsPlaying =()=> useGame2048Store(state => state.isPlaying);export const useIsGameOver =()=> useGame2048Store(state => state.isGameOver);export const useIsWon =()=> useGame2048Store(state => state.isWon);export const useIsAnimating =()=> useGame2048Store(state => state.isAnimating);export const useDifficulty =()=> useGame2048Store(state => state.difficulty);export const useTargetValue =()=> useGame2048Store(state => state.targetValue);export const useGridSize =()=> useGame2048Store(state => state.gridSize);

package/lib/module/games/game-2048/components/GameBackground.js

@@ -1,247 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { Canvas, LinearGradient, Rect, vec, Circle, RoundedRect } from '@shopify/react-native-skia';
-import { BACKGROUND_TILE_COLORS } from "../Game2048Constants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-export const GameBackground = /*#__PURE__*/React.memo(({
-  children
-}) => {
-  // Generate beautiful floating 2048 tiles
-  const generateFloatingTiles = React.useMemo(() => {
-    const elements = [];
-    const tileCount = 30;
-    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) * 60 + Math.random() * 120;
-      const y = baseY + Math.cos(i * 0.7) * 80 + Math.random() * 140;
-      const tileSize = 15 + Math.random() * 25;
-      const colorIndex = i % BACKGROUND_TILE_COLORS.length;
-      const opacity = 0.25 + Math.sin(i) * 0.15;
-
-      // 2048 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 inspired by 2048 numbers
-      if (i % 5 === 0) {
-        // Square tiles (like 2, 4, 8)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize,
-          height: tileSize,
-          r: tileSize * 0.25,
-          color: `${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `square-tile-${i}`));
-      } else if (i % 5 === 1) {
-        // Rectangular tiles (like 16, 32)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize * 0.7,
-          height: tileSize,
-          r: tileSize * 0.2,
-          color: `${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `rect-tile-${i}`));
-      } else if (i % 5 === 2) {
-        // Wide tiles (like 64, 128)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize * 1.3,
-          height: tileSize * 0.8,
-          r: tileSize * 0.15,
-          color: `${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `wide-tile-${i}`));
-      } else if (i % 5 === 3) {
-        // Circular tiles (like 256, 512)
-        elements.push(/*#__PURE__*/_jsx(Circle, {
-          cx: tileX + tileSize / 2,
-          cy: tileY + tileSize / 2,
-          r: tileSize / 2,
-          color: `${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `circle-tile-${i}`));
-      } else {
-        // Diamond-like tiles (like 1024, 2048)
-        elements.push(/*#__PURE__*/_jsx(RoundedRect, {
-          x: tileX,
-          y: tileY,
-          width: tileSize * 0.9,
-          height: tileSize * 0.9,
-          r: tileSize * 0.3,
-          color: `${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`
-        }, `diamond-tile-${i}`));
-      }
-    }
-    return elements;
-  }, []);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: styles.backgroundCanvas,
-      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: [`${BACKGROUND_TILE_COLORS[0]}35`,
-          // Vibrant pink
-          `${BACKGROUND_TILE_COLORS[3]}30`,
-          // Orange
-          `${BACKGROUND_TILE_COLORS[6]}35`,
-          // Green
-          `${BACKGROUND_TILE_COLORS[9]}30`,
-          // Blue
-          `${BACKGROUND_TILE_COLORS[11]}35` // 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: [`${BACKGROUND_TILE_COLORS[1]}25`,
-          // Bright red
-          'transparent', `${BACKGROUND_TILE_COLORS[4]}25`,
-          // Yellow
-          'transparent', `${BACKGROUND_TILE_COLORS[7]}25`,
-          // 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: [`${BACKGROUND_TILE_COLORS[2]}20`,
-          // Deep orange
-          'transparent', `${BACKGROUND_TILE_COLORS[5]}20`,
-          // Lime
-          'transparent', `${BACKGROUND_TILE_COLORS[8]}20`,
-          // Cyan
-          'transparent']
-        })
-      }), generateFloatingTiles, /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.08,
-        y: height * 0.12,
-        width: 55,
-        height: 55,
-        r: 12,
-        color: `${BACKGROUND_TILE_COLORS[10]}60` // Indigo
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.82,
-        y: height * 0.78,
-        width: 50,
-        height: 50,
-        r: 10,
-        color: `${BACKGROUND_TILE_COLORS[9]}60` // Blue
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.78,
-        y: height * 0.15,
-        width: 45,
-        height: 45,
-        r: 9,
-        color: `${BACKGROUND_TILE_COLORS[8]}60` // Cyan
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.12,
-        y: height * 0.72,
-        width: 60,
-        height: 60,
-        r: 14,
-        color: `${BACKGROUND_TILE_COLORS[7]}60` // Teal
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.45,
-        y: height * 0.08,
-        width: 40,
-        height: 40,
-        r: 8,
-        color: `${BACKGROUND_TILE_COLORS[6]}60` // Green
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.15,
-        y: height * 0.45,
-        width: 48,
-        height: 48,
-        r: 10,
-        color: `${BACKGROUND_TILE_COLORS[5]}60` // Lime
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.72,
-        y: height * 0.55,
-        width: 42,
-        height: 42,
-        r: 8,
-        color: `${BACKGROUND_TILE_COLORS[4]}60` // Yellow
-      }), /*#__PURE__*/_jsx(RoundedRect, {
-        x: width * 0.55,
-        y: height * 0.85,
-        width: 38,
-        height: 38,
-        r: 7,
-        color: `${BACKGROUND_TILE_COLORS[3]}60` // Orange
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.25,
-        cy: height * 0.28,
-        r: 22,
-        color: `${BACKGROUND_TILE_COLORS[2]}50` // Deep orange
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.62,
-        cy: height * 0.32,
-        r: 26,
-        color: `${BACKGROUND_TILE_COLORS[1]}50` // Red
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: width * 0.38,
-        cy: height * 0.68,
-        r: 20,
-        color: `${BACKGROUND_TILE_COLORS[0]}50` // Pink
-      }), Array.from({
-        length: Math.floor(width / 80)
-      }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-        x: i * 80,
-        y: 0,
-        width: 1,
-        height: height,
-        color: "rgba(255, 255, 255, 0.08)"
-      }, `grid-v-${i}`)), Array.from({
-        length: Math.floor(height / 80)
-      }, (_, i) => /*#__PURE__*/_jsx(Rect, {
-        x: 0,
-        y: i * 80,
-        width: width,
-        height: 1,
-        color: "rgba(255, 255, 255, 0.08)"
-      }, `grid-h-${i}`))]
-    }), children]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  backgroundCanvas: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width,
-    height
-  }
-});
-//# sourceMappingURL=GameBackground.js.map
+"use strict";import React from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{Canvas,LinearGradient,Rect,vec,Circle,RoundedRect}from '@shopify/react-native-skia';import{BACKGROUND_TILE_COLORS}from "../Game2048Constants.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width,height}= Dimensions.get('window');export const GameBackground = React.memo(({children})=>{const generateFloatingTiles = React.useMemo(()=>{const elements = [];const tileCount = 30;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)* 60 + Math.random()* 120;const y = baseY + Math.cos(i * 0.7)* 80 + Math.random()* 140;const tileSize = 15 + Math.random()* 25;const colorIndex = i % BACKGROUND_TILE_COLORS.length;const opacity = 0.25 + 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 % 5 === 0){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize,height:tileSize,r:tileSize * 0.25,color:`${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`square-tile-${i}`));}else if(i % 5 === 1){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize * 0.7,height:tileSize,r:tileSize * 0.2,color:`${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`rect-tile-${i}`));}else if(i % 5 === 2){elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize * 1.3,height:tileSize * 0.8,r:tileSize * 0.15,color:`${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`wide-tile-${i}`));}else if(i % 5 === 3){elements.push(_jsx(Circle,{cx:tileX + tileSize / 2,cy:tileY + tileSize / 2,r:tileSize / 2,color:`${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`circle-tile-${i}`));}else{elements.push(_jsx(RoundedRect,{x:tileX,y:tileY,width:tileSize * 0.9,height:tileSize * 0.9,r:tileSize * 0.3,color:`${BACKGROUND_TILE_COLORS[colorIndex]}${Math.floor(opacity * 255).toString(16).padStart(2,'0')}`},`diamond-tile-${i}`));}}return elements;},[]);return _jsxs(View,{style:styles.container,children:[_jsxs(Canvas,{style:styles.backgroundCanvas,children:[_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(width,height),colors:[`${BACKGROUND_TILE_COLORS[0]}35`,`${BACKGROUND_TILE_COLORS[3]}30`,`${BACKGROUND_TILE_COLORS[6]}35`,`${BACKGROUND_TILE_COLORS[9]}30`,`${BACKGROUND_TILE_COLORS[11]}35` ]})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(width / 2,height / 2),colors:[`${BACKGROUND_TILE_COLORS[1]}25`,'transparent',`${BACKGROUND_TILE_COLORS[4]}25`,'transparent',`${BACKGROUND_TILE_COLORS[7]}25`,'transparent']})}),_jsx(Rect,{x:0,y:0,width:width,height:height,children:_jsx(LinearGradient,{start:vec(width,0),end:vec(0,height),colors:[`${BACKGROUND_TILE_COLORS[2]}20`,'transparent',`${BACKGROUND_TILE_COLORS[5]}20`,'transparent',`${BACKGROUND_TILE_COLORS[8]}20`,'transparent']})}),generateFloatingTiles,_jsx(RoundedRect,{x:width * 0.08,y:height * 0.12,width:55,height:55,r:12,color:`${BACKGROUND_TILE_COLORS[10]}60`}),_jsx(RoundedRect,{x:width * 0.82,y:height * 0.78,width:50,height:50,r:10,color:`${BACKGROUND_TILE_COLORS[9]}60`}),_jsx(RoundedRect,{x:width * 0.78,y:height * 0.15,width:45,height:45,r:9,color:`${BACKGROUND_TILE_COLORS[8]}60`}),_jsx(RoundedRect,{x:width * 0.12,y:height * 0.72,width:60,height:60,r:14,color:`${BACKGROUND_TILE_COLORS[7]}60`}),_jsx(RoundedRect,{x:width * 0.45,y:height * 0.08,width:40,height:40,r:8,color:`${BACKGROUND_TILE_COLORS[6]}60`}),_jsx(RoundedRect,{x:width * 0.15,y:height * 0.45,width:48,height:48,r:10,color:`${BACKGROUND_TILE_COLORS[5]}60`}),_jsx(RoundedRect,{x:width * 0.72,y:height * 0.55,width:42,height:42,r:8,color:`${BACKGROUND_TILE_COLORS[4]}60`}),_jsx(RoundedRect,{x:width * 0.55,y:height * 0.85,width:38,height:38,r:7,color:`${BACKGROUND_TILE_COLORS[3]}60`}),_jsx(Circle,{cx:width * 0.25,cy:height * 0.28,r:22,color:`${BACKGROUND_TILE_COLORS[2]}50`}),_jsx(Circle,{cx:width * 0.62,cy:height * 0.32,r:26,color:`${BACKGROUND_TILE_COLORS[1]}50`}),_jsx(Circle,{cx:width * 0.38,cy:height * 0.68,r:20,color:`${BACKGROUND_TILE_COLORS[0]}50`}),Array.from({length:Math.floor(width / 80)},(_,i)=> _jsx(Rect,{x:i * 80,y:0,width:1,height:height,color:"rgba(255,255,255,0.08)"},`grid-v-${i}`)),Array.from({length:Math.floor(height / 80)},(_,i)=> _jsx(Rect,{x:0,y:i * 80,width:width,height:1,color:"rgba(255,255,255,0.08)"},`grid-h-${i}`))]}),children]});});const styles = StyleSheet.create({container:{flex:1},backgroundCanvas:{position:'absolute',top:0,left:0,right:0,bottom:0,width,height}});

package/lib/module/games/game-2048/components/GameGrid.js

@@ -1,139 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { useGrid, useGame2048Store } from "../Game2048Store.js";
-import { GameTile } from "./GameTile.js";
-import { GAME_CONFIG } from "../Game2048Constants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  width: screenWidth
-} = Dimensions.get('window');
-export const GameGrid = /*#__PURE__*/React.memo(() => {
-  const grid = useGrid();
-  const {
-    handleMove
-  } = useGame2048Store();
-
-  // Memoize calculations for better performance
-  const gridCalculations = React.useMemo(() => {
-    const horizontalPadding = 40;
-    const availableWidth = screenWidth - horizontalPadding;
-    const margin = GAME_CONFIG.TILE_MARGIN;
-    const responsiveTileSize = Math.floor((availableWidth - margin * 5) / 4);
-    const tileSize = Math.max(responsiveTileSize, 60);
-    const gridContainerSize = tileSize * 4 + margin * 5;
-    return {
-      margin,
-      tileSize,
-      gridContainerSize
-    };
-  }, []);
-
-  // Memoized tile renderer for better performance
-  const renderTile = React.useCallback(tile => {
-    const {
-      margin,
-      tileSize
-    } = gridCalculations;
-    const x = margin + tile.col * (tileSize + margin);
-    const y = margin + tile.row * (tileSize + margin);
-    return /*#__PURE__*/_jsx(GameTile, {
-      tile: tile,
-      position: {
-        x,
-        y
-      },
-      size: tileSize
-    }, tile.id);
-  }, [gridCalculations]);
-
-  // Optimized gesture handler with memoization
-  const panGesture = React.useMemo(() => Gesture.Pan().onEnd(event => {
-    const {
-      translationX,
-      translationY
-    } = event;
-    const minDistance = 50;
-    const absX = Math.abs(translationX);
-    const absY = Math.abs(translationY);
-    if (absX > absY && absX > minDistance) {
-      handleMove(translationX > 0 ? 'right' : 'left');
-    } else if (absY > minDistance) {
-      handleMove(translationY > 0 ? 'down' : 'up');
-    }
-  }).runOnJS(true), [handleMove]);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.gameContainer,
-    children: /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: panGesture,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.grid, {
-          width: gridCalculations.gridContainerSize,
-          height: gridCalculations.gridContainerSize
-        }],
-        children: [React.useMemo(() => Array(16).fill(0).map((_, index) => {
-          const row = Math.floor(index / 4);
-          const col = index % 4;
-          const {
-            margin,
-            tileSize
-          } = gridCalculations;
-          const x = margin + col * (tileSize + margin);
-          const y = margin + row * (tileSize + margin);
-          return /*#__PURE__*/_jsx(View, {
-            style: [styles.cell, {
-              left: x,
-              top: y,
-              width: tileSize,
-              height: tileSize
-            }]
-          }, index);
-        }), [gridCalculations]), React.useMemo(() => {
-          const tiles = [];
-          for (const row of grid) {
-            for (const tile of row) {
-              if (tile) tiles.push(renderTile(tile));
-            }
-          }
-          return tiles;
-        }, [grid, renderTile])]
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  gameContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    // Responsive horizontal padding
-    paddingVertical: 10,
-    zIndex: 10,
-    position: 'relative'
-  },
-  grid: {
-    backgroundColor: 'rgba(187, 173, 160, 0.9)',
-    borderRadius: 15,
-    position: 'relative',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 8
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 15,
-    elevation: 15,
-    // Ensure grid doesn't overflow screen
-    maxWidth: screenWidth - 40
-  },
-  cell: {
-    position: 'absolute',
-    backgroundColor: 'rgba(238, 228, 218, 0.4)',
-    borderRadius: 6 // Slightly smaller border radius for better fit
-  }
-});
-GameGrid.displayName = 'GameGrid';
-//# sourceMappingURL=GameGrid.js.map
+"use strict";import React from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{Gesture,GestureDetector}from 'react-native-gesture-handler';import{useGrid,useGame2048Store}from "../Game2048Store.js";import{GameTile}from "./GameTile.js";import{GAME_CONFIG}from "../Game2048Constants.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const{width:screenWidth}= Dimensions.get('window');export const GameGrid = React.memo(()=>{const grid = useGrid();const{handleMove}= useGame2048Store();const gridCalculations = React.useMemo(()=>{const horizontalPadding = 40;const availableWidth = screenWidth - horizontalPadding;const margin = GAME_CONFIG.TILE_MARGIN;const responsiveTileSize = Math.floor((availableWidth - margin * 5)/ 4);const tileSize = Math.max(responsiveTileSize,60);const gridContainerSize = tileSize * 4 + margin * 5;return{margin,tileSize,gridContainerSize};},[]);const renderTile = React.useCallback(tile =>{const{margin,tileSize}= gridCalculations;const x = margin + tile.col *(tileSize + margin);const y = margin + tile.row *(tileSize + margin);return _jsx(GameTile,{tile:tile,position:{x,y},size:tileSize},tile.id);},[gridCalculations]);const panGesture = React.useMemo(()=> Gesture.Pan().onEnd(event =>{const{translationX,translationY}= event;const minDistance = 50;const absX = Math.abs(translationX);const absY = Math.abs(translationY);if(absX > absY && absX > minDistance){handleMove(translationX > 0 ? 'right':'left');}else if(absY > minDistance){handleMove(translationY > 0 ? 'down':'up');}}).runOnJS(true),[handleMove]);return _jsx(View,{style:styles.gameContainer,children:_jsx(GestureDetector,{gesture:panGesture,children:_jsxs(View,{style:[styles.grid,{width:gridCalculations.gridContainerSize,height:gridCalculations.gridContainerSize}],children:[React.useMemo(()=> Array(16).fill(0).map((_,index)=>{const row = Math.floor(index / 4);const col = index % 4;const{margin,tileSize}= gridCalculations;const x = margin + col *(tileSize + margin);const y = margin + row *(tileSize + margin);return _jsx(View,{style:[styles.cell,{left:x,top:y,width:tileSize,height:tileSize}]},index);}),[gridCalculations]),React.useMemo(()=>{const tiles = [];for(const row of grid){for(const tile of row){if(tile)tiles.push(renderTile(tile));}}return tiles;},[grid,renderTile])]})})});});const styles = StyleSheet.create({gameContainer:{flex:1,justifyContent:'center',alignItems:'center',paddingHorizontal:20,paddingVertical:10,zIndex:10,position:'relative'},grid:{backgroundColor:'rgba(187,173,160,0.9)',borderRadius:15,position:'relative',shadowColor:'#000',shadowOffset:{width:0,height:8},shadowOpacity:0.25,shadowRadius:15,elevation:15,maxWidth:screenWidth - 40},cell:{position:'absolute',backgroundColor:'rgba(238,228,218,0.4)',borderRadius:6}});GameGrid.displayName = 'GameGrid';