Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* Celebration Animation Hook
*
* Manages the pulsing gold flash animation effect when a player finds
* the correct region on the map.
*
* The animation timing varies by celebration type:
* - Lightning: 2 pulses (fast find)
* - Standard: 3 pulses (normal find)
* - Slow/other: 4 pulses (took longer)
*
* Usage:
* ```tsx
* const { celebrationFlashProgress } = useCelebrationAnimation({
* celebration,
* })
* ```
*/
'use client'
import { useEffect, useState } from 'react'
import { usePulsingAnimation } from '../animations'
import { CELEBRATION_TIMING } from '../../utils/celebration'
import type { CelebrationType } from '../../Provider'
// ============================================================================
// Types
// ============================================================================
export interface Celebration {
regionId: string
regionName: string
type: CelebrationType
startTime: number
}
export interface UseCelebrationAnimationOptions {
/** The current celebration state, or null if not celebrating */
celebration: Celebration | null
}
export interface UseCelebrationAnimationReturn {
/** Pulsing value 0-1 for gold flash animation */
celebrationFlashProgress: number
}
// ============================================================================
// Hook Implementation
// ============================================================================
/**
* Hook for managing celebration pulsing animation.
*
* When celebration starts (detected by startTime), triggers a pulsing
* gold flash animation. The number of pulses varies by celebration type.
*
* @param options - Configuration options
* @returns Celebration animation state
*/
export function useCelebrationAnimation(
options: UseCelebrationAnimationOptions
): UseCelebrationAnimationReturn {
const { celebration } = options
// Animation state
const [celebrationFlashProgress, setCelebrationFlashProgress] = useState(0)
// Animation controller
const celebrationAnimation = usePulsingAnimation()
// Celebration animation effect - gold flash when region found
useEffect(() => {
if (!celebration) {
setCelebrationFlashProgress(0)
return
}
// Animation: pulsing gold flash during celebration
const timing = CELEBRATION_TIMING[celebration.type]
const pulses = celebration.type === 'lightning' ? 2 : celebration.type === 'standard' ? 3 : 4
celebrationAnimation.start({
duration: timing.totalDuration,
pulses,
onProgress: setCelebrationFlashProgress,
// No onComplete - animation just runs until cleanup
})
// Cleanup
return () => {
celebrationAnimation.cancel()
}
}, [celebration?.startTime, celebrationAnimation])
return {
celebrationFlashProgress,
}
}
|