start chord toolbox

hlorenzi · Apr 14, 2019 · 702d29b · 702d29b
1 parent 97c7ab4
commit 702d29b
Showing 1 changed file with 36 additions and 2 deletions.
diff --git a/src/toolbox/toolbox.js b/src/toolbox/toolbox.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { KeyChange } from "../song/song.js"
-import { Key, scales, getScaleDegreeForPitch, getNameForPitch, getColorForScaleDegree, getColorRotationForScale } from "../util/theory.js"
+import { Key, scales, getScaleDegreeForPitch, getPitchForScaleDegree, getNameForPitch, getColorForScaleDegree, getColorRotationForScale, getChordRecordFromPitches, getRomanNumeralScaleDegreeStr } from "../util/theory.js"
 import { Rational } from "../util/rational.js"
 
 
@@ -27,9 +27,43 @@ function NoteToolbox(props)
 }
 
 
+function ChordToolbox(props)
+{
+	return <div>
+		<span>Key: { props.songKey.getName() }</span>
+		<br/>
+
+		{ [0, 1, 2, 3, 4, 5, 6].map(degree =>
+			{
+				const rootPitch = getPitchForScaleDegree(props.songKey, degree)
+				const secondPitch = getPitchForScaleDegree(props.songKey, degree + 2)
+				const thirdPitch = getPitchForScaleDegree(props.songKey, degree + 4)
+				const chordKind = getChordRecordFromPitches([0, secondPitch - rootPitch, thirdPitch - rootPitch])
+				const colorRotation = getColorRotationForScale(props.songKey.scalePitches)
+				const color = getColorForScaleDegree(colorRotation + degree)
+
+				let baseStr = getRomanNumeralScaleDegreeStr(degree, 0)
+				if (chordKind.symbol[0])
+					baseStr = baseStr.toLowerCase()
+
+				baseStr += chordKind.symbol[1]
+
+				return <button key={degree} style={{ width:"6em", height:"4em", backgroundColor:"#eee", border:"0", borderTop:"0.5em solid " + color, borderBottom:"0.5em solid " + color, borderRadius:"0.25em", margin:"0.1em" }}>
+					<span style={{ fontWeight:"bold" }}>{ baseStr }<sup>{ chordKind.symbol[2] }</sup></span>					
+				</button>
+			}
+		)}
+
+	</div>
+}
+
+
 export default function Toolbox(props)
 {
 	const keyChange = props.editor.song.keyChanges.findActiveAt(props.editor.cursorTime.start) || new KeyChange(new Rational(0), new Key(0, 0, scales.major.pitches))
 
-	return <div style={{ fontFamily:"Verdana", fontSize:"18px" }}><NoteToolbox songKey={ keyChange.key }/></div>
+	return <div style={{ fontFamily:"Verdana", fontSize:"18px" }}>
+		{ props.editor.cursorTrack.start != 1 ? null : <NoteToolbox songKey={ keyChange.key }/> }
+		{ props.editor.cursorTrack.start != 2 ? null : <ChordToolbox songKey={ keyChange.key }/> }
+	</div>
 }