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

Add: key color

Browse Source
This commit is contained in:
Jisang Park
2018-06-12 18:40:27 +09:00
parent 7907ae34cf
commit dc957debe9
3 changed files with 204 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/typing/practice/key_button.js
+91 -6
View File
@@ -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";
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;
src/game/typing/practice/key_mapper.js
-16
View File
@@ -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() {
src/game/typing/practice/keyboard.js
+113 -69
View File
@@ -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