react-native-games 1.1.0 → 1.3.0

package/lib/module/games/whack-a-mole/components/GameGrid.js

@@ -1,97 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { GAME_CONFIG } from "../WhackAMoleService.js";
-import { GameHole } from "./GameHole.js";
-
-// Highly optimized GameHole that only re-renders when its specific hole changes
-import { jsx as _jsx } from "react/jsx-runtime";
-const MemoizedGameHole = /*#__PURE__*/React.memo(GameHole, (prevProps, nextProps) => {
-  // Only re-render if this specific hole's state changes
-  return prevProps.hole.id === nextProps.hole.id && prevProps.hole.isActive === nextProps.hole.isActive && prevProps.moleAnimation === nextProps.moleAnimation && prevProps.hitAnimation === nextProps.hitAnimation && prevProps.onPress === nextProps.onPress && prevProps.holeSize === nextProps.holeSize;
-});
-export const GameGrid = /*#__PURE__*/React.memo(({
-  holes,
-  moleAnimations,
-  hitAnimations,
-  onHolePress,
-  gridSize = 3
-}) => {
-  // Calculate responsive dimensions with maximum width for tablets
-  const responsiveDimensions = useMemo(() => {
-    const {
-      width: screenWidth
-    } = Dimensions.get('window');
-
-    // Maximum container width for tablets (600px max)
-    const maxContainerWidth = Math.min(screenWidth * 0.9, 600);
-
-    // Calculate hole size based on grid size and container width
-    const availableWidth = maxContainerWidth - gridSize * 8; // Account for gaps
-    const maxHoleSize = availableWidth / gridSize;
-
-    // Use smaller of calculated size or original size, with minimum of 60px
-    const holeSize = Math.max(Math.min(maxHoleSize, GAME_CONFIG.HOLE_SIZE), 60);
-    return {
-      containerWidth: maxContainerWidth,
-      holeSize,
-      gridWidth: gridSize * (holeSize + 8) // Account for gaps
-    };
-  }, [gridSize]);
-
-  // Memoize style calculations to prevent re-computation on every render
-  const gridStyle = useMemo(() => ({
-    width: responsiveDimensions.gridWidth,
-    maxWidth: responsiveDimensions.containerWidth
-  }), [responsiveDimensions]);
-  const paddingStyle = useMemo(() => gridSize === 4 ? styles.smallPadding : styles.largePadding, [gridSize]);
-  const gapStyle = useMemo(() => gridSize === 4 ? styles.smallGap : styles.largeGap, [gridSize]);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.gameArea, paddingStyle],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.gameGrid, gapStyle, gridStyle],
-      children: holes.map((hole, index) => {
-        const moleAnimation = moleAnimations[index];
-        const hitAnimation = hitAnimations[index];
-        if (!moleAnimation || !hitAnimation) {
-          return null;
-        }
-        return /*#__PURE__*/_jsx(MemoizedGameHole, {
-          hole: hole,
-          moleAnimation: moleAnimation,
-          hitAnimation: hitAnimation,
-          onPress: onHolePress,
-          holeSize: responsiveDimensions.holeSize
-        }, hole.id);
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  gameArea: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  smallPadding: {
-    paddingHorizontal: 16,
-    paddingVertical: 20
-  },
-  largePadding: {
-    paddingVertical: 20
-  },
-  gameGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  smallGap: {
-    gap: 4
-  },
-  largeGap: {
-    gap: 8
-  }
-});
-//# sourceMappingURL=GameGrid.js.map
+"use strict";import React,{useMemo}from 'react';import{View,StyleSheet,Dimensions}from 'react-native';import{GAME_CONFIG}from "../WhackAMoleService.js";import{GameHole}from "./GameHole.js";import{jsx as _jsx}from "react/jsx-runtime";const MemoizedGameHole = React.memo(GameHole,(prevProps,nextProps)=>{return prevProps.hole.id === nextProps.hole.id && prevProps.hole.isActive === nextProps.hole.isActive && prevProps.moleAnimation === nextProps.moleAnimation && prevProps.hitAnimation === nextProps.hitAnimation && prevProps.onPress === nextProps.onPress && prevProps.holeSize === nextProps.holeSize;});export const GameGrid = React.memo(({holes,moleAnimations,hitAnimations,onHolePress,gridSize = 3})=>{const responsiveDimensions = useMemo(()=>{const{width:screenWidth}= Dimensions.get('window');const maxContainerWidth = Math.min(screenWidth * 0.9,600);const availableWidth = maxContainerWidth - gridSize * 8;const maxHoleSize = availableWidth / gridSize;const holeSize = Math.max(Math.min(maxHoleSize,GAME_CONFIG.HOLE_SIZE),60);return{containerWidth:maxContainerWidth,holeSize,gridWidth:gridSize *(holeSize + 8)};},[gridSize]);const gridStyle = useMemo(()=>({width:responsiveDimensions.gridWidth,maxWidth:responsiveDimensions.containerWidth}),[responsiveDimensions]);const paddingStyle = useMemo(()=> gridSize === 4 ? styles.smallPadding:styles.largePadding,[gridSize]);const gapStyle = useMemo(()=> gridSize === 4 ? styles.smallGap:styles.largeGap,[gridSize]);return _jsx(View,{style:[styles.gameArea,paddingStyle],children:_jsx(View,{style:[styles.gameGrid,gapStyle,gridStyle],children:holes.map((hole,index)=>{const moleAnimation = moleAnimations[index];const hitAnimation = hitAnimations[index];if(!moleAnimation || !hitAnimation){return null;}return _jsx(MemoizedGameHole,{hole:hole,moleAnimation:moleAnimation,hitAnimation:hitAnimation,onPress:onHolePress,holeSize:responsiveDimensions.holeSize},hole.id);})})});});const styles = StyleSheet.create({gameArea:{flex:1,justifyContent:'center',alignItems:'center'},smallPadding:{paddingHorizontal:16,paddingVertical:20},largePadding:{paddingVertical:20},gameGrid:{flexDirection:'row',flexWrap:'wrap',justifyContent:'center',alignItems:'center'},smallGap:{gap:4},largeGap:{gap:8}});

package/lib/module/games/whack-a-mole/components/GameHole.js

@@ -1,196 +1 @@
-"use strict";
-
-import React, { useCallback, useMemo } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, withSequence, withTiming, interpolate, Extrapolation } from 'react-native-reanimated';
-import { Canvas as SkiaCanvas, Circle, Group } from '@shopify/react-native-skia';
-import { GAME_CONFIG, COLORS } from "../WhackAMoleService.js";
-import { MoleCharacter } from "./MoleCharacter.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const GameHole = /*#__PURE__*/React.memo(({
-  hole,
-  moleAnimation,
-  hitAnimation,
-  onPress,
-  holeSize = GAME_CONFIG.HOLE_SIZE
-}) => {
-  // Enhanced animation values for whack effect
-  const whackScale = useSharedValue(1);
-  const whackRotation = useSharedValue(0);
-  const whackBounce = useSharedValue(0);
-
-  // Memoize animation constants to prevent recalculation
-  const animationConstants = useMemo(() => ({
-    translateYRange: [holeSize * 0.3, holeSize * 0.1, -holeSize * 0.05],
-    scaleRange: [0.3, 0.8, 1],
-    maxTranslateY: -holeSize * 0.1
-  }), [holeSize]);
-  const moleStyle = useAnimatedStyle(() => {
-    // Mole emerges from deep inside the hole
-    const translateY = interpolate(moleAnimation.value, [0, 0.3, 1], animationConstants.translateYRange, Extrapolation.CLAMP);
-
-    // Mole grows as it emerges from the hole
-    const emergenceScale = interpolate(moleAnimation.value, [0, 0.4, 1], animationConstants.scaleRange, Extrapolation.CLAMP);
-
-    // Constrained bounce - keep mole within hole area
-    const bounceY = whackBounce.value * -8;
-    const finalTranslateY = Math.max(translateY + bounceY, animationConstants.maxTranslateY);
-    return {
-      transform: [{
-        translateY: finalTranslateY
-      }, {
-        scale: whackScale.value * emergenceScale
-      }, {
-        rotate: `${whackRotation.value}deg`
-      }],
-      opacity: moleAnimation.value
-    };
-  }, [animationConstants]);
-  const hitStyle = useAnimatedStyle(() => {
-    const scale = 1 + hitAnimation.value * 0.5;
-    return {
-      transform: [{
-        scale
-      }],
-      opacity: hitAnimation.value
-    };
-  });
-
-  // Memoize style calculations to prevent re-computation on every render
-  const holeContainerStyle = useMemo(() => [styles.holeContainer, {
-    width: holeSize,
-    height: holeSize
-  }], [holeSize]);
-  const holeStyle = useMemo(() => [styles.hole, {
-    width: holeSize * 0.8,
-    height: holeSize * 0.8
-  }], [holeSize]);
-  const hitEffectContainerStyle = useMemo(() => [styles.hitEffectContainer, {
-    width: holeSize,
-    height: holeSize
-  }], [holeSize]);
-  const moleContainerStyle = useMemo(() => [styles.moleContainer, {
-    bottom: holeSize * 0.1,
-    zIndex: 10
-  }], [holeSize]);
-
-  // Optimized hit handler with memoized hole state check
-  const handlePress = useCallback(() => {
-    // Only trigger whack animation if mole is active (optimized check)
-    if (hole.isActive || moleAnimation.value > 0) {
-      // Whack animation sequence - constrained to hole area
-      whackScale.value = withSequence(withSpring(1.3, {
-        damping: 8,
-        stiffness: 400
-      }), withSpring(0.8, {
-        damping: 10,
-        stiffness: 300
-      }), withTiming(0, {
-        duration: 400
-      }));
-      whackRotation.value = withSequence(withSpring(15, {
-        damping: 10,
-        stiffness: 300
-      }), withSpring(-8, {
-        damping: 12,
-        stiffness: 250
-      }), withTiming(0, {
-        duration: 300
-      }));
-      whackBounce.value = withSequence(withSpring(1, {
-        damping: 8,
-        stiffness: 400
-      }), withSpring(0, {
-        damping: 12,
-        stiffness: 300
-      }));
-
-      // Delay hit effect to let mole animation show first
-      setTimeout(() => {
-        // Trigger hit effect after mole starts reacting
-        onPress(hole.id);
-      }, 150);
-
-      // Reset animations after whack sequence
-      setTimeout(() => {
-        whackScale.value = 1;
-        whackRotation.value = 0;
-        whackBounce.value = 0;
-      }, 800);
-    } else {
-      // No mole present, just trigger normal hit
-      onPress(hole.id);
-    }
-  }, [hole.id, hole.isActive, onPress, moleAnimation]);
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: holeContainerStyle,
-    onPress: handlePress,
-    activeOpacity: 0.8,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: holeStyle
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [hitEffectContainerStyle, hitStyle],
-      children: /*#__PURE__*/_jsx(SkiaCanvas, {
-        style: {
-          width: holeSize,
-          height: holeSize
-        },
-        children: /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Circle, {
-            cx: holeSize / 2,
-            cy: holeSize / 2,
-            r: holeSize * 0.25,
-            color: COLORS.HIT_EFFECT_OUTER
-          }), /*#__PURE__*/_jsx(Circle, {
-            cx: holeSize / 2,
-            cy: holeSize / 2,
-            r: holeSize * 0.17,
-            color: COLORS.HIT_EFFECT_INNER
-          })]
-        })
-      })
-    }), hole.isActive && /*#__PURE__*/_jsx(Animated.View, {
-      style: [moleContainerStyle, moleStyle],
-      children: /*#__PURE__*/_jsx(MoleCharacter, {
-        size: holeSize * 0.6
-      })
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  holeContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative'
-  },
-  hole: {
-    backgroundColor: '#92400e',
-    borderWidth: 4,
-    borderColor: '#a16207',
-    borderRadius: 9999,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
-  },
-  moleContainer: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 10,
-    elevation: 10
-  },
-  hitEffectContainer: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none',
-    zIndex: 1,
-    elevation: 1
-  }
-});
-//# sourceMappingURL=GameHole.js.map
+"use strict";import React,{useCallback,useMemo}from 'react';import{View,TouchableOpacity,StyleSheet}from 'react-native';import Animated,{useSharedValue,useAnimatedStyle,withSpring,withSequence,withTiming,interpolate,Extrapolation}from 'react-native-reanimated';import{Canvas as SkiaCanvas,Circle,Group}from '@shopify/react-native-skia';import{GAME_CONFIG,COLORS}from "../WhackAMoleService.js";import{MoleCharacter}from "./MoleCharacter.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const GameHole = React.memo(({hole,moleAnimation,hitAnimation,onPress,holeSize = GAME_CONFIG.HOLE_SIZE})=>{const whackScale = useSharedValue(1);const whackRotation = useSharedValue(0);const whackBounce = useSharedValue(0);const animationConstants = useMemo(()=>({translateYRange:[holeSize * 0.3,holeSize * 0.1,-holeSize * 0.05],scaleRange:[0.3,0.8,1],maxTranslateY:-holeSize * 0.1}),[holeSize]);const moleStyle = useAnimatedStyle(()=>{const translateY = interpolate(moleAnimation.value,[0,0.3,1],animationConstants.translateYRange,Extrapolation.CLAMP);const emergenceScale = interpolate(moleAnimation.value,[0,0.4,1],animationConstants.scaleRange,Extrapolation.CLAMP);const bounceY = whackBounce.value * -8;const finalTranslateY = Math.max(translateY + bounceY,animationConstants.maxTranslateY);return{transform:[{translateY:finalTranslateY},{scale:whackScale.value * emergenceScale},{rotate:`${whackRotation.value}deg`}],opacity:moleAnimation.value};},[animationConstants]);const hitStyle = useAnimatedStyle(()=>{const scale = 1 + hitAnimation.value * 0.5;return{transform:[{scale}],opacity:hitAnimation.value};});const holeContainerStyle = useMemo(()=> [styles.holeContainer,{width:holeSize,height:holeSize}],[holeSize]);const holeStyle = useMemo(()=> [styles.hole,{width:holeSize * 0.8,height:holeSize * 0.8}],[holeSize]);const hitEffectContainerStyle = useMemo(()=> [styles.hitEffectContainer,{width:holeSize,height:holeSize}],[holeSize]);const moleContainerStyle = useMemo(()=> [styles.moleContainer,{bottom:holeSize * 0.1,zIndex:10}],[holeSize]);const handlePress = useCallback(()=>{if(hole.isActive || moleAnimation.value > 0){whackScale.value = withSequence(withSpring(1.3,{damping:8,stiffness:400}),withSpring(0.8,{damping:10,stiffness:300}),withTiming(0,{duration:400}));whackRotation.value = withSequence(withSpring(15,{damping:10,stiffness:300}),withSpring(-8,{damping:12,stiffness:250}),withTiming(0,{duration:300}));whackBounce.value = withSequence(withSpring(1,{damping:8,stiffness:400}),withSpring(0,{damping:12,stiffness:300}));setTimeout(()=>{onPress(hole.id);},150);setTimeout(()=>{whackScale.value = 1;whackRotation.value = 0;whackBounce.value = 0;},800);}else{onPress(hole.id);}},[hole.id,hole.isActive,onPress,moleAnimation]);return _jsxs(TouchableOpacity,{style:holeContainerStyle,onPress:handlePress,activeOpacity:0.8,children:[_jsx(View,{style:holeStyle}),_jsx(Animated.View,{style:[hitEffectContainerStyle,hitStyle],children:_jsx(SkiaCanvas,{style:{width:holeSize,height:holeSize},children:_jsxs(Group,{children:[_jsx(Circle,{cx:holeSize / 2,cy:holeSize / 2,r:holeSize * 0.25,color:COLORS.HIT_EFFECT_OUTER}),_jsx(Circle,{cx:holeSize / 2,cy:holeSize / 2,r:holeSize * 0.17,color:COLORS.HIT_EFFECT_INNER})]})})}),hole.isActive && _jsx(Animated.View,{style:[moleContainerStyle,moleStyle],children:_jsx(MoleCharacter,{size:holeSize * 0.6})})]});});const styles = StyleSheet.create({holeContainer:{justifyContent:'center',alignItems:'center',position:'relative'},hole:{backgroundColor:'#92400e',borderWidth:4,borderColor:'#a16207',borderRadius:9999,shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5},moleContainer:{position:'absolute',justifyContent:'center',alignItems:'center',zIndex:10,elevation:10},hitEffectContainer:{position:'absolute',justifyContent:'center',alignItems:'center',pointerEvents:'none',zIndex:1,elevation:1}});

package/lib/module/games/whack-a-mole/components/MoleCharacter.js

@@ -1,241 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MoleCharacter = /*#__PURE__*/React.memo(({
-  size
-}) => {
-  const moleSize = size * 0.8;
-  const styles = createStyles(moleSize);
-
-  // Static mole - no animations for better performance
-
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, {
-      width: size,
-      height: size
-    }],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.body,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.head,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.leftEar
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.rightEar
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.leftInnerEar
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.rightInnerEar
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.leftEye,
-          children: /*#__PURE__*/_jsx(View, {
-            style: styles.eyeHighlight
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.rightEye,
-          children: /*#__PURE__*/_jsx(View, {
-            style: styles.eyeHighlight
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.nose
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.mouth,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.leftMouth
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.rightMouth
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.leftWhisker1
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.leftWhisker2
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.rightWhisker1
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.rightWhisker2
-      })]
-    })
-  });
-});
-const createStyles = moleSize => StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  body: {
-    width: moleSize,
-    height: moleSize * 0.9,
-    backgroundColor: '#FF8C42',
-    borderRadius: moleSize * 0.4,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  head: {
-    width: moleSize * 0.8,
-    height: moleSize * 0.7,
-    backgroundColor: '#FFA366',
-    borderRadius: moleSize * 0.35,
-    position: 'relative',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: -moleSize * 0.1
-  },
-  leftEar: {
-    position: 'absolute',
-    top: -moleSize * 0.15,
-    left: moleSize * 0.15,
-    width: moleSize * 0.25,
-    height: moleSize * 0.25,
-    backgroundColor: '#FF8C42',
-    borderRadius: moleSize * 0.125,
-    transform: [{
-      rotate: '-30deg'
-    }]
-  },
-  rightEar: {
-    position: 'absolute',
-    top: -moleSize * 0.15,
-    right: moleSize * 0.15,
-    width: moleSize * 0.25,
-    height: moleSize * 0.25,
-    backgroundColor: '#FF8C42',
-    borderRadius: moleSize * 0.125,
-    transform: [{
-      rotate: '30deg'
-    }]
-  },
-  leftInnerEar: {
-    position: 'absolute',
-    top: -moleSize * 0.12,
-    left: moleSize * 0.18,
-    width: moleSize * 0.15,
-    height: moleSize * 0.15,
-    backgroundColor: '#FF6B1A',
-    borderRadius: moleSize * 0.075,
-    transform: [{
-      rotate: '-30deg'
-    }]
-  },
-  rightInnerEar: {
-    position: 'absolute',
-    top: -moleSize * 0.12,
-    right: moleSize * 0.18,
-    width: moleSize * 0.15,
-    height: moleSize * 0.15,
-    backgroundColor: '#FF6B1A',
-    borderRadius: moleSize * 0.075,
-    transform: [{
-      rotate: '30deg'
-    }]
-  },
-  leftEye: {
-    position: 'absolute',
-    top: moleSize * 0.15,
-    left: moleSize * 0.2,
-    width: moleSize * 0.12,
-    height: moleSize * 0.15,
-    backgroundColor: '#000000',
-    borderRadius: moleSize * 0.075,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  rightEye: {
-    position: 'absolute',
-    top: moleSize * 0.15,
-    right: moleSize * 0.2,
-    width: moleSize * 0.12,
-    height: moleSize * 0.15,
-    backgroundColor: '#000000',
-    borderRadius: moleSize * 0.075,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  eyeHighlight: {
-    width: moleSize * 0.04,
-    height: moleSize * 0.06,
-    backgroundColor: '#FFFFFF',
-    borderRadius: moleSize * 0.02
-  },
-  nose: {
-    position: 'absolute',
-    top: moleSize * 0.28,
-    width: moleSize * 0.08,
-    height: moleSize * 0.06,
-    backgroundColor: '#FF1493',
-    borderRadius: moleSize * 0.04
-  },
-  mouth: {
-    position: 'absolute',
-    top: moleSize * 0.35,
-    width: moleSize * 0.2,
-    height: moleSize * 0.1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  leftMouth: {
-    position: 'absolute',
-    left: 0,
-    width: moleSize * 0.08,
-    height: 2,
-    backgroundColor: '#000000',
-    borderRadius: 1,
-    transform: [{
-      rotate: '20deg'
-    }]
-  },
-  rightMouth: {
-    position: 'absolute',
-    right: 0,
-    width: moleSize * 0.08,
-    height: 2,
-    backgroundColor: '#000000',
-    borderRadius: 1,
-    transform: [{
-      rotate: '-20deg'
-    }]
-  },
-  leftWhisker1: {
-    position: 'absolute',
-    top: moleSize * 0.35,
-    left: -moleSize * 0.15,
-    width: moleSize * 0.2,
-    height: 1,
-    backgroundColor: '#000000'
-  },
-  leftWhisker2: {
-    position: 'absolute',
-    top: moleSize * 0.4,
-    left: -moleSize * 0.15,
-    width: moleSize * 0.18,
-    height: 1,
-    backgroundColor: '#000000'
-  },
-  rightWhisker1: {
-    position: 'absolute',
-    top: moleSize * 0.35,
-    right: -moleSize * 0.15,
-    width: moleSize * 0.2,
-    height: 1,
-    backgroundColor: '#000000'
-  },
-  rightWhisker2: {
-    position: 'absolute',
-    top: moleSize * 0.4,
-    right: -moleSize * 0.15,
-    width: moleSize * 0.18,
-    height: 1,
-    backgroundColor: '#000000'
-  }
-});
-//# sourceMappingURL=MoleCharacter.js.map
+"use strict";import React from 'react';import{View,StyleSheet}from 'react-native';import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const MoleCharacter = React.memo(({size})=>{const moleSize = size * 0.8;const styles = createStyles(moleSize);return _jsx(View,{style:[styles.container,{width:size,height:size}],children:_jsxs(View,{style:styles.body,children:[_jsxs(View,{style:styles.head,children:[_jsx(View,{style:styles.leftEar}),_jsx(View,{style:styles.rightEar}),_jsx(View,{style:styles.leftInnerEar}),_jsx(View,{style:styles.rightInnerEar}),_jsx(View,{style:styles.leftEye,children:_jsx(View,{style:styles.eyeHighlight})}),_jsx(View,{style:styles.rightEye,children:_jsx(View,{style:styles.eyeHighlight})}),_jsx(View,{style:styles.nose}),_jsxs(View,{style:styles.mouth,children:[_jsx(View,{style:styles.leftMouth}),_jsx(View,{style:styles.rightMouth})]})]}),_jsx(View,{style:styles.leftWhisker1}),_jsx(View,{style:styles.leftWhisker2}),_jsx(View,{style:styles.rightWhisker1}),_jsx(View,{style:styles.rightWhisker2})]})});});const createStyles = moleSize => StyleSheet.create({container:{justifyContent:'center',alignItems:'center'},body:{width:moleSize,height:moleSize * 0.9,backgroundColor:'#FF8C42',borderRadius:moleSize * 0.4,justifyContent:'center',alignItems:'center',shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.3,shadowRadius:4,elevation:5},head:{width:moleSize * 0.8,height:moleSize * 0.7,backgroundColor:'#FFA366',borderRadius:moleSize * 0.35,position:'relative',justifyContent:'center',alignItems:'center',marginTop:-moleSize * 0.1},leftEar:{position:'absolute',top:-moleSize * 0.15,left:moleSize * 0.15,width:moleSize * 0.25,height:moleSize * 0.25,backgroundColor:'#FF8C42',borderRadius:moleSize * 0.125,transform:[{rotate:'-30deg'}]},rightEar:{position:'absolute',top:-moleSize * 0.15,right:moleSize * 0.15,width:moleSize * 0.25,height:moleSize * 0.25,backgroundColor:'#FF8C42',borderRadius:moleSize * 0.125,transform:[{rotate:'30deg'}]},leftInnerEar:{position:'absolute',top:-moleSize * 0.12,left:moleSize * 0.18,width:moleSize * 0.15,height:moleSize * 0.15,backgroundColor:'#FF6B1A',borderRadius:moleSize * 0.075,transform:[{rotate:'-30deg'}]},rightInnerEar:{position:'absolute',top:-moleSize * 0.12,right:moleSize * 0.18,width:moleSize * 0.15,height:moleSize * 0.15,backgroundColor:'#FF6B1A',borderRadius:moleSize * 0.075,transform:[{rotate:'30deg'}]},leftEye:{position:'absolute',top:moleSize * 0.15,left:moleSize * 0.2,width:moleSize * 0.12,height:moleSize * 0.15,backgroundColor:'#000000',borderRadius:moleSize * 0.075,justifyContent:'center',alignItems:'center'},rightEye:{position:'absolute',top:moleSize * 0.15,right:moleSize * 0.2,width:moleSize * 0.12,height:moleSize * 0.15,backgroundColor:'#000000',borderRadius:moleSize * 0.075,justifyContent:'center',alignItems:'center'},eyeHighlight:{width:moleSize * 0.04,height:moleSize * 0.06,backgroundColor:'#FFFFFF',borderRadius:moleSize * 0.02},nose:{position:'absolute',top:moleSize * 0.28,width:moleSize * 0.08,height:moleSize * 0.06,backgroundColor:'#FF1493',borderRadius:moleSize * 0.04},mouth:{position:'absolute',top:moleSize * 0.35,width:moleSize * 0.2,height:moleSize * 0.1,justifyContent:'center',alignItems:'center'},leftMouth:{position:'absolute',left:0,width:moleSize * 0.08,height:2,backgroundColor:'#000000',borderRadius:1,transform:[{rotate:'20deg'}]},rightMouth:{position:'absolute',right:0,width:moleSize * 0.08,height:2,backgroundColor:'#000000',borderRadius:1,transform:[{rotate:'-20deg'}]},leftWhisker1:{position:'absolute',top:moleSize * 0.35,left:-moleSize * 0.15,width:moleSize * 0.2,height:1,backgroundColor:'#000000'},leftWhisker2:{position:'absolute',top:moleSize * 0.4,left:-moleSize * 0.15,width:moleSize * 0.18,height:1,backgroundColor:'#000000'},rightWhisker1:{position:'absolute',top:moleSize * 0.35,right:-moleSize * 0.15,width:moleSize * 0.2,height:1,backgroundColor:'#000000'},rightWhisker2:{position:'absolute',top:moleSize * 0.4,right:-moleSize * 0.15,width:moleSize * 0.18,height:1,backgroundColor:'#000000'}});

package/lib/module/games/whack-a-mole/components/ScoreBoard.js

@@ -1,67 +1 @@
-"use strict";
-
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { ScoreBoardContainer } from "../../../helpers/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ScoreBoard = /*#__PURE__*/React.memo(({
-  score,
-  timeLeft,
-  offset = 0
-}) => {
-  return /*#__PURE__*/_jsx(ScoreBoardContainer, {
-    offset: offset,
-    backgroundColor: "rgba(22, 101, 52, 0.4)",
-    borderColor: "rgba(255, 255, 255, 0.3)",
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.scoreBoard,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.scoreSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Score"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.scoreValue,
-          children: score
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.scoreSection,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.scoreLabel,
-          children: "Time"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.timeValue,
-          children: timeLeft
-        })]
-      })]
-    })
-  });
-});
-const styles = StyleSheet.create({
-  scoreBoard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  scoreSection: {
-    alignItems: 'center',
-    flex: 1
-  },
-  scoreLabel: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#ffffff',
-    marginBottom: 4
-  },
-  scoreValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#92400e'
-  },
-  timeValue: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    color: '#92400e'
-  }
-});
-//# sourceMappingURL=ScoreBoard.js.map
+"use strict";import React from 'react';import{View,Text,StyleSheet}from 'react-native';import{ScoreBoardContainer}from "../../../helpers/index.js";import{jsx as _jsx,jsxs as _jsxs}from "react/jsx-runtime";export const ScoreBoard = React.memo(({score,timeLeft,offset = 0})=>{const formatTime = seconds =>{const mins = Math.floor(seconds / 60);const secs = seconds % 60;return `${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;};return _jsx(ScoreBoardContainer,{offset:offset,backgroundColor:"rgba(22,101,52,0.4)",borderColor:"rgba(255,255,255,0.3)",children:_jsxs(View,{style:styles.scoreBoard,children:[_jsxs(View,{style:styles.scoreSection,children:[_jsx(Text,{style:styles.scoreLabel,children:"Score"}),_jsx(Text,{style:styles.scoreValue,children:score})]}),_jsxs(View,{style:styles.scoreSection,children:[_jsx(Text,{style:styles.scoreLabel,children:"Time"}),_jsx(Text,{style:styles.timeValue,children:formatTime(timeLeft)})]})]})});});const styles = StyleSheet.create({scoreBoard:{flexDirection:'row',justifyContent:'space-between',alignItems:'center'},scoreSection:{alignItems:'center',flex:1},scoreLabel:{fontSize:16,fontWeight:'bold',color:'#ffffff',marginBottom:4},scoreValue:{fontSize:25,fontWeight:'bold',color:'#92400e'},timeValue:{fontSize:25,fontWeight:'bold',color:'#92400e'}});

package/lib/module/games/whack-a-mole/components/ScoreBoard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","StyleSheet","ScoreBoardContainer","jsx","_jsx","jsxs","_jsxs","ScoreBoard","memo","score","timeLeft","offset","backgroundColor","borderColor","children","style","styles","scoreBoard","scoreSection","scoreLabel","scoreValue","timeValue","create","flexDirection","justifyContent","alignItems","flex","fontSize","fontWeight","color","marginBottom"],"sourceRoot":"../../../../../src","sources":["games/whack-a-mole/components/ScoreBoard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,mBAAmB,QAAQ,2BAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQvD,OAAO,MAAMC,UAAqC,gBAAGT,KAAK,CAACU,IAAI,CAAC,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM,GAAG;AAAE,CAAC,KAAK;EACnG,oBACEP,IAAA,CAACF,mBAAmB;IAClBS,MAAM,EAAEA,MAAO;IACfC,eAAe,EAAC,wBAAwB;IACxCC,WAAW,EAAC,0BAA0B;IAAAC,QAAA,eAEtCR,KAAA,CAACP,IAAI;MAACgB,KAAK,EAAEC,MAAM,CAACC,UAAW;MAAAH,QAAA,gBAC/BR,KAAA,CAACP,IAAI;QAACgB,KAAK,EAAEC,MAAM,CAACE,YAAa;QAAAJ,QAAA,gBAC/BV,IAAA,CAACJ,IAAI;UAACe,KAAK,EAAEC,MAAM,CAACG,UAAW;UAAAL,QAAA,EAAC;QAAK,CAAM,CAAC,eAC5CV,IAAA,CAACJ,IAAI;UAACe,KAAK,EAAEC,MAAM,CAACI,UAAW;UAAAN,QAAA,EAAEL;QAAK,CAAO,CAAC;MAAA,CAC1C,CAAC,eACPH,KAAA,CAACP,IAAI;QAACgB,KAAK,EAAEC,MAAM,CAACE,YAAa;QAAAJ,QAAA,gBAC/BV,IAAA,CAACJ,IAAI;UAACe,KAAK,EAAEC,MAAM,CAACG,UAAW;UAAAL,QAAA,EAAC;QAAI,CAAM,CAAC,eAC3CV,IAAA,CAACJ,IAAI;UAACe,KAAK,EAAEC,MAAM,CAACK,SAAU;UAAAP,QAAA,EAAEJ;QAAQ,CAAO,CAAC;MAAA,CAC5C,CAAC;IAAA,CACH;EAAC,CACc,CAAC;AAE1B,CAAC,CAAC;AAEF,MAAMM,MAAM,GAAGf,UAAU,CAACqB,MAAM,CAAC;EAC/BL,UAAU,EAAE;IACVM,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE;EACd,CAAC;EACDP,YAAY,EAAE;IACZO,UAAU,EAAE,QAAQ;IACpBC,IAAI,EAAE;EACR,CAAC;EACDP,UAAU,EAAE;IACVQ,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,SAAS;IAChBC,YAAY,EAAE;EAChB,CAAC;EACDV,UAAU,EAAE;IACVO,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE;EACT,CAAC;EACDR,SAAS,EAAE;IACTM,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","View","Text","StyleSheet","ScoreBoardContainer","jsx","_jsx","jsxs","_jsxs","ScoreBoard","memo","score","timeLeft","offset","formatTime","seconds","mins","Math","floor","secs","toString","padStart","backgroundColor","borderColor","children","style","styles","scoreBoard","scoreSection","scoreLabel","scoreValue","timeValue","create","flexDirection","justifyContent","alignItems","flex","fontSize","fontWeight","color","marginBottom"],"sourceRoot":"../../../../../src","sources":["games/whack-a-mole/components/ScoreBoard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,mBAAmB,QAAQ,2BAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQvD,OAAO,MAAMC,UAAqC,gBAAGT,KAAK,CAACU,IAAI,CAAC,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM,GAAG;AAAE,CAAC,KAAK;EACnG;EACA,MAAMC,UAAU,GAAIC,OAAe,IAAa;IAC9C,MAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,OAAO,GAAG,EAAE,CAAC;IACrC,MAAMI,IAAI,GAAGJ,OAAO,GAAG,EAAE;IACzB,OAAO,GAAGC,IAAI,CAACI,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAIF,IAAI,CAACC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;EAClF,CAAC;EAED,oBACEf,IAAA,CAACF,mBAAmB;IAClBS,MAAM,EAAEA,MAAO;IACfS,eAAe,EAAC,wBAAwB;IACxCC,WAAW,EAAC,0BAA0B;IAAAC,QAAA,eAEtChB,KAAA,CAACP,IAAI;MAACwB,KAAK,EAAEC,MAAM,CAACC,UAAW;MAAAH,QAAA,gBAC/BhB,KAAA,CAACP,IAAI;QAACwB,KAAK,EAAEC,MAAM,CAACE,YAAa;QAAAJ,QAAA,gBAC/BlB,IAAA,CAACJ,IAAI;UAACuB,KAAK,EAAEC,MAAM,CAACG,UAAW;UAAAL,QAAA,EAAC;QAAK,CAAM,CAAC,eAC5ClB,IAAA,CAACJ,IAAI;UAACuB,KAAK,EAAEC,MAAM,CAACI,UAAW;UAAAN,QAAA,EAAEb;QAAK,CAAO,CAAC;MAAA,CAC1C,CAAC,eACPH,KAAA,CAACP,IAAI;QAACwB,KAAK,EAAEC,MAAM,CAACE,YAAa;QAAAJ,QAAA,gBAC/BlB,IAAA,CAACJ,IAAI;UAACuB,KAAK,EAAEC,MAAM,CAACG,UAAW;UAAAL,QAAA,EAAC;QAAI,CAAM,CAAC,eAC3ClB,IAAA,CAACJ,IAAI;UAACuB,KAAK,EAAEC,MAAM,CAACK,SAAU;UAAAP,QAAA,EAAEV,UAAU,CAACF,QAAQ;QAAC,CAAO,CAAC;MAAA,CACxD,CAAC;IAAA,CACH;EAAC,CACc,CAAC;AAE1B,CAAC,CAAC;AAEF,MAAMc,MAAM,GAAGvB,UAAU,CAAC6B,MAAM,CAAC;EAC/BL,UAAU,EAAE;IACVM,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE;EACd,CAAC;EACDP,YAAY,EAAE;IACZO,UAAU,EAAE,QAAQ;IACpBC,IAAI,EAAE;EACR,CAAC;EACDP,UAAU,EAAE;IACVQ,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,SAAS;IAChBC,YAAY,EAAE;EAChB,CAAC;EACDV,UAAU,EAAE;IACVO,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE;EACT,CAAC;EACDR,SAAS,EAAE;IACTM,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE;EACT;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/games/whack-a-mole/components/index.js

@@ -1,8 +1 @@
-"use strict";
-
-export { ScoreBoard } from "./ScoreBoard.js";
-export { GameHole } from "./GameHole.js";
-export { GameGrid } from "./GameGrid.js";
-export { MoleCharacter } from "./MoleCharacter.js";
-export { GameBackground } from "./GameBackground.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{ScoreBoard}from "./ScoreBoard.js";export{GameHole}from "./GameHole.js";export{GameGrid}from "./GameGrid.js";export{MoleCharacter}from "./MoleCharacter.js";export{GameBackground}from "./GameBackground.js";