From e7ce9c2e105fe56d329c998fdd13aa36a9497f01 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: Tue, 19 Jun 2018 16:18:00 +0900 Subject: [PATCH] Add: key highlight --- src/game/typing/practice/game.js | 34 +++++++++- src/game/typing/practice/key_button.js | 93 +++++++++++--------------- src/game/typing/practice/keyboard.js | 34 ++++++++++ 3 files changed, 105 insertions(+), 56 deletions(-) diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js index cabc408..d336804 100644 --- a/src/game/typing/practice/game.js +++ b/src/game/typing/practice/game.js @@ -53,10 +53,11 @@ class TypingPractice { this.keyMapper = new KeyMapper(); + this.keyboard = null; if(sessionStorageManager.playingAppName.indexOf("korean") > 0) - new Keyboard(this.keyMapper, Keyboard.KOREAN); + this.keyboard = new Keyboard(this.keyMapper, Keyboard.KOREAN); else - new Keyboard(this.keyMapper, Keyboard.ENGLISH); + this.keyboard = new Keyboard(this.keyMapper, Keyboard.ENGLISH); game.input.keyboard.processKeyPress = () => { self.checkTypingContents(event); @@ -95,6 +96,7 @@ class TypingPractice { startGame() { this.showTypingPracticeContents(); + this.showHighlightKey() this.showPlayingWordNumber(); } @@ -205,6 +207,7 @@ class TypingPractice { } showTypingPracticeContents() { + // done let doneIndex = this.typingIndex - 1; if(doneIndex < 0) this.textTypingContentsDone.text = ""; @@ -216,8 +219,12 @@ class TypingPractice { return; } - this.textTypingContent.text = this.typingRandomContents[this.typingIndex]; + // typing + let typingText = this.typingRandomContents[this.typingIndex]; + this.textTypingContent.text = typingText; + + // preview let previewIndex = this.typingIndex + 1; if(previewIndex > this.typingRandomContents.length - 1) this.textTypingContentPreview.text = ""; @@ -225,6 +232,24 @@ class TypingPractice { this.textTypingContentPreview.text = this.typingRandomContents[previewIndex]; } + hideHighlightKey() { + let prevText = this.typingRandomContents[this.typingIndex]; + if(prevText === undefined) + return; + + console.log("hide : " + prevText); + this.keyboard.hideHighlight(prevText); + } + + showHighlightKey() { + let typingText = this.typingRandomContents[this.typingIndex]; + if(typingText === undefined) + return; + + console.log("show : " + typingText); + this.keyboard.showHighlight(typingText); + } + getKeyCode(text) { return this.keyMapper.getKeyIDOfText(text); @@ -263,8 +288,11 @@ class TypingPractice { playNextContent() { + this.hideHighlightKey(); + this.typingIndex++; this.showTypingPracticeContents(); + this.showHighlightKey(); this.showPlayingWordNumber(); } diff --git a/src/game/typing/practice/key_button.js b/src/game/typing/practice/key_button.js index 66bedfc..50a9fd7 100644 --- a/src/game/typing/practice/key_button.js +++ b/src/game/typing/practice/key_button.js @@ -24,6 +24,9 @@ class KeyButton { if(this.normalText.length > 0) { this.buttonStroke.addChild(this.buttonText); } + + this.highlightButtonStroke = this.makeHighlightButtonStrokeSprite(this.setting); + this.highlightButtonStroke.alpha = 0; } makeButtonSolidSprite(setting) { @@ -43,7 +46,7 @@ class KeyButton { makeButtonStrokeSprite(setting) { let btnTexture = new Phaser.Graphics() - .lineStyle(setting.strokeWidthPx, 0xFFffff, 1) + .lineStyle(setting.strokeWidthPx, 0xaaaaaa, 1) .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) .generateTexture(); @@ -54,6 +57,20 @@ class KeyButton { ); } + makeHighlightButtonStrokeSprite(setting) { + let strokeWidth = setting.strokeWidthPx * 2; + let btnTexture = new Phaser.Graphics() + .lineStyle(strokeWidth, 0xfffff00, 1) + .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) + .generateTexture(); + + return game.add.sprite( + setting.x - strokeWidth / 4, + setting.y - strokeWidth / 4, + btnTexture + ); + } + makeBaselineStrokeSprite(setting, width, height) { let strokePx = setting.strokeWidthPx; @@ -179,6 +196,15 @@ class KeyButton { } + showHighlight() { + this.highlightButtonStroke.alpha = 1; + } + + hideHighlight() { + this.highlightButtonStroke.alpha = 0; + } + + onShiftPressed() { this.buttonText.text = this.shiftText; } @@ -187,49 +213,10 @@ class KeyButton { this.buttonText.text = this.normalText; } - -/* - mouseOut() { - this.text.fill = this.setting.textColors.out; - this.buttonStroke.tint = this.setting.strokeColors.out; - this.button.tint = this.setting.buttonColors.out; - if(typeof this.buttonIcon !== "undefined") { - this.buttonIcon.tint = this.setting.strokeColors.out; - } - } - - mouseOver() { - this.text.fill = this.setting.textColors.over; - this.buttonStroke.tint = this.setting.strokeColors.over; - this.button.tint = this.setting.buttonColors.over; - if(typeof this.buttonIcon !== "undefined") { - this.buttonIcon.tint = this.setting.strokeColors.over; - } - } - - mouseDown() { - this.text.fill = this.setting.textColors.down; - this.buttonStroke.tint = this.setting.strokeColors.down; - this.button.tint = this.setting.buttonColors.down; - if(typeof this.buttonIcon !== "undefined") { - this.buttonIcon.tint = this.setting.strokeColors.down; - } - } - - buttonDisabled() { - this.text.fill = this.setting.textColors.disabled; - this.buttonStroke.tint = this.setting.strokeColors.disabled; - this.button.tint = this.setting.buttonColors.disabled; - if(typeof this.buttonIcon !== "undefined") { - this.buttonIcon.tint = this.setting.strokeColors.disabled; - } - } -*/ - } -KeyButton.NONE_ICON = ""; -KeyButton.NONE_BUTTON_TEXT = ""; +KeyButton.NONE_ICON = ""; +KeyButton.NONE_BUTTON_TEXT = ""; KeyButton.DEFALUT_ROUND_AMOUNT_PX = 10; @@ -240,15 +227,15 @@ KeyButton.CENTER_FUNCTION_KEY = "center_function_key"; KeyButton.RIGHT_FUNCTION_KEY = "right_function_key"; -KeyButton.NONE_HAND = 0; -KeyButton.LEFT_HAND = 1; -KeyButton.RIGHT_HAND = 2; -KeyButton.BOTH_HAND = 3; +KeyButton.NONE_HAND = 0; +KeyButton.LEFT_HAND = 1; +KeyButton.RIGHT_HAND = 2; +KeyButton.BOTH_HAND = 3; -KeyButton.NONE_FINGER = 0; -KeyButton.THUMB = 1; -KeyButton.INDEX_FINGER = 2; -KeyButton.INDEX_FINGER_BASELINE = 3; -KeyButton.MIDDLE_FINGER = 4; -KeyButton.RING_FINGER = 5; -KeyButton.LITTLE_FINGER = 5; \ No newline at end of file +KeyButton.NONE_FINGER = 0; +KeyButton.THUMB = 1; +KeyButton.INDEX_FINGER = 2; +KeyButton.INDEX_FINGER_BASELINE = 3; +KeyButton.MIDDLE_FINGER = 4; +KeyButton.RING_FINGER = 5; +KeyButton.LITTLE_FINGER = 5; \ No newline at end of file diff --git a/src/game/typing/practice/keyboard.js b/src/game/typing/practice/keyboard.js index d209ea2..52e0879 100644 --- a/src/game/typing/practice/keyboard.js +++ b/src/game/typing/practice/keyboard.js @@ -13,6 +13,10 @@ class Keyboard { this.keyUpReservations = []; + this.highlightKey = null; + this.highlightShiftKey = null; + + game.input.keyboard.addCallbacks(this, this.keyDown, this.keyUp, null); // game.input.keyboard.processKeyDown = this.keyDown; // game.input.keyboard.processKeyUp = this.keyUp; @@ -41,6 +45,36 @@ class Keyboard { } } + hideHighlight(text) { + let keyID = this.keyMapper.getKeyIDOfText(text); + this.allKeyHash[keyID].hideHighlight(); + console.log(this.allKeyHash[keyID]); + + if(!this.keyMapper.isShiftText(text)) + return; + + let handSide = this.allKeyHash[keyID].handSide; + if(handSide === KeyButton.LEFT_HAND) + this.allKeyHash["ShiftRight"].hideHighlight(); + else + this.allKeyHash["ShiftLeft"].hideHighlight(); + } + + showHighlight(text) { + let keyID = this.keyMapper.getKeyIDOfText(text); + this.allKeyHash[keyID].showHighlight(); + console.log(this.allKeyHash[keyID]); + + if(!this.keyMapper.isShiftText(text)) + return; + + let handSide = this.allKeyHash[keyID].handSide; + if(handSide === KeyButton.LEFT_HAND) + this.allKeyHash["ShiftRight"].showHighlight(); + else + this.allKeyHash["ShiftLeft"].showHighlight(); + } + keyDown(char) { let keyCode = char.code; this.setPressedSprite(keyCode);