Add: hands

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.leftHand, this.rightHand);
-		this.keyboard.showHighlight(typingText);
+
+		// 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);
+		// }
 	}
 
 

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;

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;
 

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();
+		let key = this.allKeyHash[keyID];
-		console.log(this.allKeyHash[keyID]);
+		key.showHighlight();
 
 		if(!this.keyMapper.isShiftText(text))
 			return;
 
-		let handSide = this.allKeyHash[keyID].handSide;
+		let handSide = key.handSide;
-		if(handSide === KeyButton.LEFT_HAND)
+		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;
+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;

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

src/web/client/typing_practice.html

@@ -56,6 +56,7 @@
 		<script src="../../game/typing/practice/miss_typing_score.js"></script>
 		<script src="../../game/typing/practice/key_mapper.js"></script>
 		<script src="../../game/typing/practice/key_button.js"></script>
+		<script src="../../game/typing/practice/hand.js"></script>
 		<script src="../../game/typing/practice/keyboard.js"></script>
 		<script src="../../game/typing/practice/loading.js"></script>
 		<script src="../../game/typing/practice/game.js"></script>