All files / web/src/arcade-games/know-your-world/music MusicControls.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
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * 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>
  )
}