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 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 | 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 | /**
* DOM overlay for the LCM Hopper experience.
*
* Shows:
* - Guess prompt ("Tap where they all meet!")
* - Celebration card with LCM result
* - Guess feedback (correct, close, wrong)
*
* Driven by revealProgress from the constant demo framework.
*/
import type { GuessResult } from './lcmHopperState'
import type { ActiveCombo } from './lcmComboGenerator'
import { EARLY_HOP_END, GUESS_END, REVEAL_END } from './renderLcmHopperOverlay'
interface LcmHopperOverlayProps {
/** 0-1 progress from the constant demo framework */
progress: number
combo: ActiveCombo | null
guessResult: GuessResult
guessPosition: number | null
isDark: boolean
onDismiss: () => void
}
export function LcmHopperOverlay({
progress,
combo,
guessResult,
guessPosition,
isDark,
onDismiss,
}: LcmHopperOverlayProps) {
if (!combo) return null
const showGuessPrompt = progress >= EARLY_HOP_END && progress < GUESS_END
const showCelebration = progress >= REVEAL_END
if (!showGuessPrompt && !showCelebration) return null
const bg = isDark ? 'rgba(15, 23, 42, 0.85)' : 'rgba(255, 255, 255, 0.9)'
const text = isDark ? '#e2e8f0' : '#1e293b'
const accent = isDark ? '#fbbf24' : '#d97706'
const border = isDark ? 'rgba(251, 191, 36, 0.3)' : 'rgba(217, 119, 6, 0.3)'
return (
<>
{/* Guess prompt */}
{showGuessPrompt && (
<div
data-component="lcm-guess-prompt"
style={{
position: 'absolute',
top: 60,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 14,
padding: '10px 24px',
borderRadius: 20,
background: bg,
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
border: `1px solid ${border}`,
color: accent,
fontSize: '1rem',
fontWeight: 700,
whiteSpace: 'nowrap',
pointerEvents: 'none',
userSelect: 'none',
animation: 'pulse 2s ease-in-out infinite',
}}
>
Tap where they all meet!
</div>
)}
{/* Celebration card */}
{showCelebration && (
<button
data-component="lcm-celebration-card"
type="button"
style={{
position: 'absolute',
bottom: 80,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 14,
padding: '16px 28px',
borderRadius: 16,
background: bg,
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
border: `1px solid ${border}`,
color: text,
textAlign: 'center',
maxWidth: 320,
cursor: 'pointer',
font: 'inherit',
}}
onClick={onDismiss}
>
<div style={{ fontSize: '1.5rem', fontWeight: 800, color: accent, marginBottom: 4 }}>
{combo.emojis.join(' ')} meet at {combo.lcm}!
</div>
<div style={{ fontSize: '0.85rem', opacity: 0.8 }}>
That's the Least Common Multiple of {combo.strides.join(', ')}.
</div>
{guessResult === 'correct' && guessPosition !== null && (
<div
style={{
marginTop: 8,
fontSize: '0.9rem',
fontWeight: 700,
color: '#22c55e',
}}
>
You guessed {guessPosition} — you got it!
</div>
)}
{guessResult === 'close' && guessPosition !== null && (
<div style={{ marginTop: 8, fontSize: '0.9rem', opacity: 0.8 }}>
You guessed {guessPosition} — so close!
</div>
)}
{guessResult === 'wrong' && guessPosition !== null && (
<div style={{ marginTop: 8, fontSize: '0.85rem', opacity: 0.6 }}>
You guessed {guessPosition}. Next time!
</div>
)}
</button>
)}
</>
)
}
|