react-native-games 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/README.md +80 -368
  2. package/lib/module/games/balloon-blaster/BalloonBlaster.js +1 -167
  3. package/lib/module/games/balloon-blaster/BalloonBlaster.js.map +1 -1
  4. package/lib/module/games/balloon-blaster/BalloonBlasterConstants.js +1 -182
  5. package/lib/module/games/balloon-blaster/BalloonBlasterConstants.js.map +1 -1
  6. package/lib/module/games/balloon-blaster/BalloonBlasterService.js +1 -318
  7. package/lib/module/games/balloon-blaster/BalloonBlasterStore.js +1 -183
  8. package/lib/module/games/balloon-blaster/components/BalloonComponent.js +1 -237
  9. package/lib/module/games/balloon-blaster/components/GameArea.js +1 -156
  10. package/lib/module/games/balloon-blaster/components/GameBackground.js +1 -476
  11. package/lib/module/games/balloon-blaster/components/ScoreBoard.js +1 -112
  12. package/lib/module/games/balloon-blaster/components/ScoreBoard.js.map +1 -1
  13. package/lib/module/games/balloon-blaster/components/index.js +1 -7
  14. package/lib/module/games/candy-crush/CandyCrush.js +1 -131
  15. package/lib/module/games/candy-crush/CandyCrush.js.map +1 -1
  16. package/lib/module/games/candy-crush/CandyCrushConstants.js +1 -125
  17. package/lib/module/games/candy-crush/CandyCrushConstants.js.map +1 -1
  18. package/lib/module/games/candy-crush/CandyCrushService.js +1 -370
  19. package/lib/module/games/candy-crush/CandyCrushStore.js +1 -303
  20. package/lib/module/games/candy-crush/components/CandyItem.js +1 -191
  21. package/lib/module/games/candy-crush/components/GameBackground.js +1 -85
  22. package/lib/module/games/candy-crush/components/GameGrid.js +1 -314
  23. package/lib/module/games/candy-crush/components/ScoreBoard.js +1 -79
  24. package/lib/module/games/candy-crush/components/index.js +1 -7
  25. package/lib/module/games/candy-crush/index.js +1 -6
  26. package/lib/module/games/colors-sort/ColorsSort.js +1 -143
  27. package/lib/module/games/colors-sort/ColorsSort.js.map +1 -1
  28. package/lib/module/games/colors-sort/ColorsSortConstants.js +1 -72
  29. package/lib/module/games/colors-sort/ColorsSortConstants.js.map +1 -1
  30. package/lib/module/games/colors-sort/ColorsSortService.js +1 -255
  31. package/lib/module/games/colors-sort/ColorsSortStore.js +1 -257
  32. package/lib/module/games/colors-sort/ColorsSortStore.js.map +1 -1
  33. package/lib/module/games/colors-sort/components/ColorContainer.js +1 -140
  34. package/lib/module/games/colors-sort/components/GameBackground.js +1 -135
  35. package/lib/module/games/colors-sort/components/ScoreBoard.js +1 -70
  36. package/lib/module/games/colors-sort/components/index.js +1 -6
  37. package/lib/module/games/dino-jump/DinoJump.js +1 -209
  38. package/lib/module/games/dino-jump/DinoJump.js.map +1 -1
  39. package/lib/module/games/dino-jump/DinoJumpConstants.js +1 -189
  40. package/lib/module/games/dino-jump/DinoJumpConstants.js.map +1 -1
  41. package/lib/module/games/dino-jump/DinoJumpService.js +1 -270
  42. package/lib/module/games/dino-jump/DinoJumpStore.js +1 -381
  43. package/lib/module/games/dino-jump/components/DinoSprite.js +1 -418
  44. package/lib/module/games/dino-jump/components/DinoSprite.js.map +1 -1
  45. package/lib/module/games/dino-jump/components/GameArea.js +1 -68
  46. package/lib/module/games/dino-jump/components/GameBackground.js +1 -444
  47. package/lib/module/games/dino-jump/components/ObstacleSprite.js +1 -306
  48. package/lib/module/games/dino-jump/components/ScoreBoard.js +1 -105
  49. package/lib/module/games/dino-jump/components/ScoreBoard.js.map +1 -1
  50. package/lib/module/games/dino-jump/components/StarSprite.js +1 -45
  51. package/lib/module/games/dino-jump/components/index.js +1 -9
  52. package/lib/module/games/flappy-bird/FlappyBird.js +1 -126
  53. package/lib/module/games/flappy-bird/FlappyBird.js.map +1 -1
  54. package/lib/module/games/flappy-bird/FlappyBirdConstants.js +1 -90
  55. package/lib/module/games/flappy-bird/FlappyBirdConstants.js.map +1 -1
  56. package/lib/module/games/flappy-bird/FlappyBirdStore.js +1 -300
  57. package/lib/module/games/flappy-bird/components/Bird.js +1 -87
  58. package/lib/module/games/flappy-bird/components/GameArea.js +1 -87
  59. package/lib/module/games/flappy-bird/components/GameBackground.js +1 -79
  60. package/lib/module/games/flappy-bird/components/Pipes.js +1 -172
  61. package/lib/module/games/flappy-bird/components/ScoreBoard.js +1 -73
  62. package/lib/module/games/flappy-bird/components/index.js +1 -8
  63. package/lib/module/games/fruit-merger/FruitMerger.js +1 -120
  64. package/lib/module/games/fruit-merger/FruitMerger.js.map +1 -1
  65. package/lib/module/games/fruit-merger/FruitMergerConstants.js +1 -119
  66. package/lib/module/games/fruit-merger/FruitMergerConstants.js.map +1 -1
  67. package/lib/module/games/fruit-merger/FruitMergerService.js +1 -13
  68. package/lib/module/games/fruit-merger/FruitMergerStore.js +1 -315
  69. package/lib/module/games/fruit-merger/components/FruitItem.js +1 -102
  70. package/lib/module/games/fruit-merger/components/GameArea.js +1 -103
  71. package/lib/module/games/fruit-merger/components/GameBackground.js +1 -498
  72. package/lib/module/games/fruit-merger/components/ScoreBoard.js +1 -58
  73. package/lib/module/games/fruit-merger/components/index.js +1 -7
  74. package/lib/module/games/fruit-ninja/FruitNinja.js +1 -134
  75. package/lib/module/games/fruit-ninja/FruitNinja.js.map +1 -1
  76. package/lib/module/games/fruit-ninja/FruitNinjaConstants.js +1 -148
  77. package/lib/module/games/fruit-ninja/FruitNinjaConstants.js.map +1 -1
  78. package/lib/module/games/fruit-ninja/FruitNinjaService.js +1 -311
  79. package/lib/module/games/fruit-ninja/FruitNinjaStore.js +1 -191
  80. package/lib/module/games/fruit-ninja/FruitNinjaStore.js.map +1 -1
  81. package/lib/module/games/fruit-ninja/components/FruitComponent.js +1 -99
  82. package/lib/module/games/fruit-ninja/components/GameArea.js +1 -215
  83. package/lib/module/games/fruit-ninja/components/GameBackground.js +1 -1267
  84. package/lib/module/games/fruit-ninja/components/ScoreBoard.js +1 -92
  85. package/lib/module/games/fruit-ninja/components/ScoreBoard.js.map +1 -1
  86. package/lib/module/games/fruit-ninja/components/index.js +1 -7
  87. package/lib/module/games/game-2048/Game2048.js +1 -149
  88. package/lib/module/games/game-2048/Game2048.js.map +1 -1
  89. package/lib/module/games/game-2048/Game2048Constants.js +1 -263
  90. package/lib/module/games/game-2048/Game2048Constants.js.map +1 -1
  91. package/lib/module/games/game-2048/Game2048Service.js +1 -457
  92. package/lib/module/games/game-2048/Game2048Store.js +1 -236
  93. package/lib/module/games/game-2048/components/GameBackground.js +1 -247
  94. package/lib/module/games/game-2048/components/GameGrid.js +1 -139
  95. package/lib/module/games/game-2048/components/GameTile.js +1 -72
  96. package/lib/module/games/game-2048/components/ScoreBoard.js +1 -52
  97. package/lib/module/games/game-2048/components/index.js +1 -7
  98. package/lib/module/games/maze-runner/MazeRunner.js +1 -267
  99. package/lib/module/games/maze-runner/MazeRunner.js.map +1 -1
  100. package/lib/module/games/maze-runner/MazeRunnerConstants.js +1 -100
  101. package/lib/module/games/maze-runner/MazeRunnerConstants.js.map +1 -1
  102. package/lib/module/games/maze-runner/MazeRunnerService.js +1 -586
  103. package/lib/module/games/maze-runner/components/EnhancedBallComponent.js +1 -150
  104. package/lib/module/games/maze-runner/components/EnhancedGameArea.js +1 -370
  105. package/lib/module/games/maze-runner/components/GameBackground.js +1 -175
  106. package/lib/module/games/maze-runner/components/ScoreBoard.js +1 -61
  107. package/lib/module/games/maze-runner/components/SkiaPipeComponent.js +1 -209
  108. package/lib/module/games/maze-runner/components/StaticGameBackground.js +1 -169
  109. package/lib/module/games/maze-runner/components/WallComponent.js +1 -91
  110. package/lib/module/games/maze-runner/components/index.js +1 -8
  111. package/lib/module/games/popit-fidget/PopitFidget.js +1 -285
  112. package/lib/module/games/popit-fidget/PopitFidget.js.map +1 -1
  113. package/lib/module/games/popit-fidget/PopitFidgetConstants.js +1 -113
  114. package/lib/module/games/popit-fidget/PopitFidgetConstants.js.map +1 -1
  115. package/lib/module/games/popit-fidget/PopitFidgetService.js +1 -132
  116. package/lib/module/games/popit-fidget/PopitFidgetStore.js +1 -125
  117. package/lib/module/games/popit-fidget/components/BubbleComponent.js +1 -198
  118. package/lib/module/games/popit-fidget/components/FidgetGrid.js +1 -165
  119. package/lib/module/games/popit-fidget/components/GameBackground.js +1 -177
  120. package/lib/module/games/popit-fidget/components/ScoreBoard.js +1 -61
  121. package/lib/module/games/popit-fidget/components/index.js +1 -7
  122. package/lib/module/games/sliding-numbers/SlidingNumbers.js +1 -159
  123. package/lib/module/games/sliding-numbers/SlidingNumbers.js.map +1 -1
  124. package/lib/module/games/sliding-numbers/SlidingNumbersConstants.js +1 -207
  125. package/lib/module/games/sliding-numbers/SlidingNumbersConstants.js.map +1 -1
  126. package/lib/module/games/sliding-numbers/SlidingNumbersService.js +1 -248
  127. package/lib/module/games/sliding-numbers/SlidingNumbersStore.js +1 -274
  128. package/lib/module/games/sliding-numbers/components/GameBackground.js +1 -259
  129. package/lib/module/games/sliding-numbers/components/NumbersGrid.js +1 -174
  130. package/lib/module/games/sliding-numbers/components/NumbersTile.js +1 -116
  131. package/lib/module/games/sliding-numbers/components/ScoreBoard.js +1 -64
  132. package/lib/module/games/sliding-numbers/components/index.js +1 -7
  133. package/lib/module/games/snake/Snake.js +1 -189
  134. package/lib/module/games/snake/Snake.js.map +1 -1
  135. package/lib/module/games/snake/SnakeConstants.js +1 -138
  136. package/lib/module/games/snake/SnakeConstants.js.map +1 -1
  137. package/lib/module/games/snake/SnakeService.js +1 -148
  138. package/lib/module/games/snake/SnakeStore.js +1 -182
  139. package/lib/module/games/snake/components/GameBackground.js +1 -221
  140. package/lib/module/games/snake/components/GameGrid.js +1 -153
  141. package/lib/module/games/snake/components/ScoreBoard.js +1 -51
  142. package/lib/module/games/snake/components/index.js +1 -6
  143. package/lib/module/games/snake/index.js +1 -6
  144. package/lib/module/games/space-fighter/SpaceFighter.js +1 -165
  145. package/lib/module/games/space-fighter/SpaceFighter.js.map +1 -1
  146. package/lib/module/games/space-fighter/SpaceFighterConstants.js +1 -108
  147. package/lib/module/games/space-fighter/SpaceFighterConstants.js.map +1 -1
  148. package/lib/module/games/space-fighter/SpaceFighterService.js +1 -326
  149. package/lib/module/games/space-fighter/SpaceFighterStore.js +1 -209
  150. package/lib/module/games/space-fighter/components/AsteroidComponent.js +1 -113
  151. package/lib/module/games/space-fighter/components/GameArea.js +1 -289
  152. package/lib/module/games/space-fighter/components/GameBackground.js +1 -239
  153. package/lib/module/games/space-fighter/components/ScoreBoard.js +1 -136
  154. package/lib/module/games/space-fighter/components/Spacecraft3D.js +1 -202
  155. package/lib/module/games/space-fighter/components/SpacecraftPath.js +1 -52
  156. package/lib/module/games/space-fighter/components/index.js +1 -9
  157. package/lib/module/games/whack-a-mole/WhackAMole.js +1 -270
  158. package/lib/module/games/whack-a-mole/WhackAMole.js.map +1 -1
  159. package/lib/module/games/whack-a-mole/WhackAMoleConstants.js +1 -115
  160. package/lib/module/games/whack-a-mole/WhackAMoleConstants.js.map +1 -1
  161. package/lib/module/games/whack-a-mole/WhackAMoleService.js +1 -120
  162. package/lib/module/games/whack-a-mole/WhackAMoleStore.js +1 -172
  163. package/lib/module/games/whack-a-mole/components/GameBackground.js +1 -477
  164. package/lib/module/games/whack-a-mole/components/GameGrid.js +1 -97
  165. package/lib/module/games/whack-a-mole/components/GameHole.js +1 -196
  166. package/lib/module/games/whack-a-mole/components/MoleCharacter.js +1 -241
  167. package/lib/module/games/whack-a-mole/components/ScoreBoard.js +1 -67
  168. package/lib/module/games/whack-a-mole/components/ScoreBoard.js.map +1 -1
  169. package/lib/module/games/whack-a-mole/components/index.js +1 -8
  170. package/lib/module/helpers/AnimationFrame.js +1 -120
  171. package/lib/module/helpers/AnimationTracker.js +1 -89
  172. package/lib/module/helpers/ErrorHandler.js +1 -269
  173. package/lib/module/helpers/GameControlButton.js +1 -219
  174. package/lib/module/helpers/GameOverModal.js +1 -144
  175. package/lib/module/helpers/GameOverModal.js.map +1 -1
  176. package/lib/module/helpers/GameSettingsModal.js +1 -287
  177. package/lib/module/helpers/ParticleBlast.js +1 -134
  178. package/lib/module/helpers/ScoreBoardContainer.js +1 -34
  179. package/lib/module/helpers/index.js +1 -12
  180. package/lib/module/index.js +1 -22
  181. package/lib/module/services/GamesConstants.js +1 -178
  182. package/lib/module/services/GamesService.js +1 -112
  183. package/lib/module/services/GamesService.js.map +1 -1
  184. package/lib/module/services/HapticsService.js +1 -77
  185. package/lib/module/services/SoundsService.js +1 -302
  186. package/lib/module/services/UtilsService.js +1 -32
  187. package/lib/typescript/src/games/balloon-blaster/BalloonBlaster.d.ts.map +1 -1
  188. package/lib/typescript/src/games/balloon-blaster/BalloonBlasterConstants.d.ts +1 -1
  189. package/lib/typescript/src/games/balloon-blaster/components/ScoreBoard.d.ts.map +1 -1
  190. package/lib/typescript/src/games/candy-crush/CandyCrushConstants.d.ts +7 -7
  191. package/lib/typescript/src/games/colors-sort/ColorsSort.d.ts.map +1 -1
  192. package/lib/typescript/src/games/colors-sort/ColorsSortStore.d.ts.map +1 -1
  193. package/lib/typescript/src/games/dino-jump/DinoJump.d.ts.map +1 -1
  194. package/lib/typescript/src/games/dino-jump/components/DinoSprite.d.ts.map +1 -1
  195. package/lib/typescript/src/games/flappy-bird/FlappyBird.d.ts.map +1 -1
  196. package/lib/typescript/src/games/flappy-bird/FlappyBirdConstants.d.ts.map +1 -1
  197. package/lib/typescript/src/games/fruit-merger/FruitMerger.d.ts.map +1 -1
  198. package/lib/typescript/src/games/fruit-merger/FruitMergerConstants.d.ts.map +1 -1
  199. package/lib/typescript/src/games/fruit-ninja/FruitNinja.d.ts.map +1 -1
  200. package/lib/typescript/src/games/fruit-ninja/components/ScoreBoard.d.ts.map +1 -1
  201. package/lib/typescript/src/games/game-2048/Game2048.d.ts.map +1 -1
  202. package/lib/typescript/src/games/maze-runner/MazeRunner.d.ts.map +1 -1
  203. package/lib/typescript/src/games/popit-fidget/PopitFidget.d.ts.map +1 -1
  204. package/lib/typescript/src/games/sliding-numbers/SlidingNumbers.d.ts.map +1 -1
  205. package/lib/typescript/src/games/space-fighter/SpaceFighter.d.ts.map +1 -1
  206. package/lib/typescript/src/games/whack-a-mole/WhackAMole.d.ts.map +1 -1
  207. package/lib/typescript/src/games/whack-a-mole/WhackAMoleConstants.d.ts +1 -1
  208. package/lib/typescript/src/games/whack-a-mole/components/ScoreBoard.d.ts.map +1 -1
  209. package/lib/typescript/src/helpers/GameOverModal.d.ts +3 -0
  210. package/lib/typescript/src/helpers/GameOverModal.d.ts.map +1 -1
  211. package/lib/typescript/src/services/GamesConstants.d.ts +7 -7
  212. package/package.json +2 -2
@@ -1,196 +1 @@
1
- "use strict";
2
-
3
- import React, { useCallback, useMemo } from 'react';
4
- import { View, TouchableOpacity, StyleSheet } from 'react-native';
5
- import Animated, { useSharedValue, useAnimatedStyle, withSpring, withSequence, withTiming, interpolate, Extrapolation } from 'react-native-reanimated';
6
- import { Canvas as SkiaCanvas, Circle, Group } from '@shopify/react-native-skia';
7
- import { GAME_CONFIG, COLORS } from "../WhackAMoleService.js";
8
- import { MoleCharacter } from "./MoleCharacter.js";
9
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
- export const GameHole = /*#__PURE__*/React.memo(({
11
- hole,
12
- moleAnimation,
13
- hitAnimation,
14
- onPress,
15
- holeSize = GAME_CONFIG.HOLE_SIZE
16
- }) => {
17
- // Enhanced animation values for whack effect
18
- const whackScale = useSharedValue(1);
19
- const whackRotation = useSharedValue(0);
20
- const whackBounce = useSharedValue(0);
21
-
22
- // Memoize animation constants to prevent recalculation
23
- const animationConstants = useMemo(() => ({
24
- translateYRange: [holeSize * 0.3, holeSize * 0.1, -holeSize * 0.05],
25
- scaleRange: [0.3, 0.8, 1],
26
- maxTranslateY: -holeSize * 0.1
27
- }), [holeSize]);
28
- const moleStyle = useAnimatedStyle(() => {
29
- // Mole emerges from deep inside the hole
30
- const translateY = interpolate(moleAnimation.value, [0, 0.3, 1], animationConstants.translateYRange, Extrapolation.CLAMP);
31
-
32
- // Mole grows as it emerges from the hole
33
- const emergenceScale = interpolate(moleAnimation.value, [0, 0.4, 1], animationConstants.scaleRange, Extrapolation.CLAMP);
34
-
35
- // Constrained bounce - keep mole within hole area
36
- const bounceY = whackBounce.value * -8;
37
- const finalTranslateY = Math.max(translateY + bounceY, animationConstants.maxTranslateY);
38
- return {
39
- transform: [{
40
- translateY: finalTranslateY
41
- }, {
42
- scale: whackScale.value * emergenceScale
43
- }, {
44
- rotate: `${whackRotation.value}deg`
45
- }],
46
- opacity: moleAnimation.value
47
- };
48
- }, [animationConstants]);
49
- const hitStyle = useAnimatedStyle(() => {
50
- const scale = 1 + hitAnimation.value * 0.5;
51
- return {
52
- transform: [{
53
- scale
54
- }],
55
- opacity: hitAnimation.value
56
- };
57
- });
58
-
59
- // Memoize style calculations to prevent re-computation on every render
60
- const holeContainerStyle = useMemo(() => [styles.holeContainer, {
61
- width: holeSize,
62
- height: holeSize
63
- }], [holeSize]);
64
- const holeStyle = useMemo(() => [styles.hole, {
65
- width: holeSize * 0.8,
66
- height: holeSize * 0.8
67
- }], [holeSize]);
68
- const hitEffectContainerStyle = useMemo(() => [styles.hitEffectContainer, {
69
- width: holeSize,
70
- height: holeSize
71
- }], [holeSize]);
72
- const moleContainerStyle = useMemo(() => [styles.moleContainer, {
73
- bottom: holeSize * 0.1,
74
- zIndex: 10
75
- }], [holeSize]);
76
-
77
- // Optimized hit handler with memoized hole state check
78
- const handlePress = useCallback(() => {
79
- // Only trigger whack animation if mole is active (optimized check)
80
- if (hole.isActive || moleAnimation.value > 0) {
81
- // Whack animation sequence - constrained to hole area
82
- whackScale.value = withSequence(withSpring(1.3, {
83
- damping: 8,
84
- stiffness: 400
85
- }), withSpring(0.8, {
86
- damping: 10,
87
- stiffness: 300
88
- }), withTiming(0, {
89
- duration: 400
90
- }));
91
- whackRotation.value = withSequence(withSpring(15, {
92
- damping: 10,
93
- stiffness: 300
94
- }), withSpring(-8, {
95
- damping: 12,
96
- stiffness: 250
97
- }), withTiming(0, {
98
- duration: 300
99
- }));
100
- whackBounce.value = withSequence(withSpring(1, {
101
- damping: 8,
102
- stiffness: 400
103
- }), withSpring(0, {
104
- damping: 12,
105
- stiffness: 300
106
- }));
107
-
108
- // Delay hit effect to let mole animation show first
109
- setTimeout(() => {
110
- // Trigger hit effect after mole starts reacting
111
- onPress(hole.id);
112
- }, 150);
113
-
114
- // Reset animations after whack sequence
115
- setTimeout(() => {
116
- whackScale.value = 1;
117
- whackRotation.value = 0;
118
- whackBounce.value = 0;
119
- }, 800);
120
- } else {
121
- // No mole present, just trigger normal hit
122
- onPress(hole.id);
123
- }
124
- }, [hole.id, hole.isActive, onPress, moleAnimation]);
125
- return /*#__PURE__*/_jsxs(TouchableOpacity, {
126
- style: holeContainerStyle,
127
- onPress: handlePress,
128
- activeOpacity: 0.8,
129
- children: [/*#__PURE__*/_jsx(View, {
130
- style: holeStyle
131
- }), /*#__PURE__*/_jsx(Animated.View, {
132
- style: [hitEffectContainerStyle, hitStyle],
133
- children: /*#__PURE__*/_jsx(SkiaCanvas, {
134
- style: {
135
- width: holeSize,
136
- height: holeSize
137
- },
138
- children: /*#__PURE__*/_jsxs(Group, {
139
- children: [/*#__PURE__*/_jsx(Circle, {
140
- cx: holeSize / 2,
141
- cy: holeSize / 2,
142
- r: holeSize * 0.25,
143
- color: COLORS.HIT_EFFECT_OUTER
144
- }), /*#__PURE__*/_jsx(Circle, {
145
- cx: holeSize / 2,
146
- cy: holeSize / 2,
147
- r: holeSize * 0.17,
148
- color: COLORS.HIT_EFFECT_INNER
149
- })]
150
- })
151
- })
152
- }), hole.isActive && /*#__PURE__*/_jsx(Animated.View, {
153
- style: [moleContainerStyle, moleStyle],
154
- children: /*#__PURE__*/_jsx(MoleCharacter, {
155
- size: holeSize * 0.6
156
- })
157
- })]
158
- });
159
- });
160
- const styles = StyleSheet.create({
161
- holeContainer: {
162
- justifyContent: 'center',
163
- alignItems: 'center',
164
- position: 'relative'
165
- },
166
- hole: {
167
- backgroundColor: '#92400e',
168
- borderWidth: 4,
169
- borderColor: '#a16207',
170
- borderRadius: 9999,
171
- shadowColor: '#000',
172
- shadowOffset: {
173
- width: 0,
174
- height: 2
175
- },
176
- shadowOpacity: 0.25,
177
- shadowRadius: 3.84,
178
- elevation: 5
179
- },
180
- moleContainer: {
181
- position: 'absolute',
182
- justifyContent: 'center',
183
- alignItems: 'center',
184
- zIndex: 10,
185
- elevation: 10
186
- },
187
- hitEffectContainer: {
188
- position: 'absolute',
189
- justifyContent: 'center',
190
- alignItems: 'center',
191
- pointerEvents: 'none',
192
- zIndex: 1,
193
- elevation: 1
194
- }
195
- });
196
- //# sourceMappingURL=GameHole.js.map
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 = 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}});
@@ -1,241 +1 @@
1
- "use strict";
2
-
3
- import React from 'react';
4
- import { View, StyleSheet } from 'react-native';
5
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
- export const MoleCharacter = /*#__PURE__*/React.memo(({
7
- size
8
- }) => {
9
- const moleSize = size * 0.8;
10
- const styles = createStyles(moleSize);
11
-
12
- // Static mole - no animations for better performance
13
-
14
- return /*#__PURE__*/_jsx(View, {
15
- style: [styles.container, {
16
- width: size,
17
- height: size
18
- }],
19
- children: /*#__PURE__*/_jsxs(View, {
20
- style: styles.body,
21
- children: [/*#__PURE__*/_jsxs(View, {
22
- style: styles.head,
23
- children: [/*#__PURE__*/_jsx(View, {
24
- style: styles.leftEar
25
- }), /*#__PURE__*/_jsx(View, {
26
- style: styles.rightEar
27
- }), /*#__PURE__*/_jsx(View, {
28
- style: styles.leftInnerEar
29
- }), /*#__PURE__*/_jsx(View, {
30
- style: styles.rightInnerEar
31
- }), /*#__PURE__*/_jsx(View, {
32
- style: styles.leftEye,
33
- children: /*#__PURE__*/_jsx(View, {
34
- style: styles.eyeHighlight
35
- })
36
- }), /*#__PURE__*/_jsx(View, {
37
- style: styles.rightEye,
38
- children: /*#__PURE__*/_jsx(View, {
39
- style: styles.eyeHighlight
40
- })
41
- }), /*#__PURE__*/_jsx(View, {
42
- style: styles.nose
43
- }), /*#__PURE__*/_jsxs(View, {
44
- style: styles.mouth,
45
- children: [/*#__PURE__*/_jsx(View, {
46
- style: styles.leftMouth
47
- }), /*#__PURE__*/_jsx(View, {
48
- style: styles.rightMouth
49
- })]
50
- })]
51
- }), /*#__PURE__*/_jsx(View, {
52
- style: styles.leftWhisker1
53
- }), /*#__PURE__*/_jsx(View, {
54
- style: styles.leftWhisker2
55
- }), /*#__PURE__*/_jsx(View, {
56
- style: styles.rightWhisker1
57
- }), /*#__PURE__*/_jsx(View, {
58
- style: styles.rightWhisker2
59
- })]
60
- })
61
- });
62
- });
63
- const createStyles = moleSize => StyleSheet.create({
64
- container: {
65
- justifyContent: 'center',
66
- alignItems: 'center'
67
- },
68
- body: {
69
- width: moleSize,
70
- height: moleSize * 0.9,
71
- backgroundColor: '#FF8C42',
72
- borderRadius: moleSize * 0.4,
73
- justifyContent: 'center',
74
- alignItems: 'center',
75
- shadowColor: '#000',
76
- shadowOffset: {
77
- width: 0,
78
- height: 2
79
- },
80
- shadowOpacity: 0.3,
81
- shadowRadius: 4,
82
- elevation: 5
83
- },
84
- head: {
85
- width: moleSize * 0.8,
86
- height: moleSize * 0.7,
87
- backgroundColor: '#FFA366',
88
- borderRadius: moleSize * 0.35,
89
- position: 'relative',
90
- justifyContent: 'center',
91
- alignItems: 'center',
92
- marginTop: -moleSize * 0.1
93
- },
94
- leftEar: {
95
- position: 'absolute',
96
- top: -moleSize * 0.15,
97
- left: moleSize * 0.15,
98
- width: moleSize * 0.25,
99
- height: moleSize * 0.25,
100
- backgroundColor: '#FF8C42',
101
- borderRadius: moleSize * 0.125,
102
- transform: [{
103
- rotate: '-30deg'
104
- }]
105
- },
106
- rightEar: {
107
- position: 'absolute',
108
- top: -moleSize * 0.15,
109
- right: moleSize * 0.15,
110
- width: moleSize * 0.25,
111
- height: moleSize * 0.25,
112
- backgroundColor: '#FF8C42',
113
- borderRadius: moleSize * 0.125,
114
- transform: [{
115
- rotate: '30deg'
116
- }]
117
- },
118
- leftInnerEar: {
119
- position: 'absolute',
120
- top: -moleSize * 0.12,
121
- left: moleSize * 0.18,
122
- width: moleSize * 0.15,
123
- height: moleSize * 0.15,
124
- backgroundColor: '#FF6B1A',
125
- borderRadius: moleSize * 0.075,
126
- transform: [{
127
- rotate: '-30deg'
128
- }]
129
- },
130
- rightInnerEar: {
131
- position: 'absolute',
132
- top: -moleSize * 0.12,
133
- right: moleSize * 0.18,
134
- width: moleSize * 0.15,
135
- height: moleSize * 0.15,
136
- backgroundColor: '#FF6B1A',
137
- borderRadius: moleSize * 0.075,
138
- transform: [{
139
- rotate: '30deg'
140
- }]
141
- },
142
- leftEye: {
143
- position: 'absolute',
144
- top: moleSize * 0.15,
145
- left: moleSize * 0.2,
146
- width: moleSize * 0.12,
147
- height: moleSize * 0.15,
148
- backgroundColor: '#000000',
149
- borderRadius: moleSize * 0.075,
150
- justifyContent: 'center',
151
- alignItems: 'center'
152
- },
153
- rightEye: {
154
- position: 'absolute',
155
- top: moleSize * 0.15,
156
- right: moleSize * 0.2,
157
- width: moleSize * 0.12,
158
- height: moleSize * 0.15,
159
- backgroundColor: '#000000',
160
- borderRadius: moleSize * 0.075,
161
- justifyContent: 'center',
162
- alignItems: 'center'
163
- },
164
- eyeHighlight: {
165
- width: moleSize * 0.04,
166
- height: moleSize * 0.06,
167
- backgroundColor: '#FFFFFF',
168
- borderRadius: moleSize * 0.02
169
- },
170
- nose: {
171
- position: 'absolute',
172
- top: moleSize * 0.28,
173
- width: moleSize * 0.08,
174
- height: moleSize * 0.06,
175
- backgroundColor: '#FF1493',
176
- borderRadius: moleSize * 0.04
177
- },
178
- mouth: {
179
- position: 'absolute',
180
- top: moleSize * 0.35,
181
- width: moleSize * 0.2,
182
- height: moleSize * 0.1,
183
- justifyContent: 'center',
184
- alignItems: 'center'
185
- },
186
- leftMouth: {
187
- position: 'absolute',
188
- left: 0,
189
- width: moleSize * 0.08,
190
- height: 2,
191
- backgroundColor: '#000000',
192
- borderRadius: 1,
193
- transform: [{
194
- rotate: '20deg'
195
- }]
196
- },
197
- rightMouth: {
198
- position: 'absolute',
199
- right: 0,
200
- width: moleSize * 0.08,
201
- height: 2,
202
- backgroundColor: '#000000',
203
- borderRadius: 1,
204
- transform: [{
205
- rotate: '-20deg'
206
- }]
207
- },
208
- leftWhisker1: {
209
- position: 'absolute',
210
- top: moleSize * 0.35,
211
- left: -moleSize * 0.15,
212
- width: moleSize * 0.2,
213
- height: 1,
214
- backgroundColor: '#000000'
215
- },
216
- leftWhisker2: {
217
- position: 'absolute',
218
- top: moleSize * 0.4,
219
- left: -moleSize * 0.15,
220
- width: moleSize * 0.18,
221
- height: 1,
222
- backgroundColor: '#000000'
223
- },
224
- rightWhisker1: {
225
- position: 'absolute',
226
- top: moleSize * 0.35,
227
- right: -moleSize * 0.15,
228
- width: moleSize * 0.2,
229
- height: 1,
230
- backgroundColor: '#000000'
231
- },
232
- rightWhisker2: {
233
- position: 'absolute',
234
- top: moleSize * 0.4,
235
- right: -moleSize * 0.15,
236
- width: moleSize * 0.18,
237
- height: 1,
238
- backgroundColor: '#000000'
239
- }
240
- });
241
- //# sourceMappingURL=MoleCharacter.js.map
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 = 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'}});
@@ -1,67 +1 @@
1
- "use strict";
2
-
3
- import React from 'react';
4
- import { View, Text, StyleSheet } from 'react-native';
5
- import { ScoreBoardContainer } from "../../../helpers/index.js";
6
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
- export const ScoreBoard = /*#__PURE__*/React.memo(({
8
- score,
9
- timeLeft,
10
- offset = 0
11
- }) => {
12
- return /*#__PURE__*/_jsx(ScoreBoardContainer, {
13
- offset: offset,
14
- backgroundColor: "rgba(22, 101, 52, 0.4)",
15
- borderColor: "rgba(255, 255, 255, 0.3)",
16
- children: /*#__PURE__*/_jsxs(View, {
17
- style: styles.scoreBoard,
18
- children: [/*#__PURE__*/_jsxs(View, {
19
- style: styles.scoreSection,
20
- children: [/*#__PURE__*/_jsx(Text, {
21
- style: styles.scoreLabel,
22
- children: "Score"
23
- }), /*#__PURE__*/_jsx(Text, {
24
- style: styles.scoreValue,
25
- children: score
26
- })]
27
- }), /*#__PURE__*/_jsxs(View, {
28
- style: styles.scoreSection,
29
- children: [/*#__PURE__*/_jsx(Text, {
30
- style: styles.scoreLabel,
31
- children: "Time"
32
- }), /*#__PURE__*/_jsx(Text, {
33
- style: styles.timeValue,
34
- children: timeLeft
35
- })]
36
- })]
37
- })
38
- });
39
- });
40
- const styles = StyleSheet.create({
41
- scoreBoard: {
42
- flexDirection: 'row',
43
- justifyContent: 'space-between',
44
- alignItems: 'center'
45
- },
46
- scoreSection: {
47
- alignItems: 'center',
48
- flex: 1
49
- },
50
- scoreLabel: {
51
- fontSize: 18,
52
- fontWeight: 'bold',
53
- color: '#ffffff',
54
- marginBottom: 4
55
- },
56
- scoreValue: {
57
- fontSize: 30,
58
- fontWeight: 'bold',
59
- color: '#92400e'
60
- },
61
- timeValue: {
62
- fontSize: 30,
63
- fontWeight: 'bold',
64
- color: '#92400e'
65
- }
66
- });
67
- //# sourceMappingURL=ScoreBoard.js.map
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 = 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'}});
@@ -1 +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":[]}
1
+ {"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":[]}
@@ -1,8 +1 @@
1
- "use strict";
2
-
3
- export { ScoreBoard } from "./ScoreBoard.js";
4
- export { GameHole } from "./GameHole.js";
5
- export { GameGrid } from "./GameGrid.js";
6
- export { MoleCharacter } from "./MoleCharacter.js";
7
- export { GameBackground } from "./GameBackground.js";
8
- //# sourceMappingURL=index.js.map
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";
@@ -1,120 +1 @@
1
- "use strict";
2
-
3
- import { useEffect, useRef } from 'react';
4
-
5
- /**
6
- * Optimized animation frame utility for smooth game object cleanup and updates
7
- * Uses requestAnimationFrame instead of setInterval for better performance
8
- */
9
- export class AnimationFrameManager {
10
- animationId = null;
11
- isRunning = false;
12
- lastTime = 0;
13
- constructor(callback, interval = 100) {
14
- this.callback = callback;
15
- this.interval = interval;
16
- }
17
-
18
- /**
19
- * Start the animation frame loop
20
- */
21
- start() {
22
- if (this.isRunning) return;
23
- this.isRunning = true;
24
- this.lastTime = performance.now();
25
- this.loop();
26
- }
27
-
28
- /**
29
- * Stop the animation frame loop
30
- */
31
- stop() {
32
- if (this.animationId) {
33
- cancelAnimationFrame(this.animationId);
34
- this.animationId = null;
35
- }
36
- this.isRunning = false;
37
- }
38
-
39
- /**
40
- * Internal animation frame loop
41
- */
42
- loop = () => {
43
- if (!this.isRunning) return;
44
- const currentTime = performance.now();
45
- const deltaTime = currentTime - this.lastTime;
46
- if (deltaTime >= this.interval) {
47
- this.callback();
48
- this.lastTime = currentTime;
49
- }
50
- this.animationId = requestAnimationFrame(this.loop);
51
- };
52
-
53
- /**
54
- * Update the callback function
55
- */
56
- updateCallback(callback) {
57
- this.callback = callback;
58
- }
59
-
60
- /**
61
- * Update the interval
62
- */
63
- updateInterval(interval) {
64
- this.interval = interval;
65
- }
66
- }
67
-
68
- /**
69
- * React hook for using optimized animation frame cleanup
70
- */
71
- export function useAnimationFrame(callback, interval = 100, dependencies = []) {
72
- const managerRef = useRef(null);
73
- useEffect(() => {
74
- // Create or update the manager
75
- if (!managerRef.current) {
76
- managerRef.current = new AnimationFrameManager(callback, interval);
77
- } else {
78
- managerRef.current.updateCallback(callback);
79
- managerRef.current.updateInterval(interval);
80
- }
81
-
82
- // Start the animation frame loop
83
- managerRef.current.start();
84
-
85
- // Cleanup on unmount or dependency change
86
- return () => {
87
- if (managerRef.current) {
88
- managerRef.current.stop();
89
- }
90
- };
91
- }, dependencies);
92
-
93
- // Cleanup on unmount
94
- useEffect(() => {
95
- return () => {
96
- if (managerRef.current) {
97
- managerRef.current.stop();
98
- }
99
- };
100
- }, []);
101
- }
102
-
103
- /**
104
- * React hook for creating a reusable animation frame manager
105
- */
106
- export function useAnimationFrameManager(interval = 100) {
107
- const managerRef = useRef(null);
108
- if (!managerRef.current) {
109
- managerRef.current = new AnimationFrameManager(() => {}, interval);
110
- }
111
- useEffect(() => {
112
- return () => {
113
- if (managerRef.current) {
114
- managerRef.current.stop();
115
- }
116
- };
117
- }, []);
118
- return managerRef.current;
119
- }
120
- //# sourceMappingURL=AnimationFrame.js.map
1
+ "use strict";import{useEffect,useRef}from 'react';export class AnimationFrameManager{animationId = null;isRunning = false;lastTime = 0;constructor(callback,interval = 100){this.callback = callback;this.interval = interval;}start(){if(this.isRunning)return;this.isRunning = true;this.lastTime = performance.now();this.loop();}stop(){if(this.animationId){cancelAnimationFrame(this.animationId);this.animationId = null;}this.isRunning = false;}loop =()=>{if(!this.isRunning)return;const currentTime = performance.now();const deltaTime = currentTime - this.lastTime;if(deltaTime >= this.interval){this.callback();this.lastTime = currentTime;}this.animationId = requestAnimationFrame(this.loop);};updateCallback(callback){this.callback = callback;}updateInterval(interval){this.interval = interval;}}export function useAnimationFrame(callback,interval = 100,dependencies = []){const managerRef = useRef(null);useEffect(()=>{if(!managerRef.current){managerRef.current = new AnimationFrameManager(callback,interval);}else{managerRef.current.updateCallback(callback);managerRef.current.updateInterval(interval);}managerRef.current.start();return()=>{if(managerRef.current){managerRef.current.stop();}};},dependencies);useEffect(()=>{return()=>{if(managerRef.current){managerRef.current.stop();}};},[]);}export function useAnimationFrameManager(interval = 100){const managerRef = useRef(null);if(!managerRef.current){managerRef.current = new AnimationFrameManager(()=>{},interval);}useEffect(()=>{return()=>{if(managerRef.current){managerRef.current.stop();}};},[]);return managerRef.current;}