Add keyboard highlight support for Tutorial

References #109
Also as a sidenote, we're still missing some mappings for some special keys, but for now they default to showing non highlighted hands

src/components/TutorialContent.js

@@ -4,6 +4,7 @@ import { OrderedMap } from 'immutable';
 import styled from 'styled-components'
 
 import LessonTutorialHandsKeyboard from './TutorialHandsKeyboard';
+import {setHandsForKeyPressed} from '../services/keyboardHighlight';
 
 import "../style/TutorialContent.css"
 
@@ -42,6 +43,8 @@ class LessonTutorialContent extends Component {
 
     const totalLength = currentContent.length;
 
+    const {rightHandImg, leftHandImg} = setHandsForKeyPressed(currentKey);
+
     this.closeModal=this.closeModal.bind(this);
     this.modalCountdown = this.modalCountdown.bind(this)
 
@@ -67,7 +70,13 @@ class LessonTutorialContent extends Component {
       finishTime: 0,
       pauses: [],
       time: 0,
-      modelCount: 5
+      modelCount: 5,
+
+      // Paths for images of hands
+      handPaths: {
+        rightHandImg,
+        leftHandImg
+      },
     };
   }
 
@@ -246,6 +255,9 @@ class LessonTutorialContent extends Component {
 
     shouldShowModal = consecutiveIncorrectCount > 4;
 
+    // Set new hand img paths for next key
+    const {leftHandImg, rightHandImg} = setHandsForKeyPressed(newCurrentKey);
+
     this.setState({ 
       rows, 
       correct, 
@@ -255,8 +267,12 @@ class LessonTutorialContent extends Component {
       charPtr: newCharPtr, 
       groupPtr: newGroupPtr,
       currentKey: newCurrentKey,
+      handPaths: {
+        rightHandImg,
+        leftHandImg
+      },
       consecutiveIncorrectCount,
-      shouldShowModal
+      shouldShowModal,
     });
   };
 
@@ -370,7 +386,11 @@ class LessonTutorialContent extends Component {
           <ModalCountDownDiv>{this.state.modelCount}</ModalCountDownDiv>
         </Modal>
         { rows }
-        <LessonTutorialHandsKeyboard currentKey={currentKey}/>
+        <LessonTutorialHandsKeyboard 
+          currentKey={currentKey}
+          leftHandImg={this.state.handPaths.leftHandImg}
+          rightHandImg={this.state.handPaths.rightHandImg}
+        />
       </div>
     )
   }

src/components/TutorialHandsKeyboard.js

@@ -6,15 +6,14 @@ import LeftHand from './LeftHand';
 
 import {setHandsForKeyPressed} from '../services/keyboardHighlight';
 
-const LessonTutorialHandsKeyboard = ({ currentKey }) => {
-  const { leftHandImage, rightHandImage } = setHandsForKeyPressed(currentKey);
+const LessonTutorialHandsKeyboard = ({ currentKey, leftHandImg, rightHandImg }) => {
   return (
     <div className="keyboard-hands row">
-      <LeftHand img={leftHandImage} />
+      <LeftHand img={leftHandImg} />
       <Keyboard currentKey={currentKey} />
-      <RightHand img={rightHandImage} />
+      <RightHand img={rightHandImg} />
     </div>
   )
 }
 
-export default LessonTutorialHandsKeyboard;
+export default LessonTutorialHandsKeyboard;

src/services/keyboardHighlight.js

@@ -6,11 +6,12 @@ export function setHandsForKeyPressed(keyPressed) {
 export function _setHandsForKeyPressed(keyPressed, imgs) {
   // This should never happen since all possible keys should be 
   // registered in imgForCharacter
+  console.log('in', keyPressed);
   if (!imgs.has(keyPressed)) {
-    return {leftHandImage:'', rightHandImage: ''};
+    return {leftHandImg:'', rightHandImg: ''};
   }
-  const [leftHandImage, rightHandImage] = imgs.get(keyPressed);
-  return {leftHandImage, rightHandImage};
+  const [leftHandImg, rightHandImg] = imgs.get(keyPressed);
+  return {leftHandImg, rightHandImg};
 };
 
 // The value is an array whose 0 index is the