qwerty overlay working

package.json

@@ -78,7 +78,7 @@
     "babel-polyfill": "^6.23.0",
     "font-awesome": "^4.7.0",
     "normalize.css": "^5.0.0",
-    "react": "15.4.2",
+    "react": "^15.4.2",
     "react-css-modules": "^4.1.0",
     "react-dom": "15.4.2",
     "relative-path": "^1.1.0"

src/Main/Toolbox/Keyboard/Keys/Key/index.jsx

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './styles.scss';
-import keybind from './utils/keybind';
+import { keybind, getKeyboardKey } from './utils/keybind';
 import _ from 'lodash';
 
-
 class Key extends Component {
 	static propTypes = {
     synth: React.PropTypes.object.isRequired,
-    note: React.PropTypes.string.isRequired
+    note: React.PropTypes.string.isRequired,
+		overlay: React.PropTypes.oneOf(['qwerty', 'boethian', 'none'])
   }
 
 	state = {
@@ -49,8 +49,12 @@ class Key extends Component {
 		this.props.synth.triggerRelease(this.props.note);
 	}
 
+	noteName() {
+		return this.props.note.slice(0, -1);
+	}
+
 	relativeNote() {
-		return this.props.note.slice(0, -1) + this.props.octave;
+		return this.noteName() + this.props.octave;
 	}
 
 	isBlack(note) {
@@ -62,7 +66,7 @@ class Key extends Component {
 	}
 
 	activeClass() {
-		return this.state.active ? ' active' : '';
+		return this.state.active ? 'active' : '';
 	}
 
 	setActive() {
@@ -73,14 +77,35 @@ class Key extends Component {
 		this.setState({ active: false });
 	}
 
+	renderOverlay() {
+		var overlayContent;
+		switch (this.props.overlay) {
+			case 'none':
+				overlayContent = null;
+				break;
+			case 'qwerty':
+				overlayContent = getKeyboardKey(this.relativeNote());
+				break;
+			case 'boethian':
+				overlayContent = this.noteName();
+				break;
+			default:
+				throw new Error('invalid overlay type:' + this.props.overlay);
+		}
+
+		return <span className='key-overlay'>{overlayContent}</span>;
+	}
+
 	render() {
 		return (
 			<div styleName='Key' className={this.activeClass() + this.keyColorClass()}>
 				<div onMouseDown={this.setActive}
 						 onMouseUp={this.setInactive}
 						 onDragEnter={this.setActive}
 						 onDragExit={this.setInactive}
-						 onDoubleClick={this.setActive}/>
+						 onDoubleClick={this.setActive}>
+					{this.renderOverlay()}
+				</div>
 			</div>
 		);
 	}

src/Main/Toolbox/Keyboard/Keys/Key/styles.scss

@@ -22,6 +22,10 @@
         background-color: rgb(173,164,164);
       }
     }
+
+    .key-overlay {
+      color: $color-white;
+    }
   }
 
   &.white {
@@ -37,4 +41,14 @@
       }
     }
   }
+
+  & > div {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .key-overlay {
+    margin-bottom: 1rem;
+  }
 }

src/Main/Toolbox/Keyboard/Keys/Key/utils/keybind.js

@@ -20,15 +20,23 @@ const KEYMAP = {
   'F2':  222,
 };
 
+// keeps track of which keys are active
 const keys = {};
 
-function keybind(note, trigger, release) {
+export function keybind(note, trigger, release) {
   const code = KEYMAP[note];
 
   document.addEventListener('keydown', e => onKeyDown(code, trigger, e));
   document.addEventListener('keyup', e => onKeyUp(code, release, e));
 }
 
+export function getKeyboardKey(note){
+  // keycode exceptions
+  if(note === 'E2'){ return ';'}
+
+  return String.fromCharCode(KEYMAP[note]);
+}
+
 function onKeyDown(code, cb, e) {
   const keyCode = e.which || e.keyCode;
   const notAlreadyPlaying = !keys[keyCode];

src/Main/Toolbox/Keyboard/Keys/index.jsx

@@ -12,7 +12,8 @@ const CHR_SCALE = ["C", "C#", "D", "D#", "E", "F",
 
 class Keys extends Component {
   static propTypes = {
-    synth: React.PropTypes.object.isRequired
+    synth: React.PropTypes.object.isRequired,
+    overlay: React.PropTypes.oneOf(['qwerty', 'boethian', 'none']).isRequired
   }
 
   constructor(props) {
@@ -48,7 +49,7 @@ class Keys extends Component {
     // octave relative to bottom of keyboard - starts at 1
     const octave = Math.floor(idx / 12) + 1;
 
-    return <Key note={note} octave={octave} key={idx} synth={this.props.synth} />;
+    return <Key note={note} octave={octave} key={idx} overlay={this.props.overlay} synth={this.props.synth} />;
   }
 
 	render() {

src/Main/Toolbox/Keyboard/index.jsx

@@ -6,18 +6,19 @@ import Tone from 'tone';
 import Keys from './Keys';
 import Panel from './Panel';
 
-
+const DEFAULT_OVERLAY = 'qwerty';
 
 class Keyboard extends Component {
 	state = {
-		synth: new Tone.PolySynth(6).toMaster()
+		synth: new Tone.PolySynth(6).toMaster(),
+		overlay: DEFAULT_OVERLAY
 	}
 
 	render() {
 		return (
 			<div styleName='Keyboard'>
-				<Panel />
-				<Keys synth={this.state.synth} />
+				<Panel overlay={this.state.overlay} />
+				<Keys synth={this.state.synth} overlay={this.state.overlay} />
 			</div>
 		);
 	}