All files / web/src/arcade-games/constant-explorer GameComponent.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useCallback, useRef } from 'react'
import { NumberLine } from '@/components/toys/number-line/NumberLine'
import { useGameCompletionCallback } from '@/contexts/GameCompletionContext'
import { useGameMode } from '@/contexts/GameModeContext'
import { useConstantExplorerConfig } from './Provider'
import type { ConstantExplorerState } from './types'

/**
 * Renders the NumberLine in exploration-break mode.
 * Signals game completion when the demo narration finishes so that
 * results are persisted to the scoreboard (enabling "balance" selection).
 */
export function ConstantExplorerGame() {
  const { constantId } = useConstantExplorerConfig()
  const onGameComplete = useGameCompletionCallback()
  const { getActivePlayers } = useGameMode()
  const startedAtRef = useRef(Date.now())
  const hasFiredRef = useRef(false)

  const handleDemoComplete = useCallback(
    (completedConstantId: string) => {
      if (hasFiredRef.current || !onGameComplete) return
      hasFiredRef.current = true

      const players = getActivePlayers()
      const player = players[0]

      const gameState: ConstantExplorerState = {
        constantId: completedConstantId,
        phase: 'complete',
        playerId: player?.id,
        playerName: player?.name,
        startedAt: startedAtRef.current,
      }

      onGameComplete(gameState as unknown as Record<string, unknown>)
    },
    [onGameComplete, getActivePlayers]
  )

  return (
    <NumberLine
      mode="exploration-break"
      autoPlayDemo={constantId}
      onDemoComplete={handleDemoComplete}
    />
  )
}