All files / web/src/arcade-games/know-your-world/features/celebration useCelebrationAnimation.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * 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,
  }
}