← banjotuna

Make 5th string box same size as grid cells and flush with diagram

ef7ba40afa6f41d8b06b235ab10e3a162af5515f · Claude · Feb 1, 2026 19:35

- Box is now same width as string spacing (one cell width)
- Flush/connected to the main grid at fret 5-6
- No string line inside - just the box outline
- Label centered above the box

https://claude.ai/code/session_017ri8N4m6j39ajt5xUaz65n

+15 −16 · 1 file changed

• index.html +15 −16

diff --git a/index.html b/index.html
index 74635f2..9adb45c 100644
--- a/index.html
+++ b/index.html
@@ -1612,25 +1612,24 @@
                 svg += `<text x="${x}" y="${marginTop - 20}" font-size="9" text-anchor="middle" fill="#666">${stringNum}</text>`;
             }
 
-            // 5th string indicator (starts at fret 5 wire, box spans fret 5-6)
+            // 5th string box (same size cell as main grid, flush with it, at fret 5-6)
             // Only show if baseFret is 1 (low position chords)
             if (baseFret === 1) {
-                const fifthStringX = marginLeft - 12;
-                const boxWidth = 12;
-                const fret5Y = marginTop + 5 * fretSpacing; // Fret 5 wire (where 5th string peg is)
+                const fret5Y = marginTop + 5 * fretSpacing; // Fret 5 wire
                 const fret6Y = marginTop + 6 * fretSpacing; // Fret 6 wire
-
-                // Draw the box (rectangle like the main grid)
-                svg += `<rect x="${fifthStringX - boxWidth/2}" y="${fret5Y}" width="${boxWidth}" height="${fret6Y - fret5Y}" fill="none" stroke="#333" stroke-width="1"/>`;
-
-                // Draw the 5th string line in the center of the box
-                svg += `<line x1="${fifthStringX}" y1="${fret5Y}" x2="${fifthStringX}" y2="${fret6Y}" stroke="#333" stroke-width="1.5"/>`;
-
-                // Tuning peg indicator (small filled circle at top)
-                svg += `<circle cx="${fifthStringX}" cy="${fret5Y}" r="3" fill="#333"/>`;
-
-                // Label for 5th string
-                svg += `<text x="${fifthStringX}" y="${fret5Y - 8}" font-size="8" text-anchor="middle" fill="#666">5</text>`;
+                const boxLeft = marginLeft - stringSpacing; // One cell width to the left
+
+                // Draw the box - same size as grid cells, flush with main grid
+                // Top line (fret 5)
+                svg += `<line x1="${boxLeft}" y1="${fret5Y}" x2="${marginLeft}" y2="${fret5Y}" stroke="#333" stroke-width="1"/>`;
+                // Bottom line (fret 6)
+                svg += `<line x1="${boxLeft}" y1="${fret6Y}" x2="${marginLeft}" y2="${fret6Y}" stroke="#333" stroke-width="1"/>`;
+                // Left edge
+                svg += `<line x1="${boxLeft}" y1="${fret5Y}" x2="${boxLeft}" y2="${fret6Y}" stroke="#333" stroke-width="1"/>`;
+
+                // Label for 5th string (centered in the box)
+                const boxCenterX = boxLeft + stringSpacing / 2;
+                svg += `<text x="${boxCenterX}" y="${fret5Y - 8}" font-size="8" text-anchor="middle" fill="#666">5</text>`;
             }
 
             // Finger positions and open/muted indicators