diff --git a/src/game/lib/text/input_type_text.js b/src/game/lib/text/input_type_text.js index 0616d4b..0df1ba1 100644 --- a/src/game/lib/text/input_type_text.js +++ b/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({ diff --git a/src/game/typing/lib/hand.js b/src/game/typing/lib/hand.js index b4a0466..a31d90e 100644 --- a/src/game/typing/lib/hand.js +++ b/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; diff --git a/src/game/typing/test/game.js b/src/game/typing/test/game.js index 7479f64..db29978 100644 --- a/src/game/typing/test/game.js +++ b/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(); - var typingContent = this.typingRandomContents[this.typingIndex]; - console.log("inputContent : " + inputContent); - 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() { - var typingContent = this.typingRandomContents[this.typingIndex]; - var inputContent = this.inputTextContent.canvasInput.value(); - + showTypingContentHighlight: function(inputContent, typingContent) { 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]); diff --git a/src/web/client/typing_test.html b/src/web/client/typing_test.html index 8d251a4..7a1d3ba 100644 --- a/src/web/client/typing_test.html +++ b/src/web/client/typing_test.html @@ -85,10 +85,10 @@ - + - - + +