react-native-games 1.0.0 → 1.2.0

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';

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

@@ -1,174 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import Animated, { useAnimatedStyle, withSpring, useSharedValue, withSequence } from 'react-native-reanimated';
-import { NumbersTile } from "./NumbersTile.js";
-import { useTiles, useGridSize, useEmptyPosition, useSlidingNumbersStore } from "../SlidingNumbersStore.js";
-import { SLIDING_NUMBERS_GAME_CONFIG, SLIDING_NUMBERS_ANIMATION_CONFIG } from "../SlidingNumbersConstants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const NumbersGrid = /*#__PURE__*/React.memo(({
-  difficulty
-}) => {
-  const tiles = useTiles();
-  const gridSize = useGridSize();
-  const emptyPosition = useEmptyPosition();
-  const isPlaying = useSlidingNumbersStore(state => state.isPlaying);
-  const isCompleted = useSlidingNumbersStore(state => state.isCompleted);
-  const moveTile = useSlidingNumbersStore(state => state.moveTile);
-  const checkCompletion = useSlidingNumbersStore(state => state.checkCompletion);
-  const completionScale = useSharedValue(1);
-
-  // Calculate grid dimensions
-  const gridDimensions = useMemo(() => {
-    const gap = SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP;
-    const padding = (gap + 8) * 2; // padding from grid container
-
-    // Calculate available space for the grid content
-    const {
-      width: screenWidth
-    } = Dimensions.get('window');
-    const maxAvailableWidth = screenWidth - padding - 40; // Leave margin for screen edges
-
-    // Calculate optimal tile size based on grid size
-    const availableForTiles = maxAvailableWidth - gap * (gridSize - 1);
-    const optimalTileSize = Math.floor(availableForTiles / gridSize);
-
-    // Ensure minimum tile size for usability
-    const minTileSize = 45;
-    const maxTileSize = 80;
-    const tileSize = Math.max(minTileSize, Math.min(maxTileSize, optimalTileSize));
-
-    // Calculate actual content size: tiles + gaps between them
-    const tilesWidth = tileSize * gridSize;
-    const gapsWidth = gap * (gridSize - 1);
-    const contentSize = tilesWidth + gapsWidth;
-    const totalSize = contentSize + padding;
-    return {
-      width: totalSize,
-      height: totalSize,
-      contentWidth: contentSize,
-      contentHeight: contentSize,
-      tileSize,
-      gap
-    };
-  }, [gridSize]);
-
-  // Create grid layout
-  const gridLayout = useMemo(() => {
-    const layout = [];
-
-    // Initialize empty grid
-    for (let row = 0; row < gridSize; row++) {
-      layout[row] = [];
-      for (let col = 0; col < gridSize; col++) {
-        const rowArray = layout[row];
-        if (rowArray) {
-          rowArray[col] = null;
-        }
-      }
-    }
-
-    // Place tiles in their current positions
-    tiles.forEach(tile => {
-      const {
-        row,
-        col
-      } = tile.position;
-      if (row >= 0 && row < gridSize && col >= 0 && col < gridSize && layout[row]) {
-        layout[row][col] = tile;
-      }
-    });
-    return layout;
-  }, [tiles, gridSize]);
-
-  // Memoized tile press handler with useCallback
-  const handleTilePress = React.useCallback(tileId => {
-    if (!isPlaying || isCompleted) return;
-    const success = moveTile(tileId);
-    if (success) {
-      // Check completion after successful move
-      checkCompletion(difficulty);
-    }
-  }, [isPlaying, isCompleted, moveTile, checkCompletion, difficulty]);
-
-  // Memoized tile movability checker with useCallback
-  const isTileMovable = React.useCallback(tile => {
-    if (!tile || tile.value === 0 || !isPlaying || isCompleted) return false;
-    const emptyPos = emptyPosition;
-    const rowDiff = Math.abs(tile.position.row - emptyPos.row);
-    const colDiff = Math.abs(tile.position.col - emptyPos.col);
-    return rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;
-  }, [emptyPosition, isPlaying, isCompleted]);
-
-  // Animated style for completion celebration
-  const animatedGridStyle = useAnimatedStyle(() => ({
-    transform: [{
-      scale: completionScale.value
-    }]
-  }));
-
-  // Trigger completion animation
-  React.useEffect(() => {
-    if (isCompleted) {
-      completionScale.value = withSequence(withSpring(1.1, SLIDING_NUMBERS_ANIMATION_CONFIG.COMPLETION_CELEBRATION), withSpring(1, SLIDING_NUMBERS_ANIMATION_CONFIG.COMPLETION_CELEBRATION));
-    }
-  }, [isCompleted]);
-
-  // Memoize grid container style
-  const gridContainerStyle = useMemo(() => [styles.gridContainer, {
-    width: gridDimensions.width,
-    height: gridDimensions.height
-  }, animatedGridStyle], [gridDimensions.width, gridDimensions.height, animatedGridStyle]);
-
-  // Memoize tile slot style factory
-  const getTileSlotStyle = React.useCallback(tileSize => [styles.tileSlot, {
-    width: tileSize,
-    height: tileSize
-  }], []);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: gridContainerStyle,
-    children: gridLayout.map((row, rowIndex) => /*#__PURE__*/_jsx(View, {
-      style: styles.row,
-      children: row.map((tile, colIndex) => /*#__PURE__*/_jsx(View, {
-        style: getTileSlotStyle(gridDimensions.tileSize),
-        children: tile && tile.value !== 0 && /*#__PURE__*/_jsx(NumbersTile, {
-          tile: tile,
-          onPress: handleTilePress,
-          isMovable: isTileMovable(tile),
-          tileSize: gridDimensions.tileSize
-        })
-      }, `${rowIndex}-${colIndex}`))
-    }, rowIndex))
-  });
-});
-const styles = StyleSheet.create({
-  gridContainer: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    padding: SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP + 8,
-    // Clean shadow like the physical puzzle frame
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 8,
-    // Ensure the container fits its content properly
-    alignSelf: 'center'
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  tileSlot: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP / 2
-  }
-});
-NumbersGrid.displayName = 'NumbersGrid';
-//# sourceMappingURL=NumbersGrid.js.map
+"use strict";import React,{useMemo}from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import Animated,{useAnimatedStyle,withSpring,useSharedValue,withSequence}from 'react-native-reanimated';import{NumbersTile}from "./NumbersTile.js";import{useTiles,useGridSize,useEmptyPosition,useSlidingNumbersStore}from "../SlidingNumbersStore.js";import{SLIDING_NUMBERS_GAME_CONFIG,SLIDING_NUMBERS_ANIMATION_CONFIG}from "../SlidingNumbersConstants.js";import{jsx as _jsx}from "react/jsx-runtime";export const NumbersGrid = React.memo(({difficulty})=>{const tiles = useTiles();const gridSize = useGridSize();const emptyPosition = useEmptyPosition();const isPlaying = useSlidingNumbersStore(state => state.isPlaying);const isCompleted = useSlidingNumbersStore(state => state.isCompleted);const moveTile = useSlidingNumbersStore(state => state.moveTile);const checkCompletion = useSlidingNumbersStore(state => state.checkCompletion);const completionScale = useSharedValue(1);const gridDimensions = useMemo(()=>{const gap = SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP;const padding =(gap + 8)* 2;const{width:screenWidth}= Dimensions.get('window');const maxAvailableWidth = screenWidth - padding - 40;const availableForTiles = maxAvailableWidth - gap *(gridSize - 1);const optimalTileSize = Math.floor(availableForTiles / gridSize);const minTileSize = 45;const maxTileSize = 80;const tileSize = Math.max(minTileSize,Math.min(maxTileSize,optimalTileSize));const tilesWidth = tileSize * gridSize;const gapsWidth = gap *(gridSize - 1);const contentSize = tilesWidth + gapsWidth;const totalSize = contentSize + padding;return{width:totalSize,height:totalSize,contentWidth:contentSize,contentHeight:contentSize,tileSize,gap};},[gridSize]);const gridLayout = useMemo(()=>{const layout = [];for(let row = 0;row < gridSize;row++){layout[row] = [];for(let col = 0;col < gridSize;col++){const rowArray = layout[row];if(rowArray){rowArray[col] = null;}}}tiles.forEach(tile =>{const{row,col}= tile.position;if(row >= 0 && row < gridSize && col >= 0 && col < gridSize && layout[row]){layout[row][col] = tile;}});return layout;},[tiles,gridSize]);const handleTilePress = React.useCallback(tileId =>{if(!isPlaying || isCompleted)return;const success = moveTile(tileId);if(success){checkCompletion(difficulty);}},[isPlaying,isCompleted,moveTile,checkCompletion,difficulty]);const isTileMovable = React.useCallback(tile =>{if(!tile || tile.value === 0 || !isPlaying || isCompleted)return false;const emptyPos = emptyPosition;const rowDiff = Math.abs(tile.position.row - emptyPos.row);const colDiff = Math.abs(tile.position.col - emptyPos.col);return rowDiff === 1 && colDiff === 0 || rowDiff === 0 && colDiff === 1;},[emptyPosition,isPlaying,isCompleted]);const animatedGridStyle = useAnimatedStyle(()=>({transform:[{scale:completionScale.value}]}));React.useEffect(()=>{if(isCompleted){completionScale.value = withSequence(withSpring(1.1,SLIDING_NUMBERS_ANIMATION_CONFIG.COMPLETION_CELEBRATION),withSpring(1,SLIDING_NUMBERS_ANIMATION_CONFIG.COMPLETION_CELEBRATION));}},[isCompleted]);const gridContainerStyle = useMemo(()=> [styles.gridContainer,{width:gridDimensions.width,height:gridDimensions.height},animatedGridStyle],[gridDimensions.width,gridDimensions.height,animatedGridStyle]);const getTileSlotStyle = React.useCallback(tileSize => [styles.tileSlot,{width:tileSize,height:tileSize}],[]);return _jsx(Animated.View,{style:gridContainerStyle,children:gridLayout.map((row,rowIndex)=> _jsx(View,{style:styles.row,children:row.map((tile,colIndex)=> _jsx(View,{style:getTileSlotStyle(gridDimensions.tileSize),children:tile && tile.value !== 0 && _jsx(NumbersTile,{tile:tile,onPress:handleTilePress,isMovable:isTileMovable(tile),tileSize:gridDimensions.tileSize})},`${rowIndex}-${colIndex}`))},rowIndex))});});const styles = StyleSheet.create({gridContainer:{backgroundColor:'#FFFFFF',borderRadius:20,padding:SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP + 8,shadowColor:'#000',shadowOffset:{width:0,height:4},shadowOpacity:0.1,shadowRadius:8,elevation:8,alignSelf:'center'},row:{flexDirection:'row',justifyContent:'center',alignItems:'center'},tileSlot:{justifyContent:'center',alignItems:'center',margin:SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP / 2}});NumbersGrid.displayName = 'NumbersGrid';

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

@@ -1,116 +1 @@
-"use strict";
-
-import React from 'react';
-import { StyleSheet, TouchableOpacity, Text } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnJS } from 'react-native-reanimated';
-import { SLIDING_NUMBERS_COLORS, SLIDING_NUMBERS_GAME_CONFIG, SLIDING_NUMBERS_ANIMATION_CONFIG, NUMBER_WORDS } from "../SlidingNumbersConstants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
-export const NumbersTile = /*#__PURE__*/React.memo(({
-  tile,
-  onPress,
-  isMovable,
-  tileSize
-}) => {
-  const scale = useSharedValue(1);
-  const opacity = useSharedValue(tile.value === 0 ? 0 : 1);
-  const handlePress = React.useCallback(() => {
-    if (tile.value !== 0 && isMovable) {
-      // Animate press feedback
-      scale.value = withSpring(0.95, SLIDING_NUMBERS_ANIMATION_CONFIG.TILE_PRESS, () => {
-        scale.value = withSpring(1, SLIDING_NUMBERS_ANIMATION_CONFIG.TILE_PRESS);
-      });
-      runOnJS(onPress)(tile.id);
-    }
-  }, [tile.value, tile.id, isMovable, onPress, scale]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{
-      scale: scale.value
-    }],
-    opacity: opacity.value
-  }));
-
-  // Don't render empty tile
-  if (tile.value === 0) {
-    return null;
-  }
-
-  // Memoized tile color and word
-  const {
-    tileColor,
-    numberWord
-  } = React.useMemo(() => {
-    const colorIndex = (tile.value - 1) % SLIDING_NUMBERS_COLORS.TILE_COLORS.length;
-    const color = SLIDING_NUMBERS_COLORS.TILE_COLORS[colorIndex] || SLIDING_NUMBERS_COLORS.TILE_COLORS[0];
-    const word = NUMBER_WORDS[tile.value] || '';
-    return {
-      tileColor: color,
-      numberWord: word
-    };
-  }, [tile.value]);
-
-  // Memoized font sizes
-  const {
-    numberFontSize,
-    wordFontSize
-  } = React.useMemo(() => ({
-    numberFontSize: Math.max(16, tileSize * 0.4),
-    wordFontSize: Math.max(8, tileSize * 0.15)
-  }), [tileSize]);
-  return /*#__PURE__*/_jsxs(AnimatedTouchableOpacity, {
-    style: [styles.tile, {
-      width: tileSize,
-      height: tileSize,
-      backgroundColor: tileColor,
-      borderColor: tile.isCorrect ? 'transparent' : '#FF4444',
-      borderWidth: tile.isCorrect ? 0 : 2
-    }, animatedStyle],
-    onPress: handlePress,
-    activeOpacity: 0.8,
-    disabled: !isMovable || tile.value === 0,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.number, {
-        fontSize: numberFontSize
-      }],
-      children: tile.value
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.word, {
-        fontSize: wordFontSize
-      }],
-      children: numberWord
-    })]
-  });
-}, (prevProps, nextProps) => {
-  // Custom comparison for better memoization
-  return prevProps.tile.id === nextProps.tile.id && prevProps.tile.value === nextProps.tile.value && prevProps.tile.isCorrect === nextProps.tile.isCorrect && prevProps.tile.position.row === nextProps.tile.position.row && prevProps.tile.position.col === nextProps.tile.position.col && prevProps.isMovable === nextProps.isMovable && prevProps.tileSize === nextProps.tileSize;
-});
-const styles = StyleSheet.create({
-  tile: {
-    margin: SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP / 2,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 16,
-    // Soft shadow like in the image
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 3
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 6,
-    elevation: 6
-  },
-  number: {
-    fontWeight: 'bold',
-    color: '#000000',
-    textAlign: 'center',
-    marginBottom: 2
-  },
-  word: {
-    fontWeight: 'normal',
-    color: '#000000',
-    textAlign: 'center'
-  }
-});
-NumbersTile.displayName = 'NumbersTile';
-//# sourceMappingURL=NumbersTile.js.map
+"use strict";import React from 'react';import{StyleSheet,TouchableOpacity,Text}from 'react-native';import Animated,{useSharedValue,useAnimatedStyle,withSpring,runOnJS}from 'react-native-reanimated';import{SLIDING_NUMBERS_COLORS,SLIDING_NUMBERS_GAME_CONFIG,SLIDING_NUMBERS_ANIMATION_CONFIG,NUMBER_WORDS}from "../SlidingNumbersConstants.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);export const NumbersTile = React.memo(({tile,onPress,isMovable,tileSize})=>{const scale = useSharedValue(1);const opacity = useSharedValue(tile.value === 0 ? 0:1);const handlePress = React.useCallback(()=>{if(tile.value !== 0 && isMovable){scale.value = withSpring(0.95,SLIDING_NUMBERS_ANIMATION_CONFIG.TILE_PRESS,()=>{scale.value = withSpring(1,SLIDING_NUMBERS_ANIMATION_CONFIG.TILE_PRESS);});runOnJS(onPress)(tile.id);}},[tile.value,tile.id,isMovable,onPress,scale]);const animatedStyle = useAnimatedStyle(()=>({transform:[{scale:scale.value}],opacity:opacity.value}));if(tile.value === 0){return null;}const{tileColor,numberWord}= React.useMemo(()=>{const colorIndex =(tile.value - 1)% SLIDING_NUMBERS_COLORS.TILE_COLORS.length;const color = SLIDING_NUMBERS_COLORS.TILE_COLORS[colorIndex] || SLIDING_NUMBERS_COLORS.TILE_COLORS[0];const word = NUMBER_WORDS[tile.value] || '';return{tileColor:color,numberWord:word};},[tile.value]);const{numberFontSize,wordFontSize}= React.useMemo(()=>({numberFontSize:Math.max(16,tileSize * 0.4),wordFontSize:Math.max(8,tileSize * 0.15)}),[tileSize]);return _jsxs(AnimatedTouchableOpacity,{style:[styles.tile,{width:tileSize,height:tileSize,backgroundColor:tileColor,borderColor:tile.isCorrect ? 'transparent':'#FF4444',borderWidth:tile.isCorrect ? 0:2},animatedStyle],onPress:handlePress,activeOpacity:0.8,disabled:!isMovable || tile.value === 0,children:[_jsx(Text,{style:[styles.number,{fontSize:numberFontSize}],children:tile.value}),_jsx(Text,{style:[styles.word,{fontSize:wordFontSize}],children:numberWord})]});},(prevProps,nextProps)=>{return prevProps.tile.id === nextProps.tile.id && prevProps.tile.value === nextProps.tile.value && prevProps.tile.isCorrect === nextProps.tile.isCorrect && prevProps.tile.position.row === nextProps.tile.position.row && prevProps.tile.position.col === nextProps.tile.position.col && prevProps.isMovable === nextProps.isMovable && prevProps.tileSize === nextProps.tileSize;});const styles = StyleSheet.create({tile:{margin:SLIDING_NUMBERS_GAME_CONFIG.TILE_GAP / 2,justifyContent:'center',alignItems:'center',borderRadius:16,shadowColor:'#000',shadowOffset:{width:0,height:3},shadowOpacity:0.15,shadowRadius:6,elevation:6},number:{fontWeight:'bold',color:'#000000',textAlign:'center',marginBottom:2},word:{fontWeight:'normal',color:'#000000',textAlign:'center'}});NumbersTile.displayName = 'NumbersTile';

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

@@ -1,64 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { useTimeElapsed } from "../SlidingNumbersStore.js";
-import { SlidingNumbersService } from "../SlidingNumbersService.js";
-import { ScoreBoardContainer } from "../../../helpers/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ScoreBoard = /*#__PURE__*/React.memo(({
-  offset = 0
-}) => {
-  const gameService = useMemo(() => new SlidingNumbersService(), []);
-  const timeElapsed = useTimeElapsed();
-  const formattedTime = useMemo(() => gameService.formatTime(timeElapsed), [gameService, timeElapsed]);
-  return /*#__PURE__*/_jsx(ScoreBoardContainer, {
-    offset: offset,
-    backgroundColor: "rgba(245, 245, 220, 0.6)",
-    borderColor: "rgba(255, 255, 255, 0.3)",
-    children: /*#__PURE__*/_jsx(View, {
-      style: styles.scoreBoard,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.scoreSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Time Elapsed"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.timeValue, {
-            color: '#3b82f6'
-          }],
-          children: formattedTime
-        })]
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  scoreBoard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  scoreSection: {
-    alignItems: 'center',
-    flex: 1
-  },
-  scoreLabel: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#4a5568',
-    // Dark gray for better contrast
-    marginBottom: 4
-  },
-  timeValue: {
-    fontSize: 30,
-    fontWeight: 'bold'
-  },
-  hintText: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#10b981' // Green color for motivation
-  }
-});
-ScoreBoard.displayName = 'ScoreBoard';
-//# sourceMappingURL=ScoreBoard.js.map
+"use strict";import React,{useMemo}from 'react';import{View,Text,StyleSheet}from 'react-native';import{useTimeElapsed}from "../SlidingNumbersStore.js";import{SlidingNumbersService}from "../SlidingNumbersService.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 gameService = useMemo(()=> new SlidingNumbersService(),[]);const timeElapsed = useTimeElapsed();const formattedTime = useMemo(()=> gameService.formatTime(timeElapsed),[gameService,timeElapsed]);return _jsx(ScoreBoardContainer,{offset:offset,backgroundColor:"rgba(245,245,220,0.6)",borderColor:"rgba(255,255,255,0.3)",children:_jsx(View,{style:styles.scoreBoard,children:_jsxs(View,{style:styles.scoreSection,children:[_jsx(Text,{style:styles.scoreLabel,children:"Time Elapsed"}),_jsx(Text,{style:[styles.timeValue,{color:'#3b82f6'}],children:formattedTime})]})})});});const styles = StyleSheet.create({scoreBoard:{flexDirection:'row',justifyContent:'space-between',alignItems:'center'},scoreSection:{alignItems:'center',flex:1},scoreLabel:{fontSize:16,fontWeight:'bold',color:'#4a5568',marginBottom:4},timeValue:{fontSize:25,fontWeight:'bold'},hintText:{fontSize:18,fontWeight:'600',color:'#10b981'}});ScoreBoard.displayName = 'ScoreBoard';

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

@@ -1,7 +1 @@
-"use strict";
-
-export { NumbersTile } from "./NumbersTile.js";
-export { NumbersGrid } from "./NumbersGrid.js";
-export { ScoreBoard } from "./ScoreBoard.js";
-export { GameBackground } from "./GameBackground.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{NumbersTile}from "./NumbersTile.js";export{NumbersGrid}from "./NumbersGrid.js";export{ScoreBoard}from "./ScoreBoard.js";export{GameBackground}from "./GameBackground.js";