Fix: show highlight key (incomplete)

src/game/lib/text/input_type_text.js

@@ -1,5 +1,5 @@
 function InputTypeText(x, y) {
-	var bmd = game.add.bitmapData(400, 50);
+	var bmd = game.add.bitmapData(420, 50);
 	var myInput = game.add.sprite(x, y, bmd);
 
 	myInput.canvasInput = new CanvasInput({

src/game/typing/lib/hand.js

@@ -263,6 +263,7 @@ RightHand.prototype.moveColumn = function(rowNo, key) {
 		this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 5;
 		break;
 
+		case "Backspace":
 		case "Backslash":
 		this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 7;
 		break;

src/game/typing/test/game.js

@@ -378,13 +378,15 @@ var TypingTest = {
 	},
 
 	checkTypingContents: function(event) {
+		// var inputContent = this.inputTextContent.canvasInput.value().trim();
+		var inputContent = this.inputTextContent.canvasInput.value();
+		var typingContent = this.typingRandomContents[this.typingIndex];
+
 		if(event.keyCode == Phaser.Keyboard.ENTER ||
 			event.keyCode == Phaser.Keyboard.SPACEBAR) {
 			// console.log("### enter ###");
-			var inputContent = this.inputTextContent.canvasInput.value().trim();
+			// console.log("inputContent : " + inputContent);
-			var typingContent = this.typingRandomContents[this.typingIndex];
+			// console.log("typingContent : " + typingContent);
-			console.log("inputContent : " + inputContent);
-			console.log("typingContent : " + typingContent);
 
 			if(inputContent === typingContent) {
 				this.calculateTypingRecord(typingContent);
@@ -394,23 +396,27 @@ var TypingTest = {
 					this.gameOver();
 					// this.goResult();
 					// this.state.start('TypingTestResult');
-			}
-		}
-		else {
-			// console.log(this.inputTextContent.canvasInput.value());
-			if(this.isTyping == false) {
-				// console.log(event);
-				this.setTimeTypingStart();
-			}
 
-			this.showTypingContentHighlight();
+				return;
+			}
 		}
+
+		// console.log(this.inputTextContent.canvasInput.value());
+		if(this.isTyping == false) {
+			// console.log(event);
+			this.setTimeTypingStart();
+		}
+
+		this.showTypingContentHighlight(inputContent, typingContent);
+
+		this.hideHighlightKey(this.highlightKey);
+		this.highlightKey = this.getHighlioghtKey(inputContent, typingContent);
+		console.log(this.highlightKey);
+		this.showHighlightKey(this.highlightKey);
+		this.moveHands(this.highlightKey);
 	},
 
-	showTypingContentHighlight: function() {
+	showTypingContentHighlight: function(inputContent, typingContent) {
-		var typingContent = this.typingRandomContents[this.typingIndex];
-		var inputContent = this.inputTextContent.canvasInput.value();
-
 		this.textTypingContent.clearColors();
 		this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_RIGHT, 0);
 
@@ -429,6 +435,70 @@ var TypingTest = {
 		}
 	},
 
+	getHighlioghtKey: function(inputContent, typingContent) {
+		var inputLength = inputContent.length;
+		var typingtLength = typingContent.length;
+		var misspelledIndex = -1;
+		for(var i = 0; i < inputLength; i++) {
+			if(inputContent[i] != typingContent[i]) {
+				misspelledIndex = i;
+				break;
+			}
+
+		}
+
+		if(misspelledIndex > -1)
+			return "Backspace";
+
+		return "a";
+	},
+
+	hideHighlightKey: function(highlightKey) {
+		// var prevText = this.typingRandomContents[this.typingIndex];
+		if(highlightKey === undefined)
+			return;
+
+		this.keyboard.hideHighlight(highlightKey);
+	},
+
+	showHighlightKey: function(highlightKey) {
+		// var typingText = this.typingRandomContents[this.typingIndex];
+		if(highlightKey === undefined)
+			return;
+
+		this.keyboard.showHighlight(highlightKey, this.leftHand, this.rightHand);
+	},
+
+	moveHands: function(highlightKey) {
+		// var typingText = this.typingRandomContents[this.typingIndex];
+		if(highlightKey === undefined)
+			return;
+
+		var key = this.keyboard.getKeyOfText(highlightKey);
+		var handSide = key.handSide;
+		if(handSide === KeyButton.LEFT_HAND) {
+			this.leftHand.moveTo(key);
+
+			if(this.keyMapper.isShiftText(highlightKey)) {
+				var shiftRightKey = this.keyboard.getKey("ShiftRight");
+				shiftRightKey.showHighlight();
+				this.rightHand.moveTo(shiftRightKey);
+			} else {
+				this.rightHand.moveToDefaultPosition();
+			}
+		} else {
+			this.rightHand.moveTo(key);
+
+			if(this.keyMapper.isShiftText(highlightKey)) {
+				var shiftLeftKey = this.keyboard.getKey("ShiftLeft");
+				shiftLeftKey.showHighlight();
+				this.leftHand.moveTo(shiftLeftKey);
+			} else {
+				this.leftHand.moveToDefaultPosition();
+			}
+		}
+	},
+
 	calculateTypingRecord: function(typingContent) {
 		// console.log('입력 단어 : ' + this.typingRandomContents[this.typingIndex]);
 

src/web/client/typing_test.html

@@ -85,10 +85,10 @@
 		<script src="../../game/typing/lib/content_progress.js"></script>
 		<script src="../../game/typing/lib/typing_text_manager.js"></script>
 		<script src="../../game/typing/lib/typing_content_bg.js"></script>
-		<script src="../../game/typing/lib/key_mapper.js"></script>
+		<script src="../../game/typing/lib/key_mapper.js?update_date=190515"></script>
 		<script src="../../game/typing/lib/key_button.js"></script>
-		<script src="../../game/typing/lib/hand.js"></script>
+		<script src="../../game/typing/lib/hand.js?update_date=190515"></script>
-		<script src="../../game/typing/lib/keyboard.js"></script>
+		<script src="../../game/typing/lib/keyboard.js?update_date=190515"></script>
 		<script src="../../game/typing/lib/animal.js?update_date=191224"></script>
 		<script src="../../game/typing/lib/animal_list.js?update_date=191224"></script>