diff --git a/src/App.js b/src/App.js index 4b5d2ae..47cbbf4 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,6 @@ import Settings from './container/Settings' import GitHubForkRibbon from 'react-github-fork-ribbon' import FocusNoteSelector from './container/FocusNoteSelector' -import ScaleView from './container/ScaleView' const tuningMap = { 'Standard E' : ['E', 'A', 'D', 'G', 'B', 'E'], diff --git a/src/container/Fretboard.css b/src/container/Fretboard.css index fe94c82..3022978 100644 --- a/src/container/Fretboard.css +++ b/src/container/Fretboard.css @@ -7,4 +7,13 @@ overflow-y: hidden; display: flex; flex-direction: column; +} + +.Fretboard-buttons { + right: 16px; + bottom: 17px; + padding: 16px 0 0 0; + display: flex; + flex-direction: row; + justify-content: flex-end; } \ No newline at end of file diff --git a/src/container/Fretboard.js b/src/container/Fretboard.js index d7edb3f..31f9194 100644 --- a/src/container/Fretboard.js +++ b/src/container/Fretboard.js @@ -10,8 +10,20 @@ import MarkerBoard from '../presentational/MarkerBoard' import GuitarString from '../presentational/GuitarString' class Fretboard extends Component { + clearDisabled () { + return this.props.selectedNotes.length < 1 + } + render () { - const {tuning, frets, onNoteClick, focusNote, scale} = this.props + const { + tuning, + frets, + onClearClick, + onNoteClick, + focusNote, + scale, + selectedNotes + } = this.props return (
@@ -20,12 +32,22 @@ class Fretboard extends Component { onNoteClick(n, i)} key={i} + string={i} + selectedNotes={selectedNotes} focusNote={focusNote} /> )}
+
+ +
) } @@ -33,18 +55,27 @@ class Fretboard extends Component { const mapStateToProps = (state) => { return { - tuning : state.tuning.value, - frets : state.frets, - focusNote: state.focusNote, - scale : state.scale + tuning : state.tuning.value, + frets : state.frets, + focusNote : state.focusNote, + scale : state.scale, + selectedNotes: state.selectedNotes } } const mapDispatchToProps = (dispatch) => { return { - onNoteClick (note) { + onNoteClick (note, string) { + dispatch({ + type : 'SET_SELECTED_NOTE', + value: { + note, + string + } + }) + }, + onClearClick () { dispatch({ - type : 'SET_FOCUS_NOTE', - value: note + type: 'CLEAR_SELECTED_NOTES' }) } } diff --git a/src/container/ScaleSelector.js b/src/container/ScaleSelector.js index ea2f2e0..6f8ffd2 100644 --- a/src/container/ScaleSelector.js +++ b/src/container/ScaleSelector.js @@ -2,7 +2,6 @@ import {connect} from 'react-redux' import React, {Fragment, Component} from 'react' -import Note, {notes} from '../core/Note' import {scales, Scale} from '../core/Scale' import './ScaleSelector.css' diff --git a/src/container/Settings.js b/src/container/Settings.js index c3da7c3..e8fccb0 100644 --- a/src/container/Settings.js +++ b/src/container/Settings.js @@ -7,7 +7,6 @@ const Settings = ({handleFretsChange, frets}) => onChange={handleFretsChange} value={frets} margin="normal" - min={27} min={12} /> const mapStateToProps = (state) => { diff --git a/src/container/TuningSelector.js b/src/container/TuningSelector.js index 3dce298..3802f8e 100644 --- a/src/container/TuningSelector.js +++ b/src/container/TuningSelector.js @@ -6,7 +6,7 @@ import './TuningSelector.css' const TuningSelector = ({tuning, handleTuningChange, tuningOptions}) => -
Tuning
+
Tuning