All files / web/src/arcade-games/know-your-world/components CelebrationOverlay.tsx

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Celebration Overlay Component
 *
 * Orchestrates the celebration sequence when a region is found:
 * - Plays sound effect
 * - Shows confetti
 * - Shows encouraging text (for hard-earned)
 * - Notifies when complete to advance game
 */

'use client'

import { css } from '@styled/css'
import { useEffect, useState, useCallback, useRef } from 'react'
import type { CelebrationState } from '../Provider'
import { ConfettiBurst } from './Confetti'
import { useMusicOptional } from '../music/MusicContext'
import { CELEBRATION_TIMING } from '../utils/celebration'

interface CelebrationOverlayProps {
  celebration: CelebrationState
  regionCenter: { x: number; y: number }
  onComplete: () => void
  reducedMotion?: boolean
}

// Encouraging messages for hard-earned finds
const HARD_EARNED_MESSAGES = [
  'You found it!',
  'Great perseverance!',
  'Never gave up!',
  'You did it!',
  'Amazing effort!',
]

export function CelebrationOverlay({
  celebration,
  regionCenter,
  onComplete,
  reducedMotion = false,
}: CelebrationOverlayProps) {
  const [confettiComplete, setConfettiComplete] = useState(false)
  const music = useMusicOptional()
  const timing = CELEBRATION_TIMING[celebration.type]

  // Pick a random message for hard-earned
  const [message] = useState(
    () => HARD_EARNED_MESSAGES[Math.floor(Math.random() * HARD_EARNED_MESSAGES.length)]
  )

  // Store onComplete in a ref so the timer doesn't restart when the callback changes
  // This fixes a bug where mouse movement during celebration would restart the timer
  const onCompleteRef = useRef(onComplete)
  onCompleteRef.current = onComplete

  // NOTE: Celebration sound is handled by MusicContext (via the celebration prop)
  // We don't play it here to avoid duplicate sounds
  useEffect(() => {
    console.log('[CelebrationOverlay] Celebration rendered:', {
      type: celebration.type,
      startTime: celebration.startTime,
    })
  }, [celebration.type, celebration.startTime])

  // Handle confetti completion
  const handleConfettiComplete = useCallback(() => {
    setConfettiComplete(true)
    onComplete()
  }, [onComplete])

  // For reduced motion, just show a brief message then complete
  useEffect(() => {
    if (reducedMotion) {
      const timer = setTimeout(() => {
        onCompleteRef.current()
      }, 500) // Brief delay for reduced motion
      return () => clearTimeout(timer)
    }
  }, [reducedMotion])

  // Reduced motion: simple notification only
  if (reducedMotion) {
    return (
      <div
        data-component="celebration-overlay-reduced"
        className={css({
          position: 'fixed',
          inset: 0,
          pointerEvents: 'none',
          zIndex: 10000,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        })}
      >
        <div
          className={css({
            bg: 'rgba(34, 197, 94, 0.9)',
            color: 'white',
            px: 6,
            py: 3,
            borderRadius: 'xl',
            fontSize: 'xl',
            fontWeight: 'bold',
            boxShadow: 'lg',
          })}
        >
          Found!
        </div>
      </div>
    )
  }

  return (
    <div
      data-component="celebration-overlay"
      className={css({
        position: 'fixed',
        inset: 0,
        pointerEvents: 'none',
        zIndex: 10000,
      })}
    >
      <style>
        {`
          @keyframes textAppear {
            0% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(0.5);
            }
            20% {
              opacity: 1;
              transform: translate(-50%, -50%) scale(1.1);
            }
            30% {
              transform: translate(-50%, -50%) scale(1);
            }
            80% {
              opacity: 1;
            }
            100% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(0.9);
            }
          }
        `}
      </style>

      {/* Confetti burst from region center */}
      {!confettiComplete && (
        <ConfettiBurst
          type={celebration.type}
          origin={regionCenter}
          onComplete={handleConfettiComplete}
        />
      )}

      {/* Encouraging text for hard-earned finds */}
      {celebration.type === 'hard-earned' && (
        <div
          className={css({
            position: 'absolute',
            left: '50%',
            top: '40%',
            transform: 'translate(-50%, -50%)',
            fontSize: '2xl',
            fontWeight: 'bold',
            color: 'white',
            textShadow: '0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(251, 191, 36, 0.5)',
            whiteSpace: 'nowrap',
          })}
          style={{
            animation: `textAppear ${timing.totalDuration}ms ease-out forwards`,
          }}
        >
          {message}
        </div>
      )}
    </div>
  )
}