Add: key highlight

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();
 	}
 

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_ICON					= "";
-KeyButton.NONE_BUTTON_TEXT	= "";
+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.NONE_HAND					= 0;
-KeyButton.LEFT_HAND			= 1;
+KeyButton.LEFT_HAND					= 1;
-KeyButton.RIGHT_HAND		= 2;
+KeyButton.RIGHT_HAND				= 2;
-KeyButton.BOTH_HAND			= 3;
+KeyButton.BOTH_HAND					= 3;
 
-KeyButton.NONE_FINGER			= 0;
+KeyButton.NONE_FINGER				= 0;
-KeyButton.THUMB					= 1;
+KeyButton.THUMB						= 1;
-KeyButton.INDEX_FINGER			= 2;
+KeyButton.INDEX_FINGER				= 2;
-KeyButton.INDEX_FINGER_BASELINE	= 3;
+KeyButton.INDEX_FINGER_BASELINE		= 3;
-KeyButton.MIDDLE_FINGER			= 4;
+KeyButton.MIDDLE_FINGER				= 4;
-KeyButton.RING_FINGER			= 5;
+KeyButton.RING_FINGER				= 5;
-KeyButton.LITTLE_FINGER			= 5;
+KeyButton.LITTLE_FINGER				= 5;

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);