Fix: remove setTextBound for keybutton

Fix: word practice text
Fix: move keyboard, hands position
Fix: typing content bg

src/game/typing/lib/typing_content_bg.js

@@ -0,0 +1,43 @@
+class TypingContentBG {
+
+	constructor() {
+	}
+
+	makePracticeContentBG() {
+		let CONTENT_Y = 140;
+
+		let bar = game.add.graphics();
+		if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
+		} else {
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+			bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+		}
+	}
+
+	makeTestContentBG() {
+		let CONTENT_Y = 260;
+
+		let bar = game.add.graphics();
+		if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
+		} else {
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+			bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+		}
+	}
+
+};
+
+TypingContentBG.COLOR_CONTENT_BG			= 0x444444;
+TypingContentBG.COLOR_CONTENT_ALPHABET_BG	= 0x3d3d3d;

src/game/typing/practice/game.js

@@ -25,32 +25,41 @@ class TypingPractice {
 
 
 		// typing content
-		let typingAreaPositionY = 140;
+		let typingContentBG = new TypingContentBG();
-		let bar = game.add.graphics();
+		typingContentBG.makePracticeContentBG();
-		bar.beginFill(0x000000, 0.2);
+
-		bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120);
+		let TYPING_CONTENT_Y = 200;
 
 		textStyleBasic.font = "bold 84px Arial";
+		this.textTypingContent = game.add.text(game.world.centerX, TYPING_CONTENT_Y, "", textStyleBasic)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 1)', 2)
+		.addColor(TypingPractice.COLOR_CONTENT_INPUT, 0);
+		this.textTypingContent.anchor.set(0.5);
 
-		this.textTypingContent = game.add.text(0, 2, "test", textStyleBasic)
+		this.textTypingBracket = game.add.text(game.world.centerX, TYPING_CONTENT_Y, "[      ]", textStyleBasic)
-		.setTextBounds(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-		.addColor(TypingPractice.COLOR_CONTENT_WRONG, 0);
+		.addColor(TypingPractice.COLOR_BRACKET, 0);
+		this.textTypingBracket.anchor.set(0.5);
 
-		textStyleBasic.font = "32px Arial";
+
+		// textStyleBasic.font = "32px Arial";
+		let OFFSET_WORD_X = 70;
 
 		let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
-		this.textTypingContentsDone = game.add.text(0, 2, "test", textStyleBasic)
+		this.textTypingContentsDone = [];
-			.setTextBounds(0, typingAreaPositionY - 50, GAME_SCREEN_SIZE.x, 40)
+		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+			this.textTypingContentsDone[i] = game.add.text(game.world.centerX - 200 - i * OFFSET_WORD_X, TYPING_CONTENT_Y, "", textStyleBasic)
-			.addColor(textDoneColor[0], 0);
+				.addColor(textDoneColor[0], 0);
-
+			this.textTypingContentsDone[i].anchor.set(0.5);
-		let textPreviewColor = [ '#999999', '#888888', '#777777' ];
+		}
-		this.textTypingContentPreview = game.add.text(0, 2, "test", textStyleBasic)
-			.setTextBounds(0, typingAreaPositionY + 130, GAME_SCREEN_SIZE.x, 40)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-			.addColor(textPreviewColor[0], 0);
 
+		let textPreviewColor = [ '#666666', '#888888', '#777777' ];
+		this.textTypingContentPreview = [];
+		for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+			this.textTypingContentPreview[i] = game.add.text(game.world.centerX + 200 + i * OFFSET_WORD_X, TYPING_CONTENT_Y, "", textStyleBasic)
+				.addColor(textPreviewColor[0], 0);
+			this.textTypingContentPreview[i].anchor.set(0.5);
+		}
 
 		// keyboard
 		this.keyMapper = new KeyMapper();
@@ -97,6 +106,12 @@ class TypingPractice {
 	}
 
 	goResult() {
+		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+			this.textTypingContentsDone[i].text = "";
+		}
+
+		this.textTypingBracket.text = "";
+
 		this.textTypingContent.clearColors();
 		this.textTypingContent.addColor(TypingPractice.COLOR_CONTENT_RIGHT, 0);
 		this.textTypingContent.text = "= 연습 끝 =";
@@ -217,29 +232,29 @@ class TypingPractice {
 	}
 
 	showTypingPracticeContents() {
-		// done
+		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
-		let doneIndex = this.typingIndex - 1;
+			let doneIndex = this.typingIndex - i - 1;
-		if(doneIndex < 0)
+			if(doneIndex < 0) {
-			this.textTypingContentsDone.text = "";
+				this.textTypingContentsDone[i].text = "";
-		else
+			} else {
-			this.textTypingContentsDone.text = this.typingRandomContents[doneIndex];
+				this.textTypingContentsDone[i].text = this.typingRandomContents[doneIndex];
+			}
+		}
 
-		if(this.typingIndex === this.typingContentLength) {
+		if(this.typingIndex == this.typingContentLength) {
 			this.textTypingContent.text = "";
 			return;
 		}
 
+		this.textTypingContent.text = this.typingRandomContents[this.typingIndex];
 
-		// typing
+		for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
-		let typingText = this.typingRandomContents[this.typingIndex];
+			let previewIndex = this.typingIndex + i + 1;
-		this.textTypingContent.text = typingText;
+			if(previewIndex < this.typingRandomContents.length)
-
+				this.textTypingContentPreview[i].text = this.typingRandomContents[previewIndex];
-		// preview
+			else
-		let previewIndex = this.typingIndex + 1;
+				this.textTypingContentPreview[i].text = "";
-		if(previewIndex > this.typingRandomContents.length - 1)
+		}
-			this.textTypingContentPreview.text = "";
-		else
-			this.textTypingContentPreview.text = this.typingRandomContents[previewIndex];
 	}
 
 	hideHighlightKey() {
@@ -349,5 +364,6 @@ TypingPractice.OFFSET_RIGHT_ALIGN			= 10;
 
 TypingPractice.WORD_COUNT_FOR_STAGE			= 10;
 
-TypingPractice.COLOR_CONTENT_WRONG			= "#aaaaaa";
+TypingPractice.COLOR_CONTENT_INPUT			= "#dddddd";
+TypingPractice.COLOR_BRACKET				= "#dddd70";
 TypingPractice.COLOR_CONTENT_RIGHT			= "#ffff4d";

src/game/typing/practice/hand.js

@@ -31,7 +31,7 @@ class Hand {
 
 		let mask = game.add.graphics();
 		mask.beginFill(0xffffff);
-		mask.drawRect(100, 300, 1028, 400);
+		mask.drawRect(100, 300, 1028, 360);
 		this.hand.mask = mask;
 	}
 
@@ -84,8 +84,7 @@ class Hand {
 	}
 
 	highlightOnFinger(fingerNo) {
-		console.log(fingerNo);
+		// console.log(fingerNo);
-		console.log(this);
 		let pressingFingerSprite = this.getFingerSprite(fingerNo);
 		if(pressingFingerSprite === this.prevFingerSprite)
 			return;
@@ -94,7 +93,7 @@ class Hand {
 			this.unhighlightOffFinger();
 
 		if(pressingFingerSprite !== null) {
-			console.log(pressingFingerSprite);
+			// console.log(pressingFingerSprite);
 			pressingFingerSprite.tint = 0xffff00;
 			pressingFingerSprite.alpha = 1;
 		}
@@ -113,7 +112,8 @@ class Hand {
 
 }
 
-Hand.DEFAULT_Y_PX		= 580;	// 680;
+Hand.DEFAULT_Y_PX		= 540;	// 680;
+
 
 
 class LeftHand extends Hand {

src/game/typing/practice/key_button.js

@@ -94,39 +94,58 @@ class KeyButton {
 	}
 
 	makeText(setting, textContent) {
-		let offsetX_px = 4;
+		let fontStyle = { };
-		let offsetY_px = 5;
-
-		let width = setting.width - setting.strokeWidthPx * 2 - offsetX_px;
-		let height = setting.height - setting.strokeWidthPx * 2;
-
 		if(this.alignType === KeyButton.NORMAL_KEY)
 			setting.fontStyle.font = "20px Courier New";
 		else
 			setting.fontStyle.font = "11px Courier New";
 
-		let btnText = game.add.text(offsetX_px, offsetY_px, textContent, setting.fontStyle)
+		let OFFSET_X = 4, OFFSET_Y = 3;
-			.setTextBounds(setting.strokeWidthPx, setting.strokeWidthPx, width, height);
+		let textPosX = 0, textPosY = 0;
+		switch(this.alignType) {
+			case KeyButton.NORMAL_KEY:
+			case KeyButton.NORMAL_FUNCTION_KEY:
+			textPosX = setting.strokeWidthPx + setting.width / 2;
+			textPosY = setting.strokeWidthPx + setting.height / 2 + OFFSET_Y;
+			break;
 
-		if(this.alignType === KeyButton.NORMAL_KEY) {
+			case KeyButton.LEFT_FUNCTION_KEY:
-			btnText.boundsAlignH = "center";
+			textPosX = setting.strokeWidthPx + OFFSET_X;
-			btnText.boundsAlignV = "middle";
+			textPosY = setting.strokeWidthPx + setting.height;
-		} else if(this.alignType === KeyButton.LEFT_FUNCTION_KEY) {
+			break;
-			btnText.boundsAlignH = "left";
+
-			btnText.boundsAlignV = "bottom";
+			case KeyButton.CENTER_FUNCTION_KEY:
-		} else if(this.alignType === KeyButton.CENTER_FUNCTION_KEY) {
+			textPosX = setting.strokeWidthPx + setting.width / 2;
-			btnText.boundsAlignH = "center";
+			textPosY = setting.strokeWidthPx + setting.height;
-			btnText.boundsAlignV = "bottom";
+			break;
-		} else if(this.alignType === KeyButton.RIGHT_FUNCTION_KEY) {
+
-			btnText.boundsAlignH = "right";
+			case KeyButton.RIGHT_FUNCTION_KEY:
-			btnText.boundsAlignV = "bottom";
+			textPosX = setting.strokeWidthPx + setting.width - OFFSET_X;
+			textPosY = setting.strokeWidthPx + setting.height;
+			break;
 		}
 
-		// btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+		let buttonText = game.add.text(textPosX, textPosY, textContent, setting.fontStyle);
+		switch(this.alignType) {
+			case KeyButton.NORMAL_KEY:
+			case KeyButton.NORMAL_FUNCTION_KEY:
+			buttonText.anchor.set(0.5);
+			break;
 
-		btnText.text = textContent;
+			case KeyButton.LEFT_FUNCTION_KEY:
+			buttonText.anchor.set(0, 1);
+			break;
 
-		return btnText;
+			case KeyButton.CENTER_FUNCTION_KEY:
+			buttonText.anchor.set(0.5, 1);
+			break;
+
+			case KeyButton.RIGHT_FUNCTION_KEY:
+			buttonText.anchor.set(1, 1);
+			break;
+		}
+
+		return buttonText;
 	}
 
 

src/game/typing/practice/keyboard.js

@@ -129,7 +129,7 @@ class Keyboard {
 
 	keyPress(char) {
 		// self.checkTypingContents(event);
-		console.log(char);
+		// console.log(char);
 		if(game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
 			console.log("shift is pressed");
 	}
@@ -438,7 +438,7 @@ Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX	= Keyboard.DEFAULT_KEY_SIZE_PX;
 Keyboard.KEY_GAP_PX					= 6;
 
 Keyboard.KEYBOARD_OFFSET_POX_X		= 150;
-Keyboard.ROW_1_POX_Y				= 360;
+Keyboard.ROW_1_POX_Y				= 320;
 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;

src/game/typing/test/game.js

@@ -25,55 +25,67 @@ class TypingTest {
 
 
 		// typing content
-		let typingAreaPositionY = 260;
+		let typingContentBG = new TypingContentBG();
-		let bar = game.add.graphics();
+		typingContentBG.makeTestContentBG();
-		bar.beginFill(0x000000, 0.2);
+
-		bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120);
+		let TYPING_CONTENT_Y = 320;
 
 		if(isTypingWordStage())
 			textStyleBasic.font = "bold 84px Arial";
 		else 	// Sentence stage
 			textStyleBasic.font = "bold 48px Arial";
 
-		this.textTypingContent = game.add.text(0, 2, "test", textStyleBasic)
+		this.textTypingContent = game.add.text(
-		.setTextBounds(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120)
+			game.world.centerX, TYPING_CONTENT_Y,
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+			"", textStyleBasic
-		.addColor(TypingTest.COLOR_CONTENT_WRONG, 0);
+		)
+			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+			.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
+		this.textTypingContent.anchor.set(0.5);
 
+		let TYPING_OFFSET_Y = 100;
 		textStyleBasic.font = "32px Arial";
 
 		let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
 		this.textTypingContentsDone = [];
 		this.textTypingRecordsDone = [];
 		for(let i = 0; i < TypingTest.TYPING_CONTENT_DONE_COUNT; i++) {
-			this.textTypingContentsDone[i] = game.add.text(0, 2, "test", textStyleBasic)
+			this.textTypingContentsDone[i] = game.add.text(
-				.setTextBounds(0, typingAreaPositionY - 50 - i * 50, GAME_SCREEN_SIZE.x, 40)
+				game.world.centerX, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * 50,
-				.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+				"", textStyleBasic
+			)
+				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 				.addColor(textDoneColor[i], 0);
+			this.textTypingContentsDone[i].anchor.set(0.5);
 
-			let scorePositionX = 780;
+			let SCORE_POSITION_X = 900;
 			if(isTypingWordStage())
-				scorePositionX = 600;
+				SCORE_POSITION_X = 700;
 
-			this.textTypingRecordsDone[i] = game.add.text(0, 2, "", textStyleBasic)
+			this.textTypingRecordsDone[i] = game.add.text(
-				.setTextBounds(scorePositionX, typingAreaPositionY - 50 - i * 50, 200, 40)
+				SCORE_POSITION_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * 50,
-				.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+				"", textStyleBasic
+			)
+				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 				.addColor(textDoneColor[i], 0);
-
+			this.textTypingRecordsDone[i].anchor.set(0.5);
 		}
 
 		let textPreviewColor = [ '#999999', '#888888', '#777777' ];
 		this.textTypingContentPreview = [];
 		for(let i = 0; i < TypingTest.TYPING_CONTENT_PREVIEW_COUNT; i++) {
-			this.textTypingContentPreview[i] = game.add.text(0, 2, "test", textStyleBasic)
+			this.textTypingContentPreview[i] = game.add.text(
-				.setTextBounds(0, typingAreaPositionY + 130 + i * 50, GAME_SCREEN_SIZE.x, 40)
+				game.world.centerX, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * 50,
-				.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+				"", textStyleBasic
+			)
+				// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 				.addColor(textPreviewColor[i], 0);
+			this.textTypingContentPreview[i].anchor.set(0.5);
 		}
 
 
 		// input text
-		this.inputTextContent = new InputTypeText(game.world.centerX, typingAreaPositionY + 360);
+		this.inputTextContent = new InputTypeText(game.world.centerX, TYPING_CONTENT_Y + 260);
 		this.inputTextContent.anchor.set(0.5);
 		this.inputTextContent.canvasInput.value('');
 		this.inputTextContent.canvasInput.focus();
@@ -288,7 +300,7 @@ class TypingTest {
 
 	resetTypingContent() {
 		this.textTypingContent.clearColors();
-		this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_WRONG, 0);
+		this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
 		this.inputTextContent.canvasInput.value('');
 	}
 
@@ -334,7 +346,7 @@ class TypingTest {
 			// console.log("inputContent.charAt(i) : " + inputContent.charAt(i));
 
 			if(typingContent.charAt(i) != inputContent.charAt(i)) {
-				this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_WRONG, i);
+				this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_INPUT, i);
 				return;
 			}
 		}
@@ -415,5 +427,5 @@ TypingTest.OFFSET_RIGHT_ALIGN			= 10;
 
 TypingTest.WORD_COUNT_FOR_STAGE			= 10;
 
-TypingTest.COLOR_CONTENT_WRONG			= "#aaaaaa";
+TypingTest.COLOR_CONTENT_INPUT			= "#dddddd";
 TypingTest.COLOR_CONTENT_RIGHT			= "#ffff4d";

src/web/client/typing_practice.html

@@ -51,6 +51,7 @@
 		<!-- Test typing : source files -->
 		<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/practice/define_variables.js"></script>
 		<script src="../../game/typing/practice/miss_typing_score.js"></script>

src/web/client/typing_test.html

@@ -51,6 +51,7 @@
 		<!-- Test typing : source files -->
 		<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/test/define_variables.js"></script>
 		<script src="../../game/typing/test/loading.js"></script>