Add: move hands with keys

src/game/typing/practice/game.js

@@ -52,6 +52,7 @@ class TypingPractice {
 			.addColor(textPreviewColor[0], 0);
 
 
+		// keyboard
 		this.keyMapper = new KeyMapper();
 		this.keyboard = null;
 		if(sessionStorageManager.playingAppName.indexOf("korean") > 0)
@@ -64,27 +65,12 @@ class TypingPractice {
 		}
 		this.shiftKey = game.input.keyboard.addKey(Phaser.Keyboard.SHIFT);
 
-
+		// hands
-		/*
-		this.hand_left = game.add.image(370, 680, "hand_left");
-		this.hand_left.scale.set(2);
-		this.hand_left.anchor.set(0.5);
-
-		this.hand_right = game.add.image(630, 680, "hand_right");
-		this.hand_right.scale.set(2);
-		this.hand_right.anchor.set(0.5);
-
-		let mask = game.add.graphics();
-		mask.beginFill(0xffffff);
-		mask.drawRect(100, 300, 1028, 400);
-		this.hand_left.mask = mask;
-		this.hand_right.mask = mask;
-		*/
-
 		this.leftHand = new LeftHand(this.keyMapper);
 		this.rightHand = new RightHand(this.keyMapper);
 
 
+
 		// bottom
 		let screenBottom = new ScreenBottom();
 		screenBottom.makeBottomLine();
@@ -99,7 +85,8 @@ class TypingPractice {
 
 	startGame() {
 		this.showTypingPracticeContents();
-		this.showHighlightKey()
+		this.showHighlightKey();
+		this.moveHands();
 		this.showPlayingWordNumber();
 	}
 
@@ -113,6 +100,9 @@ class TypingPractice {
 		this.textTypingContent.clearColors();
 		this.textTypingContent.addColor(TypingPractice.COLOR_CONTENT_RIGHT, 0);
 		this.textTypingContent.text = "= 연습 끝 =";
+
+		this.leftHand.moveToDefaultPosition();
+		this.rightHand.moveToDefaultPosition();
 		/*
 		sessionStorageManager.record = this.typingRecordTotal;
 		if(sessionStorageManager.record > sessionStorageManager.bestRecord)
@@ -249,15 +239,37 @@ class TypingPractice {
 			return;
 
 		this.keyboard.showHighlight(typingText, this.leftHand, this.rightHand);
-
-		// let key = this.keyboard.getKeyOfText(typingText);
-		// if(key.handSide == KeyButton.LEFT_HAND) {
-		// 	this.leftHand.moveRow(key.row);
-		// } else if(key.handSide == KeyButton.LEFT_HAND) {
-		// 	this.rightHand.moveRow(key.row);
-		// }
 	}
 
+	moveHands() {
+		let typingText = this.typingRandomContents[this.typingIndex];
+		if(typingText === undefined)
+			return;
+
+		let key = this.keyboard.getKeyOfText(typingText);
+		let handSide = key.handSide;
+		if(handSide === KeyButton.LEFT_HAND) {
+			this.leftHand.moveTo(key);
+
+			if(this.keyMapper.isShiftText(typingText)) {
+				let shiftRightKey = this.keyboard.getKey("ShiftRight");
+				shiftRightKey.showHighlight();
+				this.rightHand.moveTo(shiftRightKey);
+			} else {
+				this.rightHand.moveToDefaultPosition();
+			}
+		} else {
+			this.rightHand.moveTo(key);
+
+			if(this.keyMapper.isShiftText(typingText)) {
+				let shiftLeftKey = this.keyboard.getKey("ShiftLeft");
+				shiftLeftKey.showHighlight();
+				this.leftHand.moveTo(shiftLeftKey);
+			} else {
+				this.leftHand.moveToDefaultPosition();
+			}
+		}
+	}
 
 	getKeyCode(text) {
 		return this.keyMapper.getKeyIDOfText(text);
@@ -301,6 +313,7 @@ class TypingPractice {
 		this.typingIndex++;
 		this.showTypingPracticeContents();
 		this.showHighlightKey();
+		this.moveHands();
 		this.showPlayingWordNumber();
 	}
 

src/game/typing/practice/hand.js

@@ -2,7 +2,6 @@ class Hand {
 
 	constructor(keyMapper) {
 		this.keyMapper = keyMapper;
-		console.log(this.keyMapper);
 		this.pressingFinger = KeyButton.NONE_FINGER;
 
 		this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
@@ -37,14 +36,14 @@ class Hand {
 	}
 
 
-	moveRow(no) {
+	moveRow(rowNo, key) {
-		let rowIndex = no - 1;
+		let rowIndex = rowNo - 1;
 		this.hand.y = Hand.DEFAULT_Y_PX + Keyboard.DEFAULT_KEY_SIZE_PX * rowIndex;
 
-		this.moveColumn(no);
+		this.moveColumn(rowNo, key);
 	}
 
-	moveColumn(no) {
+	moveColumn(rowNo, key) {
 	}
 
 
@@ -107,36 +106,60 @@ class LeftHand extends Hand {
 	constructor(keyMapper) {
 		super(keyMapper);
 
-		this.moveRow(3);
 		this.move(this.thumb, 126, -50);
 		this.move(this.index_finger, 96, -102);
 		this.move(this.middle_finger, 58, -116);
 		this.move(this.ring_filger, 32, -110);
 		this.move(this.little_finger, 4, -106);
+		this.moveToDefaultPosition();
+	}
+
+	moveToDefaultPosition() {
+		this.moveRow(3, null);
 	}
 
 	moveTo(key) {
-		console.log(key);
+		if(key === undefined)
+			return;
+
+		// console.log(key);
 		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
 
 		if(keyCode != "Space")
-			this.moveRow(key.row);
+			this.moveRow(key.row, key);
 		else
-			this.moveRow(3);
+			this.moveRow(3, key);
 
 		switch(key.keyCode) {
-			case "key5":
+			case "Key5":
-			case "keyT":
+			case "KeyT":
-			case "keyG":
+			case "KeyG":
-			case "keyB":
+			case "KeyB":
-			this.moveColumn(5);
+			this.moveColumn(5, key);
 			break;
 		}
 	}
 
-	moveColumn(no) {
+	moveColumn(rowNo, key) {
-		let colIndex = no - 1;
+		let rowIndex = rowNo - 1;
-		this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex;
+		this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
+
+		if(key === null)
+			return;
+
+		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+		switch(keyCode) {
+			case "Key5":
+			case "KeyT":
+			case "KeyG":
+			case "KeyB":
+			this.hand.x += Keyboard.DEFAULT_KEY_SIZE_PX;
+			break;
+
+			case "ShiftLeft":
+			this.hand.x = LeftHand.DEFAULT_X_PX;
+			break;
+		}
 	}
 
 }
@@ -152,36 +175,60 @@ class RightHand extends Hand {
 
 		this.hand.scale.x *= -1;
 
-		this.moveRow(3);
 		this.move(this.thumb, 126, -50);
 		this.move(this.index_finger, 96, -102);
 		this.move(this.middle_finger, 58, -116);
 		this.move(this.ring_filger, 32, -110);
 		this.move(this.little_finger, 4, -106);
+		this.moveToDefaultPosition();
+	}
+
+	moveToDefaultPosition() {
+		this.moveRow(3, null);
 	}
 
 	moveTo(key) {
-		console.log(key);
+		if(key === undefined)
+			return;
+
+		// console.log(key);
 		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
 
 		if(keyCode != "Space")
-			this.moveRow(key.row);
+			this.moveRow(key.row, key);
 		else
-			this.moveRow(3);
+			this.moveRow(3, key);
 
 		switch(key.keyCode) {
-			case "key5":
+			case "Key5":
-			case "keyT":
+			case "KeyT":
-			case "keyG":
+			case "KeyG":
-			case "keyB":
+			case "KeyB":
-			this.moveColumn(5);
+			this.moveColumn(5, key);
 			break;
 		}
 	}
 
-	moveColumn(no) {
+	moveColumn(rowNo, key) {
-		let colIndex = no - 1;
+		let rowIndex = rowNo - 1;
-		this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex;
+		this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
+
+		if(key === null)
+			return;
+
+		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+		switch(keyCode) {
+			case "Key6":
+			case "KeyY":
+			case "KeyH":
+			case "KeyN":
+			this.hand.x -= Keyboard.DEFAULT_KEY_SIZE_PX;
+			break;
+
+			case "ShiftRight":
+			this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
+			break;
+		}
 	}
 
 }

src/game/typing/practice/keyboard.js

@@ -60,26 +60,10 @@ class Keyboard {
 			this.allKeyHash["ShiftLeft"].hideHighlight();
 	}
 
-	showHighlight(text, leftHand, rightHand) {
+	showHighlight(text) {
 		let keyID = this.keyMapper.getKeyIDOfText(text);
 		let key = this.allKeyHash[keyID];
 		key.showHighlight();
-
-		if(!this.keyMapper.isShiftText(text))
-			return;
-
-		let handSide = key.handSide;
-		if(handSide === KeyButton.LEFT_HAND) {
-			this.allKeyHash["ShiftRight"].showHighlight();
-
-			leftHand.moveTo(key);
-			rightHand.moveTo(this.allKeyHash["ShiftRight"]);
-		} else {
-			this.allKeyHash["ShiftLeft"].showHighlight();
-
-			rightHand.moveTo(key);
-			leftHand.moveTo(this.allKeyHash["ShiftLeft"]);
-		}
 	}
 
 	getKeyOfText(text) {
@@ -87,6 +71,10 @@ class Keyboard {
 		return this.allKeyHash[keyID];
 	}
 
+	getKey(keyID) {
+		return this.allKeyHash[keyID];
+	}
+
 	keyDown(char) {
 		let keyCode = char.code;
 		this.setPressedSprite(keyCode);
@@ -95,17 +83,21 @@ class Keyboard {
 	setPressedSprite(keyCode) {
 		let keyID = this.keyMapper.getKeyIDOfText(keyCode);
 		let key = this.allKeyHash[keyID];
-		if(key !== undefined) {
+		if(key === undefined) {
-			if(keyCode === "Tab" || keyCode === "CapsLock" || keyCode === "MetaLeft" || keyCode === "MetaRight") {
-				// game.time.events.add(Phaser.Timer.SECOND, () => this.onKeyUp(key), this);
-				console.log(keyCode + " is pressed but not show");
-				return;
-			}
-
-			key.setTargetColor();
-		} else {
 			console.log(keyCode+ " is pressed but not registered to KeyMapper");
+			return;
 		}
+
+		switch(keyCode) {
+			case "Tab":
+			case "CapsLock":
+			case "MetaLeft":
+			case "MetaRight":
+			console.log(keyCode + " is pressed but not show");
+			return;
+		}
+
+		key.setTargetColor();
 	}
 
 	keyUp(char) {