flipping the vertical chord diagrams for guitar

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.