diff --git a/src/components/LeftHand.js b/src/components/LeftHand.js index 3810cd7ab..f86fbc924 100644 --- a/src/components/LeftHand.js +++ b/src/components/LeftHand.js @@ -1,13 +1,14 @@ import React from 'react'; -const LeftHand = () => { - return ( - +const LeftHand = ({img}) => { + if (!img) { + return ( + Fill 1 Created with Sketch.
- + @@ -15,9 +16,14 @@ const LeftHand = () => { - - - ) + + + ); + } else { + return ( + Left hand with finger highlighted + ) + } } export default LeftHand; \ No newline at end of file diff --git a/src/components/RightHand.js b/src/components/RightHand.js index 000c53fd5..313665764 100644 --- a/src/components/RightHand.js +++ b/src/components/RightHand.js @@ -1,20 +1,23 @@ import React from 'react'; -const RightHand = () => { - return ( - - Fill 1 - Created with Sketch. - - - - - - - - - - ) +const RightHand = ({img}) => { + if (!img) { + return ( + + Fill 1 + Created with Sketch. + + + + + + + + + + ) + } + return Right hand with finger highlighted } export default RightHand; \ No newline at end of file diff --git a/src/components/TutorialContent.js b/src/components/TutorialContent.js index e4c601334..137e6d818 100644 --- a/src/components/TutorialContent.js +++ b/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 { {this.state.modelCount} { rows } - + ) } diff --git a/src/components/TutorialHandsKeyboard.js b/src/components/TutorialHandsKeyboard.js index 4a962e1ee..63dea1b6c 100644 --- a/src/components/TutorialHandsKeyboard.js +++ b/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 (
- + - +
) } -export default LessonTutorialHandsKeyboard; \ No newline at end of file +export default LessonTutorialHandsKeyboard; diff --git a/src/services/keyboardHighlight.js b/src/services/keyboardHighlight.js index 35b10d146..c7b4efcf6 100644 --- a/src/services/keyboardHighlight.js +++ b/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