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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* Music Controls Component
*
* Simple toggle button for enabling/disabling background music.
* Volume slider is shown in GameInfoPanel when music is playing.
*/
'use client'
import { css } from '@styled/css'
import { useMusic } from './MusicContext'
interface MusicControlsProps {
/** Whether to show as compact (icon only) or full (with label) */
compact?: boolean
/** Dark mode */
isDark?: boolean
}
export function MusicControls({ compact = false, isDark = false }: MusicControlsProps) {
const { isMuted, isPlaying, enableMusic, disableMusic, error } = useMusic()
const handleToggle = async () => {
if (isMuted) {
await enableMusic()
} else {
disableMusic()
}
}
const getIcon = () => {
if (error) return '⚠️'
if (isMuted) return '🔇'
if (isPlaying) return '🎵'
return '🔈'
}
const getLabel = () => {
if (error) return 'Music Error'
if (isMuted) return 'Enable Music'
if (isPlaying) return 'Music On'
return 'Music Paused'
}
const getTitle = () => {
if (error) return `Music error: ${error}`
if (isMuted) return 'Click to enable background music'
return 'Click to disable background music'
}
return (
<button
onClick={handleToggle}
title={getTitle()}
data-action="toggle-music"
data-muted={isMuted}
data-playing={isPlaying}
className={css({
display: 'flex',
alignItems: 'center',
gap: compact ? '0' : '1.5',
padding: compact ? '1.5' : '1.5 2.5',
fontSize: 'sm',
cursor: 'pointer',
bg: 'transparent',
color: isDark ? 'blue.400' : 'blue.600',
rounded: 'md',
border: '1px solid',
borderColor: isDark ? 'blue.700' : 'blue.300',
fontWeight: 'medium',
transition: 'all 0.15s',
opacity: isMuted ? 0.6 : 0.9,
_hover: {
opacity: 1,
borderColor: isDark ? 'blue.500' : 'blue.400',
bg: isDark ? 'blue.900/30' : 'blue.50',
},
_active: {
transform: 'scale(0.95)',
},
})}
>
<span>{getIcon()}</span>
{!compact && <span>{getLabel()}</span>}
</button>
)
}
|