react-native-games 1.1.0 → 1.2.0

package/lib/module/games/popit-fidget/PopitFidgetService.js

@@ -1,132 +1 @@
-"use strict";
-
-import { Dimensions } from 'react-native';
-import { POPIT_FIDGET_GAME_CONFIG as GAME_CONFIG, POPIT_FIDGET_ANIMATION_CONFIG as ANIMATION_CONFIG, POPIT_FIDGET_COLORS as COLORS, RAINBOW_COLORS, BUBBLE_COLORS } from "./PopitFidgetConstants.js";
-const {
-  width,
-  height
-} = Dimensions.get('window');
-
-// Constants now imported from PopitFidgetConstants.ts
-// Re-export for backward compatibility
-export { GAME_CONFIG, ANIMATION_CONFIG, COLORS, BUBBLE_COLORS };
-
-// Types - Simplified to always use square grids
-
-export class PopitFidgetService {
-  gameTimerRef = null;
-  constructor() {}
-
-  // Generate square fidget grid based on difficulty
-  generateFidgetGrid(difficulty) {
-    const availableWidth = width * 0.85; // Match PopitFidget component calculation
-    const availableHeight = height * 0.6; // Match PopitFidget component calculation
-
-    // Get grid size from difficulty-based configuration
-    const gridSize = GAME_CONFIG.GRID_SIZES[difficulty];
-
-    // Use same bubble size calculation as PopitFidget component
-    const maxSize = Math.min(availableWidth / gridSize, availableHeight / gridSize);
-    const bubbleSize = Math.max(45, Math.min(80, maxSize * 0.9));
-
-    // Calculate grid dimensions with proper spacing
-    const spacing = bubbleSize * 1.1;
-    const gridWidth = (gridSize - 1) * spacing + bubbleSize;
-    const gridHeight = (gridSize - 1) * spacing + bubbleSize;
-    const bubbles = [];
-
-    // Generate square grid - all bubbles are included (no shape filtering)
-    for (let row = 0; row < gridSize; row++) {
-      bubbles[row] = [];
-      for (let col = 0; col < gridSize; col++) {
-        // Position bubbles with proper spacing to prevent overlap
-        const x = col * spacing + bubbleSize / 2;
-        const y = row * spacing + bubbleSize / 2;
-        bubbles[row][col] = {
-          id: `${row}-${col}`,
-          row,
-          col,
-          x,
-          y,
-          isPopped: false,
-          color: this.getRainbowColorForPosition(row, gridSize),
-          animationProgress: 0
-        };
-      }
-    }
-    return {
-      size: gridSize,
-      bubbles,
-      centerX: gridWidth / 2,
-      centerY: gridHeight / 2,
-      width: gridWidth,
-      height: gridHeight
-    };
-  }
-
-  // Get rainbow gradient color based on row position for authentic Pop It look
-  getRainbowColorForPosition(row, totalRows) {
-    // Create rainbow gradient effect like real Pop It fidget toys
-    const colorIndex = Math.floor(row / totalRows * RAINBOW_COLORS.length);
-    return RAINBOW_COLORS[colorIndex] || RAINBOW_COLORS[0];
-  }
-
-  // Check if all bubbles are popped
-  checkAllBubblesPopped(grid) {
-    for (let row = 0; row < grid.size; row++) {
-      for (let col = 0; col < grid.size; col++) {
-        const bubble = grid.bubbles[row]?.[col];
-        if (bubble && !bubble.isPopped) {
-          return false;
-        }
-      }
-    }
-    return true;
-  }
-
-  // Calculate completion percentage
-  calculateCompletionPercentage(grid) {
-    let totalBubbles = 0;
-    let poppedBubbles = 0;
-    for (let row = 0; row < grid.size; row++) {
-      for (let col = 0; col < grid.size; col++) {
-        const bubble = grid.bubbles[row]?.[col];
-        if (bubble) {
-          totalBubbles++;
-          if (bubble.isPopped) {
-            poppedBubbles++;
-          }
-        }
-      }
-    }
-    return totalBubbles > 0 ? poppedBubbles / totalBubbles * 100 : 0;
-  }
-
-  // Start game timer
-  startGameTimer(duration, onTick, onComplete) {
-    this.stopGameTimer();
-    let timeLeft = duration;
-    this.gameTimerRef = setInterval(() => {
-      timeLeft -= 1;
-      onTick(timeLeft);
-      if (timeLeft <= 0) {
-        this.stopGameTimer();
-        onComplete();
-      }
-    }, 1000);
-  }
-
-  // Stop game timer
-  stopGameTimer() {
-    if (this.gameTimerRef) {
-      clearInterval(this.gameTimerRef);
-      this.gameTimerRef = null;
-    }
-  }
-
-  // Cleanup
-  cleanup() {
-    this.stopGameTimer();
-  }
-}
-//# sourceMappingURL=PopitFidgetService.js.map
+"use strict";import{Dimensions}from 'react-native';import{POPIT_FIDGET_GAME_CONFIG as GAME_CONFIG,POPIT_FIDGET_ANIMATION_CONFIG as ANIMATION_CONFIG,POPIT_FIDGET_COLORS as COLORS,RAINBOW_COLORS,BUBBLE_COLORS}from "./PopitFidgetConstants.js";const{width,height}= Dimensions.get('window');export{GAME_CONFIG,ANIMATION_CONFIG,COLORS,BUBBLE_COLORS};export class PopitFidgetService{gameTimerRef = null;constructor(){}generateFidgetGrid(difficulty){const availableWidth = width * 0.85;const availableHeight = height * 0.6;const gridSize = GAME_CONFIG.GRID_SIZES[difficulty];const maxSize = Math.min(availableWidth / gridSize,availableHeight / gridSize);const bubbleSize = Math.max(45,Math.min(80,maxSize * 0.9));const spacing = bubbleSize * 1.1;const gridWidth =(gridSize - 1)* spacing + bubbleSize;const gridHeight =(gridSize - 1)* spacing + bubbleSize;const bubbles = [];for(let row = 0;row < gridSize;row++){bubbles[row] = [];for(let col = 0;col < gridSize;col++){const x = col * spacing + bubbleSize / 2;const y = row * spacing + bubbleSize / 2;bubbles[row][col] ={id:`${row}-${col}`,row,col,x,y,isPopped:false,color:this.getRainbowColorForPosition(row,gridSize),animationProgress:0};}}return{size:gridSize,bubbles,centerX:gridWidth / 2,centerY:gridHeight / 2,width:gridWidth,height:gridHeight};}getRainbowColorForPosition(row,totalRows){const colorIndex = Math.floor(row / totalRows * RAINBOW_COLORS.length);return RAINBOW_COLORS[colorIndex] || RAINBOW_COLORS[0];}checkAllBubblesPopped(grid){for(let row = 0;row < grid.size;row++){for(let col = 0;col < grid.size;col++){const bubble = grid.bubbles[row]?.[col];if(bubble && !bubble.isPopped){return false;}}}return true;}calculateCompletionPercentage(grid){let totalBubbles = 0;let poppedBubbles = 0;for(let row = 0;row < grid.size;row++){for(let col = 0;col < grid.size;col++){const bubble = grid.bubbles[row]?.[col];if(bubble){totalBubbles++;if(bubble.isPopped){poppedBubbles++;}}}}return totalBubbles > 0 ? poppedBubbles / totalBubbles * 100:0;}startGameTimer(duration,onTick,onComplete){this.stopGameTimer();let timeLeft = duration;this.gameTimerRef = setInterval(()=>{timeLeft -= 1;onTick(timeLeft);if(timeLeft <= 0){this.stopGameTimer();onComplete();}},1000);}stopGameTimer(){if(this.gameTimerRef){clearInterval(this.gameTimerRef);this.gameTimerRef = null;}}cleanup(){this.stopGameTimer();}}

package/lib/module/games/popit-fidget/PopitFidgetStore.js

@@ -1,125 +1 @@
-"use strict";
-
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { immerMiddleware } from "../../services/UtilsService.js";
-// Optimized store with selective subscriptions for low-end devices
-export const usePopitFidgetStore = create()(subscribeWithSelector(immerMiddleware((set, get) => ({
-  // Initial state
-  timeElapsed: 0,
-  isPlaying: false,
-  gameOver: false,
-  gameWon: false,
-  fidgetGrid: null,
-  bubblesPopped: 0,
-  totalBubbles: 0,
-  bubbleStates: {},
-  // Actions
-  startGame: _gameDuration => {
-    set(draft => {
-      draft.isPlaying = true;
-      draft.gameOver = false;
-      draft.gameWon = false;
-      draft.timeElapsed = 0;
-      draft.bubblesPopped = 0;
-    });
-  },
-  stopGame: () => {
-    set(draft => {
-      draft.isPlaying = false;
-      draft.gameOver = true;
-    });
-  },
-  resetGame: () => {
-    set(draft => {
-      draft.timeElapsed = 0;
-      draft.isPlaying = false;
-      draft.gameOver = false;
-      draft.gameWon = false;
-      draft.fidgetGrid = null;
-      draft.bubblesPopped = 0;
-      draft.totalBubbles = 0;
-    });
-  },
-  setFidgetGrid: grid => {
-    // For square grids, total bubbles = size * size
-    const totalCount = grid.size * grid.size;
-    set(draft => {
-      draft.fidgetGrid = grid;
-      draft.totalBubbles = totalCount;
-      draft.bubblesPopped = 0;
-
-      // Initialize bubble states for all bubbles
-      draft.bubbleStates = {};
-      for (let row = 0; row < grid.size; row++) {
-        for (let col = 0; col < grid.size; col++) {
-          const bubble = grid.bubbles[row]?.[col];
-          if (bubble) {
-            draft.bubbleStates[bubble.id] = {
-              isPopped: bubble.isPopped || false,
-              popTime: bubble.popTime
-            };
-          }
-        }
-      }
-    });
-  },
-  popBubble: (row, col) => {
-    set(draft => {
-      if (!draft.fidgetGrid) return;
-      const bubble = draft.fidgetGrid.bubbles[row]?.[col];
-      if (!bubble) return;
-
-      // Check if bubble is already popped using bubbleStates
-      const bubbleState = draft.bubbleStates[bubble.id];
-      if (bubbleState?.isPopped) return;
-
-      // Update only the bubbleStates, not the fidgetGrid
-      // This prevents the entire fidgetGrid array from changing references
-      draft.bubbleStates[bubble.id] = {
-        isPopped: true,
-        popTime: Date.now()
-      };
-      draft.bubblesPopped = draft.bubblesPopped + 1;
-    });
-
-    // Check if game is won (only if actively playing)
-    const state = get();
-    if (state.isPlaying) {
-      get().checkGameWon();
-    }
-  },
-  incrementTime: () => {
-    set(draft => {
-      draft.timeElapsed = draft.timeElapsed + 1;
-    });
-  },
-  checkGameWon: () => {
-    const state = get();
-    if (!state.fidgetGrid) return;
-
-    // Check if all bubbles are popped using bubbleStates
-    let allPopped = true;
-    for (let row = 0; row < state.fidgetGrid.size; row++) {
-      for (let col = 0; col < state.fidgetGrid.size; col++) {
-        const bubble = state.fidgetGrid.bubbles[row]?.[col];
-        if (bubble) {
-          const bubbleState = state.bubbleStates[bubble.id];
-          if (!bubbleState?.isPopped) {
-            allPopped = false;
-            break;
-          }
-        }
-      }
-      if (!allPopped) break;
-    }
-    if (allPopped && state.isPlaying) {
-      set(draft => {
-        draft.isPlaying = false;
-        draft.gameWon = true;
-        draft.gameOver = true;
-      });
-    }
-  }
-}))));
-//# sourceMappingURL=PopitFidgetStore.js.map
+"use strict";import{create}from 'zustand';import{subscribeWithSelector}from 'zustand/middleware';import{immerMiddleware}from "../../services/UtilsService.js";export const usePopitFidgetStore = create()(subscribeWithSelector(immerMiddleware((set,get)=>({timeElapsed:0,isPlaying:false,gameOver:false,gameWon:false,fidgetGrid:null,bubblesPopped:0,totalBubbles:0,bubbleStates:{},startGame:_gameDuration =>{set(draft =>{draft.isPlaying = true;draft.gameOver = false;draft.gameWon = false;draft.timeElapsed = 0;draft.bubblesPopped = 0;});},stopGame:()=>{set(draft =>{draft.isPlaying = false;draft.gameOver = true;});},resetGame:()=>{set(draft =>{draft.timeElapsed = 0;draft.isPlaying = false;draft.gameOver = false;draft.gameWon = false;draft.fidgetGrid = null;draft.bubblesPopped = 0;draft.totalBubbles = 0;});},setFidgetGrid:grid =>{const totalCount = grid.size * grid.size;set(draft =>{draft.fidgetGrid = grid;draft.totalBubbles = totalCount;draft.bubblesPopped = 0;draft.bubbleStates ={};for(let row = 0;row < grid.size;row++){for(let col = 0;col < grid.size;col++){const bubble = grid.bubbles[row]?.[col];if(bubble){draft.bubbleStates[bubble.id] ={isPopped:bubble.isPopped || false,popTime:bubble.popTime};}}}});},popBubble:(row,col)=>{set(draft =>{if(!draft.fidgetGrid)return;const bubble = draft.fidgetGrid.bubbles[row]?.[col];if(!bubble)return;const bubbleState = draft.bubbleStates[bubble.id];if(bubbleState?.isPopped)return;draft.bubbleStates[bubble.id] ={isPopped:true,popTime:Date.now()};draft.bubblesPopped = draft.bubblesPopped + 1;});const state = get();if(state.isPlaying){get().checkGameWon();}},incrementTime:()=>{set(draft =>{draft.timeElapsed = draft.timeElapsed + 1;});},checkGameWon:()=>{const state = get();if(!state.fidgetGrid)return;let allPopped = true;for(let row = 0;row < state.fidgetGrid.size;row++){for(let col = 0;col < state.fidgetGrid.size;col++){const bubble = state.fidgetGrid.bubbles[row]?.[col];if(bubble){const bubbleState = state.bubbleStates[bubble.id];if(!bubbleState?.isPopped){allPopped = false;break;}}}if(!allPopped)break;}if(allPopped && state.isPlaying){set(draft =>{draft.isPlaying = false;draft.gameWon = true;draft.gameOver = true;});}}}))));

package/lib/module/games/popit-fidget/components/BubbleComponent.js

@@ -1,198 +1 @@
-"use strict";
-
-import React, { useState, useCallback, useMemo } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { Canvas, Circle, LinearGradient, vec, Shadow } from '@shopify/react-native-skia';
-import { playHaptic, HapticType } from "../../../services/HapticsService.js";
-import { usePopitFidgetStore } from "../PopitFidgetStore.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BubbleComponent = ({
-  bubble,
-  size,
-  onPop,
-  hapticEnabled = true,
-  isPlaying
-}) => {
-  // Get bubble state from store to prevent re-renders when other bubbles change
-  const bubbleState = usePopitFidgetStore(state => state.bubbleStates[bubble.id]);
-  const isPopped = bubbleState?.isPopped || false;
-  // Simple state for press feedback - no animations to prevent crashes
-  const [isPressed, setIsPressed] = useState(false);
-
-  // Memoize callbacks to prevent unnecessary re-renders
-  const handlePop = useCallback(() => {
-    // Only allow popping when game is actively playing
-    if (!isPlaying || isPopped) return;
-
-    // Enhanced haptic feedback - stronger for more satisfaction
-    playHaptic(HapticType.MEDIUM, hapticEnabled || false);
-
-    // Trigger pop callback
-    onPop();
-  }, [onPop, hapticEnabled, isPlaying, isPopped]);
-  const handlePressIn = useCallback(() => {
-    if (!isPopped && isPlaying) {
-      setIsPressed(true);
-      // Haptic feedback on press
-      playHaptic(HapticType.LIGHT, hapticEnabled || false);
-    }
-  }, [isPopped, isPlaying, hapticEnabled]);
-  const handlePressOut = useCallback(() => {
-    setIsPressed(false);
-  }, []);
-
-  // Memoize bubble style to prevent recalculation
-  const bubbleStyle = useMemo(() => ({
-    position: 'absolute',
-    left: bubble.x - size / 2,
-    top: bubble.y - size / 2,
-    width: size,
-    height: size,
-    transform: [{
-      scale: isPressed ? 0.95 : 1
-    }]
-  }), [bubble.x, bubble.y, size, isPressed]);
-
-  // Simplified popped state rendering
-  if (isPopped) {
-    return /*#__PURE__*/_jsx(View, {
-      style: bubbleStyle,
-      children: /*#__PURE__*/_jsxs(Canvas, {
-        style: {
-          width: size,
-          height: size
-        },
-        children: [/*#__PURE__*/_jsx(Circle, {
-          cx: size / 2,
-          cy: size / 2,
-          r: size / 2,
-          color: bubble.color,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(0, 0),
-            end: vec(size, size),
-            colors: [`${bubble.color}60`,
-            // Muted to show flatness
-            `${bubble.color}40`,
-            // More muted
-            `${bubble.color}30` // Very muted to show depression
-            ]
-          })
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: size / 2,
-          cy: size / 2 + 1,
-          r: size / 2 - 6,
-          color: bubble.color,
-          children: /*#__PURE__*/_jsx(LinearGradient, {
-            start: vec(size * 0.7, size * 0.7),
-            end: vec(size * 0.3, size * 0.3),
-            colors: ['#FFFFFF30',
-            // Light highlight
-            `${bubble.color}80`,
-            // Bubble color
-            '#00000020' // Subtle shadow
-            ]
-          })
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: size / 2 + size * 0.15,
-          cy: size / 2 + size * 0.2,
-          r: size * 0.06,
-          color: "#FFFFFF",
-          opacity: 0.6
-        })]
-      })
-    });
-  }
-
-  // Simplified unpopped bubble rendering with TouchableOpacity wrapper for iOS/Android compatibility
-  return /*#__PURE__*/_jsxs(View, {
-    style: bubbleStyle,
-    children: [/*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        width: size,
-        height: size
-      },
-      children: [/*#__PURE__*/_jsx(Circle, {
-        cx: size / 2,
-        cy: size / 2,
-        r: size / 2,
-        color: bubble.color,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(size, size),
-          colors: [`${bubble.color}E0`, `${bubble.color}A0`, `${bubble.color}80`]
-        })
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: size / 2,
-        cy: size / 2 + 2,
-        r: size / 2 - 4,
-        color: "rgba(0,0,0,0.15)"
-      }), /*#__PURE__*/_jsxs(Circle, {
-        cx: size / 2,
-        cy: size / 2 - 1,
-        r: size / 2 - 4,
-        color: bubble.color,
-        children: [/*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(size * 0.2, size * 0.2),
-          end: vec(size * 0.8, size * 0.8),
-          colors: ['#FFFFFF', '#FFFFFFA0', bubble.color, `${bubble.color}C0`, '#00000020']
-        }), /*#__PURE__*/_jsx(Shadow, {
-          dx: 0,
-          dy: 3,
-          blur: 6,
-          color: "rgba(0,0,0,0.2)"
-        })]
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: size / 2 - size * 0.15,
-        cy: size / 2 - size * 0.2,
-        r: size * 0.12,
-        color: "#FFFFFF",
-        opacity: 0.8,
-        children: /*#__PURE__*/_jsx(LinearGradient, {
-          start: vec(0, 0),
-          end: vec(size * 0.24, size * 0.24),
-          colors: ['#FFFFFF', '#FFFFFF80', '#FFFFFF00']
-        })
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: size / 2 + size * 0.1,
-        cy: size / 2 - size * 0.15,
-        r: size * 0.06,
-        color: "#FFFFFF",
-        opacity: 0.6
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: size,
-        height: size,
-        backgroundColor: 'transparent'
-      },
-      onPress: handlePop,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      activeOpacity: 1,
-      disabled: isPopped || !isPlaying,
-      hitSlop: {
-        top: 10,
-        bottom: 10,
-        left: 10,
-        right: 10
-      },
-      delayPressIn: 0,
-      delayPressOut: 0
-    })]
-  });
-};
-
-// Memoized BubbleComponent with custom comparison to prevent unnecessary re-renders
-// Note: We don't compare onPop function reference as it may change but functionality remains the same
-// Note: We don't compare bubble.isPopped as we now use store state which is subscribed individually
-const MemoizedBubbleComponent = /*#__PURE__*/React.memo(BubbleComponent, (prevProps, nextProps) => {
-  return prevProps.bubble.id === nextProps.bubble.id && prevProps.bubble.x === nextProps.bubble.x && prevProps.bubble.y === nextProps.bubble.y && prevProps.bubble.color === nextProps.bubble.color && prevProps.size === nextProps.size && prevProps.hapticEnabled === nextProps.hapticEnabled && prevProps.isPlaying === nextProps.isPlaying
-  // Removed bubble.isPopped comparison as we now use individual store subscriptions
-  // Removed onPop comparison as function reference may change but behavior is the same
-  ;
-});
-export default MemoizedBubbleComponent;
-//# sourceMappingURL=BubbleComponent.js.map
+"use strict";import React,{useState,useCallback,useMemo}from 'react';import{View,TouchableOpacity}from 'react-native';import{Canvas,Circle,LinearGradient,vec,Shadow}from '@shopify/react-native-skia';import{playHaptic,HapticType}from "../../../services/HapticsService.js";import{usePopitFidgetStore}from "../PopitFidgetStore.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const BubbleComponent =({bubble,size,onPop,hapticEnabled = true,isPlaying})=>{const bubbleState = usePopitFidgetStore(state => state.bubbleStates[bubble.id]);const isPopped = bubbleState?.isPopped || false;const [isPressed,setIsPressed] = useState(false);const handlePop = useCallback(()=>{if(!isPlaying || isPopped)return;playHaptic(HapticType.MEDIUM,hapticEnabled || false);onPop();},[onPop,hapticEnabled,isPlaying,isPopped]);const handlePressIn = useCallback(()=>{if(!isPopped && isPlaying){setIsPressed(true);playHaptic(HapticType.LIGHT,hapticEnabled || false);}},[isPopped,isPlaying,hapticEnabled]);const handlePressOut = useCallback(()=>{setIsPressed(false);},[]);const bubbleStyle = useMemo(()=>({position:'absolute',left:bubble.x - size / 2,top:bubble.y - size / 2,width:size,height:size,transform:[{scale:isPressed ? 0.95:1}]}),[bubble.x,bubble.y,size,isPressed]);if(isPopped){return _jsx(View,{style:bubbleStyle,children:_jsxs(Canvas,{style:{width:size,height:size},children:[_jsx(Circle,{cx:size / 2,cy:size / 2,r:size / 2,color:bubble.color,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(size,size),colors:[`${bubble.color}60`,`${bubble.color}40`,`${bubble.color}30` ]})}),_jsx(Circle,{cx:size / 2,cy:size / 2 + 1,r:size / 2 - 6,color:bubble.color,children:_jsx(LinearGradient,{start:vec(size * 0.7,size * 0.7),end:vec(size * 0.3,size * 0.3),colors:['#FFFFFF30',`${bubble.color}80`,'#00000020' ]})}),_jsx(Circle,{cx:size / 2 + size * 0.15,cy:size / 2 + size * 0.2,r:size * 0.06,color:"#FFFFFF",opacity:0.6})]})});}return _jsxs(View,{style:bubbleStyle,children:[_jsxs(Canvas,{style:{width:size,height:size},children:[_jsx(Circle,{cx:size / 2,cy:size / 2,r:size / 2,color:bubble.color,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(size,size),colors:[`${bubble.color}E0`,`${bubble.color}A0`,`${bubble.color}80`]})}),_jsx(Circle,{cx:size / 2,cy:size / 2 + 2,r:size / 2 - 4,color:"rgba(0,0,0,0.15)"}),_jsxs(Circle,{cx:size / 2,cy:size / 2 - 1,r:size / 2 - 4,color:bubble.color,children:[_jsx(LinearGradient,{start:vec(size * 0.2,size * 0.2),end:vec(size * 0.8,size * 0.8),colors:['#FFFFFF','#FFFFFFA0',bubble.color,`${bubble.color}C0`,'#00000020']}),_jsx(Shadow,{dx:0,dy:3,blur:6,color:"rgba(0,0,0,0.2)"})]}),_jsx(Circle,{cx:size / 2 - size * 0.15,cy:size / 2 - size * 0.2,r:size * 0.12,color:"#FFFFFF",opacity:0.8,children:_jsx(LinearGradient,{start:vec(0,0),end:vec(size * 0.24,size * 0.24),colors:['#FFFFFF','#FFFFFF80','#FFFFFF00']})}),_jsx(Circle,{cx:size / 2 + size * 0.1,cy:size / 2 - size * 0.15,r:size * 0.06,color:"#FFFFFF",opacity:0.6})]}),_jsx(TouchableOpacity,{style:{position:'absolute',top:0,left:0,width:size,height:size,backgroundColor:'transparent'},onPress:handlePop,onPressIn:handlePressIn,onPressOut:handlePressOut,activeOpacity:1,disabled:isPopped || !isPlaying,hitSlop:{top:10,bottom:10,left:10,right:10},delayPressIn:0,delayPressOut:0})]});};const MemoizedBubbleComponent = React.memo(BubbleComponent,(prevProps,nextProps)=>{return prevProps.bubble.id === nextProps.bubble.id && prevProps.bubble.x === nextProps.bubble.x && prevProps.bubble.y === nextProps.bubble.y && prevProps.bubble.color === nextProps.bubble.color && prevProps.size === nextProps.size && prevProps.hapticEnabled === nextProps.hapticEnabled && prevProps.isPlaying === nextProps.isPlaying;});export default MemoizedBubbleComponent;

package/lib/module/games/popit-fidget/components/FidgetGrid.js

@@ -1,165 +1 @@
-"use strict";
-
-import React, { useMemo, useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { RAINBOW_COLORS } from "../PopitFidgetConstants.js";
-import BubbleComponent from "./BubbleComponent.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FidgetGrid = ({
-  grid,
-  bubbleSize,
-  onBubblePop,
-  hapticEnabled = true,
-  isPlaying
-}) => {
-  const padding = 20;
-
-  // Memoize row color calculation to prevent recalculation
-  const getRowColor = useCallback(rowIndex => {
-    const colorIndex = Math.floor(rowIndex / (grid.size - 1) * (RAINBOW_COLORS.length - 1));
-    return RAINBOW_COLORS[colorIndex] || RAINBOW_COLORS[0];
-  }, [grid.size]);
-
-  // Memoize container dimensions to prevent recalculation
-  const containerDimensions = useMemo(() => ({
-    width: grid.width + padding * 2,
-    height: grid.height + padding * 2
-  }), [grid.width, grid.height, padding]);
-
-  // Memoize bubble pop handlers using a stable reference pattern
-  const bubblePopHandlers = useMemo(() => {
-    const handlers = {};
-    grid.bubbles.forEach((row, rowIndex) => {
-      row.forEach((bubble, colIndex) => {
-        if (bubble) {
-          handlers[bubble.id] = () => onBubblePop(rowIndex, colIndex);
-        }
-      });
-    });
-    return handlers;
-  }, [grid.bubbles, onBubblePop]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, containerDimensions],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [styles.backgroundContainer, styles.fidget3D, {
-        ...containerDimensions,
-        borderRadius: 20,
-        overflow: 'hidden'
-      }],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.outerBorder, {
-          ...containerDimensions,
-          borderRadius: 20
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.innerRecess, {
-          position: 'absolute',
-          left: 8,
-          top: 8,
-          width: containerDimensions.width - 16,
-          height: containerDimensions.height - 16,
-          borderRadius: 12,
-          overflow: 'hidden'
-        }],
-        children: grid.bubbles.map((_, rowIndex) => {
-          const rowHeight = grid.height / grid.size;
-          const rowColor = getRowColor(rowIndex);
-          return /*#__PURE__*/_jsx(View, {
-            style: {
-              position: 'absolute',
-              left: padding - 8,
-              top: padding - 8 + rowIndex * rowHeight,
-              width: grid.width,
-              height: rowHeight,
-              backgroundColor: `${rowColor}50`
-            }
-          }, `row-bg-${rowIndex}`);
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: 'absolute',
-        left: padding,
-        top: padding
-      },
-      children: grid.bubbles.map((row, _rowIndex) => row.map((bubble, _colIndex) => {
-        if (!bubble) return null;
-        const bubbleHandler = bubblePopHandlers[bubble.id];
-        if (!bubbleHandler) return null;
-        return /*#__PURE__*/_jsx(BubbleComponent, {
-          bubble: bubble,
-          size: bubbleSize,
-          onPop: bubbleHandler,
-          hapticEnabled: hapticEnabled,
-          isPlaying: isPlaying
-        }, bubble.id);
-      }))
-    })]
-  });
-};
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    padding: 15
-    // Removed flex: 1 since we now use explicit width/height
-    // The parent gameArea container handles centering
-  },
-  backgroundContainer: {
-    position: 'absolute'
-  },
-  fidget3D: {
-    // Deep shadow for authentic Pop It depth
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 8
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-    elevation: 12
-  },
-  outerBorder: {
-    position: 'absolute',
-    backgroundColor: '#f0f0f0',
-    // Raised border gradient effect using multiple borders
-    borderWidth: 2,
-    borderTopColor: '#ffffff',
-    borderLeftColor: '#ffffff',
-    borderRightColor: '#cccccc',
-    borderBottomColor: '#aaaaaa'
-  },
-  innerRecess: {
-    backgroundColor: '#e8e8e8',
-    // Recessed inner area with inverted lighting
-    borderWidth: 1,
-    borderTopColor: '#cccccc',
-    borderLeftColor: '#cccccc',
-    borderRightColor: '#ffffff',
-    borderBottomColor: '#ffffff',
-    // Inner shadow effect
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: -2
-  }
-});
-
-// Memoized FidgetGrid component to prevent unnecessary re-renders
-const MemoizedFidgetGrid = /*#__PURE__*/React.memo(FidgetGrid, (prevProps, nextProps) => {
-  // Only re-render if grid structure, bubble states, or key props change
-  return prevProps.grid.size === nextProps.grid.size && prevProps.grid.width === nextProps.grid.width && prevProps.grid.height === nextProps.grid.height && prevProps.bubbleSize === nextProps.bubbleSize && prevProps.hapticEnabled === nextProps.hapticEnabled && prevProps.isPlaying === nextProps.isPlaying && prevProps.onBubblePop === nextProps.onBubblePop &&
-  // Check if bubble states have changed
-  JSON.stringify(prevProps.grid.bubbles.map(row => row.map(bubble => bubble ? {
-    id: bubble.id,
-    isPopped: bubble.isPopped
-  } : null))) === JSON.stringify(nextProps.grid.bubbles.map(row => row.map(bubble => bubble ? {
-    id: bubble.id,
-    isPopped: bubble.isPopped
-  } : null)));
-});
-export default MemoizedFidgetGrid;
-//# sourceMappingURL=FidgetGrid.js.map
+"use strict";import React,{useMemo,useCallback}from 'react';import{View,StyleSheet}from 'react-native';import{RAINBOW_COLORS}from "../PopitFidgetConstants.js";import BubbleComponent from "./BubbleComponent.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";const FidgetGrid =({grid,bubbleSize,onBubblePop,hapticEnabled = true,isPlaying})=>{const padding = 20;const getRowColor = useCallback(rowIndex =>{const colorIndex = Math.floor(rowIndex /(grid.size - 1)*(RAINBOW_COLORS.length - 1));return RAINBOW_COLORS[colorIndex] || RAINBOW_COLORS[0];},[grid.size]);const containerDimensions = useMemo(()=>({width:grid.width + padding * 2,height:grid.height + padding * 2}),[grid.width,grid.height,padding]);const bubblePopHandlers = useMemo(()=>{const handlers ={};grid.bubbles.forEach((row,rowIndex)=>{row.forEach((bubble,colIndex)=>{if(bubble){handlers[bubble.id] =()=> onBubblePop(rowIndex,colIndex);}});});return handlers;},[grid.bubbles,onBubblePop]);return _jsxs(View,{style:[styles.container,containerDimensions],children:[_jsxs(View,{style:[styles.backgroundContainer,styles.fidget3D,{...containerDimensions,borderRadius:20,overflow:'hidden'}],children:[_jsx(View,{style:[styles.outerBorder,{...containerDimensions,borderRadius:20}]}),_jsx(View,{style:[styles.innerRecess,{position:'absolute',left:8,top:8,width:containerDimensions.width - 16,height:containerDimensions.height - 16,borderRadius:12,overflow:'hidden'}],children:grid.bubbles.map((_,rowIndex)=>{const rowHeight = grid.height / grid.size;const rowColor = getRowColor(rowIndex);return _jsx(View,{style:{position:'absolute',left:padding - 8,top:padding - 8 + rowIndex * rowHeight,width:grid.width,height:rowHeight,backgroundColor:`${rowColor}50`}},`row-bg-${rowIndex}`);})})]}),_jsx(View,{style:{position:'absolute',left:padding,top:padding},children:grid.bubbles.map((row,_rowIndex)=> row.map((bubble,_colIndex)=>{if(!bubble)return null;const bubbleHandler = bubblePopHandlers[bubble.id];if(!bubbleHandler)return null;return _jsx(BubbleComponent,{bubble:bubble,size:bubbleSize,onPop:bubbleHandler,hapticEnabled:hapticEnabled,isPlaying:isPlaying},bubble.id);}))})]});};const styles = StyleSheet.create({container:{position:'relative',padding:15},backgroundContainer:{position:'absolute'},fidget3D:{shadowColor:'#000',shadowOffset:{width:0,height:8},shadowOpacity:0.4,shadowRadius:12,elevation:12},outerBorder:{position:'absolute',backgroundColor:'#f0f0f0',borderWidth:2,borderTopColor:'#ffffff',borderLeftColor:'#ffffff',borderRightColor:'#cccccc',borderBottomColor:'#aaaaaa'},innerRecess:{backgroundColor:'#e8e8e8',borderWidth:1,borderTopColor:'#cccccc',borderLeftColor:'#cccccc',borderRightColor:'#ffffff',borderBottomColor:'#ffffff',shadowColor:'#000',shadowOffset:{width:0,height:-2},shadowOpacity:0.2,shadowRadius:4,elevation:-2}});const MemoizedFidgetGrid = React.memo(FidgetGrid,(prevProps,nextProps)=>{return prevProps.grid.size === nextProps.grid.size && prevProps.grid.width === nextProps.grid.width && prevProps.grid.height === nextProps.grid.height && prevProps.bubbleSize === nextProps.bubbleSize && prevProps.hapticEnabled === nextProps.hapticEnabled && prevProps.isPlaying === nextProps.isPlaying && prevProps.onBubblePop === nextProps.onBubblePop && JSON.stringify(prevProps.grid.bubbles.map(row => row.map(bubble => bubble ?{id:bubble.id,isPopped:bubble.isPopped}:null)))=== JSON.stringify(nextProps.grid.bubbles.map(row => row.map(bubble => bubble ?{id:bubble.id,isPopped:bubble.isPopped}:null)));});export default MemoizedFidgetGrid;