react-native-games 0.7.0 → 0.8.0

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

@@ -0,0 +1,174 @@
+"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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","StyleSheet","Dimensions","Animated","useAnimatedStyle","withSpring","useSharedValue","withSequence","NumbersTile","useTiles","useGridSize","useEmptyPosition","useSlidingNumbersStore","SLIDING_NUMBERS_GAME_CONFIG","SLIDING_NUMBERS_ANIMATION_CONFIG","jsx","_jsx","NumbersGrid","memo","difficulty","tiles","gridSize","emptyPosition","isPlaying","state","isCompleted","moveTile","checkCompletion","completionScale","gridDimensions","gap","TILE_GAP","padding","width","screenWidth","get","maxAvailableWidth","availableForTiles","optimalTileSize","Math","floor","minTileSize","maxTileSize","tileSize","max","min","tilesWidth","gapsWidth","contentSize","totalSize","height","contentWidth","contentHeight","gridLayout","layout","row","col","rowArray","forEach","tile","position","handleTilePress","useCallback","tileId","success","isTileMovable","value","emptyPos","rowDiff","abs","colDiff","animatedGridStyle","transform","scale","useEffect","COMPLETION_CELEBRATION","gridContainerStyle","styles","gridContainer","getTileSlotStyle","tileSlot","style","children","map","rowIndex","colIndex","onPress","isMovable","create","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","alignSelf","flexDirection","justifyContent","alignItems","margin","displayName"],"sourceRoot":"../../../../../src","sources":["games/sliding-numbers/components/NumbersGrid.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,116 @@
+"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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","TouchableOpacity","Text","Animated","useSharedValue","useAnimatedStyle","withSpring","runOnJS","SLIDING_NUMBERS_COLORS","SLIDING_NUMBERS_GAME_CONFIG","SLIDING_NUMBERS_ANIMATION_CONFIG","NUMBER_WORDS","jsx","_jsx","jsxs","_jsxs","AnimatedTouchableOpacity","createAnimatedComponent","NumbersTile","memo","tile","onPress","isMovable","tileSize","scale","opacity","value","handlePress","useCallback","TILE_PRESS","id","animatedStyle","transform","tileColor","numberWord","useMemo","colorIndex","TILE_COLORS","length","color","word","numberFontSize","wordFontSize","Math","max","style","styles","width","height","backgroundColor","borderColor","isCorrect","borderWidth","activeOpacity","disabled","children","number","fontSize","prevProps","nextProps","position","row","col","create","margin","TILE_GAP","justifyContent","alignItems","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","fontWeight","textAlign","marginBottom","displayName"],"sourceRoot":"../../../../../src","sources":["games/sliding-numbers/components/NumbersTile.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,66 @@
+"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 { RESPONSIVE_SCOREBOARD_CONTAINER, RESPONSIVE_SCOREBOARD_FONTS } from "../../../shared/helpers/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ScoreBoard = /*#__PURE__*/React.memo(() => {
+  const gameService = useMemo(() => new SlidingNumbersService(), []);
+  const timeElapsed = useTimeElapsed();
+  const formattedTime = useMemo(() => gameService.formatTime(timeElapsed), [gameService, timeElapsed]);
+  return /*#__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: {
+    ...RESPONSIVE_SCOREBOARD_CONTAINER,
+    marginHorizontal: 20,
+    marginTop: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: 'rgba(245, 245, 220, 0.6)',
+    // Semi-transparent beige matching puzzle theme
+    borderRadius: 16,
+    padding: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.3)' // Subtle white border
+  },
+  scoreSection: {
+    alignItems: 'center',
+    flex: 1
+  },
+  scoreLabel: {
+    fontSize: RESPONSIVE_SCOREBOARD_FONTS.labelSize,
+    fontWeight: 'bold',
+    color: '#4a5568',
+    // Dark gray for better contrast
+    marginBottom: 4
+  },
+  timeValue: {
+    fontSize: RESPONSIVE_SCOREBOARD_FONTS.timeSize,
+    fontWeight: 'bold'
+  },
+  hintText: {
+    fontSize: RESPONSIVE_SCOREBOARD_FONTS.labelSize,
+    fontWeight: '600',
+    color: '#10b981' // Green color for motivation
+  }
+});
+ScoreBoard.displayName = 'ScoreBoard';
+//# sourceMappingURL=ScoreBoard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","Text","StyleSheet","useTimeElapsed","SlidingNumbersService","RESPONSIVE_SCOREBOARD_CONTAINER","RESPONSIVE_SCOREBOARD_FONTS","jsx","_jsx","jsxs","_jsxs","ScoreBoard","memo","gameService","timeElapsed","formattedTime","formatTime","style","styles","scoreBoard","children","scoreSection","scoreLabel","timeValue","color","create","marginHorizontal","marginTop","flexDirection","justifyContent","alignItems","backgroundColor","borderRadius","padding","borderWidth","borderColor","flex","fontSize","labelSize","fontWeight","marginBottom","timeSize","hintText","displayName"],"sourceRoot":"../../../../../src","sources":["games/sliding-numbers/components/ScoreBoard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,cAAc,QAAQ,2BAAwB;AACvD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,+BAA+B,EAAEC,2BAA2B,QAAQ,kCAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvG,OAAO,MAAMC,UAAoB,gBAAGb,KAAK,CAACc,IAAI,CAAC,MAAM;EACnD,MAAMC,WAAW,GAAGd,OAAO,CAAC,MAAM,IAAIK,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC;EAClE,MAAMU,WAAW,GAAGX,cAAc,CAAC,CAAC;EAEpC,MAAMY,aAAa,GAAGhB,OAAO,CAAC,MAAMc,WAAW,CAACG,UAAU,CAACF,WAAW,CAAC,EAAE,CAACD,WAAW,EAAEC,WAAW,CAAC,CAAC;EAEpG,oBACEN,IAAA,CAACR,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACC,UAAW;IAAAC,QAAA,eAC7BV,KAAA,CAACV,IAAI;MAACiB,KAAK,EAAEC,MAAM,CAACG,YAAa;MAAAD,QAAA,gBAC/BZ,IAAA,CAACP,IAAI;QAACgB,KAAK,EAAEC,MAAM,CAACI,UAAW;QAAAF,QAAA,EAAC;MAAY,CAAM,CAAC,eACnDZ,IAAA,CAACP,IAAI;QAACgB,KAAK,EAAE,CAACC,MAAM,CAACK,SAAS,EAAE;UAAEC,KAAK,EAAE;QAAU,CAAC,CAAE;QAAAJ,QAAA,EACnDL;MAAa,CACV,CAAC;IAAA,CACH;EAAC,CACH,CAAC;AAEX,CAAC,CAAC;AAEF,MAAMG,MAAM,GAAGhB,UAAU,CAACuB,MAAM,CAAC;EAC/BN,UAAU,EAAE;IACV,GAAGd,+BAA+B;IAClCqB,gBAAgB,EAAE,EAAE;IACpBC,SAAS,EAAE,EAAE;IACbC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAE,0BAA0B;IAAE;IAC7CC,YAAY,EAAE,EAAE;IAChBC,OAAO,EAAE,EAAE;IACXC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE,0BAA0B,CAAE;EAC3C,CAAC;EACDd,YAAY,EAAE;IACZS,UAAU,EAAE,QAAQ;IACpBM,IAAI,EAAE;EACR,CAAC;EACDd,UAAU,EAAE;IACVe,QAAQ,EAAE/B,2BAA2B,CAACgC,SAAS;IAC/CC,UAAU,EAAE,MAAM;IAClBf,KAAK,EAAE,SAAS;IAAE;IAClBgB,YAAY,EAAE;EAChB,CAAC;EACDjB,SAAS,EAAE;IACTc,QAAQ,EAAE/B,2BAA2B,CAACmC,QAAQ;IAC9CF,UAAU,EAAE;EACd,CAAC;EACDG,QAAQ,EAAE;IACRL,QAAQ,EAAE/B,2BAA2B,CAACgC,SAAS;IAC/CC,UAAU,EAAE,KAAK;IACjBf,KAAK,EAAE,SAAS,CAAE;EACpB;AACF,CAAC,CAAC;AAEFb,UAAU,CAACgC,WAAW,GAAG,YAAY","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+"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

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

@@ -0,0 +1 @@
+{"version":3,"names":["NumbersTile","NumbersGrid","ScoreBoard","GameBackground"],"sourceRoot":"../../../../../src","sources":["games/sliding-numbers/components/index.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe;AAC3C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,cAAc,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/games/snake/Snake.js

@@ -0,0 +1,192 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { GestureHandlerRootView, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import { GameControlButton, GameOverModal, GameSettingsModal } from "../../shared/helpers/index.js";
+import { GAME_IDS, DEFAULT_GAME_SETTINGS } from "../../services/GamesService.js";
+import { GameBackground, GameGrid, ScoreBoard } from "./components/index.js";
+import { useSnakeStore, useScore, useIsPlaying, useIsGameOver } from "./SnakeStore.js";
+import { SNAKE_COLORS } from "./SnakeConstants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Snake = /*#__PURE__*/React.memo(({
+  settings,
+  onSettingsChange
+}) => {
+  // Zustand store selectors for optimal re-renders
+  const score = useScore();
+  const isPlaying = useIsPlaying();
+  const isGameOver = useIsGameOver();
+
+  // Store actions - use stable references to prevent re-renders
+  const startGame = useSnakeStore(state => state.startGame);
+  const stopGame = useSnakeStore(state => state.stopGame);
+  const resetGame = useSnakeStore(state => state.resetGame);
+  const initializeGame = useSnakeStore(state => state.initializeGame);
+  const updateSettings = useSnakeStore(state => state.updateSettings);
+  const changeDirection = useSnakeStore(state => state.changeDirection);
+
+  // Track previous values to prevent unnecessary updates
+  const prevSettingsRef = React.useRef({
+    enableSounds: true,
+    enableHaptics: true
+  });
+  const prevDifficultyRef = React.useRef('easy');
+
+  // Update settings when they change
+  React.useEffect(() => {
+    const enableSounds = settings?.enableSounds ?? true;
+    const enableHaptics = settings?.enableHaptics ?? true;
+
+    // Only update if values actually changed
+    if (prevSettingsRef.current.enableSounds !== enableSounds || prevSettingsRef.current.enableHaptics !== enableHaptics) {
+      prevSettingsRef.current = {
+        enableSounds,
+        enableHaptics
+      };
+      updateSettings(enableSounds, enableHaptics);
+    }
+  }, [updateSettings, settings?.enableSounds, settings?.enableHaptics]);
+
+  // Initialize on mount and when difficulty changes
+  React.useEffect(() => {
+    const difficulty = settings?.difficulty || 'easy';
+
+    // Only initialize if difficulty actually changed
+    if (prevDifficultyRef.current !== difficulty) {
+      prevDifficultyRef.current = difficulty;
+      initializeGame(difficulty);
+    }
+  }, [initializeGame, settings?.difficulty]);
+
+  // Game control handlers
+  const handleStartGame = React.useCallback(() => {
+    startGame();
+  }, [startGame]);
+  const handleResetGame = React.useCallback(() => {
+    resetGame();
+  }, [resetGame]);
+  const handleStopGame = React.useCallback(() => {
+    stopGame();
+  }, [stopGame]);
+
+  // Gesture handler for swipe controls with safe state updates
+  const handleSwipe = React.useCallback(direction => {
+    try {
+      if (!isPlaying) return;
+
+      // Use requestAnimationFrame for safer state updates
+      requestAnimationFrame(() => {
+        try {
+          changeDirection(direction);
+        } catch (error) {
+          console.error('Direction change error:', error);
+        }
+      });
+    } catch (error) {
+      console.error('Swipe handler error:', error);
+    }
+  }, [isPlaying, changeDirection]);
+
+  // Pan gesture for swipe detection
+  const panGesture = React.useMemo(() => Gesture.Pan().onEnd(event => {
+    const threshold = 30; // Minimum swipe distance
+    const absX = Math.abs(event.translationX);
+    const absY = Math.abs(event.translationY);
+    if (absX > threshold || absY > threshold) {
+      if (absX > absY) {
+        // Horizontal swipe
+        if (event.translationX > 0) {
+          runOnJS(handleSwipe)('RIGHT');
+        } else {
+          runOnJS(handleSwipe)('LEFT');
+        }
+      } else {
+        // Vertical swipe
+        if (event.translationY > 0) {
+          runOnJS(handleSwipe)('DOWN');
+        } else {
+          runOnJS(handleSwipe)('UP');
+        }
+      }
+    }
+  }), [handleSwipe]);
+
+  // Memoized GameControlButton props
+  const gameControlButtonProps = React.useMemo(() => ({
+    isPlaying,
+    gameOver: isGameOver,
+    onStartGame: handleStartGame,
+    onStopGame: handleStopGame,
+    onResetGame: handleResetGame,
+    startButtonText: 'Start Slithering!',
+    startButtonSubtext: 'Swipe to move',
+    startButtonColor: SNAKE_COLORS.BUTTON_PRIMARY,
+    startButtonBorderColor: SNAKE_COLORS.BUTTON_SECONDARY
+  }), [isPlaying, isGameOver, handleStartGame, handleStopGame, handleResetGame]);
+
+  // Memoized GameOverModal props
+  const gameOverModalProps = React.useMemo(() => ({
+    isVisible: isGameOver,
+    score,
+    onPlayAgain: handleResetGame,
+    buttonText: 'Play Again!',
+    primaryColor: SNAKE_COLORS.MODAL_PRIMARY,
+    borderColor: SNAKE_COLORS.MODAL_BORDER,
+    buttonColor: SNAKE_COLORS.MODAL_BUTTON,
+    buttonBorderColor: SNAKE_COLORS.MODAL_BUTTON_BORDER,
+    scoreFormatter: s => `${s}`,
+    additionalInfo: 'Great slithering!'
+  }), [isGameOver, score, handleResetGame]);
+
+  // Memoized GameSettingsModal props
+  const gameSettingsModalProps = React.useMemo(() => ({
+    gameId: GAME_IDS.SNAKE,
+    settings: settings || DEFAULT_GAME_SETTINGS,
+    onSettingsChange
+  }), [settings, onSettingsChange]);
+  return /*#__PURE__*/_jsx(GameBackground, {
+    children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: panGesture,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.container,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.gridContainer,
+            children: /*#__PURE__*/_jsx(GameGrid, {})
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.scoreboardContainer,
+            children: /*#__PURE__*/_jsx(ScoreBoard, {})
+          }), /*#__PURE__*/_jsx(GameControlButton, {
+            ...gameControlButtonProps
+          }), /*#__PURE__*/_jsx(GameOverModal, {
+            ...gameOverModalProps
+          }), /*#__PURE__*/_jsx(GameSettingsModal, {
+            ...gameSettingsModalProps
+          })]
+        })
+      })
+    })
+  });
+});
+Snake.displayName = 'Snake';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  gridContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  scoreboardContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+//# sourceMappingURL=Snake.js.map

package/lib/module/games/snake/Snake.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","GestureHandlerRootView","Gesture","GestureDetector","runOnJS","GameControlButton","GameOverModal","GameSettingsModal","GAME_IDS","DEFAULT_GAME_SETTINGS","GameBackground","GameGrid","ScoreBoard","useSnakeStore","useScore","useIsPlaying","useIsGameOver","SNAKE_COLORS","jsx","_jsx","jsxs","_jsxs","Snake","memo","settings","onSettingsChange","score","isPlaying","isGameOver","startGame","state","stopGame","resetGame","initializeGame","updateSettings","changeDirection","prevSettingsRef","useRef","enableSounds","enableHaptics","prevDifficultyRef","useEffect","current","difficulty","handleStartGame","useCallback","handleResetGame","handleStopGame","handleSwipe","direction","requestAnimationFrame","error","console","panGesture","useMemo","Pan","onEnd","event","threshold","absX","Math","abs","translationX","absY","translationY","gameControlButtonProps","gameOver","onStartGame","onStopGame","onResetGame","startButtonText","startButtonSubtext","startButtonColor","BUTTON_PRIMARY","startButtonBorderColor","BUTTON_SECONDARY","gameOverModalProps","isVisible","onPlayAgain","buttonText","primaryColor","MODAL_PRIMARY","borderColor","MODAL_BORDER","buttonColor","MODAL_BUTTON","buttonBorderColor","MODAL_BUTTON_BORDER","scoreFormatter","s","additionalInfo","gameSettingsModalProps","gameId","SNAKE","children","style","styles","container","gesture","gridContainer","scoreboardContainer","displayName","create","flex","justifyContent","alignItems","position","top","left","right","zIndex"],"sourceRoot":"../../../../src","sources":["games/snake/Snake.tsx"],"mappings":"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","ignoreList":[]}