From ba3b88793b8c146a1160eb32d5482575d191b298 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Wed, 20 Jun 2018 09:12:08 +0900 Subject: [PATCH] Add: move hands with keys --- src/game/typing/practice/game.js | 63 +++++++++------- src/game/typing/practice/hand.js | 105 +++++++++++++++++++-------- src/game/typing/practice/keyboard.js | 44 +++++------ 3 files changed, 132 insertions(+), 80 deletions(-) diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js index 62f6673..cc05ec7 100644 --- a/src/game/typing/practice/game.js +++ b/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); - - /* - 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; - */ - + // hands 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(); } diff --git a/src/game/typing/practice/hand.js b/src/game/typing/practice/hand.js index dec1b1e..30698e1 100644 --- a/src/game/typing/practice/hand.js +++ b/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) { - let rowIndex = no - 1; + moveRow(rowNo, key) { + 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 "keyT": - case "keyG": - case "keyB": - this.moveColumn(5); + case "Key5": + case "KeyT": + case "KeyG": + case "KeyB": + this.moveColumn(5, key); break; } } - moveColumn(no) { - let colIndex = no - 1; - this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex; + moveColumn(rowNo, key) { + let rowIndex = rowNo - 1; + 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 "keyT": - case "keyG": - case "keyB": - this.moveColumn(5); + case "Key5": + case "KeyT": + case "KeyG": + case "KeyB": + this.moveColumn(5, key); break; } } - moveColumn(no) { - let colIndex = no - 1; - this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex; + moveColumn(rowNo, key) { + let rowIndex = rowNo - 1; + 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; + } } } diff --git a/src/game/typing/practice/keyboard.js b/src/game/typing/practice/keyboard.js index 79f3e08..acef5b6 100644 --- a/src/game/typing/practice/keyboard.js +++ b/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(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 { + if(key === undefined) { 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) {