whattheflat/JamBuddy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flipping the vertical chord diagrams for guitar

Browse Source
This commit is contained in:
itsamejms
2026-07-14 09:55:57 +01:00
parent ce22561813
commit 41751a1a58
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChordDiagram.jsx
+8 -8
View File
@@ -24,9 +24,9 @@
// Standard tuning open-string pitch classes, indexed low-E (0) → high-E (5). // 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 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), // We render strings left→right as low-E first (chord-diagram convention:
// so display index 0 = high E, 5 = low E. Data arrays are low-E first, so the // 6th string on the left, 1st on the right). Data arrays are also low-E first,
// data index for display row `di` is `5 - di`. // so display row index == data index.
const ACCENT = '#a855f7' // chord-tone tier (root highlight) const ACCENT = '#a855f7' // chord-tone tier (root highlight)
const DOT = '#e5e7eb' // non-root finger dots (light gray, AA on dark board) 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. // Root pitch class for colouring.
const rootPc = resolved.rootPc 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 = [] const rows = []
for (let di = 0; di < NUM_STRINGS; di++) { for (let di = 0; di < NUM_STRINGS; di++) {
const dataIdx = NUM_STRINGS - 1 - di const dataIdx = di
const f = absLowE[dataIdx] const f = absLowE[dataIdx]
const stringPc = (OPEN_PCS[dataIdx] + (typeof f === 'number' ? f : 0)) % 12 const stringPc = (OPEN_PCS[dataIdx] + (typeof f === 'number' ? f : 0)) % 12
const isRoot = typeof f === 'number' && f >= 0 && stringPc === rootPc const isRoot = typeof f === 'number' && f >= 0 && stringPc === rootPc
@@ -153,7 +153,7 @@ export default function ChordDiagram({
const svgW = padL + gridW + padR const svgW = padL + gridW + padR
const svgH = padT + gridH + padB 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 const fretY = fi => padT + fi * cell // fi: 0 = top line … NUM_FRETS
if (!built) { if (!built) {
@@ -235,14 +235,14 @@ export default function ChordDiagram({
x2={stringX(si)} x2={stringX(si)}
y2={fretY(NUM_FRETS)} y2={fretY(NUM_FRETS)}
stroke={STRING_COL} 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 */} {/* Per-string markers: mute ✕ / open ○ above the nut, dots on the grid */}
{rows.map((row, si) => { {rows.map((row, si) => {
const x = stringX(si) const x = stringX(si)
const dataIdx = NUM_STRINGS - 1 - si const dataIdx = si
const finger = fingers ? fingers[dataIdx] : 0 const finger = fingers ? fingers[dataIdx] : 0
// Muted string → ✕ above the board. // Muted string → ✕ above the board.