Add: highlightOn/OffFinger

src/game/typing/practice/hand.js

@@ -3,9 +3,11 @@ class Hand {
 	constructor(keyMapper) {
 		this.keyMapper = keyMapper;
 		this.pressingFinger = KeyButton.NONE_FINGER;
+		this.prevFingerSprite = null;
 
 		this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
 		this.hand.anchor.set(0.5);
+		this.hand.scale.set(2);
 
 		this.thumb = game.add.image(0, 0, "hand_thumb");
 		this.hand.addChild(this.thumb);
@@ -18,9 +20,6 @@ class Hand {
 		this.little_finger = game.add.image(0, 0, "hand_ring_finger");
 		this.hand.addChild(this.little_finger);
 
-		this.hand.scale.set(2);
-		// this.hand.anchor.set(0.5);
-
 		let mask = game.add.graphics();
 		mask.beginFill(0xffffff);
 		mask.drawRect(100, 300, 1028, 400);
@@ -35,6 +34,11 @@ class Hand {
 	moveTo(key) {
 	}
 
+	moveToDefaultPosition() {
+		this.moveRow(3, null);
+		this.unhighlightOffFinger(KeyButton.NONE_FINGER);
+	}
+
 
 	moveRow(rowNo, key) {
 		let rowIndex = rowNo - 1;
@@ -47,53 +51,51 @@ class Hand {
 	}
 
 
-	pressFinger(finger) {
-		if(this.pressingFinger !== finger) {
-			unpressFinger(this.pressingFinger);
-		}
-
-		switch(finger) {
+	getFingerSprite(fingerNo) {
+		let fingerSprite = null;
+		switch(fingerNo) {
 			case KeyButton.THUMB:
-			prevFinger = this.thumb;
+			fingerSprite = this.thumb;
 			break;
 			case KeyButton.INDEX_FINGER:
-			prevFinger = this.thumb;
+			case KeyButton.INDEX_FINGER_BASELINE:
+			fingerSprite = this.index_finger;
 			break;
 			case KeyButton.MIDDLE_FINGER:
-			prevFinger = this.thumb;
+			fingerSprite = this.middle_finger;
 			break;
 			case KeyButton.RING_FINGER:
-			prevFinger = this.thumb;
+			fingerSprite = this.ring_filger;
 			break;
 			case KeyButton.LITTLE_FINGER:
-			prevFinger = this.thumb;
+			fingerSprite = this.little_finger;
 			break;
 		}
-		if(prevFinger !== null)
-			prevFinger.tint = 0x0000ff;
+		return fingerSprite;
 	}
 
-	unpressFinger(finger) {
-		let prevFinger = null;
-		switch(finger) {
-			case KeyButton.THUMB:
-			prevFinger = this.thumb;
-			break;
-			case KeyButton.INDEX_FINGER:
-			prevFinger = this.thumb;
-			break;
-			case KeyButton.MIDDLE_FINGER:
-			prevFinger = this.thumb;
-			break;
-			case KeyButton.RING_FINGER:
-			prevFinger = this.thumb;
-			break;
-			case KeyButton.LITTLE_FINGER:
-			prevFinger = this.thumb;
-			break;
-		}
-		if(prevFinger !== null)
-			prevFinger.tint = 0xffffff;
+	highlightOnFinger(fingerNo) {
+		console.log(fingerNo);
+		console.log(this);
+		let pressingFingerSprite = this.getFingerSprite(fingerNo);
+		if(pressingFingerSprite === this.prevFingerSprite)
+			return;
+
+		if(this.prevFingerSprite !== null)
+			this.unhighlightOffFinger();
+
+		if(pressingFingerSprite !== null)
+			pressingFingerSprite.tint = 0xffff00;
+
+		this.prevFingerSprite = pressingFingerSprite;
+	}
+
+	unhighlightOffFinger() {
+		if(this.prevFingerSprite === null)
+			return;
+		this.prevFingerSprite.tint = 0xffffff;
+
+		this.prevFingerSprite = null;
 	}
 
 }
@@ -114,10 +116,6 @@ class LeftHand extends Hand {
 		this.moveToDefaultPosition();
 	}
 
-	moveToDefaultPosition() {
-		this.moveRow(3, null);
-	}
-
 	moveTo(key) {
 		if(key === undefined)
 			return;
@@ -138,6 +136,8 @@ class LeftHand extends Hand {
 			this.moveColumn(5, key);
 			break;
 		}
+
+		this.highlightOnFinger(key.fingerType);
 	}
 
 	moveColumn(rowNo, key) {
@@ -183,10 +183,6 @@ class RightHand extends Hand {
 		this.moveToDefaultPosition();
 	}
 
-	moveToDefaultPosition() {
-		this.moveRow(3, null);
-	}
-
 	moveTo(key) {
 		if(key === undefined)
 			return;
@@ -207,6 +203,8 @@ class RightHand extends Hand {
 			this.moveColumn(5, key);
 			break;
 		}
+
+		this.highlightOnFinger(key.fingerType);
 	}
 
 	moveColumn(rowNo, key) {

src/game/typing/practice/key_button.js

@@ -239,4 +239,4 @@ KeyButton.INDEX_FINGER				= 2;
 KeyButton.INDEX_FINGER_BASELINE		= 3;
 KeyButton.MIDDLE_FINGER				= 4;
 KeyButton.RING_FINGER				= 5;
-KeyButton.LITTLE_FINGER				= 5;
+KeyButton.LITTLE_FINGER				= 6;