From dc957debe9948c69e85f02d271d11f7901da42a8 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, 12 Jun 2018 18:40:27 +0900 Subject: [PATCH] Add: key color --- src/game/typing/practice/key_button.js | 97 ++++++++++++- src/game/typing/practice/key_mapper.js | 16 --- src/game/typing/practice/keyboard.js | 182 +++++++++++++++---------- 3 files changed, 204 insertions(+), 91 deletions(-) diff --git a/src/game/typing/practice/key_button.js b/src/game/typing/practice/key_button.js index 93c1e01..4f2d0b7 100644 --- a/src/game/typing/practice/key_button.js +++ b/src/game/typing/practice/key_button.js @@ -1,23 +1,94 @@ class KeyButton { - constructor(x, y, width, height, normalText, shiftText, alignType) { + constructor(x, y, width, height, normalText, shiftText, handSide, fingerType, alignType) { this.normalText = normalText; this.shiftText = shiftText; + this.handSide = handSide; + this.fingerType = fingerType; this.alignType = alignType; this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX); this.setting.strokeWidthPx = 2; - this.button = this.makeButtonSprite(this.setting); - this.button.inputEnabled = true; + this.buttonSolid = this.makeButtonSolidSprite(this.setting); + if(handSide == KeyButton.LEFT_HAND) + this.setNormalColor(); + else + this.setPressedColor(); + this.buttonStroke = this.makeButtonStrokeSprite(this.setting); this.buttonText = this.makeText(this.setting, this.normalText); if(this.normalText.length > 0) { - this.button.addChild(this.buttonText); + this.buttonStroke.addChild(this.buttonText); } } - makeButtonSprite(setting) { + setNormalColor() { + switch(this.fingerType) { + case KeyButton.THUMB: + this.buttonSolid.tint = 0x604d4d; + break; + + case KeyButton.INDEX_FINGER: + this.buttonSolid.tint = 0x4d604d; + break; + + case KeyButton.MIDDLE_FINGER: + this.buttonSolid.tint = 0x4d4d60; + break; + + case KeyButton.RING_FINGER: + this.buttonSolid.tint = 0x60604d; + break; + + case KeyButton.LITTLE_FINGER: + this.buttonSolid.tint = 0x4d6060; + break; + + } + } + + setPressedColor() { + switch(this.fingerType) { + case KeyButton.THUMB: + this.buttonSolid.tint = 0xff8080; + break; + + case KeyButton.INDEX_FINGER: + this.buttonSolid.tint = 0x80ff80; + break; + + case KeyButton.MIDDLE_FINGER: + this.buttonSolid.tint = 0x8080ff; + break; + + case KeyButton.RING_FINGER: + this.buttonSolid.tint = 0xffff80; + break; + + case KeyButton.LITTLE_FINGER: + this.buttonSolid.tint = 0x80ffff; + break; + + } + } + + makeButtonSolidSprite(setting) { + let btnTexture = new Phaser.Graphics() + .beginFill(0xffffff, 0.5) + // .lineStyle(setting.strokeWidthPx, 0xFFffff, 1) + .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) + .endFill() + .generateTexture(); + + return game.add.sprite( + setting.x, // - setting.width / 2, + setting.y, // - setting.height / 2, + btnTexture + ); + } + + makeButtonStrokeSprite(setting) { let btnTexture = new Phaser.Graphics() .lineStyle(setting.strokeWidthPx, 0xFFffff, 1) .drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount) @@ -76,6 +147,8 @@ class KeyButton { this.buttonText.text = this.normalText; } + + mouseOut() { this.text.fill = this.setting.textColors.out; this.buttonStroke.tint = this.setting.strokeColors.out; @@ -123,4 +196,16 @@ KeyButton.NORMAL_KEY = "normal_key"; KeyButton.NORMAL_FUNCTION_KEY = "normal_function_key"; KeyButton.LEFT_FUNCTION_KEY = "left_function_key"; KeyButton.CENTER_FUNCTION_KEY = "center_function_key"; -KeyButton.RIGHT_FUNCTION_KEY = "right_function_key"; \ No newline at end of file +KeyButton.RIGHT_FUNCTION_KEY = "right_function_key"; + + +KeyButton.NONE_HAND = 0; +KeyButton.LEFT_HAND = 1; +KeyButton.RIGHT_HAND = 2; +KeyButton.BOTH_HAND = 3; + +KeyButton.THUMB = 0; +KeyButton.INDEX_FINGER = 1; +KeyButton.MIDDLE_FINGER = 2; +KeyButton.RING_FINGER = 3; +KeyButton.LITTLE_FINGER = 4; \ No newline at end of file diff --git a/src/game/typing/practice/key_mapper.js b/src/game/typing/practice/key_mapper.js index 7c6b756..55593b0 100644 --- a/src/game/typing/practice/key_mapper.js +++ b/src/game/typing/practice/key_mapper.js @@ -8,22 +8,6 @@ class KeyTextData { } -KeyTextData.HAND_LEFT = 0; -KeyTextData.HAND_RIGHT = 1; - -KeyTextData.THUMB = 0; -KeyTextData.INDEX_FINGER = 1; -KeyTextData.MIDDLE_FINGER = 2; -KeyTextData.RING_FINGER = 3; -KeyTextData.LITTLE_FINGER = 4; - -KeyTextData.LEFT_HAND = 0; -KeyTextData.RIGHT_HAND = 1; -KeyTextData.BOTH_HAND = 2; -KeyTextData.NONE_HAND = 3; - - - class KeyMapper { constructor() { diff --git a/src/game/typing/practice/keyboard.js b/src/game/typing/practice/keyboard.js index 2b251d8..c7ad132 100644 --- a/src/game/typing/practice/keyboard.js +++ b/src/game/typing/practice/keyboard.js @@ -23,6 +23,8 @@ class Keyboard { this.keyDataList[i].height, this.keyDataList[i].normalText, this.keyDataList[i].shiftText, + this.keyDataList[i].handSide, + this.keyDataList[i].fingerType, this.keyDataList[i].alignType, ); } @@ -49,10 +51,12 @@ class Keyboard { } - makeKeyDataObject(normalText, shiftText, x, y, width, height, alignType) { + makeKeyDataObject(normalText, shiftText, handSide, fingerType, x, y, width, height, alignType) { let keyDataObject = {}; keyDataObject.normalText = normalText; keyDataObject.shiftText = shiftText; + keyDataObject.handSide = handSide; + keyDataObject.fingerType = fingerType; keyDataObject.x = x; keyDataObject.y = y; keyDataObject.width = width; @@ -62,10 +66,12 @@ class Keyboard { return keyDataObject; } - makeNextNormalKeyDataObject(prevKeyData, normalText, shiftText) { + makeNextNormalKeyDataObject(prevKeyData, normalText, shiftText, handSide, fingerType) { return this.makeKeyDataObject( normalText, shiftText, + handSide, + fingerType, prevKeyData.x + prevKeyData.width + Keyboard.KEY_GAP_PX, prevKeyData.y, Keyboard.DEFAULT_KEY_SIZE_PX, @@ -75,29 +81,15 @@ class Keyboard { } - addFunctionKeyData(keyMapper, keyID, x, y, width, height, type) { - let normalText = keyMapper.getNormalText(keyID); - let shiftText = keyMapper.getShiftText(keyID); - - let newKey = this.makeKeyDataObject(normalText, shiftText, x, y, width, height, type); - this.keyDataList[this.keyIndex] = newKey; - this.keyIndex++; - - this.keyHash[keyID] = newKey; - } - - addNextFunctionKeyData(keyMapper, keyID, width, height, type) { - let prevKey = this.keyDataList[this.keyIndex - 1]; + addFunctionKeyData(keyMapper, keyID, handSide, fingerType, x, y, width, height, type) { let normalText = keyMapper.getNormalText(keyID); let shiftText = keyMapper.getShiftText(keyID); let newKey = this.makeKeyDataObject( - normalText, - shiftText, - prevKey.x + prevKey.width + Keyboard.KEY_GAP_PX, - prevKey.y, - width, - height, + normalText, shiftText, + handSide, fingerType, + x, y, + width, height, type ); this.keyDataList[this.keyIndex] = newKey; @@ -106,12 +98,34 @@ class Keyboard { this.keyHash[keyID] = newKey; } - addNextNormalKeyData(keyMapper, keyID) { + addNextFunctionKeyData(keyMapper, keyID, handSide, fingerType, width, height, type) { let prevKey = this.keyDataList[this.keyIndex - 1]; let normalText = keyMapper.getNormalText(keyID); let shiftText = keyMapper.getShiftText(keyID); - let newKey = this.makeNextNormalKeyDataObject(prevKey, normalText, shiftText); + let newKey = this.makeKeyDataObject( + normalText, shiftText, + handSide, fingerType, + prevKey.x + prevKey.width + Keyboard.KEY_GAP_PX, prevKey.y, + width, height, + type + ); + this.keyDataList[this.keyIndex] = newKey; + this.keyIndex++; + + this.keyHash[keyID] = newKey; + } + + addNextNormalKeyData(keyMapper, keyID, handSide, fingerType) { + let prevKey = this.keyDataList[this.keyIndex - 1]; + let normalText = keyMapper.getNormalText(keyID); + let shiftText = keyMapper.getShiftText(keyID); + + let newKey = this.makeNextNormalKeyDataObject( + prevKey, + normalText, shiftText, + handSide, fingerType + ); this.keyDataList[this.keyIndex] = newKey; this.keyIndex++; @@ -125,27 +139,31 @@ class Keyboard { this.addFunctionKeyData( keyMapper, "`", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KEYBOARD_OFFSET__POX_X, Keyboard.ROW_1_POX_Y, Keyboard.DEFAULT_KEY_SIZE_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.NORMAL_FUNCTION_KEY ); - this.addNextNormalKeyData(keyMapper, "1"); - this.addNextNormalKeyData(keyMapper, "2"); - this.addNextNormalKeyData(keyMapper, "3"); - this.addNextNormalKeyData(keyMapper, "4"); - this.addNextNormalKeyData(keyMapper, "5"); - this.addNextNormalKeyData(keyMapper, "6"); - this.addNextNormalKeyData(keyMapper, "7"); - this.addNextNormalKeyData(keyMapper, "8"); - this.addNextNormalKeyData(keyMapper, "9"); - this.addNextNormalKeyData(keyMapper, "0"); - this.addNextNormalKeyData(keyMapper, "-"); - this.addNextNormalKeyData(keyMapper, "="); + this.addNextNormalKeyData(keyMapper, "1", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "2", KeyButton.LEFT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "3", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "4", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "5", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "6", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "7", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "8", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "9", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "0", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "-", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "=", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); this.addNextFunctionKeyData( keyMapper, "backspace", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.BACKSPACE_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY @@ -155,50 +173,56 @@ class Keyboard { this.addFunctionKeyData( keyMapper, "tab", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KEYBOARD_OFFSET__POX_X, Keyboard.ROW_2_POX_Y, Keyboard.TAB_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY ); - this.addNextNormalKeyData(keyMapper, "q"); - this.addNextNormalKeyData(keyMapper, "w"); - this.addNextNormalKeyData(keyMapper, "e"); - this.addNextNormalKeyData(keyMapper, "r"); - this.addNextNormalKeyData(keyMapper, "t"); - this.addNextNormalKeyData(keyMapper, "y"); - this.addNextNormalKeyData(keyMapper, "u"); - this.addNextNormalKeyData(keyMapper, "i"); - this.addNextNormalKeyData(keyMapper, "o"); - this.addNextNormalKeyData(keyMapper, "p"); - this.addNextNormalKeyData(keyMapper, "["); - this.addNextNormalKeyData(keyMapper, "]"); - this.addNextNormalKeyData(keyMapper, "\\"); + this.addNextNormalKeyData(keyMapper, "q", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "w", KeyButton.LEFT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "e", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "r", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "t", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "y", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "u", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "i", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "o", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "p", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "[", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "]", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "\\", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); // row 3 this.addFunctionKeyData( keyMapper, "caps_lock", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KEYBOARD_OFFSET__POX_X, Keyboard.ROW_3_POX_Y, Keyboard.CAPS_LOCK_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY ); - this.addNextNormalKeyData(keyMapper, "a"); - this.addNextNormalKeyData(keyMapper, "s"); - this.addNextNormalKeyData(keyMapper, "d"); - this.addNextNormalKeyData(keyMapper, "f"); - this.addNextNormalKeyData(keyMapper, "g"); - this.addNextNormalKeyData(keyMapper, "h"); - this.addNextNormalKeyData(keyMapper, "j"); - this.addNextNormalKeyData(keyMapper, "k"); - this.addNextNormalKeyData(keyMapper, "l"); - this.addNextNormalKeyData(keyMapper, ";"); - this.addNextNormalKeyData(keyMapper, "'"); + this.addNextNormalKeyData(keyMapper, "a", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "s", KeyButton.LEFT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "d", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "f", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "g", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "h", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "j", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "k", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "l", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, ";", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "'", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); this.addNextFunctionKeyData( keyMapper, "enter", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.ENTER_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY @@ -208,25 +232,29 @@ class Keyboard { this.addFunctionKeyData( keyMapper, "left_shift", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KEYBOARD_OFFSET__POX_X, Keyboard.ROW_4_POX_Y, Keyboard.SHIFT_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY ); - this.addNextNormalKeyData(keyMapper, "z"); - this.addNextNormalKeyData(keyMapper, "x"); - this.addNextNormalKeyData(keyMapper, "c"); - this.addNextNormalKeyData(keyMapper, "v"); - this.addNextNormalKeyData(keyMapper, "b"); - this.addNextNormalKeyData(keyMapper, "n"); - this.addNextNormalKeyData(keyMapper, "m"); - this.addNextNormalKeyData(keyMapper, ","); - this.addNextNormalKeyData(keyMapper, "."); - this.addNextNormalKeyData(keyMapper, "/"); + this.addNextNormalKeyData(keyMapper, "z", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER); + this.addNextNormalKeyData(keyMapper, "x", KeyButton.LEFT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "c", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, "v", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "b", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "n", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, "m", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER); + this.addNextNormalKeyData(keyMapper, ",", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER); + this.addNextNormalKeyData(keyMapper, ".", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER); + this.addNextNormalKeyData(keyMapper, "/", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER); this.addNextFunctionKeyData( keyMapper, "right_shift", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.SHIFT_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY @@ -236,6 +264,8 @@ class Keyboard { this.addFunctionKeyData( keyMapper, "left_ctrl", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KEYBOARD_OFFSET__POX_X, Keyboard.ROW_5_POX_Y, Keyboard.CTRL_KEY_WIDTH_PX, @@ -245,6 +275,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "window", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.WINDOW_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY @@ -252,6 +284,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "left_alt", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.ALT_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY @@ -259,6 +293,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "chinese", + KeyButton.LEFT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.CHINESE_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.LEFT_FUNCTION_KEY @@ -266,6 +302,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "space", + KeyButton.BOTH_HAND, + KeyButton.THUMB, Keyboard.SPACE_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.CENTER_FUNCTION_KEY @@ -273,6 +311,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "korean_english", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY @@ -280,6 +320,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "right_alt", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.ALT_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY @@ -287,6 +329,8 @@ class Keyboard { this.addNextFunctionKeyData( keyMapper, "right_ctrl", + KeyButton.RIGHT_HAND, + KeyButton.LITTLE_FINGER, Keyboard.CTRL_KEY_WIDTH_PX, Keyboard.DEFAULT_KEY_SIZE_PX, KeyButton.RIGHT_FUNCTION_KEY