jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: key highlight

Browse Source
This commit is contained in:
Jisang Park
2018-06-19 16:18:00 +09:00
parent b9957a5a36
commit e7ce9c2e10
3 changed files with 105 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/typing/practice/game.js
+31 -3
View File
@@ -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
+40 -53
View File
@@ -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;
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;
src/game/typing/practice/keyboard.js
+34
View File
@@ -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);