react-native-games
Version:
Free games for your react native projects.
1 lines • 3.52 kB
JavaScript
"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;