diff --git a/src/components/ChordDiagram.jsx b/src/components/ChordDiagram.jsx index 3647f0b..28668dd 100644 --- a/src/components/ChordDiagram.jsx +++ b/src/components/ChordDiagram.jsx @@ -24,9 +24,9 @@ // Standard tuning open-string pitch classes, indexed low-E (0) → high-E (5). const OPEN_PCS = [4, 9, 2, 7, 11, 4] // E A D G B E -// We render strings top→bottom as high-E first (matches Fretboard.jsx idiom), -// so display index 0 = high E, 5 = low E. Data arrays are low-E first, so the -// data index for display row `di` is `5 - di`. +// We render strings left→right as low-E first (chord-diagram convention: +// 6th string on the left, 1st on the right). Data arrays are also low-E first, +// so display row index == data index. const ACCENT = '#a855f7' // chord-tone tier (root highlight) const DOT = '#e5e7eb' // non-root finger dots (light gray, AA on dark board) @@ -114,10 +114,10 @@ function buildRows(resolved) { // Root pitch class for colouring. const rootPc = resolved.rootPc - // Convert to display rows (high-E first → reverse of low-E-first). + // Convert to display rows (low-E first — display index == data index). const rows = [] for (let di = 0; di < NUM_STRINGS; di++) { - const dataIdx = NUM_STRINGS - 1 - di + const dataIdx = di const f = absLowE[dataIdx] const stringPc = (OPEN_PCS[dataIdx] + (typeof f === 'number' ? f : 0)) % 12 const isRoot = typeof f === 'number' && f >= 0 && stringPc === rootPc @@ -153,7 +153,7 @@ export default function ChordDiagram({ const svgW = padL + gridW + padR const svgH = padT + gridH + padB - const stringX = si => padL + si * sw // si: 0 = high E (left) … 5 = low E + const stringX = si => padL + si * sw // si: 0 = low E (left) … 5 = high E const fretY = fi => padT + fi * cell // fi: 0 = top line … NUM_FRETS if (!built) { @@ -235,14 +235,14 @@ export default function ChordDiagram({ x2={stringX(si)} y2={fretY(NUM_FRETS)} stroke={STRING_COL} - strokeWidth={(si >= 4 ? 1.4 : si >= 2 ? 1.1 : 0.8) * scale} + strokeWidth={(si < 2 ? 1.4 : si < 4 ? 1.1 : 0.8) * scale} /> ))} {/* Per-string markers: mute ✕ / open ○ above the nut, dots on the grid */} {rows.map((row, si) => { const x = stringX(si) - const dataIdx = NUM_STRINGS - 1 - si + const dataIdx = si const finger = fingers ? fingers[dataIdx] : 0 // Muted string → ✕ above the board.