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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 46x 46x 46x 46x 46x 46x 46x 46x 46x 46x 46x 46x 25x 25x 21x 21x 30x 12x 12x 9x 9x 9x 46x 1x 1x 8x 8x 19x 2x 2x 6x 6x 6x 6x 19x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 6x 6x 12x 12x 18x 18x 6x 6x 12x 18x 18x 18x 18x 18x 18x 6x 6x 6x 6x | 'use client'
import { useTheme } from '@/contexts/ThemeContext'
import { css } from '../../../../styled-system/css'
import { useStartPracticeModal, type GameBreakDifficultyPreset } from '../StartPracticeModalContext'
const PRESETS: {
key: GameBreakDifficultyPreset
label: string
emoji: string
}[] = [
{ key: 'easy', label: 'Easy', emoji: '🌱' },
{ key: 'medium', label: 'Medium', emoji: '🌿' },
{ key: 'hard', label: 'Hard', emoji: '🌳' },
]
/**
* Difficulty preset selector for game break configuration.
* Shows Easy/Medium/Hard buttons when a specific game is selected.
*/
export function GameBreakDifficultyPresets() {
const { resolvedTheme } = useTheme()
const isDark = resolvedTheme === 'dark'
const {
gameBreakSelectedGame,
selectedGamePracticeConfig,
gameBreakDifficultyPreset,
setGameBreakDifficultyPreset,
gameBreakShowCustomize,
} = useStartPracticeModal()
// Don't show if random or no game selected
if (!gameBreakSelectedGame || gameBreakSelectedGame === 'random') {
return null
}
// Don't show if game has no practice break config
if (!selectedGamePracticeConfig) {
return null
}
// Don't show if game has no difficulty presets
const presets = selectedGamePracticeConfig.difficultyPresets
if (!presets || Object.keys(presets).length === 0) {
return null
}
// Don't show preset selector when customize view is active
if (gameBreakShowCustomize) {
return null
}
// Filter to only show presets that exist in the config
const availablePresets = PRESETS.filter((p) => p.key && presets[p.key])
if (availablePresets.length === 0) {
return null
}
return (
<div
data-element="game-break-difficulty"
className={css({
display: 'flex',
gap: '0.25rem',
marginTop: '0.375rem',
})}
>
{availablePresets.map(({ key, label, emoji }) => {
const isSelected = gameBreakDifficultyPreset === key
return (
<button
key={key}
type="button"
data-option={`difficulty-${key}`}
data-selected={isSelected}
onClick={() => setGameBreakDifficultyPreset(key)}
className={css({
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '0.25rem',
padding: '0.375rem 0.5rem',
fontSize: '0.6875rem',
fontWeight: '600',
borderRadius: '6px',
border: 'none',
cursor: 'pointer',
transition: 'all 0.15s ease',
'@media (max-width: 480px), (max-height: 700px)': {
padding: '0.25rem 0.375rem',
fontSize: '0.5625rem',
gap: '0.125rem',
},
})}
style={{
backgroundColor: isSelected
? isDark
? 'rgba(34, 197, 94, 0.25)'
: 'rgba(34, 197, 94, 0.15)'
: isDark
? 'rgba(34, 197, 94, 0.1)'
: 'rgba(34, 197, 94, 0.08)',
color: isSelected ? (isDark ? '#86efac' : '#16a34a') : isDark ? '#4ade80' : '#22c55e',
boxShadow: isSelected
? isDark
? '0 0 10px rgba(34, 197, 94, 0.3)'
: '0 0 10px rgba(34, 197, 94, 0.2)'
: 'none',
}}
>
<span>{emoji}</span>
<span>{label}</span>
</button>
)
})}
</div>
)
}
|