Add: keyboard and hand in the typing test stage

src/game/typing/lib/typing_content_bg.js

@@ -24,7 +24,7 @@ TypingContentBG.prototype.makeTestContentBG = function() {
 	var bar = game.add.graphics();
 	if(isKoreanTypingApp()) {
 		bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
-		bar.drawRect(0, contentY, GAME_SCREEN_SIZE.x, 120);
+		bar.drawRect(0, contentY, GAME_SCREEN_SIZE.x, 70);
 	} else {
 		if(isTypingSentenceApp()) {
 			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
@@ -66,5 +66,5 @@ TypingContentBG.COLOR_CONTENT_BG			= 0x444444;
 TypingContentBG.COLOR_CONTENT_ALPHABET_BG	= 0x3d3d3d;
 
 TypingContentBG.POS_Y_CONTENT_BOX_TYPING_PRACTICE	= 140;
-TypingContentBG.POS_Y_CONTENT_BOX_TYPING_TEST		= 260;
+TypingContentBG.POS_Y_CONTENT_BOX_TYPING_TEST		= 180;	// 260;
 TypingContentBG.POS_Y_CONTENT_BOX_TYPING_WHACAMOLE	= 200;

src/game/typing/test/game.js

@@ -39,13 +39,16 @@ var TypingTest = {
 		var typingContentBG = new TypingContentBG();
 		typingContentBG.makeTestContentBG();
 
-		var TYPING_CONTENT_Y = 320;
+		this.animalList = new AnimalList(100);
+
+
+		var TYPING_CONTENT_Y = 220;	// 320;
 
 		if( (isKoreanTypingApp() && isTypingSentenceApp())
 			|| (isEnglishTypingApp() && isTypingSentenceApp()) )
 			textStyleBasic.font = "bold 48px Arial";
 		else
-			textStyleBasic.font = "bold 84px Arial";
+			textStyleBasic.font = "bold 52px Arial";
 
 		this.textTypingContent = game.add.text(
 			game.world.centerX, TYPING_CONTENT_Y,
@@ -55,15 +58,16 @@ var TypingTest = {
 			.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
 		this.textTypingContent.anchor.set(0.5);
 
-		var TYPING_OFFSET_Y = 90;
-		textStyleBasic.font = "32px Arial";
+		var TYPING_OFFSET_Y = 55;
+		var TYPING_TEXT_OFFSET_Y = 35;
+		textStyleBasic.font = "28px Arial";
 
 		var textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
 		this.textTypingContentsDone = [];
 		this.textTypingRecordsDone = [];
 		for(var i = 0; i < TypingTest.TYPING_CONTENT_DONE_COUNT; i++) {
 			this.textTypingContentsDone[i] = game.add.text(
-				game.world.centerX, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * 50,
+				game.world.centerX, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * TYPING_TEXT_OFFSET_Y,
 				"", textStyleBasic
 			)
 				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -75,7 +79,7 @@ var TypingTest = {
 				SCORE_POSITION_X = 700;
 
 			this.textTypingRecordsDone[i] = game.add.text(
-				SCORE_POSITION_X, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * 50,
+				SCORE_POSITION_X, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * TYPING_TEXT_OFFSET_Y,
 				"", textStyleBasic
 			)
 				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -87,7 +91,7 @@ var TypingTest = {
 		this.textTypingContentPreview = [];
 		for(var i = 0; i < TypingTest.TYPING_CONTENT_PREVIEW_COUNT; i++) {
 			this.textTypingContentPreview[i] = game.add.text(
-				game.world.centerX, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * 50,
+				game.world.centerX, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_Y,
 				"", textStyleBasic
 			)
 				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -97,7 +101,7 @@ var TypingTest = {
 
 
 		// input text
-		this.inputTextContent = new InputTypeText(game.world.centerX, TYPING_CONTENT_Y + 260);
+		this.inputTextContent = new InputTypeText(game.world.centerX, TYPING_CONTENT_Y + 100);
 		this.inputTextContent.anchor.set(0.5);
 		this.inputTextContent.canvasInput.value('');
 		this.inputTextContent.canvasInput.focus();
@@ -110,7 +114,32 @@ var TypingTest = {
 		}
 
 
-		this.animalList = new AnimalList(GAME_SCREEN_SIZE.y - 110);
+		// keyboard
+		this.keyMapper = new KeyMapper();
+		this.keyboard = null;
+		if(sessionStorageManager.getPlayingAppName().indexOf("korean") > 0)
+			this.keyboard = new Keyboard(this.keyMapper, Keyboard.KOREAN, Keyboard.NO_OFFSET_POS_Y);
+		else
+			this.keyboard = new Keyboard(this.keyMapper, Keyboard.ENGLISH, Keyboard.NO_OFFSET_POS_Y);
+		this.keyboard.addCallback(
+			Phaser.KeyCode.ESC,	// keyCode
+			null,	// keyDownHandler
+			(function() { this.back(); }).bind(this),	// keyUpHandler
+			"typing_practice"	// callerClassName
+		);
+
+		game.input.keyboard.processKeyPress = (function(event) {
+			if(self.isOnStage === false)
+				return;
+
+			self.checkTypingContents(event);
+		});
+		this.shiftKey = game.input.keyboard.addKey(Phaser.Keyboard.SHIFT);
+
+		// hands
+		this.leftHand = new LeftHand(this.keyMapper);
+		this.rightHand = new RightHand(this.keyMapper);
+
 
 
 		// bottom ui
@@ -472,8 +501,8 @@ var TypingTest = {
 }
 
 
-TypingTest.TYPING_CONTENT_PREVIEW_COUNT	= 3;
-TypingTest.TYPING_CONTENT_DONE_COUNT	= 3;
+TypingTest.TYPING_CONTENT_PREVIEW_COUNT	= 1;	// 3;
+TypingTest.TYPING_CONTENT_DONE_COUNT	= 1;	// 3;
 TypingTest.TYPING_COUNT_PLUS_ENTER		= 1;
 
 TypingTest.OFFSET_RIGHT_ALIGN			= 10;

src/game/typing/test/loading.js

@@ -29,6 +29,7 @@ var Loading = {
 	startLoading: function() {
 		game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
 
+		Hand.loadResources();
 		Animal.loadResources();
 
 

src/web/client/typing_test.html

@@ -85,6 +85,10 @@
 		<script src="../../game/typing/lib/content_progress.js"></script>
 		<script src="../../game/typing/lib/typing_text_manager.js"></script>
 		<script src="../../game/typing/lib/typing_content_bg.js"></script>
+		<script src="../../game/typing/lib/key_mapper.js"></script>
+		<script src="../../game/typing/lib/key_button.js"></script>
+		<script src="../../game/typing/lib/hand.js"></script>
+		<script src="../../game/typing/lib/keyboard.js"></script>
 		<script src="../../game/typing/lib/animal.js?update_date=191224"></script>
 		<script src="../../game/typing/lib/animal_list.js?update_date=191224"></script>