diff --git a/resources/image/ui/hand.afdesign b/resources/image/ui/hand.afdesign
new file mode 100644
index 0000000..8f6fd7b
Binary files /dev/null and b/resources/image/ui/hand.afdesign differ
diff --git a/resources/image/ui/hand_index_finger.png b/resources/image/ui/hand_index_finger.png
new file mode 100644
index 0000000..859598b
Binary files /dev/null and b/resources/image/ui/hand_index_finger.png differ
diff --git a/resources/image/ui/hand_little_finger.png b/resources/image/ui/hand_little_finger.png
new file mode 100644
index 0000000..958e5d3
Binary files /dev/null and b/resources/image/ui/hand_little_finger.png differ
diff --git a/resources/image/ui/hand_middle_finger.png b/resources/image/ui/hand_middle_finger.png
new file mode 100644
index 0000000..3243ac5
Binary files /dev/null and b/resources/image/ui/hand_middle_finger.png differ
diff --git a/resources/image/ui/hand_palm.png b/resources/image/ui/hand_palm.png
new file mode 100644
index 0000000..09fbf03
Binary files /dev/null and b/resources/image/ui/hand_palm.png differ
diff --git a/resources/image/ui/hand_ring_finger.png b/resources/image/ui/hand_ring_finger.png
new file mode 100644
index 0000000..3f6b90d
Binary files /dev/null and b/resources/image/ui/hand_ring_finger.png differ
diff --git a/resources/image/ui/hand_thumb.png b/resources/image/ui/hand_thumb.png
new file mode 100644
index 0000000..49efb24
Binary files /dev/null and b/resources/image/ui/hand_thumb.png differ
diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js
index d336804..62f6673 100644
--- a/src/game/typing/practice/game.js
+++ b/src/game/typing/practice/game.js
@@ -65,7 +65,7 @@ class TypingPractice {
this.shiftKey = game.input.keyboard.addKey(Phaser.Keyboard.SHIFT);
-/*
+ /*
this.hand_left = game.add.image(370, 680, "hand_left");
this.hand_left.scale.set(2);
this.hand_left.anchor.set(0.5);
@@ -79,7 +79,10 @@ class TypingPractice {
mask.drawRect(100, 300, 1028, 400);
this.hand_left.mask = mask;
this.hand_right.mask = mask;
-*/
+ */
+
+ this.leftHand = new LeftHand(this.keyMapper);
+ this.rightHand = new RightHand(this.keyMapper);
// bottom
@@ -237,7 +240,6 @@ class TypingPractice {
if(prevText === undefined)
return;
- console.log("hide : " + prevText);
this.keyboard.hideHighlight(prevText);
}
@@ -246,8 +248,14 @@ class TypingPractice {
if(typingText === undefined)
return;
- console.log("show : " + typingText);
- this.keyboard.showHighlight(typingText);
+ this.keyboard.showHighlight(typingText, this.leftHand, this.rightHand);
+
+ // let key = this.keyboard.getKeyOfText(typingText);
+ // if(key.handSide == KeyButton.LEFT_HAND) {
+ // this.leftHand.moveRow(key.row);
+ // } else if(key.handSide == KeyButton.LEFT_HAND) {
+ // this.rightHand.moveRow(key.row);
+ // }
}
diff --git a/src/game/typing/practice/hand.js b/src/game/typing/practice/hand.js
new file mode 100644
index 0000000..dec1b1e
--- /dev/null
+++ b/src/game/typing/practice/hand.js
@@ -0,0 +1,189 @@
+class Hand {
+
+ constructor(keyMapper) {
+ this.keyMapper = keyMapper;
+ console.log(this.keyMapper);
+ this.pressingFinger = KeyButton.NONE_FINGER;
+
+ this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
+ this.hand.anchor.set(0.5);
+
+ this.thumb = game.add.image(0, 0, "hand_thumb");
+ this.hand.addChild(this.thumb);
+ this.index_finger = game.add.image(0, 0, "hand_index_finger");
+ this.hand.addChild(this.index_finger);
+ this.middle_finger = game.add.image(0, 0, "hand_middle_finger");
+ this.hand.addChild(this.middle_finger);
+ this.ring_filger = game.add.image(0, 0, "hand_little_finger");
+ this.hand.addChild(this.ring_filger);
+ this.little_finger = game.add.image(0, 0, "hand_ring_finger");
+ this.hand.addChild(this.little_finger);
+
+ this.hand.scale.set(2);
+ // this.hand.anchor.set(0.5);
+
+ let mask = game.add.graphics();
+ mask.beginFill(0xffffff);
+ mask.drawRect(100, 300, 1028, 400);
+ this.hand.mask = mask;
+ }
+
+ move(sprite, x, y) {
+ sprite.x = x;
+ sprite.y = y;
+ }
+
+ moveTo(key) {
+ }
+
+
+ moveRow(no) {
+ let rowIndex = no - 1;
+ this.hand.y = Hand.DEFAULT_Y_PX + Keyboard.DEFAULT_KEY_SIZE_PX * rowIndex;
+
+ this.moveColumn(no);
+ }
+
+ moveColumn(no) {
+ }
+
+
+ pressFinger(finger) {
+ if(this.pressingFinger !== finger) {
+ unpressFinger(this.pressingFinger);
+ }
+
+ switch(finger) {
+ case KeyButton.THUMB:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.INDEX_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.MIDDLE_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.RING_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.LITTLE_FINGER:
+ prevFinger = this.thumb;
+ break;
+ }
+ if(prevFinger !== null)
+ prevFinger.tint = 0x0000ff;
+ }
+
+ unpressFinger(finger) {
+ let prevFinger = null;
+ switch(finger) {
+ case KeyButton.THUMB:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.INDEX_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.MIDDLE_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.RING_FINGER:
+ prevFinger = this.thumb;
+ break;
+ case KeyButton.LITTLE_FINGER:
+ prevFinger = this.thumb;
+ break;
+ }
+ if(prevFinger !== null)
+ prevFinger.tint = 0xffffff;
+ }
+
+}
+
+Hand.DEFAULT_Y_PX = 580; // 680;
+
+
+class LeftHand extends Hand {
+
+ constructor(keyMapper) {
+ super(keyMapper);
+
+ this.moveRow(3);
+ this.move(this.thumb, 126, -50);
+ this.move(this.index_finger, 96, -102);
+ this.move(this.middle_finger, 58, -116);
+ this.move(this.ring_filger, 32, -110);
+ this.move(this.little_finger, 4, -106);
+ }
+
+ moveTo(key) {
+ console.log(key);
+ let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+
+ if(keyCode != "Space")
+ this.moveRow(key.row);
+ else
+ this.moveRow(3);
+
+ switch(key.keyCode) {
+ case "key5":
+ case "keyT":
+ case "keyG":
+ case "keyB":
+ this.moveColumn(5);
+ break;
+ }
+ }
+
+ moveColumn(no) {
+ let colIndex = no - 1;
+ this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex;
+ }
+
+}
+
+LeftHand.DEFAULT_X_PX = 100;
+
+
+
+class RightHand extends Hand {
+
+ constructor(keyMapper) {
+ super(keyMapper);
+
+ this.hand.scale.x *= -1;
+
+ this.moveRow(3);
+ this.move(this.thumb, 126, -50);
+ this.move(this.index_finger, 96, -102);
+ this.move(this.middle_finger, 58, -116);
+ this.move(this.ring_filger, 32, -110);
+ this.move(this.little_finger, 4, -106);
+ }
+
+ moveTo(key) {
+ console.log(key);
+ let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+
+ if(keyCode != "Space")
+ this.moveRow(key.row);
+ else
+ this.moveRow(3);
+
+ switch(key.keyCode) {
+ case "key5":
+ case "keyT":
+ case "keyG":
+ case "keyB":
+ this.moveColumn(5);
+ break;
+ }
+ }
+
+ moveColumn(no) {
+ let colIndex = no - 1;
+ this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * colIndex;
+ }
+
+}
+
+RightHand.DEFAULT_X_PX = 810;
\ No newline at end of file
diff --git a/src/game/typing/practice/key_button.js b/src/game/typing/practice/key_button.js
index 50a9fd7..39a5d5a 100644
--- a/src/game/typing/practice/key_button.js
+++ b/src/game/typing/practice/key_button.js
@@ -1,9 +1,10 @@
class KeyButton {
- constructor(x, y, width, height, normalText, shiftText, handSide, fingerType, alignType) {
+ constructor(x, y, width, height, normalText, shiftText, handSide, row, fingerType, alignType) {
this.normalText = normalText;
this.shiftText = shiftText;
this.handSide = handSide;
+ this.row = row;
this.fingerType = fingerType;
this.alignType = alignType;
diff --git a/src/game/typing/practice/keyboard.js b/src/game/typing/practice/keyboard.js
index 52e0879..79f3e08 100644
--- a/src/game/typing/practice/keyboard.js
+++ b/src/game/typing/practice/keyboard.js
@@ -37,6 +37,7 @@ class Keyboard {
this.keyDataList[i].normalText,
this.keyDataList[i].shiftText,
this.keyDataList[i].handSide,
+ this.keyDataList[i].row,
this.keyDataList[i].fingerType,
this.keyDataList[i].alignType,
);
@@ -48,7 +49,6 @@ 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;
@@ -60,19 +60,31 @@ class Keyboard {
this.allKeyHash["ShiftLeft"].hideHighlight();
}
- showHighlight(text) {
+ showHighlight(text, leftHand, rightHand) {
let keyID = this.keyMapper.getKeyIDOfText(text);
- this.allKeyHash[keyID].showHighlight();
- console.log(this.allKeyHash[keyID]);
+ let key = this.allKeyHash[keyID];
+ key.showHighlight();
if(!this.keyMapper.isShiftText(text))
return;
- let handSide = this.allKeyHash[keyID].handSide;
- if(handSide === KeyButton.LEFT_HAND)
+ let handSide = key.handSide;
+ if(handSide === KeyButton.LEFT_HAND) {
this.allKeyHash["ShiftRight"].showHighlight();
- else
+
+ leftHand.moveTo(key);
+ rightHand.moveTo(this.allKeyHash["ShiftRight"]);
+ } else {
this.allKeyHash["ShiftLeft"].showHighlight();
+
+ rightHand.moveTo(key);
+ leftHand.moveTo(this.allKeyHash["ShiftLeft"]);
+ }
+ }
+
+ getKeyOfText(text) {
+ let keyID = this.keyMapper.getKeyIDOfText(text);
+ return this.allKeyHash[keyID];
}
keyDown(char) {
@@ -131,12 +143,13 @@ class Keyboard {
}
- makeKeyDataObject(keyID, normalText, shiftText, handSide, fingerType, x, y, width, height, alignType) {
+ makeKeyDataObject(keyID, normalText, shiftText, handSide, row, fingerType, x, y, width, height, alignType) {
let keyDataObject = {};
keyDataObject.keyID = keyID;
keyDataObject.normalText = normalText;
keyDataObject.shiftText = shiftText;
keyDataObject.handSide = handSide;
+ keyDataObject.row = row;
keyDataObject.fingerType = fingerType;
keyDataObject.x = x;
keyDataObject.y = y;
@@ -153,6 +166,7 @@ class Keyboard {
normalText,
shiftText,
handSide,
+ prevKeyData.row,
fingerType,
prevKeyData.x + prevKeyData.width + Keyboard.KEY_GAP_PX,
prevKeyData.y,
@@ -163,14 +177,14 @@ class Keyboard {
}
- addFunctionKeyData(keyID, handSide, fingerType, x, y, width, height, type) {
+ addFunctionKeyData(keyID, handSide, row, fingerType, x, y, width, height, type) {
let normalText = this.keyMapper.getNormalText(keyID, this.language);
let shiftText = this.keyMapper.getShiftText(keyID, this.language);
let newKey = this.makeKeyDataObject(
keyID,
normalText, shiftText,
- handSide, fingerType,
+ handSide, row, fingerType,
x, y,
width, height,
type
@@ -187,7 +201,7 @@ class Keyboard {
let newKey = this.makeKeyDataObject(
keyID,
normalText, shiftText,
- handSide, fingerType,
+ handSide, prevKey.row, fingerType,
prevKey.x + prevKey.width + Keyboard.KEY_GAP_PX, prevKey.y,
width, height,
type
@@ -222,8 +236,9 @@ class Keyboard {
this.addFunctionKeyData(
"Backquote",
KeyButton.LEFT_HAND,
+ Keyboard.ROW_1,
KeyButton.LITTLE_FINGER,
- Keyboard.KEYBOARD_OFFSET__POX_X,
+ Keyboard.KEYBOARD_OFFSET_POX_X,
Keyboard.ROW_1_POX_Y,
Keyboard.DEFAULT_KEY_SIZE_PX,
Keyboard.DEFAULT_KEY_SIZE_PX,
@@ -254,8 +269,9 @@ class Keyboard {
this.addFunctionKeyData(
"Tab",
KeyButton.LEFT_HAND,
+ Keyboard.ROW_2,
KeyButton.NONE_FINGER,
- Keyboard.KEYBOARD_OFFSET__POX_X,
+ Keyboard.KEYBOARD_OFFSET_POX_X,
Keyboard.ROW_2_POX_Y,
Keyboard.TAB_KEY_WIDTH_PX,
Keyboard.DEFAULT_KEY_SIZE_PX,
@@ -279,8 +295,9 @@ class Keyboard {
this.addFunctionKeyData(
"CapsLock",
KeyButton.LEFT_HAND,
+ Keyboard.ROW_3,
KeyButton.NONE_FINGER,
- Keyboard.KEYBOARD_OFFSET__POX_X,
+ Keyboard.KEYBOARD_OFFSET_POX_X,
Keyboard.ROW_3_POX_Y,
Keyboard.CAPS_LOCK_KEY_WIDTH_PX,
Keyboard.DEFAULT_KEY_SIZE_PX,
@@ -310,8 +327,9 @@ class Keyboard {
this.addFunctionKeyData(
"ShiftLeft",
KeyButton.LEFT_HAND,
+ Keyboard.ROW_4,
KeyButton.LITTLE_FINGER,
- Keyboard.KEYBOARD_OFFSET__POX_X,
+ Keyboard.KEYBOARD_OFFSET_POX_X,
Keyboard.ROW_4_POX_Y,
Keyboard.SHIFT_KEY_WIDTH_PX,
Keyboard.DEFAULT_KEY_SIZE_PX,
@@ -340,8 +358,9 @@ class Keyboard {
this.addFunctionKeyData(
"ControlLeft",
KeyButton.LEFT_HAND,
+ Keyboard.ROW_5,
KeyButton.NONE_FINGER,
- Keyboard.KEYBOARD_OFFSET__POX_X,
+ Keyboard.KEYBOARD_OFFSET_POX_X,
Keyboard.ROW_5_POX_Y,
Keyboard.CTRL_KEY_WIDTH_PX,
Keyboard.DEFAULT_KEY_SIZE_PX,
@@ -426,9 +445,16 @@ Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX = Keyboard.DEFAULT_KEY_SIZE_PX;
Keyboard.KEY_GAP_PX = 6;
-Keyboard.KEYBOARD_OFFSET__POX_X = 150;
+Keyboard.KEYBOARD_OFFSET_POX_X = 150;
Keyboard.ROW_1_POX_Y = 360;
Keyboard.ROW_2_POX_Y = Keyboard.ROW_1_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
Keyboard.ROW_3_POX_Y = Keyboard.ROW_2_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
Keyboard.ROW_4_POX_Y = Keyboard.ROW_3_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
-Keyboard.ROW_5_POX_Y = Keyboard.ROW_4_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
\ No newline at end of file
+Keyboard.ROW_5_POX_Y = Keyboard.ROW_4_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
+
+
+Keyboard.ROW_1 = 1;
+Keyboard.ROW_2 = 2;
+Keyboard.ROW_3 = 3;
+Keyboard.ROW_4 = 4;
+Keyboard.ROW_5 = 5;
\ No newline at end of file
diff --git a/src/game/typing/practice/loading.js b/src/game/typing/practice/loading.js
index fe21c13..c583320 100644
--- a/src/game/typing/practice/loading.js
+++ b/src/game/typing/practice/loading.js
@@ -34,8 +34,16 @@ class Loading {
startLoading() {
this.game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
- this.game.load.image('hand_left', '../../../resources/image/ui/hand_left.png');
- this.game.load.image('hand_right', '../../../resources/image/ui/hand_right.png');
+
+ this.game.load.image('hand_palm', '../../../resources/image/ui/hand_palm.png');
+ this.game.load.image('hand_thumb', '../../../resources/image/ui/hand_thumb.png');
+ this.game.load.image('hand_index_finger', '../../../resources/image/ui/hand_index_finger.png');
+ this.game.load.image('hand_middle_finger', '../../../resources/image/ui/hand_middle_finger.png');
+ this.game.load.image('hand_little_finger', '../../../resources/image/ui/hand_little_finger.png');
+ this.game.load.image('hand_ring_finger', '../../../resources/image/ui/hand_ring_finger.png');
+
+ // this.game.load.image('hand_left', '../../../resources/image/ui/hand_left.png');
+ // this.game.load.image('hand_right', '../../../resources/image/ui/hand_right.png');
// this.game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');
diff --git a/src/web/client/typing_practice.html b/src/web/client/typing_practice.html
index e4cb2a3..c61bd18 100644
--- a/src/web/client/typing_practice.html
+++ b/src/web/client/typing_practice.html
@@ -56,6 +56,7 @@
+