From e539b81c5014f8a0b9c680e269bc648688cea1ae Mon Sep 17 00:00:00 2001
From: Cesar Ibarra <cfi2103@columbia.edu>
Date: Sat, 6 Jul 2019 17:18:34 -0700
Subject: [PATCH] Add template for finger highlighting WIP for #109

---
 src/components/TutorialHandsKeyboard.js       |   9 +-
 .../__tests__/keyboardHighlight.test.js       |  11 ++
 src/services/keyboardHighlight.js             | 120 ++++++++++++++++++
 3 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 src/services/__tests__/keyboardHighlight.test.js
 create mode 100644 src/services/keyboardHighlight.js

diff --git a/src/components/TutorialHandsKeyboard.js b/src/components/TutorialHandsKeyboard.js
index ccd7b15dd..4a962e1ee 100644
--- a/src/components/TutorialHandsKeyboard.js
+++ b/src/components/TutorialHandsKeyboard.js
@@ -4,12 +4,15 @@ import Keyboard from './Keyboard';
 import RightHand from './RightHand';
 import LeftHand from './LeftHand';
 
+import {setHandsForKeyPressed} from '../services/keyboardHighlight';
+
 const LessonTutorialHandsKeyboard = ({ currentKey }) => {
+  const { leftHandImage, rightHandImage } = setHandsForKeyPressed(currentKey);
   return (
     <div className="keyboard-hands row">
-      <LeftHand />
-      <Keyboard currentKey={currentKey}/>
-      <RightHand />
+      <LeftHand img={leftHandImage} />
+      <Keyboard currentKey={currentKey} />
+      <RightHand img={rightHandImage} />
     </div>
   )
 }
diff --git a/src/services/__tests__/keyboardHighlight.test.js b/src/services/__tests__/keyboardHighlight.test.js
new file mode 100644
index 000000000..8a9e80a45
--- /dev/null
+++ b/src/services/__tests__/keyboardHighlight.test.js
@@ -0,0 +1,11 @@
+import {_setHandsForKeyPressed} from '../keyboardHighlight';
+
+describe('Keyboard hand highlighting', () => {
+  test('Sets retrieves img for key', () => {
+    const keyPressed = 'a';
+    const images = {'a': ['pathForLeft', 'pathForRight']};
+    const { leftHandImage, rightHandImage } = _setHandsForKeyPressed(keyPressed, images);
+    expect(leftHandImage).toEqual('pathForLeft');
+    expect(rightHandImage).toEqual('pathForRight');
+  });
+});
diff --git a/src/services/keyboardHighlight.js b/src/services/keyboardHighlight.js
new file mode 100644
index 000000000..5a6fc2934
--- /dev/null
+++ b/src/services/keyboardHighlight.js
@@ -0,0 +1,120 @@
+
+export function setHandsForKeyPressed(keyPressed) {
+  return _setHandsForKeyPressed(keyPressed, imageForCharacter);
+};
+
+export function _setHandsForKeyPressed(keyPressed, images) {
+  // This should never happen since all possible keys should be 
+  // registered in imgForCharacter
+  if (!(keyPressed in imageForCharacter)) {
+    return { leftHandImage:'', rightHandImage: ''};
+  }
+
+  const [leftHandImage, rightHandImage] = images[keyPressed];
+  return { leftHandImage, rightHandImage };
+};
+
+// The value is an array whose 0 index is the 
+// left hand's image path, and whose first index 
+// is right hand's image path.
+// TODO: remove test paths
+const imageForCharacter = {
+  "A": ['finger-1', 'finger-10'],
+  "a": ['finger-1', 'finger-10'],
+  "B": ['finger-1', 'finger-10'],
+  "b": ['finger-1', 'finger-10'],
+  "C": ['finger-1', 'finger-10'],
+  "c": ['finger-1', 'finger-10'],
+  "D": ['finger-1', 'finger-10'],
+  "d": ['finger-1', 'finger-10'],
+  "E": ['finger-1', 'finger-10'],
+  "e": ['finger-1', 'finger-10'],
+  "F": ['finger-1', 'finger-10'],
+  "f": ['finger-1', 'finger-10'],
+  "G": ['finger-1', 'finger-10'],
+  "g": ['finger-1', 'finger-10'],
+  "H": ['finger-1', 'finger-10'],
+  "h": ['finger-1', 'finger-10'],
+  "I": ['finger-1', 'finger-10'],
+  "i": ['finger-1', 'finger-10'],
+  "J": ['finger-1', 'finger-10'],
+  "j": ['finger-1', 'finger-10'],
+  "K": ['finger-1', 'finger-10'],
+  "k": ['finger-1', 'finger-10'],
+  "L": ['finger-1', 'finger-10'],
+  "l": ['finger-1', 'finger-10'],
+  "M": ['finger-1', 'finger-10'],
+  "m": ['finger-1', 'finger-10'],
+  "N": ['finger-1', 'finger-10'],
+  "n": ['finger-1', 'finger-10'],
+  "O": ['finger-1', 'finger-10'],
+  "o": ['finger-1', 'finger-10'],
+  "P": ['finger-1', 'finger-10'],
+  "p": ['finger-1', 'finger-10'],
+  "Q": ['finger-1', 'finger-10'],
+  "q": ['finger-1', 'finger-10'],
+  "R": ['finger-1', 'finger-10'],
+  "r": ['finger-1', 'finger-10'],
+  "S": ['finger-1', 'finger-10'],
+  "s": ['finger-1', 'finger-10'],
+  "T": ['finger-1', 'finger-10'],
+  "t": ['finger-1', 'finger-10'],
+  "U": ['finger-1', 'finger-10'],
+  "u": ['finger-1', 'finger-10'],
+  "V": ['finger-1', 'finger-10'],
+  "v": ['finger-1', 'finger-10'],
+  "W": ['finger-1', 'finger-10'],
+  "w": ['finger-1', 'finger-10'],
+  "X": ['finger-1', 'finger-10'],
+  "x": ['finger-1', 'finger-10'],
+  "Y": ['finger-1', 'finger-10'],
+  "y": ['finger-1', 'finger-10'],
+  "Z": ['finger-1', 'finger-10'],
+  "z": ['finger-1', 'finger-10'],
+  "&nbsp;": ['finger-1', 'finger-10'],
+  "comma": ['finger-1', 'finger-10'],
+  "period": ['finger-1', 'finger-10'],
+  "apostrophe": ['finger-1', 'finger-10'],
+  "semicolon": ['finger-1', 'finger-10'],
+  "f-slash": ['finger-1', 'finger-10'],
+  "questionmark": ['finger-1', 'finger-10'],
+  "exclamationmark": "finger-3, finger-10"
+}
+
+export const mapToSpecialKeys = {
+  "~": "`",
+  "!": "1",
+  "@": "2",
+  "#": "3",
+  "$": "4",
+  "%": "5",
+  "^": "6",
+  "&": "7",
+  "*": "8",
+  "(": "9",
+  ")": "0",
+  "_": "-",
+  "+": "=",
+    "|": "\\",
+  "{": "[",
+  "}": "]",
+  ":": ";",
+  '"': "'",
+  "<": ",",
+  ">": ".",
+  "?": "/"
+};
+
+export const specialKeyNames = {
+  ";": "semicolon",
+  "[": "bracket-r",
+  "]": "bracket-l",
+  "`": "tick",
+  "=": "equal",
+  "-": "minus",
+  "/": "f-slash",
+  ".": "period",
+  ",": "comma"
+}
+
+  export const shiftedKeys = ["~", "!", "@", "#", "$", "%", "^", "&amp;", "*", "(", ")", "_", "+", "|", "{", "}", ":", '"', "&lt;", "?"]
\ No newline at end of file