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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | '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}
/>
)
}
|