GuitarChord.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';


const openStringLetter = note => {
  const letter = note === 0 ? 'o' : 'x';
  return letter;
};

const drawOpenStringNote = (note, stringNo) => {
  const x = (5 - stringNo) * 10 + 2;
  return (
    <text key={'openStr ' + stringNo} x={x} y="20" fill="black" fontSize="12">
      {note < 1 &&  openStringLetter(note)}{' '}
    </text>
  );
};

const drawOpenStringNotes = notes => {
  return notes.map((note, ind) => {
    return drawOpenStringNote(note, ind);
  });
};

const drawFretboard = () => {
  return (
    <g>
      <line x1="5" y1="22" x2="55" y2="22" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '2' }} />

      <line x1="5" y1="32" x2="55" y2="32" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="5" y1="42" x2="55" y2="42" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="5" y1="52" x2="55" y2="52" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="5" y1="62" x2="55" y2="62" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="5" y1="72" x2="55" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />

      <line x1="5" y1="22" x2="5" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="15" y1="22" x2="15" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="25" y1="22" x2="25" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="35" y1="22" x2="35" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="45" y1="22" x2="45" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
      <line x1="55" y1="22" x2="55" y2="72" style={{ stroke: 'rgb(0,0,0)', strokeWidth: '0.5' }} />
    </g>
  );
};

const drawNotes = notes => {
  let circles = [];

  //circles.push(<circle cx="5" cy="27" r="2" stroke="black" strokeWidth="1" fill="black" />);
  circles = notes.map( (note, ind) => {
    if (note<1) return <g></g>; 

    const x = (6 - ind) * 10 - 5;
    const y = 17 + note * 10;

    return <circle cx={x} cy={y} r="2" stroke="black" strokeWidth="1" fill="black" />
  } );

  return <g>{circles}</g>
};

class Chord extends Component {
  render() {
    
    const notes = this.props.notes.split('').map(function(item) {
      if (item === 'x') return -1;
      return parseInt(item, 10);
    });

    return (
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="100">
        <text x="60" y="24" fill="black" fontSize="12" fontStyle="italic">
          {/*2fr*/}
        </text>
        <text x="20" y="88" fontSize="10" fill="red">
          {this.props.name}
        </text>
        {drawOpenStringNotes(notes)}
        {drawFretboard()}
        {drawNotes(notes)}
      </svg>
    );
  }
}

Chord.defaultProps = {
  
}

Chord.propTypes = {
  name: PropTypes.string.isRequired,
  notes: PropTypes.string.isRequired
}

export default Chord;