All files / web/src/components/music MusicStaff.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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { pitchToStaffPosition, getStemDirection, getLedgerLinePositions } from './noteUtils'
import type { PitchClass, Clef, Accidental } from './noteUtils'

export interface MusicStaffProps {
  pitchClass: PitchClass
  octave: number
  clef: Clef
  accidental?: Accidental
  width?: number
  height?: number
  showClef?: boolean
}

/**
 * SVG component rendering a music staff with a single note.
 *
 * Ported from the jsPDF rendering in api/create/music-flashcards/route.ts.
 * Position system: 0 = bottom line, 8 = top line.
 * Y formula: staffTop + (8 - position) * lineGap
 */
export function MusicStaff({
  pitchClass,
  octave,
  clef,
  accidental,
  width = 120,
  height = 80,
  showClef = true,
}: MusicStaffProps) {
  const lineGap = height * 0.08
  const staffTop = height * 0.3
  const staffWidth = width * 0.85
  const staffLeft = (width - staffWidth) / 2

  const position = pitchToStaffPosition(pitchClass as PitchClass, octave, clef)
  const stemDir = getStemDirection(position)
  const ledgerPositions = getLedgerLinePositions(position)

  // Note position
  const noteY = staffTop + (8 - position) * lineGap
  const noteX = staffLeft + staffWidth * 0.72

  // Note head dimensions (ellipse) — sized to fill a staff space
  const noteRx = 6
  const noteRy = 4.2

  // Stem
  const stemHeight = lineGap * 7
  const stemX = stemDir === 'up' ? noteX + noteRx - 0.5 : noteX - noteRx + 0.5
  const stemY1 = noteY
  const stemY2 = stemDir === 'up' ? noteY - stemHeight : noteY + stemHeight

  // Clef positioning
  // The staff spans from staffTop (top line) to staffTop + 8*lineGap (bottom line).
  // The treble clef glyph (𝄞) visually centers around the G line (position 2).
  // The bass clef glyph (𝄢) visually centers around the F line (position 6, i.e. 4th line).
  // These Unicode glyphs are tall and need large font sizes to span the staff properly.
  const staffHeight = lineGap * 8
  const clefX = staffLeft + 2
  const clefSymbol = clef === 'treble' ? '\u{1D11E}' : '\u{1D122}'
  const clefFontSize = clef === 'treble' ? staffHeight * 2.4 : staffHeight * 0.9
  // Treble clef: anchor near bottom of staff — the glyph extends upward
  const trebleClefY = staffTop + staffHeight * 0.85 - lineGap * 1.5
  // Bass clef: anchor near the F line (4th line from bottom)
  const bassClefY = staffTop + (8 - 4) * lineGap + lineGap * 0.3
  const clefY = clef === 'treble' ? trebleClefY : bassClefY

  // Accidental positioning
  const accidentalSymbol =
    accidental === 'sharp'
      ? '\u266F'
      : accidental === 'flat'
        ? '\u266D'
        : accidental === 'natural'
          ? '\u266E'
          : null
  const accidentalX = noteX - noteRx - 8
  const accidentalY = noteY + 3

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      overflow="visible"
      data-component="MusicStaff"
      data-clef={clef}
      data-note={`${pitchClass}${octave}`}
    >
      {/* Staff lines */}
      {Array.from({ length: 5 }, (_, i) => {
        const y = staffTop + i * lineGap * 2
        return (
          <line
            key={`staff-${i}`}
            x1={staffLeft}
            y1={y}
            x2={staffLeft + staffWidth}
            y2={y}
            stroke="#333"
            strokeWidth={0.8}
          />
        )
      })}

      {/* Clef */}
      {showClef && (
        <text
          x={clefX}
          y={clefY}
          fontSize={clefFontSize}
          fontFamily="serif"
          fill="#333"
          dominantBaseline="middle"
          textAnchor="start"
        >
          {clefSymbol}
        </text>
      )}

      {/* Ledger lines */}
      {ledgerPositions.map((pos) => {
        const y = staffTop + (8 - pos) * lineGap
        return (
          <line
            key={`ledger-${pos}`}
            x1={noteX - 11}
            y1={y}
            x2={noteX + 11}
            y2={y}
            stroke="#333"
            strokeWidth={0.8}
          />
        )
      })}

      {/* Accidental */}
      {accidentalSymbol && (
        <text
          x={accidentalX}
          y={accidentalY}
          fontSize={12}
          fontFamily="serif"
          fill="#333"
          textAnchor="middle"
        >
          {accidentalSymbol}
        </text>
      )}

      {/* Note head (slightly tilted ellipse) */}
      <ellipse
        cx={noteX}
        cy={noteY}
        rx={noteRx}
        ry={noteRy}
        fill="#333"
        transform={`rotate(-10, ${noteX}, ${noteY})`}
      />

      {/* Stem */}
      <line x1={stemX} y1={stemY1} x2={stemX} y2={stemY2} stroke="#333" strokeWidth={1.2} />
    </svg>
  )
}