Guitar-Fretboard-Trainer/js/fretboard.js

import { OPEN_NOTES, getNoteAt, noteDisplay } from './music.js';

export const FRET_COUNT = 12;
const STRING_SPACING = 28;
// Width of each playable fret slot (index = fret number, index 0 unused)
const FRET_WIDTHS = [0, 52, 50, 47, 45, 43, 41, 39, 37, 35, 34, 32, 31];
const MARKER_FRETS = [3, 5, 7, 9, 12];

// Returns cumulative x positions of fret wires 0..FRET_COUNT.
// fretXs[f] is the right edge of the f-th fret slot (= left edge of slot f+1).
function computeFretXs() {
  const xs = [0];
  for (let i = 1; i <= FRET_COUNT; i++) xs.push(xs[i - 1] + FRET_WIDTHS[i]);
  return xs;
}

const FRET_XS = computeFretXs();

/**
 * Builds an SVG fretboard string.
 *
 * opts:
 *   numStrings    {number}  6 or 7
 *   highlightPos  {stringIdx, fret} | null   — mode 1 position dot
 *   mode2Sel      {Set<"s,f">}               — user's current selections
 *   mode2Correct  {Set<"s,f">} | null        — revealed after submission
 *   showLabels    {boolean}                  — show note names on dots
 *   interactive   {boolean}                  — add data-* click targets
 *   fretRange     [start, end] | null        — highlighted fret window
 *   sharpsOnly    {boolean}
 */
export function buildFretboard({
  numStrings = 6,
  highlightPos = null,
  mode2Sel = new Set(),
  mode2Correct = null,
  showLabels = false,
  interactive = false,
  fretRange = null,
  sharpsOnly = false,
} = {}) {
  const ns = numStrings;
  const PAD_LEFT = 30;
  const PAD_RIGHT = 16;
  const PAD_TOP = 20;
  const PAD_BOTTOM = 20;
  const totalW = FRET_XS[FRET_COUNT];
  const svgW = totalW + PAD_LEFT + PAD_RIGHT;
  const svgH = (ns - 1) * STRING_SPACING + PAD_TOP + PAD_BOTTOM;

  const parts = [];
  const p = s => parts.push(s);

  p(`<svg class="fretboard-svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}" xmlns="http://www.w3.org/2000/svg">`);

  // Fret-range highlight band
  if (fretRange) {
    const [fr1, fr2] = fretRange;
    const x1 = PAD_LEFT + (fr1 > 0 ? FRET_XS[fr1 - 1] : 0);
    const x2 = PAD_LEFT + FRET_XS[fr2];
    p(`<rect x="${x1}" y="${PAD_TOP - 8}" width="${x2 - x1}" height="${(ns - 1) * STRING_SPACING + 16}" fill="rgba(245,166,35,0.08)" rx="6"/>`);
  }

  // Nut
  p(`<rect x="${PAD_LEFT}" y="${PAD_TOP - 4}" width="5" height="${(ns - 1) * STRING_SPACING + 8}" fill="var(--nut)" rx="2"/>`);

  // Fret wires
  for (let f = 1; f <= FRET_COUNT; f++) {
    const x = PAD_LEFT + FRET_XS[f];
    p(`<line x1="${x}" y1="${PAD_TOP}" x2="${x}" y2="${PAD_TOP + (ns - 1) * STRING_SPACING}" stroke="var(--fret)" stroke-width="${f === 12 ? 3 : 1.5}"/>`);
  }

  // Fret numbers
  for (let f = 1; f <= FRET_COUNT; f++) {
    const x = PAD_LEFT + (FRET_XS[f - 1] + FRET_XS[f]) / 2;
    const inRange = !fretRange || (f >= fretRange[0] && f <= fretRange[1]);
    p(`<text x="${x}" y="${PAD_TOP - 6}" text-anchor="middle" font-size="9" fill="${inRange ? '#aaa' : '#444'}">${f}</text>`);
  }

  // Position marker dots
  for (const mf of MARKER_FRETS) {
    const x = PAD_LEFT + (FRET_XS[mf - 1] + FRET_XS[mf]) / 2;
    const midY = PAD_TOP + (ns - 1) * STRING_SPACING / 2;
    if (mf === 12) {
      p(`<circle cx="${x}" cy="${midY - 8}" r="4" fill="var(--marker)"/>`);
      p(`<circle cx="${x}" cy="${midY + 8}" r="4" fill="var(--marker)"/>`);
    } else {
      p(`<circle cx="${x}" cy="${midY}" r="4" fill="var(--marker)"/>`);
    }
  }

  // Strings
  const opens = OPEN_NOTES[ns];
  for (let s = 0; s < ns; s++) {
    const y = PAD_TOP + (ns - 1 - s) * STRING_SPACING;
    const thickness = 1 + (ns - 1 - s) * 0.22;
    p(`<line x1="${PAD_LEFT}" y1="${y}" x2="${PAD_LEFT + totalW}" y2="${y}" stroke="var(--string)" stroke-width="${thickness}"/>`);
    p(`<text x="${PAD_LEFT - 8}" y="${y + 4}" text-anchor="end" font-size="11" fill="var(--text-dim)">${opens[s]}</text>`);
  }

  // Dots and click targets
  for (let s = 0; s < ns; s++) {
    const y = PAD_TOP + (ns - 1 - s) * STRING_SPACING;

    for (let f = 0; f <= FRET_COUNT; f++) {
      const x = f === 0 ? PAD_LEFT - 22 : PAD_LEFT + (FRET_XS[f - 1] + FRET_XS[f]) / 2;
      const key = `${s},${f}`;
      const inRange = !fretRange || (f >= fretRange[0] && f <= fretRange[1]);

      const dotColor = resolveDotColor({ key, s, f, highlightPos, mode2Sel, mode2Correct, interactive, inRange });

      if (dotColor) {
        p(`<circle cx="${x}" cy="${y}" r="10" fill="${dotColor.fill}" stroke="${dotColor.stroke}" stroke-width="2"/>`);
        if (showLabels) {
          const label = noteDisplay(getNoteAt(s, f, ns), sharpsOnly);
          p(`<text x="${x}" y="${y + 4}" text-anchor="middle" font-size="9" font-weight="700" fill="#fff">${label}</text>`);
        }
      }

      if (interactive && inRange) {
        const cellX = f === 0 ? PAD_LEFT - 36 : PAD_LEFT + FRET_XS[f - 1];
        const cellW = f === 0 ? 30 : FRET_XS[f] - FRET_XS[f - 1];
        p(`<rect x="${cellX}" y="${y - STRING_SPACING / 2}" width="${cellW}" height="${STRING_SPACING}" fill="transparent" style="cursor:pointer" data-s="${s}" data-f="${f}"/>`);
      }
    }
  }

  p('</svg>');
  return parts.join('');
}

function resolveDotColor({ key, s, f, highlightPos, mode2Sel, mode2Correct, interactive, inRange }) {
  // Mode 1 highlight
  if (highlightPos && highlightPos.stringIdx === s && highlightPos.fret === f) {
    return { fill: '#e94560', stroke: 'none' };
  }

  if (!interactive || !inRange) return null;

  if (mode2Correct) {
    // Post-submission state
    const isCorrect = mode2Correct.has(key);
    const isSelected = mode2Sel.has(key);
    if (isCorrect && isSelected) return { fill: '#4caf50', stroke: '#4caf50' };
    if (isCorrect && !isSelected) return { fill: 'rgba(76,175,80,0.5)', stroke: '#4caf50' };
    if (!isCorrect && isSelected) return { fill: 'rgba(233,69,96,0.7)', stroke: '#e94560' };
    return null;
  }

  // Pre-submission: show selected positions
  if (mode2Sel.has(key)) return { fill: 'var(--accent2)', stroke: 'none' };

  return null;
}